no message

web3/packages/mind-map/src/components/ToolBar.vue

@@ -5,6 +5,7 @@
       <ImportBtn/>
       <ExportBtn/>
       <RemoveNode/>
+      <LayoutGroup/>
     </div>
 </template>
 
@@ -14,4 +15,5 @@ import ImportBtn from "./ToolBar/ImportBtn.vue";
 import ExportBtn from "./ToolBar/ExportBtn.vue";
 import InsertSiblingNode from "./ToolBar/InsertSiblingNode.vue";
 import RemoveNode from "./ToolBar/RemoveNode.vue";
+import LayoutGroup from "./ToolBar/LayoutGroup.vue";
 </script>

web3/packages/mind-map/src/components/ToolBar/layoutGroup.vue

@@ -1,4 +1,39 @@
 <!-- 布局 -->
- <template>
-    <div></div>
- </template>
+<template>
+  <div>
+    {{ currentLayout }}
+    <select
+      v-model="currentLayout"
+      @change="
+        (e) => {
+         const target = e?.target as HTMLSelectElement;
+         target?.value && useLayout(target.value as LayoutType);
+        }
+      "
+      class="layoutSelect"
+    >
+      <optgroup
+        v-for="group in layoutGroupList"
+        :key="group.name"
+        :label="group.name"
+      >
+        <option v-for="item in group.list" :key="item" :value="item">
+          {{ item }}
+        </option>
+      </optgroup>
+    </select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { LayoutType } from "../../store/helpers/layoutGroupList";
+
+import { layoutGroupList } from "../../store/helpers/layoutGroupList";
+import { useMindMapStore } from "../../store/index";
+import { storeToRefs } from "pinia";
+
+const { useLayout, currentLayout } = useMindMapStore();
+// const { currentLayout } = storeToRefs(useMindMapStore());
+</script>
+
+<style scoped></style>

web3/packages/mind-map/src/store/helpers/layoutGroupList.ts

@@ -1,37 +1,74 @@
+import { useMindMapStore } from "../modules/mindMap";
+
+// 从layoutGroupList中提取所有可能的布局类型
+export type LayoutType = 
+  | "forceDirected" 
+  | "logicalStructure" 
+  | "logicalStructureLeft"
+  | "mindMap"
+  | "organizationStructure"
+  | "catalogOrganization"
+  | "timeline"
+  | "timeline2"
+  | "verticalTimeline2"
+  | "verticalTimeline3"
+  | "verticalTimeline"
+  | "fishbone"
+  | "fishbone2"
+  | "rightFishbone"
+  | "rightFishbone2";
+
 // 结构列表
-export const layoutGroupList = [
+export const layoutGroupList : {
+  name: string;
+  list: LayoutType[];
+}[]  = [
   {
-      name: '力导向图',
-      list: ['forceDirected']
+    name: "力导向图",
+    list: ["forceDirected"],
   },
   {
-      name: '逻辑结构图',
-      list: ['logicalStructure', 'logicalStructureLeft']
+    name: "逻辑结构图",
+    list: ["logicalStructure", "logicalStructureLeft"],
   },
   {
-      name: '思维导图',
-      list: ['mindMap']
+    name: "思维导图",
+    list: ["mindMap"],
   },
   {
-      name: '组织结构图',
-      list: ['organizationStructure']
+    name: "组织结构图",
+    list: ["organizationStructure"],
   },
   {
-      name: '目录组织图',
-      list: ['catalogOrganization']
+    name: "目录组织图",
+    list: ["catalogOrganization"],
   },
   {
-      name: '时间轴',
+    name: "时间轴",
     list: [
-        'timeline',
-        'timeline2',
-        'verticalTimeline2',
-        'verticalTimeline3',
-        'verticalTimeline'
-      ]
+      "timeline",
+      "timeline2",
+      "verticalTimeline2",
+      "verticalTimeline3",
+      "verticalTimeline",
+    ],
   },
   {
-      name: '鱼骨图',
-      list: ['fishbone', 'fishbone2', 'rightFishbone', 'rightFishbone2']
-    }
-  ]
+    name: "鱼骨图",
+    list: ["fishbone", "fishbone2", "rightFishbone", "rightFishbone2"],
+  },
+];
+
+
+
+// 切换 layout 
+export function useLayout(layout: LayoutType) {
+  // console.log("切换布局", layout);
+  const { getMindMapInstance } = useMindMapStore();
+  const instance = getMindMapInstance();
+  if (!instance) return;
+
+  // 切换布局
+  instance.setLayout(layout);
+}
+

