pan-zoom

3.5.2 • Public • Published

pan-zoom tiny unstable

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

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

Credits

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

License

© 2017 Dmitry Yv. MIT License

Package Sidebar

Install

npm i pan-zoom

Weekly Downloads

612

Version

3.5.2

License

MIT

Unpacked Size

10.6 kB

Total Files

7

Last publish

Collaborators

  • dfcreative
  • dy