From afc9146785a7e68f286b252b20051b30538e3e5d Mon Sep 17 00:00:00 2001 From: KuroSago Date: Thu, 8 May 2025 16:31:42 +0800 Subject: [PATCH] no message --- .../store/helpers/addCustomContentToNode.ts | 40 ++++++++++++------- .../mind-map/src/store/modules/mindMap.ts | 4 +- 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts b/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts index 0326a65c..1104d68a 100644 --- a/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts +++ b/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts @@ -12,9 +12,16 @@ const ICON_DELETE = /** * 为节点添加自定义内容 - 添加按钮工具栏 + * @param allowRemoveWithChildren 是否允许删除有子节点的节点,默认为false * @returns 自定义节点内容配置对象 */ -export function getCustomNodeContent() { +export function getCustomNodeContent( + params: { + allowRemoveWithChildren?: boolean; + } = { + allowRemoveWithChildren: false, + } +) { // 按钮配置 const buttonConfig = { gap: 4, // 按钮间距 @@ -24,7 +31,7 @@ export function getCustomNodeContent() { }; // 所有按钮配置 - const buttons = [ + const baseButtons = [ { icon: ICON_PLUS, color: "#4CAF50", @@ -35,11 +42,6 @@ export function getCustomNodeContent() { { icon: ICON_DELETE, color: "#F44336", title: "删除", action: "delete" }, ]; - // 预计算总宽度 - const totalWidth = - buttons.length * buttonConfig.width + - (buttons.length - 1) * buttonConfig.gap; - // 跟踪激活状态和元素,用于更新显示/隐藏 const nodeActiveState: Record = {}; const nodeElements: Record = {}; @@ -47,11 +49,27 @@ export function getCustomNodeContent() { return { // 创建自定义DOM元素 create: (node: MindMapNode) => { + const { getMindMapInstance } = useMindMapStore(); + const container = document.createElement("div"); container.style.gap = `${buttonConfig.gap}px`; container.style.display = "none"; + // 根据节点是否有子节点以及 allowRemoveWithChildren 参数确定显示的按钮 + + 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; + nodeElements[node.uid] = container; // 存储节点的激活状态 @@ -88,8 +106,6 @@ export function getCustomNodeContent() { btn.onclick = (e) => { e.stopPropagation(); - const { getMindMapInstance } = useMindMapStore(); - // 根据按钮类型执行不同操作 switch (action) { case "addChild": @@ -131,9 +147,6 @@ export function getCustomNodeContent() { container.appendChild(btn); }); - // 监听节点激活状态变化 - const { getMindMapInstance } = useMindMapStore(); - getMindMapInstance()?.on( "node_active", (_: MindMapNode, activeNodeList: MindMapNode[]) => { @@ -191,9 +204,8 @@ export function getCustomNodeContent() { const nodeWidth = node.width; if (elementWidth > nodeWidth) { - // + // } - }, }; } diff --git a/web3/packages/mind-map/src/store/modules/mindMap.ts b/web3/packages/mind-map/src/store/modules/mindMap.ts index 047acf4d..99a841a9 100644 --- a/web3/packages/mind-map/src/store/modules/mindMap.ts +++ b/web3/packages/mind-map/src/store/modules/mindMap.ts @@ -49,7 +49,9 @@ export const useMindMapStore = defineStore( isUseCustomNodeContent : true, // 是否使用自定义节点内容 // 添加自定义节点内容 - addCustomContentToNode: getCustomNodeContent(), + addCustomContentToNode: getCustomNodeContent({ + allowRemoveWithChildren: false, + }), demonstrateConfig: { openBlankMode: true,