diff --git a/src/pages/flowEditor/components/customEdge.tsx b/src/pages/flowEditor/components/customEdge.tsx index 7e11a93..5b0b734 100644 --- a/src/pages/flowEditor/components/customEdge.tsx +++ b/src/pages/flowEditor/components/customEdge.tsx @@ -67,52 +67,29 @@ const DataDisplayEdge: React.FC = ({ const targetNode = nodes.find(n => n.id === currentEdge.target); if (!sourceNode || !targetNode) return { x: labelX, y: labelY }; - // 计算当前边的中心位置 - const [centerX, centerY] = getEdgeCenter({ - sourceX, - sourceY, - targetX, - targetY - }); - - // 查找所有可能重叠的边(中心点距离很近的边) - const overlappingEdges = edges.filter(edge => { - if (edge.id === id || !edge.source || !edge.target) return false; - - const edgeSourceNode = nodes.find(n => n.id === edge.source); - const edgeTargetNode = nodes.find(n => n.id === edge.target); - if (!edgeSourceNode || !edgeTargetNode) return false; - - // 计算该边的中心位置 - const [edgeCenterX, edgeCenterY] = getEdgeCenter({ - sourceX: edgeSourceNode.position.x, - sourceY: edgeSourceNode.position.y, - targetX: edgeTargetNode.position.x, - targetY: edgeTargetNode.position.y - }); - - // 计算距离 - const distance = Math.sqrt( - Math.pow(centerX - edgeCenterX, 2) + - Math.pow(centerY - edgeCenterY, 2) + // 查找连接相同节点对的所有边(包括反向连接) + const relatedEdges = edges.filter(edge => { + if (edge.id === id) return false; + + // 检查是否连接相同的节点对 + return ( + (edge.source === currentEdge.source && edge.target === currentEdge.target) || + (edge.source === currentEdge.target && edge.target === currentEdge.source) ); - - // 距离小于120px认为可能重叠 - return distance < 120; }); - // 如果没有重叠,使用默认中心位置 - if (overlappingEdges.length === 0) { + // 如果没有相关的边,使用默认中心位置 + if (relatedEdges.length === 0) { return { x: labelX, y: labelY }; } - // 将当前边加入并排序 - const allOverlappingEdges = [...overlappingEdges, currentEdge].sort((a, b) => + // 将当前边加入并排序,确保位置分配稳定 + const allRelatedEdges = [...relatedEdges, currentEdge].sort((a, b) => a.id.localeCompare(b.id) ); // 找到当前边的索引 - const currentIndex = allOverlappingEdges.findIndex(e => e.id === id); + const currentIndex = allRelatedEdges.findIndex(e => e.id === id); // 根据索引沿着边的路径分配位置 // 第1条边在中心(0.5),其他边向两侧分散