Introduction
Plugins are the modular pieces that extend and enhance the functionality of Weave.js. They allow you to add behavior to the canvas: like selection, zooming, snapping, panning, keyboard shortcuts, and more, without modifying the core system.
Plugins are designed to be lightweight, composable, and easy to integrate, making it simple to build rich, interactive experiences. Whether you’re enabling multi-selection, managing drag-and-drop, or integrating custom logic, Plugins are how you supercharge your canvas with reusable, context-aware features.
Weave.js includes a set of built-in plugins, but you can also create your own to tailor functionality to your specific application needs.
Plugin lifecycle
Weave.js plugin lifecycle is pretty simple:
|
Decoupled from the lifecycle
The following methods are called outside the lifecycle:
|
Available plugins
Weave.js team maintain a set of plugins, think of them as added functionality to build visual collaborative applications. This are the plugins:
Gives the list of users currently active in a collaborative session. Ideal as source information to paint the user list on the UI.
Displays real-time cursors or pointers for all connected users on the canvas.
Displays what users are doing on the canvas. For example when dragging or transforming an element.
Displays real-time the user selection for all connected users on the canvas.
Renders the provided comments on a special layer in order to enable interactivity.
Adds custom right-click menus to the canvas, enabling users to access context-specific actions
Enables users to copy & paste selected nodes using familiar keyboard shortcuts like Ctrl/Cmd + C and Ctrl/Cmd + V or through actions on the context menu.
Enables users to select one or multiple nodes on the canvas through clicks, shift-clicks, or drag-selection (marquee).
Enables more feedback to end-users when multi-selecting.
Adds smart alignment assistance by enabling nodes to snap to guides or other nodes as they are moved or resized. Also allows the support to create custom horizontal and vertical guides onto containers.
Enables drag-and-drop support on the canvas, allowing users to drop elements—such as shapes, files, or custom components—directly onto the canvas.
Adds a visual background grid to the canvas stage, helping users align and position elements more precisely.
Enables to move selected nodes by a delta when pressing shift + keyboard arrows.
Enables users to navigate the canvas by dragging to move around the Stage.
Automatically adjusts the canvas size to fit its container or the browser window, ensuring a responsive and adaptive user experience.
Enables smooth zooming in and out of the canvas, allowing users to focus on details or get an overview of the entire workspace.
Custom Plugins
Developers can also build their own plugins, empowering this way their applications with new features closer to the needs of their applications.
For this we provide an extension mechanism that allows to define your own plugins and use them on your application.
WeavePlugin class
In Weave.js a Plugin is a class that extends the WeavePlugin abstract class, and implements a set of methods that define the Plugin behavior.
|
Access the Weave instance
You can access Weave.js main instance via |
To build a plugin, create a class that extends the WeavePlugin abstract class, and implement the following methods:
getName
getName(): stringThe getName method returns the name of the plugin, used as an identifier
on the Weave instance. The name of the plugin must be unique among other plugins.
onInit
onInit?(): voidThe onInit method is optional, and is called after the first render of the
Weave instance. It’s a good place to initialize the plugin state, events, etc.