openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
KuroSago 2025-05-12 15:29:23 +08:00
parent 1db799b52c
commit b5bb540036
1 changed files with 48 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;