From 13b20224f0373132e03bd43311a2aba1bdd06000 Mon Sep 17 00:00:00 2001 From: asp_ly Date: Sat, 14 Dec 2024 15:14:35 +0800 Subject: [PATCH] 1 --- .../Workflow/Definition/Design/index.tsx | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/frontend/src/pages/Workflow/Definition/Design/index.tsx b/frontend/src/pages/Workflow/Definition/Design/index.tsx index bd1400e2..75c5629c 100644 --- a/frontend/src/pages/Workflow/Definition/Design/index.tsx +++ b/frontend/src/pages/Workflow/Definition/Design/index.tsx @@ -354,6 +354,69 @@ const WorkflowDesign: React.FC = () => { }; document.addEventListener('click', handleClickOutside); }); + + // 添加边的右键菜单 + graph.on('edge:contextmenu', ({cell, view, e}) => { + e.preventDefault(); + graph.cleanSelection(); + graph.select(cell); + + const dropdownContainer = document.createElement('div'); + dropdownContainer.style.position = 'absolute'; + dropdownContainer.style.left = `${e.clientX}px`; + dropdownContainer.style.top = `${e.clientY}px`; + document.body.appendChild(dropdownContainer); + + const root = createRoot(dropdownContainer); + let isOpen = true; + + const closeMenu = () => { + isOpen = false; + root.render( + { + if (!open) { + setTimeout(() => { + root.unmount(); + document.body.removeChild(dropdownContainer); + }, 100); + } + }}> +
+ + ); + }; + + const items = [ + { + key: '1', + label: '删除', + onClick: () => { + closeMenu(); + Modal.confirm({ + title: '确认删除', + content: '确定要删除该连接线吗?', + onOk: () => { + cell.remove(); + } + }); + } + } + ]; + + root.render( + +
+ + ); + + const handleClickOutside = (e: MouseEvent) => { + if (!dropdownContainer.contains(e.target as Node)) { + closeMenu(); + document.removeEventListener('click', handleClickOutside); + } + }; + document.addEventListener('click', handleClickOutside); + }); }; // 处理复制操作