Viewport Coordinates

Coordinates define the bounding box of what is currently visible inside the viewport bounds. Checking coordinates ensures you know exactly which portion of the canvas the user is peering at.

Getting the Coordinates

To retrieve the current bounding coordinates of the active viewport display (which contains the corners like top-left, bottom-right):

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

if (result.isOk) {
    const coords = result.result;
    console.log('Top Left:', coords.tl);
    console.log('Bottom Right:', coords.br);
}

Setting the Coordinates

By utilizing setCoords, you can explicitly set the active bounding space of the viewport. The view will automatically adjust the transform and zoom required to display this bounding area!

const boundingCoords = {
    tl: { x: 0, y: 0 },
    br: { x: 1000, y: 1000 }
    tr: { x: 1000, y: 0 },
    bl: { x: 0, y: 1000 },
};

const setResult = await kittl.state.viewport.setCoords(boundingCoords);

if (setResult.isOk) {
    console.log('Viewport coordinates updated.');
}