pan-zoom

Panning and zooming events for any target. May come handy for webgl, canvas, svg, images or pure html manipulations. Handles mobile pinch-zoom, drag and scroll interactions, provides inertial movement.

See demo.

const panzoom = require('pan-zoom');
 
let unpanzoom = panzoom(document.body, e => {
  // e contains all the params related to the interaction
 
  // pan deltas
  e.dx;
  e.dy;
 
  // zoom delta
  e.dz;
 
  // coordinates of the center
  e.x;
  e.y;
 
  // type of interaction: mouse, touch, keyboard
  e.type;
 
  // target element event is applied to
  e.target;
 
  // original element event started from
  e.srcElement;
 
  // initial coordinates of interaction
  e.x0;
  e.y0;
});
 
// call to remove panzoom handler from the target
unpanzoom()

See test.js for basic use-case.

Alternatives

• @soulfresh/pan-zoom − compatible fork with elaborate API and fixes.

Credits

This package puts together high-quality tiny components, so acknowledgment to their authors:

• impetus by Chris Bateman @chrisbateman handles inertial drag.
• mouse-wheel by Mikola Lysenko @mikolalysenko covers cross-browser wheel event.
• touch-pinch by Matt DesLauriers @mattdesl handles mobile pinch gestures.
• touch-position by Matt DesLauriers @mattdesl tracks mouse and touch coordinates.

License

© 2017 Dmitry Yv. MIT License