getViewportForBounds()

Source on Github

This util returns the viewport for the given bounds. You might use this to pre-calculate the viewport for a given set of nodes on the server or calculate the viewport for the given bounds without changing the viewport directly.

Note

This function was previously called getTransformForBounds


import { getViewportForBounds } from '@xyflow/react';
 
const { x, y, zoom } = getViewportForBounds(
  {
    x: 0,
    y: 0,
    width: 100,
    height: 100,
  },
  1200,
  800,
  0.5,
  2,
);

Signature

Parameters:

Name	Type	Default
`bounds`	`Rect` Bounds to fit inside viewport.
`width`	`number` Width of the viewport.
`height`	`number` Height of the viewport.
`minZoom`	`number` Minimum zoom level of the resulting viewport.
`maxZoom`	`number` Maximum zoom level of the resulting viewport.
`padding`	`Padding` Padding around the bounds.

Returns:

A transformed Viewport that encloses the given bounds which you can pass to e.g. setViewport .

Name	Type
`x`	`number`
`y`	`number`
`zoom`	`number`

Notes

This is quite a low-level utility. You might want to look at the fitView or fitBounds methods for a more practical api.