Fix toolbox sizes not being updated properly (#4139)

* Fix toolbox changing size

* Fix flyout changing size

* Fix mutator bumping blocks

* Fix accessing .flyout_

core/flyout_horizontal.js

@@ -367,6 +367,17 @@ Blockly.HorizontalFlyout.prototype.reflowInternal_ = function() {
         this.moveRectToBlock_(block.flyoutRect_, block);
       }
     }
+
+    if (this.targetWorkspace.toolboxPosition == this.toolboxPosition_ &&
+        this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP &&
+        !this.targetWorkspace.getToolbox()) {
+      // This flyout is a simple toolbox. Reposition the workspace so that (0,0)
+      // is in the correct position relative to the new absolute edge (ie
+      // toolbox edge).
+      this.targetWorkspace.translate(
+          0, this.targetWorkspace.scrollY + flyoutHeight);
+    }
+
     // Record the height for .getMetrics_ and .position.
     this.height_ = flyoutHeight;
     this.position();

core/flyout_vertical.js

@@ -376,6 +376,17 @@ Blockly.VerticalFlyout.prototype.reflowInternal_ = function() {
         button.moveTo(x, y);
       }
     }
+
+    if (this.targetWorkspace.toolboxPosition == this.toolboxPosition_ &&
+        this.toolboxPosition_ == Blockly.TOOLBOX_AT_LEFT &&
+        !this.targetWorkspace.getToolbox()) {
+      // This flyout is a simple toolbox. Reposition the workspace so that (0,0)
+      // is in the correct position relative to the new absolute edge (ie
+      // toolbox edge).
+      this.targetWorkspace.translate(
+          this.targetWorkspace.scrollX + flyoutWidth, 0);
+    }
+
     // Record the width for .getMetrics_ and .position.
     this.width_ = flyoutWidth;
     this.position();

core/mutator.js

@@ -234,7 +234,8 @@ Blockly.Mutator.prototype.resizeBubble_ = function() {
   if (this.block_.RTL) {
     width = -workspaceSize.x;
   } else {
-    width = workspaceSize.width + workspaceSize.x;
+    width = workspaceSize.width + workspaceSize.x +
+        this.workspace_.getFlyout().getWidth();
   }
   var height = workspaceSize.height + doubleBorderWidth * 3;
   var flyout = this.workspace_.getFlyout();
@@ -311,7 +312,7 @@ Blockly.Mutator.prototype.setVisible = function(visible) {
     this.rootBlock_.setDeletable(false);
     if (flyout) {
       var margin = flyout.CORNER_RADIUS * 2;
-      var x = flyout.getWidth() + margin;
+      var x = this.rootBlock_.RTL ? flyout.getWidth() + margin : margin;
     } else {
       var margin = 16;
       var x = margin;
@@ -369,12 +370,22 @@ Blockly.Mutator.prototype.workspaceChanged_ = function(e) {
   if (!this.workspace_.isDragging()) {
     var blocks = this.workspace_.getTopBlocks(false);
     var MARGIN = 20;
+
     for (var b = 0, block; (block = blocks[b]); b++) {
       var blockXY = block.getRelativeToSurfaceXY();
-      var blockHW = block.getHeightWidth();
-      if (blockXY.y + blockHW.height < MARGIN) {
-        // Bump any block that's above the top back inside.
-        block.moveBy(0, MARGIN - blockHW.height - blockXY.y);
+
+      // Bump any block that's above the top back inside.
+      if (blockXY.y < MARGIN) {
+        block.moveBy(0, MARGIN - blockXY.y);
+      }
+      // Bump any block overlapping the flyout back inside.
+      if (block.RTL) {
+        var right = -(this.workspace_.getFlyout().getWidth() + MARGIN);
+        if (blockXY.x > right) {
+          block.moveBy(right - blockXY.x, 0);
+        }
+      } else if (blockXY.x < MARGIN) {
+        block.moveBy(MARGIN - blockXY.x, 0);
       }
     }
   }

core/toolbox.js

@@ -472,9 +472,19 @@ Blockly.Toolbox.prototype.handleAfterTreeSelected_ = function(
  * @private
  */
 Blockly.Toolbox.prototype.handleNodeSizeChanged_ = function() {
+  // Reposition the workspace so that (0,0) is in the correct position relative
+  // to the new absolute edge (ie toolbox edge).
+  var workspace = this.workspace_;
+  var rect = this.HtmlDiv.getBoundingClientRect();
+  var newX = this.toolboxPosition == Blockly.TOOLBOX_AT_LEFT ?
+      workspace.scrollX + rect.width : 0;
+  var newY = this.toolboxPosition == Blockly.TOOLBOX_AT_TOP ?
+      workspace.scrollY + rect.height : 0;
+  workspace.translate(newX, newY);
+
   // Even though the div hasn't changed size, the visible workspace
   // surface of the workspace has, so we may need to reposition everything.
-  Blockly.svgResize(this.workspace_);
+  Blockly.svgResize(workspace);
 };
 
 /**