Merge pull request #201 from rachel-fenichel/bugfix/horizontal_toolbox_zoom

Fix dragging out of flyout when workspace is zoomed

Author: rachel-fenichel

core/flyout.js

@@ -846,37 +846,7 @@ Blockly.Flyout.prototype.createBlockFunc_ = function(originBlock) {
       return;
     }
     Blockly.Events.disable();
-    // Create the new block by cloning the block in the flyout (via XML).
-    var xml = Blockly.Xml.blockToDom(originBlock);
-    var block = Blockly.Xml.domToBlock(workspace, xml);
-    // Place it in the same spot as the flyout copy.
-    var svgRootOld = originBlock.getSvgRoot();
-    if (!svgRootOld) {
-      throw 'originBlock is not rendered.';
-    }
-    var xyOld = Blockly.getSvgXY_(svgRootOld, workspace);
-    // Scale the scroll (getSvgXY_ did not do this).
-    if (flyout.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
-      var width = workspace.getMetrics().viewWidth - flyout.width_;
-      xyOld.x += width / workspace.scale - width;
-    } else {
-      xyOld.x += flyout.workspace_.scrollX / flyout.workspace_.scale -
-          flyout.workspace_.scrollX;
-    }
-    xyOld.y += flyout.workspace_.scrollY / flyout.workspace_.scale -
-        flyout.workspace_.scrollY;
-    var svgRootNew = block.getSvgRoot();
-    if (!svgRootNew) {
-      throw 'block is not rendered.';
-    }
-    var xyNew = Blockly.getSvgXY_(svgRootNew, workspace);
-    // Scale the scroll (getSvgXY_ did not do this).
-    xyNew.x += workspace.scrollX / workspace.scale - workspace.scrollX;
-    xyNew.y += workspace.scrollY / workspace.scale - workspace.scrollY;
-    if (workspace.toolbox_ && !workspace.scrollbar) {
-      xyNew.x += workspace.toolbox_.width / workspace.scale;
-    }
-    block.moveBy(xyOld.x - xyNew.x, xyOld.y - xyNew.y);
+    var block = Blockly.Flyout.placeNewBlock_(originBlock, workspace, flyout);
     Blockly.Events.enable();
     if (Blockly.Events.isEnabled()) {
       Blockly.Events.setGroup(true);
@@ -895,6 +865,81 @@ Blockly.Flyout.prototype.createBlockFunc_ = function(originBlock) {
   };
 };
 
+/**
+ * Copy a block from the flyout to the workspace and position it correctly.
+ * @param {!Blockly.Block} originBlock The flyout block to copy.
+ * @param {!Blockly.Workspace} workspace The main workspace.
+ * @param {!Blockly.Flyout} flyout The flyout where originBlock originates.
+ * @return {!Blockly.Block} The new block in the main workspace.
+ * @private
+ */
+Blockly.Flyout.placeNewBlock_ = function(originBlock, workspace,
+    flyout) {
+  var blockSvgOld = originBlock.getSvgRoot();
+  if (!blockSvgOld) {
+    throw 'originBlock is not rendered.';
+  }
+  // Figure out where the original block is on the screen, relative to the upper
+  // left corner of the main workspace.
+  var xyOld = Blockly.getSvgXY_(blockSvgOld, workspace);
+  // Take into account that the flyout might have been scrolled horizontally
+  // (separately from the main workspace).
+  // Generally a no-op in vertical mode but likely to happen in horizontal
+  // mode.
+  var scrollX = flyout.workspace_.scrollX;
+  var scale = flyout.workspace_.scale;
+  xyOld.x += scrollX / scale - scrollX;
+  // If the flyout is on the right side, (0, 0) in the flyout is offset to
+  // the right of (0, 0) in the main workspace.  Offset to take that into
+  // account.
+  if (flyout.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
+    scrollX = workspace.getMetrics().viewWidth - flyout.width_;
+    scale = workspace.scale;
+    // Scale the scroll (getSvgXY_ did not do this).
+    xyOld.x += scrollX / scale - scrollX;
+  }
+
+  // Take into account that the flyout might have been scrolled vertically
+  // (separately from the main workspace).
+  // Generally a no-op in horizontal mode but likely to happen in vertical
+  // mode.
+  var scrollY = flyout.workspace_.scrollY;
+  scale = flyout.workspace_.scale;
+  xyOld.y += scrollY / scale - scrollY;
+  // If the flyout is on the bottom, (0, 0) in the flyout is offset to be below
+  // (0, 0) in the main workspace.  Offset to take that into account.
+  if (flyout.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
+    scrollY = workspace.getMetrics().viewHeight - flyout.height_;
+    scale = workspace.scale;
+    xyOld.y += scrollY / scale - scrollY;
+  }
+
+  // Create the new block by cloning the block in the flyout (via XML).
+  var xml = Blockly.Xml.blockToDom(originBlock);
+  var block = Blockly.Xml.domToBlock(workspace, xml);
+  var blockSvgNew = block.getSvgRoot();
+  if (!blockSvgNew) {
+    throw 'block is not rendered.';
+  }
+  // Figure out where the new block got placed on the screen, relative to the
+  // upper left corner of the workspace.  This may not be the same as the
+  // original block because the flyout's origin may not be the same as the
+  // main workspace's origin.
+  var xyNew = Blockly.getSvgXY_(blockSvgNew, workspace);
+  // Scale the scroll (getSvgXY_ did not do this).
+  xyNew.x += workspace.scrollX / workspace.scale - workspace.scrollX;
+  xyNew.y += workspace.scrollY / workspace.scale - workspace.scrollY;
+  // If the flyout is collapsible and the workspace can't be scrolled.
+  if (workspace.toolbox_ && !workspace.scrollbar) {
+    xyNew.x += workspace.toolbox_.width / workspace.scale;
+    xyNew.y += workspace.toolbox_.height / workspace.scale;
+  }
+
+  // Move the new block to where the old block is.
+  block.moveBy(xyOld.x - xyNew.x, xyOld.y - xyNew.y);
+  return block;
+};
+
 /**
  * Filter the blocks on the flyout to disable the ones that are above the
  * capacity limit.