Viewport Zoom

Controlling the zoom of the viewport allows your app to focus the user's attention or step back to evaluate the entire canvas.

Getting the Zoom Level

You can capture exactly how zoomed in or out the user currently is. The zoom value is represented as a number (e.g., 1 for 100%, 0.5 for 50%, 2 for 200%).

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

if (result.isOk) {
    console.log(`The user is zoomed in at ${result.result * 100}%`);
}

Setting the Zoom Level

Adjust the zoom seamlessly by calling setZoom and providing the desired numeric value.

// Zoom out slightly to 80%
const setResult = await kittl.state.viewport.setZoom(0.8);

if (setResult.isOk) {
    console.log('Successfully set the zoom level.');
}