Skip to main content

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
  • 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 artifacts. 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:

const instance = jsPlumb.getInstance({    container:document.getElementById("drawing")})

CSS transform property#

Now to set the zoom to 0.75, say, we change the transform property accordingly. 

document.getElementById("drawing").style.transform = "scale(0.75)"

setZoom#

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

instance.setZoom(0.75)