Introduction
Actions are the core mechanism for handling user-driven changes in Weave.js. Whether you’re adding a node, moving elements, updating properties, or triggering a custom behavior, Actions provide a structured, trackable way to apply changes to the shared state.
Actions help keep your application logic clean and consistent, and collaborative. In Weave.js, if something meaningful happens—it’s probably through an Action.
Weave.js includes a set of built-in Actions, but you can also create your own to tailor functionality to your specific application needs.
Available actions
Weave.js team maintain a set of actions, think of them as how the users interact with the canvas to build visual collaborative applications. This are the actions:
The WeaveAction node is the abstract class that defines the blueprint of a action in Weave.js.
Enables users to directly comment and give feedback on the stage.
Allows users to erase (delete) elements of the canvas. When enabled the user can click on an element and it will be erased.
Allows users to enable/disable the panning of canvas. When enabled the user can pan the canvas at its will.
Allows users to enable/disable the selection mode of the canvas. When enabled the users can select nodes, move then, resize them, etc.
Allows users to align selected nodes.
Enables users to paint freeform strokes on the canvas, similar to a digital brush.
Enables users to add new connector nodes to the canvas by clicking or touching on nodes pre-defined anchors.
Enables users to create new ellipses nodes on the canvas.
Enables users to add and image to the canvas by selecting a file, drag & drop from your application, drag & drop external file or when copying from an external source.
Enables users to add multiple images to the canvas by selecting files, drag & drop files from your application, or drag & drop external files.
Enables users to create new rectangle nodes on the canvas.
Enables users to place a polygon node on the canvas using a preset shape (triangle, diamond, pentagon, hexagon, octagon or decagon).
Enables users to add new star nodes to the canvas by clicking or touching on it.
Enables users to create a single-stroke line on the canvas.
Enables users to add new text nodes to the canvas by clicking or touching on it.
Enables users to add videos to the canvas by selecting a file.
Enables users to add new arrow nodes to the canvas by clicking or touching on it.
Enables users to create a single-stroke line on the canvas.
Enables users to create continuos lines on the canvas with N segments on the canvas.
Enables users to create new regular polygons nodes on the canvas.
Enables users to add new measure nodes to the canvas by clicking or touching on it.
Enables users to create frame nodes by clicking on the canvas.
Automatically adjusts the zoom and position of the canvas to ensure all visible nodes fit neatly within the viewport.
Automatically adjusts the zoom and position of the canvas to ensure all selected nodes fit neatly within the viewport.
Enables users to incrementally zoom into the canvas, providing a more detailed view of content.
Enables users to incrementally zoom out the canvas, providing a more general view of content.
Automatically adjusts the zoom and position of the canvas to ensure all selected nodes fit neatly within the viewport, and then proceeds to export the viewport as an image.
Automatically adjusts the zoom and position of the canvas to ensure all visible nodes fit neatly within the viewport, and then proceeds to export the viewport as an image.