diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/mindmap.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/mindmap.ts index c025aa4e96..7f4ce80211 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/mindmap.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/mindmap.ts @@ -1,11 +1,110 @@ +import { + MindmapStyleFour, + MindmapStyleOne, + MindmapStyleThree, + MindmapStyleTwo, +} from '@blocksuite/affine-block-surface'; +import { + LayoutType, + MindmapElementModel, + MindmapStyle, +} from '@blocksuite/affine-model'; import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services'; +import { getMostCommonValue } from '@blocksuite/affine-shared/utils'; +import { RadiantIcon, RightLayoutIcon, StyleIcon } from '@blocksuite/icons/lit'; + +import type { MenuItem } from './types'; +import { renderMenu } from './utils'; + +const MINDMAP_STYLE_LIST = [ + { + value: MindmapStyle.ONE, + icon: MindmapStyleOne, + }, + { + value: MindmapStyle.FOUR, + icon: MindmapStyleFour, + }, + { + value: MindmapStyle.THREE, + icon: MindmapStyleThree, + }, + { + value: MindmapStyle.TWO, + icon: MindmapStyleTwo, + }, +] as const satisfies MenuItem[]; + +const MINDMAP_LAYOUT_LIST = [ + { + key: 'Left', + value: LayoutType.LEFT, + icon: RightLayoutIcon({ + style: 'transform: rotate(0.5turn); transform-origin: center;', + }), + }, + { + key: 'Radial', + value: LayoutType.BALANCE, + icon: RadiantIcon(), + }, + { + key: 'Right', + value: LayoutType.RIGHT, + icon: RightLayoutIcon(), + }, +] as const satisfies MenuItem[]; export const builtinMindmapToolbarConfig = { actions: [ { - id: 'a.test', - label: 'Mindmap', - run() {}, + id: 'a.style', + content(ctx) { + const models = ctx.getSurfaceModelsByType(MindmapElementModel); + if (!models.length) return null; + + const style = getMostCommonValue(models, 'style') ?? MindmapStyle.ONE; + const onPick = (style: MindmapStyle) => { + for (const model of models) { + model.style = style; + } + ctx.settings.recordLastProps('mindmap', { style }); + }; + + return renderMenu({ + label: 'Style', + icon: StyleIcon(), + items: MINDMAP_STYLE_LIST, + currentValue: style, + onPick, + }); + }, + }, + { + id: 'b.layout', + content(ctx) { + const models = ctx.getSurfaceModelsByType(MindmapElementModel); + if (!models.length) return null; + + const layoutType = + getMostCommonValue(models, 'layoutType') ?? LayoutType.BALANCE; + const onPick = (layoutType: LayoutType) => { + for (const model of models) { + model.layoutType = layoutType; + model.layout(); + } + ctx.settings.recordLastProps('mindmap', { layoutType }); + }; + + return renderMenu({ + label: 'Layout', + items: MINDMAP_LAYOUT_LIST, + currentValue: layoutType, + onPick, + }); + }, }, ], + + when: ctx => ctx.getSurfaceModelsByType(MindmapElementModel).length > 0, } as const satisfies ToolbarModuleConfig; diff --git a/blocksuite/affine/shared/src/services/toolbar-service/context.ts b/blocksuite/affine/shared/src/services/toolbar-service/context.ts index 0f00956776..3811f99b77 100644 --- a/blocksuite/affine/shared/src/services/toolbar-service/context.ts +++ b/blocksuite/affine/shared/src/services/toolbar-service/context.ts @@ -17,6 +17,7 @@ import type { } from '@blocksuite/store'; import { DocModeProvider } from '../doc-mode-service'; +import { EditPropsStore } from '../edit-props-store'; import { TelemetryProvider, type TelemetryService } from '../telemetry-service'; import { ThemeProvider } from '../theme-service'; import { ToolbarRegistryIdentifier } from './registry'; @@ -105,6 +106,10 @@ abstract class ToolbarContextBase { return this.themeProvider.theme; } + get settings() { + return this.std.get(EditPropsStore); + } + get toolbarRegistry() { return this.std.get(ToolbarRegistryIdentifier); }