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.
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 |
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/Svelte - 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
Event | Constant | Description | Payload |
---|---|---|---|
node:added | EVENT_NODE_ADDED | Fired whenever a new node is added to the data model | SurfaceVertexAddedParams |
group:added | EVENT_GROUP_ADDED | Fired whenever a new node is added to the data model | SurfaceVertexAddedParams |
group:removed | EVENT_GROUP_REMOVED | Fired when a group is removed | SurfaceGroupRemovedParams |
group:resized | EVENT_GROUP_RESIZE | Fired when a group has been resized | SurfaceGroupResizedParams |
edge:added | EVENT_EDGE_ADDED | Fired when a new edge has been added | SurfaceEdgeAddedParams |
pan | EVENT_PAN | Fired when the surface has just been panned. | SurfacePanZoomParams |
zoom | EVENT_ZOOM | Fired when the surface's zoom has just changed | SurfacePanZoomParams |
node:move:start | EVENT_NODE_MOVE_START | Fired when a node/group has just begun to be dragged | SurfaceVertexMoveStartParams |
node:move | EVENT_NODE_MOVE | Fired continuously while a node/group is being dragged | VertexMovedParams |
node:move:end | EVENT_NODE_MOVE_END | Fired when a node has just been dragged | VertexMovedParams |
group:move:end | EVENT_GROUP_MOVE_END | Fired when a group has just been dragged | VertexMovedParams |
modeChanged | EVENT_SURFACE_MODE_CHANGED | Fired when the mode for a surface was changed | SurfaceMode |
destroy | EVENT_DESTROY | Fired when a surface has been destroyed | Surface |
group:collapse | EVENT_GROUP_COLLAPSE | Fired when a group has been collapsed | SurfaceGroupCollapsedParams |
group:expand | EVENT_GROUP_EXPAND | Fired when a group has been expanded | SurfaceGroupExpandedParams |