Skip to main content

Viewport State

You can read or update multiple properties of the canvas viewport at the same time using kittl.state.viewport. This is useful when you want to make widespread changes, like panning and zooming simultaneously, without individual setter calls.

Getting the Full Viewport​

To retrieve the entire structure of the viewport, use the get method. It returns data such as the coordinates, zoom level, transform, and positions.

const result = await kittl.state.viewport.get();

if (result.isOk) {
    const viewport = result.result;
    console.log('Current viewport:', viewport);
}

Setting the Viewport​

Use the set method to patch multiple properties at once. The set method accepts a ViewportPatch which supports three mutually exclusive update modes:

Zoom + optional position​

// Update zoom and pan simultaneously
await kittl.state.viewport.set({
    zoom: 2.5,
    position: { x: 500, y: 500 },
});

// Update zoom only
await kittl.state.viewport.set({
    zoom: 1.5,
});

Position only (pan)​

await kittl.state.viewport.set({
    position: { x: 300, y: 200 },
});

Transform matrix (low-level)​

// Directly set the full transformation matrix [scaleX, skewX, skewY, scaleY, translateX, translateY]
await kittl.state.viewport.set({
    transform: [2, 0, 0, 2, 100, 100],
});

See Viewport API Reference for full details on ViewportPatch variants.