getNodesBounds()

Source on GitHub

Returns the bounding box that contains all the given nodes in an array. This can be useful when combined with getViewportForBounds to calculate the correct transform to fit the given nodes in a viewport.

This function was previously called getRectOfNodes, which will be removed in v12.


import { getNodesBounds } from '@xyflow/svelte';
 
let nodes = $state.raw([
  {
    id: 'a',
    position: { x: 0, y: 0 },
    data: { label: 'a' },
    width: 50,
    height: 25,
  },
  {
    id: 'b',
    position: { x: 100, y: 100 },
    data: { label: 'b' },
    width: 50,
    height: 25,
  },
]);
 
const bounds = getNodesBounds(nodes.value);

Signature

Parameters:

Name	Type	Default
`nodes`	`(string \| NodeType \| InternalNodeBase<NodeType>)[]` Nodes to calculate the bounds for.
`params.nodeOrigin`	`NodeOrigin` Origin of the nodes: `[0, 0]` for top-left, `[0.5, 0.5]` for center.	`[0, 0]`
`params.nodeLookup`	`NodeLookup<InternalNodeBase<NodeType>>`

Returns:

Rect

Bounding box enclosing all nodes.