Skip to main content

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.

port:addedEVENT_PORT_ADDEDFired when a port has been added to some node/groupPortAddedParams
port:removedEVENT_PORT_REMOVEDFired whenever a port is removed from some node or group.PortRemovedParams
port:updatedEVENT_PORT_UPDATEDFired whenever the data model for a port changesPortUpdatedParams
node:addedEVENT_NODE_ADDEDFired whenever a new node is added to the data modelNodeAddedParams
node:removedEVENT_NODE_REMOVEDFired when a node has been removed from the datasetNodeRemovedParams
node:updatedEVENT_NODE_UPDATEDFired whenever a node's data is updatedVertexUpdatedParams
group:addedEVENT_GROUP_ADDEDFired whenever a new group is added to the data modelGroupAddedParams
group:removedEVENT_GROUP_REMOVEDFired when a group has been removed from the datasetGroupRemovedParams
group:updatedEVENT_GROUP_UPDATEDFired whenever a group's data is updatedVertexUpdatedParams
group:member:addedEVENT_GROUP_MEMBER_ADDEDFired when a node/group has been added to a groupGroupMemberAddedParams
group:member:removedEVENT_GROUP_MEMBER_REMOVEDFired when a node/group has been removed from a groupGroupMemberRemovedParams
edge:addedEVENT_EDGE_ADDEDFired whenever a new edge is added to the data modelEdgeAddedParams
edge:updatedEVENT_EDGE_UPDATEDFired whenever the data model for an edge changesEdgeUpdatedParams
edge:removedEVENT_EDGE_REMOVEDFired when an edge is removedEdgeRemovedParams
edge:targetEVENT_EDGE_TARGET_CHANGEDFired when the target for some edge has changedEdgeTargetChangedParams
edge:sourceEVENT_EDGE_SOURCE_CHANGEDFired when the source for some edge has changedEdgeSourceChangedParams
edge:pathEditedEVENT_EDGE_PATH_EDITEDFired when the path for some edge has changedEdgePathEditedParams
undoredo:updateEVENT_UNDOREDO_UPDATEFired when the undo/redo manager changes stateUndoRedoUpdateParams
selection:clearedEVENT_SELECTION_CLEAREDFired when a Toolkit instance's current selection is cleared{selection:Selection}
graphClearStartEVENT_GRAPH_CLEAR_STARTFired when the clear() method has been called, but before the data has been cleared
graphClearedEVENT_GRAPH_CLEAREDFired after the data has been cleared by the clear() method
dataLoadStartEVENT_DATA_LOAD_STARTFired immediately prior to some data being loaded
dataLoadEndEVENT_DATA_LOAD_ENDFired immediately after some data was loaded
selectEVENT_SELECTFired 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
deselectEVENT_DESELECTFired when some object is removed from the Toolkit's current selection.{obj: Node