Events
Both MJS Diagram Viewer and Editor are web components and dispatch events using the standard custom event flow.
You add and remove event listeners the same way you do for the built-in events using the addEventListener() method. Your handlers receive the CustomEvent object where the detail property contains the specific (custom) event data for the particular event.
MJS Diagram comes with a full TypeScript support for custom events and strongly-typed detail properties for various event types.
Editor events
The most important Editor event that you would want to listen to in almost any real-life scenario is saveclick. It is dispatched when user clicks the save button in the toolbar. It receives a CustomEvent object with detail property of RenderEventData type which contains the state property with the diagram state you can serialize, save to a database, load back for editing or pass to the Viewer.
Here's a simple handler for the saveclick event:
editor.addEventListener("saveclick", (ev) => {
let diagram = ev.detail.state;
// save the diagram to the database
...
// show it in the DiagramViewer
viewer.show(diagram);
});Editor-level events
These are dispatched for various DiagramEditor lifecycle events. Their detail property is of type DiagramEditorEventData which gives you access to the editor instance.
editorinit- Editor component initialized.diagramload- Diagram loaded (restored).statechange- Diagram state changed. Fired on every stencil/connector creation, edit, deletion. This event can be used to implement an auto-save function.
Stencil-level events
These are fired for stencil interactions. The detail property is of type StencilEditorEventData.
stencilpointerenter- Pointer entered stencil space.stencilpointerleave- Pointer left stencil space.stencilclick- Stencil was clicked.
Connector-level events
These are fired for connector interactions. The detail property is of type ConnectorEditorEventData.
connectorpointerenter- Pointer entered connector space.connectorpointerleave- Pointer left connector space.connectorclick- Connector was clicked.
Viewer events
DiagramViewer dispatches events through its lifecycle and interactions with objects.
Viewer-level events
These are dispatched for Viewer's lifecycle events and contain detail property of type DiagramViewerEventData
viewerinit- Viewer initialized.diagramload- Diagram loaded (restored).
Stencil-level events
These are fired for stencil interactions. The detail property is of type StencilEventData.
stencilpointerenter- Pointer entered stencil space.stencilpointerleave- Pointer left stencil space.stencilclick- Stencil was clicked.
Connector-level events
These are fired for connector interactions. The detail property is of type ConnectorEventData.
connectorpointerenter- Pointer entered connector space.connectorpointerleave- Pointer left connector space.connectorclick- Connector was clicked.