getTransformForBounds()
Source on Github (opens in a new tab)
⚠️
This function is deprecated and will be removed in React Flow 12. Use getViewportForBounds instead.
This util tells you what to set the viewport to in order to fit 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.
import { getTransformForBounds } from 'reactflow';
const transform = getTransformForBounds(
{
x: 0,
y: 0,
width: 100,
height: 100,
},
1200,
800,
0.5,
2,
);
Signature
Name | Type | Default |
---|---|---|
#Params |
|
|
# bounds | Rect |
|
# width | number |
|
# height | number |
|
# minZoom | number |
|
# maxZoom | number |
|
# padding? | number |
|
#Returns |
|
|
# [0] | number The x position of the transformed viewport. |
|
# [1] | number The y position of the transformed viewport |
|
# [2] | number The zoom level of the transformed viewport. |
|
Notes
- This is quite a low-level utility. You might want to look at the
fitView
orfitBounds
methods for a more practical api. - This function is called getTransform... for historical reasons. Its return
type represents a
Viewport
in tuple form.
Last updated on