Skip to main content


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.

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

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.

Binding to a Surface event#

There are two ways to bind to an event on a Surface. You can use the bind method:

surface.bind(EVENT_NODE_ADDED, (p:SurfaceVertexAddedParams) => {    })

or you can supply a map of events to bind in the render params for some Surface:

toolkit.render(someElement, {        ...    events:{        [EVENT_NODE_ADDED]:(p:SurfaceVertexAddedParams) => {                    }    },    ...    })

Note for users of Angular/Vue/React - the object passed as the second argument to the render method shown above is referred to as the "render params" in the various integration documentation.

Event List#

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