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/attachment/src/attachment-edgeless-block.ts

@@ -1,10 +1,14 @@
 import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
-import { AttachmentBlockStyles } from '@blocksuite/affine-model';
+import {
+  AttachmentBlockSchema,
+  AttachmentBlockStyles,
+} from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import { toGfxBlockComponent } from '@blocksuite/std';
+import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { AttachmentBlockComponent } from './attachment-block.js';
@@ -48,3 +52,21 @@ declare global {
     'affine-edgeless-attachment': AttachmentEdgelessBlockComponent;
   }
 }
+
+export const AttachmentBlockInteraction = GfxViewInteractionExtension(
+  AttachmentBlockSchema.model.flavour,
+  {
+    resizeConstraint: {
+      lockRatio: true,
+    },
+    handleRotate: () => {
+      return {
+        beforeRotate: context => {
+          context.set({
+            rotatable: false,
+          });
+        },
+      };
+    },
+  }
+);

blocksuite/affine/blocks/attachment/src/attachment-spec.ts

@@ -5,6 +5,7 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { AttachmentBlockAdapterExtensions } from './adapters/extension.js';
+import { AttachmentBlockInteraction } from './attachment-edgeless-block.js';
 import { AttachmentDropOption } from './attachment-service.js';
 import { attachmentSlashMenuConfig } from './configs/slash-menu.js';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
@@ -26,6 +27,7 @@ export const AttachmentBlockSpec: ExtensionType[] = [
   AttachmentEmbedConfigExtension(),
   AttachmentEmbedService,
   AttachmentBlockAdapterExtensions,
+  AttachmentBlockInteraction,
   createBuiltinToolbarConfigExtension(flavour),
   SlashMenuConfigExtension(flavour, attachmentSlashMenuConfig),
 ].flat();

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

@@ -7,6 +7,7 @@ import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
 import { BlockViewExtension, FlavourExtension } from '@blocksuite/std';
 import { literal } from 'lit/static-html.js';
 
+import { AttachmentBlockInteraction } from './attachment-edgeless-block.js';
 import { AttachmentDropOption } from './attachment-service.js';
 import { attachmentSlashMenuConfig } from './configs/slash-menu.js';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
@@ -44,6 +45,7 @@ export class AttachmentViewExtension extends ViewExtensionProvider {
     ]);
     if (this.isEdgeless(context.scope)) {
       context.register(EdgelessClipboardAttachmentConfig);
+      context.register(AttachmentBlockInteraction);
     }
   }
 }

blocksuite/affine/blocks/bookmark/src/bookmark-edgeless-block.ts

@@ -1,8 +1,10 @@
+import { BookmarkBlockSchema } from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import { toGfxBlockComponent } from '@blocksuite/std';
+import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 import { BookmarkBlockComponent } from './bookmark-block.js';
@@ -50,6 +52,24 @@ export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
   };
 }
 
+export const BookmarkBlockInteraction = GfxViewInteractionExtension(
+  BookmarkBlockSchema.model.flavour,
+  {
+    resizeConstraint: {
+      lockRatio: true,
+    },
+    handleRotate: () => {
+      return {
+        beforeRotate(context) {
+          context.set({
+            rotatable: false,
+          });
+        },
+      };
+    },
+  }
+);
+
 declare global {
   interface HTMLElementTagNameMap {
     'affine-edgeless-bookmark': BookmarkEdgelessBlockComponent;

blocksuite/affine/blocks/bookmark/src/bookmark-spec.ts

@@ -4,6 +4,7 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { BookmarkBlockAdapterExtensions } from './adapters/extension';
+import { BookmarkBlockInteraction } from './bookmark-edgeless-block';
 import { BookmarkSlashMenuConfigExtension } from './configs/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
 
@@ -16,6 +17,7 @@ export const BookmarkBlockSpec: ExtensionType[] = [
       ? literal`affine-edgeless-bookmark`
       : literal`affine-bookmark`;
   }),
+  BookmarkBlockInteraction,
   BookmarkBlockAdapterExtensions,
   createBuiltinToolbarConfigExtension(flavour),
   BookmarkSlashMenuConfigExtension,

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

@@ -6,6 +6,7 @@ import { BookmarkBlockSchema } from '@blocksuite/affine-model';
 import { BlockViewExtension, FlavourExtension } from '@blocksuite/std';
 import { literal } from 'lit/static-html.js';
 
+import { BookmarkBlockInteraction } from './bookmark-edgeless-block';
 import { BookmarkSlashMenuConfigExtension } from './configs/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
 import { EdgelessClipboardBookmarkConfig } from './edgeless-clipboard-config';
@@ -36,6 +37,7 @@ export class BookmarkViewExtension extends ViewExtensionProvider {
     const isEdgeless = this.isEdgeless(context.scope);
     if (isEdgeless) {
       context.register(EdgelessClipboardBookmarkConfig);
+      context.register(BookmarkBlockInteraction);
     }
   }
 }

blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts

@@ -5,6 +5,7 @@ import {
   EDGELESS_TEXT_BLOCK_MIN_HEIGHT,
   EDGELESS_TEXT_BLOCK_MIN_WIDTH,
   type EdgelessTextBlockModel,
+  EdgelessTextBlockSchema,
   ListBlockModel,
   ParagraphBlockModel,
 } from '@blocksuite/affine-model';
@@ -21,7 +22,10 @@ import {
   GfxBlockComponent,
   TextSelection,
 } from '@blocksuite/std';
-import type { SelectedContext } from '@blocksuite/std/gfx';
+import {
+  GfxViewInteractionExtension,
+  type SelectedContext,
+} from '@blocksuite/std/gfx';
 import { css, html } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
@@ -420,3 +424,69 @@ declare global {
     'affine-edgeless-text': EdgelessTextBlockComponent;
   }
 }
+
+export const EdgelessTextInteraction =
+  GfxViewInteractionExtension<EdgelessTextBlockComponent>(
+    EdgelessTextBlockSchema.model.flavour,
+    {
+      resizeConstraint: {
+        lockRatio: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
+        allowedHandlers: [
+          'top-left',
+          'top-right',
+          'left',
+          'right',
+          'bottom-left',
+          'bottom-right',
+        ],
+        minWidth: EDGELESS_TEXT_BLOCK_MIN_WIDTH,
+      },
+      handleResize: context => {
+        const { model, view } = context;
+        const initialScale = model.props.scale;
+
+        return {
+          onResizeStart(context) {
+            context.default(context);
+            model.stash('scale');
+            model.stash('hasMaxWidth');
+          },
+          onResizeMove(context) {
+            const { originalBound, newBound, constraint, lockRatio } = context;
+
+            if (lockRatio) {
+              const originalRealWidth = originalBound.w / initialScale;
+              const newScale = newBound.w / originalRealWidth;
+
+              model.props.scale = newScale;
+              model.props.xywh = newBound.serialize();
+            } else {
+              if (!view.checkWidthOverflow(newBound.w)) {
+                return;
+              }
+
+              const newRealWidth = clamp(
+                newBound.w / initialScale,
+                constraint.minWidth,
+                constraint.maxWidth
+              );
+
+              const curBound = Bound.deserialize(model.xywh);
+
+              model.props.xywh = Bound.serialize({
+                ...newBound,
+                w: newRealWidth * initialScale,
+                h: curBound.h,
+              });
+              model.props.hasMaxWidth = true;
+            }
+          },
+          onResizeEnd(context) {
+            context.default(context);
+            model.pop('scale');
+            model.pop('hasMaxWidth');
+          },
+        };
+      },
+    }
+  );

blocksuite/affine/blocks/edgeless-text/src/edgeless-text-spec.ts

@@ -2,6 +2,9 @@ import { BlockViewExtension } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
+import { EdgelessTextInteraction } from './edgeless-text-block';
+
 export const EdgelessTextBlockSpec: ExtensionType[] = [
   BlockViewExtension('affine:edgeless-text', literal`affine-edgeless-text`),
+  EdgelessTextInteraction,
 ];

blocksuite/affine/blocks/edgeless-text/src/view.ts

@@ -6,6 +6,7 @@ import { BlockViewExtension } from '@blocksuite/std';
 import { literal } from 'lit/static-html.js';
 
 import { EdgelessClipboardEdgelessTextConfig } from './edgeless-clipboard-config';
