Skip to main content

Viewport Position

Position represents the spatial x and y shifting (or pan) of the entire canvas from the user's perspective. It essentially governs what lies right at the visual epicenter of the screen.

Getting the Position​

To understand where the viewport is currently centered within the infinite canvas space:

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

if (result.isOk) {
    console.log(`Current pan position is X: ${result.result.x}, Y: ${result.result.y}`);
}

Setting the Position​

Simply panning the viewport is as easy as providing an x and y value to setPosition.

// Pan the viewport to center on coordinate 500, 500
const setResult = await kittl.state.viewport.setPosition({ x: 500, y: 500 });

if (setResult.isOk) {
    console.log('Panning to new position successful.');
}