feat: Add snapping to workspace comments. (#8070)

Now that there are two things that snap (blocks and WS comments), the alignment code in being moved to a common place.

core/block_svg.ts

@@ -420,19 +420,11 @@ export class BlockSvg
     if (this.getParent()) return;
     if (this.isInFlyout) return;
     const grid = this.workspace.getGrid();
-    if (!grid || !grid.shouldSnap()) return;
-
-    const spacing = grid.getSpacing();
-    const half = spacing / 2;
-    const xy = this.getRelativeToSurfaceXY();
-    const dx = Math.round(
-      Math.round((xy.x - half) / spacing) * spacing + half - xy.x,
-    );
-    const dy = Math.round(
-      Math.round((xy.y - half) / spacing) * spacing + half - xy.y,
-    );
-    if (dx || dy) {
-      this.moveBy(dx, dy, ['snap']);
+    if (!grid?.shouldSnap()) return;
+    const currentXY = this.getRelativeToSurfaceXY();
+    const alignedXY = grid.alignXY(currentXY);
+    if (alignedXY !== currentXY) {
+      this.moveTo(alignedXY, ['snap']);
     }
   }
 

core/comments/rendered_workspace_comment.ts

@@ -138,6 +138,7 @@ export class RenderedWorkspaceComment
   override moveTo(location: Coordinate, reason?: string[] | undefined): void {
     super.moveTo(location, reason);
     this.view.moveTo(location);
+    this.snapToGrid();
   }
 
   /**
@@ -208,6 +209,7 @@ export class RenderedWorkspaceComment
 
   /** Ends the drag on the comment. */
   endDrag(): void {
+    this.snapToGrid();
     this.dragStrategy.endDrag();
   }
 
@@ -247,4 +249,16 @@ export class RenderedWorkspaceComment
     );
     contextMenu.show(e, menuOptions, this.workspace.RTL);
   }
+
+  /** Snap this comment to the nearest grid point. */
+  snapToGrid(): void {
+    if (this.isDeadOrDying()) return;
+    const grid = this.workspace.getGrid();
+    if (!grid?.shouldSnap()) return;
+    const currentXY = this.getRelativeToSurfaceXY();
+    const alignedXY = grid.alignXY(currentXY);
+    if (alignedXY !== currentXY) {
+      this.moveTo(alignedXY, ['snap']);
+    }
+  }
 }

core/grid.ts

@@ -13,6 +13,7 @@
 // Former goog.module ID: Blockly.Grid
 
 import * as dom from './utils/dom.js';
+import {Coordinate} from './utils/coordinate.js';
 import {Svg} from './utils/svg.js';
 import {GridOptions} from './options.js';
 
@@ -184,6 +185,25 @@ export class Grid {
     this.pattern.setAttribute('y', `${y}`);
   }
 
+  /**
+   * Given a coordinate, return the nearest coordinate aligned to the grid.
+   *
+   * @param xy A workspace coordinate.
+   * @returns Workspace coordinate of nearest grid point.
+   *   If there's no change, return the same coordinate object.
+   */
+  alignXY(xy: Coordinate): Coordinate {
+    const spacing = this.getSpacing();
+    const half = spacing / 2;
+    const x = Math.round(Math.round((xy.x - half) / spacing) * spacing + half);
+    const y = Math.round(Math.round((xy.y - half) / spacing) * spacing + half);
+    if (x === xy.x && y === xy.y) {
+      // No change.
+      return xy;
+    }
+    return new Coordinate(x, y);
+  }
+
   /**
    * Create the DOM for the grid described by options.
    *