mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Restrict when the collision avoidance algorithm is used (#10755)
Some checks are pending
Test Master / install-and-build (push) Waiting to run
Details
Test Master / Unit tests (18.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (20.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (22.4) (push) Blocked by required conditions
Details
Test Master / Lint (push) Blocked by required conditions
Details
Test Master / Notify Slack on failure (push) Blocked by required conditions
Details
Benchmark Docker Image CI / build (push) Waiting to run
Details

Browse source
This commit is contained in:
Raúl Gómez Morales 2024-09-10 17:43:31 +02:00 committed by GitHub
parent 20b1cf2b75
commit bf43d67357
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/editor-ui/src/components/canvas/elements/edges/CanvasConnectionLine.spec.ts
View file

@ -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',
);
});
});

17
packages/editor-ui/src/components/canvas/elements/edges/utils/edgePath.ts
View file

@ -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);
}