Tools

Overview

In Kritzel, the easiest way to manually interact with the canvas is through tools. Kritzel comes with a configurable toolbar that allows users to select and switch between a set of different prebuilt tools. A tool handles user interaction on the canvas and typically either adds or removes objects.

The toolbar includes the following tools:

• Selection Tool
• Brush Tool
• Line Tool
• Shape Tool
• Text Tool
• Image Tool
• Eraser Tool

You can also customize existing tool configurations or register entirely new tools to extend editor capabilities.

If you rather want to programmatically interact with the canvas, take a look at the Objects section.

Adjusting the Toolbar

You can adjust the toolbar by passing a custom toolbarItems array to <KritzelEditor>. The editor will register and render only the tools you provide. In this example, the toolbar items are limited to selection, brush, and text. Use isDefault to specify the default active tool.

Adjusting the Tool Config

Each toolbar item of type tool accepts an optional config property for its initial values and the options shown in the configuration tooltip. Omitted properties use the tool's defaults.

• Brush Config
• Line Config
• Shape Config
• Text Config

Add a toolbar item of type config to let users adjust the active tool at runtime.

Adding Custom Tools

To add a custom tool, include it as an item in the toolbarItems array. Kritzel registers the tool automatically and renders it in the toolbar. This example adds a highlighter built from KritzelBrushTool alongside selection, pen, and text.

Switching the Active Tool

You can programmatically change the currently active tool by calling the setActiveTool method with the name of the tool on the editor instance.

Disabling Tools

In order to disable a specific tool, set isDisabled on the corresponding entry of the toolbarItems array. The tool is rendered in a disabled state and can no longer be selected, while every other tool remains fully interactive. isDisabled accepts a plain boolean or a function that either returns a boolean or a Promise<boolean>, so you can resolve it dynamically from your own state.

API Details

For the full list of related APIs, see the following reference sections.

• Tool Management
• Tools