优化 getCustomNodeContent
This commit is contained in:
parent
b5bb540036
commit
3da1407bb4
@ -1,5 +1,6 @@
|
|||||||
import { useMindMapStore } from "../index";
|
import { useMindMapStore } from "../index";
|
||||||
import type MindMapNode from "simple-mind-map/types/src/core/render/node/MindMapNode";
|
import type MindMapNode from "simple-mind-map/types/src/core/render/node/MindMapNode";
|
||||||
|
import { throttle, asyncRun } from 'simple-mind-map/src/utils';
|
||||||
|
|
||||||
const ICON_PLUS =
|
const ICON_PLUS =
|
||||||
'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM1.5 8a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0zM8 4a.75.75 0 0 1 .75.75V7h2.25a.75.75 0 0 1 0 1.5H8.75v2.25a.75.75 0 0 1-1.5 0V8.5H5a.75.75 0 0 1 0-1.5h2.25V4.75A.75.75 0 0 1 8 4z" clip-rule="evenodd"/></svg>';
|
'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM1.5 8a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0zM8 4a.75.75 0 0 1 .75.75V7h2.25a.75.75 0 0 1 0 1.5H8.75v2.25a.75.75 0 0 1-1.5 0V8.5H5a.75.75 0 0 1 0-1.5h2.25V4.75A.75.75 0 0 1 8 4z" clip-rule="evenodd"/></svg>';
|
||||||
@ -20,8 +21,8 @@ export function getCustomNodeContent(
|
|||||||
addChild?: (node: MindMapNode) => void;
|
addChild?: (node: MindMapNode) => void;
|
||||||
edit?: (node: MindMapNode) => void;
|
edit?: (node: MindMapNode) => void;
|
||||||
} = {
|
} = {
|
||||||
allowRemoveWithChildren: false,
|
allowRemoveWithChildren: false,
|
||||||
}
|
}
|
||||||
) {
|
) {
|
||||||
// 按钮配置
|
// 按钮配置
|
||||||
const buttonConfig = {
|
const buttonConfig = {
|
||||||
@ -58,7 +59,7 @@ export function getCustomNodeContent(
|
|||||||
container.style.display = "none";
|
container.style.display = "none";
|
||||||
|
|
||||||
const buttons = [...baseButtons];
|
const buttons = [...baseButtons];
|
||||||
|
|
||||||
const totalWidth =
|
const totalWidth =
|
||||||
buttons.length * buttonConfig.width +
|
buttons.length * buttonConfig.width +
|
||||||
(buttons.length - 1) * buttonConfig.gap;
|
(buttons.length - 1) * buttonConfig.gap;
|
||||||
@ -131,46 +132,46 @@ export function getCustomNodeContent(
|
|||||||
});
|
});
|
||||||
|
|
||||||
const mindMap = getMindMapInstance();
|
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;
|
mindMap && mindMap.on(
|
||||||
const container = nodeElements[node.uid];
|
"node_active",
|
||||||
if (container) {
|
throttle((_: MindMapNode, activeNodeList: MindMapNode[]) => {
|
||||||
container.style.display = isActive ? "flex" : "none";
|
const isActive = activeNodeList.some(
|
||||||
// 在激活时更新按钮状态
|
(activeNode) => activeNode.uid === node.uid
|
||||||
if (isActive) updateButtonsVisibility(container, node)
|
);
|
||||||
}
|
|
||||||
|
// 如果激活状态改变,更新按钮组的可见性
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
}, 90, null)
|
||||||
|
);
|
||||||
// 节点数据变化处理(当添加/删除子节点时)
|
|
||||||
mindMap.on("node_data_change", (changedNode: MindMapNode) => {
|
// 节点数据变化处理(当添加/删除子节点时)
|
||||||
if (changedNode.uid === node.uid) {
|
mindMap && mindMap.on("node_data_change", throttle((changedNode: MindMapNode) => {
|
||||||
const container = nodeElements[node.uid];
|
if (changedNode.uid === node.uid) {
|
||||||
if (container && nodeActiveState[node.uid]) updateButtonsVisibility(container, node);
|
const container = nodeElements[node.uid];
|
||||||
|
if (container && nodeActiveState[node.uid]) {
|
||||||
|
asyncRun(() => updateButtonsVisibility(container, node));
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
}
|
}, 90, null));
|
||||||
|
|
||||||
// 更新按钮的可见性
|
// 更新按钮的可见性
|
||||||
function updateButtonsVisibility(container: HTMLElement, node: MindMapNode) {
|
function updateButtonsVisibility(container: HTMLElement, node: MindMapNode) {
|
||||||
// 查找删除按钮
|
// 查找删除按钮
|
||||||
const deleteBtn = Array.from(container.children).find(
|
const deleteBtn = Array.from(container.children).find(
|
||||||
(btn) => (btn as HTMLButtonElement).dataset.action === "delete"
|
(btn) => (btn as HTMLButtonElement).dataset.action === "delete"
|
||||||
) as HTMLButtonElement | undefined;
|
) as HTMLButtonElement | undefined;
|
||||||
|
|
||||||
// 只有在不允许删除有子节点的节点时才进行处理
|
// 只有在不允许删除有子节点的节点时才进行处理
|
||||||
if (deleteBtn && !params.allowRemoveWithChildren) {
|
if (deleteBtn && !params.allowRemoveWithChildren) {
|
||||||
const hasChildren = node.getChildrenLength() > 0;
|
const hasChildren = node.getChildrenLength() > 0;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user