Events

The jsPlumb Toolkit offers a comprehensive set of events to which you can subscribe. These are broadly broken up into two categories - events fired by each Toolkit instance, which are events related to the underlying Graph, and presentation-level events - those fired by the Surface component, either from a bind on the Surface or via event registrations in its View.

Several events - such as node addition/removal etc - are fired by both the Toolkit and any associated Surfaces, but the arguments passed to your callback differ slightly: events fired by Surfaces contain DOM elements along with Toolkit objects, whereas Toolkit events pass strictly Toolkit objects.

Toolkit Events

You bind to events on an instance of the jsPlumb Toolkit with the bind method:

toolkit.bind("dataLoadEnd", function(d) {
  console.log("the data is", d);
});
EventDescriptionParameters
dataLoadStartNotification that loading of a dataset by the Toolkit instance has begun. This event is fired at the beginning of the `load` method.-
dataLoadEndNotification that loading of a dataset by the Toolkit instance has been completed. Fired at the end of the `load` method.-
dataAppendStartNotification that incremental loading of a dataset by the Toolkit instance has begun. This event is fired at the beginning of the `append` method.-
dataAppendEndNotification that incremental loading of a dataset by the Toolkit instance has been completed. Fired at the end of the `append` method.-
graphClearedNotification that the underlying graph was cleared.-
graphChangedNotification that the underlying graph was changed.-
nodeAddedNotification that a new Node has been added to the data model. The callback is passed the Node as argument.
  • data Data for the new Node; will be empty. You can populate this, as it's a reference to the data held by the Node.
  • node The new Node.
nodeRemovedNotification that a Node has been removed from the data model.
  • node The Node that was removed.
  • nodeId The id of the Node. You can just get this from `node.id` of course.
  • edges The list of Edges that were removed as a result of the removal of the given Node.
edgeAddedNotification that a new Edge has been added to the data model.
  • edge The new Edge.
  • addedByMouse If true, indicates the Edge was added by the user (as opposed to being loaded from the `load` method on the Toolkit.
edgeRemovedNotification that an Edge has been removed from the data model.
  • edgeThe Edge that was removed.
edgeTargetNotification that the target for some Edge has changed.
  • edgeThe Edge whose target was changed.
  • oldThe original target (Node or Port).
  • newThe current target (Node or Port).
edgeTargetNotification that the source for some Edge has changed.
  • edgeThe Edge whose source was changed.
  • oldThe original source (Node or Port).
  • newThe current source (Node or Port).
portAddedNotification that a Port has been added to some Node.
  • node The Node to which the Port was added.
  • port The new Port.
  • data Data for the new Port; will be empty, and as with the `nodeAdded` event, you can populate this.
portRemovedNotification that a Port has been removed from some Node.
  • node Node from which the Port was removed.
  • port Port that was removed.
  • edges List of Edges that were removed as a result of the removal of the given Port.
nodeRefreshedNotification that the data for some Node has changed. Generally fired as a result of calling `refreshNode` on an instance of the Toolkit. All Surfaces subscribe to this event and redraw the UI as needed in response.
  • node The Node that was refreshed.
edgeRefreshedNotification that the data for some Edge has changed. Generally fired as a result of calling `refreshEdge` on an instance of the Toolkit. All Surfaces subscribe to this event and redraw the UI as needed in response.
  • edge The Edge that was refreshed.
portRefreshed Notification that the data for some Port has changed. Generally fired as a result of calling `refreshPort` on an instance of the Toolkit. All Surfaces subscribe to this event and redraw the UI as needed in response.
  • node The Node to which the Port belongs.
  • port The Port that was refreshed.
nodeUpdated Notification that the data for some Node has changed. Fired as a result of calling `updateNode` on an instance of the Toolkit.
  • paramsCallback parameters
  • params.nodeThe Node that was updated.
  • params.updatesThe original updates that were passed to `updateNode`; an empty object if none.
edgeUpdated Notification that the data for some Edge has changed. Fired as a result of calling `updateEdge` on an instance of the Toolkit.
  • paramsCallback parameters
  • params.edgeThe Edge that was updated.
  • params.updatesThe original updates that were passed to `updateEdge`; an empty object if none.
portUpdated Notification that the data for some Port has changed. Fired as a result of calling `updatePort` on an instance of the Toolkit.
  • paramsCallback parameters
  • params.port The Port that was updated.
  • params.node The Node that owns the Port that was updated.
  • params.updatesThe original updates that were passed to `updatePort`; an empty object if none.
dataUpdated Notification that the data for some object has changed. This event is fired after any - and all - other event that has modified the data. -

Rendering Events

An instance of the Toolkit instance may have zero or more Surfaces attached to it. The Surface widget fires a number of events that you can listen to in order to hook into the rendering process. For instance, you might subscribe to the nodeAdded event in order to attach behaviour to each of your nodes as they are drawn on screen. Or you might subscribe to edgeAdded in order to be able to take action when a user has established a new connection using the mouse.

Many of these events are re-posted Toolkit events, and for these you can choose to subscribe on either the Toolkit instance or on each Surface. The difference is that when you subscribe to a Surface's version of these events, you will often also get an associated DOM element, which can be useful.

Note the vast majority of events pass a single argument - params - to your listener, so the parameter lists refer to the possible properties in that object. Where an event differs you will see the difference in the callback's method signature.

Events on the Surface widget are discussed in detail in the Surface widget documentation.

View Events

In the view parameter you supply to a render call, you can register events in Node, Port and Edge definitions. This is discussed in detail in the Surface widget documentation.