Canvas Mode

The canvas mode controls the top-level interaction state of the Kittl canvas, such as when users are actively cropping or erasing an object. You can fetch or update this mode using the SDK.

Getting the Canvas Mode

To check what mode the canvas is currently in:

const result = await kittl.state.getCanvasMode();

if (result.isOk) {
    // Mode could be 'erase', 'crop', 'reframe', or null (default state)
    console.log('Current canvas mode:', result.result);
}

Setting the Canvas Mode

You can also programmatically switch the canvas mode. To reset back to the default state, pass null.

// Switch into crop mode for a specific object.
const setModeResult = await kittl.state.setCanvasModeWithTarget('crop', {
    targetId: 'my-image-id',
});

if (setModeResult.isOk) {
    console.log('Switched to crop mode.');
}

Custom Canvas Modes

Use setCustomCanvasMode() to attach JSON state to a mode owned by your extension. It requires the design:state:write scope. The ID must differ from the built-in mode names (crop, erase, erase-and-fill, reframe, and inpaint).

const result = await kittl.state.setCustomCanvasMode({
    id: 'my-extension-preview',
    state: { boardId: 'my-board-id' },
});

if (result.isOk) {
    console.log('Entered the custom canvas mode.');
}

getCanvasMode() returns the built-in mode name, the custom mode ID, or null. getCanvasModeTargetId() returns the target ID for a built-in mode, or null for custom modes.

When subscribing to canvasMode through kittl.appStore.subscribe(), the value is an object or null: built-in modes contain { mode, targetId }, and custom modes contain { mode: 'custom', id, state }. The previous top-level canvasModeTargetId state field is no longer available; read targetId from the built-in mode object instead.

Reading the Target Object

kittl.state.getCanvasModeTargetId() returns an SDK result containing the built-in mode's target ID, or null when there is no target. This method was added in SDK 0.0.9.