+import { EdgelessTextInteraction } from './edgeless-text-block';
 import { edgelessTextToolbarExtension } from './edgeless-toolbar';
 import { effects } from './effects';
 
@@ -30,6 +31,7 @@ export class EdgelessTextViewExtension extends ViewExtensionProvider {
       ]);
       context.register(edgelessTextToolbarExtension);
       context.register(EdgelessClipboardEdgelessTextConfig);
+      context.register(EdgelessTextInteraction);
     }
   }
 }

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/embed-edgeless-linked-doc-block.ts

@@ -1,8 +1,12 @@
-import { toEdgelessEmbedBlock } from '@blocksuite/affine-block-embed';
+import {
+  createEmbedEdgelessBlockInteraction,
+  toEdgelessEmbedBlock,
+} from '@blocksuite/affine-block-embed';
 import {
   EdgelessCRUDIdentifier,
   reassociateConnectorsCommand,
 } from '@blocksuite/affine-block-surface';
+import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
@@ -61,3 +65,7 @@ export class EmbedEdgelessLinkedDocBlockComponent extends toEdgelessEmbedBlock(
     }
   };
 }
+
+export const EmbedLinkedDocInteraction = createEmbedEdgelessBlockInteraction(
+  EmbedLinkedDocBlockSchema.model.flavour
+);

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/embed-linked-doc-spec.ts

@@ -6,6 +6,7 @@ import { literal } from 'lit/static-html.js';
 import { EmbedLinkedDocBlockAdapterExtensions } from './adapters/extension';
 import { LinkedDocSlashMenuConfigExtension } from './configs/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { EmbedLinkedDocInteraction } from './embed-edgeless-linked-doc-block';
 
 const flavour = EmbedLinkedDocBlockSchema.model.flavour;
 
@@ -27,5 +28,6 @@ export const EmbedLinkedDocViewExtensions: ExtensionType[] = [
       : literal`affine-embed-linked-doc-block`;
   }),
   createBuiltinToolbarConfigExtension(flavour),
+  EmbedLinkedDocInteraction,
   LinkedDocSlashMenuConfigExtension,
 ].flat();

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/index.ts

@@ -2,5 +2,6 @@ export * from './adapters';
 export * from './commands';
 export { LinkedDocSlashMenuConfigIdentifier } from './configs/slash-menu';
 export * from './edgeless-clipboard-config';
+export * from './embed-edgeless-linked-doc-block';
 export * from './embed-linked-doc-block';
 export * from './embed-linked-doc-spec';

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts

@@ -3,7 +3,12 @@ import {
   EdgelessCRUDIdentifier,
   reassociateConnectorsCommand,
 } from '@blocksuite/affine-block-surface';
-import type { AliasInfo } from '@blocksuite/affine-model';
+import {
+  type AliasInfo,
+  EmbedSyncedDocBlockSchema,
+  SYNCED_MIN_HEIGHT,
+  SYNCED_MIN_WIDTH,
+} from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
@@ -12,8 +17,9 @@ import {
   ThemeExtensionIdentifier,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
-import { Bound } from '@blocksuite/global/gfx';
+import { Bound, clamp } from '@blocksuite/global/gfx';
 import { type BlockComponent, BlockStdScope } from '@blocksuite/std';
+import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
 import { html, nothing } from 'lit';
 import { query, queryAsync } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
@@ -199,3 +205,60 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
 
   override accessor useCaptionEditor = true;
 }
+
+export const EmbedSyncedDocInteraction =
+  GfxViewInteractionExtension<EmbedEdgelessSyncedDocBlockComponent>(
+    EmbedSyncedDocBlockSchema.model.flavour,
+    {
+      resizeConstraint: {
+        minWidth: SYNCED_MIN_WIDTH,
+        minHeight: SYNCED_MIN_HEIGHT,
+      },
+
+      handleRotate: () => {
+        return {
+          beforeRotate(context) {
+            context.set({
+              rotatable: false,
+            });
+          },
+        };
+      },
+
+      handleResize: ({ model }) => {
+        const initialScale = model.props.scale ?? 1;
+
+        return {
+          onResizeStart: context => {
+            context.default(context);
+            model.stash('scale');
+          },
+          onResizeMove: context => {
+            const { lockRatio, originalBound, constraint, newBound } = context;
+
+            let scale = initialScale;
+            const realWidth = originalBound.w / initialScale;
+
+            if (lockRatio) {
+              scale = newBound.w / realWidth;
+            }
+
+            const newWidth = newBound.w / scale;
+
+            newBound.w =
+              clamp(newWidth, constraint.minWidth, constraint.maxWidth) * scale;
+            newBound.h =
+              clamp(newBound.h, constraint.minHeight, constraint.maxHeight) *
+              scale;
+
+            model.props.scale = scale;
+            model.xywh = newBound.serialize();
+          },
+          onResizeEnd: context => {
+            context.default(context);
+            model.pop('scale');
+          },
+        };
+      },
+    }
+  );

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-synced-doc-spec.ts

@@ -5,6 +5,7 @@ import { literal } from 'lit/static-html.js';
 
 import { EmbedSyncedDocBlockAdapterExtensions } from './adapters/extension';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { EmbedSyncedDocInteraction } from './embed-edgeless-synced-doc-block';
 import { HeightInitializationExtension } from './init-height-extension';
 
 const flavour = EmbedSyncedDocBlockSchema.model.flavour;
@@ -29,4 +30,5 @@ export const EmbedSyncedDocViewExtensions: ExtensionType[] = [
   }),
   createBuiltinToolbarConfigExtension(flavour),
   HeightInitializationExtension,
+  EmbedSyncedDocInteraction,
 ].flat();

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/index.ts

@@ -2,6 +2,7 @@ export * from './adapters';
 export * from './commands';
 export * from './configs';
 export * from './edgeless-clipboard-config';
+export * from './embed-edgeless-synced-doc-block';
 export * from './embed-synced-doc-block';
 export * from './embed-synced-doc-spec';
 export { SYNCED_MIN_HEIGHT, SYNCED_MIN_WIDTH } from '@blocksuite/affine-model';

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

@@ -6,10 +6,12 @@ import {
 import { effects } from './effects';
 import {
   EdgelessClipboardEmbedLinkedDocConfig,
+  EmbedLinkedDocInteraction,
   EmbedLinkedDocViewExtensions,
 } from './embed-linked-doc-block';
 import {
   EdgelessClipboardEmbedSyncedDocConfig,
+  EmbedSyncedDocInteraction,
   EmbedSyncedDocViewExtensions,
 } from './embed-synced-doc-block';
 
@@ -30,6 +32,8 @@ export class EmbedDocViewExtension extends ViewExtensionProvider {
       context.register([
         EdgelessClipboardEmbedLinkedDocConfig,
         EdgelessClipboardEmbedSyncedDocConfig,
+        EmbedLinkedDocInteraction,
+        EmbedSyncedDocInteraction,
       ]);
     }
   }

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,
       ]);
     }
   }

blocksuite/affine/blocks/frame/src/frame-block.ts

@@ -1,13 +1,28 @@
-import { DefaultTheme, type FrameBlockModel } from '@blocksuite/affine-model';
+import { OverlayIdentifier } from '@blocksuite/affine-block-surface';
+import {
+  DefaultTheme,
+  type FrameBlockModel,
+  FrameBlockSchema,
+} from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { Bound } from '@blocksuite/global/gfx';
 import { GfxBlockComponent } from '@blocksuite/std';
