diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasConnectionLine.spec.ts b/packages/editor-ui/src/components/canvas/elements/edges/CanvasConnectionLine.spec.ts index 876cde7ca6..7591a86668 100644 --- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasConnectionLine.spec.ts +++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasConnectionLine.spec.ts @@ -53,4 +53,25 @@ describe('CanvasConnectionLine', () => { 'M0 0L 32,0Q 40,0 40,8L 40,132Q 40,140 32,140L1 140L0 140M0 140L-40 140L -132,140Q -140,140 -140,132L -140,-92Q -140,-100 -132,-100L-100 -100', ); }); + + it('should only avoid obstacles when the edge intersects the nodes ', () => { + const { container } = renderComponent({ + props: { + ...DEFAULT_PROPS, + sourceX: -72, + sourceY: -290, + sourcePosition: Position.Right, + targetX: -344, + targetY: -30, + targetPosition: Position.Left, + }, + }); + + const edge = container.querySelector('.vue-flow__edge-path'); + + expect(edge).toHaveAttribute( + 'd', + 'M-72 -290L -57,-290Q -52,-290 -52,-285L -52,-165Q -52,-160 -57,-160L -359,-160Q -364,-160 -364,-155L -364,-35Q -364,-30 -359,-30L-344 -30', + ); + }); }); diff --git a/packages/editor-ui/src/components/canvas/elements/edges/utils/edgePath.ts b/packages/editor-ui/src/components/canvas/elements/edges/utils/edgePath.ts index 348a0283b8..8975641a1a 100644 --- a/packages/editor-ui/src/components/canvas/elements/edges/utils/edgePath.ts +++ b/packages/editor-ui/src/components/canvas/elements/edges/utils/edgePath.ts @@ -5,7 +5,13 @@ const EDGE_PADDING_Y = 140; const EDGE_PADDING_Y_TOP = 80; const EDGE_BORDER_RADIUS = 8; const EDGE_OFFSET = 40; -const HANDLE_SIZE = 16; +// const HANDLE_SIZE = 16; + +const isTargetHandlePositionedLeftOfSourceTarget = (sourceX: number, targetX: number) => + sourceX > targetX; + +const pathIntersectsNodes = (targetY: number, sourceY: number) => + Math.abs(targetY - sourceY) < EDGE_PADDING_Y; export function getCustomPath( props: Pick< @@ -14,12 +20,15 @@ export function getCustomPath( >, ) { const { targetX, targetY, sourceX, sourceY, sourcePosition, targetPosition } = props; - const xDiff = targetX - sourceX; const yDiff = targetY - sourceY; + if (!isTargetHandlePositionedLeftOfSourceTarget(sourceX, targetX)) { + return getBezierPath(props); + } + // Connection is backwards and the source is on the right side // -> We need to avoid overlapping the source node - if (xDiff < -HANDLE_SIZE && sourcePosition === Position.Right) { + if (pathIntersectsNodes(targetY, sourceY)) { const direction = yDiff < -EDGE_PADDING_Y || yDiff > 0 ? 'up' : 'down'; const firstSegmentTargetX = sourceX; const firstSegmentTargetY = @@ -49,5 +58,5 @@ export function getCustomPath( return path; } - return getBezierPath(props); + return getSmoothStepPath(props); }