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, // 是否使用自定义节点内容
// 添加自定义节点内容