diff --git a/packages/core/src/components/Edges/utils/smoothstep.ts b/packages/core/src/components/Edges/utils/smoothstep.ts index aa5d8baf..1f44e42c 100644 --- a/packages/core/src/components/Edges/utils/smoothstep.ts +++ b/packages/core/src/components/Edges/utils/smoothstep.ts @@ -72,6 +72,10 @@ function getPoints({ let points: XYPosition[] let centerX, centerY + + const sourceGapOffset = { x: 0, y: 0 } + const targetGapOffset = { x: 0, y: 0 } + const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getSimpleEdgeCenter({ sourceX: source.x, sourceY: source.y, @@ -128,6 +132,18 @@ function getPoints({ if (flipSourceTarget) { points = dirAccessor === 'x' ? sourceTarget : targetSource } + } else { + 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 + if (diff <= offset) { + const gapOffset = Math.min(offset - 1, offset - diff) + if (sourceDir[dirAccessor] === currDir) { + sourceGapOffset[dirAccessor] = gapOffset + } else { + targetGapOffset[dirAccessor] = gapOffset + } + } } centerX = points[0].x