refactor(editor): rewrite resize and rotate (#12054)

### Changed

This pr split the old `edgeless-selected-rect` into four focused modules:

- `edgeless-selected-rect`: Provide an entry point for user operation on view layer only, no further logic here.

- `GfxViewInteractionExtension`: Allow you to plug in custom resize/rotate behaviors for block or canvas element. If you don’t register an extension, it falls back to the default behaviours.

- `InteractivityManager`: Provide the API that accepts resize/rotate requests, invokes any custom behaviors you’ve registered, tracks the lifecycle and intermediate state, then hands off to the math engine.

- `ResizeController`: A pure math engine that listens for pointer moves and pointer ups and calculates new sizes, positions, and angles. It doesn’t call any business APIs.

### Customizing an element’s resize/rotate behavior
Call `GfxViewInteractionExtension` with the element’s flavour or type plus a config object. In the config you can define:

- `resizeConstraint` (min/max width & height, lock ratio)
- `handleResize(context)` method that returns an object containing `beforeResize`、`onResizeStart`、`onResizeMove`、`onResizeEnd`
- `handleRotate(context)` method that returns an object containing `beforeRotate`、`onRotateStart`、`onRotateMove`、`onRotateEnd`

```typescript
import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';

GfxViewInteractionExtension(
  flavourOrElementType,
  {
    resizeConstraint: {
      minWidth,
      maxWidth,
      lockRatio,
      minHeight,
      maxHeight
    },
    handleResize(context) {
      return {
        beforeResize(context) {},
        onResizeStart(context) {},
        onResizeMove(context) {},
        onResizeEnd(context) {}
      };
    },
    handleRotate(context) {
      return {
        beforeRotate(context) {},
        onRotateStart(context) {},
        onRotateMove(context) {},
        onRotateEnd(context) {}
      };
    }
  }
);
```

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

- **New Features**
  - Added interaction extensions for edgeless variants of attachment, bookmark, edgeless text, embedded docs, images, notes, frames, AI chat blocks, and various embed blocks (Figma, GitHub, HTML, iframe, Loom, YouTube).
  - Introduced interaction extensions for graphical elements including connectors, groups, mind maps, shapes, and text, supporting constrained resizing and rotation disabling where applicable.
  - Implemented a unified interaction extension framework enabling configurable resize and rotate lifecycle handlers.
  - Enhanced autocomplete overlay behavior based on selection context.

- **Refactor**
  - Removed legacy resize manager and element-specific resize/rotate logic, replacing with a centralized, extensible interaction system.
  - Simplified resize handle rendering to a data-driven approach with improved cursor management.
  - Replaced complex cursor rotation calculations with fixed-angle mappings for resize handles.
  - Streamlined selection rectangle component to use interactivity services for resize and rotate handling.

- **Bug Fixes**
  - Fixed connector update triggers to reduce unnecessary updates.
  - Improved resize constraints enforcement and interaction state tracking.

- **Tests**
  - Refined end-to-end tests to use higher-level resize utilities and added finer-grained assertions on element dimensions.
  - Enhanced mouse movement granularity in drag tests for better simulation fidelity.

- **Chores**
  - Added new workspace dependencies and project references for the interaction framework modules.
  - Extended public API exports to include new interaction types and extensions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/gfx/connector/src/connector-watcher.ts

@@ -62,10 +62,7 @@ export const connectorWatcher: SurfaceMiddleware = (
       if (
         'type' in element &&
         element.type === 'connector' &&
-        (props['mode'] !== undefined ||
-          props['target'] ||
-          props['source'] ||
-          (props['xywh'] && !(element as ConnectorElementModel).updatingPath))
+        (props['mode'] !== undefined || props['target'] || props['source'])
       ) {
         addToUpdateList(element as ConnectorElementModel);
       }

blocksuite/affine/gfx/connector/src/view.ts

@@ -10,7 +10,7 @@ import { ConnectorElementRendererExtension } from './element-renderer';
 import { ConnectorFilter } from './element-transform';
 import { connectorToolbarExtension } from './toolbar/config';
 import { connectorQuickTool } from './toolbar/quick-tool';
-import { ConnectorElementView } from './view/view';
+import { ConnectorElementView, ConnectorInteraction } from './view/view';
 
 export class ConnectorViewExtension extends ViewExtensionProvider {
   override name = 'affine-connector-gfx';
@@ -30,6 +30,7 @@ export class ConnectorViewExtension extends ViewExtensionProvider {
       context.register(connectorQuickTool);
       context.register(connectorToolbarExtension);
       context.register(ConnectionOverlay);
+      context.register(ConnectorInteraction);
     }
   }
 }

blocksuite/affine/gfx/connector/src/view/view.ts

@@ -10,6 +10,7 @@ import {
   type DragStartContext,
   generateKeyBetween,
   GfxElementModelView,
+  GfxViewInteractionExtension,
 } from '@blocksuite/std/gfx';
 
 import { mountConnectorLabelEditor } from '../text/edgeless-connector-label-editor';
@@ -174,3 +175,72 @@ export class ConnectorElementView extends GfxElementModelView<ConnectorElementMo
     });
   }
 }
