|
|
|
|
@ -67,52 +67,29 @@ const DataDisplayEdge: React.FC<EdgeProps> = ({
|
|
|
|
|
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),其他边向两侧分散
|
|
|
|
|
|