diff --git a/packages/core/src/components/Edges/utils/smoothstep.ts b/packages/core/src/components/Edges/utils/smoothstep.ts index 8d1df4d1..44986dd3 100644 --- a/packages/core/src/components/Edges/utils/smoothstep.ts +++ b/packages/core/src/components/Edges/utils/smoothstep.ts @@ -119,20 +119,7 @@ function getPoints({ points = sourceDir.y === currDir ? sourceTarget : targetSource } - // these are conditions for handling mixed handle positions like Right -> Bottom for example - if (sourcePosition !== targetPosition) { - const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x' - const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite] - const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite] - const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite] - const flipSourceTarget = - (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) || - (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo))) - - if (flipSourceTarget) { - points = dirAccessor === 'x' ? sourceTarget : targetSource - } - } else { + if (sourcePosition === targetPosition) { const diff = Math.abs(source[dirAccessor] - target[dirAccessor]) // if an edge goes from right to right for example (sourcePosition === targetPosition) and the distance between source.x and target.x is less than the offset, the added point and the gapped source/target will overlap. This leads to a weird edge path. To avoid this we add a gapOffset to the source/target @@ -146,8 +133,34 @@ function getPoints({ } } - centerX = points[0].x - centerY = points[0].y + // these are conditions for handling mixed handle positions like Right -> Bottom for example + if (sourcePosition !== targetPosition) { + const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x' + const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite] + const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite] + const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite] + const flipSourceTarget = + (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) || + (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo))) + + if (flipSourceTarget) { + points = dirAccessor === 'x' ? sourceTarget : targetSource + } + } + + const sourceGapPoint = { x: sourceGapped.x - sourceGapOffset.x, y: sourceGapped.y - sourceGapOffset.y } + const targetGapPoint = { x: targetGapped.x - targetGapOffset.x, y: targetGapped.y - targetGapOffset.y } + const maxXDistance = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x)) + const maxYDistance = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y)) + + // we want to place the label on the longest segment of the edge + if (maxXDistance >= maxYDistance) { + centerX = (sourceGapPoint.x + targetGapPoint.x) / 2 + centerY = points[0].y + } else { + centerX = points[0].x + centerY = (sourceGapPoint.y + targetGapPoint.y) / 2 + } } const pathPoints = [