Register block dragger (#4796)

blockly_uncompressed.js

@@ -24,7 +24,7 @@ this.BLOCKLY_BOOT = function(root) {
 goog.addDependency('../../core/block.js', ['Blockly.Block'], ['Blockly.ASTNode', 'Blockly.Blocks', 'Blockly.Connection', 'Blockly.Events', 'Blockly.Events.BlockChange', 'Blockly.Events.BlockCreate', 'Blockly.Events.BlockDelete', 'Blockly.Events.BlockMove', 'Blockly.Extensions', 'Blockly.Input', 'Blockly.Tooltip', 'Blockly.Workspace', 'Blockly.connectionTypes', 'Blockly.constants', 'Blockly.fieldRegistry', 'Blockly.inputTypes', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Size', 'Blockly.utils.object'], {'lang': 'es5'});
 goog.addDependency('../../core/block_animations.js', ['Blockly.blockAnimations'], ['Blockly.utils.Svg', 'Blockly.utils.dom'], {});
 goog.addDependency('../../core/block_drag_surface.js', ['Blockly.BlockDragSurfaceSvg'], ['Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Svg', 'Blockly.utils.dom'], {});
-goog.addDependency('../../core/block_dragger.js', ['Blockly.BlockDragger'], ['Blockly.Events', 'Blockly.Events.BlockDrag', 'Blockly.Events.BlockMove', 'Blockly.InsertionMarkerManager', 'Blockly.blockAnimations', 'Blockly.constants', 'Blockly.utils.Coordinate', 'Blockly.utils.dom'], {});
+goog.addDependency('../../core/block_dragger.js', ['Blockly.BlockDragger'], ['Blockly.Events', 'Blockly.Events.BlockDrag', 'Blockly.Events.BlockMove', 'Blockly.IBlockDragger', 'Blockly.InsertionMarkerManager', 'Blockly.blockAnimations', 'Blockly.constants', 'Blockly.registry', 'Blockly.utils.Coordinate', 'Blockly.utils.dom'], {});
 goog.addDependency('../../core/block_svg.js', ['Blockly.BlockSvg'], ['Blockly.ASTNode', 'Blockly.Block', 'Blockly.ContextMenu', 'Blockly.ContextMenuRegistry', 'Blockly.Events', 'Blockly.Events.BlockMove', 'Blockly.Events.Selected', 'Blockly.Msg', 'Blockly.RenderedConnection', 'Blockly.TabNavigateCursor', 'Blockly.Tooltip', 'Blockly.Touch', 'Blockly.Xml', 'Blockly.blockAnimations', 'Blockly.blockRendering.IPathObject', 'Blockly.browserEvents', 'Blockly.connectionTypes', 'Blockly.constants', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Rect', 'Blockly.utils.deprecation', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.userAgent'], {});
 goog.addDependency('../../core/blockly.js', ['Blockly'], ['Blockly.Events', 'Blockly.Events.BlockCreate', 'Blockly.Events.FinishedLoading', 'Blockly.Events.Ui', 'Blockly.Events.UiBase', 'Blockly.Events.VarCreate', 'Blockly.Procedures', 'Blockly.ShortcutRegistry', 'Blockly.Tooltip', 'Blockly.Touch', 'Blockly.Variables', 'Blockly.WidgetDiv', 'Blockly.WorkspaceSvg', 'Blockly.Xml', 'Blockly.browserEvents', 'Blockly.connectionTypes', 'Blockly.constants', 'Blockly.inject', 'Blockly.inputTypes', 'Blockly.utils', 'Blockly.utils.Size', 'Blockly.utils.colour', 'Blockly.utils.deprecation', 'Blockly.utils.toolbox'], {});
 goog.addDependency('../../core/blocks.js', ['Blockly.Blocks'], [], {});
@@ -80,12 +80,13 @@ 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.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.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/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_block_dragger.js', ['Blockly.IBlockDragger'], [], {});
 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

@@ -155,7 +155,8 @@ Blockly.BlockDragSurfaceSvg.prototype.translateSurfaceInternal_ = function() {
 Blockly.BlockDragSurfaceSvg.prototype.translateBy = function(deltaX, deltaY) {
   var x = this.surfaceXY_.x + deltaX;
   var y = this.surfaceXY_.y + deltaY;
-  this.translateSurface(x, y);
+  this.surfaceXY_ = new Blockly.utils.Coordinate(x, y);
+  this.translateSurfaceInternal_();
 };
 
 /**
@@ -190,6 +191,14 @@ Blockly.BlockDragSurfaceSvg.prototype.getGroup = function() {
   return this.dragGroup_;
 };
 
+/**
+ * Returns the SVG drag surface.
+ * @returns {?SVGElement} The SVG drag surface.
+ */
+Blockly.BlockDragSurfaceSvg.prototype.getSvgRoot = function() {
+  return this.SVG_;
+};
+
 /**
  * Get the current blocks on the drag surface, if any (primarily
  * for BlockSvg.getRelativeToSurfaceXY).

core/block_dragger.js

@@ -20,7 +20,9 @@ goog.require('Blockly.Events');
 goog.require('Blockly.Events.BlockDrag');
 /** @suppress {extraRequire} */
 goog.require('Blockly.Events.BlockMove');
+goog.require('Blockly.IBlockDragger');
 goog.require('Blockly.InsertionMarkerManager');
+goog.require('Blockly.registry');
 goog.require('Blockly.utils.Coordinate');
 goog.require('Blockly.utils.dom');
 
@@ -34,6 +36,7 @@ goog.requireType('Blockly.WorkspaceSvg');
  * @param {!Blockly.BlockSvg} block The block to drag.
  * @param {!Blockly.WorkspaceSvg} workspace The workspace to drag on.
  * @constructor
+ * @implements {Blockly.IBlockDragger}
  */
 Blockly.BlockDragger = function(block, workspace) {
   /**
@@ -216,30 +219,6 @@ 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.
@@ -408,3 +387,6 @@ Blockly.BlockDragger.prototype.getInsertionMarkers = function() {
   }
   return [];
 };
+
+Blockly.registry.register(Blockly.registry.Type.BLOCK_DRAGGER,
+    Blockly.registry.DEFAULT, Blockly.BlockDragger);

core/gesture.js

@@ -14,6 +14,7 @@
 goog.provide('Blockly.Gesture');
 
 goog.require('Blockly.blockAnimations');
+/** @suppress {extraRequire} */
 goog.require('Blockly.BlockDragger');
 goog.require('Blockly.browserEvents');
 goog.require('Blockly.BubbleDragger');
@@ -30,6 +31,7 @@ goog.require('Blockly.WorkspaceDragger');
 
 goog.requireType('Blockly.BlockSvg');
 goog.requireType('Blockly.Field');
+goog.requireType('Blockly.IBlockDragger');
 goog.requireType('Blockly.IBubble');
 goog.requireType('Blockly.IFlyout');
 goog.requireType('Blockly.WorkspaceSvg');
@@ -180,7 +182,7 @@ Blockly.Gesture = function(e, creatorWorkspace) {
 
   /**
    * The object tracking a block drag, or null if none is in progress.
-   * @type {Blockly.BlockDragger}
+   * @type {?Blockly.IBlockDragger}
    * @private
    */
   this.blockDragger_ = null;
@@ -436,7 +438,10 @@ Blockly.Gesture.prototype.updateIsDragging_ = function() {
  * @private
  */
 Blockly.Gesture.prototype.startDraggingBlock_ = function() {
-  this.blockDragger_ = new Blockly.BlockDragger(
+  var BlockDraggerClass = Blockly.registry.getClassFromOptions(
+      Blockly.registry.Type.BLOCK_DRAGGER, this.creatorWorkspace_.options, true);
+
+  this.blockDragger_ = new BlockDraggerClass(
       /** @type {!Blockly.BlockSvg} */ (this.targetBlock_),
       /** @type {!Blockly.WorkspaceSvg} */ (this.startWorkspace_));
   this.blockDragger_.startBlockDrag(this.currentDragDeltaXY_, this.healStack_);

core/interfaces/i_block_dragger.js

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview The interface for a block dragger.
+ * @author aschmiedt@google.com (Abby Schmiedt)
+ */
+
+'use strict';
+
+goog.provide('Blockly.IBlockDragger');
+
+goog.requireType('Blockly.BlockSvg');
+goog.requireType('Blockly.utils.Coordinate');
+
+
+/**
+ * A block dragger interface.
+ * @interface
+ */
+Blockly.IBlockDragger = function() {};
+
+/**
+ * Start dragging a block.  This includes moving it to the drag surface.
+ * @param {!Blockly.utils.Coordinate} currentDragDeltaXY How far the pointer has
+ *     moved from the position at mouse down, in pixel units.
+ * @param {boolean} healStack Whether or not to heal the stack after
+ *     disconnecting.
+ */
+Blockly.IBlockDragger.prototype.startBlockDrag;
+
+/**
+ * Execute a step of block dragging, based on the given event.  Update the
+ * display accordingly.
+ * @param {!Event} e The most recent move event.
+ * @param {!Blockly.utils.Coordinate} currentDragDeltaXY How far the pointer has
+ *     moved from the position at the start of the drag, in pixel units.
+ */
+Blockly.IBlockDragger.prototype.dragBlock;
+
+/**
+ * Finish a block drag and put the block back on the workspace.
+ * @param {!Event} e The mouseup/touchend event.
+ * @param {!Blockly.utils.Coordinate} currentDragDeltaXY How far the pointer has
+ *     moved from the position at the start of the drag, in pixel units.
+ */
+Blockly.IBlockDragger.prototype.endBlockDrag;
+
+/**
+ * Get a list of the insertion markers that currently exist.  Drags have 0, 1,
+ * or 2 insertion markers.
+ * @return {!Array.<!Blockly.BlockSvg>} A possibly empty list of insertion
+ *     marker blocks.
+ */
+Blockly.IBlockDragger.prototype.getInsertionMarkers;

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.IBlockDragger');
 goog.requireType('Blockly.IBlockDragSurfaceSvg');
 goog.requireType('Blockly.IConnectionChecker');
 goog.requireType('Blockly.IFlyout');
@@ -106,6 +107,10 @@ Blockly.registry.Type.METRICS_MANAGER =
 Blockly.registry.Type.BLOCK_DRAG_SURFACE_SVG =
     new Blockly.registry.Type('blockDragSurfaceSvg');
 
+/** @type {!Blockly.registry.Type<Blockly.IBlockDragger>} */
+Blockly.registry.Type.BLOCK_DRAGGER =
+    new Blockly.registry.Type('blockDragger');
+
 /**
  * Registers a class based on a type and name.
  * @param {string|!Blockly.registry.Type<T>} type The type of the plugin.