feat(editor) shape gfx extension (#11928)

Closes: BS-3211

blocksuite/affine/all/package.json

@@ -177,7 +177,9 @@
     "./gfx/brush": "./src/gfx/brush/index.ts",
     "./gfx/brush/store": "./src/gfx/brush/store.ts",
     "./gfx/brush/view": "./src/gfx/brush/view.ts",
-    "./gfx/shape": "./src/gfx/shape.ts",
+    "./gfx/shape": "./src/gfx/shape/index.ts",
+    "./gfx/shape/store": "./src/gfx/shape/store.ts",
+    "./gfx/shape/view": "./src/gfx/shape/view.ts",
     "./gfx/note": "./src/gfx/note.ts",
     "./gfx/mindmap": "./src/gfx/mindmap.ts",
     "./gfx/connector": "./src/gfx/connector.ts",

blocksuite/affine/all/src/extensions/migrating.ts

@@ -23,10 +23,6 @@ import {
   mindmapToMarkdownAdapterMatcher,
   mindmapToPlainTextAdapterMatcher,
 } from '@blocksuite/affine-gfx-mindmap';
-import {
-  shapeToMarkdownAdapterMatcher,
-  shapeToPlainTextAdapterMatcher,
-} from '@blocksuite/affine-gfx-shape';
 import {
   textToMarkdownAdapterMatcher,
   textToPlainTextAdapterMatcher,
@@ -42,7 +38,6 @@ import type { ExtensionType } from '@blocksuite/store';
 
 const elementToPlainTextAdapterMatchers = [
   groupToPlainTextAdapterMatcher,
-  shapeToPlainTextAdapterMatcher,
   connectorToPlainTextAdapterMatcher,
   textToPlainTextAdapterMatcher,
   mindmapToPlainTextAdapterMatcher,
@@ -50,7 +45,6 @@ const elementToPlainTextAdapterMatchers = [
 
 const elementToMarkdownAdapterMatchers = [
   groupToMarkdownAdapterMatcher,
-  shapeToMarkdownAdapterMatcher,
   connectorToMarkdownAdapterMatcher,
   textToMarkdownAdapterMatcher,
   mindmapToMarkdownAdapterMatcher,

blocksuite/affine/all/src/extensions/store.ts

@@ -16,6 +16,7 @@ import { ParagraphStoreExtension } from '@blocksuite/affine-block-paragraph/stor
 import { SurfaceRefStoreExtension } from '@blocksuite/affine-block-surface-ref/store';
 import { TableStoreExtension } from '@blocksuite/affine-block-table/store';
 import { BrushStoreExtension } from '@blocksuite/affine-gfx-brush/store';
+import { ShapeStoreExtension } from '@blocksuite/affine-gfx-shape/store';
 import { FootnoteStoreExtension } from '@blocksuite/affine-inline-footnote/store';
 import { LatexStoreExtension as InlineLatexStoreExtension } from '@blocksuite/affine-inline-latex/store';
 import { LinkStoreExtension } from '@blocksuite/affine-inline-link/store';
@@ -51,6 +52,7 @@ export function getInternalStoreExtensions() {
     InlinePresetStoreExtension,
 
     BrushStoreExtension,
+    ShapeStoreExtension,
 
     MigratingStoreExtension,
   ];

blocksuite/affine/all/src/extensions/view.ts

@@ -17,6 +17,7 @@ import { SurfaceRefViewExtension } from '@blocksuite/affine-block-surface-ref/vi
 import { TableViewExtension } from '@blocksuite/affine-block-table/view';
 import { BrushViewExtension } from '@blocksuite/affine-gfx-brush/view';
 import { NoteViewExtension as GfxNoteViewExtension } from '@blocksuite/affine-gfx-note/view';
+import { ShapeViewExtension } from '@blocksuite/affine-gfx-shape/view';
 import { FootnoteViewExtension } from '@blocksuite/affine-inline-footnote/view';
 import { LatexViewExtension as InlineLatexViewExtension } from '@blocksuite/affine-inline-latex/view';
 import { LinkViewExtension } from '@blocksuite/affine-inline-link/view';
@@ -30,12 +31,10 @@ export function getInternalViewExtensions() {
   return [
     GfxNoteViewExtension,
     BrushViewExtension,
-    // shape
+    ShapeViewExtension,
     // mind
     // template
 
-    MigratingViewExtension,
-
     // Block
     AttachmentViewExtension,
     BookmarkViewExtension,
@@ -62,5 +61,7 @@ export function getInternalViewExtensions() {
     InlineLatexViewExtension,
     MentionViewExtension,
     InlinePresetViewExtension,
+
+    MigratingViewExtension,
   ];
 }

blocksuite/affine/all/src/gfx/shape/store.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-shape/store';

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

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-shape/view';

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

@@ -4,7 +4,10 @@ import {
 } from '@blocksuite/affine-ext-loader';
 
 import { effects } from './effects';
+import { FrameHighlightManager } from './frame-highlight-manager';
 import { FrameBlockSpec } from './frame-spec';
+import { FrameTool } from './frame-tool';
+import { PresentTool } from './preset-tool';
 
 export class FrameViewExtension extends ViewExtensionProvider {
   override name = 'affine-frame-block';
@@ -17,5 +20,10 @@ export class FrameViewExtension extends ViewExtensionProvider {
   override setup(context: ViewExtensionContext): void {
     super.setup(context);
     context.register(FrameBlockSpec);
+    if (this.isEdgeless(context.scope)) {
+      context.register(FrameHighlightManager);
+      context.register(FrameTool);
+      context.register(PresentTool);
+    }
   }
 }

blocksuite/affine/blocks/root/src/common-specs/index.ts

@@ -11,11 +11,6 @@ import {
   MindmapElementRendererExtension,
   MindMapView,
 } from '@blocksuite/affine-gfx-mindmap';
-import {
-  HighlighterElementRendererExtension,
-  ShapeElementRendererExtension,
-  ShapeElementView,
-} from '@blocksuite/affine-gfx-shape';
 import {
   TextElementRendererExtension,
   TextElementView,
@@ -56,12 +51,9 @@ const EdgelessElementViews = [
   MindMapView,
   GroupElementView,
   TextElementView,
-  ShapeElementView,
 ];
 
 export const EdgelessElementRendererExtension: ExtensionType[] = [
-  HighlighterElementRendererExtension,
-  ShapeElementRendererExtension,
   TextElementRendererExtension,
   ConnectorElementRendererExtension,
   GroupElementRendererExtension,

blocksuite/affine/blocks/root/src/edgeless/components/toolbar/tools.ts

@@ -1,7 +1,6 @@
 import { frameQuickTool } from '@blocksuite/affine-block-frame';
 import { connectorQuickTool } from '@blocksuite/affine-gfx-connector';
 import { mindMapSeniorTool } from '@blocksuite/affine-gfx-mindmap';
-import { shapeSeniorTool } from '@blocksuite/affine-gfx-shape';
 import { templateSeniorTool } from '@blocksuite/affine-gfx-template';
 import { QuickToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { html } from 'lit';
@@ -33,8 +32,4 @@ export const quickTools = [
   linkQuickTool,
 ];
 
-export const seniorTools = [
+export const seniorTools = [mindMapSeniorTool, templateSeniorTool];
-  shapeSeniorTool,
-  mindMapSeniorTool,
-  templateSeniorTool,
-];

blocksuite/affine/blocks/root/src/edgeless/edgeless-builtin-spec.ts

@@ -1,8 +1,3 @@
-import {
-  FrameHighlightManager,
-  FrameTool,
-  PresentTool,
-} from '@blocksuite/affine-block-frame';
 import { ConnectionOverlay } from '@blocksuite/affine-block-surface';
 import type * as BrushEffect from '@blocksuite/affine-gfx-brush';
 import {
@@ -14,7 +9,7 @@ import {
   MindMapIndicatorOverlay,
 } from '@blocksuite/affine-gfx-mindmap';
 import type * as NoteEffect from '@blocksuite/affine-gfx-note';
-import { ShapeTool } from '@blocksuite/affine-gfx-shape';
+import type * as ShapeEffect from '@blocksuite/affine-gfx-shape';
 import { TemplateTool } from '@blocksuite/affine-gfx-template';
 import { TextTool } from '@blocksuite/affine-gfx-text';
 import { InteractivityManager } from '@blocksuite/std/gfx';
@@ -31,18 +26,18 @@ import { SnapExtension } from './interact-extensions/snap-manager.js';
 import { EditPropsMiddlewareBuilder } from './middlewares/base.js';
 import { SnapOverlay } from './utils/snap-manager.js';
 
-declare type _GLOBAL_ = typeof NoteEffect | typeof BrushEffect;
+declare type _GLOBAL_ =
+  | typeof NoteEffect
+  | typeof BrushEffect
+  | typeof ShapeEffect;
 
 export const EdgelessToolExtension: ExtensionType[] = [
   DefaultTool,
   PanTool,
   TextTool,
-  ShapeTool,
   ConnectorTool,
   TemplateTool,
   EmptyTool,
-  FrameTool,
-  PresentTool,
 ];
 
 export const EdgelessEditExtensions: ExtensionType[] = [
@@ -50,7 +45,6 @@ export const EdgelessEditExtensions: ExtensionType[] = [
   ConnectorFilter,
   SnapExtension,
   MindMapDragExtension,
-  FrameHighlightManager,
   DblClickAddEdgelessText,
 ];
 

blocksuite/affine/blocks/root/src/effects.ts

@@ -1,7 +1,6 @@
 import { effects as gfxConnectorEffects } from '@blocksuite/affine-gfx-connector/effects';
 import { effects as gfxGroupEffects } from '@blocksuite/affine-gfx-group/effects';
 import { effects as gfxMindmapEffects } from '@blocksuite/affine-gfx-mindmap/effects';
-import { effects as gfxShapeEffects } from '@blocksuite/affine-gfx-shape/effects';
 import { effects as gfxTemplateEffects } from '@blocksuite/affine-gfx-template/effects';
 import { effects as gfxCanvasTextEffects } from '@blocksuite/affine-gfx-text/effects';
 import { effects as widgetEdgelessToolbarEffects } from '@blocksuite/affine-widget-edgeless-toolbar/effects';
@@ -77,7 +76,6 @@ function registerRootComponents() {
 
 function registerGfxEffects() {
   gfxCanvasTextEffects();
-  gfxShapeEffects();
   gfxConnectorEffects();
   gfxMindmapEffects();
   gfxGroupEffects();

blocksuite/affine/gfx/shape/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
@@ -34,7 +35,9 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./store": "./src/store.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",

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

@@ -0,0 +1,28 @@
+import { ShapeElementModel } from '@blocksuite/affine-model';
+import { GfxElementModelView } from '@blocksuite/std/gfx';
+
+import { mountShapeTextEditor } from './text/edgeless-shape-text-editor';
+
+export class ShapeElementView extends GfxElementModelView<ShapeElementModel> {
+  static override type: string = 'shape';
+
+  override onCreated(): void {
+    super.onCreated();
+
+    this._initDblClickToEdit();
+  }
+
+  private _initDblClickToEdit(): void {
+    this.on('dblclick', () => {
+      const edgeless = this.std.view.getBlock(this.std.store.root!.id);
+
+      if (
+        edgeless &&
+        !this.model.isLocked() &&
+        this.model instanceof ShapeElementModel
+      ) {
+        mountShapeTextEditor(this.model, edgeless);
+      }
+    });
+  }
+}

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

@@ -2,8 +2,8 @@ export * from './adapter';
 export * from './consts';
 export * from './draggable';
 export * from './element-renderer';
+export * from './element-view';
 export * from './overlay';
 export * from './shape-tool';
 export * from './text';
 export * from './toolbar';
-export * from './view';

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

@@ -0,0 +1,19 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import {
+  shapeToMarkdownAdapterMatcher,
+  shapeToPlainTextAdapterMatcher,
+} from './adapter';
+
+export class ShapeStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-shape-gfx';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register(shapeToMarkdownAdapterMatcher);
+    context.register(shapeToPlainTextAdapterMatcher);
+  }
+}

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

@@ -1,28 +1,31 @@
-import { ShapeElementModel } from '@blocksuite/affine-model';
+import {
-import { GfxElementModelView } from '@blocksuite/std/gfx';
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
 
-import { mountShapeTextEditor } from './text/edgeless-shape-text-editor';
+import { effects } from './effects';
+import {
+  HighlighterElementRendererExtension,
+  ShapeElementRendererExtension,
+} from './element-renderer';
+import { ShapeElementView } from './element-view';
+import { ShapeTool } from './shape-tool';
+import { shapeSeniorTool } from './toolbar';
 
-export class ShapeElementView extends GfxElementModelView<ShapeElementModel> {
+export class ShapeViewExtension extends ViewExtensionProvider {
-  static override type: string = 'shape';
+  override name = 'affine-shape-gfx';
 
-  override onCreated(): void {
+  override effect(): void {
-    super.onCreated();
+    super.effect();
-
+    effects();
-    this._initDblClickToEdit();
   }
 
-  private _initDblClickToEdit(): void {
+  override setup(context: ViewExtensionContext) {
-    this.on('dblclick', () => {
+    super.setup(context);
-      const edgeless = this.std.view.getBlock(this.std.store.root!.id);
+    context.register(HighlighterElementRendererExtension);
-
+    context.register(ShapeElementRendererExtension);
-      if (
+    context.register(ShapeElementView);
-        edgeless &&
+    context.register(ShapeTool);
-        !this.model.isLocked() &&
+    context.register(shapeSeniorTool);
-        this.model instanceof ShapeElementModel
-      ) {
-        mountShapeTextEditor(this.model, edgeless);
-      }
-    });
   }
 }

blocksuite/affine/gfx/shape/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../../blocks/surface" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../text" },
     { "path": "../../model" },
     { "path": "../../rich-text" },

tools/utils/src/workspace.gen.ts

@@ -585,6 +585,7 @@ export const PackageList = [
     workspaceDependencies: [
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/gfx/text',
       'blocksuite/affine/model',
       'blocksuite/affine/rich-text',

yarn.lock

@@ -3251,6 +3251,7 @@ __metadata:
   dependencies:
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-gfx-text": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-rich-text": "workspace:*"