diff --git a/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts b/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts index a2c7883f..3c064e41 100644 --- a/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts +++ b/web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts @@ -1,6 +1,7 @@ import { insertChildNode } from "./insertChildNode"; import { insertSiblingNode } from "./insertSiblingNode"; import { useMindMapStore } from "../index"; +import type MindMapNode from "simple-mind-map/types/src/core/render/node/MindMapNode"; const ICON_PLUS = ''; @@ -39,13 +40,35 @@ export function getCustomNodeContent() { buttons.length * buttonConfig.width + (buttons.length - 1) * buttonConfig.gap; + // 跟踪激活状态和元素,用于更新显示/隐藏 + const nodeActiveState: Record = {}; + const nodeElements: Record = {}; + return { // 创建自定义DOM元素 - create: (node: any) => { + create: (node: MindMapNode) => { // 创建包含按钮的容器 const container = document.createElement("div"); container.style.display = "flex"; container.style.gap = `${buttonConfig.gap}px`; + + + // 默认隐藏按钮组 + container.style.visibility = "hidden"; + container.style.opacity = "0"; + container.style.transition = "opacity 0.2s"; + + // 存储容器元素以便后续更新 + nodeElements[node.uid] = container; + + // 存储节点的激活状态 + nodeActiveState[node.uid] = node.nodeData.data.isActive || false; + + // 如果节点已激活,显示按钮组 + if (node.nodeData.data.isActive) { + container.style.visibility = "visible"; + container.style.opacity = "1"; + } function createButton( icon: string, @@ -59,7 +82,7 @@ export function getCustomNodeContent() { // 通用样式 Object.assign(btn.style, { - display : 'flex', + display: "flex", justifyContent: "center", alignItems: "center", border: "none", @@ -70,11 +93,12 @@ export function getCustomNodeContent() { fontSize: `${buttonConfig.fontSize}px`, width: `${buttonConfig.width}px`, height: `${buttonConfig.height}px`, - // minWidth: `${buttonConfig.buttonWidth - buttonConfig.padding * 2}px` }); btn.onclick = (e) => { - e.stopPropagation(); // 阻止事件冒泡 + e.stopPropagation(); + + // const { getMindMapInstance } = useMindMapStore(); // 根据按钮类型执行不同操作 switch (action) { @@ -97,7 +121,7 @@ export function getCustomNodeContent() { }); break; case "edit": - // const { getMindMapInstance } = useMindMapStore(); + break; } }; @@ -116,6 +140,28 @@ export function getCustomNodeContent() { container.appendChild(btn); }); + // 监听节点激活状态变化 + const { getMindMapInstance } = useMindMapStore(); + getMindMapInstance()?.on( + "node_active", + (activeNode: any, activeNodeList: any[]) => { + // 检查当前节点是否在激活列表中 + const isActive = activeNodeList.some( + (activeNode) => activeNode.uid === node.uid + ); + + // 如果激活状态改变,更新按钮组的可见性 + if (nodeActiveState[node.uid] !== isActive) { + nodeActiveState[node.uid] = isActive; + const container = nodeElements[node.uid]; + if (container) { + container.style.visibility = isActive ? "visible" : "hidden"; + container.style.opacity = isActive ? "1" : "0"; + } + } + } + ); + // 返回容器元素和预计算的尺寸 return { el: container, @@ -125,14 +171,28 @@ export function getCustomNodeContent() { }, // 处理生成的SVG.js的ForeignObject节点实例 - handle: ({ element, node }: { content: any; element: any; node: any }) => { - console.log({ element, node }); - // node.height += 34 + handle: ({ + element, + node, + }: { + content: any; + 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.visibility = isActive ? "visible" : "hidden"; + container.style.opacity = isActive ? "1" : "0"; + } }, }; } diff --git a/web3/packages/mind-map/src/store/modules/mindMap.ts b/web3/packages/mind-map/src/store/modules/mindMap.ts index 9c0e6b5b..047acf4d 100644 --- a/web3/packages/mind-map/src/store/modules/mindMap.ts +++ b/web3/packages/mind-map/src/store/modules/mindMap.ts @@ -43,9 +43,9 @@ export const useMindMapStore = defineStore( - customQuickCreateChildBtnClick: () => { - console.log("自定义添加按钮点击事件"); - }, + // customQuickCreateChildBtnClick: () => { + // console.log("自定义添加按钮点击事件"); + // }, isUseCustomNodeContent : true, // 是否使用自定义节点内容 // 添加自定义节点内容