From b5bb5400369ea3c2435b2d10ca5ca6e90308d9c5 Mon Sep 17 00:00:00 2001
From: KuroSago <kurosago@outlook.com>
Date: Mon, 12 May 2025 15:29:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20getCustomNodeContent=20?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=20,=20=E5=AF=B9=E4=BA=8E=E5=AD=90=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E7=9A=84=E8=A7=82=E5=AF=9F=E5=BA=94=E5=AE=9E=E6=97=B6?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../store/helpers/addCustomContentToNode.ts   | 97 +++++++++----------
 1 file changed, 48 insertions(+), 49 deletions(-)

diff --git a/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts b/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts
index b726063b..fdfb71c2 100644
--- a/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts
+++ b/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.filter((btn) => {
-        if (btn.action === "delete" && !params.allowRemoveWithChildren) {
-          return node.getChildrenLength() === 0;
-        }
-        return true;
-      });
-
-      // 重新计算总宽度
+      const buttons = [...baseButtons];
+      
       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,21 +130,53 @@ export function getCustomNodeContent(
         container.appendChild(btn);
       });
 
-      getMindMapInstance()?.on(
-        "node_active",
-        (_: MindMapNode, activeNodeList: MindMapNode[]) => {
-          const isActive = activeNodeList.some(
-            (activeNode) => activeNode.uid === node.uid
-          );
+      const mindMap = getMindMapInstance();
+      
+      // 注册节点激活事件和数据更新事件
+      if (mindMap) {
+        // 节点激活状态变化处理
+        mindMap.on(
+          "node_active",
+          (_: MindMapNode, activeNodeList: MindMapNode[]) => {
+            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.display = isActive ? "flex" : "none";
+            // 如果激活状态改变，更新按钮组的可见性
+            if (nodeActiveState[node.uid] !== isActive) {
+              nodeActiveState[node.uid] = isActive;
+              const container = nodeElements[node.uid];
+              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 {
@@ -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;