stability-badges)

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.

![npm install pan-zoom](https://npmjs.org/package/pan-zoom/)

``

js

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

pan-zoom !tiny ![unstable](http://github.com/badges/stability-badges)

js

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.