Skip to main content

Events

There are two types of events fired by the Toolkit that you may wish to listen to - model events, and UI events. Model events are fired by instances of JsPlumbToolkit, and pertain to changes in the data model. UI events 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.

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.

EventConstantDescriptionPayload
port:removedEVENT_PORT_REMOVEDFired whenever a port is removed from some node or group.PortRemovedParams
node:addedEVENT_NODE_ADDEDFired whenever a new node is added to the data modelNodeAddedParams
group:addedEVENT_GROUP_ADDEDFired whenever a new group is added to the data modelGroupAddedParams
port:updatedEVENT_PORT_UPDATEDFired whenever the data model for a port changesPortUpdatedParams
edge:updatedEVENT_EDGE_UPDATEDFired whenever the data model for an edge changesEdgeUpdatedParams
node:updatedEVENT_NODE_UPDATEDFired whenever a node's data is updatedVertexUpdatedParams
group:updatedEVENT_GROUP_UPDATEDFired whenever a group's data is updatedVertexUpdatedParams

UI Events#

These events are fired by the Surface widget. Note that some of these events are also fired by the underlying toolkit, but the surface payload provides the related UI element information.

EventConstantDescriptionPayload
node:addedEVENT_NODE_ADDEDFired whenever a new node is added to the data modelSurfaceVertexAddedParams
group:addedEVENT_GROUP_ADDEDFired whenever a new node is added to the data modelSurfaceVertexAddedParams
group:removedEVENT_GROUP_REMOVEDFired when a group is removedSurfaceGroupRemovedParams
group:resizedEVENT_GROUP_RESIZEFired when a group has been resizedSurfaceGroupResizedParams
edge:addedEVENT_EDGE_ADDEDFired when a new edge has been addedSurfaceEdgeAddedParams
panEVENT_PANFired when the surface has just been panned.SurfacePanZoomParams
zoomEVENT_ZOOMFired when the surface's zoom has just changedSurfacePanZoomParams
node:move:startEVENT_NODE_MOVE_STARTFired when a node/group has just begun to be draggedSurfaceVertexMoveStartParams
node:moveEVENT_NODE_MOVEFired continuously while a node/group is being draggedVertexMovedParams
node:move:endEVENT_NODE_MOVE_ENDFired when a node has just been draggedVertexMovedParams
group:move:endEVENT_GROUP_MOVE_ENDFired when a group has just been draggedVertexMovedParams
modeChangedEVENT_SURFACE_MODE_CHANGEDFired when the mode for a surface was changedSurfaceMode
destroyEVENT_DESTROYFired when a surface has been destroyedSurface
group:collapseEVENT_GROUP_COLLAPSEFired when a group has been collapsedSurfaceGroupCollapsedParams
group:expandEVENT_GROUP_EXPANDFired when a group has been expandedSurfaceGroupExpandedParams