207_getnodesbounds__

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

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.

Parameters

• 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.
• params.nodeLookup?: NodeLookup<InternalNodeBase<NodeType>>

Returns

Rect