Overview - jsPlumb Toolkit Edition

Events / Overview

Toolkit Events
Rendering Events
View Events

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.

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);
});

Event	Description	Parameters
dataLoadStart	Notification that loading of a dataset by the Toolkit instance has begun. This event is fired at the beginning of the `load` method.	-
dataLoadEnd	Notification that loading of a dataset by the Toolkit instance has been completed. Fired at the end of the `load` method.	-
dataAppendStart	Notification that incremental loading of a dataset by the Toolkit instance has begun. This event is fired at the beginning of the `append` method.	-
dataAppendEnd	Notification that incremental loading of a dataset by the Toolkit instance has been completed. Fired at the end of the `append` method.	-
graphCleared	Notification that the underlying graph was cleared.	-
graphChanged	Notification that the underlying graph was changed.	-
nodeAdded	Notification that a new node has been added to the data model	data Data for the new node; will be empty. node The new Node.
nodeRemoved	Notification that a node has been removed from the data model.	paramsCallback parameters params.node The Node that was removed. params.nodeId The id of the Node. You can just get this from `node.id` of course. params.edges The list of Edges that were removed as a result of the removal of the given Node.
edgeAdded	Notification that a new Edge has been added to the data model.	paramsCallback parameters params.edge The new Edge. params.addedByMouse If true, indicates the Edge was added by the user (as opposed to being loaded from the `load` method on the Toolkit.
edgeRemoved	Notification that an Edge has been removed from the data model.	edgeThe Edge that was removed.
edgeTarget	Notification that the target for some Edge has changed.	paramsCallback parameters params.edgeThe Edge whose target was changed. params.oldThe original target (Node or Port). params.newThe current target (Node or Port).
edgeTarget	Notification 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).
portAdded	Notification 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.
portRemoved	Notification 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.
groupAdded	Notification that a new group has been added to the data model.	paramsCallback parameters params.data Data for the new group; will be empty. You can populate this, as it's a reference to the data held by the group. params.group The new group.
groupRemoved	Notification that a group has been removed from the data model.	paramsCallback parameters params.group The group that was removed. params.removeChildNodes Optional; if set, indicates that the child nodes of this group were removed params.nodesThe nodes that were in the group before it was removed. These nodes may of course have been removed from the dataset along with the group, but they are provided in this callback because in certain circumstances knowing this list can be useful.
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.	-
group:addMember	Notification that a node was added to a group	paramsCallback parameters params.nodeThe node that was added to the group params.groupThe group to which the node was added params.sourceGroupOptional. If present, this is the group that the node was a member of prior to being added to this group
group:removeMember	Notification that a node was removed from a group	paramsCallback parameters params.nodeThe node that was removed from the group params.groupThe group from which the node was removed params.targetGroupOptional. If present, this is the group that the node will be a member of after being removed from this group

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.

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.