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.

Note

This function was previously called getRectOfNodes


import { getNodesBounds } from '@xyflow/react';
 
const nodes = [
  {
    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);

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.