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. A group counts as one layer: reordering it moves all of its children together, while a grouped object is reordered within its group.
Configuring ObjectsPreview
Pass a KritzelObjectConfig to the objectConfig prop to decide in one place which objects can be rotated or resized and which get a titlebar. Each option is either a boolean for every object or a function that receives an object and returns a boolean. Decide by type with instanceof against the classes your Kritzel package exports, or compare object.__class__ as below.
import type { KritzelObjectConfig } from '@kritzel/react-editor';
const objectConfig: KritzelObjectConfig = {
hasTitlebar: (object) => !!object.name,
isRotatable: (object) => object.__class__ !== 'KritzelText',
isResizable: (object) => object.__class__ !== 'KritzelImage',
};
isRotatable and isResizable default to true and combine with the object's own flags of the same name, so either one can forbid the gesture. Groups and multi-selections can only be rotated or resized when every object inside them allows it. Functions must be synchronous and cheap, and a function that throws resolves to the option's default. Define it at module level or with useMemo, and pass a new object to change it at runtime, because the editor only rerenders when it receives a new configuration object.
The configuration is local to your app and neither persisted nor synced. Set the flags on an object instead to apply a restriction on every client.
API Details
For the full list of related APIs, see the following reference sections.