callbacks

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

@@ -1,7 +1,9 @@
 <!-- 布局 -->
 <template>
   <div>
+    {{ currentLayout }}
     <select
+      v-model="currentLayout"
       @change="
         (e) => {
          const target = e?.target as HTMLSelectElement;
@@ -33,7 +35,7 @@ import { storeToRefs } from "pinia";
 // 使用单一store实例
 const store = useMindMapStore();
 const { useLayout } = store;
-// const { currentLayout } = storeToRefs(store);
+const { currentLayout } = storeToRefs(store);
 
 
 onMounted(() => {

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

@@ -17,7 +17,22 @@ import type MindMapNode from "simple-mind-map/types/src/core/render/node/MindMap
 
 import MindMap from "simple-mind-map";
 
-export const useMindMapStore = defineStore(
+// 定义节点回调类型
+type NodeCallback = (node: MindMapNode) => void;
+
+// 定义回调参数接口
+export interface MindMapCallbacks {
+  onDel?: NodeCallback;
+  onAddChild?: NodeCallback; 
+  onEdit?: NodeCallback;
+}
+
+// store 实例缓存
+let storeInstance: ReturnType<typeof defineStoreImplementation> | null = null;
+
+// 实际的 store 定义函数
+function defineStoreImplementation() {
+  return defineStore(
     "mindMapStore",
     () => {
       let mindMapInstance: MindMap | null = null;
@@ -30,9 +45,17 @@ export const useMindMapStore = defineStore(
       // 当下的布局
       const currentLayout: Ref<LayoutType> = ref("mindMap");
       
+      // 存储回调函数 - 每种类型只保存一个回调
+      const callbacks = {
+        del: null as NodeCallback | null,
+        addChild: null as NodeCallback | null,
+        edit: null as NodeCallback | null
+      };
+
       usePlugins(MindMap);
 
-    function initMindMap(container: HTMLElement) {
+      function initMindMap(container: HTMLElement,) {
+
         mindMapInstance = new MindMap({
           el: container,
           data: mockData.root,
@@ -42,26 +65,24 @@ export const useMindMapStore = defineStore(
           nodeNoteTooltipZIndex: 1000,
           openRealtimeRenderOnNodeTextEdit: true,
 
+          beforeTextEdit: () => false , // 禁止双击进编辑
+
           isShowCreateChildBtnIcon: false, // 是否显示添加子节点按钮
           enableAutoEnterTextEditWhenKeydown: false, // 键盘输入时自动进入文本编辑 // .updateConfig({ 'openRealtimeRenderOnNodeTextEdit' : value})
           createNewNodeBehavior: "activeOnly", // 插入新节点的行为 // activeOnly - 只新建激活不编辑
 
-        // customQuickCreateChildBtnClick: () => {
-        //   console.log("自定义添加按钮点击事件");
-        // },
-
           isUseCustomNodeContent: true, // 是否使用自定义节点内容
           // 添加自定义节点内容
           addCustomContentToNode: getCustomNodeContent({
             allowRemoveWithChildren: false,
-          del : (node: MindMapNode) => {
-            console.log("删除节点", node);
+            del: (node: MindMapNode) => {
+              if (callbacks.del) callbacks.del(node);
             },
             addChild: (node: MindMapNode) => {
-            console.log("添加子节点", node);
+              if (callbacks.addChild) callbacks.addChild(node);
             },
             edit: (node: MindMapNode) => {
-            console.log("编辑节点", node);
+              if (callbacks.edit) callbacks.edit(node);
             }
           }),
 
@@ -80,19 +101,16 @@ export const useMindMapStore = defineStore(
 
         // 当改变layout 时的回调函数
         mindMapInstance?.on("layout_change", (layout: LayoutType) => {
-        console.log("布局改变", layout);
           currentLayout.value = layout;
         });
 
         // 当双击时
-      mindMapInstance?.on("node_dblclick", (node: MindMapNode) => {
-        console.log("双击节点", node);
+        mindMapInstance?.on("node_dblclick", (_: MindMapNode) => {
           return async () => false;
         });
 
-      // node_click
-      mindMapInstance?.on("node_click", (node: MindMapNode) => {
-        console.log("点击节点", node);
+        // 当点击节点时
+        mindMapInstance?.on("node_click", (_: MindMapNode) => {
           return async () => false;
         });
 
@@ -100,13 +118,28 @@ export const useMindMapStore = defineStore(
         removeKeyCommand(mindMapInstance);
       }
       
+      // 配置回调的方法
+      function setCallbacks(options: MindMapCallbacks) {
+        if (options.onDel) {
+          callbacks.del = options.onDel;
+        }
+        
+        if (options.onAddChild) {
+          callbacks.addChild = options.onAddChild;
+        }
+        
+        if (options.onEdit) {
+          callbacks.edit = options.onEdit;
+        }
+      }
+
       // 因为避免使用响应对象
       function getMindMapInstance(): MindMap | null {
         return mindMapInstance;
       }
 
       return {
-      mindMapInstance,
+        // mindMapInstance,
         mindMapData,
         activeNodes,
         currentLayout,
@@ -119,6 +152,9 @@ export const useMindMapStore = defineStore(
         removeNode,
         useLayout,
         
+        // 配置回调的方法
+        setCallbacks,
+
         // func
         initMindMap,
       };
@@ -129,4 +165,20 @@ export const useMindMapStore = defineStore(
         storage: window.localStorage,
       },
     }
-);
+  );
+}
+
+// 导出带有参数的 useMindMapStore 函数
+export function useMindMapStore(options?: MindMapCallbacks) {
+  if (!storeInstance) {
+    storeInstance = defineStoreImplementation();
+  }
+  
+  const store = storeInstance();
+  
+  if (options) {
+    store.setCallbacks(options);
+  }
+  
+  return store;
+}

web3/packages/mind-map/src/views/index.vue

@@ -3,7 +3,7 @@
     <!-- 操作拦 -->
     <ToolBar />
     <div
-      class="w-full h-full mindMapContainer "
+      class="w-full h-full mindMapContainer"
       id="mindMapContainer"
       ref="mindMapContainer"
     />
@@ -15,11 +15,25 @@ import { onMounted, ref } from "vue";
 import ToolBar from "../components/ToolBar.vue";
 
 import { useMindMapStore } from "../store/index";
+import type MindMapNode from "simple-mind-map/types/src/core/render/node/MindMapNode";
 
-const { initMindMap } = useMindMapStore();
+const store = useMindMapStore({
+  onDel: (node: MindMapNode) => {
+    console.log("【Store回调】节点被删除了", node);
+  },
+  onAddChild: (node: MindMapNode) => {
+    console.log("【Store回调】添加了子节点到", node);
+  },
+  onEdit: (node: MindMapNode) => {
+    console.log("【Store回调】编辑节点", node);
+  },
+});
+
+const { initMindMap } = store;
 
 const mindMapContainer = ref(null);
 
+// 在组件挂载时初始化思维导图
 onMounted(async () => {
     mindMapContainer.value && initMindMap(mindMapContainer.value);
 });