1

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 = () => {
             ]);
         });
 
-        // 连线工具移除
+        // <EFBFBD><EFBFBD><EFBFBD>线工具移除
         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('加载节点定义<EFBFBD><EFBFBD><EFBFBD>败:', error);
                 message.error('加载节点定义失败');
             }
         };