Merge pull request #2646 from wbkd/fix/getRectOfNodes

fix(getRectOfNodes): handle node pos correctly closes #2641

.changeset/lazy-pumpkins-remember.md

@@ -0,0 +1,6 @@
+---
+'@reactflow/core': patch
+'@reactflow/minimap': patch
+---
+
+Fix getRectOfNodes

packages/core/src/hooks/useDrag/utils.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 
-import { clampPosition, devWarn } from '../../utils';
+import { clampPosition, devWarn, isNumeric } from '../../utils';
 import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, XYPosition } from '../../types';
 import { getNodePositionWithOrigin } from '../../utils/graph';
 
@@ -69,17 +69,14 @@ export function calcNextPosition(
   if (node.extent === 'parent') {
     if (node.parentNode && node.width && node.height) {
       const parent = nodeInternals.get(node.parentNode);
-      const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin);
+      const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute;
       currentExtent =
-        parentPosition.positionAbsolute && parent?.width && parent?.height
+        parent && isNumeric(parentX) && isNumeric(parentY) && isNumeric(parent.width) && isNumeric(parent.height)
           ? [
+              [parentX + node.width * nodeOrigin[0], parentY + node.height * nodeOrigin[1]],
               [
-                parentPosition.positionAbsolute.x + node.width * nodeOrigin[0],
+                parentX + parent.width - node.width + node.width * nodeOrigin[0],
-                parentPosition.positionAbsolute.y + node.height * nodeOrigin[1],
+                parentY + parent.height - node.height + node.height * nodeOrigin[1],
-              ],
-              [
-                parentPosition.positionAbsolute.x + parent.width - node.width + node.width * nodeOrigin[0],
-                parentPosition.positionAbsolute.y + parent.height - node.height + node.height * nodeOrigin[1],
               ],
             ]
           : currentExtent;
@@ -90,8 +87,7 @@ export function calcNextPosition(
     }
   } else if (node.extent && node.parentNode) {
     const parent = nodeInternals.get(node.parentNode);
-    const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin);
+    const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute;
-    const { x: parentX, y: parentY } = parentPosition.positionAbsolute;
     currentExtent = [
       [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
       [node.extent[1][0] + parentX, node.extent[1][1] + parentY],

packages/core/src/utils/graph.ts

@@ -2,7 +2,7 @@
 import type { Selection as D3Selection } from 'd3';
 
 import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectToBox } from '../utils';
-import type {
+import {
   Node,
   Edge,
   Connection,
@@ -156,18 +156,22 @@ export const getNodePositionWithOrigin = (
     };
   }
 
-  const offset: XYPosition = {
+  const offsetX = (node.width ?? 0) * nodeOrigin[0];
-    x: (node.width ?? 0) * nodeOrigin[0],
+  const offsetY = (node.height ?? 0) * nodeOrigin[1];
-    y: (node.height ?? 0) * nodeOrigin[1],
+
+  const position: XYPosition = {
+    x: node.position.x - offsetX,
+    y: node.position.y - offsetY,
   };
 
   return {
-    x: node.position.x - offset.x,
+    ...position,
-    y: node.position.y - offset.y,
+    positionAbsolute: node.positionAbsolute
-    positionAbsolute: {
+      ? {
-      x: (node.positionAbsolute?.x ?? 0) - offset.x,
+          x: node.positionAbsolute.x - offsetX,
-      y: (node.positionAbsolute?.y ?? 0) - offset.y,
+          y: node.positionAbsolute.y - offsetY,
-    },
+        }
+      : position,
   };
 };
 
@@ -178,15 +182,12 @@ export const getRectOfNodes = (nodes: Node[], nodeOrigin: NodeOrigin = [0, 0]):
 
   const box = nodes.reduce(
     (currBox, node) => {
-      const { positionAbsolute, ...position } = getNodePositionWithOrigin(node, nodeOrigin);
+      const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
-      const nodeX = positionAbsolute ? positionAbsolute.x : position.x;
-      const nodeY = positionAbsolute ? positionAbsolute.y : position.y;
-
       return getBoundsOfBoxes(
         currBox,
         rectToBox({
-          x: nodeX,
+          x,
-          y: nodeY,
+          y,
           width: node.width || 0,
           height: node.height || 0,
         })

packages/minimap/src/MiniMap.tsx

@@ -167,13 +167,13 @@ function MiniMap({
       >
         {ariaLabel && <title id={labelledBy}>{ariaLabel}</title>}
         {nodes.map((node) => {
-          const { positionAbsolute } = getNodePositionWithOrigin(node, nodeOrigin);
+          const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
 
           return (
             <MiniMapNode
               key={node.id}
-              x={positionAbsolute.x}
+              x={x}
-              y={positionAbsolute.y}
+              y={y}
               width={node.width!}
               height={node.height!}
               style={node.style}