From 6cb2f7229c4aa7013ad650604dee532f382ab57e Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 18 Jan 2023 15:05:10 -0800 Subject: [PATCH] refactor: Don't use skew_ and translate_ attributes on SVGs to animate blocks. (#6782) * refactor: Remove unused translate_ and skew_ attributes from workspace_comment_svg.ts. * refactor: Stop setting skew_ and translate_ attributes on SVGs. * chore: Run format. * refactor: Return early if no wobbling block is present. --- core/block_animations.ts | 37 ++++++++++++++++------------------- core/block_svg.ts | 29 +++++++++++++++------------ core/workspace_comment_svg.ts | 17 ++++------------ 3 files changed, 37 insertions(+), 46 deletions(-) diff --git a/core/block_animations.ts b/core/block_animations.ts index 47ee63581..9b2d6d0bd 100644 --- a/core/block_animations.ts +++ b/core/block_animations.ts @@ -28,8 +28,8 @@ interface CloneRect { /** PID of disconnect UI animation. There can only be one at a time. */ let disconnectPid: ReturnType|null = null; -/** SVG group of wobbling block. There can only be one at a time. */ -let disconnectGroup: SVGElement|null = null; +/** The wobbling block. There can only be one at a time. */ +let wobblingBlock: BlockSvg|null = null; /** @@ -163,18 +163,18 @@ export function disconnectUiEffect(block: BlockSvg) { magnitude *= -1; } // Start the animation. - disconnectGroup = block.getSvgRoot(); - disconnectUiStep(disconnectGroup, magnitude, new Date()); + wobblingBlock = block; + disconnectUiStep(block, magnitude, new Date()); } /** * Animate a brief wiggle of a disconnected block. * - * @param group SVG element to animate. + * @param block Block to animate. * @param magnitude Maximum degrees skew (reversed for RTL). * @param start Date of animation's start. */ -function disconnectUiStep(group: SVGElement, magnitude: number, start: Date) { +function disconnectUiStep(block: BlockSvg, magnitude: number, start: Date) { const DURATION = 200; // Milliseconds. const WIGGLES = 3; // Half oscillations. @@ -186,13 +186,11 @@ function disconnectUiStep(group: SVGElement, magnitude: number, start: Date) { const val = Math.round( Math.sin(percent * Math.PI * WIGGLES) * (1 - percent) * magnitude); skew = `skewX(${val})`; - disconnectPid = setTimeout(disconnectUiStep, 10, group, magnitude, start); + disconnectPid = setTimeout(disconnectUiStep, 10, block, magnitude, start); } - (group as AnyDuringMigration).skew_ = skew; - group.setAttribute( - 'transform', - (group as AnyDuringMigration).translate_ + - (group as AnyDuringMigration).skew_); + + block.getSvgRoot().setAttribute( + 'transform', `${block.getTranslation()} ${skew}`); } /** @@ -202,13 +200,12 @@ function disconnectUiStep(group: SVGElement, magnitude: number, start: Date) { * @internal */ export function disconnectUiStop() { - if (disconnectGroup) { - if (disconnectPid) { - clearTimeout(disconnectPid); - } - const group = disconnectGroup; - (group as AnyDuringMigration).skew_ = ''; - group.setAttribute('transform', (group as AnyDuringMigration).translate_); - disconnectGroup = null; + if (!wobblingBlock) return; + if (disconnectPid) { + clearTimeout(disconnectPid); + disconnectPid = null; } + wobblingBlock.getSvgRoot().setAttribute( + 'transform', wobblingBlock.getTranslation()); + wobblingBlock = null; } diff --git a/core/block_svg.ts b/core/block_svg.ts index 02e2f0d0a..0bd43a843 100644 --- a/core/block_svg.ts +++ b/core/block_svg.ts @@ -144,6 +144,8 @@ export class BlockSvg extends Block implements IASTNodeLocationSvg, override previousConnection!: RenderedConnection; private readonly useDragSurface_: boolean; + private translation = ''; + /** * @param workspace The block's workspace. * @param prototypeName Name of the language object containing type-specific @@ -183,7 +185,6 @@ export class BlockSvg extends Block implements IASTNodeLocationSvg, /** An optional method for defining custom block context menu items. */ this.customContextMenu = this.customContextMenu; this.svgGroup_ = dom.createSvgElement(Svg.G, {}); - (this.svgGroup_ as AnyDuringMigration).translate_ = ''; /** A block style object. */ this.style = workspace.getRenderer().getConstants().getBlockStyle(null); @@ -435,8 +436,17 @@ export class BlockSvg extends Block implements IASTNodeLocationSvg, * @param y The y coordinate of the translation in workspace units. */ translate(x: number, y: number) { - this.getSvgRoot().setAttribute( - 'transform', 'translate(' + x + ',' + y + ')'); + this.translation = `translate(${x}, ${y})`; + this.getSvgRoot().setAttribute('transform', this.getTranslation()); + } + + /** + * Returns the SVG translation of this block. + * + * @internal + */ + getTranslation(): string { + return this.translation; } /** @@ -506,13 +516,8 @@ export class BlockSvg extends Block implements IASTNodeLocationSvg, this.workspace.getBlockDragSurface()!.translateSurface( newLoc.x, newLoc.y); } else { - (this.svgGroup_ as AnyDuringMigration).translate_ = - 'translate(' + newLoc.x + ',' + newLoc.y + ')'; - (this.svgGroup_ as AnyDuringMigration) - .setAttribute( - 'transform', - (this.svgGroup_ as AnyDuringMigration).translate_ + - (this.svgGroup_ as AnyDuringMigration).skew_); + this.translate(newLoc.x, newLoc.y); + this.getSvgRoot().setAttribute('transform', this.getTranslation()); } } @@ -775,9 +780,7 @@ export class BlockSvg extends Block implements IASTNodeLocationSvg, */ setDragging(adding: boolean) { if (adding) { - const group = this.getSvgRoot(); - (group as AnyDuringMigration).translate_ = ''; - (group as AnyDuringMigration).skew_ = ''; + this.translation = ''; common.draggingConnections.push(...this.getConnections_(true)); dom.addClass(this.svgGroup_, 'blocklyDragging'); } else { diff --git a/core/workspace_comment_svg.ts b/core/workspace_comment_svg.ts index 9e5e96b0d..1c3e30d01 100644 --- a/core/workspace_comment_svg.ts +++ b/core/workspace_comment_svg.ts @@ -108,7 +108,6 @@ export class WorkspaceCommentSvg extends WorkspaceComment implements opt_id?: string) { super(workspace, content, height, width, opt_id); this.svgGroup_ = dom.createSvgElement(Svg.G, {'class': 'blocklyComment'}); - (this.svgGroup_ as AnyDuringMigration).translate_ = ''; this.workspace = workspace; this.svgRect_ = dom.createSvgElement(Svg.RECT, { @@ -408,13 +407,8 @@ export class WorkspaceCommentSvg extends WorkspaceComment implements if (dragSurface) { dragSurface.translateSurface(newLoc.x, newLoc.y); } else { - (this.svgGroup_ as AnyDuringMigration).translate_ = - 'translate(' + newLoc.x + ',' + newLoc.y + ')'; - (this.svgGroup_ as AnyDuringMigration) - .setAttribute( - 'transform', - (this.svgGroup_ as AnyDuringMigration).translate_ + - (this.svgGroup_ as AnyDuringMigration).skew_); + const translation = `translate(${newLoc.x}, ${newLoc.y})`; + this.getSvgRoot().setAttribute('transform', translation); } } @@ -511,12 +505,9 @@ export class WorkspaceCommentSvg extends WorkspaceComment implements */ setDragging(adding: boolean) { if (adding) { - const group = this.getSvgRoot(); - (group as AnyDuringMigration).translate_ = ''; - (group as AnyDuringMigration).skew_ = ''; - dom.addClass(this.svgGroup_, 'blocklyDragging'); + dom.addClass(this.getSvgRoot(), 'blocklyDragging'); } else { - dom.removeClass(this.svgGroup_, 'blocklyDragging'); + dom.removeClass(this.getSvgRoot(), 'blocklyDragging'); } }