Init block dragger (#4781)

blockly_uncompressed.js

@@ -80,11 +80,12 @@ goog.addDependency('../../core/generator.js', ['Blockly.Generator'], ['Blockly.B
 goog.addDependency('../../core/gesture.js', ['Blockly.Gesture'], ['Blockly.BlockDragger', 'Blockly.BubbleDragger', 'Blockly.Events', 'Blockly.Events.Click', 'Blockly.Tooltip', 'Blockly.Touch', 'Blockly.WorkspaceDragger', 'Blockly.blockAnimations', 'Blockly.browserEvents', 'Blockly.constants', 'Blockly.utils', 'Blockly.utils.Coordinate'], {});
 goog.addDependency('../../core/grid.js', ['Blockly.Grid'], ['Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.userAgent'], {});
 goog.addDependency('../../core/icon.js', ['Blockly.Icon'], ['Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Size', 'Blockly.utils.Svg', 'Blockly.utils.dom'], {});
-goog.addDependency('../../core/inject.js', ['Blockly.inject'], ['Blockly.BlockDragSurfaceSvg', 'Blockly.Css', 'Blockly.DropDownDiv', 'Blockly.Events', 'Blockly.Grid', 'Blockly.Msg', 'Blockly.Options', 'Blockly.ScrollbarPair', 'Blockly.Tooltip', 'Blockly.WorkspaceDragSurfaceSvg', 'Blockly.WorkspaceSvg', 'Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Svg', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.userAgent'], {});
+goog.addDependency('../../core/inject.js', ['Blockly.inject'], ['Blockly.Css', 'Blockly.DropDownDiv', 'Blockly.Events', 'Blockly.Grid', 'Blockly.Msg', 'Blockly.Options', 'Blockly.ScrollbarPair', 'Blockly.Tooltip', 'Blockly.WorkspaceDragSurfaceSvg', 'Blockly.WorkspaceSvg', 'Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Svg', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.userAgent'], {});
 goog.addDependency('../../core/input.js', ['Blockly.Input'], ['Blockly.Connection', 'Blockly.FieldLabel', 'Blockly.constants', 'Blockly.fieldRegistry', 'Blockly.inputTypes'], {'lang': 'es5'});
 goog.addDependency('../../core/input_types.js', ['Blockly.inputTypes'], ['Blockly.connectionTypes'], {});
 goog.addDependency('../../core/insertion_marker_manager.js', ['Blockly.InsertionMarkerManager'], ['Blockly.Events', 'Blockly.blockAnimations', 'Blockly.connectionTypes', 'Blockly.constants'], {'lang': 'es5'});
 goog.addDependency('../../core/interfaces/i_accessibility.js', ['Blockly.IASTNodeLocation', 'Blockly.IASTNodeLocationSvg', 'Blockly.IASTNodeLocationWithBlock', 'Blockly.IKeyboardAccessible'], [], {});
+goog.addDependency('../../core/interfaces/i_block_drag_surface.js', ['Blockly.IBlockDragSurfaceSvg'], [], {});
 goog.addDependency('../../core/interfaces/i_bounded_element.js', ['Blockly.IBoundedElement'], [], {});
 goog.addDependency('../../core/interfaces/i_bubble.js', ['Blockly.IBubble'], [], {});
 goog.addDependency('../../core/interfaces/i_connection_checker.js', ['Blockly.IConnectionChecker'], [], {});

core/block_drag_surface.js

@@ -27,6 +27,7 @@ goog.require('Blockly.utils.Svg');
  * SVG that contains only the currently moving block, or nothing.
  * @param {!Element} container Containing element.
  * @constructor
+ * @implements {Blockly.IBlockDragSurfaceSvg}
  */
 Blockly.BlockDragSurfaceSvg = function(container) {
   /**
@@ -146,6 +147,17 @@ Blockly.BlockDragSurfaceSvg.prototype.translateSurfaceInternal_ = function() {
       'translate3d(' + x + 'px, ' + y + 'px, 0px)');
 };
 
+/**
+ * Translates the entire surface by a relative offset.
+ * @param {number} deltaX Horizontal offset in pixel units.
+ * @param {number} deltaY Vertical offset in pixel units.
+ */
+Blockly.BlockDragSurfaceSvg.prototype.translateBy = function(deltaX, deltaY) {
+  var x = this.surfaceXY_.x + deltaX;
+  var y = this.surfaceXY_.y + deltaY;
+  this.translateSurface(x, y);
+};
+
 /**
  * Translate the entire drag surface during a drag.
  * We translate the drag surface instead of the blocks inside the surface
@@ -210,3 +222,6 @@ Blockly.BlockDragSurfaceSvg.prototype.clearAndHide = function(opt_newSurface) {
   }
   this.surfaceXY_ = null;
 };
+
+Blockly.registry.register(Blockly.registry.Type.BLOCK_DRAG_SURFACE_SVG,
+    Blockly.registry.DEFAULT, Blockly.BlockDragSurfaceSvg);

core/block_dragger.js

@@ -216,6 +216,30 @@ Blockly.BlockDragger.prototype.dragBlock = function(e, currentDragDeltaXY) {
   this.updateCursorDuringBlockDrag_();
 };
 
+/**
+ * Updates the location of the block that is being moved by a certain amount.
+ * TODO: Figure out if this is the correct place for this.
+ * @param {number} deltaX Horizontal offset in pixel units.
+ * @param {number} deltaY Vertical offset in pixel units.
+ */
+Blockly.BlockDragger.prototype.moveBlockWhileDragging = function(deltaX, deltaY) {
+  // Negative because we are trying to offset the amount child block dragger
+  // group is being dragged.
+  // Move the block drag surface.
+  this.workspace_.getBlockDragSurface().translateBy(-deltaX, -deltaY);
+  // Move the connections on the block.
+  this.draggingBlock_.moveConnections(-deltaX, -deltaY);
+  // Update the start location of the block, so that when we drag the block
+  // it starts in the correct location.
+  this.startXY_.x += -deltaX;
+  this.startXY_.y += -deltaY;
+
+  var delta = new Blockly.utils.Coordinate(-deltaX, -deltaY);
+  // TODO: Update from null.
+  // As we scroll, show the insertion markers.
+  this.draggedConnectionManager_.update(delta, null);
+};
+
 /**
  * Finish a block drag and put the block back on the workspace.
  * @param {!Event} e The mouseup/touchend event.

core/bubble.js

@@ -25,7 +25,7 @@ goog.require('Blockly.utils.userAgent');
 /** @suppress {extraRequire} */
 goog.require('Blockly.Workspace');
 
-goog.requireType('Blockly.BlockDragSurfaceSvg');
+goog.requireType('Blockly.IBlockDragSurfaceSvg');
 goog.requireType('Blockly.BlockSvg');
 goog.requireType('Blockly.IBubble');
 goog.requireType('Blockly.MetricsManager');
@@ -835,7 +835,7 @@ Blockly.Bubble.prototype.dispose = function() {
 /**
  * Move this bubble during a drag, taking into account whether or not there is
  * a drag surface.
- * @param {Blockly.BlockDragSurfaceSvg} dragSurface The surface that carries
+ * @param {Blockly.IBlockDragSurfaceSvg} dragSurface The surface that carries
  *     rendered items during a drag, or null if no drag surface is in use.
  * @param {!Blockly.utils.Coordinate} newLoc The location to translate to, in
  *     workspace coordinates.

core/bubble_dragger.js

@@ -22,7 +22,7 @@ goog.require('Blockly.Events.CommentMove');
 goog.require('Blockly.utils');
 goog.require('Blockly.utils.Coordinate');
 
-goog.requireType('Blockly.BlockDragSurfaceSvg');
+goog.requireType('Blockly.IBlockDragSurfaceSvg');
 goog.requireType('Blockly.IBubble');
 goog.requireType('Blockly.WorkspaceSvg');
 
@@ -77,7 +77,7 @@ Blockly.BubbleDragger = function(bubble, workspace) {
   /**
    * The drag surface to move bubbles to during a drag, or null if none should
    * be used.  Block dragging and bubble dragging use the same surface.
-   * @type {Blockly.BlockDragSurfaceSvg}
+   * @type {Blockly.IBlockDragSurfaceSvg}
    * @private
    */
   this.dragSurface_ =

core/inject.js

@@ -12,6 +12,7 @@
 
 goog.provide('Blockly.inject');
 
+/** @suppress {extraRequire} */
 goog.require('Blockly.BlockDragSurfaceSvg');
 goog.require('Blockly.browserEvents');
 goog.require('Blockly.Css');
@@ -30,6 +31,7 @@ goog.require('Blockly.utils.userAgent');
 goog.require('Blockly.WorkspaceDragSurfaceSvg');
 goog.require('Blockly.WorkspaceSvg');
 
+goog.requireType('Blockly.IBlockDragSurfaceSvg');
 goog.requireType('Blockly.Workspace');
 
 
@@ -64,7 +66,10 @@ Blockly.inject = function(container, opt_options) {
 
   // Create surfaces for dragging things. These are optimizations
   // so that the browser does not repaint during the drag.
-  var blockDragSurface = new Blockly.BlockDragSurfaceSvg(subContainer);
+  var BlockDragSurfaceClass = Blockly.registry.getClassFromOptions(
+      Blockly.registry.Type.BLOCK_DRAG_SURFACE_SVG, options, true);
+  var blockDragSurface = new BlockDragSurfaceClass(subContainer);
+
   var workspaceDragSurface = new Blockly.WorkspaceDragSurfaceSvg(subContainer);
 
   var workspace = Blockly.createMainWorkspace_(svg, options, blockDragSurface,
@@ -140,7 +145,7 @@ Blockly.createDom_ = function(container, options) {
  * Create a main workspace and add it to the SVG.
  * @param {!Element} svg SVG element with pattern defined.
  * @param {!Blockly.Options} options Dictionary of options.
- * @param {!Blockly.BlockDragSurfaceSvg} blockDragSurface Drag surface SVG
+ * @param {!Blockly.IBlockDragSurfaceSvg} blockDragSurface Drag surface SVG
  *     for the blocks.
  * @param {!Blockly.WorkspaceDragSurfaceSvg} workspaceDragSurface Drag surface
  *     SVG for the workspace.

core/interfaces/i_block_drag_surface.js

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Interface for the block drag surface.
+ * @author aschmiedt@google.com (Abby Schmiedt)
+ */
+
+'use strict';
+
+goog.provide('Blockly.IBlockDragSurfaceSvg');
+
+goog.requireType('Blockly.utils.Coordinate');
+
+
+/**
+ * A block drag surface interface.
+ * @interface
+ */
+Blockly.IBlockDragSurfaceSvg = function() {};
+
+/**
+ * Create the drag surface and inject it into the container.
+ */
+Blockly.IBlockDragSurfaceSvg.prototype.createDom;
+
+/**
+ * Set the SVG blocks on the drag surface's group and show the surface.
+ * Only one block group should be on the drag surface at a time.
+ * @param {!SVGElement} blocks Block or group of blocks to place on the drag
+ * surface.
+ */
+Blockly.IBlockDragSurfaceSvg.prototype.setBlocksAndShow;
+
+/**
+ * Translate and scale the entire drag surface group to the given position, to
+ * keep in sync with the workspace.
+ * @param {number} x X translation in workspace coordinates.
+ * @param {number} y Y translation in workspace coordinates.
+ * @param {number} scale Scale of the group.
+ */
+Blockly.IBlockDragSurfaceSvg.prototype.translateAndScaleGroup;
+
+/**
+ * Translates the entire surface by a relative offset.
+ * @param {number} deltaX Horizontal offset in pixel units.
+ * @param {number} deltaY Vertical offset in pixel units.
+ */
+Blockly.IBlockDragSurfaceSvg.prototype.translateBy;
+
+/**
+ * Translate the entire drag surface during a drag.
+ * We translate the drag surface instead of the blocks inside the surface
+ * so that the browser avoids repainting the SVG.
+ * Because of this, the drag coordinates must be adjusted by scale.
+ * @param {number} x X translation for the entire surface.
+ * @param {number} y Y translation for the entire surface.
+ */
+Blockly.IBlockDragSurfaceSvg.prototype.translateSurface;
+
+/**
+ * Reports the surface translation in scaled workspace coordinates.
+ * Use this when finishing a drag to return blocks to the correct position.
+ * @return {!Blockly.utils.Coordinate} Current translation of the surface.
+ */
+Blockly.IBlockDragSurfaceSvg.prototype.getSurfaceTranslation;
+
+/**
+ * Provide a reference to the drag group (primarily for
+ * BlockSvg.getRelativeToSurfaceXY).
+ * @return {SVGElement} Drag surface group element.
+ */
+Blockly.IBlockDragSurfaceSvg.prototype.getGroup;
+
+/**
+ * Get the current blocks on the drag surface, if any (primarily
+ * for BlockSvg.getRelativeToSurfaceXY).
+ * @return {Element} Drag surface block DOM element, or undefined if no blocks
+ * exist.
+ */
+Blockly.IBlockDragSurfaceSvg.prototype.getCurrentBlock;
+
+/**
+ * Clear the group and hide the surface; move the blocks off onto the provided
+ * element.
+ * If the block is being deleted it doesn't need to go back to the original
+ * surface, since it would be removed immediately during dispose.
+ * @param {Element=} opt_newSurface Surface the dragging blocks should be moved
+ *     to, or null if the blocks should be removed from this surface without
+ *     being moved to a different surface.
+ */
+Blockly.IBlockDragSurfaceSvg.prototype.clearAndHide;

core/interfaces/i_bubble.js

@@ -13,7 +13,7 @@
 
 goog.provide('Blockly.IBubble');
 
-goog.requireType('Blockly.BlockDragSurfaceSvg');
+goog.requireType('Blockly.IBlockDragSurfaceSvg');
 goog.requireType('Blockly.IContextMenu');
 goog.requireType('Blockly.IDeletable');
 goog.requireType('Blockly.utils.Coordinate');
@@ -58,7 +58,7 @@ Blockly.IBubble.prototype.setDragging;
 /**
  * Move this bubble during a drag, taking into account whether or not there is
  * a drag surface.
- * @param {Blockly.BlockDragSurfaceSvg} dragSurface The surface that carries
+ * @param {Blockly.IBlockDragSurfaceSvg} dragSurface The surface that carries
  *     rendered items during a drag, or null if no drag surface is in use.
  * @param {!Blockly.utils.Coordinate} newLoc The location to translate to, in
  *     workspace coordinates.

core/registry.js

@@ -17,6 +17,7 @@ goog.requireType('Blockly.blockRendering.Renderer');
 goog.requireType('Blockly.Cursor');
 goog.requireType('Blockly.Events.Abstract');
 goog.requireType('Blockly.Field');
+goog.requireType('Blockly.IBlockDragSurfaceSvg');
 goog.requireType('Blockly.IConnectionChecker');
 goog.requireType('Blockly.IFlyout');
 goog.requireType('Blockly.IMetricsManager');
@@ -101,6 +102,10 @@ Blockly.registry.Type.FLYOUTS_HORIZONTAL_TOOLBOX =
 Blockly.registry.Type.METRICS_MANAGER =
     new Blockly.registry.Type('metricsManager');
 
+/** @type {!Blockly.registry.Type<Blockly.IBlockDragSurfaceSvg>} */
+Blockly.registry.Type.BLOCK_DRAG_SURFACE_SVG =
+    new Blockly.registry.Type('blockDragSurfaceSvg');
+
 /**
  * Registers a class based on a type and name.
  * @param {string|!Blockly.registry.Type<T>} type The type of the plugin.

core/workspace_comment_svg.js

@@ -402,7 +402,7 @@ Blockly.WorkspaceCommentSvg.prototype.moveOffDragSurface = function(newXY) {
 /**
  * Move this comment during a drag, taking into account whether we are using a
  * drag surface to translate blocks.
- * @param {Blockly.BlockDragSurfaceSvg} dragSurface The surface that carries
+ * @param {Blockly.IBlockDragSurfaceSvg} dragSurface The surface that carries
  *     rendered items during a drag, or null if no drag surface is in use.
  * @param {!Blockly.utils.Coordinate} newLoc The location to translate to, in
  *     workspace coordinates.

core/workspace_svg.js

@@ -55,11 +55,11 @@ goog.require('Blockly.WorkspaceDragSurfaceSvg');
 goog.require('Blockly.Xml');
 
 goog.requireType('Blockly.Block');
-goog.requireType('Blockly.BlockDragSurfaceSvg');
 goog.requireType('Blockly.blockRendering.Renderer');
 goog.requireType('Blockly.Cursor');
 goog.requireType('Blockly.FlyoutButton');
 goog.requireType('Blockly.IASTNodeLocationSvg');
+goog.requireType('Blockly.IBlockDragSurfaceSvg');
 goog.requireType('Blockly.IBoundedElement');
 goog.requireType('Blockly.IFlyout');
 goog.requireType('Blockly.IMetricsManager');
@@ -76,7 +76,7 @@ goog.requireType('Blockly.ZoomControls');
  * Class for a workspace.  This is an onscreen area with optional trashcan,
  * scrollbars, bubbles, and dragging.
  * @param {!Blockly.Options} options Dictionary of options.
- * @param {Blockly.BlockDragSurfaceSvg=} opt_blockDragSurface Drag surface for
+ * @param {Blockly.IBlockDragSurfaceSvg=} opt_blockDragSurface Drag surface for
  *     blocks.
  * @param {Blockly.WorkspaceDragSurfaceSvg=} opt_wsDragSurface Drag surface for
  *     the workspace.
@@ -437,7 +437,7 @@ Blockly.WorkspaceSvg.prototype.currentGesture_ = null;
 
 /**
  * This workspace's surface for dragging blocks, if it exists.
- * @type {Blockly.BlockDragSurfaceSvg}
+ * @type {Blockly.IBlockDragSurfaceSvg}
  * @private
  */
 Blockly.WorkspaceSvg.prototype.blockDragSurface_ = null;
@@ -1342,7 +1342,7 @@ Blockly.WorkspaceSvg.prototype.setupDragSurface = function() {
 };
 
 /**
- * @return {Blockly.BlockDragSurfaceSvg} This workspace's block drag surface,
+ * @return {Blockly.IBlockDragSurfaceSvg} This workspace's block drag surface,
  *     if one is in use.
  * @package
  */