+
+export const ConnectorInteraction =
+  GfxViewInteractionExtension<ConnectorElementView>(ConnectorElementView.type, {
+    handleResize: ({ model, gfx }) => {
+      const initialPath = model.absolutePath;
+
+      return {
+        beforeResize(context): void {
+          const { elements } = context;
+          // show the handles only when connector is selected along with
+          // its source and target elements
+          if (
+            elements.length === 1 ||
+            (model.source.id &&
+              !elements.some(el => el.model.id === model.source.id)) ||
+            (model.target.id &&
+              !elements.some(el => el.model.id === model.target.id))
+          ) {
+            context.set({
+              allowedHandlers: [],
+            });
+          }
+        },
+
+        onResizeStart(): void {
+          model.stash('labelXYWH');
+          model.stash('source');
+          model.stash('target');
+        },
+
+        onResizeMove(context): void {
+          const { matrix } = context;
+          const props = model.resize(initialPath, matrix);
+
+          gfx.updateElement(model, props);
+        },
+
+        onResizeEnd(): void {
+          model.pop('labelXYWH');
+          model.pop('source');
+          model.pop('target');
+        },
+      };
+    },
+    handleRotate({ model, gfx }) {
+      const initialPath = model.absolutePath;
+
+      return {
+        onRotateStart(): void {
+          model.stash('labelXYWH');
+          model.stash('source');
+          model.stash('target');
+        },
+
+        onRotateMove(context): void {
+          const { matrix } = context;
+          const props = model.resize(initialPath, matrix);
+
+          gfx.updateElement(model, props);
+        },
+
+        onRotateEnd(): void {
+          model.pop('labelXYWH');
+          model.pop('source');
+          model.pop('target');
+        },
+      };
+    },
+  });

blocksuite/affine/gfx/group/src/element-view.ts

@@ -1,5 +1,8 @@
-import type { GroupElementModel } from '@blocksuite/affine-model';
-import { GfxElementModelView } from '@blocksuite/std/gfx';
+import { GroupElementModel } from '@blocksuite/affine-model';
+import {
+  GfxElementModelView,
+  GfxViewInteractionExtension,
+} from '@blocksuite/std/gfx';
 
 import { mountGroupTitleEditor } from './text/edgeless-group-title-editor';
 
@@ -29,3 +32,26 @@ export class GroupElementView extends GfxElementModelView<GroupElementModel> {
     });
   }
 }
+
+export const GroupInteraction = GfxViewInteractionExtension<GroupElementView>(
+  GroupElementView.type,
+  {
+    handleResize(context) {
+      const empty = () => {};
+      context.model.descendantElements.forEach(elm => {
+        if (elm instanceof GroupElementModel) {
+          return;
+        }
+
+        context.add(elm);
+      });
+      context.delete(context.model);
+
+      return {
+        onResizeStart: empty,
+        onResizeMove: empty,
+        onResizeEnd: empty,
+      };
+    },
+  }
+);

blocksuite/affine/gfx/group/src/view.ts

@@ -5,7 +5,7 @@ import {
 
 import { effects } from './effects';
 import { GroupElementRendererExtension } from './element-renderer';
-import { GroupElementView } from './element-view';
+import { GroupElementView, GroupInteraction } from './element-view';
 import { groupToolbarExtension } from './toolbar/config';
 
 export class GroupViewExtension extends ViewExtensionProvider {
@@ -22,6 +22,7 @@ export class GroupViewExtension extends ViewExtensionProvider {
     context.register(GroupElementView);
     if (this.isEdgeless(context.scope)) {
       context.register(groupToolbarExtension);
+      context.register(GroupInteraction);
     }
   }
 }

blocksuite/affine/gfx/mindmap/src/view.ts

@@ -12,7 +12,7 @@ import {
   shapeMindmapToolbarExtension,
 } from './toolbar/config';
 import { mindMapSeniorTool } from './toolbar/senior-tool';
-import { MindMapView } from './view/view';
+import { MindMapInteraction, MindMapView } from './view/view';
 
 export class MindmapViewExtension extends ViewExtensionProvider {
   override name = 'affine-mindmap-gfx';
@@ -31,5 +31,6 @@ export class MindmapViewExtension extends ViewExtensionProvider {
     context.register(MindMapView);
     context.register(MindMapDragExtension);
     context.register(MindMapIndicatorOverlay);
+    context.register(MindMapInteraction);
   }
 }

blocksuite/affine/gfx/mindmap/src/view/view.ts

@@ -12,6 +12,7 @@ import type { PointerEventState } from '@blocksuite/std';
 import {
   type BoxSelectionContext,
   GfxElementModelView,
+  GfxViewInteractionExtension,
   type SelectedContext,
 } from '@blocksuite/std/gfx';
 
@@ -381,3 +382,12 @@ export class MindMapView extends GfxElementModelView<MindmapElementModel> {
     });
   }
 }
