Package Exports

panzoom
panzoom/dist/panzoom

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (panzoom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

panzoom

Pan and zoom an SVG scene.

Demo

Standalone page - this repository
YASIV - my hobby project
SVG Tiger - js fiddle

Usage

Grab it from npm and use with your favorite bundler:

npm install panzoom --save

Or download from CDN:

https://cdn.rawgit.com/anvaka/panzoom/v1.2.1/dist/panzoom.min.js

If you download from CDN the library will be available under panzoom global name.

<!-- this is your html file with svg -->
<body>
  <svg>
    <!-- this is the draggable root -->
    <g id='scene'> 
      <circle cx='10' cy='10' r='5' fill='pink'></circle>
    </g>
  </svg>
</body>

// In the browser panzoom is already on the
// window. If you are in common.js world, then 
// var panzoom = require('panzoom')

// grab the DOM SVG element that you want to be draggable/zoomable:
var scene = document.getElementById('scene')

// and forward it it to panzoom.
panzoom(scene)

If your use case requires dynamic behavior (i.e. you want to make a scene not draggable anymore, or even completely delete an SVG element) make sure to call dispose() method:

var instance = panzoom(scene)
// do work
// ...
// then at some point you decide you don't need this anymore:
instance.dispose()

This will make sure that all event handlers are cleared and you are not leaking memory

When user starts/ends dragging the scene, the scene will fire panstart/panend events. By default they will bubble up, so you can catch them any time you want:

document.body.addEventListener('panstart', function(e) {
  console.log('pan start', e);
}, true);

document.body.addEventListener('panend', function(e) {
  console.log('pan end', e);
}, true);

See JSFiddle console for a demo.

Ignore mouse wheel

Sometimes zooming interferes with scrolling. If you want to alleviate it you can provide a custom filter, which will allow zooming only when modifier key is down. E.g.

panzoom(document.getElementById('g4'), {
  beforeWheel: function(e) {
    // allow wheel-zoom only if altKey is down. Otherwise - ignore
    var shouldIgnore = !e.altKey;
    return shouldIgnore;
  }
});

See JSFiddle for the demo. The tiger will be zooomable only when Alt key is down.

Zoom Speed

You can adjust how fast it zooms, by passing optional zoomSpeed argument:

panzoom(document.getElementById('g4'), {
  zoomSpeed: 0.065 // 6.5% per mouse wheel event
});

license

MIT