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/blocks/embed/src/common/embed-block-element.ts

@@ -11,7 +11,11 @@ import {
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import { findAncestorModel } from '@blocksuite/affine-shared/utils';
 import type { BlockService } from '@blocksuite/std';
-import type { GfxCompatibleProps } from '@blocksuite/std/gfx';
+import {
+  type GfxCompatibleProps,
+  GfxViewInteractionExtension,
+  type ResizeConstraint,
+} from '@blocksuite/std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 import { computed, type ReadonlySignal, signal } from '@preact/signals-core';
 import type { TemplateResult } from 'lit';
@@ -163,3 +167,31 @@ export class EmbedBlockComponent<
 
   override accessor useZeroWidth = true;
 }
+
+export const createEmbedEdgelessBlockInteraction = (
+  flavour: string,
+  config?: {
+    resizeConstraint?: ResizeConstraint;
+  }
+) => {
+  const resizeConstraint = Object.assign(
+    {
+      lockRatio: true,
+    },
+    config?.resizeConstraint ?? {}
+  );
+  const rotateConstraint = {
+    rotatable: false,
+  };
+
+  return GfxViewInteractionExtension(flavour, {
+    resizeConstraint,
+    handleRotate() {
+      return {
+        beforeRotate(context) {
+          context.set(rotateConstraint);
+        },
+      };
+    },
+  });
+};

blocksuite/affine/blocks/embed/src/embed-figma-block/embed-edgeless-figma-block.ts

@@ -1,6 +1,13 @@
+import { EmbedFigmaBlockSchema } from '@blocksuite/affine-model';
+
+import { createEmbedEdgelessBlockInteraction } from '../common/embed-block-element.js';
 import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
 import { EmbedFigmaBlockComponent } from './embed-figma-block.js';
 
 export class EmbedEdgelessBlockComponent extends toEdgelessEmbedBlock(
   EmbedFigmaBlockComponent
 ) {}
+
+export const EmbedFigmaBlockInteraction = createEmbedEdgelessBlockInteraction(
+  EmbedFigmaBlockSchema.model.flavour
+);

blocksuite/affine/blocks/embed/src/embed-figma-block/embed-figma-spec.ts

@@ -7,6 +7,7 @@ import { literal } from 'lit/static-html.js';
 import { createBuiltinToolbarConfigExtension } from '../configs/toolbar';
 import { EmbedFigmaBlockAdapterExtensions } from './adapters/extension';
 import { embedFigmaSlashMenuConfig } from './configs/slash-menu';
+import { EmbedFigmaBlockInteraction } from './embed-edgeless-figma-block';
 import { EmbedFigmaBlockComponent } from './embed-figma-block';
 import { EmbedFigmaBlockOptionConfig } from './embed-figma-service';
 
@@ -35,4 +36,5 @@ export const EmbedFigmaViewExtensions: ExtensionType[] = [
   EmbedFigmaBlockOptionConfig,
   createBuiltinToolbarConfigExtension(flavour, EmbedFigmaBlockComponent),
   SlashMenuConfigExtension(flavour, embedFigmaSlashMenuConfig),
+  EmbedFigmaBlockInteraction,
 ].flat();

blocksuite/affine/blocks/embed/src/embed-github-block/embed-edgeless-github-block.ts

@@ -1,6 +1,13 @@
+import { EmbedGithubBlockSchema } from '@blocksuite/affine-model';
+
+import { createEmbedEdgelessBlockInteraction } from '../common/embed-block-element.js';
 import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
 import { EmbedGithubBlockComponent } from './embed-github-block.js';
 
 export class EmbedEdgelessGithubBlockComponent extends toEdgelessEmbedBlock(
   EmbedGithubBlockComponent
 ) {}
+
+export const EmbedGithubBlockInteraction = createEmbedEdgelessBlockInteraction(
+  EmbedGithubBlockSchema.model.flavour
+);

blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-spec.ts

