Skip to main content

Active Tool

The active tool represents the primary interactive control the user has equipped, such as the pen tool, the move tool, or drawing a specific shape.

Getting the Active Tool

You can retrieve the currently active tool from the state:

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

if (result.isOk) {
const activeTool = result.result;

if (activeTool) {
console.log('User is currently using the tool:', activeTool.type); // e.g. "move", "pen", "shape"
} else {
console.log('No tool is currently active.');
}
}

Setting the Active Tool

To switch the user's active tool, pass the desired tool configuration:

// Switch to the vector pen tool
const setResult = await kittl.state.setActiveTool({ type: 'pen' });

if (setResult.isOk) {
console.log('Switched to pen tool.');
}

If you need to switch to a shape drawing tool, you'll need to pass the shape type as well:

// Switch to drawing rectangles
const setShapeToolResult = await kittl.state.setActiveTool({
type: 'shape',
shape: 'rectangle'
});

if (setShapeToolResult.isOk) {
console.log('Ready to draw a rectangle!');
}