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

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

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.