fix: 修复编辑流水线节点后锚点发生改变的问题

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

@@ -28,7 +28,7 @@ const EditPipeline = () => {
   const [globalParam, setGlobalParam, globalParamRef] = useStateRef([]);
   const { message } = App.useApp();
   let sourceAnchorIdx, targetAnchorIdx, dropAnchorIdx;
-  let sourceNode;
+  let dragSourceNode;
 
   useEffect(() => {
     initMenu();
@@ -83,11 +83,11 @@ const EditPipeline = () => {
       return;
     }
 
-    const [propsRes, propsError] = await to(propsRef.current.getFieldsValue());
-    if (propsError) {
-      message.error('基本信息必填项需配置');
-      return;
-    }
+    // const [propsRes, propsError] = await to(propsRef.current.getFieldsValue());
+    // if (propsError) {
+    //   message.error('基本信息必填项需配置');
+    //   return;
+    // }
     propsRef.current.propClose();
     setTimeout(() => {
       const data = graph.save();
@@ -266,10 +266,6 @@ const EditPipeline = () => {
       }
     });
   };
-  const handlerContextMenu = (e) => {
-    e.stopPropagation();
-    // this.menuType = e.item._cfg.type;
-  };
   // 上下文菜单
   const initMenu = () => {
     // const selectedNodes = this.selectedNodes;
@@ -410,22 +406,14 @@ const EditPipeline = () => {
               });
             }
           } else if (name === 'drag') {
-            if (sourceAnchorIdx === null || sourceAnchorIdx === undefined) {
-              return;
+            if (sourceAnchorIdx !== null && sourceAnchorIdx !== undefined) {
+              const anchorPoint = anchorPoints[sourceAnchorIdx];
+              anchorPoint.attr('stroke', value ? themes['primaryColor'] : '#a4a4a5');
             }
-            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');
-              });
+            if (dropAnchorIdx !== null && dropAnchorIdx !== undefined) {
+              const anchorPoint = anchorPoints[dropAnchorIdx];
+              anchorPoint.attr('stroke', value ? themes['primaryColor'] : '#a4a4a5');
             }
           }
         },
@@ -465,17 +453,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;
+              dragSourceNode = 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 (!dragSourceNode || !e.item) return false;
               // 不允许连接自己
-              if (sourceNode.getID() === e.item.getID()) return false;
+              if (dragSourceNode.getID() === e.item.getID()) return false;
               // 两个节点不允许多条边
-              if (hasEdge(sourceNode, e.item)) return false;
+              if (hasEdge(dragSourceNode, 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
@@ -560,8 +548,6 @@ const EditPipeline = () => {
       }
     });
     graph.on('aftercreateedge', (e) => {
-      console.log('aftercreateedge', e);
-
       // update the sourceAnchor and targetAnchor for the newly added edge
       graph.updateItem(e.edge, {
         sourceAnchor: sourceAnchorIdx,
@@ -569,6 +555,7 @@ const EditPipeline = () => {
         type:
           targetAnchorIdx === 0 || targetAnchorIdx === 1 ? 'cubic-vertical' : 'cubic-horizontal',
       });
+
       // update the curveOffset for parallel edges
       // const edges = graph.save().edges;
       // processParallelEdgesOnAnchorPoint(edges);
@@ -582,9 +569,9 @@ const EditPipeline = () => {
     // 删除边时，修改 anchor-point 的 links 值
     graph.on('afterremoveitem', (e) => {
       if (e.item && e.item.source && e.item.target) {
-        const sourceNode = graph.findById(e.item.source);
-        const targetNode = graph.findById(e.item.target);
-        const { sourceAnchor, targetAnchor } = e.item;
+        const { source, target, sourceAnchor, targetAnchor } = e.item;
+        const sourceNode = graph.findById(source);
+        const targetNode = graph.findById(target);
         if (sourceNode && !isNaN(sourceAnchor)) {
           const sourceAnchorShape = sourceNode
             .getContainer()
@@ -607,7 +594,8 @@ const EditPipeline = () => {
     });
     // after drag on the first node, the edge is created, update the sourceAnchor
     graph.on('afteradditem', (e) => {
-      if (e.item && e.item.getType() === 'edge') {
+      const sourceAnchor = e.item.getModel().sourceAnchor;
+      if (e.item && e.item.getType() === 'edge' && !sourceAnchor) {
         graph.updateItem(e.item, {
           sourceAnchor: sourceAnchorIdx,
         });
@@ -619,19 +607,16 @@ const EditPipeline = () => {
     graph.on('node:mouseleave', (e) => {
       graph.setItemState(e.item, 'hover', false);
     });
-
     graph.on('node:dragstart', (e) => {
       graph.setItemState(e.item, 'hover', true);
       graph.setItemState(e.item, 'drag', true);
     });
-    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:dragenter', (e) => {
+      if (e.item?.getID() === dragSourceNode?.getID()) return;
       graph.setItemState(e.item, 'hover', true);
       if (e.target.get('name') === 'anchor-point') {
         dropAnchorIdx = e.target.get('anchorPointIdx');
@@ -641,6 +626,7 @@ const EditPipeline = () => {
       }
     });
     graph.on('node:dragleave', (e) => {
+      if (e.item?.getID() === dragSourceNode?.getID()) return;
       graph.setItemState(e.item, 'hover', false);
       graph.setItemState(e.item, 'drop', false);
       dropAnchorIdx = undefined;