getViewportForBounds()
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. |
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
Last updated on