no message

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

@@ -32,7 +32,7 @@ export function getCustomNodeContent() {
       action: "addChild",
     },
     { icon: ICON_EDIT, color: "#FF9800", title: "编辑节点", action: "edit" },
-    { icon: ICON_DELETE, color: "#2196F3", title: "删除", action: "delete" },
+    { icon: ICON_DELETE, color: "#F44336", title: "删除", action: "delete" },
   ];
 
   // 预计算总宽度
@@ -47,23 +47,18 @@ export function getCustomNodeContent() {
   return {
     // 创建自定义DOM元素
     create: (node: MindMapNode) => {
-      // 创建包含按钮的容器
       const container = document.createElement("div");
       container.style.gap = `${buttonConfig.gap}px`;
 
-      // 默认隐藏按钮组 - 使用 display:none 节省DOM资源
       container.style.display = "none";
 
-      // 存储容器元素以便后续更新
       nodeElements[node.uid] = container;
 
       // 存储节点的激活状态
       nodeActiveState[node.uid] = node.nodeData.data.isActive || false;
 
       // 如果节点已激活，显示按钮组
-      if (node.nodeData.data.isActive) {
-        container.style.display = "flex";
-      }
+      if (node.nodeData.data.isActive) container.style.display = "flex";
 
       function createButton(
         icon: string,
@@ -117,7 +112,7 @@ export function getCustomNodeContent() {
               break;
             case "edit":
               // 获取实例并编辑当前节点
-             
+
               break;
           }
         };
@@ -142,7 +137,6 @@ export function getCustomNodeContent() {
       getMindMapInstance()?.on(
         "node_active",
         (_: MindMapNode, activeNodeList: MindMapNode[]) => {
-
           const isActive = activeNodeList.some(
             (activeNode) => activeNode.uid === node.uid
           );
@@ -159,30 +153,47 @@ export function getCustomNodeContent() {
       // 返回容器元素和预计算的尺寸
       return {
         el: container,
-        width: totalWidth, 
-        height: buttonConfig.height, 
+        width: totalWidth,
+        height: buttonConfig.height,
       };
     },
 
     // 处理生成的SVG.js的ForeignObject节点实例
-    handle: ({
-      element,
-      node,
-    }: {
-      element: any;
-      node: MindMapNode;
-    }) => {
+    handle: ({ element, node }: { 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.display = isActive ? "flex" : "none";
+      //   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;
+
+      if (elementWidth > nodeWidth) {
+        //        
+      }
+    
     },
   };
 }