jsPlumb

Changing the mouse cursor when hovering over a connection

If you’re making use of the mouse events on jsPlumb connections, sooner or later you might find yourself wanting to change the mouse cursor, to indicate to the user that a particular connection is clickable or whatever.  This post gives you a quick run down on how to do so - there’s a little trick you need to be aware of.

jsPlumb can render connections with one of three technologies: Canvas or SVG in modern browsers, and VML in IE < 9. For each connection, jsPlumb draws a rectangular element to the DOM, in which it paints the line inscribed by the connection - most of these elements are unused, transparent, space.  The elements are added in arbitrary order, according to the order in which your UI makes connections.  When using the Canvas renderer, jsPlumb runs a few mouse listeners in the background, registered on the document, that calculate which, if any, connection the mouse is currently over.  The actual Canvas element for the connection over which the mouse is hovering might be buried under a whole bunch of others, but that’s not your concern…until you want to change the mouse cursor.

The solution is to change the mouse cursor on the body element whenever you get a mouseenter event from a connection:

var aConnection = jsPlumb.connect({source:"someDiv", target:"someOtherDiv"});

aConnection.bind("mouseenter", function(c) {
  $("body").css("cursor", "pointer");
});

aConnection.bind("mouseexit", function(c) {
  $("body").css("cursor", "default");
});

This example is of course for jQuery; your Library of Choice (TM) might use a different command to set a style.

In theory, this is not so much of a problem when using the SVG or VML renderers: they are supposed to pass mouse events through the transparent areas of their drawing surfaces. In practise, however, I have found that this is not always the case (SVG implementations vary in their adherence to this policy; but the VML engine in IE seems to be pretty reliable).

It’s a moot point anyway, as jsPlumb does not expose the actual shapes it has drawn - it exposes only the drawing surface on which they are drawn. This is for a couple of reasons:

• to standardise the internal behaviour of each of the renderers
• to allow jsPlumb to collate events from connections and their overlays ( which are drawn separately from connections)

In short - just use the same technique for all renderers.