@vue-flow/monorepo • Docs

---

Function: getTransformForBounds()

getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding): ViewportTransform

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 = 0.1

Padding around the bounds.

Returns

ViewportTransform

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

Remarks

You can determine bounds of nodes with getNodesBounds and getBoundsOfRects

Example

const { x, y, zoom } = getViewportForBounds(
{ x: 0, y: 0, width: 100, height: 100},
1200, 800, 0.5, 2);