From ab70d6b1da8ec6a7303c6ecad5179f2d84bb0f08 Mon Sep 17 00:00:00 2001 From: alschmiedt Date: Fri, 21 May 2021 15:35:48 -0700 Subject: [PATCH] Caches ws scroll on block drag surface (#4841) --- blockly_uncompressed.js | 1 - core/block_drag_surface.js | 32 +++++++-- core/bubble.js | 4 +- core/bubble_dragger.js | 4 +- core/inject.js | 8 +-- core/interfaces/i_block_drag_surface.js | 95 ------------------------- core/interfaces/i_bubble.js | 4 +- core/registry.js | 5 -- core/workspace_comment_svg.js | 2 +- core/workspace_svg.js | 9 +-- 10 files changed, 40 insertions(+), 124 deletions(-) delete mode 100644 core/interfaces/i_block_drag_surface.js diff --git a/blockly_uncompressed.js b/blockly_uncompressed.js index b8e421da1..c868f4eec 100644 --- a/blockly_uncompressed.js +++ b/blockly_uncompressed.js @@ -85,7 +85,6 @@ goog.addDependency('../../core/input.js', ['Blockly.Input'], ['Blockly.Connectio 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'], [], {}); diff --git a/core/block_drag_surface.js b/core/block_drag_surface.js index 35dbcccac..a0e8fd31a 100644 --- a/core/block_drag_surface.js +++ b/core/block_drag_surface.js @@ -27,7 +27,6 @@ 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) { /** @@ -77,6 +76,16 @@ Blockly.BlockDragSurfaceSvg.prototype.scale_ = 1; */ Blockly.BlockDragSurfaceSvg.prototype.surfaceXY_ = null; +/** + * Cached value for the translation of the child drag surface in pixel units. + * Since the child drag surface tracks the translation of the workspace this is + * ultimately the translation of the workspace. + * @type {!Blockly.utils.Coordinate} + * @private + */ +Blockly.BlockDragSurfaceSvg.prototype.childSurfaceXY_ = + new Blockly.utils.Coordinate(0, 0); + /** * Create the drag surface and inject it into the container. */ @@ -115,8 +124,8 @@ Blockly.BlockDragSurfaceSvg.prototype.setBlocksAndShow = function(blocks) { /** * 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} x X translation in pixel coordinates. + * @param {number} y Y translation in pixel coordinates. * @param {number} scale Scale of the group. */ Blockly.BlockDragSurfaceSvg.prototype.translateAndScaleGroup = function(x, y, @@ -126,6 +135,10 @@ Blockly.BlockDragSurfaceSvg.prototype.translateAndScaleGroup = function(x, y, // fuzzy while they are being dragged on the drag surface. var fixedX = x.toFixed(0); var fixedY = y.toFixed(0); + + this.childSurfaceXY_.x = parseInt(fixedX, 10); + this.childSurfaceXY_.y = parseInt(fixedY, 10); + this.dragGroup_.setAttribute('transform', 'translate(' + fixedX + ',' + fixedY + ') scale(' + scale + ')'); }; @@ -209,6 +222,16 @@ Blockly.BlockDragSurfaceSvg.prototype.getCurrentBlock = function() { return /** @type {Element} */ (this.dragGroup_.firstChild); }; +/** + * Gets the translation of the child block surface + * This surface is in charge of keeping track of how much the workspace has + * moved. + * @return {!Blockly.utils.Coordinate} The amount the workspace has been moved. + */ +Blockly.BlockDragSurfaceSvg.prototype.getWsTranslation = function() { + return this.childSurfaceXY_; +}; + /** * Clear the group and hide the surface; move the blocks off onto the provided * element. @@ -231,6 +254,3 @@ 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); diff --git a/core/bubble.js b/core/bubble.js index 1c746ca12..c65dba459 100644 --- a/core/bubble.js +++ b/core/bubble.js @@ -25,7 +25,7 @@ goog.require('Blockly.utils.userAgent'); /** @suppress {extraRequire} */ goog.require('Blockly.Workspace'); -goog.requireType('Blockly.IBlockDragSurfaceSvg'); +goog.requireType('Blockly.BlockDragSurfaceSvg'); 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.IBlockDragSurfaceSvg} dragSurface The surface that carries + * @param {Blockly.BlockDragSurfaceSvg} 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. diff --git a/core/bubble_dragger.js b/core/bubble_dragger.js index aae23d566..2f75276dd 100644 --- a/core/bubble_dragger.js +++ b/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.IBlockDragSurfaceSvg'); +goog.requireType('Blockly.BlockDragSurfaceSvg'); 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.IBlockDragSurfaceSvg} + * @type {Blockly.BlockDragSurfaceSvg} * @private */ this.dragSurface_ = diff --git a/core/inject.js b/core/inject.js index 1b98a3df8..418b004a1 100644 --- a/core/inject.js +++ b/core/inject.js @@ -12,7 +12,6 @@ goog.provide('Blockly.inject'); -/** @suppress {extraRequire} */ goog.require('Blockly.BlockDragSurfaceSvg'); goog.require('Blockly.browserEvents'); goog.require('Blockly.Css'); @@ -31,7 +30,6 @@ goog.require('Blockly.utils.userAgent'); goog.require('Blockly.WorkspaceDragSurfaceSvg'); goog.require('Blockly.WorkspaceSvg'); -goog.requireType('Blockly.IBlockDragSurfaceSvg'); goog.requireType('Blockly.Workspace'); @@ -66,9 +64,7 @@ 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 BlockDragSurfaceClass = Blockly.registry.getClassFromOptions( - Blockly.registry.Type.BLOCK_DRAG_SURFACE_SVG, options, true); - var blockDragSurface = new BlockDragSurfaceClass(subContainer); + var blockDragSurface = new Blockly.BlockDragSurfaceSvg(subContainer); var workspaceDragSurface = new Blockly.WorkspaceDragSurfaceSvg(subContainer); @@ -145,7 +141,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.IBlockDragSurfaceSvg} blockDragSurface Drag surface SVG + * @param {!Blockly.BlockDragSurfaceSvg} blockDragSurface Drag surface SVG * for the blocks. * @param {!Blockly.WorkspaceDragSurfaceSvg} workspaceDragSurface Drag surface * SVG for the workspace. diff --git a/core/interfaces/i_block_drag_surface.js b/core/interfaces/i_block_drag_surface.js deleted file mode 100644 index afbd7f673..000000000 --- a/core/interfaces/i_block_drag_surface.js +++ /dev/null @@ -1,95 +0,0 @@ -/** - * @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; diff --git a/core/interfaces/i_bubble.js b/core/interfaces/i_bubble.js index deed90ede..aad591aee 100644 --- a/core/interfaces/i_bubble.js +++ b/core/interfaces/i_bubble.js @@ -13,7 +13,7 @@ goog.provide('Blockly.IBubble'); -goog.requireType('Blockly.IBlockDragSurfaceSvg'); +goog.requireType('Blockly.BlockDragSurfaceSvg'); 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.IBlockDragSurfaceSvg} dragSurface The surface that carries + * @param {Blockly.BlockDragSurfaceSvg} 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. diff --git a/core/registry.js b/core/registry.js index a41e15d32..a2126cc27 100644 --- a/core/registry.js +++ b/core/registry.js @@ -18,7 +18,6 @@ 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'); goog.requireType('Blockly.IMetricsManager'); @@ -103,10 +102,6 @@ Blockly.registry.Type.FLYOUTS_HORIZONTAL_TOOLBOX = Blockly.registry.Type.METRICS_MANAGER = new Blockly.registry.Type('metricsManager'); -/** @type {!Blockly.registry.Type} */ -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'); diff --git a/core/workspace_comment_svg.js b/core/workspace_comment_svg.js index 96efad3d7..401b840e1 100644 --- a/core/workspace_comment_svg.js +++ b/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.IBlockDragSurfaceSvg} dragSurface The surface that carries + * @param {Blockly.BlockDragSurfaceSvg} 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. diff --git a/core/workspace_svg.js b/core/workspace_svg.js index a19e6e376..14a508e31 100644 --- a/core/workspace_svg.js +++ b/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.IBlockDragSurfaceSvg=} opt_blockDragSurface Drag surface for + * @param {Blockly.BlockDragSurfaceSvg=} 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.IBlockDragSurfaceSvg} + * @type {Blockly.BlockDragSurfaceSvg} * @private */ Blockly.WorkspaceSvg.prototype.blockDragSurface_ = null; @@ -1342,7 +1342,8 @@ Blockly.WorkspaceSvg.prototype.setupDragSurface = function() { }; /** - * @return {Blockly.IBlockDragSurfaceSvg} This workspace's block drag surface, + * Gets the drag surface blocks are moved to when a drag is started. + * @return {Blockly.BlockDragSurfaceSvg} This workspace's block drag surface, * if one is in use. * @package */