-import type { BoxSelectionContext, SelectedContext } from '@blocksuite/std/gfx';
+import {
+  type BoxSelectionContext,
+  getTopElements,
+  GfxViewInteractionExtension,
+  type SelectedContext,
+} from '@blocksuite/std/gfx';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { html } from 'lit';
 import { state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import {
+  EdgelessFrameManagerIdentifier,
+  type FrameOverlay,
+} from './frame-manager';
+
 export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
   override connectedCallback() {
     super.connectedCallback();
@@ -115,3 +130,64 @@ declare global {
     'affine-frame': FrameBlockComponent;
   }
 }
+
+export const FrameBlockInteraction =
+  GfxViewInteractionExtension<FrameBlockComponent>(
+    FrameBlockSchema.model.flavour,
+    {
+      handleResize: context => {
+        const { model, std } = context;
+
+        return {
+          onResizeStart(context): void {
+            context.default(context);
+            model.stash('childElementIds');
+          },
+
+          onResizeMove(context): void {
+            const { newBound } = context;
+            const frameManager = std.getOptional(
+              EdgelessFrameManagerIdentifier
+            );
+            const overlay = std.getOptional(
+              OverlayIdentifier('frame')
+            ) as FrameOverlay;
+
+            model.xywh = newBound.serialize();
+
+            if (!frameManager) {
+              return;
+            }
+
+            const oldChildren = frameManager.getChildElementsInFrame(model);
+
+            const newChildren = getTopElements(
+              frameManager.getElementsInFrameBound(model)
+            ).concat(
+              oldChildren.filter(oldChild => {
+                return model.intersectsBound(oldChild.elementBound);
+              })
+            );
+
+            frameManager.removeAllChildrenFromFrame(model);
+            frameManager.addElementsToFrame(model, newChildren);
+
+            overlay?.highlight(model, true, false);
+          },
+          onResizeEnd(context): void {
+            context.default(context);
+            model.pop('childElementIds');
+          },
+        };
+      },
+      handleRotate: () => {
+        return {
+          beforeRotate(context): void {
+            context.set({
+              rotatable: false,
+            });
+          },
+        };
+      },
+    }
+  );

blocksuite/affine/blocks/frame/src/frame-spec.ts

@@ -3,6 +3,7 @@ import { BlockViewExtension } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
+import { FrameBlockInteraction } from './frame-block';
 import { EdgelessFrameManager, FrameOverlay } from './frame-manager';
 
 const flavour = FrameBlockSchema.model.flavour;
@@ -11,4 +12,5 @@ export const FrameBlockSpec: ExtensionType[] = [
   BlockViewExtension(flavour, literal`affine-frame`),
   FrameOverlay,
   EdgelessFrameManager,
+  FrameBlockInteraction,
 ];

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

@@ -6,6 +6,7 @@ import {
 import { EdgelessClipboardFrameConfig } from './edgeless-clipboard-config';
 import { frameQuickTool } from './edgeless-toolbar';
 import { effects } from './effects';
+import { FrameBlockInteraction } from './frame-block';
 import { FrameHighlightManager } from './frame-highlight-manager';
 import { FrameBlockSpec } from './frame-spec';
 import { FrameTool } from './frame-tool';
@@ -32,6 +33,7 @@ export class FrameViewExtension extends ViewExtensionProvider {
       context.register(frameToolbarExtension);
       context.register(edgelessNavigatorBgWidget);
       context.register(EdgelessClipboardFrameConfig);
+      context.register(FrameBlockInteraction);
     }
   }
 }

blocksuite/affine/blocks/image/src/image-edgeless-block.ts

@@ -2,12 +2,16 @@ import type { BlockCaptionEditor } from '@blocksuite/affine-components/caption';
 import { getLoadingIconWith } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import { ResourceController } from '@blocksuite/affine-components/resource';
-import type { ImageBlockModel } from '@blocksuite/affine-model';
+import {
+  type ImageBlockModel,
+  ImageBlockSchema,
+} from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { humanFileSize } from '@blocksuite/affine-shared/utils';
 import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit';
 import { GfxBlockComponent } from '@blocksuite/std';
+import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
 import { computed } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { query } from 'lit/decorators.js';
@@ -172,6 +176,15 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
   accessor resizableImg!: HTMLDivElement;
 }
 
+export const ImageEdgelessBlockInteraction = GfxViewInteractionExtension(
+  ImageBlockSchema.model.flavour,
+  {
+    resizeConstraint: {
+      lockRatio: true,
+    },
+  }
+);
+
 declare global {
   interface HTMLElementTagNameMap {
     'affine-edgeless-image': ImageEdgelessBlockComponent;

blocksuite/affine/blocks/image/src/image-spec.ts

@@ -6,6 +6,7 @@ import { literal } from 'lit/static-html.js';
 
 import { imageSlashMenuConfig } from './configs/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { ImageEdgelessBlockInteraction } from './image-edgeless-block';
 import { ImageDropOption } from './image-service';
 
 const flavour = ImageBlockSchema.model.flavour;
@@ -22,6 +23,7 @@ export const ImageBlockSpec: ExtensionType[] = [
     return literal`affine-image`;
   }),
   ImageDropOption,
+  ImageEdgelessBlockInteraction,
   createBuiltinToolbarConfigExtension(flavour),
   SlashMenuConfigExtension(flavour, imageSlashMenuConfig),
 ].flat();

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

@@ -5,6 +5,7 @@ import {
 
 import { EdgelessClipboardImageConfig } from './edgeless-clipboard-config';
 import { effects } from './effects';
+import { ImageEdgelessBlockInteraction } from './image-edgeless-block';
 import { ImageBlockSpec } from './image-spec';
 
 export class ImageViewExtension extends ViewExtensionProvider {
@@ -20,6 +21,7 @@ export class ImageViewExtension extends ViewExtensionProvider {
     context.register(ImageBlockSpec);
     if (this.isEdgeless(context.scope)) {
       context.register(EdgelessClipboardImageConfig);
+      context.register(ImageEdgelessBlockInteraction);
     }
   }
 }

blocksuite/affine/blocks/note/src/note-edgeless-block.ts

@@ -1,6 +1,6 @@
 import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import type { DocTitle } from '@blocksuite/affine-fragment-doc-title';
-import { NoteDisplayMode } from '@blocksuite/affine-model';
+import { NoteBlockSchema, NoteDisplayMode } from '@blocksuite/affine-model';
 import { focusTextModel } from '@blocksuite/affine-rich-text';
 import { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/affine-shared/consts';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';
@@ -10,7 +10,11 @@ import {
 } from '@blocksuite/affine-shared/utils';
 import { Bound } from '@blocksuite/global/gfx';
 import { toGfxBlockComponent } from '@blocksuite/std';
-import type { BoxSelectionContext, SelectedContext } from '@blocksuite/std/gfx';
+import {
+  type BoxSelectionContext,
+  GfxViewInteractionExtension,
+  type SelectedContext,
+} from '@blocksuite/std/gfx';
 import { html, nothing, type PropertyValues } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -432,3 +436,62 @@ declare global {
     [AFFINE_EDGELESS_NOTE]: EdgelessNoteBlockComponent;
   }
 }
+
+export const EdgelessNoteInteraction =
+  GfxViewInteractionExtension<EdgelessNoteBlockComponent>(
+    NoteBlockSchema.model.flavour,
+    {
+      resizeConstraint: {
+        minWidth: 170 + 24 * 2,
+        minHeight: 92,
+      },
+      handleRotate: () => {
+        return {
+          beforeRotate(context) {
+            context.set({
+              rotatable: false,
+            });
+          },
+        };
+      },
+      handleResize: ({ model }) => {
+        const initialScale: number = model.props.edgeless.scale ?? 1;
+        return {
+          onResizeStart(context): void {
+            context.default(context);
+            model.stash('edgeless');
+          },
+
+          onResizeMove(context): void {
+            const { originalBound, newBound, lockRatio, constraint } = context;
+            const { minWidth, minHeight } = constraint;
+
+            let scale = initialScale;
+            let edgelessProp = { ...model.props.edgeless };
+            const originalRealWidth = originalBound.w / scale;
+
+            if (lockRatio) {
+              scale = newBound.w / originalRealWidth;
+              edgelessProp.scale = scale;
+            }
+
+            newBound.w = clamp(newBound.w, minWidth, Number.MAX_SAFE_INTEGER);
+            newBound.h = clamp(newBound.h, minHeight, Number.MAX_SAFE_INTEGER);
+
+            if (newBound.h > minHeight * scale) {
+              edgelessProp.collapse = true;
+              edgelessProp.collapsedHeight = newBound.h / scale;
+            }
+
+            model.props.edgeless = edgelessProp;
+            model.props.xywh = newBound.serialize();
+          },
+
+          onResizeEnd(context): void {
+            context.default(context);
+            model.pop('edgeless');
+          },
+        };
+      },
+    }
+  );

blocksuite/affine/blocks/note/src/note-spec.ts

@@ -9,6 +9,7 @@ import {
 } from './adapters/index';
 import { NoteSlashMenuConfigExtension } from './configs/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { EdgelessNoteInteraction } from './note-edgeless-block';
 import { NoteKeymapExtension } from './note-keymap.js';
 
 const flavour = NoteBlockSchema.model.flavour;
@@ -28,4 +29,5 @@ export const EdgelessNoteBlockSpec: ExtensionType[] = [
   NoteSlashMenuConfigExtension,
   createBuiltinToolbarConfigExtension(flavour),
   NoteKeymapExtension,
+  EdgelessNoteInteraction,
 ].flat();

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

@@ -10,6 +10,7 @@ import { NoteSlashMenuConfigExtension } from './configs/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
 import { EdgelessClipboardNoteConfig } from './edgeless-clipboard-config';
 import { effects } from './effects';
+import { EdgelessNoteInteraction } from './note-edgeless-block';
 import { NoteKeymapExtension } from './note-keymap';
 
 const flavour = NoteBlockSchema.model.flavour;
@@ -38,6 +39,7 @@ export class NoteViewExtension extends ViewExtensionProvider {
       );
       context.register(createBuiltinToolbarConfigExtension(flavour));
       context.register(EdgelessClipboardNoteConfig);
+      context.register(EdgelessNoteInteraction);
     } else {
       context.register(BlockViewExtension(flavour, literal`affine-note`));
     }

