alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5394 from xyflow/fix/get-node-intersections

Browse Source 
`getNodeIntersections`: calculate overlapping area correctly
This commit is contained in:
Moritz Klack
2025-07-09 12:04:15 +02:00
committed by GitHub
parent 79a9b0da9a 21db22d46a
commit c91c48c9a7
4 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/popular-apples-invent.md Normal file
View File

@@ -0,0 +1,6 @@
---
'@xyflow/react': patch
'@xyflow/svelte': patch
---
Return intersections correctly of passed node is bigger than intersecting nodes

6
packages/react/src/hooks/useReactFlow.ts
View File

@@ -222,7 +222,11 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
const partiallyVisible = partially && overlappingArea > 0;
return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
return (
partiallyVisible ||
overlappingArea >= currNodeRect.width * currNodeRect.height ||
overlappingArea >= nodeRect.width * nodeRect.height
);
}) as NodeType[];
},
isNodeIntersecting: (nodeOrRect, area, partially = true) => {

12
packages/react/src/types/instance.ts
View File

@@ -105,7 +105,7 @@ export type GeneralHelpers<NodeType extends Node = Node, EdgeType extends Edge =
* parameter can be set to `true` to include nodes that are only partially intersecting.
*
* @param node - the node or rect to check for intersections
* @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed node or rect
* @param partially - true by default, if set to false, only nodes that are fully intersecting will be returned
* @param nodes - optional nodes array to check for intersections
*
* @returns an array of intersecting nodes
@@ -252,10 +252,10 @@ export type ReactFlowInstance<NodeType extends Node = Node, EdgeType extends Edg
NodeType,
EdgeType
> &
ViewportHelperFunctions & {
/**
* React Flow needs to mount the viewport to the DOM and initialize its zoom and pan behavior.
* This property tells you when viewport is initialized.
*/
ViewportHelperFunctions & {
/**
* React Flow needs to mount the viewport to the DOM and initialize its zoom and pan behavior.
* This property tells you when viewport is initialized.
*/
viewportInitialized: boolean;
};

8
packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
View File

@@ -125,7 +125,7 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
* Returns all nodes that intersect with the given node or rect.
*
* @param node - the node or rect to check for intersections
* @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed node or rect
* @param partially - true by default, if set to false, only nodes that are fully intersecting will be returned
* @param nodes - optional nodes array to check for intersections
*
* @returns an array of intersecting nodes
@@ -412,7 +412,11 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
const partiallyVisible = partially && overlappingArea > 0;
return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
return (
partiallyVisible ||
overlappingArea >= currNodeRect.width * currNodeRect.height ||
overlappingArea >= nodeRect.width * nodeRect.height
);
});
},
isNodeIntersecting: (