fix: 流水线添加4个锚点 & 去掉流水线详情的地址栏的name && 修改新建流水线的bug

react-ui/src/pages/Experiment/index.jsx

@@ -198,7 +198,7 @@ function Experiment() {
   };
   const routeToEdit = (e, record) => {
     e.stopPropagation();
-    navgite({ pathname: `/pipeline/template/${record.workflow_id}/${record.workflow_name}` });
+    navgite({ pathname: `/pipeline/template/${record.workflow_id}` });
   };
   // 创建或者编辑实验接口请求
   const handleAddExperiment = async (values) => {

react-ui/src/pages/Experiment/training/index.jsx

@@ -80,9 +80,11 @@ function ExperimentText() {
         getAnchorPoints(cfg) {
           return (
             cfg.anchorPoints || [
-              // 上下各3，左右各1
+              // 四个，上下左右
               [0.5, 0],
               [0.5, 1],
+              [0, 0.5],
+              [1, 0.5],
             ]
           );
         },
@@ -108,6 +110,7 @@ function ExperimentText() {
                 textAlign: 'left',
                 textBaseline: 'middle',
                 fill: '#000',
+                cursor: 'pointer',
               },
               name: 'text-shape',
               draggable: true,
@@ -200,7 +203,7 @@ function ExperimentText() {
       },
       defaultEdge: {
         // type: 'quadratic',
-        type: 'cubic-vertical',
+        // type: 'cubic-vertical',
 
         style: {
           endArrow: {

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -27,7 +27,8 @@ const EditPipeline = () => {
   const [paramsDrawerOpen, openParamsDrawer, closeParamsDrawer] = useVisible(false);
   const [globalParam, setGlobalParam, globalParamRef] = useStateRef([]);
   const { message } = App.useApp();
-  let sourceAnchorIdx, targetAnchorIdx;
+  let sourceAnchorIdx, targetAnchorIdx, dropAnchorIdx;
+  let sourceNode;
 
   useEffect(() => {
     initMenu();
@@ -35,9 +36,8 @@ const EditPipeline = () => {
   }, []);
 
   const onDragEnd = (val) => {
-    const _x = val.x;
-    const _y = val.y;
-    const point = graph.getPointByClient(_x, _y);
+    const { x, y } = val;
+    const point = graph.getPointByClient(x, y);
     // 元模型
     const model = {
       ...val,
@@ -47,7 +47,7 @@ const EditPipeline = () => {
       isCluster: false,
     };
     // console.log('model', model);
-    graph.addItem('node', model, true);
+    graph.addItem('node', model, false);
   };
   const formChange = (val) => {
     if (graph) {
@@ -122,7 +122,6 @@ const EditPipeline = () => {
       }, 500);
     }
   };
-
   const processParallelEdgesOnAnchorPoint = (
     edges,
     offsetDiff = 15,
@@ -234,6 +233,15 @@ const EditPipeline = () => {
     }
     return edges;
   };
+  // 判断两个节点之间是否有边
+  const hasEdge = (source, target) => {
+    const neighbors = source.getNeighbors();
+    for (const node of neighbors) {
+      // 新建边的时候，获取的 neighbors 的数据有问题，不全是 INode 类型，可能没有 getID 方法
+      if (node.getID?.() === target.getID?.()) return true;
+    }
+    return false;
+  };
   const cloneElement = (item) => {
     console.log(item);
     let data = graph.save();
@@ -319,11 +327,11 @@ const EditPipeline = () => {
         getAnchorPoints(cfg) {
           return (
             cfg.anchorPoints || [
-              // 四个
+              // 四个，上下左右
               [0.5, 0],
               [0.5, 1],
-              // [0, 0.5],
-              // [1, 0.5],
+              [0, 0.5],
+              [1, 0.5],
             ]
           );
         },
@@ -349,6 +357,7 @@ const EditPipeline = () => {
                 textAlign: 'left',
                 textBaseline: 'middle',
                 fill: '#000',
+                cursor: 'pointer',
               },
               name: 'text-shape',
               draggable: true,
@@ -385,10 +394,9 @@ const EditPipeline = () => {
           //   if (value || point.get('links') > 0) point.show();
           //   else point.hide();
           // });
-
           const group = item.getContainer();
           const shape = group.get('children')[0];
-          const anchorPoints = group.findAll((ele) => ele.get('name') === 'anchor-point');
+          const anchorPoints = group.findAll((item) => item.get('name') === 'anchor-point');
           if (name === 'hover') {
             if (value) {
               shape.attr('stroke', themes['primaryColor']);
@@ -401,6 +409,24 @@ const EditPipeline = () => {
                 point.hide();
               });
             }
+          } else if (name === 'drag') {
+            if (sourceAnchorIdx === null || sourceAnchorIdx === undefined) {
+              return;
+            }
+            const anchorPoint = anchorPoints[sourceAnchorIdx];
+            anchorPoint.attr('stroke', value ? themes['primaryColor'] : '#a4a4a5');
+          } else if (name === 'drop') {
+            if (dropAnchorIdx === null || dropAnchorIdx === undefined) {
+              return;
+            }
+            const anchorPoint = anchorPoints[dropAnchorIdx];
+            if (value) {
+              anchorPoint.attr('stroke', themes['primaryColor']);
+            } else {
+              anchorPoints.forEach((point) => {
+                anchorPoint.attr('stroke', '#a4a4a5');
+              });
+            }
           }
         },
       },
@@ -415,7 +441,7 @@ const EditPipeline = () => {
       groupByTypes: true,
       fitView: true,
       plugins: [contextMenu],
-      enabledStack: true,
+      enabledStack: false,
       fitView: true,
       minZoom: 0.5,
       maxZoom: 5,
@@ -429,10 +455,6 @@ const EditPipeline = () => {
               if (e.target.get('name') === 'anchor-point') return false;
               return true;
             },
-            // shouldEnd: e => {
-            //   console.log(e);
-            //   return false;
-            // },
           },
           // config the shouldBegin and shouldEnd to make sure the create-edge is began and ended at anchor-point circles
           {
@@ -443,11 +465,17 @@ const EditPipeline = () => {
               if (e.target && e.target.get('name') !== 'anchor-point') return false;
               sourceAnchorIdx = e.target.get('anchorPointIdx');
               e.target.set('links', e.target.get('links') + 1); // cache the number of edge connected to this anchor-point circle
+              sourceNode = e.item;
               return true;
             },
             shouldEnd: (e) => {
               // avoid ending at other shapes on the node
               if (e.target && e.target.get('name') !== 'anchor-point') return false;
+              if (!sourceNode || !e.item) return false;
+              // 不允许连接自己
+              if (sourceNode.getID() === e.item.getID()) return false;
+              // 两个节点不允许多条边
+              if (hasEdge(sourceNode, e.item)) return false;
               if (e.target) {
                 targetAnchorIdx = e.target.get('anchorPointIdx');
                 e.target.set('links', e.target.get('links') + 1); // cache the number of edge connected to this anchor-point circle
@@ -486,7 +514,7 @@ const EditPipeline = () => {
         },
       },
       defaultEdge: {
-        //type: 'cubic-vertical',
+        // type: 'cubic-vertical',
         style: {
           endArrow: {
             // 设置终点箭头
@@ -522,31 +550,36 @@ const EditPipeline = () => {
     graph.on('node:click', (e) => {
       e.stopPropagation();
       if (e.target.get('name') !== 'anchor-point' && e.item) {
-        // graph.setItemState(e.item, 'nodeClicked', true);
+        // 获取所有的上游节点
         const parentNodes = findAllParentNodes(graph, e.item);
         // 如果没有打开过全局参数抽屉，获取不到全局参数
         const globalParams =
           paramsDrawerRef.current.getFieldsValue().global_param || globalParamRef.current;
+        // 打开节点编辑抽屉
         propsRef.current.showDrawer(e, globalParams, parentNodes);
       }
     });
     graph.on('aftercreateedge', (e) => {
+      console.log('aftercreateedge', e);
+
       // update the sourceAnchor and targetAnchor for the newly added edge
       graph.updateItem(e.edge, {
         sourceAnchor: sourceAnchorIdx,
         targetAnchor: targetAnchorIdx,
+        type:
+          targetAnchorIdx === 0 || targetAnchorIdx === 1 ? 'cubic-vertical' : 'cubic-horizontal',
       });
-
       // update the curveOffset for parallel edges
-      const edges = graph.save().edges;
-      processParallelEdgesOnAnchorPoint(edges);
-      graph.getEdges().forEach((edge, i) => {
-        graph.updateItem(edge, {
-          curveOffset: edges[i].curveOffset,
-          curvePosition: edges[i].curvePosition,
-        });
-      });
+      // const edges = graph.save().edges;
+      // processParallelEdgesOnAnchorPoint(edges);
+      // graph.getEdges().forEach((edge, i) => {
+      //   graph.updateItem(edge, {
+      //     curveOffset: edges[i].curveOffset,
+      //     curvePosition: edges[i].curvePosition,
+      //   });
+      // });
     });
+    // 删除边时，修改 anchor-point 的 links 值
     graph.on('afterremoveitem', (e) => {
       if (e.item && e.item.source && e.item.target) {
         const sourceNode = graph.findById(e.item.source);
@@ -572,7 +605,7 @@ const EditPipeline = () => {
         }
       }
     });
-    // after clicking on the first node, the edge is created, update the sourceAnchor
+    // after drag on the first node, the edge is created, update the sourceAnchor
     graph.on('afteradditem', (e) => {
       if (e.item && e.item.getType() === 'edge') {
         graph.updateItem(e.item, {
@@ -586,17 +619,36 @@ const EditPipeline = () => {
     graph.on('node:mouseleave', (e) => {
       graph.setItemState(e.item, 'hover', false);
     });
-    graph.on('node:dragenter', (e) => {
+
+    graph.on('node:dragstart', (e) => {
       graph.setItemState(e.item, 'hover', true);
+      graph.setItemState(e.item, 'drag', true);
     });
-    graph.on('node:dragleave', (e) => {
+    graph.on('node:drag', (e) => {
+      graph.setItemState(e.item, 'hover', true);
+    });
+    graph.on('node:dragend', (e) => {
       graph.setItemState(e.item, 'hover', false);
+      graph.setItemState(e.item, 'drag', false);
     });
-    graph.on('node:dragstart', (e) => {
+    graph.on('node:dragenter', (e) => {
       graph.setItemState(e.item, 'hover', true);
+      if (e.target.get('name') === 'anchor-point') {
+        dropAnchorIdx = e.target.get('anchorPointIdx');
+        graph.setItemState(e.item, 'drop', true);
+      } else {
+        graph.setItemState(e.item, 'drop', false);
+      }
     });
-    graph.on('node:drag', (e) => {
-      graph.setItemState(e.item, 'hover', true);
+    graph.on('node:dragleave', (e) => {
+      graph.setItemState(e.item, 'hover', false);
+      graph.setItemState(e.item, 'drop', false);
+      dropAnchorIdx = undefined;
+    });
+    graph.on('node:drop', (e) => {
+      graph.setItemState(e.item, 'hover', false);
+      graph.setItemState(e.item, 'drop', false);
+      dropAnchorIdx = undefined;
     });
     window.onresize = () => {
       if (!graph || graph.get('destroyed')) return;

react-ui/src/pages/Pipeline/index.jsx

@@ -43,32 +43,30 @@ const Pipeline = () => {
   };
   const routeToEdit = (e, record) => {
     e.stopPropagation();
-    navgite({ pathname: `/pipeline/template/${record.id}/${record.name}` });
+    navgite({ pathname: `/pipeline/template/${record.id}` });
   };
   const showModal = () => {
     form.resetFields();
+    setFormId(null);
     setDialogTitle('新建流水线');
     setIsModalOpen(true);
   };
-  const handleOk = () => {
-    console.log(1111);
-    setIsModalOpen(false);
-  };
   const handleCancel = () => {
     setIsModalOpen(false);
   };
   const onFinish = (values) => {
     if (formId) {
       editWorkflow({ ...values, id: formId }).then((ret) => {
+        setIsModalOpen(false);
         message.success('编辑成功');
         getList();
-        setIsModalOpen(false);
       });
     } else {
       addWorkflow(values).then((ret) => {
-        console.log(ret);
+        setIsModalOpen(false);
+        message.success('新建成功');
         if (ret.code === 200) {
-          navgite({ pathname: `/pipeline/template/${ret.data.id}/${ret.data.name}` });
+          navgite({ pathname: `/pipeline/template/${ret.data.id}` });
         }
       });
     }