feat(editor): brush gfx package (#11131)

blocksuite/affine/all/package.json

@@ -33,6 +33,7 @@
     "@blocksuite/affine-fragment-doc-title": "workspace:*",
     "@blocksuite/affine-fragment-frame-panel": "workspace:*",
     "@blocksuite/affine-fragment-outline": "workspace:*",
+    "@blocksuite/affine-gfx-brush": "workspace:*",
     "@blocksuite/affine-gfx-connector": "workspace:*",
     "@blocksuite/affine-gfx-group": "workspace:*",
     "@blocksuite/affine-gfx-mindmap": "workspace:*",
@@ -121,6 +122,7 @@
     "./fragments/frame-panel": "./src/fragments/frame-panel.ts",
     "./fragments/outline": "./src/fragments/outline.ts",
     "./gfx/text": "./src/gfx/text.ts",
+    "./gfx/brush": "./src/gfx/brush.ts",
     "./gfx/shape": "./src/gfx/shape.ts",
     "./gfx/note": "./src/gfx/note.ts",
     "./gfx/mindmap": "./src/gfx/mindmap.ts",

blocksuite/affine/all/src/gfx/brush.ts

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

blocksuite/affine/all/tsconfig.json

@@ -30,6 +30,7 @@
     { "path": "../fragments/fragment-doc-title" },
     { "path": "../fragments/fragment-frame-panel" },
     { "path": "../fragments/fragment-outline" },
+    { "path": "../gfx/brush" },
     { "path": "../gfx/connector" },
     { "path": "../gfx/group" },
     { "path": "../gfx/mindmap" },

blocksuite/affine/blocks/block-root/package.json

@@ -27,6 +27,7 @@
     "@blocksuite/affine-block-table": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-fragment-doc-title": "workspace:*",
+    "@blocksuite/affine-gfx-brush": "workspace:*",
     "@blocksuite/affine-gfx-connector": "workspace:*",
     "@blocksuite/affine-gfx-group": "workspace:*",
     "@blocksuite/affine-gfx-mindmap": "workspace:*",

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

@@ -1,5 +1,7 @@
 import { frameQuickTool } from '@blocksuite/affine-block-frame';
+import { penSeniorTool } from '@blocksuite/affine-gfx-brush';
 import { connectorQuickTool } from '@blocksuite/affine-gfx-connector';
+import { mindMapSeniorTool } from '@blocksuite/affine-gfx-mindmap';
 import { noteSeniorTool } from '@blocksuite/affine-gfx-note';
 import { shapeSeniorTool } from '@blocksuite/affine-gfx-shape';
 import {
@@ -28,34 +30,6 @@ const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
   };
 });
 