@@ -7,6 +7,7 @@ import { literal } from 'lit/static-html.js';
 import { createBuiltinToolbarConfigExtension } from '../configs/toolbar';
 import { EmbedGithubBlockAdapterExtensions } from './adapters/extension';
 import { embedGithubSlashMenuConfig } from './configs/slash-menu';
+import { EmbedGithubBlockInteraction } from './embed-edgeless-github-block';
 import { EmbedGithubBlockComponent } from './embed-github-block';
 import {
   EmbedGithubBlockOptionConfig,
@@ -38,6 +39,7 @@ export const EmbedGithubViewExtensions: ExtensionType[] = [
       : literal`affine-embed-github-block`;
   }),
   EmbedGithubBlockOptionConfig,
+  EmbedGithubBlockInteraction,
   createBuiltinToolbarConfigExtension(flavour, EmbedGithubBlockComponent),
   SlashMenuConfigExtension(flavour, embedGithubSlashMenuConfig),
 ].flat();

blocksuite/affine/blocks/embed/src/embed-html-block/embed-edgeless-html-block.ts

@@ -1,6 +1,19 @@
+import { EmbedHtmlBlockSchema } from '@blocksuite/affine-model';
+
+import { createEmbedEdgelessBlockInteraction } from '../common/embed-block-element.js';
 import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
 import { EmbedHtmlBlockComponent } from './embed-html-block.js';
+import { EMBED_HTML_MIN_HEIGHT, EMBED_HTML_MIN_WIDTH } from './styles.js';
 
 export class EmbedEdgelessHtmlBlockComponent extends toEdgelessEmbedBlock(
   EmbedHtmlBlockComponent
 ) {}
+
+export const EmbedEdgelessHtmlBlockInteraction =
+  createEmbedEdgelessBlockInteraction(EmbedHtmlBlockSchema.model.flavour, {
+    resizeConstraint: {
+      minWidth: EMBED_HTML_MIN_WIDTH,
+      minHeight: EMBED_HTML_MIN_HEIGHT,
+      lockRatio: false,
+    },
+  });

blocksuite/affine/blocks/embed/src/embed-html-block/embed-html-spec.ts

@@ -4,6 +4,7 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { EmbedEdgelessHtmlBlockInteraction } from './embed-edgeless-html-block';
 
 const flavour = EmbedHtmlBlockSchema.model.flavour;
 
@@ -23,4 +24,5 @@ export const EmbedHtmlViewExtensions: ExtensionType[] = [
       : literal`affine-embed-html-block`;
   }),
   createBuiltinToolbarConfigExtension(flavour),
+  EmbedEdgelessHtmlBlockInteraction,
 ].flat();

blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-edgeless-iframe-block.ts

@@ -1,6 +1,8 @@
 import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
-import { Bound } from '@blocksuite/global/gfx';
+import { EmbedIframeBlockSchema } from '@blocksuite/affine-model';
+import { Bound, clamp } from '@blocksuite/global/gfx';
 import { toGfxBlockComponent } from '@blocksuite/std';
