jsPlumb supports binding to several different events on Connections, Endpoints and Overlays, and also on the jsPlumb object itself.
To bind an to event on jsPlumb itself (or a jsPlumb instance), use jsPlumb.bind(event, callback):
jsPlumb.bind("connection", function(info) {
.. update your model in here, maybe.
});
These are the events you can bind to on the jsPlumb class:
Notification a Connection was established.
info is an object with the following properties:
Note: jsPlumb.connect causes this event to be fired, but there is of course no original event when a connection is established programmatically. So you can test to see if originalEvent is undefined to determine whether a connection was estblished using the mouse or not.
All of the source/target properties are actually available inside the Connection object, but - for one of those rubbish historical reasons - are provided separately because of a vagary of the connectionDetached callback, which is discussed below.
Notification a Connection was detached.
As with connection, the first argument to the callback is an object with the following properties:
In the event that the Connection was new and had never been established between two Endpoints, it has a pending flag set on it.
The source/target properties are provided separately from the Connection, because this event is fired whenever a Connection is either detached and abandoned, or detached from some Endpoint and attached to another. In the latter case, the Connection that is passed to this callback is in an indeterminate state (that is, the Endpoints are still in the state they are in when dragging, and do not reflect static reality), and so the source/target properties give you the real story.
The second argument is the original mouse event that caused the disconnection, if any.
Notification that an existing connection's source or target endpoint was dragged to some new location. info contains the following properties:
Notification an existing Connection is being dragged. Note that when this event fires for a brand new Connection, the target of the Connection is a transient element that jsPlumb is using for dragging, and will be removed from the DOM when the Connection is subsequently either established or aborted.
Notification a Connection drag has stopped. This is only fired for existing Connections.
Notification a Connection was clicked.
Notification a Connection was double-clicked.
Notification an Endpoint was clicked.
Notification an Endpoint was double-clicked.
A right-click on some given component. jsPlumb will report right clicks on both Connections and Endpoints.
This event is fired when a new or existing connection has been dropped. info contains the following properties:
dropEndpoint member.If you return false (or nothing) from this callback, the new Connection is aborted and removed from the UI.
This event is fired when a Connection is about to be detached, for whatever reason. Your callback function is passed the Connection that the user has just detached. Returning false from this interceptor aborts the Connection detach.
Notification the current zoom was changed.
To bind to an event on a Connection, you also use the bind method:
var connection = jsPlumb.connect({source:"d1", target:"d2"});
connection.bind("click", function(conn) {
console.log("you clicked on ", conn);
});
These are the Connection events to which you can bind a listener:
click(connection, originalEvent) - notification a Connection was clicked.
dblclick(connection, originalEvent) - notification a Connection was double-clicked.
contextmenu(connection, originalEvent) - a right-click on the Connection.
mouseover(connection, originalEvent) - notification the mouse is over the Connection's path.
mouseout(connection, originalEvent) - notification the mouse has exited the Connection's path.
mousedown(connection, originalEvent) - notification the mouse button was pressed on the Connection's path.
mouseup(connection, originalEvent) - notification the mouse button was released on the Connection's path.
To bind to an event on a Endpoint, you again use the bind method:
var endpoint = jsPlumb.addEndpoint("d1", { someOptions } );
endpoint.bind("click", function(endpoint) {
console.log("you clicked on ", endpoint);
});
These are the Endpoint events to which you can bind a listener:
click(endpoint, originalEvent) - notification an Endpoint was clicked.
dblclick(endpoint, originalEvent) - notification an Endpoint was double-clicked.
contextmenu(endpoint, originalEvent) - a right-click on the Endpoint.
mouseover(endpoint, originalEvent) - notification the mouse is over the Endpoint.
mouseout(endpoint, originalEvent) - notification the mouse has exited the Endpoint.
mousedown(endpoint, originalEvent) - notification the mouse button was pressed on the Endpoint.
mouseup(endpoint, originalEvent) - notification the mouse button was released on the Endpoint.
maxConnections(info, originalEvent) - notification the user tried to drop a Connection on an Endpoint that already has the maximum number of Connections. info is an object literal containing these values:
maxConnections for the EndpointRegistering event listeners on an Overlay is a slightly different procedure - you provide them as arguments to the Overlay's constructor. This is because you never actually act on an Overlay object.
Here's how to register a click listener on an Overlay:
jsPlumb.connect({
source:"el1",
target:"el2",
overlays:[
[ "Label", {
events:{
click:function(labelOverlay, originalEvent) {
console.log("click on label overlay for :" + labelOverlay.component);
}
}
}],
[ "Diamond", {
events:{
dblclick:function(diamondOverlay, originalEvent) {
console.log("double click on diamond overlay for : " + diamondOverlay.component);
}
}
}]
]
});
The related component for an Overlay is available to you as the component member of the Overlay.
Note that events registered on Diamond, Arrow or PlainArrow overlays will not fire with the Canvas renderer - they work only with the SVG and VML renderers.
On the jsPlumb object and on Connections and Endpoints, you can use the unbind method to remove a listener. This method either takes the name of the event to unbind:
jsPlumb.unbind("click");
...or no argument, meaning unbind all events:
var e = jsPlumb.addEndpoint("someDiv");
e.bind("click", function() { ... });
e.bind("dblclick", function() { ... });
...
e.unbind("click");