212_getviewportforbounds__

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

Returns a viewport that encloses the given bounds with padding.

Parameters

• 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

• 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.