web3/packages/mind-map/src/store/modules/mindMap.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref, shallowRef } from "vue";
+import { Ref, ref, shallowRef } from "vue";
 import { importFile } from "../helpers/import";
 import { exportFile } from "../helpers/export";
 import { usePlugins } from "../helpers/usePlugin";
@@ -8,8 +8,10 @@ import { insertSiblingNode } from "../helpers/insertSiblingNode";
 import { removeNode } from "../helpers/removeNode";
 import { removeKeyCommand } from "../helpers/keyCommand";
 import { getCustomNodeContent } from "../helpers/addCustomContentToNode";
+import { useLayout } from "../helpers/layoutGroupList";
+import type { LayoutType } from "../helpers/layoutGroupList";
 
-import { mockData } from './mockData'
+import { mockData } from "./mockData";
 
 import type MindMapNode from "simple-mind-map/types/src/core/render/node/MindMapNode";
 
@@ -25,13 +27,16 @@ export const useMindMapStore = defineStore(
     // 激活状态节点
     const activeNodes = shallowRef<MindMapNode[]>([]);
 
+    // 当下的布局
+    const currentLayout: Ref<LayoutType> = ref("mindMap");
+
     usePlugins(MindMap);
 
     function initMindMap(container: HTMLElement) {
       mindMapInstance = new MindMap({
         el: container,
         data: mockData.root,
-        // layout: "mindMap",
+        layout: currentLayout.value,
         fit: false,
         nodeTextEditZIndex: 1000,
         nodeNoteTooltipZIndex: 1000,
@@ -41,13 +46,11 @@ export const useMindMapStore = defineStore(
         enableAutoEnterTextEditWhenKeydown: false, // 键盘输入时自动进入文本编辑 // .updateConfig({ 'openRealtimeRenderOnNodeTextEdit' : value})
         createNewNodeBehavior: "activeOnly", // 插入新节点的行为 // activeOnly - 只新建激活不编辑
 
-       
-
         // customQuickCreateChildBtnClick: () => {
         //   console.log("自定义添加按钮点击事件");
         // },
 
-        isUseCustomNodeContent : true, // 是否使用自定义节点内容
+        isUseCustomNodeContent: true, // 是否使用自定义节点内容
         // 添加自定义节点内容
         addCustomContentToNode: getCustomNodeContent({
           allowRemoveWithChildren: false,
@@ -62,11 +65,16 @@ export const useMindMapStore = defineStore(
       mindMapInstance?.on(
         "node_active",
         (_: MindMapNode, activeNodeList: MindMapNode[]) => {
-          console.log("激活节点", activeNodeList);
           activeNodes.value = activeNodeList;
         }
       );
 
+      // 当改变layout 时的回调函数
+      mindMapInstance?.on("layout_change", (layout: LayoutType) => {
+        console.log("布局改变", layout);
+        currentLayout.value = layout;
+      });
+
       // 关闭键盘事件
       removeKeyCommand(mindMapInstance);
     }
@@ -80,13 +88,15 @@ export const useMindMapStore = defineStore(
       mindMapInstance,
       mindMapData,
       activeNodes,
-      getMindMapInstance,
+      currentLayout,
 
+      getMindMapInstance,
       importFile,
       exportFile,
       insertChildNode,
       insertSiblingNode,
       removeNode,
+      useLayout,
 
       // func
       initMindMap,