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 via the editor's API.

Kritzel comes with the following built-in objects:

• Path
• Line
• Shape
• Text
• Image
• Group
• Dynamic Object

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.

Removing Objects

You can remove objects from the canvas programmatically when they are no longer needed.

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.

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

Bind a KritzelObjectConfig to [objectConfig] 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/angular-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 as a stable component field, or derive it with computed(), 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.

• Object
• Selection
• Ordering
• Alignment
• Grouping