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,116 +17,168 @@ import type MindMapNode from "simple-mind-map/types/src/core/render/node/MindMap
 
 import MindMap from "simple-mind-map";
 
-export const useMindMapStore = defineStore(
+// 定义节点回调类型
-  "mindMapStore",
+type NodeCallback = (node: MindMapNode) => void;
-  () => {
-    let mindMapInstance: MindMap | null = null;
 
-    const mindMapData = ref(null);
+// 定义回调参数接口
+export interface MindMapCallbacks {
+  onDel?: NodeCallback;
+  onAddChild?: NodeCallback; 
+  onEdit?: NodeCallback;
+}
 
-    // 激活状态节点
+// store 实例缓存
-    const activeNodes = shallowRef<MindMapNode[]>([]);
+let storeInstance: ReturnType<typeof defineStoreImplementation> | null = null;
 
-    // 当下的布局
+// 实际的 store 定义函数
-    const currentLayout: Ref<LayoutType> = ref("mindMap");
+function defineStoreImplementation() {
+  return defineStore(
+    "mindMapStore",
+    () => {
+      let mindMapInstance: MindMap | null = null;
 
-    usePlugins(MindMap);
+      const mindMapData = ref(null);
 
-    function initMindMap(container: HTMLElement) {
+      // 激活状态节点
-      mindMapInstance = new MindMap({
+      const activeNodes = shallowRef<MindMapNode[]>([]);
-        el: container,
-        data: mockData.root,
-        layout: currentLayout.value,
-        fit: false,
-        nodeTextEditZIndex: 1000,
-        nodeNoteTooltipZIndex: 1000,
-        openRealtimeRenderOnNodeTextEdit: true,
 
-        isShowCreateChildBtnIcon: false, // 是否显示添加子节点按钮
+      // 当下的布局
-        enableAutoEnterTextEditWhenKeydown: false, // 键盘输入时自动进入文本编辑 // .updateConfig({ 'openRealtimeRenderOnNodeTextEdit' : value})
+      const currentLayout: Ref<LayoutType> = ref("mindMap");
-        createNewNodeBehavior: "activeOnly", // 插入新节点的行为 // activeOnly - 只新建激活不编辑
+      
+      // 存储回调函数 - 每种类型只保存一个回调
+      const callbacks = {
+        del: null as NodeCallback | null,
+        addChild: null as NodeCallback | null,
+        edit: null as NodeCallback | null
+      };
 
-        // customQuickCreateChildBtnClick: () => {
+      usePlugins(MindMap);
-        //   console.log("自定义添加按钮点击事件");
-        // },
 
-        isUseCustomNodeContent: true, // 是否使用自定义节点内容
+      function initMindMap(container: HTMLElement,) {
-        // 添加自定义节点内容
+
-        addCustomContentToNode: getCustomNodeContent({
+        mindMapInstance = new MindMap({
-          allowRemoveWithChildren: false,
+          el: container,
-          del : (node: MindMapNode) => {
+          data: mockData.root,
-            console.log("删除节点", node);
+          layout: currentLayout.value,
+          fit: false,
+          nodeTextEditZIndex: 1000,
+          nodeNoteTooltipZIndex: 1000,
+          openRealtimeRenderOnNodeTextEdit: true,
+
+          beforeTextEdit: () => false , // 禁止双击进编辑
+
+          isShowCreateChildBtnIcon: false, // 是否显示添加子节点按钮
+          enableAutoEnterTextEditWhenKeydown: false, // 键盘输入时自动进入文本编辑 // .updateConfig({ 'openRealtimeRenderOnNodeTextEdit' : value})
+          createNewNodeBehavior: "activeOnly", // 插入新节点的行为 // activeOnly - 只新建激活不编辑
+
+          isUseCustomNodeContent: true, // 是否使用自定义节点内容
+          // 添加自定义节点内容
+          addCustomContentToNode: getCustomNodeContent({
+            allowRemoveWithChildren: false,
+            del: (node: MindMapNode) => {
+              if (callbacks.del) callbacks.del(node);
+            },
+            addChild: (node: MindMapNode) => {
+              if (callbacks.addChild) callbacks.addChild(node);
+            },
+            edit: (node: MindMapNode) => {
+              if (callbacks.edit) callbacks.edit(node);
+            }
+          }),
+
+          demonstrateConfig: {
+            openBlankMode: true,
           },
-          addChild: (node: MindMapNode) => {
+        });
-            console.log("添加子节点", node);
+
-          },
+        // 监听节点激活事件
-          edit: (node: MindMapNode) => {
+        mindMapInstance?.on(
-            console.log("编辑节点", node);
+          "node_active",
+          (_: MindMapNode, activeNodeList: MindMapNode[]) => {
+            activeNodes.value = activeNodeList;
           }
-        }),
+        );
 
-        demonstrateConfig: {
+        // 当改变layout 时的回调函数
-          openBlankMode: true,
+        mindMapInstance?.on("layout_change", (layout: LayoutType) => {
-        },
+          currentLayout.value = layout;
-      });
+        });
 
-      // 监听节点激活事件
+        // 当双击时
-      mindMapInstance?.on(
+        mindMapInstance?.on("node_dblclick", (_: MindMapNode) => {
-        "node_active",
+          return async () => false;
-        (_: MindMapNode, activeNodeList: MindMapNode[]) => {
+        });
-          activeNodes.value = activeNodeList;
+
+        // 当点击节点时
+        mindMapInstance?.on("node_click", (_: MindMapNode) => {
+          return async () => false;
+        });
+
+        // 关闭键盘事件
+        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;
+        }
+      }
 
-      // 当改变layout 时的回调函数
+      // 因为避免使用响应对象
-      mindMapInstance?.on("layout_change", (layout: LayoutType) => {
+      function getMindMapInstance(): MindMap | null {
-        console.log("布局改变", layout);
+        return mindMapInstance;
-        currentLayout.value = layout;
+      }
-      });
 
-      // 当双击时
+      return {
-      mindMapInstance?.on("node_dblclick", (node: MindMapNode) => {
+        // mindMapInstance,
-        console.log("双击节点", node);
+        mindMapData,
-        return async () => false;
+        activeNodes,
-      });
+        currentLayout,
 
-      // node_click
+        getMindMapInstance,
-      mindMapInstance?.on("node_click", (node: MindMapNode) => {
+        importFile,
-        console.log("点击节点", node);
+        exportFile,
-        return async () => false;
+        insertChildNode,
-      });
+        insertSiblingNode,
+        removeNode,
+        useLayout,
+        
+        // 配置回调的方法
+        setCallbacks,
 
-      // 关闭键盘事件
+        // func
-      removeKeyCommand(mindMapInstance);
+        initMindMap,
-    }
+      };
-
-    // 因为避免使用响应对象
-    function getMindMapInstance(): MindMap | null {
-      return mindMapInstance;
-    }
-
-    return {
-      mindMapInstance,
-      mindMapData,
-      activeNodes,
-      currentLayout,
-
-      getMindMapInstance,
-      importFile,
-      exportFile,
-      insertChildNode,
-      insertSiblingNode,
-      removeNode,
-      useLayout,
-
-      // func
-      initMindMap,
-    };
-  },
-  {
-    // 持久化配置
-    persist: {
-      storage: window.localStorage,
     },
+    {
+      // 持久化配置
+      persist: {
+        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,12 +15,26 @@ 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);
+    mindMapContainer.value && initMindMap(mindMapContainer.value);
 });
 </script>