From 87cc725680b176d8a0596c2e810cec7ab694bcbf Mon Sep 17 00:00:00 2001 From: alschmiedt Date: Fri, 23 Apr 2021 13:33:14 -0700 Subject: [PATCH] Register block dragger (#4796) --- blockly_uncompressed.js | 5 +-- core/block_drag_surface.js | 11 +++++- core/block_dragger.js | 30 ++++------------ core/gesture.js | 9 +++-- core/interfaces/i_block_dragger.js | 58 ++++++++++++++++++++++++++++++ core/registry.js | 5 +++ 6 files changed, 89 insertions(+), 29 deletions(-) create mode 100644 core/interfaces/i_block_dragger.js diff --git a/blockly_uncompressed.js b/blockly_uncompressed.js index d48cb7ba1..b8e421da1 100644 --- a/blockly_uncompressed.js +++ b/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'], [], {}); diff --git a/core/block_drag_surface.js b/core/block_drag_surface.js index 6a6c53542..35dbcccac 100644 --- a/core/block_drag_surface.js +++ b/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). diff --git a/core/block_dragger.js b/core/block_dragger.js index cf2af7a45..9c5b17b2a 100644 --- a/core/block_dragger.js +++ b/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); diff --git a/core/gesture.js b/core/gesture.js index 858792c50..8c22c423b 100644 --- a/core/gesture.js +++ b/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_); diff --git a/core/interfaces/i_block_dragger.js b/core/interfaces/i_block_dragger.js new file mode 100644 index 000000000..bc75c53c5 --- /dev/null +++ b/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.} A possibly empty list of insertion + * marker blocks. + */ +Blockly.IBlockDragger.prototype.getInsertionMarkers; diff --git a/core/registry.js b/core/registry.js index d75e37647..a41e15d32 100644 --- a/core/registry.js +++ b/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.registry.Type.BLOCK_DRAGGER = + new Blockly.registry.Type('blockDragger'); + /** * Registers a class based on a type and name. * @param {string|!Blockly.registry.Type} type The type of the plugin.