Skip to content

Mutating shapes

To mutate an array of shapes, you can simply call editor.actions.update() as below:

const shapes = editor.selection.getShapes();
strokeColor: "#00ff00",
strokeWidth: 3,
roughness: 2
}, shapes);

In the most cases, you can mutate shapes just using editor.actions.update(). If not, you have to understand Action and Transaction.


Action is a collection of transactions, which can be undone/redone as a whole. All functions in editor.actions are actions.

You can create an action with one or more transaction as below:

const currentPage = this.editor.getCurrentPage();
if (currentPage) {
const canvas = this.editor.canvas;
// start action
editor.transform.startAction("action name");
// do one or more transactions
editor.transform.transact((tx) => {
// ...
// finish action


Transation is an operation consists of a set of mutations. A transaction provides a set of atomic mutations. You need to combine them to make the desired changes on shapes. A transaction is immediately applied and can be visually confirmed in the editor.

import { macro } from "@dgmjs/core";
editor.transform.transact((tx) => {
// mutations
// resolve all constraints
macro.resolveAllConstraints(tx, currentPage, canvas);

If making changes using only atomic mutations is too cumbersome, you can use macro functions. These provide utility functions that allow you to easily handle the desired changes with multiple mutations.