panzoom
Extensible, mobile friendly pan and zoom framework (supports DOM and SVG).
Demo
- Regular DOM object
- 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:
<script src='https://cdn.rawgit.com/anvaka/panzoom/v4.4.0/dist/panzoom.min.js'></script>
If you download from CDN the library will be available under panzoom
global name.
Pan and zoom DOM subtree
// just grab any DOM elementvar area = document.querySelector('.zoomable')// And pass it to panzoompanzoom(area)
SVG panzoom example
<!-- this is your html file with svg --><!-- this is the draggable root -->
// 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// and forward it it to panzoom.
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 =// do work// ...// then at some point you decide you don't need this anymore:instance
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:
documentbody;documentbody;
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.
;
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:
;
Min Max Zoom
You can set min and max zoom, by passing optional minZoom
and maxZoom
argument:
;
Disable Smooth Scroll
You can disable smooth scroll, by passing optional smoothScroll
argument:
;
With this setting the momentum is disabled.
Adjust Double Click Zoom
You can adjust the double click zoom multiplier, by passing optional zoomDoubleClickSpeed
argument.
When double clicking, zoom is multiplied by zoomDoubleClickSpeed
, which means that a value of 1 will disable double click zoom completely.
;
Set Initial Position And Zoom
You can set the initial position and zoom, by chaining the zoomAbs
function with x position, y position and zoom as arguments:
;
Handling touch events
The library will handle ontouch
events very aggressively, it will preventDefault
, and
stopPropagation
for the touch events inside container. Sometimes this is not a desirable behavior.
If you want to take care about this yourself, you can pass onTouch
callback to the options object:
;
Note: if you don't preventDefault
yourself - make sure you test the page behavior on iOS devices.
Sometimes this may cause page to bounce undesirably.
license
MIT