From 4d3eee3bad6e836bd6dae24a5a7c3b2616d742e9 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Mon, 24 Mar 2025 09:28:45 +0000 Subject: [PATCH] feat(editor): brush gfx package (#11131) --- blocksuite/affine/all/package.json | 2 + blocksuite/affine/all/src/gfx/brush.ts | 1 + blocksuite/affine/all/tsconfig.json | 1 + .../affine/blocks/block-root/package.json | 1 + .../src/edgeless/components/toolbar/tools.ts | 30 +------------ .../src/edgeless/configs/toolbar/index.ts | 7 +-- .../src/edgeless/edgeless-builtin-spec.ts | 3 +- .../block-root/src/edgeless/gfx-tool/index.ts | 2 - .../affine/blocks/block-root/src/effects.ts | 14 +----- .../affine/blocks/block-root/tsconfig.json | 1 + blocksuite/affine/gfx/brush/package.json | 45 +++++++++++++++++++ .../gfx-tool => gfx/brush/src}/brush-tool.ts | 0 blocksuite/affine/gfx/brush/src/effects.ts | 20 +++++++++ .../gfx-tool => gfx/brush/src}/eraser-tool.ts | 0 blocksuite/affine/gfx/brush/src/index.ts | 4 ++ .../toolbar/components}/brush/brush-menu.ts | 0 .../components}/brush/brush-tool-button.ts | 0 .../src/toolbar/components}/brush/icons.ts | 0 .../components}/eraser/eraser-tool-button.ts | 1 + .../src/toolbar/components}/eraser/icons.ts | 0 .../brush/src/toolbar/config.ts} | 13 +++++- .../gfx/brush/src/toolbar/senior-tool.ts | 17 +++++++ blocksuite/affine/gfx/brush/tsconfig.json | 20 +++++++++ blocksuite/affine/gfx/mindmap/src/index.ts | 1 + .../gfx/mindmap/src/toolbar/senior-tool.ts | 15 +++++++ tools/utils/src/workspace.gen.ts | 18 ++++++++ tsconfig.json | 1 + yarn.lock | 29 ++++++++++++ 28 files changed, 195 insertions(+), 51 deletions(-) create mode 100644 blocksuite/affine/all/src/gfx/brush.ts create mode 100644 blocksuite/affine/gfx/brush/package.json rename blocksuite/affine/{blocks/block-root/src/edgeless/gfx-tool => gfx/brush/src}/brush-tool.ts (100%) create mode 100644 blocksuite/affine/gfx/brush/src/effects.ts rename blocksuite/affine/{blocks/block-root/src/edgeless/gfx-tool => gfx/brush/src}/eraser-tool.ts (100%) create mode 100644 blocksuite/affine/gfx/brush/src/index.ts rename blocksuite/affine/{blocks/block-root/src/edgeless/components/toolbar => gfx/brush/src/toolbar/components}/brush/brush-menu.ts (100%) rename blocksuite/affine/{blocks/block-root/src/edgeless/components/toolbar => gfx/brush/src/toolbar/components}/brush/brush-tool-button.ts (100%) rename blocksuite/affine/{blocks/block-root/src/edgeless/components/toolbar => gfx/brush/src/toolbar/components}/brush/icons.ts (100%) rename blocksuite/affine/{blocks/block-root/src/edgeless/components/toolbar => gfx/brush/src/toolbar/components}/eraser/eraser-tool-button.ts (96%) rename blocksuite/affine/{blocks/block-root/src/edgeless/components/toolbar => gfx/brush/src/toolbar/components}/eraser/icons.ts (100%) rename blocksuite/affine/{blocks/block-root/src/edgeless/configs/toolbar/brush.ts => gfx/brush/src/toolbar/config.ts} (88%) create mode 100644 blocksuite/affine/gfx/brush/src/toolbar/senior-tool.ts create mode 100644 blocksuite/affine/gfx/brush/tsconfig.json create mode 100644 blocksuite/affine/gfx/mindmap/src/toolbar/senior-tool.ts diff --git a/blocksuite/affine/all/package.json b/blocksuite/affine/all/package.json index 7864565304..42aa51c1ad 100644 --- a/blocksuite/affine/all/package.json +++ b/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", diff --git a/blocksuite/affine/all/src/gfx/brush.ts b/blocksuite/affine/all/src/gfx/brush.ts new file mode 100644 index 0000000000..813d0de32f --- /dev/null +++ b/blocksuite/affine/all/src/gfx/brush.ts @@ -0,0 +1 @@ +export * from '@blocksuite/affine-gfx-brush'; diff --git a/blocksuite/affine/all/tsconfig.json b/blocksuite/affine/all/tsconfig.json index 89fc97d120..7aca2bd51f 100644 --- a/blocksuite/affine/all/tsconfig.json +++ b/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" }, diff --git a/blocksuite/affine/blocks/block-root/package.json b/blocksuite/affine/blocks/block-root/package.json index 8c8048a66c..2b13d5943a 100644 --- a/blocksuite/affine/blocks/block-root/package.json +++ b/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:*", diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts index 2460150c98..afe60d3906 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts +++ b/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`
- - - -
`, - }; -}); - -const mindMapSeniorTool = SeniorToolExtension( - 'mindMap', - ({ block, toolbarContainer }) => { - return { - name: 'Mind Map', - content: html``, - }; - } -); - const templateSeniorTool = SeniorToolExtension('template', ({ block }) => { return { name: 'Template', diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts index d1b9375d89..ff104deabc 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts +++ b/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, diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts index de2be600c7..bc1f6d19d4 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts +++ b/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'; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/index.ts b/blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/index.ts index 29bdbe4222..b703333308 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/index.ts +++ b/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'; diff --git a/blocksuite/affine/blocks/block-root/src/effects.ts b/blocksuite/affine/blocks/block-root/src/effects.ts index ec16771216..ad93ff20c6 100644 --- a/blocksuite/affine/blocks/block-root/src/effects.ts +++ b/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; diff --git a/blocksuite/affine/blocks/block-root/tsconfig.json b/blocksuite/affine/blocks/block-root/tsconfig.json index c99693331b..d0f1c98bea 100644 --- a/blocksuite/affine/blocks/block-root/tsconfig.json +++ b/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" }, diff --git a/blocksuite/affine/gfx/brush/package.json b/blocksuite/affine/gfx/brush/package.json new file mode 100644 index 0000000000..a8186667f4 --- /dev/null +++ b/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" +} diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/brush-tool.ts b/blocksuite/affine/gfx/brush/src/brush-tool.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/brush-tool.ts rename to blocksuite/affine/gfx/brush/src/brush-tool.ts diff --git a/blocksuite/affine/gfx/brush/src/effects.ts b/blocksuite/affine/gfx/brush/src/effects.ts new file mode 100644 index 0000000000..b6acbca301 --- /dev/null +++ b/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; + } +} diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/eraser-tool.ts b/blocksuite/affine/gfx/brush/src/eraser-tool.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/eraser-tool.ts rename to blocksuite/affine/gfx/brush/src/eraser-tool.ts diff --git a/blocksuite/affine/gfx/brush/src/index.ts b/blocksuite/affine/gfx/brush/src/index.ts new file mode 100644 index 0000000000..5a519b6f4d --- /dev/null +++ b/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'; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/brush-menu.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/brush/brush-menu.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/brush-menu.ts rename to blocksuite/affine/gfx/brush/src/toolbar/components/brush/brush-menu.ts diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/brush-tool-button.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/brush/brush-tool-button.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/brush-tool-button.ts rename to blocksuite/affine/gfx/brush/src/toolbar/components/brush/brush-tool-button.ts diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/icons.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/brush/icons.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/icons.ts rename to blocksuite/affine/gfx/brush/src/toolbar/components/brush/icons.ts diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/eraser/eraser-tool-button.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/eraser/eraser-tool-button.ts similarity index 96% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/eraser/eraser-tool-button.ts rename to blocksuite/affine/gfx/brush/src/toolbar/components/eraser/eraser-tool-button.ts index 6393522f2c..4653b6b823 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/eraser/eraser-tool-button.ts +++ b/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' }); } }, diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/eraser/icons.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/eraser/icons.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/eraser/icons.ts rename to blocksuite/affine/gfx/brush/src/toolbar/components/eraser/icons.ts diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts b/blocksuite/affine/gfx/brush/src/toolbar/config.ts similarity index 88% rename from blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts rename to blocksuite/affine/gfx/brush/src/toolbar/config.ts index 73ae99f206..e38924ca2f 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts +++ b/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, +}); diff --git a/blocksuite/affine/gfx/brush/src/toolbar/senior-tool.ts b/blocksuite/affine/gfx/brush/src/toolbar/senior-tool.ts new file mode 100644 index 0000000000..6648e7fa3b --- /dev/null +++ b/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`
+ + + +
`, + }; +}); diff --git a/blocksuite/affine/gfx/brush/tsconfig.json b/blocksuite/affine/gfx/brush/tsconfig.json new file mode 100644 index 0000000000..5b280fe89a --- /dev/null +++ b/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" } + ] +} diff --git a/blocksuite/affine/gfx/mindmap/src/index.ts b/blocksuite/affine/gfx/mindmap/src/index.ts index a8a2e22422..0836b3bed8 100644 --- a/blocksuite/affine/gfx/mindmap/src/index.ts +++ b/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'; diff --git a/blocksuite/affine/gfx/mindmap/src/toolbar/senior-tool.ts b/blocksuite/affine/gfx/mindmap/src/toolbar/senior-tool.ts new file mode 100644 index 0000000000..11e35c5c41 --- /dev/null +++ b/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``, + }; + } +); diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index bac0a463d8..964913d50f 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -28,6 +28,7 @@ export const PackageList = [ 'blocksuite/affine/fragments/fragment-doc-title', 'blocksuite/affine/fragments/fragment-frame-panel', 'blocksuite/affine/fragments/fragment-outline', + 'blocksuite/affine/gfx/brush', 'blocksuite/affine/gfx/connector', 'blocksuite/affine/gfx/group', 'blocksuite/affine/gfx/mindmap', @@ -312,6 +313,7 @@ export const PackageList = [ 'blocksuite/affine/blocks/block-table', 'blocksuite/affine/components', 'blocksuite/affine/fragments/fragment-doc-title', + 'blocksuite/affine/gfx/brush', 'blocksuite/affine/gfx/connector', 'blocksuite/affine/gfx/group', 'blocksuite/affine/gfx/mindmap', @@ -450,6 +452,21 @@ export const PackageList = [ 'blocksuite/framework/store', ], }, + { + location: 'blocksuite/affine/gfx/brush', + name: '@blocksuite/affine-gfx-brush', + workspaceDependencies: [ + 'blocksuite/affine/blocks/block-surface', + 'blocksuite/affine/components', + 'blocksuite/affine/model', + 'blocksuite/affine/rich-text', + 'blocksuite/affine/shared', + 'blocksuite/affine/widgets/widget-edgeless-toolbar', + 'blocksuite/framework/block-std', + 'blocksuite/framework/global', + 'blocksuite/framework/store', + ], + }, { location: 'blocksuite/affine/gfx/connector', name: '@blocksuite/affine-gfx-connector', @@ -1145,6 +1162,7 @@ export type PackageName = | '@blocksuite/affine-fragment-doc-title' | '@blocksuite/affine-fragment-frame-panel' | '@blocksuite/affine-fragment-outline' + | '@blocksuite/affine-gfx-brush' | '@blocksuite/affine-gfx-connector' | '@blocksuite/affine-gfx-group' | '@blocksuite/affine-gfx-mindmap' diff --git a/tsconfig.json b/tsconfig.json index 6eb4508579..161a76487a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -75,6 +75,7 @@ { "path": "./blocksuite/affine/fragments/fragment-doc-title" }, { "path": "./blocksuite/affine/fragments/fragment-frame-panel" }, { "path": "./blocksuite/affine/fragments/fragment-outline" }, + { "path": "./blocksuite/affine/gfx/brush" }, { "path": "./blocksuite/affine/gfx/connector" }, { "path": "./blocksuite/affine/gfx/group" }, { "path": "./blocksuite/affine/gfx/mindmap" }, diff --git a/yarn.lock b/yarn.lock index 4a477016e9..b4d891727b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2733,6 +2733,7 @@ __metadata: "@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:*" @@ -2972,6 +2973,33 @@ __metadata: languageName: unknown linkType: soft +"@blocksuite/affine-gfx-brush@workspace:*, @blocksuite/affine-gfx-brush@workspace:blocksuite/affine/gfx/brush": + version: 0.0.0-use.local + resolution: "@blocksuite/affine-gfx-brush@workspace:blocksuite/affine/gfx/brush" + 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": "npm:^2.2.6" + "@blocksuite/store": "workspace:*" + "@lit/context": "npm:^1.1.2" + "@preact/signals-core": "npm:^1.8.0" + "@toeverything/theme": "npm:^1.1.12" + "@types/lodash-es": "npm:^4.17.12" + lit: "npm:^3.2.0" + lodash-es: "npm:^4.17.21" + minimatch: "npm:^10.0.1" + rxjs: "npm:^7.8.1" + yjs: "npm:^13.6.21" + zod: "npm:^3.23.8" + languageName: unknown + linkType: soft + "@blocksuite/affine-gfx-connector@workspace:*, @blocksuite/affine-gfx-connector@workspace:blocksuite/affine/gfx/connector": version: 0.0.0-use.local resolution: "@blocksuite/affine-gfx-connector@workspace:blocksuite/affine/gfx/connector" @@ -3629,6 +3657,7 @@ __metadata: "@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:*"