+import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
@@ -53,3 +55,65 @@ export class EmbedEdgelessIframeBlockComponent extends toGfxBlockComponent(
     `;
   }
 }
+
+export const EmbedIframeInteraction =
+  GfxViewInteractionExtension<EmbedEdgelessIframeBlockComponent>(
+    EmbedIframeBlockSchema.model.flavour,
+    {
+      resizeConstraint: {
+        minWidth: 218,
+        minHeight: 44,
+        maxWidth: 3400,
+        maxHeight: 2200,
+      },
+
+      handleResize: context => {
+        const { model } = context;
+        const initialScale = model.props.scale$.peek();
+
+        return {
+          onResizeStart(context) {
+            context.default(context);
+            model.stash('scale');
+          },
+          onResizeMove(context) {
+            const { newBound, originalBound, lockRatio, constraint } = context;
+            const { minWidth, maxWidth, minHeight, maxHeight } = constraint;
+
+            let scale = initialScale;
+            const originalRealWidth = originalBound.w / scale;
+
+            // update scale if resize is proportional
+            if (lockRatio) {
+              scale = newBound.w / originalRealWidth;
+            }
+
+            let newRealWidth = clamp(newBound.w / scale, minWidth, maxWidth);
+            let newRealHeight = clamp(newBound.h / scale, minHeight, maxHeight);
+
+            newBound.w = newRealWidth * scale;
+            newBound.h = newRealHeight * scale;
+
+            model.props.xywh = newBound.serialize();
+            if (scale !== initialScale) {
+              model.props.scale = scale;
+            }
+          },
+          onResizeEnd(context) {
+            context.default(context);
+            model.pop('scale');
+          },
+        };
+      },
+
+      handleRotate: () => {
+        return {
+          beforeRotate(context) {
+            context.set({
+              rotatable: false,
+            });
+          },
+        };
+      },
+    }
+  );

blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-spec.ts

@@ -7,6 +7,7 @@ import { literal } from 'lit/static-html.js';
 import { EmbedIframeBlockAdapterExtensions } from './adapters';
 import { embedIframeSlashMenuConfig } from './configs/slash-menu/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { EmbedIframeInteraction } from './embed-edgeless-iframe-block';
 
 const flavour = EmbedIframeBlockSchema.model.flavour;
 
@@ -31,4 +32,5 @@ export const EmbedIframeViewExtensions: ExtensionType[] = [
   }),
   createBuiltinToolbarConfigExtension(flavour),
   SlashMenuConfigExtension(flavour, embedIframeSlashMenuConfig),
+  EmbedIframeInteraction,
 ].flat();

blocksuite/affine/blocks/embed/src/embed-loom-block/embed-edgeless-loom-bock.ts

@@ -1,6 +1,13 @@
+import { EmbedLoomBlockSchema } from '@blocksuite/affine-model';
+
+import { createEmbedEdgelessBlockInteraction } from '../common/embed-block-element.js';
 import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
 import { EmbedLoomBlockComponent } from './embed-loom-block.js';
 
 export class EmbedEdgelessLoomBlockComponent extends toEdgelessEmbedBlock(
   EmbedLoomBlockComponent
 ) {}
+
+export const EmbedLoomBlockInteraction = createEmbedEdgelessBlockInteraction(
+  EmbedLoomBlockSchema.model.flavour
+);

blocksuite/affine/blocks/embed/src/embed-loom-block/embed-loom-spec.ts

@@ -7,6 +7,7 @@ import { literal } from 'lit/static-html.js';
 import { createBuiltinToolbarConfigExtension } from '../configs/toolbar';
 import { EmbedLoomBlockAdapterExtensions } from './adapters/extension';
 import { embedLoomSlashMenuConfig } from './configs/slash-menu';
+import { EmbedLoomBlockInteraction } from './embed-edgeless-loom-bock';
 import { EmbedLoomBlockComponent } from './embed-loom-block';
 import {
   EmbedLoomBlockOptionConfig,
@@ -40,4 +41,5 @@ export const EmbedLoomViewExtensions: ExtensionType[] = [
   EmbedLoomBlockOptionConfig,
   createBuiltinToolbarConfigExtension(flavour, EmbedLoomBlockComponent),
   SlashMenuConfigExtension(flavour, embedLoomSlashMenuConfig),
+  EmbedLoomBlockInteraction,
 ].flat();

blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-edgeless-youtube-block.ts

@@ -1,6 +1,13 @@
+import { EmbedYoutubeBlockSchema } from '@blocksuite/affine-model';
+
+import { createEmbedEdgelessBlockInteraction } from '../common/embed-block-element.js';
 import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
 import { EmbedYoutubeBlockComponent } from './embed-youtube-block.js';
 
 export class EmbedEdgelessYoutubeBlockComponent extends toEdgelessEmbedBlock(
   EmbedYoutubeBlockComponent
 ) {}
+
+export const EmbedYoutubeBlockInteraction = createEmbedEdgelessBlockInteraction(
+  EmbedYoutubeBlockSchema.model.flavour
+);

blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-youtube-spec.ts

@@ -7,6 +7,7 @@ import { literal } from 'lit/static-html.js';
 import { createBuiltinToolbarConfigExtension } from '../configs/toolbar';
 import { EmbedYoutubeBlockAdapterExtensions } from './adapters/extension';
 import { embedYoutubeSlashMenuConfig } from './configs/slash-menu';
+import { EmbedYoutubeBlockInteraction } from './embed-edgeless-youtube-block';
 import { EmbedYoutubeBlockComponent } from './embed-youtube-block';
 import {
   EmbedYoutubeBlockOptionConfig,
@@ -40,4 +41,5 @@ export const EmbedYoutubeViewExtensions: ExtensionType[] = [
   EmbedYoutubeBlockOptionConfig,
   createBuiltinToolbarConfigExtension(flavour, EmbedYoutubeBlockComponent),
   SlashMenuConfigExtension('affine:embed-youtube', embedYoutubeSlashMenuConfig),
+  EmbedYoutubeBlockInteraction,
 ].flat();

blocksuite/affine/blocks/embed/src/index.ts

@@ -20,7 +20,10 @@ export const EmbedExtensions: ExtensionType[] = [
 export { createEmbedBlockHtmlAdapterMatcher } from './common/adapters/html';
 export { createEmbedBlockMarkdownAdapterMatcher } from './common/adapters/markdown';
 export { createEmbedBlockPlainTextAdapterMatcher } from './common/adapters/plain-text';
-export { EmbedBlockComponent } from './common/embed-block-element';
+export {
+  createEmbedEdgelessBlockInteraction,
+  EmbedBlockComponent,
+} from './common/embed-block-element';
 export * from './common/embed-note-content-styles';
 export { insertEmbedCard } from './common/insert-embed-card';
 export * from './common/render-linked-doc';

blocksuite/affine/blocks/embed/src/view.ts

@@ -8,26 +8,32 @@ import {
   EdgelessClipboardEmbedFigmaConfig,
   EmbedFigmaViewExtensions,
 } from './embed-figma-block';
+import { EmbedFigmaBlockInteraction } from './embed-figma-block/embed-edgeless-figma-block';
 import {
   EdgelessClipboardEmbedGithubConfig,
   EmbedGithubViewExtensions,
 } from './embed-github-block';
+import { EmbedGithubBlockInteraction } from './embed-github-block/embed-edgeless-github-block';
 import {
   EdgelessClipboardEmbedHtmlConfig,
   EmbedHtmlViewExtensions,
 } from './embed-html-block';
+import { EmbedEdgelessHtmlBlockInteraction } from './embed-html-block/embed-edgeless-html-block';
 import {
   EdgelessClipboardEmbedIframeConfig,
   EmbedIframeViewExtensions,
 } from './embed-iframe-block';
+import { EmbedIframeInteraction } from './embed-iframe-block/embed-edgeless-iframe-block';
 import {
   EdgelessClipboardEmbedLoomConfig,
   EmbedLoomViewExtensions,
 } from './embed-loom-block';
+import { EmbedLoomBlockInteraction } from './embed-loom-block/embed-edgeless-loom-bock';
 import {
   EdgelessClipboardEmbedYoutubeConfig,
   EmbedYoutubeViewExtensions,
 } from './embed-youtube-block';
+import { EmbedYoutubeBlockInteraction } from './embed-youtube-block/embed-edgeless-youtube-block';
 
 export class EmbedViewExtension extends ViewExtensionProvider {
   override name = 'affine-embed-block';
@@ -54,6 +60,12 @@ export class EmbedViewExtension extends ViewExtensionProvider {
         EdgelessClipboardEmbedLoomConfig,
         EdgelessClipboardEmbedYoutubeConfig,
         EdgelessClipboardEmbedIframeConfig,
+        EmbedFigmaBlockInteraction,
+        EmbedGithubBlockInteraction,
+        EmbedEdgelessHtmlBlockInteraction,
+        EmbedLoomBlockInteraction,
+        EmbedYoutubeBlockInteraction,
+        EmbedIframeInteraction,
       ]);
     }
   }