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

@@ -28,8 +28,8 @@ interface CloneRect {
 /** PID of disconnect UI animation.  There can only be one at a time. */
 let disconnectPid: ReturnType<typeof setTimeout>|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;
 }

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 {

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');
     }
   }