Model Events
Model events are fired by instances of JsPlumbToolkit, and pertain to changes in the data model. UI events, discussed on this page, are fired by the Surface widget, and pertain to changes in the UI. In many cases the Surface widget will fire the same event as its associated Toolkit instance - for example, a Toolkit instance fires a node:removed event, which the Surface receives; the Surface updates the UI as necessary, and then itself fires a node:removed event, but with a slightly different payload. There are also other UI specific events which the Toolkit does not fire, such as those associated with dragging a vertex, or changing the zoom.
The Toolkit also supports binding event handlers to nodes, groups, ports and edges - you can declare event handlers on a per-type basis for each of your model objects. For more information, take a look at the views documentation.
Model Events
Model events are fired by an instance of the Toolkit, and can be bound using the bind method on an instance of JsPlumbToolkit. In Typescript the bind method takes an optional generic parameter, which we encourage you to set (according to the values given on this page).
These are the events you can bind to on an instance of JsPlumbToolkit. The table lists both the event's string value, as well as its value in the Toolkit's constants, along with a description of what causes the event to fire, and the interface that defines the callback payload.
| Event | Constant | Description | Payload |
|---|---|---|---|
| port:added | EVENT_PORT_ADDED | Fired when a port has been added to some node/group | PortAddedParams |
| port:removed | EVENT_PORT_REMOVED | Fired whenever a port is removed from some node or group. | PortRemovedParams |
| port:updated | EVENT_PORT_UPDATED | Fired whenever the data model for a port changes | PortUpdatedParams |
| node:added | EVENT_NODE_ADDED | Fired whenever a new node is added to the data model | NodeAddedParams |
| node:removed | EVENT_NODE_REMOVED | Fired when a node has been removed from the dataset | NodeRemovedParams |
| node:updated | EVENT_NODE_UPDATED | Fired whenever a node's data is updated | VertexUpdatedParams |
| group:added | EVENT_GROUP_ADDED | Fired whenever a new group is added to the data model | GroupAddedParams |
| group:removed | EVENT_GROUP_REMOVED | Fired when a group has been removed from the dataset | GroupRemovedParams |
| group:updated | EVENT_GROUP_UPDATED | Fired whenever a group's data is updated | VertexUpdatedParams |
| group:member:added | EVENT_GROUP_MEMBER_ADDED | Fired when a node/group has been added to a group | GroupMemberAddedParams |
| group:member:removed | EVENT_GROUP_MEMBER_REMOVED | Fired when a node/group has been removed from a group | GroupMemberRemovedParams |
| edge:added | EVENT_EDGE_ADDED | Fired whenever a new edge is added to the data model | EdgeAddedParams |
| edge:updated | EVENT_EDGE_UPDATED | Fired whenever the data model for an edge changes | EdgeUpdatedParams |
| edge:removed | EVENT_EDGE_REMOVED | Fired when an edge is removed | EdgeRemovedParams |
| edge:target | EVENT_EDGE_TARGET_CHANGED | Fired when the target for some edge has changed | EdgeTargetChangedParams |
| edge:source | EVENT_EDGE_SOURCE_CHANGED | Fired when the source for some edge has changed | EdgeSourceChangedParams |
| edge:pathEdited | EVENT_EDGE_PATH_EDITED | Fired when the path for some edge has changed | EdgePathEditedParams |
| undoredo:update | EVENT_UNDOREDO_UPDATE | Fired when the undo/redo manager changes state | UndoRedoUpdateParams |
| selection:cleared | EVENT_SELECTION_CLEARED | Fired when a Toolkit instance's current selection is cleared | {selection:Selection} |
| graphClearStart | EVENT_GRAPH_CLEAR_START | Fired when the clear() method has been called, but before the data has been cleared | |
| graphCleared | EVENT_GRAPH_CLEARED | Fired after the data has been cleared by the clear() method | |
| dataLoadStart | EVENT_DATA_LOAD_START | Fired immediately prior to some data being loaded | |
| dataLoadEnd | EVENT_DATA_LOAD_END | Fired immediately after some data was loaded | |
| select | EVENT_SELECT | Fired when some object is added to the Toolkit's current selection. The append flag in the payload indicates whether or not the given object was appended to the selection or if it replaced the previous selection | {append: boolean,obj: Node |
| deselect | EVENT_DESELECT | Fired when some object is removed from the Toolkit's current selection. | {obj: Node |