-const penSeniorTool = SeniorToolExtension('pen', ({ block }) => {
-  return {
-    name: 'Pen',
-    content: html`<div class="brush-and-eraser">
-      <edgeless-brush-tool-button
-        .edgeless=${block}
-      ></edgeless-brush-tool-button>
-
-      <edgeless-eraser-tool-button
-        .edgeless=${block}
-      ></edgeless-eraser-tool-button>
-    </div> `,
-  };
-});
-
-const mindMapSeniorTool = SeniorToolExtension(
-  'mindMap',
-  ({ block, toolbarContainer }) => {
-    return {
-      name: 'Mind Map',
-      content: html`<edgeless-mindmap-tool-button
-        .edgeless=${block}
-        .toolbarContainer=${toolbarContainer}
-      ></edgeless-mindmap-tool-button>`,
-    };
-  }
-);
-
 const templateSeniorTool = SeniorToolExtension('template', ({ block }) => {
   return {
     name: 'Template',

blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts

@@ -1,5 +1,6 @@
 import { edgelessTextToolbarExtension } from '@blocksuite/affine-block-edgeless-text';
 import { frameToolbarExtension } from '@blocksuite/affine-block-frame';
+import { brushToolbarExtension } from '@blocksuite/affine-gfx-brush';
 import { connectorToolbarExtension } from '@blocksuite/affine-gfx-connector';
 import { groupToolbarExtension } from '@blocksuite/affine-gfx-group';
 import { mindmapToolbarExtension } from '@blocksuite/affine-gfx-mindmap';
@@ -9,7 +10,6 @@ import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 
-import { builtinBrushToolbarConfig } from './brush';
 import { builtinLockedToolbarConfig, builtinMiscToolbarConfig } from './misc';
 
 export const EdgelessElementToolbarExtension: ExtensionType[] = [
@@ -17,10 +17,7 @@ export const EdgelessElementToolbarExtension: ExtensionType[] = [
 
   groupToolbarExtension,
 
-  ToolbarModuleExtension({
-    id: BlockFlavourIdentifier('affine:surface:brush'),
-    config: builtinBrushToolbarConfig,
-  }),
+  brushToolbarExtension,
 
   connectorToolbarExtension,
 

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

@@ -4,6 +4,7 @@ import {
   PresentTool,
 } from '@blocksuite/affine-block-frame';
 import { ConnectionOverlay } from '@blocksuite/affine-block-surface';
+import { BrushTool, EraserTool } from '@blocksuite/affine-gfx-brush';
 import {
   ConnectorFilter,
   ConnectorTool,
@@ -24,10 +25,8 @@ import type { ExtensionType } from '@blocksuite/store';
 import { EdgelessElementToolbarExtension } from './configs/toolbar';
 import { EdgelessRootBlockSpec } from './edgeless-root-spec.js';
 import { SnapExtension } from './element-transform/snap-manager.js';
-import { BrushTool } from './gfx-tool/brush-tool.js';
 import { DefaultTool } from './gfx-tool/default-tool.js';
 import { EmptyTool } from './gfx-tool/empty-tool.js';
-import { EraserTool } from './gfx-tool/eraser-tool.js';
 import { LassoTool } from './gfx-tool/lasso-tool.js';
 import { PanTool } from './gfx-tool/pan-tool.js';
 import { TemplateTool } from './gfx-tool/template-tool.js';

blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/index.ts

@@ -1,7 +1,5 @@
-export { BrushTool } from './brush-tool.js';
 export { DefaultTool } from './default-tool.js';
 export { EmptyTool } from './empty-tool.js';
-export { EraserTool } from './eraser-tool.js';
 export { LassoTool, type LassoToolOption } from './lasso-tool.js';
 export { PanTool, type PanToolOption } from './pan-tool.js';
 export { TemplateTool } from './template-tool.js';

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

@@ -1,3 +1,4 @@
+import { effects as gfxBrushEffects } from '@blocksuite/affine-gfx-brush/effects';
 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';
@@ -20,12 +21,9 @@ import {
   EDGELESS_SELECTED_RECT_WIDGET,
   EdgelessSelectedRectWidget,
 } from './edgeless/components/rects/edgeless-selected-rect.js';
-import { EdgelessBrushMenu } from './edgeless/components/toolbar/brush/brush-menu.js';
-import { EdgelessBrushToolButton } from './edgeless/components/toolbar/brush/brush-tool-button.js';
 import { EdgelessSlideMenu } from './edgeless/components/toolbar/common/slide-menu.js';
 import { ToolbarArrowUpIcon } from './edgeless/components/toolbar/common/toolbar-arrow-up-icon.js';
 import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
-import { EdgelessEraserToolButton } from './edgeless/components/toolbar/eraser/eraser-tool-button.js';
 import { EdgelessLassoToolButton } from './edgeless/components/toolbar/lasso/lasso-tool-button.js';
 import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
 import { OverlayScrollbar } from './edgeless/components/toolbar/template/overlay-scrollbar.js';
@@ -101,6 +99,7 @@ function registerGfxEffects() {
   gfxConnectorEffects();
   gfxMindmapEffects();
   gfxGroupEffects();
+  gfxBrushEffects();
 }
 
 function registerWidgets() {
@@ -123,21 +122,15 @@ function registerWidgets() {
 
 function registerEdgelessToolbarComponents() {
   // Tool buttons
-  customElements.define('edgeless-brush-tool-button', EdgelessBrushToolButton);
   customElements.define(
     'edgeless-default-tool-button',
     EdgelessDefaultToolButton
   );
-  customElements.define(
-    'edgeless-eraser-tool-button',
-    EdgelessEraserToolButton
-  );
   customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
   customElements.define('edgeless-lasso-tool-button', EdgelessLassoToolButton);
   customElements.define('edgeless-template-button', EdgelessTemplateButton);
 
   // Menus
-  customElements.define('edgeless-brush-menu', EdgelessBrushMenu);
   customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
 
   // Toolbar components
@@ -196,12 +189,9 @@ declare global {
     'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget;
     'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
     'edgeless-selected-rect': EdgelessSelectedRectWidget;
-    'edgeless-brush-menu': EdgelessBrushMenu;
-    'edgeless-brush-tool-button': EdgelessBrushToolButton;
     'edgeless-slide-menu': EdgelessSlideMenu;
     'toolbar-arrow-up-icon': ToolbarArrowUpIcon;
     'edgeless-default-tool-button': EdgelessDefaultToolButton;
-    'edgeless-eraser-tool-button': EdgelessEraserToolButton;
     'edgeless-lasso-tool-button': EdgelessLassoToolButton;
     'edgeless-link-tool-button': EdgelessLinkToolButton;
     'overlay-scrollbar': OverlayScrollbar;

blocksuite/affine/blocks/block-root/tsconfig.json

@@ -24,6 +24,7 @@
     { "path": "../block-table" },
     { "path": "../../components" },
     { "path": "../../fragments/fragment-doc-title" },
+    { "path": "../../gfx/brush" },
     { "path": "../../gfx/connector" },
     { "path": "../../gfx/group" },
     { "path": "../../gfx/mindmap" },

blocksuite/affine/gfx/brush/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@blocksuite/affine-gfx-brush",
+  "description": "Gfx brush for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.6",
+    "@blocksuite/store": "workspace:*",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
+    "minimatch": "^10.0.1",
+    "rxjs": "^7.8.1",
+    "yjs": "^13.6.21",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.20.0"
+}

blocksuite/affine/gfx/brush/src/effects.ts

@@ -0,0 +1,20 @@
+import { EdgelessBrushMenu } from './toolbar/components/brush/brush-menu';
+import { EdgelessBrushToolButton } from './toolbar/components/brush/brush-tool-button';
+import { EdgelessEraserToolButton } from './toolbar/components/eraser/eraser-tool-button';
+
+export function effects() {
+  customElements.define('edgeless-brush-tool-button', EdgelessBrushToolButton);
+  customElements.define('edgeless-brush-menu', EdgelessBrushMenu);
+  customElements.define(
+    'edgeless-eraser-tool-button',
+    EdgelessEraserToolButton
+  );
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-brush-tool-button': EdgelessBrushToolButton;
+    'edgeless-brush-menu': EdgelessBrushMenu;
+    'edgeless-eraser-tool-button': EdgelessEraserToolButton;
+  }
+}

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

@@ -0,0 +1,4 @@
+export * from './brush-tool';
+export * from './eraser-tool';
+export * from './toolbar/config';
+export * from './toolbar/senior-tool';

blocksuite/affine/gfx/brush/src/toolbar/components/eraser/eraser-tool-button.ts

@@ -41,6 +41,7 @@ export class EdgelessEraserToolButton extends EdgelessToolbarToolMixin(
         {
           Escape: () => {
             if (this.edgelessTool.type === 'eraser') {
+              // @ts-expect-error FIXME: resolve after gfx tool refactor
               this.setEdgelessTool({ type: 'default' });
             }
           },

blocksuite/affine/gfx/brush/src/toolbar/config.ts

@@ -9,14 +9,18 @@ import {
   LineWidth,
   resolveColor,
 } from '@blocksuite/affine-model';
-import { type ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+import {
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@blocksuite/affine-shared/services';
 import {
   getMostCommonResolvedValue,
   getMostCommonValue,
 } from '@blocksuite/affine-shared/utils';
+import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import { html } from 'lit';
 
-export const builtinBrushToolbarConfig = {
+export const brushToolbarConfig = {
   actions: [
     {
       id: 'a.line-width',
@@ -98,3 +102,8 @@ export const builtinBrushToolbarConfig = {
 
   when: ctx => ctx.getSurfaceModelsByType(BrushElementModel).length > 0,
 } as const satisfies ToolbarModuleConfig;
+
+export const brushToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:brush'),
+  config: brushToolbarConfig,
+});

blocksuite/affine/gfx/brush/src/toolbar/senior-tool.ts

@@ -0,0 +1,17 @@
+import { SeniorToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+export const penSeniorTool = SeniorToolExtension('pen', ({ block }) => {
+  return {
+    name: 'Pen',
+    content: html`<div class="brush-and-eraser">
+      <edgeless-brush-tool-button
+        .edgeless=${block}
+      ></edgeless-brush-tool-button>
+
+      <edgeless-eraser-tool-button
+        .edgeless=${block}
+      ></edgeless-eraser-tool-button>
+    </div> `,
+  };
+});

blocksuite/affine/gfx/brush/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../blocks/block-surface" },
+    { "path": "../../components" },
+    { "path": "../../model" },
+    { "path": "../../rich-text" },
+    { "path": "../../shared" },
+    { "path": "../../widgets/widget-edgeless-toolbar" },
+    { "path": "../../../framework/block-std" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/store" }
+  ]
+}

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

@@ -1,5 +1,6 @@
 export * from './element-transform';
 export * from './indicator-overlay';
 export * from './toolbar/config';
+export * from './toolbar/senior-tool';
 export * from './utils';
 export * from './view';

blocksuite/affine/gfx/mindmap/src/toolbar/senior-tool.ts

@@ -0,0 +1,15 @@
+import { SeniorToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+export const mindMapSeniorTool = SeniorToolExtension(
+  'mindMap',
+  ({ block, toolbarContainer }) => {
+    return {
+      name: 'Mind Map',
+      content: html`<edgeless-mindmap-tool-button
+        .edgeless=${block}
+        .toolbarContainer=${toolbarContainer}
+      ></edgeless-mindmap-tool-button>`,
+    };
+  }
+);