diff --git a/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx b/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx index f2eb5b08..e3dfbd21 100644 --- a/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx +++ b/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx @@ -226,6 +226,42 @@ const FlowDesigner: React.FC = ({ }, }); + // 添加拖拽事件处理 + const container = containerRef.current; + container.addEventListener('dragover', (e) => { + e.preventDefault(); + }); + + container.addEventListener('drop', (e) => { + e.preventDefault(); + const nodeTypeData = e.dataTransfer?.getData('nodeType'); + if (!nodeTypeData) return; + + try { + const nodeType = JSON.parse(nodeTypeData); + const { clientX, clientY } = e; + const { left, top } = container.getBoundingClientRect(); + const x = clientX - left; + const y = clientY - top; + + // 创建节点 + const node = graph.addNode({ + shape: nodeType.code, + x, + y, + data: { + type: nodeType.code + } + }); + + // 触发更新 + const updateEvent = new Event('node:moved'); + container.dispatchEvent(updateEvent); + } catch (error) { + console.error('创建节点失败:', error); + } + }); + // 监听事件 if (!readOnly) { let updateTimer: number | null = null; @@ -388,6 +424,9 @@ const FlowDesigner: React.FC = ({ graphRef.current = graph; return () => { + // 清理事件监听 + container.removeEventListener('dragover', (e) => e.preventDefault()); + container.removeEventListener('drop', (e) => e.preventDefault()); graph.dispose(); }; }, [nodeTypes, value, onChange, readOnly]); @@ -414,7 +453,11 @@ const FlowDesigner: React.FC = ({ ))} -
+
); };