ReferenceUtilsgetTransformForBounds()

getTransformForBounds()

Source on Github

⚠️

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

#Params
#bounds
Rect
#width
number
#height
number
#minZoom
number
#maxZoom
number
#padding?
number
0.1
#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 or fitBounds methods for a more practical api.
  • This function is called getTransform… for historical reasons. Its return type represents a Viewport in tuple form.
Utils