+
+export const MindMapInteraction = GfxViewInteractionExtension(
+  MindMapView.type,
+  {
+    resizeConstraint: {
+      allowedHandlers: [],
+    },
+  }
+);

blocksuite/affine/gfx/shape/src/element-view.ts

@@ -1,6 +1,10 @@
 import { ShapeElementModel } from '@blocksuite/affine-model';
-import { GfxElementModelView } from '@blocksuite/std/gfx';
+import {
+  GfxElementModelView,
+  GfxViewInteractionExtension,
+} from '@blocksuite/std/gfx';
 
+import { normalizeShapeBound } from './element-renderer';
 import { mountShapeTextEditor } from './text/edgeless-shape-text-editor';
 
 export class ShapeElementView extends GfxElementModelView<ShapeElementModel> {
@@ -26,3 +30,16 @@ export class ShapeElementView extends GfxElementModelView<ShapeElementModel> {
     });
   }
 }
+
+export const ShapeViewInteraction =
+  GfxViewInteractionExtension<ShapeElementView>(ShapeElementView.type, {
+    handleResize: () => {
+      return {
+        onResizeMove({ newBound, model }) {
+          const normalizedBound = normalizeShapeBound(model, newBound);
+
+          model.xywh = normalizedBound.serialize();
+        },
+      };
+    },
+  });

blocksuite/affine/gfx/shape/src/view.ts

@@ -8,7 +8,7 @@ import {
   HighlighterElementRendererExtension,
   ShapeElementRendererExtension,
 } from './element-renderer';
-import { ShapeElementView } from './element-view';
+import { ShapeElementView, ShapeViewInteraction } from './element-view';
 import { ShapeTool } from './shape-tool';
 import { shapeSeniorTool, shapeToolbarExtension } from './toolbar';
 
@@ -29,6 +29,7 @@ export class ShapeViewExtension extends ViewExtensionProvider {
       context.register(ShapeTool);
       context.register(shapeSeniorTool);
       context.register(shapeToolbarExtension);
+      context.register(ShapeViewInteraction);
     }
   }
 }

blocksuite/affine/gfx/text/src/element-view.ts

@@ -1,7 +1,11 @@
 import type { TextElementModel } from '@blocksuite/affine-model';
-import { GfxElementModelView } from '@blocksuite/std/gfx';
+import {
+  GfxElementModelView,
+  GfxViewInteractionExtension,
+} from '@blocksuite/std/gfx';
 
 import { mountTextElementEditor } from './edgeless-text-editor';
+import { normalizeTextBound } from './element-renderer';
 
 export class TextElementView extends GfxElementModelView<TextElementModel> {
   static override type: string = 'text';
@@ -26,3 +30,66 @@ export class TextElementView extends GfxElementModelView<TextElementModel> {
     });
   }
 }
+
+export const TextInteraction = GfxViewInteractionExtension<TextElementView>(
+  TextElementView.type,
+  {
+    resizeConstraint: {
+      lockRatio: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
+    },
+    handleResize({ model }) {
+      let initialFontSize = model.fontSize;
+      return {
+        onResizeStart(context) {
+          const { handle } = context;
+
+          context.default(context);
+
+          if (handle === 'left' || handle === 'right') {
+            model.stash('hasMaxWidth');
+          }
+          model.stash('fontSize');
+        },
+        onResizeMove(context) {
+          const { handle, newBound, originalBound } = context;
+          if (handle === 'left' || handle === 'right') {
+            const {
+              text: yText,
+              fontFamily,
+              fontSize,
+              fontStyle,
+              fontWeight,
+              hasMaxWidth,
+            } = model;
+            // If the width of the text element has been changed by dragging,
+            // We need to set hasMaxWidth to true for wrapping the text
+            const normalizedBound = normalizeTextBound(
+              {
+                yText,
+                fontFamily,
+                fontSize,
+                fontStyle,
+                fontWeight,
+                hasMaxWidth,
+              },
+              newBound,
+              true
+            );
+
+            model.xywh = normalizedBound.serialize();
+            model.hasMaxWidth = true;
+          } else {
+            model.xywh = newBound.serialize();
+            model.fontSize = initialFontSize * (newBound.w / originalBound.w);
+          }
+        },
+        onResizeEnd(context) {
+          context.default(context);
+
+          model.pop('fontSize');
+          model.pop('hasMaxWidth');
+        },
+      };
+    },
+  }
+);

blocksuite/affine/gfx/text/src/view.ts

@@ -6,7 +6,7 @@ import {
 import { DblClickAddEdgelessText } from './dblclick-add-edgeless-text';
 import { effects } from './effects';
 import { TextElementRendererExtension } from './element-renderer';
-import { TextElementView } from './element-view';
+import { TextElementView, TextInteraction } from './element-view';
 import { TextTool } from './tool';
 import { textToolbarExtension } from './toolbar';
 
@@ -26,6 +26,7 @@ export class TextViewExtension extends ViewExtensionProvider {
       context.register(TextTool);
       context.register(textToolbarExtension);
       context.register(DblClickAddEdgelessText);
+      context.register(TextInteraction);
     }
   }
 }