feat(useReactFlow): add intersection helpers

packages/core/src/utils/graph.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { Selection as D3Selection } from 'd3';
 
-import { boxToRect, clamp, devWarn, getBoundsOfBoxes, rectToBox } from '../utils';
+import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectToBox } from '../utils';
 import type { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>
@@ -161,12 +161,12 @@ export const getNodesInside = (
   // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
   excludeNonSelectableNodes = false
 ): Node[] => {
-  const rBox = rectToBox({
+  const paneRect = {
     x: (rect.x - tx) / tScale,
     y: (rect.y - ty) / tScale,
     width: rect.width / tScale,
     height: rect.height / tScale,
-  });
+  };
 
   const visibleNodes: Node[] = [];
 
@@ -177,10 +177,8 @@ export const getNodesInside = (
       return false;
     }
 
-    const nBox = rectToBox({ ...positionAbsolute, width: width || 0, height: height || 0 });
-    const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x));
-    const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));
-    const overlappingArea = Math.ceil(xOverlap * yOverlap);
+    const nodeRect = { ...positionAbsolute, width: width || 0, height: height || 0 };
+    const overlappingArea = getOverlappingArea(paneRect, nodeRect);
     const notInitialized =
       typeof width === 'undefined' || typeof height === 'undefined' || width === null || height === null;
 

packages/core/src/utils/index.ts

@@ -1,4 +1,4 @@
-import type { Dimensions, XYPosition, CoordinateExtent, Box, Rect } from '../types';
+import type { Dimensions, Node, XYPosition, CoordinateExtent, Box, Rect } from '../types';
 
 export const getDimensions = (node: HTMLDivElement): Dimensions => ({
   width: node.offsetWidth,
@@ -36,9 +36,25 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
   height: y2 - y,
 });
 
+export const nodeToRect = (node: Node): Rect => ({
+  ...(node.positionAbsolute || { x: 0, y: 0 }),
+  width: node.width || 0,
+  height: node.height || 0,
+});
+
 export const getBoundsOfRects = (rect1: Rect, rect2: Rect): Rect =>
   boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
 
+export const getOverlappingArea = (rectA: Rect, rectB: Rect): number => {
+  const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x));
+  const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y));
+
+  return Math.ceil(xOverlap * yOverlap);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isRectObject = (obj: any): obj is Rect => !!obj.width && !!obj.height && !!obj.x && !!obj.y;
+
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const isNumeric = (n: any): n is number => !isNaN(n) && isFinite(n);