diff --git a/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts b/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts index 9cddf9d4..0326a65c 100644 --- a/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts +++ b/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) { + // + } + }, }; }