From c1d426d8e9e3484323f7b261caaa719fcd9ddf88 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Fri, 21 Mar 2025 16:47:40 +0000 Subject: [PATCH] refactor(editor): move frame toolbar config and components to its package (#11084) --- .../blocks/block-edgeless-text/package.json | 1 + .../src/edgelss-toolbar/config.ts} | 2 +- .../src/edgelss-toolbar/index.ts | 1 + .../blocks/block-edgeless-text/src/index.ts | 1 + .../blocks/block-edgeless-text/tsconfig.json | 1 + .../affine/blocks/block-frame/package.json | 1 + .../src/edgeless-toolbar}/config.ts | 0 .../src/edgeless-toolbar}/frame-dense-menu.ts | 5 ++-- .../src/edgeless-toolbar}/frame-menu.ts | 3 ++- .../edgeless-toolbar}/frame-tool-button.ts | 0 .../block-frame/src/edgeless-toolbar/index.ts | 5 ++++ .../src/edgeless-toolbar/quick-tool.ts | 15 +++++++++++ .../affine/blocks/block-frame/src/effects.ts | 11 ++++++++ .../affine/blocks/block-frame/src/index.ts | 1 + .../affine/blocks/block-frame/tsconfig.json | 1 + .../components/toolbar/common/type.ts | 11 -------- .../toolbar/connector/connector-dense-menu.ts | 3 +-- .../toolbar/lasso/lasso-dense-menu.ts | 2 +- .../toolbar/link/link-dense-menu.ts | 3 +-- .../src/edgeless/components/toolbar/tools.ts | 27 ++----------------- .../src/edgeless/configs/toolbar/index.ts | 4 +-- .../affine/blocks/block-root/src/effects.ts | 6 ----- .../affine/gfx/shape/src/toolbar/index.ts | 1 + .../gfx/shape/src/toolbar/senior-tool.ts | 15 +++++++++++ .../src/config/types.ts | 11 ++++++++ tools/utils/src/workspace.gen.ts | 2 ++ yarn.lock | 2 ++ 27 files changed, 82 insertions(+), 53 deletions(-) rename blocksuite/affine/blocks/{block-root/src/edgeless/configs/toolbar/edgeless-text.ts => block-edgeless-text/src/edgelss-toolbar/config.ts} (90%) create mode 100644 blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/index.ts rename blocksuite/affine/blocks/{block-root/src/edgeless/components/toolbar/frame => block-frame/src/edgeless-toolbar}/config.ts (100%) rename blocksuite/affine/blocks/{block-root/src/edgeless/components/toolbar/frame => block-frame/src/edgeless-toolbar}/frame-dense-menu.ts (81%) rename blocksuite/affine/blocks/{block-root/src/edgeless/components/toolbar/frame => block-frame/src/edgeless-toolbar}/frame-menu.ts (94%) rename blocksuite/affine/blocks/{block-root/src/edgeless/components/toolbar/frame => block-frame/src/edgeless-toolbar}/frame-tool-button.ts (100%) create mode 100644 blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/index.ts create mode 100644 blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/quick-tool.ts delete mode 100644 blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/type.ts create mode 100644 blocksuite/affine/gfx/shape/src/toolbar/senior-tool.ts diff --git a/blocksuite/affine/blocks/block-edgeless-text/package.json b/blocksuite/affine/blocks/block-edgeless-text/package.json index a95f785153..707f8fb03c 100644 --- a/blocksuite/affine/blocks/block-edgeless-text/package.json +++ b/blocksuite/affine/blocks/block-edgeless-text/package.json @@ -16,6 +16,7 @@ "@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", diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/edgeless-text.ts b/blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/config.ts similarity index 90% rename from blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/edgeless-text.ts rename to blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/config.ts index 8fddbf596a..aba36f45f5 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/edgeless-text.ts +++ b/blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/config.ts @@ -2,7 +2,7 @@ import { EdgelessTextBlockModel } from '@blocksuite/affine-model'; import { type ToolbarModuleConfig } from '@blocksuite/affine-shared/services'; import { createTextActions } from '@blocksuite/affine-widget-edgeless-toolbar'; -export const builtinEdgelessTextToolbarConfig = { +export const edgelessTextToolbarConfig = { // No need to adjust element bounds, which updates itself using ResizeObserver actions: createTextActions(EdgelessTextBlockModel, 'edgeless-text'), diff --git a/blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/index.ts b/blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/index.ts new file mode 100644 index 0000000000..f03c2281a9 --- /dev/null +++ b/blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/index.ts @@ -0,0 +1 @@ +export * from './config'; diff --git a/blocksuite/affine/blocks/block-edgeless-text/src/index.ts b/blocksuite/affine/blocks/block-edgeless-text/src/index.ts index 35218cbef2..355d04d986 100644 --- a/blocksuite/affine/blocks/block-edgeless-text/src/index.ts +++ b/blocksuite/affine/blocks/block-edgeless-text/src/index.ts @@ -1,3 +1,4 @@ export * from './commands'; export * from './edgeless-text-block.js'; export * from './edgeless-text-spec.js'; +export * from './edgelss-toolbar'; diff --git a/blocksuite/affine/blocks/block-edgeless-text/tsconfig.json b/blocksuite/affine/blocks/block-edgeless-text/tsconfig.json index 8b82812cb7..0166f9138d 100644 --- a/blocksuite/affine/blocks/block-edgeless-text/tsconfig.json +++ b/blocksuite/affine/blocks/block-edgeless-text/tsconfig.json @@ -13,6 +13,7 @@ { "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/blocks/block-frame/package.json b/blocksuite/affine/blocks/block-frame/package.json index 83b68369e5..807fbb2bdc 100644 --- a/blocksuite/affine/blocks/block-frame/package.json +++ b/blocksuite/affine/blocks/block-frame/package.json @@ -14,6 +14,7 @@ "@blocksuite/affine-components": "workspace:*", "@blocksuite/affine-model": "workspace:*", "@blocksuite/affine-shared": "workspace:*", + "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*", "@blocksuite/affine-widget-frame-title": "workspace:*", "@blocksuite/block-std": "workspace:*", "@blocksuite/global": "workspace:*", diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/config.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/config.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/config.ts rename to blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/config.ts diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-dense-menu.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-dense-menu.ts similarity index 81% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-dense-menu.ts rename to blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-dense-menu.ts index ae12d61c23..7850008864 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-dense-menu.ts +++ b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-dense-menu.ts @@ -1,8 +1,8 @@ -import { EdgelessFrameManagerIdentifier } from '@blocksuite/affine-block-frame'; import { menu } from '@blocksuite/affine-components/context-menu'; +import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar'; import { FrameIcon } from '@blocksuite/icons/lit'; -import type { DenseMenuBuilder } from '../common/type.js'; +import { EdgelessFrameManagerIdentifier } from '../frame-manager.js'; import { FrameConfig } from './config.js'; export const buildFrameDenseMenu: DenseMenuBuilder = (edgeless, gfx) => @@ -22,6 +22,7 @@ export const buildFrameDenseMenu: DenseMenuBuilder = (edgeless, gfx) => name: `Slide ${config.name}`, select: () => { const frame = edgeless.std.get(EdgelessFrameManagerIdentifier); + // @ts-expect-error FIXME: resolve after gfx tool refactor gfx.tool.setTool('default'); frame.createFrameOnViewportCenter(config.wh); }, diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-menu.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-menu.ts similarity index 94% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-menu.ts rename to blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-menu.ts index 844f816b9c..ed63d38490 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-menu.ts +++ b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-menu.ts @@ -1,9 +1,9 @@ -import { EdgelessFrameManagerIdentifier } from '@blocksuite/affine-block-frame'; import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; import { css, html, LitElement } from 'lit'; import { repeat } from 'lit/directives/repeat.js'; +import { EdgelessFrameManagerIdentifier } from '../frame-manager.js'; import { FrameConfig } from './config.js'; export class EdgelessFrameMenu extends EdgelessToolbarToolMixin(LitElement) { @@ -84,6 +84,7 @@ export class EdgelessFrameMenu extends EdgelessToolbarToolMixin(LitElement) { (item, index) => html`
{ + // @ts-expect-error FIXME: resolve after gfx tool refactor gfx.tool.setTool('default'); frameManager.createFrameOnViewportCenter(item.wh); }} diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-tool-button.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-tool-button.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-tool-button.ts rename to blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-tool-button.ts diff --git a/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/index.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/index.ts new file mode 100644 index 0000000000..9acaaed752 --- /dev/null +++ b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/index.ts @@ -0,0 +1,5 @@ +export * from './config'; +export * from './frame-dense-menu'; +export * from './frame-menu'; +export * from './frame-tool-button'; +export * from './quick-tool'; diff --git a/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/quick-tool.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/quick-tool.ts new file mode 100644 index 0000000000..4769de3bb1 --- /dev/null +++ b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/quick-tool.ts @@ -0,0 +1,15 @@ +import { QuickToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar'; +import { html } from 'lit'; + +import { buildFrameDenseMenu } from './frame-dense-menu'; + +export const frameQuickTool = QuickToolExtension('frame', ({ block, gfx }) => { + return { + type: 'frame', + content: html``, + menu: buildFrameDenseMenu(block, gfx), + enable: !block.doc.readonly, + }; +}); diff --git a/blocksuite/affine/blocks/block-frame/src/effects.ts b/blocksuite/affine/blocks/block-frame/src/effects.ts index 557ff8b6a3..9502a23e13 100644 --- a/blocksuite/affine/blocks/block-frame/src/effects.ts +++ b/blocksuite/affine/blocks/block-frame/src/effects.ts @@ -1,5 +1,16 @@ +import { EdgelessFrameMenu, EdgelessFrameToolButton } from './edgeless-toolbar'; import { FrameBlockComponent } from './frame-block'; export function effects() { customElements.define('affine-frame', FrameBlockComponent); + customElements.define('edgeless-frame-tool-button', EdgelessFrameToolButton); + customElements.define('edgeless-frame-menu', EdgelessFrameMenu); +} + +declare global { + interface HTMLElementTagNameMap { + 'affine-frame': FrameBlockComponent; + 'edgeless-frame-tool-button': EdgelessFrameToolButton; + 'edgeless-frame-menu': EdgelessFrameMenu; + } } diff --git a/blocksuite/affine/blocks/block-frame/src/index.ts b/blocksuite/affine/blocks/block-frame/src/index.ts index aca317812f..49a8c0fe05 100644 --- a/blocksuite/affine/blocks/block-frame/src/index.ts +++ b/blocksuite/affine/blocks/block-frame/src/index.ts @@ -1,6 +1,7 @@ import type { FrameTool } from './frame-tool'; import type { PresentTool, PresentToolOption } from './preset-tool'; +export * from './edgeless-toolbar'; export * from './frame-block'; export * from './frame-highlight-manager'; export * from './frame-manager'; diff --git a/blocksuite/affine/blocks/block-frame/tsconfig.json b/blocksuite/affine/blocks/block-frame/tsconfig.json index 3df4c6c17c..04c8d82d8c 100644 --- a/blocksuite/affine/blocks/block-frame/tsconfig.json +++ b/blocksuite/affine/blocks/block-frame/tsconfig.json @@ -11,6 +11,7 @@ { "path": "../../components" }, { "path": "../../model" }, { "path": "../../shared" }, + { "path": "../../widgets/widget-edgeless-toolbar" }, { "path": "../../widgets/widget-frame-title" }, { "path": "../../../framework/block-std" }, { "path": "../../../framework/global" }, diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/type.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/type.ts deleted file mode 100644 index 747d420d2a..0000000000 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/type.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { MenuConfig } from '@blocksuite/affine-components/context-menu'; -import type { BlockComponent } from '@blocksuite/block-std'; -import type { GfxController } from '@blocksuite/block-std/gfx'; - -/** - * Helper function to build a menu configuration for a tool in dense mode - */ -export type DenseMenuBuilder = ( - edgeless: BlockComponent, - gfx: GfxController -) => MenuConfig; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/connector/connector-dense-menu.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/connector/connector-dense-menu.ts index d8ad2c9958..f9c878f622 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/connector/connector-dense-menu.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/connector/connector-dense-menu.ts @@ -1,14 +1,13 @@ import { menu } from '@blocksuite/affine-components/context-menu'; import { ConnectorMode } from '@blocksuite/affine-model'; import { EditPropsStore } from '@blocksuite/affine-shared/services'; +import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar'; import { ConnectorCIcon, ConnectorEIcon, ConnectorLIcon, } from '@blocksuite/icons/lit'; -import type { DenseMenuBuilder } from '../common/type.js'; - export const buildConnectorDenseMenu: DenseMenuBuilder = (edgeless, gfx) => { const prevMode = edgeless.std.get(EditPropsStore).lastProps$.value.connector.mode; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/lasso/lasso-dense-menu.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/lasso/lasso-dense-menu.ts index a64f9ce496..ca82117540 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/lasso/lasso-dense-menu.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/lasso/lasso-dense-menu.ts @@ -1,7 +1,7 @@ import { menu } from '@blocksuite/affine-components/context-menu'; import { LassoMode } from '@blocksuite/affine-shared/types'; +import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar'; -import type { DenseMenuBuilder } from '../common/type.js'; import { LassoFreeHandIcon, LassoPolygonalIcon } from './icons.js'; export const buildLassoDenseMenu: DenseMenuBuilder = (_, gfx) => { diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/link/link-dense-menu.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/link/link-dense-menu.ts index a55a75838c..c04dc90a36 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/link/link-dense-menu.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/link/link-dense-menu.ts @@ -2,8 +2,7 @@ import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmar import { menu } from '@blocksuite/affine-components/context-menu'; import { LinkIcon } from '@blocksuite/affine-components/icons'; import { TelemetryProvider } from '@blocksuite/affine-shared/services'; - -import type { DenseMenuBuilder } from '../common/type.js'; +import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar'; export const buildLinkDenseMenu: DenseMenuBuilder = edgeless => menu.action({ 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 5a9db97b9e..432722f829 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,10 +1,11 @@ +import { frameQuickTool } from '@blocksuite/affine-block-frame'; +import { shapeSeniorTool } from '@blocksuite/affine-gfx-shape'; import { QuickToolExtension, SeniorToolExtension, } from '@blocksuite/affine-widget-edgeless-toolbar'; import { html } from 'lit'; -import { buildFrameDenseMenu } from './frame/frame-dense-menu.js'; import { buildLinkDenseMenu } from './link/link-dense-menu.js'; const defaultQuickTool = QuickToolExtension('default', ({ block }) => { @@ -16,17 +17,6 @@ const defaultQuickTool = QuickToolExtension('default', ({ block }) => { }; }); -const frameQuickTool = QuickToolExtension('frame', ({ block, gfx }) => { - return { - type: 'frame', - content: html``, - menu: buildFrameDenseMenu(block, gfx), - enable: !block.doc.readonly, - }; -}); - const connectorQuickTool = QuickToolExtension('connector', ({ block }) => { return { type: 'connector', @@ -69,19 +59,6 @@ const penSeniorTool = SeniorToolExtension('pen', ({ block }) => { }; }); -const shapeSeniorTool = SeniorToolExtension( - 'shape', - ({ block, toolbarContainer }) => { - return { - name: 'Shape', - content: html``, - }; - } -); - const mindMapSeniorTool = SeniorToolExtension( 'mindMap', ({ block, toolbarContainer }) => { 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 b9f17c3eaf..aa24887d23 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,3 +1,4 @@ +import { edgelessTextToolbarConfig } from '@blocksuite/affine-block-edgeless-text'; import { frameToolbarExtension } from '@blocksuite/affine-block-frame'; import { textToolbarConfig } from '@blocksuite/affine-gfx-text'; import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; @@ -6,7 +7,6 @@ import type { ExtensionType } from '@blocksuite/store'; import { builtinBrushToolbarConfig } from './brush'; import { builtinConnectorToolbarConfig } from './connector'; -import { builtinEdgelessTextToolbarConfig } from './edgeless-text'; import { builtinGroupToolbarConfig } from './group'; import { builtinMindmapToolbarConfig } from './mindmap'; import { builtinLockedToolbarConfig, builtinMiscToolbarConfig } from './misc'; @@ -42,7 +42,7 @@ export const EdgelessElementToolbarExtension: ExtensionType[] = [ ToolbarModuleExtension({ id: BlockFlavourIdentifier('affine:surface:edgeless-text'), - config: builtinEdgelessTextToolbarConfig, + config: edgelessTextToolbarConfig, }), ToolbarModuleExtension({ diff --git a/blocksuite/affine/blocks/block-root/src/effects.ts b/blocksuite/affine/blocks/block-root/src/effects.ts index f3729980ae..3ae20bfe6a 100644 --- a/blocksuite/affine/blocks/block-root/src/effects.ts +++ b/blocksuite/affine/blocks/block-root/src/effects.ts @@ -36,8 +36,6 @@ import { EdgelessConnectorMenu } from './edgeless/components/toolbar/connector/c import { EdgelessConnectorToolButton } from './edgeless/components/toolbar/connector/connector-tool-button.js'; import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js'; import { EdgelessEraserToolButton } from './edgeless/components/toolbar/eraser/eraser-tool-button.js'; -import { EdgelessFrameMenu } from './edgeless/components/toolbar/frame/frame-menu.js'; -import { EdgelessFrameToolButton } from './edgeless/components/toolbar/frame/frame-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 { MindMapPlaceholder } from './edgeless/components/toolbar/mindmap/mindmap-importing-placeholder.js'; @@ -157,7 +155,6 @@ function registerEdgelessToolbarComponents() { 'edgeless-eraser-tool-button', EdgelessEraserToolButton ); - customElements.define('edgeless-frame-tool-button', EdgelessFrameToolButton); customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton); customElements.define('edgeless-lasso-tool-button', EdgelessLassoToolButton); customElements.define( @@ -170,7 +167,6 @@ function registerEdgelessToolbarComponents() { // Menus customElements.define('edgeless-brush-menu', EdgelessBrushMenu); customElements.define('edgeless-connector-menu', EdgelessConnectorMenu); - customElements.define('edgeless-frame-menu', EdgelessFrameMenu); customElements.define('edgeless-mindmap-menu', EdgelessMindmapMenu); customElements.define('edgeless-note-menu', EdgelessNoteMenu); customElements.define('edgeless-slide-menu', EdgelessSlideMenu); @@ -301,8 +297,6 @@ declare global { 'edgeless-connector-tool-button': EdgelessConnectorToolButton; 'edgeless-default-tool-button': EdgelessDefaultToolButton; 'edgeless-eraser-tool-button': EdgelessEraserToolButton; - 'edgeless-frame-menu': EdgelessFrameMenu; - 'edgeless-frame-tool-button': EdgelessFrameToolButton; 'edgeless-lasso-tool-button': EdgelessLassoToolButton; 'edgeless-link-tool-button': EdgelessLinkToolButton; 'mindmap-import-placeholder': MindMapPlaceholder; diff --git a/blocksuite/affine/gfx/shape/src/toolbar/index.ts b/blocksuite/affine/gfx/shape/src/toolbar/index.ts index ec5763d072..c3e5edfb7f 100644 --- a/blocksuite/affine/gfx/shape/src/toolbar/index.ts +++ b/blocksuite/affine/gfx/shape/src/toolbar/index.ts @@ -1,3 +1,4 @@ export * from './config'; export * from './icons'; +export * from './senior-tool'; export * from './shape-menu-config'; diff --git a/blocksuite/affine/gfx/shape/src/toolbar/senior-tool.ts b/blocksuite/affine/gfx/shape/src/toolbar/senior-tool.ts new file mode 100644 index 0000000000..bc7277a33f --- /dev/null +++ b/blocksuite/affine/gfx/shape/src/toolbar/senior-tool.ts @@ -0,0 +1,15 @@ +import { SeniorToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar'; +import { html } from 'lit'; + +export const shapeSeniorTool = SeniorToolExtension( + 'shape', + ({ block, toolbarContainer }) => { + return { + name: 'Shape', + content: html``, + }; + } +); diff --git a/blocksuite/affine/widgets/widget-edgeless-toolbar/src/config/types.ts b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/config/types.ts index e817284374..cfc968dea4 100644 --- a/blocksuite/affine/widgets/widget-edgeless-toolbar/src/config/types.ts +++ b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/config/types.ts @@ -1,3 +1,6 @@ +import type { MenuConfig } from '@blocksuite/affine-components/context-menu'; +import type { BlockComponent } from '@blocksuite/block-std'; +import type { GfxController } from '@blocksuite/block-std/gfx'; import type { TemplateResult } from 'lit'; export type MenuItem = { @@ -15,3 +18,11 @@ export type Menu = { currentValue: T; onPick: (value: T) => void; }; + +/** + * Helper function to build a menu configuration for a tool in dense mode + */ +export type DenseMenuBuilder = ( + edgeless: BlockComponent, + gfx: GfxController +) => MenuConfig; diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index a4aa5b68e9..073d0d32c5 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -171,6 +171,7 @@ export const PackageList = [ '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', @@ -200,6 +201,7 @@ export const PackageList = [ 'blocksuite/affine/components', 'blocksuite/affine/model', 'blocksuite/affine/shared', + 'blocksuite/affine/widgets/widget-edgeless-toolbar', 'blocksuite/affine/widgets/widget-frame-title', 'blocksuite/framework/block-std', 'blocksuite/framework/global', diff --git a/yarn.lock b/yarn.lock index 5c3106e0f6..f51b2662a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2509,6 +2509,7 @@ __metadata: "@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" @@ -2562,6 +2563,7 @@ __metadata: "@blocksuite/affine-components": "workspace:*" "@blocksuite/affine-model": "workspace:*" "@blocksuite/affine-shared": "workspace:*" + "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*" "@blocksuite/affine-widget-frame-title": "workspace:*" "@blocksuite/block-std": "workspace:*" "@blocksuite/global": "workspace:*"