From e1f6b743895d9dac7ddd2c6fd8656d1b189418fe Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 19 Aug 2024 14:05:37 +0200 Subject: [PATCH 1/2] fix intersections for svelte flow --- .../routes/examples/intersections/Flow.svelte | 12 ++++--- .../examples/intersections/nodes-and-edges.ts | 3 +- .../svelte/src/lib/hooks/useSvelteFlow.ts | 33 ++++++++++++++----- 3 files changed, 34 insertions(+), 14 deletions(-) diff --git a/examples/svelte/src/routes/examples/intersections/Flow.svelte b/examples/svelte/src/routes/examples/intersections/Flow.svelte index 12c98e00..253a8903 100644 --- a/examples/svelte/src/routes/examples/intersections/Flow.svelte +++ b/examples/svelte/src/routes/examples/intersections/Flow.svelte @@ -13,12 +13,14 @@ const { getIntersectingNodes } = useSvelteFlow(); function onNodeDrag({ detail: { targetNode } }) { - const intersections = getIntersectingNodes(targetNode).map((n) => n.id); + if (targetNode) { + const intersections = getIntersectingNodes(targetNode).map((n) => n.id); - $nodes.forEach((n) => { - n.class = intersections.includes(n.id) ? 'highlight' : ''; - }); - $nodes = $nodes; + $nodes.forEach((n) => { + n.class = intersections.includes(n.id) ? 'highlight' : ''; + }); + $nodes = $nodes; + } } diff --git a/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts b/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts index 7b094ce2..443a0700 100644 --- a/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts +++ b/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts @@ -10,7 +10,8 @@ export const initialNodes: Node[] = [ { id: '2', data: { label: 'Node 2' }, - position: { x: 0, y: 150 } + position: { x: 0, y: 150 }, + parentId: '1' }, { id: '3', diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index f46c1757..4ed08350 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -14,7 +14,7 @@ import { getViewportForBounds, getElementsToRemove, rendererPointToPoint, - nodeHasDimensions + evaluateAbsolutePosition } from '@xyflow/system'; import { useStore } from '$lib/store'; @@ -247,15 +247,32 @@ export function useSvelteFlow(): { edges, domNode, nodeLookup, - edgeLookup + edgeLookup, + nodeOrigin } = useStore(); - const getNodeRect = (nodeOrRect: Node | { id: Node['id'] }): Rect | null => { - const node = - isNode(nodeOrRect) && nodeHasDimensions(nodeOrRect) - ? nodeOrRect - : get(nodeLookup).get(nodeOrRect.id); - return node ? nodeToRect(node) : null; + const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => { + const $nodeLookup = get(nodeLookup); + const nodeToUse = isNode(node) ? node : $nodeLookup.get(node.id)!; + const position = nodeToUse.parentId + ? evaluateAbsolutePosition( + nodeToUse.position, + nodeToUse.measured, + nodeToUse.parentId, + $nodeLookup, + get(nodeOrigin) + ) + : nodeToUse.position; + + const nodeWithPosition = { + id: nodeToUse.id, + position, + width: nodeToUse.measured?.width ?? nodeToUse.width, + height: nodeToUse.measured?.height ?? nodeToUse.height, + data: nodeToUse.data + }; + + return nodeToRect(nodeWithPosition); }; const updateNode = ( From 54bfb6d9383b2c041f243c1ba16ce169c2b90085 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 19 Aug 2024 14:06:54 +0200 Subject: [PATCH 2/2] added changeset --- .changeset/rare-gorillas-repair.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rare-gorillas-repair.md diff --git a/.changeset/rare-gorillas-repair.md b/.changeset/rare-gorillas-repair.md new file mode 100644 index 00000000..983d1c05 --- /dev/null +++ b/.changeset/rare-gorillas-repair.md @@ -0,0 +1,5 @@ +--- +'@xyflow/svelte': patch +--- + +Fix getIntersectingNodes for subflows in Svelte Flow