feat(editor): create gfx mindmap package (#11100)

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

@@ -7,6 +7,10 @@ import {
   type PickColorEvent,
 } from '@blocksuite/affine-components/color-picker';
 import type { LineDetailType } from '@blocksuite/affine-components/edgeless-line-styles-panel';
+import {
+  createMindmapLayoutActionMenu,
+  createMindmapStyleActionMenu,
+} from '@blocksuite/affine-gfx-mindmap';
 import {
   type Color,
   DefaultTheme,
@@ -24,9 +28,10 @@ import {
   ShapeType,
   StrokeStyle,
 } from '@blocksuite/affine-model';
-import type {
-  ToolbarGenericAction,
-  ToolbarModuleConfig,
+import {
+  type ToolbarGenericAction,
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
 } from '@blocksuite/affine-shared/services';
 import { getMostCommonValue } from '@blocksuite/affine-shared/utils';
 import {
@@ -35,6 +40,7 @@ import {
   LINE_STYLE_LIST,
   renderMenu,
 } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import { Bound } from '@blocksuite/global/gfx';
 import { AddTextIcon, ShapeIcon } from '@blocksuite/icons/lit';
 import { html } from 'lit';
@@ -46,6 +52,56 @@ import { ShapeComponentConfig } from './shape-menu-config';
 
 export const shapeToolbarConfig = {
   actions: [
+    {
+      id: 'a.mindmap-style',
+      when(ctx) {
+        const models = ctx.getSurfaceModelsByType(ShapeElementModel);
+        return models.some(hasGrouped);
+      },
+      content(ctx) {
+        const models = ctx.getSurfaceModelsByType(ShapeElementModel);
+        if (!models.length) return null;
+
+        let mindmaps = models
+          .map(model => model.group)
+          .filter(model => ctx.matchModel(model, MindmapElementModel));
+        if (!mindmaps.length) return null;
+
+        // Not displayed when there is both a normal shape and a mindmap shape.
+        if (models.length !== mindmaps.length) return null;
+
+        mindmaps = Array.from(new Set(mindmaps));
+
+        return createMindmapStyleActionMenu(ctx, mindmaps);
+      },
+    },
+    {
+      id: 'b.mindmap-layout',
+      when(ctx) {
+        const models = ctx.getSurfaceModelsByType(ShapeElementModel);
+        return models.some(hasGrouped);
+      },
+      content(ctx) {
+        const models = ctx.getSurfaceModelsByType(ShapeElementModel);
+        if (!models.length) return null;
+
+        let mindmaps = models
+          .map(model => model.group)
+          .filter(model => ctx.matchModel(model, MindmapElementModel));
+        if (!mindmaps.length) return null;
+
+        // Not displayed when there is both a normal shape and a mindmap shape.
+        if (models.length !== mindmaps.length) return null;
+
+        mindmaps = Array.from(new Set(mindmaps));
+
+        // It's a sub node.
+        if (models.length === 1 && mindmaps[0].tree.element !== models[0])
+          return null;
+
+        return createMindmapLayoutActionMenu(ctx, mindmaps);
+      },
+    },
     {
       id: 'c.switch-type',
       when(ctx) {
@@ -326,3 +382,8 @@ function getTextColor(fillColor: Color, isNotTransparent = false) {
 function hasGrouped(model: ShapeElementModel) {
   return model.group instanceof MindmapElementModel;
 }
+
+export const shapeToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:shape'),
+  config: shapeToolbarConfig,
+});