修改 getCustomNodeContent 逻辑 , 对于子节点的观察应实时获取

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

@@ -33,6 +33,7 @@ export function getCustomNodeContent(
 
   // 所有按钮配置
   const baseButtons = [
+    { icon: ICON_DELETE, color: "#F44336", title: "删除", action: "delete" },
     {
       icon: ICON_PLUS,
       color: "#4CAF50",
@@ -40,7 +41,6 @@ export function getCustomNodeContent(
       action: "addChild",
     },
     { icon: ICON_EDIT, color: "#FF9800", title: "编辑节点", action: "edit" },
-    { icon: ICON_DELETE, color: "#F44336", title: "删除", action: "delete" },
   ];
 
   // 跟踪激活状态和元素，用于更新显示/隐藏
@@ -57,16 +57,8 @@ export function getCustomNodeContent(
 
       container.style.display = "none";
 
-      // 根据节点是否有子节点以及 allowRemoveWithChildren 参数确定显示的按钮
+      const buttons = [...baseButtons];
       
-      const buttons = baseButtons.filter((btn) => {
-        if (btn.action === "delete" && !params.allowRemoveWithChildren) {
-          return node.getChildrenLength() === 0;
-        }
-        return true;
-      });
-
-      // 重新计算总宽度
       const totalWidth =
         buttons.length * buttonConfig.width +
         (buttons.length - 1) * buttonConfig.gap;
@@ -88,6 +80,7 @@ export function getCustomNodeContent(
         const btn = document.createElement("button");
         btn.innerHTML = icon;
         btn.title = title;
+        btn.dataset.action = action; // 添加data属性用于后续识别按钮类型
 
         // 通用样式
         Object.assign(btn.style, {
@@ -137,7 +130,12 @@ export function getCustomNodeContent(
         container.appendChild(btn);
       });
 
-      getMindMapInstance()?.on(
+      const mindMap = getMindMapInstance();
+      
+      // 注册节点激活事件和数据更新事件
+      if (mindMap) {
+        // 节点激活状态变化处理
+        mindMap.on(
           "node_active",
           (_: MindMapNode, activeNodeList: MindMapNode[]) => {
             const isActive = activeNodeList.some(
@@ -148,11 +146,38 @@ export function getCustomNodeContent(
             if (nodeActiveState[node.uid] !== isActive) {
               nodeActiveState[node.uid] = isActive;
               const container = nodeElements[node.uid];
-            if (container) container.style.display = isActive ? "flex" : "none";
+              if (container) {
+                container.style.display = isActive ? "flex" : "none";
+                // 在激活时更新按钮状态
+                if (isActive) updateButtonsVisibility(container, node)
+              }
             }
           }
         );
         
+        // 节点数据变化处理（当添加/删除子节点时）
+        mindMap.on("node_data_change", (changedNode: MindMapNode) => {
+          if (changedNode.uid === node.uid) {
+            const container = nodeElements[node.uid];
+            if (container && nodeActiveState[node.uid]) updateButtonsVisibility(container, node);
+          }
+        });
+      }
+      
+      // 更新按钮的可见性
+      function updateButtonsVisibility(container: HTMLElement, node: MindMapNode) {
+        // 查找删除按钮
+        const deleteBtn = Array.from(container.children).find(
+          (btn) => (btn as HTMLButtonElement).dataset.action === "delete"
+        ) as HTMLButtonElement | undefined;
+        
+        // 只有在不允许删除有子节点的节点时才进行处理
+        if (deleteBtn && !params.allowRemoveWithChildren) {
+          const hasChildren = node.getChildrenLength() > 0;
+          deleteBtn.style.display = hasChildren ? "none" : "flex";
+        }
+      }
+
       // 返回容器元素和预计算的尺寸
       return {
         el: container,
@@ -163,32 +188,6 @@ export function getCustomNodeContent(
 
     // 处理生成的SVG.js的ForeignObject节点实例
     handle: ({ element, node }: { element: any; node: MindMapNode }) => {
-      // 设置自定义内容的位置 - 位于节点下方
-
-      //   const parent = node.parent;
-      //   const siblingNode: MindMapNode[] = parent?.children ?? [];
-
-      // 垂直方向上的的第一个弟节点 // 先用 node.uid 找自己 , 自己位置 + 1 , 可能为 undefined
-      //   const index = siblingNode.findIndex((item) => item.uid === node.uid);
-      //   const nextSiblingNode = siblingNode[index + 1];
-
-      // matrix(1,0,0,1,858,-779)
-      // 使用 node.group.node 与 nextSiblingNode.group.node 的 matrix(1,0,0,1,858,-779) 属性差异来计算 垂直距离
-
-      //   const nodeMatrix = node.group?.node?.transform?.baseVal;
-
-      //   if (nodeMatrix) {
-      //     console.log(`X偏移: ${nodeMatrix.e}, Y偏移: ${nodeMatrix.f}`);
-      //   }
-
-      // console.log("设置自定义内容位置", {element,
-      //     node,parent , siblingNode , nextSiblingNode});
-
-      //   element.attr({
-      //     x: 0, // 水平居中
-      //     y: node.height + 5, // 位于节点下方5px的位置
-      //     zIndex: 1000, // 确保在节点上方
-      //   });
 
       const elementWidth = element.width();
       const nodeWidth = node.width;