From 7f4d56b394aad24e419b211e01da03257fd09f9b Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 22 Jul 2024 17:43:32 +0200
Subject: [PATCH 1/9] added getNodesBounds inside main hook

---
 packages/react/src/hooks/useReactFlow.ts      | 23 ++++++++++
 packages/react/src/types/instance.ts          |  8 ++++
 .../svelte/src/lib/hooks/useSvelteFlow.ts     | 43 ++++++++++++++++++-
 3 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts
index faf9d31f..b793bfe0 100644
--- a/packages/react/src/hooks/useReactFlow.ts
+++ b/packages/react/src/hooks/useReactFlow.ts
@@ -1,11 +1,14 @@
 import { useMemo } from 'react';
 import {
+  boxToRect,
   EdgeRemoveChange,
   evaluateAbsolutePosition,
+  getBoundsOfBoxes,
   getElementsToRemove,
   getOverlappingArea,
   isRectObject,
   NodeRemoveChange,
+  nodeToBox,
   nodeToRect,
   type Rect,
 } from '@xyflow/system';
@@ -230,6 +233,26 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
           options
         );
       },
+      getNodesBounds: (nodes: (NodeType | string)[]): Rect => {
+        if (nodes.length === 0) {
+          return { x: 0, y: 0, width: 0, height: 0 };
+        }
+
+        const { nodeLookup, nodeOrigin } = store.getState();
+
+        const box = nodes.reduce(
+          (currBox, node) => {
+            const internalNode =
+              typeof node === 'string' ? nodeLookup.get(node) : node.parentId ? nodeLookup.get(node.id) : node;
+
+            const nodeBox = internalNode ? nodeToBox(internalNode, nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };
+            return getBoundsOfBoxes(currBox, nodeBox);
+          },
+          { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
+        );
+
+        return boxToRect(box);
+      },
     };
   }, []);
 
diff --git a/packages/react/src/types/instance.ts b/packages/react/src/types/instance.ts
index 5f4aa3b3..d545771e 100644
--- a/packages/react/src/types/instance.ts
+++ b/packages/react/src/types/instance.ts
@@ -173,6 +173,14 @@ export type GeneralHelpers<NodeType extends Node = Node, EdgeType extends Edge =
     dataUpdate: Partial<EdgeType['data']> | ((edge: EdgeType) => Partial<EdgeType['data']>),
     options?: { replace: boolean }
   ) => void;
+  /**
+   * Returns the bounds of the given nodes or node ids.
+   *
+   * @param nodes - the nodes or node ids to calculate the bounds for
+   *
+   * @returns the bounds of the given nodes
+   */
+  getNodesBounds: (nodes: (NodeType | string)[]) => Rect;
 };
 
 export type ReactFlowInstance<NodeType extends Node = Node, EdgeType extends Edge = Edge> = GeneralHelpers<
diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
index f46c1757..2de1e393 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -14,7 +14,10 @@ import {
   getViewportForBounds,
   getElementsToRemove,
   rendererPointToPoint,
-  nodeHasDimensions
+  nodeHasDimensions,
+  nodeToBox,
+  getBoundsOfBoxes,
+  boxToRect
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -230,6 +233,14 @@ export function useSvelteFlow(): {
    * @returns the nodes, edges and the viewport as a JSON object
    */
   toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
+  /**
+   * Returns the bounds of the given nodes or node ids.
+   *
+   * @param nodes - the nodes or node ids to calculate the bounds for
+   *
+   * @returns the bounds of the given nodes
+   */
+  getNodesBounds: (nodes: (Node | string)[]) => Rect;
 } {
   const {
     zoomIn,
@@ -247,6 +258,7 @@ export function useSvelteFlow(): {
     edges,
     domNode,
     nodeLookup,
+    nodeOrigin,
     edgeLookup
   } = useStore();
 
@@ -506,7 +518,34 @@ export function useSvelteFlow(): {
 
       nodes.update((nds) => nds);
     },
-    viewport
+    viewport,
+    getNodesBounds: (nodes) => {
+      if (nodes.length === 0) {
+        return { x: 0, y: 0, width: 0, height: 0 };
+      }
+
+      const _nodeLookup = get(nodeLookup);
+      const _nodeOrigin = get(nodeOrigin);
+
+      const box = nodes.reduce(
+        (currBox, node) => {
+          const internalNode =
+            typeof node === 'string'
+              ? _nodeLookup.get(node)
+              : node.parentId
+                ? _nodeLookup.get(node.id)
+                : node;
+
+          const nodeBox = internalNode
+            ? nodeToBox(internalNode, _nodeOrigin)
+            : { x: 0, y: 0, x2: 0, y2: 0 };
+          return getBoundsOfBoxes(currBox, nodeBox);
+        },
+        { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
+      );
+
+      return boxToRect(box);
+    }
   };
 }
 function getElements(lookup: Map<string, InternalNode>, ids: string[]): Node[];

From 33dbb57aacf2c643a9751f4ca333cc04ff49ae6c Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 23 Jul 2024 16:01:54 +0200
Subject: [PATCH 2/9] fixed node bounds calculations if it is an internal node

---
 packages/react/src/hooks/useReactFlow.ts                 | 9 +++++++--
 packages/svelte/src/lib/hooks/useSvelteFlow.ts           | 7 ++++---
 .../src/lib/plugins/NodeToolbar/NodeToolbar.svelte       | 8 +++++---
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts
index b793bfe0..6149084c 100644
--- a/packages/react/src/hooks/useReactFlow.ts
+++ b/packages/react/src/hooks/useReactFlow.ts
@@ -6,6 +6,7 @@ import {
   getBoundsOfBoxes,
   getElementsToRemove,
   getOverlappingArea,
+  isInternalNodeBase,
   isRectObject,
   NodeRemoveChange,
   nodeToBox,
@@ -233,7 +234,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
           options
         );
       },
-      getNodesBounds: (nodes: (NodeType | string)[]): Rect => {
+      getNodesBounds: (nodes: (NodeType | InternalNode | string)[]): Rect => {
         if (nodes.length === 0) {
           return { x: 0, y: 0, width: 0, height: 0 };
         }
@@ -243,7 +244,11 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
         const box = nodes.reduce(
           (currBox, node) => {
             const internalNode =
-              typeof node === 'string' ? nodeLookup.get(node) : node.parentId ? nodeLookup.get(node.id) : node;
+              typeof node === 'string'
+                ? nodeLookup.get(node)
+                : !isInternalNodeBase(node)
+                ? nodeLookup.get(node.id)
+                : node;
 
             const nodeBox = internalNode ? nodeToBox(internalNode, nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };
             return getBoundsOfBoxes(currBox, nodeBox);
diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
index 2de1e393..936945f3 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -17,7 +17,8 @@ import {
   nodeHasDimensions,
   nodeToBox,
   getBoundsOfBoxes,
-  boxToRect
+  boxToRect,
+  isInternalNodeBase
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -240,7 +241,7 @@ export function useSvelteFlow(): {
    *
    * @returns the bounds of the given nodes
    */
-  getNodesBounds: (nodes: (Node | string)[]) => Rect;
+  getNodesBounds: (nodes: (Node | InternalNode | string)[]) => Rect;
 } {
   const {
     zoomIn,
@@ -532,7 +533,7 @@ export function useSvelteFlow(): {
           const internalNode =
             typeof node === 'string'
               ? _nodeLookup.get(node)
-              : node.parentId
+              : !isInternalNodeBase(node)
                 ? _nodeLookup.get(node.id)
                 : node;
 
diff --git a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
index 1de880b3..58d73db5 100644
--- a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
+++ b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import { getNodesBounds, Position, getNodeToolbarTransform } from '@xyflow/system';
+  import { Position, getNodeToolbarTransform } from '@xyflow/system';
   import portal from '$lib/actions/portal';
   import type { InternalNode } from '$lib/types';
   import { useStore } from '$lib/store';
 
   import type { NodeToolbarProps } from './types';
+  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow';
 
   type $$Props = NodeToolbarProps;
 
@@ -15,7 +16,8 @@
   export let offset: $$Props['offset'] = undefined;
   export let isVisible: $$Props['isVisible'] = undefined;
 
-  const { domNode, viewport, nodeLookup, nodes, nodeOrigin } = useStore();
+  const { domNode, viewport, nodeLookup, nodes } = useStore();
+  const { getNodesBounds } = useSvelteFlow();
   const contextNodeId = getContext<string>('svelteflow__node_id');
 
   let transform: string;
@@ -42,7 +44,7 @@
   }
 
   $: {
-    const nodeRect = getNodesBounds(toolbarNodes, { nodeOrigin: $nodeOrigin });
+    const nodeRect = getNodesBounds(toolbarNodes);
 
     if (nodeRect) {
       transform = getNodeToolbarTransform(nodeRect, $viewport, _position, _offset, _align);

From 6174b23cd93877c975a456f2a590d1d8f1e78c3c Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 30 Jul 2024 12:40:35 +0200
Subject: [PATCH 3/9] deprecated getNodesBounds from system

---
 packages/system/src/utils/graph.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index 62c3d9da..b0a82755 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -124,6 +124,7 @@ export type GetNodesBoundsParams = {
 
 /**
  * Determines a bounding box that contains all given nodes in an array
+ * @deprecated This function yields erronous results for subflows. Use getNodesBounds from useReactFlow/useSvelteFlow hook instead.
  * @public
  * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
  * @param nodes - Nodes to calculate the bounds for
@@ -131,6 +132,10 @@ export type GetNodesBoundsParams = {
  * @returns Bounding box enclosing all nodes
  */
 export const getNodesBounds = (nodes: NodeBase[], params: GetNodesBoundsParams = { nodeOrigin: [0, 0] }): Rect => {
+  console.warn(
+    'This function yields erronous results for subflows. Use getNodesBounds from useReactFlow/useSvelteFlow hook instead.'
+  );
+
   if (nodes.length === 0) {
     return { x: 0, y: 0, width: 0, height: 0 };
   }

From d5592e7508bc32d5ffc953844b1d42b9ec59b25b Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 30 Jul 2024 12:46:03 +0200
Subject: [PATCH 4/9] added changeset

---
 .changeset/dull-bags-know.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/dull-bags-know.md

diff --git a/.changeset/dull-bags-know.md b/.changeset/dull-bags-know.md
new file mode 100644
index 00000000..fd85ee68
--- /dev/null
+++ b/.changeset/dull-bags-know.md
@@ -0,0 +1,7 @@
+---
+'@xyflow/react': minor
+'@xyflow/svelte': minor
+'@xyflow/system': minor
+---
+
+Deprecate util function getNodesBounds and add alternative to useReactFlow/useSvelteFlow hook

From eb1f2ad56abada059bfff0afe78f15e551c10a4e Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 29 Aug 2024 00:29:16 +0200
Subject: [PATCH 5/9] chore(types): cleanup

---
 packages/react/src/types/instance.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/types/instance.ts b/packages/react/src/types/instance.ts
index 08e5f8c6..eac29b91 100644
--- a/packages/react/src/types/instance.ts
+++ b/packages/react/src/types/instance.ts
@@ -181,6 +181,7 @@ export type GeneralHelpers<NodeType extends Node = Node, EdgeType extends Edge =
    * @returns the bounds of the given nodes
    */
   getNodesBounds: (nodes: (NodeType | string)[]) => Rect;
+  /**
    * Gets all connections for a given handle belonging to a specific node.
    *
    * @param type - handle type 'source' or 'target'

From ddeb3c6e7c08ccf6121f8cd0f7991cb38ae1ae66 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 2 Sep 2024 10:27:11 +0200
Subject: [PATCH 6/9] chore(types): cleanup

---
 packages/svelte/src/lib/hooks/useSvelteFlow.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
index 312870fa..3ee50ea0 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -14,11 +14,10 @@ import {
   getViewportForBounds,
   getElementsToRemove,
   rendererPointToPoint,
-  nodeHasDimensions,
   nodeToBox,
   getBoundsOfBoxes,
   boxToRect,
-  isInternalNodeBase
+  isInternalNodeBase,
   evaluateAbsolutePosition,
   type HandleType,
   type HandleConnection
@@ -245,7 +244,7 @@ export function useSvelteFlow(): {
    * @returns the bounds of the given nodes
    */
   getNodesBounds: (nodes: (Node | InternalNode | string)[]) => Rect;
-   * Gets all connections for a given handle belonging to a specific node.
+  /** Gets all connections for a given handle belonging to a specific node.
    *
    * @param type - handle type 'source' or 'target'
    * @param id - the handle id (this is only needed if you have multiple handles of the same type, meaning you have to provide a unique id for each handle)
@@ -280,7 +279,7 @@ export function useSvelteFlow(): {
     nodeLookup,
     nodeOrigin,
     edgeLookup,
-    connectionLookup,
+    connectionLookup
   } = useStore();
 
   const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => {
@@ -581,7 +580,7 @@ export function useSvelteFlow(): {
       );
 
       return boxToRect(box);
-    }
+    },
     getHandleConnections: ({ type, id, nodeId }) =>
       Array.from(
         get(connectionLookup)

From c906192ab1b8941ce4ef72e14375797f30256952 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 3 Sep 2024 17:22:33 +0200
Subject: [PATCH 7/9] chore(getNodesBounds): only show warning in dev

---
 packages/react/src/types/instance.ts | 2 +-
 packages/system/src/utils/graph.ts   | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/types/instance.ts b/packages/react/src/types/instance.ts
index eac29b91..fdece4dd 100644
--- a/packages/react/src/types/instance.ts
+++ b/packages/react/src/types/instance.ts
@@ -180,7 +180,7 @@ export type GeneralHelpers<NodeType extends Node = Node, EdgeType extends Edge =
    *
    * @returns the bounds of the given nodes
    */
-  getNodesBounds: (nodes: (NodeType | string)[]) => Rect;
+  getNodesBounds: (nodes: (NodeType | InternalNode | string)[]) => Rect;
   /**
    * Gets all connections for a given handle belonging to a specific node.
    *
diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index be391219..7efde2e3 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -132,9 +132,11 @@ export type GetNodesBoundsParams = {
  * @returns Bounding box enclosing all nodes
  */
 export const getNodesBounds = (nodes: NodeBase[], params: GetNodesBoundsParams = { nodeOrigin: [0, 0] }): Rect => {
-  console.warn(
-    'This function yields erronous results for subflows. Use getNodesBounds from useReactFlow/useSvelteFlow hook instead.'
-  );
+  if (process.env.NODE_ENV === 'development') {
+    console.warn(
+      '[DEPRECATED] `getNodesBounds` is deprecated because it yields erronous results for subflows. Use `getNodesBounds` from useReactFlow/useSvelteFlow hook instead.'
+    );
+  }
 
   if (nodes.length === 0) {
     return { x: 0, y: 0, width: 0, height: 0 };

From 091d6bac68fd21f5db7ce1e6d48828bc4c33adfd Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 4 Sep 2024 12:51:43 +0200
Subject: [PATCH 8/9] refactor(getNodesBounds): use system/getNodesBounds for
 hook

---
 packages/react/src/hooks/useReactFlow.ts      | 27 ++---------------
 .../svelte/src/lib/hooks/useSvelteFlow.ts     | 30 ++-----------------
 packages/system/src/utils/graph.ts            | 28 ++++++++++++-----
 3 files changed, 26 insertions(+), 59 deletions(-)

diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts
index aeb68834..c4d81e2d 100644
--- a/packages/react/src/hooks/useReactFlow.ts
+++ b/packages/react/src/hooks/useReactFlow.ts
@@ -1,15 +1,12 @@
 import { useMemo } from 'react';
 import {
-  boxToRect,
   EdgeRemoveChange,
   evaluateAbsolutePosition,
-  getBoundsOfBoxes,
   getElementsToRemove,
+  getNodesBounds,
   getOverlappingArea,
-  isInternalNodeBase,
   isRectObject,
   NodeRemoveChange,
-  nodeToBox,
   nodeToRect,
   type Rect,
 } from '@xyflow/system';
@@ -235,28 +232,8 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
         );
       },
       getNodesBounds: (nodes: (NodeType | InternalNode | string)[]): Rect => {
-        if (nodes.length === 0) {
-          return { x: 0, y: 0, width: 0, height: 0 };
-        }
-
         const { nodeLookup, nodeOrigin } = store.getState();
-
-        const box = nodes.reduce(
-          (currBox, node) => {
-            const internalNode =
-              typeof node === 'string'
-                ? nodeLookup.get(node)
-                : !isInternalNodeBase(node)
-                ? nodeLookup.get(node.id)
-                : node;
-
-            const nodeBox = internalNode ? nodeToBox(internalNode, nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };
-            return getBoundsOfBoxes(currBox, nodeBox);
-          },
-          { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
-        );
-
-        return boxToRect(box);
+        return getNodesBounds(nodes, { nodeLookup, nodeOrigin });
       },
       getHandleConnections: ({ type, id, nodeId }) =>
         Array.from(
diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
index 3ee50ea0..6ee27fb2 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -14,13 +14,10 @@ import {
   getViewportForBounds,
   getElementsToRemove,
   rendererPointToPoint,
-  nodeToBox,
-  getBoundsOfBoxes,
-  boxToRect,
-  isInternalNodeBase,
   evaluateAbsolutePosition,
   type HandleType,
-  type HandleConnection
+  type HandleConnection,
+  getNodesBounds
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -555,31 +552,10 @@ export function useSvelteFlow(): {
       nodes.update((nds) => nds);
     },
     getNodesBounds: (nodes) => {
-      if (nodes.length === 0) {
-        return { x: 0, y: 0, width: 0, height: 0 };
-      }
-
       const _nodeLookup = get(nodeLookup);
       const _nodeOrigin = get(nodeOrigin);
 
-      const box = nodes.reduce(
-        (currBox, node) => {
-          const internalNode =
-            typeof node === 'string'
-              ? _nodeLookup.get(node)
-              : !isInternalNodeBase(node)
-                ? _nodeLookup.get(node.id)
-                : node;
-
-          const nodeBox = internalNode
-            ? nodeToBox(internalNode, _nodeOrigin)
-            : { x: 0, y: 0, x2: 0, y2: 0 };
-          return getBoundsOfBoxes(currBox, nodeBox);
-        },
-        { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
-      );
-
-      return boxToRect(box);
+      return getNodesBounds(nodes, { nodeLookup: _nodeLookup, nodeOrigin: _nodeOrigin });
     },
     getHandleConnections: ({ type, id, nodeId }) =>
       Array.from(
diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index 7efde2e3..25c60d03 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -118,23 +118,26 @@ export const getNodePositionWithOrigin = (node: NodeBase, nodeOrigin: NodeOrigin
   };
 };
 
-export type GetNodesBoundsParams = {
+export type GetNodesBoundsParams<NodeType extends NodeBase = NodeBase> = {
   nodeOrigin?: NodeOrigin;
+  nodeLookup?: NodeLookup<InternalNodeBase<NodeType>>;
 };
 
 /**
  * Determines a bounding box that contains all given nodes in an array
- * @deprecated This function yields erronous results for subflows. Use getNodesBounds from useReactFlow/useSvelteFlow hook instead.
  * @public
  * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
  * @param nodes - Nodes to calculate the bounds for
  * @param params.nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
  * @returns Bounding box enclosing all nodes
  */
-export const getNodesBounds = (nodes: NodeBase[], params: GetNodesBoundsParams = { nodeOrigin: [0, 0] }): Rect => {
-  if (process.env.NODE_ENV === 'development') {
+export const getNodesBounds = <NodeType extends NodeBase = NodeBase>(
+  nodes: (NodeType | InternalNodeBase<NodeType> | string)[],
+  params: GetNodesBoundsParams<NodeType> = { nodeOrigin: [0, 0], nodeLookup: undefined }
+): Rect => {
+  if (process.env.NODE_ENV === 'development' && !params.nodeLookup) {
     console.warn(
-      '[DEPRECATED] `getNodesBounds` is deprecated because it yields erronous results for subflows. Use `getNodesBounds` from useReactFlow/useSvelteFlow hook instead.'
+      'Please use `getNodesBounds` from useReactFlow/useSvelteFlow hook to ensure correct values for sub flows.'
     );
   }
 
@@ -143,8 +146,19 @@ export const getNodesBounds = (nodes: NodeBase[], params: GetNodesBoundsParams =
   }
 
   const box = nodes.reduce(
-    (currBox, node) => {
-      const nodeBox = nodeToBox(node, params.nodeOrigin);
+    (currBox, nodeOrId) => {
+      const isId = typeof nodeOrId === 'string';
+      let currentNode = !params.nodeLookup && !isId ? nodeOrId : undefined;
+
+      if (params.nodeLookup) {
+        currentNode = isId
+          ? params.nodeLookup.get(nodeOrId)
+          : !isInternalNodeBase(nodeOrId)
+          ? params.nodeLookup.get(nodeOrId.id)
+          : nodeOrId;
+      }
+
+      const nodeBox = currentNode ? nodeToBox(currentNode, params.nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };
       return getBoundsOfBoxes(currBox, nodeBox);
     },
     { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }

From f5423bb7f4bb98da70854c2c31530106d25d996b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 5 Sep 2024 14:47:42 +0200
Subject: [PATCH 9/9] chore(getNodesBounds): adjust warning

---
 packages/system/src/utils/graph.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index 25c60d03..0bf8c784 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -124,7 +124,7 @@ export type GetNodesBoundsParams<NodeType extends NodeBase = NodeBase> = {
 };
 
 /**
- * Determines a bounding box that contains all given nodes in an array
+ * Internal function for determining a bounding box that contains all given nodes in an array.
  * @public
  * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
  * @param nodes - Nodes to calculate the bounds for
@@ -137,7 +137,7 @@ export const getNodesBounds = <NodeType extends NodeBase = NodeBase>(
 ): Rect => {
   if (process.env.NODE_ENV === 'development' && !params.nodeLookup) {
     console.warn(
-      'Please use `getNodesBounds` from useReactFlow/useSvelteFlow hook to ensure correct values for sub flows.'
+      'Please use `getNodesBounds` from `useReactFlow`/`useSvelteFlow` hook to ensure correct values for sub flows. If not possible, you have to provide a nodeLookup to support sub flows.'
     );
   }