From d280463e5b70e19fa8274e784c43576df6af2c16 Mon Sep 17 00:00:00 2001 From: ZLY Date: Fri, 16 Jan 2026 11:36:13 +0800 Subject: [PATCH] =?UTF-8?q?pref(flowEditor):=20=E4=BC=98=E5=8C=96=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=BE=B9=E6=A0=87=E7=AD=BE=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E8=AE=A1=E7=AE=97=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flowEditor/components/customEdge.tsx | 49 +++++-------------- 1 file changed, 13 insertions(+), 36 deletions(-) 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),其他边向两侧分散