diff --git a/frontend/src/pages/Workflow/Definition/Design/index.tsx b/frontend/src/pages/Workflow/Definition/Design/index.tsx index 3bd60e17..aa8590f9 100644 --- a/frontend/src/pages/Workflow/Definition/Design/index.tsx +++ b/frontend/src/pages/Workflow/Definition/Design/index.tsx @@ -192,6 +192,11 @@ const WorkflowDesign: React.FC = () => { minScale: 0.2, maxScale: 2, }, + edgeMovable: true, // 允许边移动 + edgeLabelMovable: true, // 允许边标签移动 + vertexAddable: true, // 允许添加顶点 + vertexMovable: true, // 允许顶点移动 + vertexDeletable: true, // 允许删除顶点 }); // 注册插件 @@ -273,7 +278,7 @@ const WorkflowDesign: React.FC = () => { // 扩展 graph 对象,添加 history 属性 (graph as any).history = history; - // 监听图形变化 + // 监听图形化 graph.on('cell:added', ({cell}) => { const canUndo = history.canUndo(); const canRedo = history.canRedo(); @@ -573,7 +578,7 @@ const WorkflowDesign: React.FC = () => { // 合并节点定义和已保存的配置 const mergedNodeDefinition = { ...nodeDefinition, // 基础定义 - ...savedConfig, // 已保存的配置(从后端加载的) + ...savedConfig, // 已保存的配置(从端加载的) ...node.getProp('graph') || {} // 当前会话中的修改(如果有) }; setSelectedNode(node); @@ -656,10 +661,13 @@ const WorkflowDesign: React.FC = () => { }); // 添加边的右键菜单 - graph.on('edge:contextmenu', ({cell, view, e}) => { + graph.on('edge:contextmenu', ({cell: edge, view, e}) => { e.preventDefault(); graph.cleanSelection(); - graph.select(cell); + graph.select(edge); + + const sourceNode = graph.getCellById(edge.getSourceCellId()); + const isFromGateway = sourceNode.getProp('nodeType') === 'GATEWAY_NODE'; const dropdownContainer = document.createElement('div'); dropdownContainer.style.position = 'absolute'; @@ -687,16 +695,27 @@ const WorkflowDesign: React.FC = () => { }; const items = [ + // 只有网关节点的出线才显示编辑条件选项 + ...(isFromGateway ? [{ + key: 'edit', + label: '编辑条件', + onClick: () => { + closeMenu(); + setSelectedEdge(edge); + setExpressionModalVisible(true); + } + }] : []), { - key: '1', + key: 'delete', label: '删除', + danger: true, onClick: () => { closeMenu(); Modal.confirm({ title: '确认删除', content: '确定要删除该连接线吗?', onOk: () => { - cell.remove(); + edge.remove(); } }); } @@ -835,7 +854,7 @@ const WorkflowDesign: React.FC = () => { ]); }); - // 连线工具移除 + // ���线工具移除 graph.on('edge:unselected', ({edge}) => { edge.removeTools(); }); @@ -872,13 +891,36 @@ const WorkflowDesign: React.FC = () => { }); }); - // 添加边的双击事件 - graph.on('edge:dblclick', ({ edge }) => { - const sourceNode = graph.getCellById(edge.getSourceCellId()); - if (sourceNode.getProp('nodeType') === 'GATEWAY_NODE') { - setSelectedEdge(edge); - setExpressionModalVisible(true); - } + // 边选中时添加编辑工具 + graph.on('edge:selected', ({ edge }) => { + edge.addTools([ + { + name: 'vertices', // 顶点工具 + args: { + padding: 4, + attrs: { + fill: '#fff', + stroke: '#5F95FF', + strokeWidth: 1, + } + } + }, + { + name: 'segments', // 线段工具 + args: { + attrs: { + fill: '#fff', + stroke: '#5F95FF', + strokeWidth: 1, + } + } + } + ]); + }); + + // 边取消选中时移除工具 + graph.on('edge:unselected', ({ edge }) => { + edge.removeTools(); }); }; @@ -927,7 +969,7 @@ const WorkflowDesign: React.FC = () => { setNodeDefinitions(data); setIsNodeDefinitionsLoaded(true); } catch (error) { - console.error('加载节点定义失败:', error); + console.error('加载节点定义���败:', error); message.error('加载节点定义失败'); } };