CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-10 02:17:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix!: re-remove block and workspace drag surfaces (#7070)

Browse Source 
* refactor: Remove BlockDragSurface.

* refactor: Remove WorkspaceDragSurfaceSvg.

* chore: Remove drag surface-related CSS.

* chore: Removed unused variable in block_dragger.ts.

* chore: Remove references to drag surfaces in comments.

* refactor: Only track icons with visible bubbles for position updates during a drag.

* fix: Remove rendundant condition.

* chore: fixup parameter from rebase

---------

Co-authored-by: Aaron Dodson <adodson@google.com>
This commit is contained in:
Beka Westberg
2023-05-11 16:51:46 -07:00
committed by GitHub
parent b29a5caae6
commit 455c1957b8
13 changed files with 31 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/block_dragger.ts
View File

@@ -92,7 +92,7 @@ export class BlockDragger implements IBlockDragger {
}
/**
* Start dragging a block. This includes moving it to the drag surface.
* Start dragging a block.
*
* @param currentDragDeltaXY How far the pointer has moved from the position
* at mouse down, in pixel units.
@@ -122,10 +122,6 @@ export class BlockDragger implements IBlockDragger {
this.disconnectBlock_(healStack, currentDragDeltaXY);
}
this.draggingBlock_.setDragging(true);
// For future consideration: we may be able to put moveToDragSurface inside
// the block dragger, which would also let the block not track the block
// drag surface.
this.draggingBlock_.moveToDragSurface();
}
/**
@@ -227,16 +223,11 @@ export class BlockDragger implements IBlockDragger {
const preventMove =
!!this.dragTarget_ &&
this.dragTarget_.shouldPreventMove(this.draggingBlock_);
let newLoc: Coordinate;
let delta: Coordinate | null = null;
if (preventMove) {
newLoc = this.startXY_;
} else {
if (!preventMove) {
const newValues = this.getNewLocationAfterDrag_(currentDragDeltaXY);
delta = newValues.delta;
newLoc = newValues.newLocation;
}
this.draggingBlock_.moveOffDragSurface(newLoc);
if (this.dragTarget_) {
this.dragTarget_.onDrop(this.draggingBlock_);
@@ -461,6 +452,8 @@ function initIconData(block: BlockSvg): IconPositionData[] {
for (let i = 0, descendant; (descendant = descendants[i]); i++) {
const icons = descendant.getIcons();
for (let j = 0; j < icons.length; j++) {
// Only bother to track icons whose bubble is visible.
if (!icons[j].isVisible()) continue;
const data = {
// Coordinate with x and y properties (workspace
// coordinates).

87
core/block_svg.ts
View File

@@ -138,7 +138,6 @@ export class BlockSvg
override nextConnection!: RenderedConnection;
// TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
override previousConnection!: RenderedConnection;
private readonly useDragSurface_: boolean;
private translation = '';
@@ -177,12 +176,6 @@ export class BlockSvg
.getRenderer()
.makePathObject(this.svgGroup_, this.style);
/**
* Whether to move the block to the drag surface when it is dragged.
* True if it should move, false if it should be translated directly.
*/
this.useDragSurface_ = !!workspace.getBlockDragSurface();
const svgPath = this.pathObject.svgPath;
(svgPath as any).tooltip = this;
Tooltip.bindMouseEvents(svgPath);
@@ -347,10 +340,6 @@ export class BlockSvg
let x = 0;
let y = 0;
const dragSurfaceGroup = this.useDragSurface_
? this.workspace.getBlockDragSurface()!.getGroup()
: null;
let element: SVGElement = this.getSvgRoot();
if (element) {
do {
@@ -358,24 +347,8 @@ export class BlockSvg
const xy = svgMath.getRelativeXY(element);
x += xy.x;
y += xy.y;
// If this element is the current element on the drag surface, include
// the translation of the drag surface itself.
if (
this.useDragSurface_ &&
this.workspace.getBlockDragSurface()!.getCurrentBlock() === element
) {
const surfaceTranslation = this.workspace
.getBlockDragSurface()!
.getSurfaceTranslation();
x += surfaceTranslation.x;
y += surfaceTranslation.y;
}
element = element.parentNode as SVGElement;
} while (
element &&
element !== this.workspace.getCanvas() &&
element !== dragSurfaceGroup
);
} while (element && element !== this.workspace.getCanvas());
}
return new Coordinate(x, y);
}
@@ -429,31 +402,6 @@ export class BlockSvg
return this.translation;
}
/**
* Move this block to its workspace's drag surface, accounting for
* positioning. Generally should be called at the same time as
* setDragging_(true). Does nothing if useDragSurface_ is false.
*
* @internal
*/
moveToDragSurface() {
if (!this.useDragSurface_) {
return;
}
// The translation for drag surface blocks,
// is equal to the current relative-to-surface position,
// to keep the position in sync as it move on/off the surface.
// This is in workspace coordinates.
const xy = this.getRelativeToSurfaceXY();
this.clearTransformAttributes_();
this.workspace.getBlockDragSurface()!.translateSurface(xy.x, xy.y);
// Execute the move on the top-level SVG component
const svg = this.getSvgRoot();
if (svg) {
this.workspace.getBlockDragSurface()!.setBlocksAndShow(svg);
}
}
/**
* Move a block to a position.
*
@@ -466,42 +414,15 @@ export class BlockSvg
}
/**
* Move this block back to the workspace block canvas.
* Generally should be called at the same time as setDragging_(false).
* Does nothing if useDragSurface_ is false.
*
* @param newXY The position the block should take on on the workspace canvas,
* in workspace coordinates.
* @internal
*/
moveOffDragSurface(newXY: Coordinate) {
if (!this.useDragSurface_) {
return;
}
// Translate to current position, turning off 3d.
this.translate(newXY.x, newXY.y);
this.workspace
.getBlockDragSurface()!
.clearAndHide(this.workspace.getCanvas());
}
/**
* Move this block during a drag, taking into account whether we are using a
* drag surface to translate blocks.
* Move this block during a drag.
* This block must be a top-level block.
*
* @param newLoc The location to translate to, in workspace coordinates.
* @internal
*/
moveDuringDrag(newLoc: Coordinate) {
if (this.useDragSurface_) {
this.workspace
.getBlockDragSurface()!
.translateSurface(newLoc.x, newLoc.y);
} else {
this.translate(newLoc.x, newLoc.y);
this.getSvgRoot().setAttribute('transform', this.getTranslation());
}
this.translate(newLoc.x, newLoc.y);
this.getSvgRoot().setAttribute('transform', this.getTranslation());
}
/**

4
core/blockly.ts
View File

@@ -18,7 +18,6 @@ import './events/events_var_create.js';
import {Block} from './block.js';
import * as blockAnimations from './block_animations.js';
import {BlockDragSurfaceSvg} from './block_drag_surface.js';
import {BlockDragger} from './block_dragger.js';
import {BlockSvg} from './block_svg.js';
import {BlocklyOptions} from './blockly_options.js';
@@ -217,7 +216,6 @@ import {Workspace} from './workspace.js';
import {WorkspaceAudio} from './workspace_audio.js';
import {WorkspaceComment} from './workspace_comment.js';
import {WorkspaceCommentSvg} from './workspace_comment_svg.js';
import {WorkspaceDragSurfaceSvg} from './workspace_drag_surface_svg.js';
import {WorkspaceDragger} from './workspace_dragger.js';
import {WorkspaceSvg} from './workspace_svg.js';
import * as Xml from './xml.js';
@@ -495,7 +493,6 @@ export {BasicCursor};
export {Block};
export {BlocklyOptions};
export {BlockDragger};
export {BlockDragSurfaceSvg};
export {BlockSvg};
export {Blocks};
export {Bubble};
@@ -645,7 +642,6 @@ export {Workspace};
export {WorkspaceAudio};
export {WorkspaceComment};
export {WorkspaceCommentSvg};
export {WorkspaceDragSurfaceSvg};
export {WorkspaceDragger};
export {WorkspaceSvg};
export {ZoomControls};

14
core/bubble.ts
View File

@@ -12,7 +12,6 @@
import * as goog from '../closure/goog/goog.js';
goog.declareModuleId('Blockly.Bubble');
import type {BlockDragSurfaceSvg} from './block_drag_surface.js';
import type {BlockSvg} from './block_svg.js';
import * as browserEvents from './browser_events.js';
import type {IBubble} from './interfaces/i_bubble.js';
@@ -863,20 +862,13 @@ export class Bubble implements IBubble {
}
/**
* Move this bubble during a drag, taking into account whether or not there is
* a drag surface.
* Move this bubble during a drag.
*
* @param dragSurface The surface that carries rendered items during a drag,
* or null if no drag surface is in use.
* @param newLoc The location to translate to, in workspace coordinates.
* @internal
*/
moveDuringDrag(dragSurface: BlockDragSurfaceSvg, newLoc: Coordinate) {
if (dragSurface) {
dragSurface.translateSurface(newLoc.x, newLoc.y);
} else {
this.moveTo(newLoc.x, newLoc.y);
}
moveDuringDrag(newLoc: Coordinate) {
this.moveTo(newLoc.x, newLoc.y);
if (this.workspace_.RTL) {
this.relativeLeft = this.anchorXY.x - newLoc.x - this.width;
} else {

21
core/bubble_dragger.ts
View File

@@ -12,7 +12,6 @@
import * as goog from '../closure/goog/goog.js';
goog.declareModuleId('Blockly.BubbleDragger');
import type {BlockDragSurfaceSvg} from './block_drag_surface.js';
import {ComponentManager} from './component_manager.js';
import type {CommentMove} from './events/events_comment_move.js';
import * as eventUtils from './events/utils.js';
@@ -35,7 +34,6 @@ export class BubbleDragger {
/** Whether the bubble would be deleted if dropped immediately. */
private wouldDeleteBubble_ = false;
private readonly startXY_: Coordinate;
private dragSurface_: BlockDragSurfaceSvg | null;
/**
* @param bubble The item on the bubble canvas to drag.
@@ -47,16 +45,10 @@ export class BubbleDragger {
* beginning of the drag, in workspace coordinates.
*/
this.startXY_ = this.bubble.getRelativeToSurfaceXY();
/**
* 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.
*/
this.dragSurface_ = workspace.getBlockDragSurface();
}
/**
* Start dragging a bubble. This includes moving it to the drag surface.
* Start dragging a bubble.
*
* @internal
*/
@@ -67,12 +59,6 @@ export class BubbleDragger {
this.workspace.setResizesEnabled(false);
this.bubble.setAutoLayout(false);
if (this.dragSurface_) {
this.bubble.moveTo(0, 0);
this.dragSurface_.translateSurface(this.startXY_.x, this.startXY_.y);
// Execute the move on the top-level SVG component.
this.dragSurface_.setBlocksAndShow(this.bubble.getSvgRoot());
}
this.bubble.setDragging && this.bubble.setDragging(true);
}
@@ -89,7 +75,7 @@ export class BubbleDragger {
dragBubble(e: PointerEvent, currentDragDeltaXY: Coordinate) {
const delta = this.pixelsToWorkspaceUnits_(currentDragDeltaXY);
const newLoc = Coordinate.sum(this.startXY_, delta);
this.bubble.moveDuringDrag(this.dragSurface_, newLoc);
this.bubble.moveDuringDrag(newLoc);
const oldDragTarget = this.dragTarget_;
this.dragTarget_ = this.workspace.getDragTarget(e);
@@ -171,9 +157,6 @@ export class BubbleDragger {
this.bubble.dispose();
} else {
// Put everything back onto the bubble canvas.
if (this.dragSurface_) {
this.dragSurface_.clearAndHide(this.workspace.getBubbleCanvas());
}
if (this.bubble.setDragging) {
this.bubble.setDragging(false);
}

36
core/css.ts
View File

@@ -88,31 +88,6 @@ let content = `
-webkit-user-select: none;
}
.blocklyWsDragSurface {
display: none;
position: absolute;
top: 0;
left: 0;
}
/* Added as a separate rule with multiple classes to make it more specific
than a bootstrap rule that selects svg:root. See issue #1275 for context.
*/
.blocklyWsDragSurface.blocklyOverflowVisible {
overflow: visible;
}
.blocklyBlockDragSurface {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: visible !important;
z-index: 50; /* Display below toolbox, but above everything else. */
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
@@ -241,14 +216,6 @@ let content = `
cursor: -webkit-grabbing;
}
/* Change the cursor on the whole drag surface in case the mouse gets
ahead of block during a drag. This way the cursor is still a closed hand.
*/
.blocklyBlockDragSurface .blocklyDraggable {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("<<<PATH>>>/handdelete.cur"), auto;
}
@@ -301,8 +268,7 @@ let content = `
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text,
.blocklyBlockDragSurface text {
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;

30
core/inject.ts
View File

@@ -7,7 +7,6 @@
import * as goog from '../closure/goog/goog.js';
goog.declareModuleId('Blockly.inject');
import {BlockDragSurfaceSvg} from './block_drag_surface.js';
import type {BlocklyOptions} from './blockly_options.js';
import * as browserEvents from './browser_events.js';
import * as bumpObjects from './bump_objects.js';
@@ -26,7 +25,6 @@ import * as dom from './utils/dom.js';
import {Svg} from './utils/svg.js';
import * as userAgent from './utils/useragent.js';
import * as WidgetDiv from './widgetdiv.js';
import {WorkspaceDragSurfaceSvg} from './workspace_drag_surface_svg.js';
import {WorkspaceSvg} from './workspace_svg.js';
/**
@@ -60,18 +58,7 @@ export function inject(
containerElement!.appendChild(subContainer);
const svg = createDom(subContainer, options);
// Create surfaces for dragging things. These are optimizations
// so that the browser does not repaint during the drag.
const blockDragSurface = new BlockDragSurfaceSvg(subContainer);
const workspaceDragSurface = new WorkspaceDragSurfaceSvg(subContainer);
const workspace = createMainWorkspace(
svg,
options,
blockDragSurface,
workspaceDragSurface
);
const workspace = createMainWorkspace(svg, options);
init(workspace);
@@ -147,22 +134,11 @@ function createDom(container: Element, options: Options): SVGElement {
*
* @param svg SVG element with pattern defined.
* @param options Dictionary of options.
* @param blockDragSurface Drag surface SVG for the blocks.
* @param workspaceDragSurface Drag surface SVG for the workspace.
* @returns Newly created main workspace.
*/
function createMainWorkspace(
svg: SVGElement,
options: Options,
blockDragSurface: BlockDragSurfaceSvg,
workspaceDragSurface: WorkspaceDragSurfaceSvg
): WorkspaceSvg {
function createMainWorkspace(svg: SVGElement, options: Options): WorkspaceSvg {
options.parentWorkspace = null;
const mainWorkspace = new WorkspaceSvg(
options,
blockDragSurface,
workspaceDragSurface
);
const mainWorkspace = new WorkspaceSvg(options);
const wsOptions = mainWorkspace.options;
mainWorkspace.scale = wsOptions.zoomOptions.startScale;
svg.appendChild(mainWorkspace.createDom('blocklyMainBackground'));

2
core/interfaces/i_block_dragger.ts
View File

@@ -14,7 +14,7 @@ goog.declareModuleId('Blockly.IBlockDragger');
*/
export interface IBlockDragger {
/**
* Start dragging a block. This includes moving it to the drag surface.
* Start dragging a block.
*
* @param currentDragDeltaXY How far the pointer has moved from the position
* at mouse down, in pixel units.

11
core/interfaces/i_bubble.ts
View File

@@ -6,7 +6,6 @@
import * as goog from '../../closure/goog/goog.js';
import type {Coordinate} from '../utils/coordinate.js';
import type {BlockDragSurfaceSvg} from '../block_drag_surface.js';
goog.declareModuleId('Blockly.IBubble');
import type {IContextMenu} from './i_contextmenu.js';
@@ -48,17 +47,11 @@ export interface IBubble extends IDraggable, IContextMenu {
setDragging(dragging: boolean): void;
/**
* Move this bubble during a drag, taking into account whether or not there is
* a drag surface.
* Move this bubble during a drag.
*
* @param dragSurface The surface that carries rendered items during a drag,
* or null if no drag surface is in use.
* @param newLoc The location to translate to, in workspace coordinates.
*/
moveDuringDrag(
dragSurface: BlockDragSurfaceSvg | null,
newLoc: Coordinate
): void;
moveDuringDrag(newLoc: Coordinate): void;
/**
* Move the bubble to the specified location in workspace coordinates.

7
core/scrollbar.ts
View File

@@ -754,11 +754,6 @@ export class Scrollbar {
// Look up the current translation and record it.
this.startDragHandle = this.handlePosition;
// Tell the workspace to setup its drag surface since it is about to move.
// onMouseMoveHandle will call onScroll which actually tells the workspace
// to move.
this.workspace.setupDragSurface();
// Record the current mouse position.
this.startDragMouse = this.horizontal ? e.clientX : e.clientY;
this.onMouseUpWrapper_ = browserEvents.conditionalBind(
@@ -793,8 +788,6 @@ export class Scrollbar {
/** Release the scrollbar handle and reset state accordingly. */
private onMouseUpHandle() {
// Tell the workspace to clean up now that the workspace is done moving.
this.workspace.resetDragSurface();
Touch.clearTouchIdentifier();
this.cleanUp();
}

64
core/workspace_comment_svg.ts
View File

@@ -15,7 +15,6 @@ goog.declareModuleId('Blockly.WorkspaceCommentSvg');
// Unused import preserved for side-effects. Remove if unneeded.
import './events/events_selected.js';
import type {BlockDragSurfaceSvg} from './block_drag_surface.js';
import * as browserEvents from './browser_events.js';
import * as common from './common.js';
// import * as ContextMenu from './contextmenu.js';
@@ -93,7 +92,6 @@ export class WorkspaceCommentSvg
/** Whether the comment is rendered onscreen and is a part of the DOM. */
private rendered = false;
private readonly useDragSurface: boolean;
/**
* @param workspace The block's workspace.
@@ -123,12 +121,6 @@ export class WorkspaceCommentSvg
});
this.svgGroup.appendChild(this.svgRect_);
/**
* Whether to move the comment to the drag surface when it is dragged.
* True if it should move, false if it should be translated directly.
*/
this.useDragSurface = !!workspace.getBlockDragSurface();
this.render();
}
@@ -325,10 +317,6 @@ export class WorkspaceCommentSvg
let x = 0;
let y = 0;
const dragSurfaceGroup = this.useDragSurface
? this.workspace.getBlockDragSurface()!.getGroup()
: null;
let element: Node | null = this.getSvgRoot();
if (element) {
do {
@@ -336,24 +324,11 @@ export class WorkspaceCommentSvg
const xy = svgMath.getRelativeXY(element as Element);
x += xy.x;
y += xy.y;
// If this element is the current element on the drag surface, include
// the translation of the drag surface itself.
if (
this.useDragSurface &&
this.workspace.getBlockDragSurface()!.getCurrentBlock() === element
) {
const surfaceTranslation = this.workspace
.getBlockDragSurface()!
.getSurfaceTranslation();
x += surfaceTranslation.x;
y += surfaceTranslation.y;
}
element = element.parentNode;
} while (
element &&
element !== this.workspace.getBubbleCanvas() &&
element !== dragSurfaceGroup
element !== null
);
}
this.xy_ = new Coordinate(x, y);
@@ -397,43 +372,14 @@ export class WorkspaceCommentSvg
}
/**
* Move this comment to its workspace's drag surface, accounting for
* positioning. Generally should be called at the same time as
* setDragging(true). Does nothing if useDragSurface_ is false.
* Move this comment during a drag.
*
* @internal
*/
moveToDragSurface() {
if (!this.useDragSurface) {
return;
}
// The translation for drag surface blocks,
// is equal to the current relative-to-surface position,
// to keep the position in sync as it move on/off the surface.
// This is in workspace coordinates.
const xy = this.getRelativeToSurfaceXY();
this.clearTransformAttributes();
this.workspace.getBlockDragSurface()!.translateSurface(xy.x, xy.y);
// Execute the move on the top-level SVG component
this.workspace.getBlockDragSurface()!.setBlocksAndShow(this.getSvgRoot());
}
/**
* Move this comment during a drag, taking into account whether we are using a
* drag surface to translate blocks.
*
* @param dragSurface The surface that carries rendered items during a drag,
* or null if no drag surface is in use.
* @param newLoc The location to translate to, in workspace coordinates.
* @internal
*/
moveDuringDrag(dragSurface: BlockDragSurfaceSvg, newLoc: Coordinate) {
if (dragSurface) {
dragSurface.translateSurface(newLoc.x, newLoc.y);
} else {
const translation = `translate(${newLoc.x}, ${newLoc.y})`;
this.getSvgRoot().setAttribute('transform', translation);
}
moveDuringDrag(newLoc: Coordinate) {
const translation = `translate(${newLoc.x}, ${newLoc.y})`;
this.getSvgRoot().setAttribute('transform', translation);
}
/**

6
core/workspace_dragger.ts
View File

@@ -19,9 +19,7 @@ import type {WorkspaceSvg} from './workspace_svg.js';
/**
* Class for a workspace dragger. It moves the workspace around when it is
* being dragged by a mouse or touch.
* Note that the workspace itself manages whether or not it has a drag surface
* and how to do translations based on that. This simply passes the right
* commands based on events.
*
*/
export class WorkspaceDragger {
private readonly horizontalScrollEnabled_: boolean;
@@ -64,7 +62,6 @@ export class WorkspaceDragger {
if (common.getSelected()) {
common.getSelected()!.unselect();
}
this.workspace.setupDragSurface();
}
/**
@@ -77,7 +74,6 @@ export class WorkspaceDragger {
endDrag(currentDragDeltaXY: Coordinate) {
// Make sure everything is up to date.
this.drag(currentDragDeltaXY);
this.workspace.resetDragSurface();
}
/**

137
core/workspace_svg.ts
View File

@@ -20,7 +20,6 @@ import './events/events_theme_change.js';
import './events/events_viewport.js';
import type {Block} from './block.js';
import type {BlockDragSurfaceSvg} from './block_drag_surface.js';
import type {BlockSvg} from './block_svg.js';
import type {BlocklyOptions} from './blockly_options.js';
import * as browserEvents from './browser_events.js';
@@ -75,7 +74,6 @@ import {Workspace} from './workspace.js';
import {WorkspaceAudio} from './workspace_audio.js';
import {WorkspaceComment} from './workspace_comment.js';
import {WorkspaceCommentSvg} from './workspace_comment_svg.js';
import type {WorkspaceDragSurfaceSvg} from './workspace_drag_surface_svg.js';
import * as Xml from './xml.js';
import {ZoomControls} from './zoom_controls.js';
import {ContextMenuOption} from './contextmenu_registry.js';
@@ -222,26 +220,6 @@ export class WorkspaceSvg extends Workspace implements IASTNodeLocationSvg {
*/
currentGesture_: Gesture | null = null;
/** This workspace's surface for dragging blocks, if it exists. */
private readonly blockDragSurface: BlockDragSurfaceSvg | null = null;
/** This workspace's drag surface, if it exists. */
private readonly workspaceDragSurface: WorkspaceDragSurfaceSvg | null = null;
/**
* Whether to move workspace to the drag surface when it is dragged.
* True if it should move, false if it should be translated directly.
*/
private readonly useWorkspaceDragSurface;
/**
* Whether the drag surface is actively in use. When true, calls to
* translate will translate the drag surface instead of the translating the
* workspace directly.
* This is set to true in setupDragSurface and to false in resetDragSurface.
*/
private isDragSurfaceActive = false;
/**
* The first parent div with 'injectionDiv' in the name, or null if not set.
* Access this with getInjectionDiv.
@@ -338,14 +316,8 @@ export class WorkspaceSvg extends Workspace implements IASTNodeLocationSvg {
/**
* @param options Dictionary of options.
* @param opt_blockDragSurface Drag surface for blocks.
* @param opt_wsDragSurface Drag surface for the workspace.
*/
constructor(
options: Options,
opt_blockDragSurface?: BlockDragSurfaceSvg,
opt_wsDragSurface?: WorkspaceDragSurfaceSvg
) {
constructor(options: Options) {
super(options);
const MetricsManagerClass = registry.getClassFromOptions(
@@ -369,16 +341,6 @@ export class WorkspaceSvg extends Workspace implements IASTNodeLocationSvg {
this.connectionDBList = ConnectionDB.init(this.connectionChecker);
if (opt_blockDragSurface) {
this.blockDragSurface = opt_blockDragSurface;
}
if (opt_wsDragSurface) {
this.workspaceDragSurface = opt_wsDragSurface;
}
this.useWorkspaceDragSurface = !!this.workspaceDragSurface;
/**
* Object in charge of loading, storing, and playing audio for a workspace.
*/
@@ -1214,18 +1176,10 @@ export class WorkspaceSvg extends Workspace implements IASTNodeLocationSvg {
* the Blockly div.
*/
translate(x: number, y: number) {
if (this.useWorkspaceDragSurface && this.isDragSurfaceActive) {
this.workspaceDragSurface?.translateSurface(x, y);
} else {
const translation =
'translate(' + x + ',' + y + ') ' + 'scale(' + this.scale + ')';
this.svgBlockCanvas_.setAttribute('transform', translation);
this.svgBubbleCanvas_.setAttribute('transform', translation);
}
// Now update the block drag surface if we're using one.
if (this.blockDragSurface) {
this.blockDragSurface.translateAndScaleGroup(x, y, this.scale);
}
const translation =
'translate(' + x + ',' + y + ') ' + 'scale(' + this.scale + ')';
this.svgBlockCanvas_.setAttribute('transform', translation);
this.svgBubbleCanvas_.setAttribute('transform', translation);
// And update the grid if we're using one.
if (this.grid) {
this.grid.moveTo(x, y);
@@ -1234,87 +1188,6 @@ export class WorkspaceSvg extends Workspace implements IASTNodeLocationSvg {
this.maybeFireViewportChangeEvent();
}
/**
* Called at the end of a workspace drag to take the contents
* out of the drag surface and put them back into the workspace SVG.
* Does nothing if the workspace drag surface is not enabled.
*
* @internal
*/
resetDragSurface() {
// Don't do anything if we aren't using a drag surface.
if (!this.useWorkspaceDragSurface) {
return;
}
this.isDragSurfaceActive = false;
const trans = this.workspaceDragSurface!.getSurfaceTranslation();
this.workspaceDragSurface!.clearAndHide(this.svgGroup_);
const translation =
'translate(' +
trans.x +
',' +
trans.y +
') ' +
'scale(' +
this.scale +
')';
this.svgBlockCanvas_.setAttribute('transform', translation);
this.svgBubbleCanvas_.setAttribute('transform', translation);
}
/**
* Called at the beginning of a workspace drag to move contents of
* the workspace to the drag surface.
* Does nothing if the drag surface is not enabled.
*
* @internal
*/
setupDragSurface() {
// Don't do anything if we aren't using a drag surface.
if (!this.useWorkspaceDragSurface) {
return;
}
// This can happen if the user starts a drag, mouses up outside of the
// document where the mouseup listener is registered (e.g. outside of an
// iframe) and then moves the mouse back in the workspace. On mobile and
// ff, we get the mouseup outside the frame. On chrome and safari desktop we
// do not.
if (this.isDragSurfaceActive) {
return;
}
this.isDragSurfaceActive = true;
// Figure out where we want to put the canvas back. The order
// in the is important because things are layered.
const previousElement = this.svgBlockCanvas_.previousSibling as Element;
const width = parseInt(this.getParentSvg().getAttribute('width') ?? '0');
const height = parseInt(this.getParentSvg().getAttribute('height') ?? '0');
const coord = svgMath.getRelativeXY(this.getCanvas());
this.workspaceDragSurface!.setContentsAndShow(
this.getCanvas(),
this.getBubbleCanvas(),
previousElement,
width,
height,
this.scale
);
this.workspaceDragSurface!.translateSurface(coord.x, coord.y);
}
/**
* Gets the drag surface blocks are moved to when a drag is started.
*
* @returns This workspace's block drag surface, if one is in use.
* @internal
*/
getBlockDragSurface(): BlockDragSurfaceSvg | null {
return this.blockDragSurface;
}
/**
* Returns the horizontal offset of the workspace.
* Intended for LTR/RTL compatibility in XML.