Zooming

A fairly common requirement with the sorts of applications that use jsPlumb is the ability to zoom in and out. As of release 1.5.0 there is a way to do this for browsers that support CSS3 (meaning, essentially, everything except IE < 9).

Changing zoom requires that you do two things:

1. Set a transform property on an appropriate container
2. Tell jsPlumb what the zoom level is.

Container

You need to identify some element that is the parent of all of your nodes and the jsPlumb artefacts. This is probably fairly obvious. What you might not know about, though, is the Container concept in jsPlumb. If you don't, I'd encourage you to go and read this page just quickly, because the best thing to do is to correctly configure a Container and then manipulate the transform property of that element.

Let's say we have some div whose id is drawing, and we're going to use that as the Container:

jsPlumb.setContainer("drawing");

CSS transform property

Now to set the zoom to 0.75, say, we change the transform property accordingly. Remember that transform is one of those properties that have several vendor prefix versions, so there are several ways to do what I've got here, and, given that you're probably a computer programmer, you've most likely got a favourite. But anyway, here's something.

$("#drawing").css({
  "-webkit-transform":"scale(0.75)",
  "-moz-transform":"scale(0.75)",
  "-ms-transform":"scale(0.75)",
  "-o-transform":"scale(0.75)",
  "transform":"scale(0.75)"
});

jsPlumb.setZoom

You now need to tell jsPlumb about the new zoom level:

jsPlumb.setZoom(0.75);

A Helper Function

Maybe you'd like to just grab this:

window.setZoom = function(zoom, instance, transformOrigin, el) {
  transformOrigin = transformOrigin || [ 0.5, 0.5 ];
  instance = instance || jsPlumb;
  el = el || instance.getContainer();
  var p = [ "webkit", "moz", "ms", "o" ],
      s = "scale(" + zoom + ")",
      oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";

  for (var i = 0; i < p.length; i++) {
    el.style[p[i] + "Transform"] = s;
    el.style[p[i] + "TransformOrigin"] = oString;
  }

  el.style["transform"] = s;
  el.style["transformOrigin"] = oString;

  instance.setZoom(zoom);    
};

Notes

• This is not a jQuery function. It does not, amazingly, even know jQuery exists.
• el must be a plain DOM element. If you've got a jQuery selector, pass in el[0]. You don't have to pass in el; if you do not, it uses the Container from the jsPlumb instance. Note that jsPlumb automatically converts the Container into a plain DOM element, so it doesn't matter what you pass to jsPlumb as the value of Container.
• transformOrigin is optional; it defaults to [0.5, 0.5] - the middle of the element (this is the browser default too)
• instance is an instance of jsPlumb - either jsPlumb, the static instance, or some instance you got through jsPlumb.newInstance(...). The function will default to using the static instance of jsPlumb if you do not provide one.
• zoom is a decimal where 1 means 100%.