DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG

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.-
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.
edgeAddedNotification 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.
edgeRemovedNotification 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).
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.
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

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.