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.');
}