Skip to main content

Selected Objects

Managing object selection is crucial for interactive apps. The Kittl SDK provides methods via kittl.state to get and set which objects the user currently has selected on the canvas.

Getting Selected Objects​

You can retrieve the IDs of the currently selected objects. If multiple objects are selected or objects within groups are selected, you have two options depending on how deep you want to go.

To get only the top-level selected objects (often what you want):

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

if (result.isOk) {
    console.log('Selected object IDs:', result.result);
}

To get all selected objects, including those deeply nested inside groups:

const allResult = await kittl.state.getAllSelectedObjectsIds();

if (allResult.isOk) {
    console.log('All nested selected object IDs:', allResult.result);
}

Setting Selected Objects​

You can programmatically change the user's selection by passing an array of object IDs you want to select.

const selectResult = await kittl.state.setSelectedObjectsIds(['object-id-1', 'object-id-2']);

if (selectResult.isOk) {
    console.log('Selection updated successfully!');
}

Selected Layers​

Layers differ from objects — they represent items at the same level in the group structure and may include group IDs (not just leaf objects).

// Get selected layer IDs
const layersResult = await kittl.state.getSelectedLayersIds();

if (layersResult.isOk) {
    console.log('Selected layers:', layersResult.result);
}

// Set selected layers
await kittl.state.setSelectedLayersIds(['layer-id-1', 'group-id-1']);

Highlighted Object​

The highlighted object is the one currently being hovered over. You can read and set this programmatically.

// Get the currently highlighted object
const highlightedResult = await kittl.state.getHighlightedObjectId();

if (highlightedResult.isOk) {
    console.log('Highlighted:', highlightedResult.result); // string or null
}

// Set a highlighted object
await kittl.state.setHighlightedObjectId('object-id');

// Clear the highlight
await kittl.state.setHighlightedObjectId(null);

Updating Multiple State Fields​

Use setMany to update several app state fields in a single call instead of calling individual setters.

await kittl.state.setMany({
    selectedObjectsIds: ['object-1', 'object-2'],
    canvasMode: null,
    activeTool: { type: 'move' },
});