Skip to main content

Objects

Overview​

Everything placed on the Kritzel canvas is considered an object. Objects can be either added using a tool from the toolbar or programmatically through the editor's API.

Kritzel comes with the following built-in objects:

Take a look at Tools for more information on how to create and manipulate objects using the toolbar.

Adding Objects​

You can manually inject objects into the canvas programmatically, bypassing the need for a user to draw them. Create the appropriate object class, then await addObject() through a typed editor ref after onIsReady fires.

Removing Objects​

You can remove objects from the canvas programmatically when they are no longer needed. Await removeObject() so dependent UI state is refreshed only after the mutation completes.

Updating Objects​

Object properties should never be mutated directly. Instead, changes go through updateObject(), which takes the object and a partial set of properties to apply. This ensures the change is properly persisted, synced, and reflected on the canvas. Since updateObject() returns the replacement object, reselect that returned instance when the selection should remain active.

Selecting Objects​

You can programmatically retrieve the currently selected objects, select specific objects, or clear the selection.

Filtering Objects​

Use getAllObjects() to retrieve the current canvas objects, or findObjects() to return only the objects that match a predicate. findObjects() excludes Kritzel's internal selection-related objects.

Grouping Objects​

Objects can be grouped together so they can be moved and transformed as a single unit.

Ordering Objects​

Objects' z-index can be changed to control their visual stacking order, for example by bringing them to the front or sending them backward.

API Details​

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