blocksuite/affine/blocks/root/src/edgeless/components/auto-complete/edgeless-auto-complete.ts

@@ -691,6 +691,12 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) {
       })
     );
 
+    _disposables.add(
+      gfx.selection.slots.updated.subscribe(() => {
+        this.requestUpdate();
+      })
+    );
+
     _disposables.add(() => this.removeOverlay());
 
     _disposables.add(
@@ -716,6 +722,15 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) {
     });
   }
 
+  private _canAutoComplete() {
+    const selection = this.gfx.selection;
+    return (
+      selection.selectedElements.length === 1 &&
+      (selection.selectedElements[0] instanceof ShapeElementModel ||
+        isNoteBlock(selection.selectedElements[0]))
+    );
+  }
+
   removeOverlay() {
     this._timer && clearTimeout(this._timer);
     const surface = getSurfaceComponent(this.std);
@@ -727,7 +742,10 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) {
     const isShape = this.current instanceof ShapeElementModel;
     const isMindMap = this.current.group instanceof MindmapElementModel;
 
-    if (this._isMoving || (this._isHover && !isShape)) {
+    if (
+      this._isMoving ||
+      (this._isHover && !isShape && this._canAutoComplete())
+    ) {
       this.removeOverlay();
       return nothing;
     }

blocksuite/affine/blocks/root/src/edgeless/components/resize/resize-handles.ts

@@ -1,5 +1,6 @@
-import type { IVec } from '@blocksuite/global/gfx';
+import type { ResizeHandle } from '@blocksuite/std/gfx';
 import { html, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
 
 export enum HandleDirection {
   Bottom = 'bottom',
@@ -12,62 +13,51 @@ export enum HandleDirection {
   TopRight = 'top-right',
 }
 
-function ResizeHandle(
-  handleDirection: HandleDirection,
-  onPointerDown?: (e: PointerEvent, direction: HandleDirection) => void,
-  updateCursor?: (
-    dragging: boolean,
-    options?: {
-      type: 'resize' | 'rotate';
-      target?: HTMLElement;
-      point?: IVec;
-    }
-  ) => void,
-  hideEdgeHandle?: boolean
+function ResizeHandleRenderer(
+  handle: ResizeHandle,
+  rotatable: boolean,
+  onPointerDown?: (e: PointerEvent, direction: ResizeHandle) => void,
+  updateCursor?: (options?: {
+    type: 'resize' | 'rotate';
+    handle: ResizeHandle;
+  }) => void
 ) {
   const handlerPointerDown = (e: PointerEvent) => {
     e.stopPropagation();
-    onPointerDown && onPointerDown(e, handleDirection);
+    onPointerDown && onPointerDown(e, handle);
   };
 
   const pointerEnter = (type: 'resize' | 'rotate') => (e: PointerEvent) => {
     e.stopPropagation();
     if (e.buttons === 1 || !updateCursor) return;
 
-    const { clientX, clientY } = e;
-    const target = e.target as HTMLElement;
-    const point: IVec = [clientX, clientY];
-
-    updateCursor(true, { type, point, target });
+    updateCursor({ type, handle });
   };
 
   const pointerLeave = (e: PointerEvent) => {
     e.stopPropagation();
     if (e.buttons === 1 || !updateCursor) return;
 
-    updateCursor(false);
+    updateCursor();
   };
 
   const rotationTpl =
-    handleDirection === HandleDirection.Top ||
-    handleDirection === HandleDirection.Bottom ||
-    handleDirection === HandleDirection.Left ||
-    handleDirection === HandleDirection.Right
-      ? nothing
-      : html`<div
+    handle.length > 6 && rotatable
+      ? html`<div
           class="rotate"
           @pointerover=${pointerEnter('rotate')}
           @pointerout=${pointerLeave}
-        ></div>`;
+        ></div>`
+      : nothing;
 
   return html`<div
     class="handle"
-    aria-label=${handleDirection}
+    aria-label=${handle}
     @pointerdown=${handlerPointerDown}
   >
     ${rotationTpl}
     <div
-      class="resize${hideEdgeHandle && ' transparent-handle'}"
+      class="resize transparent-handle"
       @pointerover=${pointerEnter('resize')}
       @pointerout=${pointerLeave}
     ></div>
@@ -85,135 +75,21 @@ function ResizeHandle(
  */
 export type ResizeMode = 'edge' | 'all' | 'none' | 'corner' | 'edgeAndCorner';
 
-export function ResizeHandles(
-  resizeMode: ResizeMode,
-  onPointerDown: (e: PointerEvent, direction: HandleDirection) => void,
-  updateCursor?: (
-    dragging: boolean,
-    options?: {
-      type: 'resize' | 'rotate';
-      target?: HTMLElement;
-      point?: IVec;
-    }
-  ) => void
+export function RenderResizeHandles(
+  resizeHandles: ResizeHandle[],
+  rotatable: boolean,
+  onPointerDown: (e: PointerEvent, direction: ResizeHandle) => void,
+  updateCursor?: (options?: {
+    type: 'resize' | 'rotate';
+    handle: ResizeHandle;
+  }) => void
 ) {
-  const getCornerHandles = () => {
-    const handleTopLeft = ResizeHandle(
-      HandleDirection.TopLeft,
-      onPointerDown,
-      updateCursor
-    );
-    const handleTopRight = ResizeHandle(
-      HandleDirection.TopRight,
-      onPointerDown,
-      updateCursor
-    );
-    const handleBottomLeft = ResizeHandle(
-      HandleDirection.BottomLeft,
-      onPointerDown,
-      updateCursor
-    );
-    const handleBottomRight = ResizeHandle(
-      HandleDirection.BottomRight,
-      onPointerDown,
-      updateCursor
-    );
-    return {
-      handleTopLeft,
-      handleTopRight,
-      handleBottomLeft,
-      handleBottomRight,
-    };
-  };
-  const getEdgeHandles = (hideEdgeHandle?: boolean) => {
-    const handleLeft = ResizeHandle(
-      HandleDirection.Left,
-      onPointerDown,
-      updateCursor,
-      hideEdgeHandle
-    );
-    const handleRight = ResizeHandle(
-      HandleDirection.Right,
-      onPointerDown,
-      updateCursor,
-      hideEdgeHandle
-    );
-    return { handleLeft, handleRight };
-  };
-  const getEdgeVerticalHandles = (hideEdgeHandle?: boolean) => {
-    const handleTop = ResizeHandle(
-      HandleDirection.Top,
-      onPointerDown,
-      updateCursor,
-      hideEdgeHandle
-    );
-    const handleBottom = ResizeHandle(
-      HandleDirection.Bottom,
-      onPointerDown,
-      updateCursor,
-      hideEdgeHandle
-    );
-    return { handleTop, handleBottom };
-  };
-  switch (resizeMode) {
-    case 'corner': {
-      const {
-        handleTopLeft,
-        handleTopRight,
-        handleBottomLeft,
-        handleBottomRight,
-      } = getCornerHandles();
-
-      // prettier-ignore
-      return html`
-        ${handleTopLeft}
-        ${handleTopRight}
-        ${handleBottomLeft}
-        ${handleBottomRight}
-      `;
-    }
-    case 'edge': {
-      const { handleLeft, handleRight } = getEdgeHandles();
-      return html`${handleLeft} ${handleRight}`;
-    }
-    case 'all': {
-      const {
-        handleTopLeft,
-        handleTopRight,
-        handleBottomLeft,
-        handleBottomRight,
-      } = getCornerHandles();
-      const { handleLeft, handleRight } = getEdgeHandles(true);
-      const { handleTop, handleBottom } = getEdgeVerticalHandles(true);
-
-      // prettier-ignore
-      return html`
-        ${handleTopLeft}
-        ${handleTop}
-        ${handleTopRight}
-        ${handleRight}
-        ${handleBottomRight}
-        ${handleBottom}
-        ${handleBottomLeft}
-        ${handleLeft}
-      `;
-    }
-    case 'edgeAndCorner': {
-      const {
-        handleTopLeft,
-        handleTopRight,
-        handleBottomLeft,
-        handleBottomRight,
-      } = getCornerHandles();
-      const { handleLeft, handleRight } = getEdgeHandles(true);
-
-      return html`
-        ${handleTopLeft} ${handleTopRight} ${handleRight} ${handleBottomRight}
-        ${handleBottomLeft} ${handleLeft}
-      `;
-    }
-    case 'none': {
-      return nothing;
-    }
-  }
+  return html`
+    ${repeat(
+      resizeHandles,
+      handle => handle,
+      handle =>
+        ResizeHandleRenderer(handle, rotatable, onPointerDown, updateCursor)
+    )}
+  `;
 }

blocksuite/affine/blocks/root/src/edgeless/components/resize/resize-manager.ts

@@ -1,705 +0,0 @@
-import { NOTE_MIN_WIDTH } from '@blocksuite/affine-model';
-import {
-  Bound,
-  getQuadBoundWithRotation,
-  type IPoint,
-  type IVec,
-  type PointLocation,
-  rotatePoints,
-} from '@blocksuite/global/gfx';
-
-import type { SelectableProps } from '../../utils/query.js';
-import { HandleDirection, type ResizeMode } from './resize-handles.js';
-
-// 15deg
-const SHIFT_LOCKING_ANGLE = Math.PI / 12;
-
-type DragStartHandler = () => void;
-type DragEndHandler = () => void;
-
-type ResizeMoveHandler = (
-  bounds: Map<
-    string,
-    {
-      bound: Bound;
-      path?: PointLocation[];
-      matrix?: DOMMatrix;
-    }
-  >,
-  direction: HandleDirection
-) => void;
-
-type RotateMoveHandler = (point: IPoint, rotate: number) => void;
-
-export class HandleResizeManager {
-  private _aspectRatio = 1;
-
-  private _bounds = new Map<
-    string,
-    {
-      bound: Bound;
-      rotate: number;
-    }
-  >();
-
-  /**
-   * Current rect of selected elements, it may change during resizing or moving
-   */
-  private _currentRect = new DOMRect();
-
-  private _dragDirection: HandleDirection = HandleDirection.Left;
-
-  private _dragging = false;
-
-  private _dragPos: {
-    start: { x: number; y: number };
-    end: { x: number; y: number };
-  } = {
-    start: { x: 0, y: 0 },
-    end: { x: 0, y: 0 },
-  };
-
-  private _locked = false;
-
-  private readonly _onDragEnd: DragEndHandler;
-
-  private readonly _onDragStart: DragStartHandler;
-
-  private readonly _onResizeMove: ResizeMoveHandler;
-
-  private readonly _onRotateMove: RotateMoveHandler;
-
-  private _origin: { x: number; y: number } = { x: 0, y: 0 };
-
-  /**
-   * Record inital rect of selected elements
-   */
-  private _originalRect = new DOMRect();
-
-  private _proportion = false;
-
-  private _proportional = false;
-
-  private _resizeMode: ResizeMode = 'none';
-
-  private _rotate = 0;
-
-  private _rotation = false;
-
-  private _shiftKey = false;
-
-  private _target: HTMLElement | null = null;
-
-  private _zoom = 1;
-
-  onPointerDown = (
-    e: PointerEvent,
-    direction: HandleDirection,
-    proportional = false
-  ) => {
-    // Prevent selection action from being triggered
-    e.stopPropagation();
-
-    this._locked = false;
-    this._target = e.target as HTMLElement;
-    this._dragDirection = direction;
-    this._dragPos.start = { x: e.x, y: e.y };
-    this._dragPos.end = { x: e.x, y: e.y };
-    this._rotation = this._target.classList.contains('rotate');
-    this._proportional = proportional;
-
-    if (this._rotation) {
-      const rect = this._target
-        .closest('.affine-edgeless-selected-rect')
-        ?.getBoundingClientRect();
-      if (!rect) {
-        return;
-      }
-      const { left, top, right, bottom } = rect;
-      const x = (left + right) / 2;
-      const y = (top + bottom) / 2;
-      // center of `selected-rect` in viewport
-      this._origin = { x, y };
-    }
-
-    this._dragging = true;
-    this._onDragStart();
-
-    const _onPointerMove = ({ x, y, shiftKey }: PointerEvent) => {
-      if (this._resizeMode === 'none') return;
-
-      this._shiftKey = shiftKey;
-      this._dragPos.end = { x, y };
-
-      const proportional = this._proportional || this._shiftKey;
-
-      if (this._rotation) {
-        this._onRotate(proportional);
-        return;
-      }
-
-      this._onResize(proportional);
-    };
-
-    const _onPointerUp = (_: PointerEvent) => {
-      this._dragging = false;
-      this._onDragEnd();
-
-      const { x, y, width, height } = this._currentRect;
-      this._originalRect = new DOMRect(x, y, width, height);
-
-      this._locked = true;
-      this._shiftKey = false;
-      this._rotation = false;
-      this._dragPos = {
-        start: { x: 0, y: 0 },
-        end: { x: 0, y: 0 },
-      };
-
-      document.removeEventListener('pointermove', _onPointerMove);
-      document.removeEventListener('pointerup', _onPointerUp);
-    };
-
-    document.addEventListener('pointermove', _onPointerMove);
-    document.addEventListener('pointerup', _onPointerUp);
-  };
-
-  get bounds() {
-    return this._bounds;
-  }
-
-  get currentRect() {
-    return this._currentRect;
-  }
-
-  get dragDirection() {
-    return this._dragDirection;
-  }
-
-  get dragging() {
-    return this._dragging;
-  }
-
-  get originalRect() {
-    return this._originalRect;
-  }
-
-  get rotation() {
-    return this._rotation;
-  }
-
-  constructor(
-    onDragStart: DragStartHandler,
-    onResizeMove: ResizeMoveHandler,
-    onRotateMove: RotateMoveHandler,
-    onDragEnd: DragEndHandler
-  ) {
-    this._onDragStart = onDragStart;
-    this._onResizeMove = onResizeMove;
-    this._onRotateMove = onRotateMove;
-    this._onDragEnd = onDragEnd;
-  }
-
-  private _onResize(proportion: boolean) {
-    const {
-      _aspectRatio,
-      _dragDirection,
-      _dragPos,
-      _rotate,
-      _resizeMode,
-      _zoom,
-      _originalRect,
-      _currentRect,
-    } = this;
-    proportion ||= this._proportion;
-
-    const isAll = _resizeMode === 'all';
-    const isCorner = _resizeMode === 'corner';
-    const isEdgeAndCorner = _resizeMode === 'edgeAndCorner';
-
-    const {
-      start: { x: startX, y: startY },
-      end: { x: endX, y: endY },
-    } = _dragPos;
-
-    const { left: minX, top: minY, right: maxX, bottom: maxY } = _originalRect;
-    const original = {
-      w: maxX - minX,
-      h: maxY - minY,
-      cx: (minX + maxX) / 2,
-      cy: (minY + maxY) / 2,
-    };
-    const rect = { ...original };
-    const scale = { x: 1, y: 1 };
-    const flip = { x: 1, y: 1 };
-    const direction = { x: 1, y: 1 };
-    const fixedPoint = new DOMPoint(0, 0);
-    const draggingPoint = new DOMPoint(0, 0);
-
-    const deltaX = (endX - startX) / _zoom;
-    const deltaY = (endY - startY) / _zoom;
-
-    const m0 = new DOMMatrix()
-      .translateSelf(original.cx, original.cy)
-      .rotateSelf(_rotate)
-      .translateSelf(-original.cx, -original.cy);
-
-    if (isCorner || isAll || isEdgeAndCorner) {
-      switch (_dragDirection) {
-        case HandleDirection.TopLeft: {
-          direction.x = -1;
-          direction.y = -1;
-          fixedPoint.x = maxX;
-          fixedPoint.y = maxY;
-          draggingPoint.x = minX;
-          draggingPoint.y = minY;
-          break;
-        }
-        case HandleDirection.TopRight: {
-          direction.x = 1;
-          direction.y = -1;
-          fixedPoint.x = minX;
-          fixedPoint.y = maxY;
-          draggingPoint.x = maxX;
-          draggingPoint.y = minY;
-          break;
-        }
-        case HandleDirection.BottomRight: {
-          direction.x = 1;
-          direction.y = 1;
-          fixedPoint.x = minX;
-          fixedPoint.y = minY;
-          draggingPoint.x = maxX;
-          draggingPoint.y = maxY;
-          break;
-        }
-        case HandleDirection.BottomLeft: {
-          direction.x = -1;
-          direction.y = 1;
-          fixedPoint.x = maxX;
-          fixedPoint.y = minY;
-          draggingPoint.x = minX;
-          draggingPoint.y = maxY;
-          break;
-        }
-        case HandleDirection.Left: {
-          direction.x = -1;
-          direction.y = 1;
-          fixedPoint.x = maxX;
-          fixedPoint.y = original.cy;
-          draggingPoint.x = minX;
-          draggingPoint.y = original.cy;
-          break;
-        }
-        case HandleDirection.Right: {
-          direction.x = 1;
-          direction.y = 1;
-          fixedPoint.x = minX;
-          fixedPoint.y = original.cy;
-          draggingPoint.x = maxX;
-          draggingPoint.y = original.cy;
-          break;
-        }
-        case HandleDirection.Top: {
-          const cx = (minX + maxX) / 2;
-          direction.x = 1;
-          direction.y = -1;
-          fixedPoint.x = cx;
-          fixedPoint.y = maxY;
-          draggingPoint.x = cx;
-          draggingPoint.y = minY;
-          break;
-        }
-        case HandleDirection.Bottom: {
-          const cx = (minX + maxX) / 2;
-          direction.x = 1;
-          direction.y = 1;
-          fixedPoint.x = cx;
-          fixedPoint.y = minY;
-          draggingPoint.x = cx;
-          draggingPoint.y = maxY;
-          break;
-        }
-      }
-
-      // force adjustment by aspect ratio
-      proportion ||= this._bounds.size > 1;
-
-      const fp = fixedPoint.matrixTransform(m0);
-      let dp = draggingPoint.matrixTransform(m0);
-
-      dp.x += deltaX;
-      dp.y += deltaY;
-
-      if (
-        _dragDirection === HandleDirection.Left ||
-        _dragDirection === HandleDirection.Right ||
-        _dragDirection === HandleDirection.Top ||
-        _dragDirection === HandleDirection.Bottom
-      ) {
-        const dpo = draggingPoint.matrixTransform(m0);
-        const coorPoint: IVec = [0, 0];
-        const [[x1, y1]] = rotatePoints([[dpo.x, dpo.y]], coorPoint, -_rotate);
-        const [[x2, y2]] = rotatePoints([[dp.x, dp.y]], coorPoint, -_rotate);
-        const point = { x: 0, y: 0 };
-        if (
-          _dragDirection === HandleDirection.Left ||
-          _dragDirection === HandleDirection.Right
-        ) {
-          point.x = x2;
-          point.y = y1;
-        } else {
-          point.x = x1;
-          point.y = y2;
-        }
-
-        const [[x3, y3]] = rotatePoints(
-          [[point.x, point.y]],
-          coorPoint,
-          _rotate
-        );
-
-        dp.x = x3;
-        dp.y = y3;
-      }
-
-      const cx = (fp.x + dp.x) / 2;
-      const cy = (fp.y + dp.y) / 2;
-
-      const m1 = new DOMMatrix()
-        .translateSelf(cx, cy)
-        .rotateSelf(-_rotate)
-        .translateSelf(-cx, -cy);
-
-      const f = fp.matrixTransform(m1);
-      const d = dp.matrixTransform(m1);
-
-      switch (_dragDirection) {
-        case HandleDirection.TopLeft: {
-          rect.w = f.x - d.x;
-          rect.h = f.y - d.y;
-          break;
-        }
-        case HandleDirection.TopRight: {
-          rect.w = d.x - f.x;
-          rect.h = f.y - d.y;
-          break;
-        }
-        case HandleDirection.BottomRight: {
-          rect.w = d.x - f.x;
-          rect.h = d.y - f.y;
-          break;
-        }
-        case HandleDirection.BottomLeft: {
-          rect.w = f.x - d.x;
-          rect.h = d.y - f.y;
-          break;
-        }
-        case HandleDirection.Left: {
-          rect.w = f.x - d.x;
-          break;
-        }
-        case HandleDirection.Right: {
-          rect.w = d.x - f.x;
-          break;
-        }
-        case HandleDirection.Top: {
-          rect.h = f.y - d.y;
-          break;
-        }
-        case HandleDirection.Bottom: {
-          rect.h = d.y - f.y;
-          break;
-        }
-      }
-
-      rect.cx = (d.x + f.x) / 2;
-      rect.cy = (d.y + f.y) / 2;
-      scale.x = rect.w / original.w;
-      scale.y = rect.h / original.h;
-      flip.x = scale.x < 0 ? -1 : 1;
-      flip.y = scale.y < 0 ? -1 : 1;
-
-      const isDraggingCorner =
-        _dragDirection === HandleDirection.TopLeft ||
-        _dragDirection === HandleDirection.TopRight ||
-        _dragDirection === HandleDirection.BottomRight ||
-        _dragDirection === HandleDirection.BottomLeft;
-
-      // lock aspect ratio
-      if (proportion && isDraggingCorner) {
-        const newAspectRatio = Math.abs(rect.w / rect.h);
-        if (_aspectRatio < newAspectRatio) {
-          scale.y = Math.abs(scale.x) * flip.y;
-          rect.h = scale.y * original.h;
-        } else {
-          scale.x = Math.abs(scale.y) * flip.x;
-          rect.w = scale.x * original.w;
-        }
-        draggingPoint.x = fixedPoint.x + rect.w * direction.x;
-        draggingPoint.y = fixedPoint.y + rect.h * direction.y;
-
-        dp = draggingPoint.matrixTransform(m0);
-
-        rect.cx = (fp.x + dp.x) / 2;
-        rect.cy = (fp.y + dp.y) / 2;
-      }
-    } else {
-      // handle notes
-      switch (_dragDirection) {
-        case HandleDirection.Left: {
-          direction.x = -1;
-          fixedPoint.x = maxX;
-          draggingPoint.x = minX + deltaX;
-          rect.w = fixedPoint.x - draggingPoint.x;
-          break;
-        }
-        case HandleDirection.Right: {
-          direction.x = 1;
-          fixedPoint.x = minX;
-          draggingPoint.x = maxX + deltaX;
-          rect.w = draggingPoint.x - fixedPoint.x;
-          break;
-        }
-      }
-
-      scale.x = rect.w / original.w;
-      flip.x = scale.x < 0 ? -1 : 1;
-
-      if (Math.abs(rect.w) < NOTE_MIN_WIDTH) {
-        rect.w = NOTE_MIN_WIDTH * flip.x;
-        scale.x = rect.w / original.w;
-        draggingPoint.x = fixedPoint.x + rect.w * direction.x;
-      }
-
-      rect.cx = (draggingPoint.x + fixedPoint.x) / 2;
-    }
-
-    const width = Math.abs(rect.w);
-    const height = Math.abs(rect.h);
-    const x = rect.cx - width / 2;
-    const y = rect.cy - height / 2;
-
-    _currentRect.x = x;
-    _currentRect.y = y;
-    _currentRect.width = width;
-    _currentRect.height = height;
-
-    const newBounds = new Map<
-      string,
-      {
-        bound: Bound;
-        path?: PointLocation[];
-        matrix?: DOMMatrix;
-      }
-    >();
-
-    let process: (value: SelectableProps, key: string) => void;
-
-    if (isCorner || isAll || isEdgeAndCorner) {
-      if (this._bounds.size === 1) {
-        process = (_, id) => {
-          newBounds.set(id, {
-            bound: new Bound(x, y, width, height),
-          });
-        };
-      } else {
-        const fp = fixedPoint.matrixTransform(m0);
-        const m2 = new DOMMatrix()
-          .translateSelf(fp.x, fp.y)
-          .rotateSelf(_rotate)
-          .translateSelf(-fp.x, -fp.y)
-          .scaleSelf(scale.x, scale.y, 1, fp.x, fp.y, 0)
-          .translateSelf(fp.x, fp.y)
-          .rotateSelf(-_rotate)
-          .translateSelf(-fp.x, -fp.y);
-
-        // TODO: on same rotate
-        process = ({ bound: { x, y, w, h }, path }, id) => {
-          const cx = x + w / 2;
-          const cy = y + h / 2;
-          const center = new DOMPoint(cx, cy).matrixTransform(m2);
-          const newWidth = Math.abs(w * scale.x);
-          const newHeight = Math.abs(h * scale.y);
-
-          newBounds.set(id, {
-            bound: new Bound(
-              center.x - newWidth / 2,
-              center.y - newHeight / 2,
-              newWidth,
-              newHeight
-            ),
-            matrix: m2,
-            path,
-          });
-        };
-      }
-    } else {
-      // include notes, <---->
-      const m2 = new DOMMatrix().scaleSelf(
-        scale.x,
-        scale.y,
-        1,
-        fixedPoint.x,
-        fixedPoint.y,
-        0
-      );
-      process = ({ bound: { x, y, w, h }, rotate = 0, path }, id) => {
-        const cx = x + w / 2;
-        const cy = y + h / 2;
-
-        const center = new DOMPoint(cx, cy).matrixTransform(m2);
-
-        let newWidth: number;
-        let newHeight: number;
-
-        // TODO: determine if it is a note
-        if (rotate) {
-          const { width } = getQuadBoundWithRotation({ x, y, w, h, rotate });
-          const hrw = width / 2;
-
-          center.y = cy;
-
-          if (_currentRect.width <= width) {
-            newWidth = w * (_currentRect.width / width);
-            newHeight = newWidth / (w / h);
-            center.x = _currentRect.left + _currentRect.width / 2;
-          } else {
-            const p = (cx - hrw - _originalRect.left) / _originalRect.width;
-            const lx = _currentRect.left + p * _currentRect.width + hrw;
-            center.x = Math.max(
-              _currentRect.left + hrw,
-              Math.min(lx, _currentRect.left + _currentRect.width - hrw)
-            );
-            newWidth = w;
-            newHeight = h;
-          }
-        } else {
-          newWidth = Math.abs(w * scale.x);
-          newHeight = Math.abs(h * scale.y);
-        }
-
-        newBounds.set(id, {
-          bound: new Bound(
-            center.x - newWidth / 2,
-            center.y - newHeight / 2,
-            newWidth,
-            newHeight
-          ),
-          matrix: m2,
-          path,
-        });
-      };
-    }
-
-    this._bounds.forEach(process);
-    this._onResizeMove(newBounds, this._dragDirection);
-  }
-
-  private _onRotate(shiftKey = false) {
-    const {
-      _originalRect: { left: minX, top: minY, right: maxX, bottom: maxY },
-      _dragPos: {
-        start: { x: startX, y: startY },
-        end: { x: endX, y: endY },
-      },
-      _origin: { x: centerX, y: centerY },
-      _rotate,
-    } = this;
-
-    const startRad = Math.atan2(startY - centerY, startX - centerX);
-    const endRad = Math.atan2(endY - centerY, endX - centerX);
-    let deltaRad = endRad - startRad;
-
-    // snap angle
-    // 15deg * n = 0, 15, 30, 45, ... 360
-    if (shiftKey) {
-      const prevRad = (_rotate * Math.PI) / 180;
-      let angle = prevRad + deltaRad;
-      angle += SHIFT_LOCKING_ANGLE / 2;
-      angle -= angle % SHIFT_LOCKING_ANGLE;
-      deltaRad = angle - prevRad;
-    }
-
-    const delta = (deltaRad * 180) / Math.PI;
-
-    let x = endX;
-    let y = endY;
-    if (shiftKey) {
-      const point = new DOMPoint(startX, startY).matrixTransform(
-        new DOMMatrix()
-          .translateSelf(centerX, centerY)
-          .rotateSelf(delta)
-          .translateSelf(-centerX, -centerY)
-      );
-      x = point.x;
-      y = point.y;
-    }
-
-    this._onRotateMove(
-      // center of element in suface
-      { x: (minX + maxX) / 2, y: (minY + maxY) / 2 },
-      delta
-    );
-
-    this._dragPos.start = { x, y };
-    this._rotate += delta;
-  }
-
-  onPressShiftKey(pressed: boolean) {
-    if (!this._target) return;
-    if (this._locked) return;
-
-    if (this._shiftKey === pressed) return;
-    this._shiftKey = pressed;
-
-    const proportional = this._proportional || this._shiftKey;
-
-    if (this._rotation) {
-      this._onRotate(proportional);
-      return;
-    }
-
-    this._onResize(proportional);
-  }
-
-  updateBounds(bounds: Map<string, SelectableProps>) {
-    this._bounds = bounds;
-  }
-
-  updateRectPosition(delta: { x: number; y: number }) {
-    this._currentRect.x += delta.x;
-    this._currentRect.y += delta.y;
-    this._originalRect.x = this._currentRect.x;
-    this._originalRect.y = this._currentRect.y;
-
-    return this._originalRect;
-  }
-
-  updateState(
-    resizeMode: ResizeMode,
-    rotate: number,
-    zoom: number,
-    position?: { x: number; y: number },
-    originalRect?: DOMRect,
-    proportion = false
-  ) {
-    this._resizeMode = resizeMode;
-    this._rotate = rotate;
-    this._zoom = zoom;
-    this._proportion = proportion;
-
-    if (position) {
-      this._currentRect.x = position.x;
-      this._currentRect.y = position.y;
-      this._originalRect.x = this._currentRect.x;
-      this._originalRect.y = this._currentRect.y;
-    }
-
-    if (originalRect) {
-      this._originalRect = originalRect;
-      this._aspectRatio = originalRect.width / originalRect.height;
-      this._currentRect = DOMRect.fromRect(originalRect);
-    }
-  }
-}

blocksuite/affine/blocks/root/src/edgeless/components/utils.ts

@@ -1,128 +1,65 @@
-import type { IVec } from '@blocksuite/global/gfx';
-import { normalizeDegAngle, Vec } from '@blocksuite/global/gfx';
-import type { CursorType, StandardCursor } from '@blocksuite/std/gfx';
+import type {
+  CursorType,
+  ResizeHandle,
+  StandardCursor,
+} from '@blocksuite/std/gfx';
+
+const rotateCursorMap: {
+  [key in ResizeHandle]: number;
+} = {
+  'top-right': 0,
+  'bottom-right': 90,
+  'bottom-left': 180,
+  'top-left': 270,
+
+  // not used
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+};
 
 export function generateCursorUrl(
   angle = 0,
+  handle: ResizeHandle,
   fallback: StandardCursor = 'default'
 ): CursorType {
-  return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(${angle} 16 16)'%3E%3Cpath fill='white' d='M13.7,18.5h3.9l0-1.5c0-1.4-1.2-2.6-2.6-2.6h-1.5v3.9l-5.8-5.8l5.8-5.8v3.9h2.3c3.1,0,5.6,2.5,5.6,5.6v2.3h3.9l-5.8,5.8L13.7,18.5z'/%3E%3Cpath d='M20.4,19.4v-3.2c0-2.6-2.1-4.7-4.7-4.7h-3.2l0,0V9L9,12.6l3.6,3.6v-2.6l0,0H15c1.9,0,3.5,1.6,3.5,3.5v2.4l0,0h-2.6l3.6,3.6l3.6-3.6L20.4,19.4L20.4,19.4z'/%3E%3C/g%3E%3C/svg%3E") 16 16, ${fallback}`;
+  angle = ((angle % 360) + 360) % 360;
+  return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(${rotateCursorMap[handle] + angle} 16 16)'%3E%3Cpath fill='white' d='M13.7,18.5h3.9l0-1.5c0-1.4-1.2-2.6-2.6-2.6h-1.5v3.9l-5.8-5.8l5.8-5.8v3.9h2.3c3.1,0,5.6,2.5,5.6,5.6v2.3h3.9l-5.8,5.8L13.7,18.5z'/%3E%3Cpath d='M20.4,19.4v-3.2c0-2.6-2.1-4.7-4.7-4.7h-3.2l0,0V9L9,12.6l3.6,3.6v-2.6l0,0H15c1.9,0,3.5,1.6,3.5,3.5v2.4l0,0h-2.6l3.6,3.6l3.6-3.6L20.4,19.4L20.4,19.4z'/%3E%3C/g%3E%3C/svg%3E") 16 16, ${fallback}`;
 }
 
-const RESIZE_CURSORS: CursorType[] = [
-  'ew-resize',
-  'nwse-resize',
-  'ns-resize',
-  'nesw-resize',
-];
-export function rotateResizeCursor(angle: number): StandardCursor {
-  const a = Math.round(angle / (Math.PI / 4));
-  const cursor = RESIZE_CURSORS[a % RESIZE_CURSORS.length];
-  return cursor as StandardCursor;
-}
-
-export function calcAngle(target: HTMLElement, point: IVec, offset = 0) {
-  const rect = target
-    .closest('.affine-edgeless-selected-rect')
-    ?.getBoundingClientRect();
-
-  if (!rect) {
-    console.error('rect not found when calc angle');
-    return 0;
-  }
-  const { left, top, right, bottom } = rect;
-  const center = Vec.med([left, top], [right, bottom]);
-  return normalizeDegAngle(
-    ((Vec.angle(center, point) + offset) * 180) / Math.PI
-  );
-}
-
-export function calcAngleWithRotation(
-  target: HTMLElement,
-  point: IVec,
-  rect: DOMRect,
-  rotate: number
-) {
-  const handle = target.parentElement;
-  const ariaLabel = handle?.getAttribute('aria-label');
-  const { left, top, right, bottom, width, height } = rect;
-  const size = Math.min(width, height);
-  const sx = size / width;
-  const sy = size / height;
-  const center = Vec.med([left, top], [right, bottom]);
-  const draggingPoint = [0, 0];
-
-  switch (ariaLabel) {
-    case 'top-left': {
-      draggingPoint[0] = left;
-      draggingPoint[1] = top;
-      break;
-    }
-    case 'top-right': {
-      draggingPoint[0] = right;
-      draggingPoint[1] = top;
-      break;
-    }
-    case 'bottom-right': {
-      draggingPoint[0] = right;
-      draggingPoint[1] = bottom;
-      break;
-    }
-    case 'bottom-left': {
-      draggingPoint[0] = left;
-      draggingPoint[1] = bottom;
-      break;
-    }
-  }
-
-  const dp = new DOMMatrix()
-    .translateSelf(center[0], center[1])
-    .rotateSelf(rotate)
-    .translateSelf(-center[0], -center[1])
-    .transformPoint(new DOMPoint(...draggingPoint));
-
-  const m = new DOMMatrix()
-    .translateSelf(dp.x, dp.y)
-    .rotateSelf(rotate)
-    .translateSelf(-dp.x, -dp.y)
-    .scaleSelf(sx, sy, 1, dp.x, dp.y, 0)
-    .translateSelf(dp.x, dp.y)
-    .rotateSelf(-rotate)
-    .translateSelf(-dp.x, -dp.y);
-
-  const c = new DOMPoint(...center).matrixTransform(m);
-
-  return normalizeDegAngle((Vec.angle([c.x, c.y], point) * 180) / Math.PI);
-}
-
-export function calcAngleEdgeWithRotation(target: HTMLElement, rotate: number) {
-  let angleWithEdge = 0;
-  const handle = target.parentElement;
-  const ariaLabel = handle?.getAttribute('aria-label');
-  switch (ariaLabel) {
-    case 'top': {
-      angleWithEdge = 270;
-      break;
-    }
-    case 'bottom': {
-      angleWithEdge = 90;
-      break;
-    }
-    case 'left': {
-      angleWithEdge = 180;
-      break;
-    }
-    case 'right': {
-      angleWithEdge = 0;
-      break;
-    }
-  }
-
-  return angleWithEdge + rotate;
-}
-
-export function getResizeLabel(target: HTMLElement) {
-  const handle = target.parentElement;
-  const ariaLabel = handle?.getAttribute('aria-label');
-  return ariaLabel;
+const handleToRotateMap: {
+  [key in ResizeHandle]: number;
+} = {
+  'top-left': 45,
+  'top-right': 135,
+  'bottom-right': 45,
+  'bottom-left': 135,
+  left: 0,
+  right: 0,
+  top: 90,
+  bottom: 90,
+};
+
+const rotateToHandleMap: {
+  [key: number]: StandardCursor;
+} = {
+  0: 'ew-resize',
+  45: 'nwse-resize',
+  90: 'ns-resize',
+  135: 'nesw-resize',
+};
+
+export function getRotatedResizeCursor(option: {
+  handle: ResizeHandle;
+  angle: number;
+}) {
+  const angle =
+    (Math.round(
+      (handleToRotateMap[option.handle] + ((option.angle + 360) % 360)) / 45
+    ) %
+      4) *
+    45;
+
+  return rotateToHandleMap[angle] || 'default';
 }

blocksuite/affine/blocks/root/src/edgeless/utils/consts.ts

@@ -9,13 +9,3 @@ export const ATTACHED_DISTANCE = 20;
 export const SurfaceColor = '#6046FE';
 export const NoteColor = '#1E96EB';
 export const BlendColor = '#7D91FF';
-
-export const AI_CHAT_BLOCK_MIN_WIDTH = 260;
-export const AI_CHAT_BLOCK_MIN_HEIGHT = 160;
-export const AI_CHAT_BLOCK_MAX_WIDTH = 320;
-export const AI_CHAT_BLOCK_MAX_HEIGHT = 300;
-
-export const EMBED_IFRAME_BLOCK_MIN_WIDTH = 218;
-export const EMBED_IFRAME_BLOCK_MIN_HEIGHT = 44;
-export const EMBED_IFRAME_BLOCK_MAX_WIDTH = 3400;
-export const EMBED_IFRAME_BLOCK_MAX_HEIGHT = 2200;

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);
     }
   }
 }

blocksuite/affine/model/src/elements/connector/connector.ts

@@ -339,28 +339,15 @@ export class ConnectorElementModel extends GfxPrimitiveElementModel<ConnectorEle
     }
   }
 
-  resize(bounds: Bound, originalPath: PointLocation[], matrix: DOMMatrix) {
+  resize(originalPath: PointLocation[], matrix: DOMMatrix) {
     this.updatingPath = false;
 
     const path = this.resizePath(originalPath, matrix);
-
-    // the property assignment order matters
-    this.xywh = bounds.serialize();
-    this.path = path.map(p => p.clone().setVec(Vec.sub(p, bounds.tl)));
-
     const props: {
-      labelXYWH?: XYWH;
       source?: Connection;
       target?: Connection;
     } = {};
 
-    // Updates Connector's Label position.
-    if (this.hasLabel()) {
-      const [cx, cy] = this.getPointByOffsetDistance(this.labelOffset.distance);
-      const [, , w, h] = this.labelXYWH!;
-      props.labelXYWH = [cx - w / 2, cy - h / 2, w, h];
-    }
-
     if (!this.source.id) {
       props.source = {
         ...this.source,