pan-zoom-es5

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');
 
panzoom(target, 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;
    }
);

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.