From a89f4773abf2ae9b776fb8aa9f14b1608ffa9b05 Mon Sep 17 00:00:00 2001 From: asp_ly Date: Sat, 14 Dec 2024 15:07:22 +0800 Subject: [PATCH] 1 --- .../Workflow/Definition/Design/index.tsx | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/Workflow/Definition/Design/index.tsx b/frontend/src/pages/Workflow/Definition/Design/index.tsx index bbad059e..bd1400e2 100644 --- a/frontend/src/pages/Workflow/Definition/Design/index.tsx +++ b/frontend/src/pages/Workflow/Definition/Design/index.tsx @@ -227,19 +227,46 @@ const WorkflowDesign: React.FC = () => { // 注册事件处理器 const registerEventHandlers = (graph: Graph) => { - // 显示/隐藏连接桩 + // 显示/隐藏连接桩和高亮 graph.on('node:mouseenter', ({node}) => { + // 显示连接桩 const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`); ports.forEach((port) => { port.setAttribute('style', 'visibility: visible'); }); + + // 高亮当前节点 + node.setAttrByPath('body/stroke', '#ff4d4f'); + node.setAttrByPath('body/strokeWidth', 2); }); graph.on('node:mouseleave', ({node}) => { + // 隐藏连接桩 const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`); ports.forEach((port) => { port.setAttribute('style', 'visibility: hidden'); }); + + // 取消高亮（除非是选中状态） + if (!node.hasTools()) { + node.setAttrByPath('body/stroke', '#5B8FF9'); + node.setAttrByPath('body/strokeWidth', 1); + } + }); + + // 节点点击时的高亮 + graph.on('node:click', ({ node }) => { + node.setAttrByPath('body/stroke', '#ff4d4f'); + node.setAttrByPath('body/strokeWidth', 2); + }); + + // 点击空白处取消高亮 + graph.on('blank:click', () => { + const selectedNode = graph.getSelectedCells()[0]; + if (selectedNode && selectedNode.isNode()) { + selectedNode.setAttrByPath('body/stroke', '#5B8FF9'); + selectedNode.setAttrByPath('body/strokeWidth', 1); + } }); // 节点双击事件