在激活状态下才能展示操作按钮

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

@@ -1,6 +1,7 @@
 import { insertChildNode } from "./insertChildNode";
 import { insertSiblingNode } from "./insertSiblingNode";
 import { useMindMapStore } from "../index";
+import type MindMapNode from "simple-mind-map/types/src/core/render/node/MindMapNode";
 
 const ICON_PLUS =
   '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM1.5 8a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0zM8 4a.75.75 0 0 1 .75.75V7h2.25a.75.75 0 0 1 0 1.5H8.75v2.25a.75.75 0 0 1-1.5 0V8.5H5a.75.75 0 0 1 0-1.5h2.25V4.75A.75.75 0 0 1 8 4z" clip-rule="evenodd"/></svg>';
@@ -39,13 +40,35 @@ export function getCustomNodeContent() {
     buttons.length * buttonConfig.width +
     (buttons.length - 1) * buttonConfig.gap;
 
+  // 跟踪激活状态和元素，用于更新显示/隐藏
+  const nodeActiveState: Record<string, boolean> = {};
+  const nodeElements: Record<string, HTMLElement> = {};
+
   return {
     // 创建自定义DOM元素
-    create: (node: any) => {
+    create: (node: MindMapNode) => {
       // 创建包含按钮的容器
       const container = document.createElement("div");
       container.style.display = "flex";
       container.style.gap = `${buttonConfig.gap}px`;
+   
+
+      // 默认隐藏按钮组
+      container.style.visibility = "hidden";
+      container.style.opacity = "0";
+      container.style.transition = "opacity 0.2s";
+
+      // 存储容器元素以便后续更新
+      nodeElements[node.uid] = container;
+
+      // 存储节点的激活状态
+      nodeActiveState[node.uid] = node.nodeData.data.isActive || false;
+
+      // 如果节点已激活，显示按钮组
+      if (node.nodeData.data.isActive) {
+        container.style.visibility = "visible";
+        container.style.opacity = "1";
+      }
 
       function createButton(
         icon: string,
@@ -59,7 +82,7 @@ export function getCustomNodeContent() {
 
         // 通用样式
         Object.assign(btn.style, {
-          display : 'flex',
+          display: "flex",
           justifyContent: "center",
           alignItems: "center",
           border: "none",
@@ -70,11 +93,12 @@ export function getCustomNodeContent() {
           fontSize: `${buttonConfig.fontSize}px`,
           width: `${buttonConfig.width}px`,
           height: `${buttonConfig.height}px`,
-          // minWidth: `${buttonConfig.buttonWidth - buttonConfig.padding * 2}px`
         });
 
         btn.onclick = (e) => {
-          e.stopPropagation(); // 阻止事件冒泡
+          e.stopPropagation();
+
+        //   const { getMindMapInstance } = useMindMapStore();
 
           // 根据按钮类型执行不同操作
           switch (action) {
@@ -97,7 +121,7 @@ export function getCustomNodeContent() {
               });
               break;
             case "edit":
-              //   const { getMindMapInstance } = useMindMapStore();
+           
               break;
           }
         };
@@ -116,6 +140,28 @@ export function getCustomNodeContent() {
         container.appendChild(btn);
       });
 
+      // 监听节点激活状态变化
+      const { getMindMapInstance } = useMindMapStore();
+      getMindMapInstance()?.on(
+        "node_active",
+        (activeNode: any, activeNodeList: any[]) => {
+          // 检查当前节点是否在激活列表中
+          const isActive = activeNodeList.some(
+            (activeNode) => activeNode.uid === node.uid
+          );
+
+          // 如果激活状态改变，更新按钮组的可见性
+          if (nodeActiveState[node.uid] !== isActive) {
+            nodeActiveState[node.uid] = isActive;
+            const container = nodeElements[node.uid];
+            if (container) {
+              container.style.visibility = isActive ? "visible" : "hidden";
+              container.style.opacity = isActive ? "1" : "0";
+            }
+          }
+        }
+      );
+
       // 返回容器元素和预计算的尺寸
       return {
         el: container,
@@ -125,14 +171,28 @@ export function getCustomNodeContent() {
     },
 
     // 处理生成的SVG.js的ForeignObject节点实例
-    handle: ({ element, node }: { content: any; element: any; node: any }) => {
+    handle: ({
-      console.log({ element, node });
+      element,
-      // node.height += 34
+      node,
+    }: {
+      content: any;
+      element: any;
+      node: MindMapNode;
+    }) => {
       // 设置自定义内容的位置 - 位于节点下方
       element.attr({
         x: 0, // 水平居中
         y: node.height + 5, // 位于节点下方5px的位置
+        zIndex: 1000, // 确保在节点上方
       });
+
+      // 初始设置按钮组显示状态
+      const isActive = node.nodeData.data.isActive || false;
+      const container = nodeElements[node.uid];
+      if (container) {
+        container.style.visibility = isActive ? "visible" : "hidden";
+        container.style.opacity = isActive ? "1" : "0";
+      }
     },
   };
 }

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

@@ -43,9 +43,9 @@ export const useMindMapStore = defineStore(
 
        
 
-        customQuickCreateChildBtnClick: () => {
+        // customQuickCreateChildBtnClick: () => {
-          console.log("自定义添加按钮点击事件");
+        //   console.log("自定义添加按钮点击事件");
-        },
+        // },
 
         isUseCustomNodeContent : true, // 是否使用自定义节点内容
         // 添加自定义节点内容