diff --git a/react-ui/src/pages/Pipeline/editPipeline/index.jsx b/react-ui/src/pages/Pipeline/editPipeline/index.jsx index cbe8b9d9..01bec32f 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/index.jsx +++ b/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;