refactor(editor): edgeless mindmap toolbar config extension (#10803)

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<MindmapStyle>[];
+
+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<LayoutType>[];
 
 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;

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);
   }