fix: tuning drag and resize snapping (#12657)

### Changed
- Better snapping when resize elements

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Improved resizing behavior with enhanced alignment and snapping during element resizing, supporting rotation and multiple element selection.
  - Alignment lines now display more accurately when resizing elements.

- **Refactor**
  - Resizing logic updated to use scale factors instead of position deltas, enabling smoother and more precise resize operations.
  - Resize event data now includes richer details about handle positions, scaling, and original bounds.
  - Coordinate transformations and scaling now account for rotation and aspect ratio locking more robustly.
  - Cursor updates are disabled during active resize or rotate interactions for a smoother user experience.

- **Tests**
  - Updated resizing tests to use square shapes, ensuring consistent verification of aspect ratio maintenance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/gfx/pointer/src/snap/snap-manager.ts

@@ -1,6 +1,6 @@
 import { OverlayIdentifier } from '@blocksuite/affine-block-surface';
 import { MindmapElementModel } from '@blocksuite/affine-model';
-import { Bound } from '@blocksuite/global/gfx';
+import { type Bound } from '@blocksuite/global/gfx';
 import {
   type DragExtensionInitializeContext,
   type ExtensionDragMoveContext,
@@ -74,47 +74,63 @@ export class SnapExtension extends InteractivityExtension {
         return {};
       }
 
-      let alignBound: Bound | null = null;
-
       return {
         onResizeStart(context) {
-          alignBound = snapOverlay.setMovingElements(context.elements);
+          snapOverlay.setMovingElements(context.elements);
         },
         onResizeMove(context) {
-          if (!alignBound || alignBound.w === 0 || alignBound.h === 0) {
-            return;
+          const {
+            handle,
+            originalBound,
+            scaleX,
+            scaleY,
+            handleSign,
+            currentHandlePos,
+            elements,
+          } = context;
+          const rotate = elements.length > 1 ? 0 : elements[0].rotate;
+          const alignDirection: ('vertical' | 'horizontal')[] = [];
+          let switchDirection = false;
+          let nx = handleSign.x;
+          let ny = handleSign.y;
+
+          if (handle.length > 6) {
+            alignDirection.push('vertical', 'horizontal');
+          } else if (rotate % 90 === 0) {
+            nx =
+              handleSign.x * Math.cos((rotate / 180) * Math.PI) -
+              handleSign.y * Math.sin((rotate / 180) * Math.PI);
+            ny =
+              handleSign.x * Math.sin((rotate / 180) * Math.PI) +
+              handleSign.y * Math.cos((rotate / 180) * Math.PI);
+
+            if (Math.abs(nx) > Math.abs(ny)) {
+              alignDirection.push('horizontal');
+            } else {
+              alignDirection.push('vertical');
+            }
+
+            if (rotate % 180 !== 0) {
+              switchDirection = true;
+            }
           }
 
-          const { handle, handleSign, lockRatio } = context;
-          let { dx, dy } = context;
-
-          if (lockRatio) {
-            const min = Math.min(
-              Math.abs(dx / alignBound.w),
-              Math.abs(dy / alignBound.h)
+          if (alignDirection.length > 0) {
+            const rst = snapOverlay.alignResize(
+              currentHandlePos,
+              alignDirection
             );
 
-            dx = min * Math.sign(dx) * alignBound.w;
-            dy = min * Math.sign(dy) * alignBound.h;
+            const dx = switchDirection ? ny * rst.dy : nx * rst.dx;
+            const dy = switchDirection ? nx * rst.dx : ny * rst.dy;
+
+            context.suggest({
+              scaleX: scaleX + dx / originalBound.w,
+              scaleY: scaleY + dy / originalBound.h,
+            });
           }
-
-          const currentBound = new Bound(
-            alignBound.x +
-              (handle.includes('left') ? -dx * handleSign.xSign : 0),
-            alignBound.y +
-              (handle.includes('top') ? -dy * handleSign.ySign : 0),
-            Math.abs(alignBound.w + dx * handleSign.xSign),
-            Math.abs(alignBound.h + dy * handleSign.ySign)
-          );
-          const alignRst = snapOverlay.align(currentBound);
-
-          context.suggest({
-            dx: alignRst.dx + context.dx,
-            dy: alignRst.dy + context.dy,
-          });
         },
         onResizeEnd() {
-          alignBound = null;
           snapOverlay.clear();
         },
       };

blocksuite/affine/gfx/pointer/src/snap/snap-overlay.ts

@@ -3,7 +3,7 @@ import {
   ConnectorElementModel,
   MindmapElementModel,
 } from '@blocksuite/affine-model';
-import { almostEqual, Bound, Point } from '@blocksuite/global/gfx';
+import { almostEqual, Bound, type IVec, Point } from '@blocksuite/global/gfx';
 import type { GfxModel } from '@blocksuite/std/gfx';
 
 interface Distance {
@@ -586,6 +586,60 @@ export class SnapOverlay extends Overlay {
     );
   }
 
+  alignResize(position: IVec, direction: ('vertical' | 'horizontal')[]) {
+    const rst = { dx: 0, dy: 0 };
+
+    const { viewport } = this.gfx;
+    const threshold = ALIGN_THRESHOLD / viewport.zoom;
+    const searchBound = new Bound(
+      position[0] - threshold / 2,
+      position[1] - threshold / 2,
+      threshold,
+      threshold
+    );
+    const alignBound = new Bound(position[0], position[1], 0, 0);
+
+    this._intraGraphicAlignLines = {
+      horizontal: [],
+      vertical: [],
+    };
+    this._distributedAlignLines = [];
+    this._updateAlignCandidates(searchBound);
+
+    for (const other of this._referenceBounds.all) {
+      const closestDistances = this._calculateClosestDistances(
+        alignBound,
+        other
+      );
+
+      if (
+        direction.includes('horizontal') &&
+        closestDistances.horiz &&
+        (!this._intraGraphicAlignLines.horizontal.length ||
+          Math.abs(closestDistances.horiz.distance) < Math.abs(rst.dx))
+      ) {
+        this._updateXAlignPoint(rst, alignBound, other, closestDistances);
+      }
+
+      if (
+        direction.includes('vertical') &&
+        closestDistances.vert &&
+        (!this._intraGraphicAlignLines.vertical.length ||
+          Math.abs(closestDistances.vert.distance) < Math.abs(rst.dy))
+      ) {
+        this._updateYAlignPoint(rst, alignBound, other, closestDistances);
+      }
+    }
+
+    this._intraGraphicAlignLines.horizontal =
+      this._intraGraphicAlignLines.horizontal.slice(0, 1);
+    this._intraGraphicAlignLines.vertical =
+      this._intraGraphicAlignLines.vertical.slice(0, 1);
+    this._renderer?.refresh();
+
+    return rst;
+  }
+
   align(bound: Bound): { dx: number; dy: number } {
     const rst = { dx: 0, dy: 0 };
     const threshold = ALIGN_THRESHOLD / this.gfx.viewport.zoom;

blocksuite/affine/widgets/edgeless-selected-rect/src/edgeless-selected-rect.ts

@@ -374,6 +374,8 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
     type: 'resize' | 'rotate';
     angle: number;
     handle: ResizeHandle;
+    flipX?: boolean;
+    flipY?: boolean;
     pure?: boolean;
   }) => {
     if (!options) {
@@ -381,8 +383,25 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
       return 'default';
     }
 
-    const { type, angle, handle } = options;
+    const { type, angle, flipX, flipY } = options;
     let cursor: CursorType = 'default';
+    let handle: ResizeHandle = options.handle;
+
+    if (flipX) {
+      handle = (
+        handle.includes('left')
+          ? handle.replace('left', 'right')
+          : handle.replace('right', 'left')
+      ) as ResizeHandle;
+    }
+
+    if (flipY) {
+      handle = (
+        handle.includes('top')
+          ? handle.replace('top', 'bottom')
+          : handle.replace('bottom', 'top')
+      ) as ResizeHandle;
+    }
 
     if (type === 'rotate') {
       cursor = generateCursorUrl(angle, handle);
@@ -626,7 +645,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
                 onResizeStart: () => {
                   this._mode = 'resize';
                 },
-                onResizeUpdate: ({ lockRatio, scaleX, exceed }) => {
+                onResizeUpdate: ({ lockRatio, scaleX, scaleY, exceed }) => {
                   if (lockRatio) {
                     this._scaleDirection = handle;
                     this._scalePercent = `${Math.round(scaleX * 100)}%`;
@@ -642,6 +661,8 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
                     type: 'resize',
                     angle: elements.length > 1 ? 0 : (elements[0]?.rotate ?? 0),
                     handle,
+                    flipX: scaleX < 0,
+                    flipY: scaleY < 0,
                   });
                 },
                 onResizeEnd: () => {
@@ -652,6 +673,14 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
             }
           },
           option => {
+            if (
+              ['resize', 'rotate'].includes(
+                interaction.activeInteraction$.value?.type ?? ''
+              )
+            ) {
+              return '';
+            }
+
             return this._updateCursor({
               ...option,
               angle: elements.length > 1 ? 0 : (elements[0]?.rotate ?? 0),