Merge pull request #4477 from xyflow/nodesbounds

Added getNodesBounds function to useReactFlow/useSvelteFlow

.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

packages/react/src/hooks/useReactFlow.ts

@@ -3,6 +3,7 @@ import {
   EdgeRemoveChange,
   evaluateAbsolutePosition,
   getElementsToRemove,
+  getNodesBounds,
   getOverlappingArea,
   isRectObject,
   NodeRemoveChange,
@@ -230,6 +231,10 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
           options
         );
       },
+      getNodesBounds: (nodes: (NodeType | InternalNode | string)[]): Rect => {
+        const { nodeLookup, nodeOrigin } = store.getState();
+        return getNodesBounds(nodes, { nodeLookup, nodeOrigin });
+      },
       getHandleConnections: ({ type, id, nodeId }) =>
         Array.from(
           store

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 | InternalNode | string)[]) => Rect;
   /**
    * Gets all connections for a given handle belonging to a specific node.
    *

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -16,7 +16,8 @@ import {
   rendererPointToPoint,
   evaluateAbsolutePosition,
   type HandleType,
-  type HandleConnection
+  type HandleConnection,
+  getNodesBounds
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -233,7 +234,14 @@ export function useSvelteFlow(): {
    */
   toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
   /**
-   * Gets all connections for a given handle belonging to a specific node.
+   * 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 | InternalNode | string)[]) => Rect;
+  /** 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)
@@ -266,9 +274,9 @@ export function useSvelteFlow(): {
     edges,
     domNode,
     nodeLookup,
+    nodeOrigin,
     edgeLookup,
-    connectionLookup,
+    connectionLookup
-    nodeOrigin
   } = useStore();
 
   const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => {
@@ -543,6 +551,12 @@ export function useSvelteFlow(): {
 
       nodes.update((nds) => nds);
     },
+    getNodesBounds: (nodes) => {
+      const _nodeLookup = get(nodeLookup);
+      const _nodeOrigin = get(nodeOrigin);
+
+      return getNodesBounds(nodes, { nodeLookup: _nodeLookup, nodeOrigin: _nodeOrigin });
+    },
     getHandleConnections: ({ type, id, nodeId }) =>
       Array.from(
         get(connectionLookup)

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);

packages/system/src/utils/graph.ts

@@ -118,26 +118,47 @@ 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
+ * 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
  * @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 => {
+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(
+      '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.'
+    );
+  }
+
   if (nodes.length === 0) {
     return { x: 0, y: 0, width: 0, height: 0 };
   }
 
   const box = nodes.reduce(
-    (currBox, node) => {
+    (currBox, nodeOrId) => {
-      const nodeBox = nodeToBox(node, params.nodeOrigin);
+      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 }