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 -->

tests/blocksuite/e2e/edgeless/edgeless-text.spec.ts

@@ -441,9 +441,11 @@ test.describe('edgeless text block', () => {
     );
     await page.mouse.up();
 
-    expect(await getPageSnapshot(page, true)).toMatchSnapshot(
-      `${testInfo.title}_drag.json`
-    );
+    const selectedRect2 = await getEdgelessSelectedRect(page);
+    expect(selectedRect2.width).toBeCloseTo(selectedRect1.width + 45);
+    expect(selectedRect2.height).toBeCloseTo(selectedRect1.height);
+    expect(selectedRect2.x).toBeCloseTo(selectedRect1.x);
+    expect(selectedRect2.y).toBeCloseTo(selectedRect1.y);
   });
 
   test('cut edgeless text', async ({ page }) => {

tests/blocksuite/e2e/edgeless/note/scale.spec.ts

@@ -137,7 +137,10 @@ test.describe('note scale', () => {
     await page.mouse.down();
     await page.mouse.move(
       noteRect.x + noteRect.width * 2,
-      noteRect.y + noteRect.height * 2
+      noteRect.y + noteRect.height * 2,
+      {
+        steps: 10,
+      }
     );
     await page.mouse.up();
 

tests/blocksuite/e2e/edgeless/note/undo-redo.spec.ts

@@ -56,18 +56,17 @@ test('undo/redo should work correctly after resizing', async ({ page }) => {
   await switchEditorMode(page);
   await zoomResetByKeyboard(page);
   await activeNoteInEdgeless(page, noteId);
-  await waitNextFrame(page, 400);
+  await waitNextFrame(page, 600);
   // current implementation may be a little inefficient
   await fillLine(page, true);
   await page.mouse.click(0, 0);
-  await waitNextFrame(page, 400);
+  await waitNextFrame(page, 600);
   await selectNoteInEdgeless(page, noteId);
 
   const initRect = await getNoteRect(page, noteId);
   const rightHandle = page.locator('.handle[aria-label="right"] .resize');
   const box = await rightHandle.boundingBox();
   if (box === null) throw new Error();
-
   await dragBetweenCoords(
     page,
     { x: box.x + 5, y: box.y + 5 },

tests/blocksuite/e2e/edgeless/rotation.spec.ts

@@ -120,7 +120,7 @@ test.describe('rotation', () => {
       { x: 100, y: 100 },
       { x: 200, y: 200 }
     );
-    await rotateElementByHandle(page, 90, 'bottom-left');
+    await rotateElementByHandle(page, 90, 'bottom-left', 10);
     await assertEdgelessSelectedRectRotation(page, 90);
 
     await resizeElementByHandle(page, { x: 10, y: -10 }, 'bottom-right');

tests/blocksuite/e2e/edgeless/text.spec.ts

@@ -7,6 +7,7 @@ import {
   initEmptyEdgelessState,
   pressArrowLeft,
   pressEnter,
+  resizeElementByHandle,
   setEdgelessTool,
   SHORT_KEY,
   switchEditorMode,
@@ -208,12 +209,7 @@ test.describe('edgeless canvas text', () => {
     let lastHeight = selectedRect.height;
 
     // move cursor to the right edge and drag it to resize the width of text element
-    await page.mouse.move(130 + lastWidth, 160);
-    await page.mouse.down();
-    await page.mouse.move(130 + lastWidth / 2, 160, {
-      steps: 10,
-    });
-    await page.mouse.up();
+    await resizeElementByHandle(page, { x: -20, y: 0 }, 'right', 10);
 
     // the text should be wrapped, so check the width and height of text element
     selectedRect = await getEdgelessSelectedRect(page);
@@ -236,23 +232,13 @@ test.describe('edgeless canvas text', () => {
     selectedRect = await getEdgelessSelectedRect(page);
     lastWidth = selectedRect.width;
     lastHeight = selectedRect.height;
-    // move cursor to the left edge and drag it to resize the width of text element
-    await page.mouse.move(130, 160);
-    await page.mouse.down();
-    await page.mouse.move(60, 160, {
-      steps: 10,
-    });
-    await page.mouse.up();
+
+    await resizeElementByHandle(page, { x: 80, y: 0 }, 'right', 10);
 
     // the text should be unwrapped, check the width and height of text element
     selectedRect = await getEdgelessSelectedRect(page);
     expect(selectedRect.width).toBeGreaterThan(lastWidth);
     expect(selectedRect.height).toBeLessThan(lastHeight);
-
-    await page.mouse.dblclick(100, 160);
-    await waitForInlineEditorStateUpdated(page);
-    await waitNextFrame(page);
-    await assertEdgelessCanvasText(page, 'hellohello');
   });
 
   test('text element should have maxWidth after adjusting width by dragging left or right edge', async ({

tests/blocksuite/e2e/utils/actions/edgeless.ts

@@ -594,6 +594,10 @@ export async function resizeElementByHandle(
   page: Page,
   delta: Point,
   corner:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
     | 'top-left'
     | 'top-right'
     | 'bottom-right'
@@ -604,11 +608,13 @@ export async function resizeElementByHandle(
   const handle = page.locator(`.handle[aria-label="${corner}"] .resize`);
   const box = await handle.boundingBox();
   if (box === null) throw new Error();
-  const offset = 5;
+  const xOffset = box.width / 2;
+  const yOffset = box.height / 2;
+
   await dragBetweenCoords(
     page,
-    { x: box.x + offset, y: box.y + offset },
-    { x: box.x + delta.x + offset, y: box.y + delta.y + offset },
+    { x: box.x + xOffset, y: box.y + yOffset },
+    { x: box.x + delta.x + xOffset, y: box.y + delta.y + yOffset },
     {
       steps,
       beforeMouseUp,

tests/kit/src/utils/editor.ts

@@ -454,6 +454,10 @@ export async function resizeElementByHandle(
   page: Page,
   delta: IVec,
   corner:
+    | 'right'
+    | 'left'
+    | 'top'
+    | 'bottom'
     | 'top-left'
     | 'top-right'
     | 'bottom-right'