panzoom - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

dist/panzoom.js

@@ -1,2 +0,2 @@
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.panzoom = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.panzoom = f()}})(function(){var define,module,exports;return (function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e})()({1:[function(require,module,exports){
 /* globals SVGElement */
@@ -115,2 +115,6 @@ /**
     var rectHeight = rect.bottom - rect.top
+    if (!Number.isFinite(rectWidth) || !Number.isFinite(rectHeight)) {
+      throw new Error('Invalid rectangle');
+    }
+
     var dh = h/rectHeight
@@ -278,3 +282,4 @@ var dw = w/rectWidth
 
-    var parentScale = 1
+    var parentScaleX = 1
+    var parentScaleY = 1
     var parentOffsetX = 0
@@ -284,4 +289,6 @@ var parentOffsetY = 0
     if (domController.getScreenCTM) {
+      // TODO: This is likely need to be done for all mouse/touch events.
       var parentCTM = domController.getScreenCTM()
-      parentScale = parentCTM.a
+      parentScaleX = parentCTM.a
+      parentScaleY = parentCTM.b
       parentOffsetX = parentCTM.e
@@ -291,4 +298,4 @@ parentOffsetY = parentCTM.f
 
-    var x = clientX * parentScale - parentOffsetX
-    var y = clientY * parentScale - parentOffsetY
+    var x = clientX * parentScaleX - parentOffsetX
+    var y = clientY * parentScaleY - parentOffsetY
 
@@ -434,2 +441,3 @@ transform.x = x - ratio * (x - transform.x)
   function onTouch(e) {
+    beforeTouch(e);
     if (e.touches.length === 1) {
@@ -439,5 +447,2 @@ return handleSingleFingerTouch(e, e.touches[0])
       // handleTouchMove() will care about pinch zoom.
-      e.stopPropagation()
-      e.preventDefault()
-
       pinchZoomLength = getPinchZoomLength(e.touches[0], e.touches[1])
@@ -449,6 +454,14 @@ multitouch  = true
 
-  function handleSingleFingerTouch(e) {
+  function beforeTouch(e) {
+    if (options.onTouch && !options.onTouch(e)) {
+      // if they return `false` from onTouch, we don't want to stop
+      // events propagation. Fixes https://github.com/anvaka/panzoom/issues/12
+      return
+    }
+
     e.stopPropagation()
     e.preventDefault()
+  }
 
+  function handleSingleFingerTouch(e) {
     var touch = e.touches[0]
@@ -719,2 +732,3 @@ mouseX = touch.clientX
 }
+
 },{"./lib/createEvent.js":2,"./lib/domController.js":3,"./lib/kinetic.js":4,"./lib/svgController.js":5,"./lib/textSlectionInterceptor.js":6,"./lib/transform.js":7,"amator":8,"wheel":10}],2:[function(require,module,exports){
@@ -721,0 +735,0 @@ /* global Event */

dist/panzoom.min.js

@@ -1,1 +0,1 @@
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.panzoom=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){var wheel=require("wheel");var animate=require("amator");var kinetic=require("./lib/kinetic.js");var createEvent=require("./lib/createEvent.js");var preventTextSelection=require("./lib/textSlectionInterceptor.js")();var Transform=require("./lib/transform.js");var makeSvgController=require("./lib/svgController.js");var makeDomController=require("./lib/domController.js");var defaultZoomSpeed=.065;var defaultDoubleTapZoomSpeed=1.75;var doubleTapSpeedInMS=300;module.exports=createPanZoom;function createPanZoom(domElement,options){options=options||{};var domController=options.controller;if(!domController){if(domElement instanceof SVGElement){domController=makeSvgController(domElement)}if(domElement instanceof HTMLElement){domController=makeDomController(domElement)}}if(!domController){throw new Error("Cannot create panzoom for the current type of dom element")}var owner=domController.getOwner();var isDirty=false;var transform=new Transform;var realPinch=typeof options.realPinch==="boolean"?options.realPinch:false;var bounds=options.bounds;var maxZoom=typeof options.maxZoom==="number"?options.maxZoom:Number.POSITIVE_INFINITY;var minZoom=typeof options.minZoom==="number"?options.minZoom:0;var boundsPadding=typeof options.boundsPadding==="number"?options.boundsPadding:.05;var zoomDoubleClickSpeed=typeof options.zoomDoubleClickSpeed==="number"?options.zoomDoubleClickSpeed:defaultDoubleTapZoomSpeed;var beforeWheel=options.beforeWheel||noop;var speed=typeof options.zoomSpeed==="number"?options.zoomSpeed:defaultZoomSpeed;validateBounds(bounds);if(options.autocenter){autocenter()}var frameAnimation;var lastTouchEndTime=0;var touchInProgress=false;var panstartFired=false;var mouseX;var mouseY;var pinchZoomLength;var smoothScroll;if("smoothScroll"in options&&!options.smoothScroll){smoothScroll=rigidScroll()}else{smoothScroll=kinetic(getPoint,scroll,options.smoothScroll)}var moveByAnimation;var zoomToAnimation;var multitouch;listenForEvents();return{dispose:dispose,moveBy:internalMoveBy,moveTo:moveTo,centerOn:centerOn,zoomTo:publicZoomTo,zoomAbs:zoomAbs,getTransform:getTransformModel,showRectangle:showRectangle};function showRectangle(rect){var w=owner.clientWidth;var h=owner.clientHeight;var rectWidth=rect.right-rect.left;var rectHeight=rect.bottom-rect.top;var dh=h/rectHeight;var dw=w/rectWidth;var scale=Math.min(dw,dh);transform.x=-(rect.left+rectWidth/2)*scale+w/2;transform.y=-(rect.top+rectHeight/2)*scale+h/2;transform.scale=scale}function autocenter(){var w;var h;var left=0;var top=0;var sceneBoundingBox=getBoundingBox();if(sceneBoundingBox){left=sceneBoundingBox.left;top=sceneBoundingBox.top;w=sceneBoundingBox.right-sceneBoundingBox.left;h=sceneBoundingBox.bottom-sceneBoundingBox.top}else{w=owner.clientWidth;h=owner.clientHeight}var bbox=domController.getBBox();var dh=h/bbox.height;var dw=w/bbox.width;var scale=Math.min(dw,dh);transform.x=-(bbox.left+bbox.width/2)*scale+w/2+left;transform.y=-(bbox.top+bbox.height/2)*scale+h/2+top;transform.scale=scale}function getTransformModel(){return transform}function getPoint(){return{x:transform.x,y:transform.y}}function moveTo(x,y){transform.x=x;transform.y=y;keepTransformInsideBounds();triggerEvent("pan");makeDirty()}function moveBy(dx,dy){moveTo(transform.x+dx,transform.y+dy)}function keepTransformInsideBounds(){var boundingBox=getBoundingBox();if(!boundingBox)return;var adjusted=false;var clientRect=getClientRect();var diff=boundingBox.left-clientRect.right;if(diff>0){transform.x+=diff;adjusted=true}diff=boundingBox.right-clientRect.left;if(diff<0){transform.x+=diff;adjusted=true}diff=boundingBox.top-clientRect.bottom;if(diff>0){transform.y+=diff;adjusted=true}diff=boundingBox.bottom-clientRect.top;if(diff<0){transform.y+=diff;adjusted=true}return adjusted}function getBoundingBox(){if(!bounds)return;if(typeof bounds==="boolean"){var sceneWidth=owner.clientWidth;var sceneHeight=owner.clientHeight;return{left:sceneWidth*boundsPadding,top:sceneHeight*boundsPadding,right:sceneWidth*(1-boundsPadding),bottom:sceneHeight*(1-boundsPadding)}}return bounds}function getClientRect(){var bbox=domController.getBBox();var leftTop=client(bbox.left,bbox.top);return{left:leftTop.x,top:leftTop.y,right:bbox.width*transform.scale+leftTop.x,bottom:bbox.height*transform.scale+leftTop.y}}function client(x,y){return{x:x*transform.scale+transform.x,y:y*transform.scale+transform.y}}function makeDirty(){isDirty=true;frameAnimation=window.requestAnimationFrame(frame)}function zoomByRatio(clientX,clientY,ratio){if(isNaN(clientX)||isNaN(clientY)||isNaN(ratio)){throw new Error("zoom requires valid numbers")}var newScale=transform.scale*ratio;if(newScale<minZoom){if(transform.scale===minZoom)return;ratio=minZoom/transform.scale}if(newScale>maxZoom){if(transform.scale===maxZoom)return;ratio=maxZoom/transform.scale}var parentScale=1;var parentOffsetX=0;var parentOffsetY=0;if(domController.getScreenCTM){var parentCTM=domController.getScreenCTM();parentScale=parentCTM.a;parentOffsetX=parentCTM.e;parentOffsetY=parentCTM.f}var x=clientX*parentScale-parentOffsetX;var y=clientY*parentScale-parentOffsetY;transform.x=x-ratio*(x-transform.x);transform.y=y-ratio*(y-transform.y);var transformAdjusted=keepTransformInsideBounds();if(!transformAdjusted)transform.scale*=ratio;triggerEvent("zoom");makeDirty()}function zoomAbs(clientX,clientY,zoomLevel){var ratio=zoomLevel/transform.scale;zoomByRatio(clientX,clientY,ratio)}function centerOn(ui){var parent=ui.ownerSVGElement;if(!parent)throw new Error("ui element is required to be within the scene");var clientRect=ui.getBoundingClientRect();var cx=clientRect.left+clientRect.width/2;var cy=clientRect.top+clientRect.height/2;var container=parent.getBoundingClientRect();var dx=container.width/2-cx;var dy=container.height/2-cy;internalMoveBy(dx,dy,true)}function internalMoveBy(dx,dy,smooth){if(!smooth){return moveBy(dx,dy)}if(moveByAnimation)moveByAnimation.cancel();var from={x:0,y:0};var to={x:dx,y:dy};var lastX=0;var lastY=0;moveByAnimation=animate(from,to,{step:function(v){moveBy(v.x-lastX,v.y-lastY);lastX=v.x;lastY=v.y}})}function scroll(x,y){cancelZoomAnimation();moveTo(x,y)}function dispose(){wheel.removeWheelListener(domElement,onMouseWheel);owner.removeEventListener("mousedown",onMouseDown);owner.removeEventListener("keydown",onKeyDown);owner.removeEventListener("dblclick",onDoubleClick);if(frameAnimation){window.cancelAnimationFrame(frameAnimation);frameAnimation=0}smoothScroll.cancel();releaseDocumentMouse();releaseTouches();triggerPanEnd()}function listenForEvents(){owner.addEventListener("mousedown",onMouseDown);owner.addEventListener("dblclick",onDoubleClick);owner.addEventListener("touchstart",onTouch);owner.addEventListener("keydown",onKeyDown);wheel.addWheelListener(owner,onMouseWheel);makeDirty()}function frame(){if(isDirty)applyTransform()}function applyTransform(){isDirty=false;domController.applyTransform(transform);triggerEvent("transform");frameAnimation=0}function onKeyDown(e){var x=0,y=0,z=0;if(e.keyCode===38){y=1}else if(e.keyCode===40){y=-1}else if(e.keyCode===37){x=1}else if(e.keyCode===39){x=-1}else if(e.keyCode===189||e.keyCode===109){z=1}else if(e.keyCode===187||e.keyCode===107){z=-1}if(x||y){e.preventDefault();e.stopPropagation();var clientRect=owner.getBoundingClientRect();var offset=Math.min(clientRect.width,clientRect.height);var moveSpeedRatio=.05;var dx=offset*moveSpeedRatio*x;var dy=offset*moveSpeedRatio*y;internalMoveBy(dx,dy)}if(z){var scaleMultiplier=getScaleMultiplier(z);publicZoomTo(owner.clientWidth/2,owner.clientHeight/2,scaleMultiplier)}}function onTouch(e){if(e.touches.length===1){return handleSingleFingerTouch(e,e.touches[0])}else if(e.touches.length===2){e.stopPropagation();e.preventDefault();pinchZoomLength=getPinchZoomLength(e.touches[0],e.touches[1]);multitouch=true;startTouchListenerIfNeeded()}}function handleSingleFingerTouch(e){e.stopPropagation();e.preventDefault();var touch=e.touches[0];mouseX=touch.clientX;mouseY=touch.clientY;startTouchListenerIfNeeded()}function startTouchListenerIfNeeded(){if(!touchInProgress){touchInProgress=true;document.addEventListener("touchmove",handleTouchMove);document.addEventListener("touchend",handleTouchEnd);document.addEventListener("touchcancel",handleTouchEnd)}}function handleTouchMove(e){if(e.touches.length===1){e.stopPropagation();var touch=e.touches[0];var dx=touch.clientX-mouseX;var dy=touch.clientY-mouseY;if(dx!==0&&dy!==0){triggerPanStart()}mouseX=touch.clientX;mouseY=touch.clientY;internalMoveBy(dx,dy)}else if(e.touches.length===2){multitouch=true;var t1=e.touches[0];var t2=e.touches[1];var currentPinchLength=getPinchZoomLength(t1,t2);var scaleMultiplier=1;if(realPinch){scaleMultiplier=currentPinchLength/pinchZoomLength}else{var delta=0;if(currentPinchLength<pinchZoomLength){delta=1}else if(currentPinchLength>pinchZoomLength){delta=-1}scaleMultiplier=getScaleMultiplier(delta)}mouseX=(t1.clientX+t2.clientX)/2;mouseY=(t1.clientY+t2.clientY)/2;publicZoomTo(mouseX,mouseY,scaleMultiplier);pinchZoomLength=currentPinchLength;e.stopPropagation();e.preventDefault()}}function handleTouchEnd(e){if(e.touches.length>0){mouseX=e.touches[0].clientX;mouseY=e.touches[0].clientY}else{var now=new Date;if(now-lastTouchEndTime<doubleTapSpeedInMS){smoothZoom(mouseX,mouseY,zoomDoubleClickSpeed)}lastTouchEndTime=now;touchInProgress=false;triggerPanEnd();releaseTouches()}}function getPinchZoomLength(finger1,finger2){return Math.sqrt((finger1.clientX-finger2.clientX)*(finger1.clientX-finger2.clientX)+(finger1.clientY-finger2.clientY)*(finger1.clientY-finger2.clientY))}function onDoubleClick(e){smoothZoom(e.clientX,e.clientY,zoomDoubleClickSpeed);e.preventDefault();e.stopPropagation()}function onMouseDown(e){if(touchInProgress){e.stopPropagation();return false}var isLeftButton=e.button===1&&window.event!==null||e.button===0;if(!isLeftButton)return;mouseX=e.clientX;mouseY=e.clientY;document.addEventListener("mousemove",onMouseMove);document.addEventListener("mouseup",onMouseUp);preventTextSelection.capture(e.target||e.srcElement);return false}function onMouseMove(e){if(touchInProgress)return;triggerPanStart();var dx=e.clientX-mouseX;var dy=e.clientY-mouseY;mouseX=e.clientX;mouseY=e.clientY;internalMoveBy(dx,dy)}function onMouseUp(){preventTextSelection.release();triggerPanEnd();releaseDocumentMouse()}function releaseDocumentMouse(){document.removeEventListener("mousemove",onMouseMove);document.removeEventListener("mouseup",onMouseUp);panstartFired=false}function releaseTouches(){document.removeEventListener("touchmove",handleTouchMove);document.removeEventListener("touchend",handleTouchEnd);document.removeEventListener("touchcancel",handleTouchEnd);panstartFired=false;multitouch=false}function onMouseWheel(e){if(beforeWheel(e))return;smoothScroll.cancel();var scaleMultiplier=getScaleMultiplier(e.deltaY);if(scaleMultiplier!==1){publicZoomTo(e.clientX,e.clientY,scaleMultiplier);e.preventDefault()}}function smoothZoom(clientX,clientY,scaleMultiplier){var fromValue=transform.scale;var from={scale:fromValue};var to={scale:scaleMultiplier*fromValue};smoothScroll.cancel();cancelZoomAnimation();triggerEvent("zoom");zoomToAnimation=animate(from,to,{step:function(v){zoomAbs(clientX,clientY,v.scale)}})}function publicZoomTo(clientX,clientY,scaleMultiplier){smoothScroll.cancel();cancelZoomAnimation();return zoomByRatio(clientX,clientY,scaleMultiplier)}function cancelZoomAnimation(){if(zoomToAnimation){zoomToAnimation.cancel();zoomToAnimation=null}}function getScaleMultiplier(delta){var scaleMultiplier=1;if(delta>0){scaleMultiplier=1-speed}else if(delta<0){scaleMultiplier=1+speed}return scaleMultiplier}function triggerPanStart(){if(!panstartFired){triggerEvent("panstart");panstartFired=true;smoothScroll.start()}}function triggerPanEnd(){if(panstartFired){if(!multitouch)smoothScroll.stop();triggerEvent("panend")}}function triggerEvent(name){var event=createEvent(name);domElement.dispatchEvent(event)}}function noop(){}function validateBounds(bounds){var boundsType=typeof bounds;if(boundsType==="undefined"||boundsType==="boolean")return;var validBounds=isNumber(bounds.left)&&isNumber(bounds.top)&&isNumber(bounds.bottom)&&isNumber(bounds.right);if(!validBounds)throw new Error("Bounds object is not valid. It can be: "+"undefined, boolean (true|false) or an object {left, top, right, bottom}")}function isNumber(x){return Number.isFinite(x)}function isNaN(value){if(Number.isNaN){return Number.isNaN(value)}return value!==value}function rigidScroll(){return{start:noop,stop:noop,cancel:noop}}},{"./lib/createEvent.js":2,"./lib/domController.js":3,"./lib/kinetic.js":4,"./lib/svgController.js":5,"./lib/textSlectionInterceptor.js":6,"./lib/transform.js":7,amator:8,wheel:10}],2:[function(require,module,exports){module.exports=createEvent;var isIE=typeof Event!=="function";function createEvent(name){if(isIE){var evt=document.createEvent("CustomEvent");evt.initCustomEvent(name,true,true,undefined);return evt}else{return new Event(name,{bubbles:true})}}},{}],3:[function(require,module,exports){module.exports=makeDomController;function makeDomController(domElement){var elementValid=domElement instanceof HTMLElement;if(!elementValid){throw new Error("svg element is required for svg.panzoom to work")}var owner=domElement.parentElement;if(!owner){throw new Error("Do not apply panzoom to the detached DOM element. ")}domElement.scrollTop=0;owner.setAttribute("tabindex",1);var api={getBBox:getBBox,getOwner:getOwner,applyTransform:applyTransform};return api;function getOwner(){return owner}function getBBox(){return{left:0,top:0,width:domElement.clientWidth,height:domElement.clientHeight}}function applyTransform(transform){domElement.style.transformOrigin="0 0 0";domElement.style.transform="matrix("+transform.scale+", 0, 0, "+transform.scale+", "+transform.x+", "+transform.y+")"}}},{}],4:[function(require,module,exports){module.exports=kinetic;function kinetic(getPoint,scroll,settings){if(typeof settings!=="object"){settings={}}var minVelocity=typeof settings.minVelocity==="number"?settings.minVelocity:5;var amplitude=typeof settings.amplitude==="number"?settings.amplitude:.25;var lastPoint;var timestamp;var timeConstant=342;var ticker;var vx,targetX,ax;var vy,targetY,ay;var raf;return{start:start,stop:stop,cancel:dispose};function dispose(){window.clearInterval(ticker);window.cancelAnimationFrame(raf)}function start(){lastPoint=getPoint();ax=ay=vx=vy=0;timestamp=new Date;window.clearInterval(ticker);window.cancelAnimationFrame(raf);ticker=window.setInterval(track,100)}function track(){var now=Date.now();var elapsed=now-timestamp;timestamp=now;var currentPoint=getPoint();var dx=currentPoint.x-lastPoint.x;var dy=currentPoint.y-lastPoint.y;lastPoint=currentPoint;var dt=1e3/(1+elapsed);vx=.8*dx*dt+.2*vx;vy=.8*dy*dt+.2*vy}function stop(){window.clearInterval(ticker);window.cancelAnimationFrame(raf);var currentPoint=getPoint();targetX=currentPoint.x;targetY=currentPoint.y;timestamp=Date.now();if(vx<-minVelocity||vx>minVelocity){ax=amplitude*vx;targetX+=ax}if(vy<-minVelocity||vy>minVelocity){ay=amplitude*vy;targetY+=ay}raf=window.requestAnimationFrame(autoScroll)}function autoScroll(){var elapsed=Date.now()-timestamp;var moving=false;var dx=0;var dy=0;if(ax){dx=-ax*Math.exp(-elapsed/timeConstant);if(dx>.5||dx<-.5)moving=true;else dx=ax=0}if(ay){dy=-ay*Math.exp(-elapsed/timeConstant);if(dy>.5||dy<-.5)moving=true;else dy=ay=0}if(moving){scroll(targetX+dx,targetY+dy);raf=window.requestAnimationFrame(autoScroll)}}}},{}],5:[function(require,module,exports){module.exports=makeSvgController;function makeSvgController(svgElement){var elementValid=svgElement instanceof SVGElement;if(!elementValid){throw new Error("svg element is required for svg.panzoom to work")}var owner=svgElement.ownerSVGElement;if(!owner){throw new Error("Do not apply panzoom to the root <svg> element. "+"Use its child instead (e.g. <g></g>). "+"As of March 2016 only FireFox supported transform on the root element")}owner.setAttribute("tabindex",1);var api={getBBox:getBBox,getScreenCTM:getScreenCTM,getOwner:getOwner,applyTransform:applyTransform};return api;function getOwner(){return owner}function getBBox(){var bbox=svgElement.getBBox();return{left:bbox.x,top:bbox.y,width:bbox.width,height:bbox.height}}function getScreenCTM(){return owner.getScreenCTM()}function applyTransform(transform){svgElement.setAttribute("transform","matrix("+transform.scale+" 0 0 "+transform.scale+" "+transform.x+" "+transform.y+")")}}},{}],6:[function(require,module,exports){module.exports=createTextSelectionInterceptor;function createTextSelectionInterceptor(){var dragObject;var prevSelectStart;var prevDragStart;return{capture:capture,release:release};function capture(domObject){prevSelectStart=window.document.onselectstart;prevDragStart=window.document.ondragstart;window.document.onselectstart=disabled;dragObject=domObject;dragObject.ondragstart=disabled}function release(){window.document.onselectstart=prevSelectStart;if(dragObject)dragObject.ondragstart=prevDragStart}}function disabled(e){e.stopPropagation();return false}},{}],7:[function(require,module,exports){module.exports=Transform;function Transform(){this.x=0;this.y=0;this.scale=1}},{}],8:[function(require,module,exports){var BezierEasing=require("bezier-easing");var animations={ease:BezierEasing(.25,.1,.25,1),easeIn:BezierEasing(.42,0,1,1),easeOut:BezierEasing(0,0,.58,1),easeInOut:BezierEasing(.42,0,.58,1),linear:BezierEasing(0,0,1,1)};module.exports=animate;function animate(source,target,options){var start=Object.create(null);var diff=Object.create(null);options=options||{};var easing=typeof options.easing==="function"?options.easing:animations[options.easing];if(!easing){if(options.easing){console.warn("Unknown easing function in amator: "+options.easing)}easing=animations.ease}var step=typeof options.step==="function"?options.step:noop;var done=typeof options.done==="function"?options.done:noop;var scheduler=getScheduler(options.scheduler);var keys=Object.keys(target);keys.forEach(function(key){start[key]=source[key];diff[key]=target[key]-source[key]});var durationInMs=options.duration||400;var durationInFrames=Math.max(1,durationInMs*.06);var previousAnimationId;var frame=0;previousAnimationId=scheduler.next(loop);return{cancel:cancel};function cancel(){scheduler.cancel(previousAnimationId);previousAnimationId=0}function loop(){var t=easing(frame/durationInFrames);frame+=1;setValues(t);if(frame<=durationInFrames){previousAnimationId=scheduler.next(loop);step(source)}else{previousAnimationId=0;setTimeout(function(){done(source)},0)}}function setValues(t){keys.forEach(function(key){source[key]=diff[key]*t+start[key]})}}function noop(){}function getScheduler(scheduler){if(!scheduler){var canRaf=typeof window!=="undefined"&&window.requestAnimationFrame;return canRaf?rafScheduler():timeoutScheduler()}if(typeof scheduler.next!=="function")throw new Error("Scheduler is supposed to have next(cb) function");if(typeof scheduler.cancel!=="function")throw new Error("Scheduler is supposed to have cancel(handle) function");return scheduler}function rafScheduler(){return{next:window.requestAnimationFrame.bind(window),cancel:window.cancelAnimationFrame.bind(window)}}function timeoutScheduler(){return{next:function(cb){return setTimeout(cb,1e3/60)},cancel:function(id){return clearTimeout(id)}}}},{"bezier-easing":9}],9:[function(require,module,exports){var NEWTON_ITERATIONS=4;var NEWTON_MIN_SLOPE=.001;var SUBDIVISION_PRECISION=1e-7;var SUBDIVISION_MAX_ITERATIONS=10;var kSplineTableSize=11;var kSampleStepSize=1/(kSplineTableSize-1);var float32ArraySupported=typeof Float32Array==="function";function A(aA1,aA2){return 1-3*aA2+3*aA1}function B(aA1,aA2){return 3*aA2-6*aA1}function C(aA1){return 3*aA1}function calcBezier(aT,aA1,aA2){return((A(aA1,aA2)*aT+B(aA1,aA2))*aT+C(aA1))*aT}function getSlope(aT,aA1,aA2){return 3*A(aA1,aA2)*aT*aT+2*B(aA1,aA2)*aT+C(aA1)}function binarySubdivide(aX,aA,aB,mX1,mX2){var currentX,currentT,i=0;do{currentT=aA+(aB-aA)/2;currentX=calcBezier(currentT,mX1,mX2)-aX;if(currentX>0){aB=currentT}else{aA=currentT}}while(Math.abs(currentX)>SUBDIVISION_PRECISION&&++i<SUBDIVISION_MAX_ITERATIONS);return currentT}function newtonRaphsonIterate(aX,aGuessT,mX1,mX2){for(var i=0;i<NEWTON_ITERATIONS;++i){var currentSlope=getSlope(aGuessT,mX1,mX2);if(currentSlope===0){return aGuessT}var currentX=calcBezier(aGuessT,mX1,mX2)-aX;aGuessT-=currentX/currentSlope}return aGuessT}module.exports=function bezier(mX1,mY1,mX2,mY2){if(!(0<=mX1&&mX1<=1&&0<=mX2&&mX2<=1)){throw new Error("bezier x values must be in [0, 1] range")}var sampleValues=float32ArraySupported?new Float32Array(kSplineTableSize):new Array(kSplineTableSize);if(mX1!==mY1||mX2!==mY2){for(var i=0;i<kSplineTableSize;++i){sampleValues[i]=calcBezier(i*kSampleStepSize,mX1,mX2)}}function getTForX(aX){var intervalStart=0;var currentSample=1;var lastSample=kSplineTableSize-1;for(;currentSample!==lastSample&&sampleValues[currentSample]<=aX;++currentSample){intervalStart+=kSampleStepSize}--currentSample;var dist=(aX-sampleValues[currentSample])/(sampleValues[currentSample+1]-sampleValues[currentSample]);var guessForT=intervalStart+dist*kSampleStepSize;var initialSlope=getSlope(guessForT,mX1,mX2);if(initialSlope>=NEWTON_MIN_SLOPE){return newtonRaphsonIterate(aX,guessForT,mX1,mX2)}else if(initialSlope===0){return guessForT}else{return binarySubdivide(aX,intervalStart,intervalStart+kSampleStepSize,mX1,mX2)}}return function BezierEasing(x){if(mX1===mY1&&mX2===mY2){return x}if(x===0){return 0}if(x===1){return 1}return calcBezier(getTForX(x),mY1,mY2)}}},{}],10:[function(require,module,exports){module.exports=addWheelListener;module.exports.addWheelListener=addWheelListener;module.exports.removeWheelListener=removeWheelListener;var prefix="",_addEventListener,_removeEventListener,onwheel,support;detectEventModel(typeof window!=="undefined"&&window,typeof document!=="undefined"&&document);function addWheelListener(elem,callback,useCapture){_addWheelListener(elem,support,callback,useCapture);if(support=="DOMMouseScroll"){_addWheelListener(elem,"MozMousePixelScroll",callback,useCapture)}}function removeWheelListener(elem,callback,useCapture){_removeWheelListener(elem,support,callback,useCapture);if(support=="DOMMouseScroll"){_removeWheelListener(elem,"MozMousePixelScroll",callback,useCapture)}}function _addWheelListener(elem,eventName,callback,useCapture){elem[_addEventListener](prefix+eventName,support=="wheel"?callback:function(originalEvent){!originalEvent&&(originalEvent=window.event);var event={originalEvent:originalEvent,target:originalEvent.target||originalEvent.srcElement,type:"wheel",deltaMode:originalEvent.type=="MozMousePixelScroll"?0:1,deltaX:0,delatZ:0,clientX:originalEvent.clientX,clientY:originalEvent.clientY,preventDefault:function(){originalEvent.preventDefault?originalEvent.preventDefault():originalEvent.returnValue=false},stopPropagation:function(){if(originalEvent.stopPropagation)originalEvent.stopPropagation()},stopImmediatePropagation:function(){if(originalEvent.stopImmediatePropagation)originalEvent.stopImmediatePropagation()}};if(support=="mousewheel"){event.deltaY=-1/40*originalEvent.wheelDelta;originalEvent.wheelDeltaX&&(event.deltaX=-1/40*originalEvent.wheelDeltaX)}else{event.deltaY=originalEvent.detail}return callback(event)},useCapture||false)}function _removeWheelListener(elem,eventName,callback,useCapture){elem[_removeEventListener](prefix+eventName,callback,useCapture||false)}function detectEventModel(window,document){if(window&&window.addEventListener){_addEventListener="addEventListener";_removeEventListener="removeEventListener"}else{_addEventListener="attachEvent";_removeEventListener="detachEvent";prefix="on"}if(document){support="onwheel"in document.createElement("div")?"wheel":document.onmousewheel!==undefined?"mousewheel":"DOMMouseScroll"}else{support="wheel"}}},{}]},{},[1])(1)});
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.panzoom=f()}})(function(){var define,module,exports;return function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e}()({1:[function(require,module,exports){var wheel=require("wheel");var animate=require("amator");var kinetic=require("./lib/kinetic.js");var createEvent=require("./lib/createEvent.js");var preventTextSelection=require("./lib/textSlectionInterceptor.js")();var Transform=require("./lib/transform.js");var makeSvgController=require("./lib/svgController.js");var makeDomController=require("./lib/domController.js");var defaultZoomSpeed=.065;var defaultDoubleTapZoomSpeed=1.75;var doubleTapSpeedInMS=300;module.exports=createPanZoom;function createPanZoom(domElement,options){options=options||{};var domController=options.controller;if(!domController){if(domElement instanceof SVGElement){domController=makeSvgController(domElement)}if(domElement instanceof HTMLElement){domController=makeDomController(domElement)}}if(!domController){throw new Error("Cannot create panzoom for the current type of dom element")}var owner=domController.getOwner();var isDirty=false;var transform=new Transform;var realPinch=typeof options.realPinch==="boolean"?options.realPinch:false;var bounds=options.bounds;var maxZoom=typeof options.maxZoom==="number"?options.maxZoom:Number.POSITIVE_INFINITY;var minZoom=typeof options.minZoom==="number"?options.minZoom:0;var boundsPadding=typeof options.boundsPadding==="number"?options.boundsPadding:.05;var zoomDoubleClickSpeed=typeof options.zoomDoubleClickSpeed==="number"?options.zoomDoubleClickSpeed:defaultDoubleTapZoomSpeed;var beforeWheel=options.beforeWheel||noop;var speed=typeof options.zoomSpeed==="number"?options.zoomSpeed:defaultZoomSpeed;validateBounds(bounds);if(options.autocenter){autocenter()}var frameAnimation;var lastTouchEndTime=0;var touchInProgress=false;var panstartFired=false;var mouseX;var mouseY;var pinchZoomLength;var smoothScroll;if("smoothScroll"in options&&!options.smoothScroll){smoothScroll=rigidScroll()}else{smoothScroll=kinetic(getPoint,scroll,options.smoothScroll)}var moveByAnimation;var zoomToAnimation;var multitouch;listenForEvents();return{dispose:dispose,moveBy:internalMoveBy,moveTo:moveTo,centerOn:centerOn,zoomTo:publicZoomTo,zoomAbs:zoomAbs,getTransform:getTransformModel,showRectangle:showRectangle};function showRectangle(rect){var w=owner.clientWidth;var h=owner.clientHeight;var rectWidth=rect.right-rect.left;var rectHeight=rect.bottom-rect.top;if(!Number.isFinite(rectWidth)||!Number.isFinite(rectHeight)){throw new Error("Invalid rectangle")}var dh=h/rectHeight;var dw=w/rectWidth;var scale=Math.min(dw,dh);transform.x=-(rect.left+rectWidth/2)*scale+w/2;transform.y=-(rect.top+rectHeight/2)*scale+h/2;transform.scale=scale}function autocenter(){var w;var h;var left=0;var top=0;var sceneBoundingBox=getBoundingBox();if(sceneBoundingBox){left=sceneBoundingBox.left;top=sceneBoundingBox.top;w=sceneBoundingBox.right-sceneBoundingBox.left;h=sceneBoundingBox.bottom-sceneBoundingBox.top}else{w=owner.clientWidth;h=owner.clientHeight}var bbox=domController.getBBox();var dh=h/bbox.height;var dw=w/bbox.width;var scale=Math.min(dw,dh);transform.x=-(bbox.left+bbox.width/2)*scale+w/2+left;transform.y=-(bbox.top+bbox.height/2)*scale+h/2+top;transform.scale=scale}function getTransformModel(){return transform}function getPoint(){return{x:transform.x,y:transform.y}}function moveTo(x,y){transform.x=x;transform.y=y;keepTransformInsideBounds();triggerEvent("pan");makeDirty()}function moveBy(dx,dy){moveTo(transform.x+dx,transform.y+dy)}function keepTransformInsideBounds(){var boundingBox=getBoundingBox();if(!boundingBox)return;var adjusted=false;var clientRect=getClientRect();var diff=boundingBox.left-clientRect.right;if(diff>0){transform.x+=diff;adjusted=true}diff=boundingBox.right-clientRect.left;if(diff<0){transform.x+=diff;adjusted=true}diff=boundingBox.top-clientRect.bottom;if(diff>0){transform.y+=diff;adjusted=true}diff=boundingBox.bottom-clientRect.top;if(diff<0){transform.y+=diff;adjusted=true}return adjusted}function getBoundingBox(){if(!bounds)return;if(typeof bounds==="boolean"){var sceneWidth=owner.clientWidth;var sceneHeight=owner.clientHeight;return{left:sceneWidth*boundsPadding,top:sceneHeight*boundsPadding,right:sceneWidth*(1-boundsPadding),bottom:sceneHeight*(1-boundsPadding)}}return bounds}function getClientRect(){var bbox=domController.getBBox();var leftTop=client(bbox.left,bbox.top);return{left:leftTop.x,top:leftTop.y,right:bbox.width*transform.scale+leftTop.x,bottom:bbox.height*transform.scale+leftTop.y}}function client(x,y){return{x:x*transform.scale+transform.x,y:y*transform.scale+transform.y}}function makeDirty(){isDirty=true;frameAnimation=window.requestAnimationFrame(frame)}function zoomByRatio(clientX,clientY,ratio){if(isNaN(clientX)||isNaN(clientY)||isNaN(ratio)){throw new Error("zoom requires valid numbers")}var newScale=transform.scale*ratio;if(newScale<minZoom){if(transform.scale===minZoom)return;ratio=minZoom/transform.scale}if(newScale>maxZoom){if(transform.scale===maxZoom)return;ratio=maxZoom/transform.scale}var parentScaleX=1;var parentScaleY=1;var parentOffsetX=0;var parentOffsetY=0;if(domController.getScreenCTM){var parentCTM=domController.getScreenCTM();parentScaleX=parentCTM.a;parentScaleY=parentCTM.b;parentOffsetX=parentCTM.e;parentOffsetY=parentCTM.f}var x=clientX*parentScaleX-parentOffsetX;var y=clientY*parentScaleY-parentOffsetY;transform.x=x-ratio*(x-transform.x);transform.y=y-ratio*(y-transform.y);var transformAdjusted=keepTransformInsideBounds();if(!transformAdjusted)transform.scale*=ratio;triggerEvent("zoom");makeDirty()}function zoomAbs(clientX,clientY,zoomLevel){var ratio=zoomLevel/transform.scale;zoomByRatio(clientX,clientY,ratio)}function centerOn(ui){var parent=ui.ownerSVGElement;if(!parent)throw new Error("ui element is required to be within the scene");var clientRect=ui.getBoundingClientRect();var cx=clientRect.left+clientRect.width/2;var cy=clientRect.top+clientRect.height/2;var container=parent.getBoundingClientRect();var dx=container.width/2-cx;var dy=container.height/2-cy;internalMoveBy(dx,dy,true)}function internalMoveBy(dx,dy,smooth){if(!smooth){return moveBy(dx,dy)}if(moveByAnimation)moveByAnimation.cancel();var from={x:0,y:0};var to={x:dx,y:dy};var lastX=0;var lastY=0;moveByAnimation=animate(from,to,{step:function(v){moveBy(v.x-lastX,v.y-lastY);lastX=v.x;lastY=v.y}})}function scroll(x,y){cancelZoomAnimation();moveTo(x,y)}function dispose(){wheel.removeWheelListener(domElement,onMouseWheel);owner.removeEventListener("mousedown",onMouseDown);owner.removeEventListener("keydown",onKeyDown);owner.removeEventListener("dblclick",onDoubleClick);if(frameAnimation){window.cancelAnimationFrame(frameAnimation);frameAnimation=0}smoothScroll.cancel();releaseDocumentMouse();releaseTouches();triggerPanEnd()}function listenForEvents(){owner.addEventListener("mousedown",onMouseDown);owner.addEventListener("dblclick",onDoubleClick);owner.addEventListener("touchstart",onTouch);owner.addEventListener("keydown",onKeyDown);wheel.addWheelListener(owner,onMouseWheel);makeDirty()}function frame(){if(isDirty)applyTransform()}function applyTransform(){isDirty=false;domController.applyTransform(transform);triggerEvent("transform");frameAnimation=0}function onKeyDown(e){var x=0,y=0,z=0;if(e.keyCode===38){y=1}else if(e.keyCode===40){y=-1}else if(e.keyCode===37){x=1}else if(e.keyCode===39){x=-1}else if(e.keyCode===189||e.keyCode===109){z=1}else if(e.keyCode===187||e.keyCode===107){z=-1}if(x||y){e.preventDefault();e.stopPropagation();var clientRect=owner.getBoundingClientRect();var offset=Math.min(clientRect.width,clientRect.height);var moveSpeedRatio=.05;var dx=offset*moveSpeedRatio*x;var dy=offset*moveSpeedRatio*y;internalMoveBy(dx,dy)}if(z){var scaleMultiplier=getScaleMultiplier(z);publicZoomTo(owner.clientWidth/2,owner.clientHeight/2,scaleMultiplier)}}function onTouch(e){beforeTouch(e);if(e.touches.length===1){return handleSingleFingerTouch(e,e.touches[0])}else if(e.touches.length===2){pinchZoomLength=getPinchZoomLength(e.touches[0],e.touches[1]);multitouch=true;startTouchListenerIfNeeded()}}function beforeTouch(e){if(options.onTouch&&!options.onTouch(e)){return}e.stopPropagation();e.preventDefault()}function handleSingleFingerTouch(e){var touch=e.touches[0];mouseX=touch.clientX;mouseY=touch.clientY;startTouchListenerIfNeeded()}function startTouchListenerIfNeeded(){if(!touchInProgress){touchInProgress=true;document.addEventListener("touchmove",handleTouchMove);document.addEventListener("touchend",handleTouchEnd);document.addEventListener("touchcancel",handleTouchEnd)}}function handleTouchMove(e){if(e.touches.length===1){e.stopPropagation();var touch=e.touches[0];var dx=touch.clientX-mouseX;var dy=touch.clientY-mouseY;if(dx!==0&&dy!==0){triggerPanStart()}mouseX=touch.clientX;mouseY=touch.clientY;internalMoveBy(dx,dy)}else if(e.touches.length===2){multitouch=true;var t1=e.touches[0];var t2=e.touches[1];var currentPinchLength=getPinchZoomLength(t1,t2);var scaleMultiplier=1;if(realPinch){scaleMultiplier=currentPinchLength/pinchZoomLength}else{var delta=0;if(currentPinchLength<pinchZoomLength){delta=1}else if(currentPinchLength>pinchZoomLength){delta=-1}scaleMultiplier=getScaleMultiplier(delta)}mouseX=(t1.clientX+t2.clientX)/2;mouseY=(t1.clientY+t2.clientY)/2;publicZoomTo(mouseX,mouseY,scaleMultiplier);pinchZoomLength=currentPinchLength;e.stopPropagation();e.preventDefault()}}function handleTouchEnd(e){if(e.touches.length>0){mouseX=e.touches[0].clientX;mouseY=e.touches[0].clientY}else{var now=new Date;if(now-lastTouchEndTime<doubleTapSpeedInMS){smoothZoom(mouseX,mouseY,zoomDoubleClickSpeed)}lastTouchEndTime=now;touchInProgress=false;triggerPanEnd();releaseTouches()}}function getPinchZoomLength(finger1,finger2){return Math.sqrt((finger1.clientX-finger2.clientX)*(finger1.clientX-finger2.clientX)+(finger1.clientY-finger2.clientY)*(finger1.clientY-finger2.clientY))}function onDoubleClick(e){smoothZoom(e.clientX,e.clientY,zoomDoubleClickSpeed);e.preventDefault();e.stopPropagation()}function onMouseDown(e){if(touchInProgress){e.stopPropagation();return false}var isLeftButton=e.button===1&&window.event!==null||e.button===0;if(!isLeftButton)return;mouseX=e.clientX;mouseY=e.clientY;document.addEventListener("mousemove",onMouseMove);document.addEventListener("mouseup",onMouseUp);preventTextSelection.capture(e.target||e.srcElement);return false}function onMouseMove(e){if(touchInProgress)return;triggerPanStart();var dx=e.clientX-mouseX;var dy=e.clientY-mouseY;mouseX=e.clientX;mouseY=e.clientY;internalMoveBy(dx,dy)}function onMouseUp(){preventTextSelection.release();triggerPanEnd();releaseDocumentMouse()}function releaseDocumentMouse(){document.removeEventListener("mousemove",onMouseMove);document.removeEventListener("mouseup",onMouseUp);panstartFired=false}function releaseTouches(){document.removeEventListener("touchmove",handleTouchMove);document.removeEventListener("touchend",handleTouchEnd);document.removeEventListener("touchcancel",handleTouchEnd);panstartFired=false;multitouch=false}function onMouseWheel(e){if(beforeWheel(e))return;smoothScroll.cancel();var scaleMultiplier=getScaleMultiplier(e.deltaY);if(scaleMultiplier!==1){publicZoomTo(e.clientX,e.clientY,scaleMultiplier);e.preventDefault()}}function smoothZoom(clientX,clientY,scaleMultiplier){var fromValue=transform.scale;var from={scale:fromValue};var to={scale:scaleMultiplier*fromValue};smoothScroll.cancel();cancelZoomAnimation();triggerEvent("zoom");zoomToAnimation=animate(from,to,{step:function(v){zoomAbs(clientX,clientY,v.scale)}})}function publicZoomTo(clientX,clientY,scaleMultiplier){smoothScroll.cancel();cancelZoomAnimation();return zoomByRatio(clientX,clientY,scaleMultiplier)}function cancelZoomAnimation(){if(zoomToAnimation){zoomToAnimation.cancel();zoomToAnimation=null}}function getScaleMultiplier(delta){var scaleMultiplier=1;if(delta>0){scaleMultiplier=1-speed}else if(delta<0){scaleMultiplier=1+speed}return scaleMultiplier}function triggerPanStart(){if(!panstartFired){triggerEvent("panstart");panstartFired=true;smoothScroll.start()}}function triggerPanEnd(){if(panstartFired){if(!multitouch)smoothScroll.stop();triggerEvent("panend")}}function triggerEvent(name){var event=createEvent(name);domElement.dispatchEvent(event)}}function noop(){}function validateBounds(bounds){var boundsType=typeof bounds;if(boundsType==="undefined"||boundsType==="boolean")return;var validBounds=isNumber(bounds.left)&&isNumber(bounds.top)&&isNumber(bounds.bottom)&&isNumber(bounds.right);if(!validBounds)throw new Error("Bounds object is not valid. It can be: "+"undefined, boolean (true|false) or an object {left, top, right, bottom}")}function isNumber(x){return Number.isFinite(x)}function isNaN(value){if(Number.isNaN){return Number.isNaN(value)}return value!==value}function rigidScroll(){return{start:noop,stop:noop,cancel:noop}}},{"./lib/createEvent.js":2,"./lib/domController.js":3,"./lib/kinetic.js":4,"./lib/svgController.js":5,"./lib/textSlectionInterceptor.js":6,"./lib/transform.js":7,amator:8,wheel:10}],2:[function(require,module,exports){module.exports=createEvent;var isIE=typeof Event!=="function";function createEvent(name){if(isIE){var evt=document.createEvent("CustomEvent");evt.initCustomEvent(name,true,true,undefined);return evt}else{return new Event(name,{bubbles:true})}}},{}],3:[function(require,module,exports){module.exports=makeDomController;function makeDomController(domElement){var elementValid=domElement instanceof HTMLElement;if(!elementValid){throw new Error("svg element is required for svg.panzoom to work")}var owner=domElement.parentElement;if(!owner){throw new Error("Do not apply panzoom to the detached DOM element. ")}domElement.scrollTop=0;owner.setAttribute("tabindex",1);var api={getBBox:getBBox,getOwner:getOwner,applyTransform:applyTransform};return api;function getOwner(){return owner}function getBBox(){return{left:0,top:0,width:domElement.clientWidth,height:domElement.clientHeight}}function applyTransform(transform){domElement.style.transformOrigin="0 0 0";domElement.style.transform="matrix("+transform.scale+", 0, 0, "+transform.scale+", "+transform.x+", "+transform.y+")"}}},{}],4:[function(require,module,exports){module.exports=kinetic;function kinetic(getPoint,scroll,settings){if(typeof settings!=="object"){settings={}}var minVelocity=typeof settings.minVelocity==="number"?settings.minVelocity:5;var amplitude=typeof settings.amplitude==="number"?settings.amplitude:.25;var lastPoint;var timestamp;var timeConstant=342;var ticker;var vx,targetX,ax;var vy,targetY,ay;var raf;return{start:start,stop:stop,cancel:dispose};function dispose(){window.clearInterval(ticker);window.cancelAnimationFrame(raf)}function start(){lastPoint=getPoint();ax=ay=vx=vy=0;timestamp=new Date;window.clearInterval(ticker);window.cancelAnimationFrame(raf);ticker=window.setInterval(track,100)}function track(){var now=Date.now();var elapsed=now-timestamp;timestamp=now;var currentPoint=getPoint();var dx=currentPoint.x-lastPoint.x;var dy=currentPoint.y-lastPoint.y;lastPoint=currentPoint;var dt=1e3/(1+elapsed);vx=.8*dx*dt+.2*vx;vy=.8*dy*dt+.2*vy}function stop(){window.clearInterval(ticker);window.cancelAnimationFrame(raf);var currentPoint=getPoint();targetX=currentPoint.x;targetY=currentPoint.y;timestamp=Date.now();if(vx<-minVelocity||vx>minVelocity){ax=amplitude*vx;targetX+=ax}if(vy<-minVelocity||vy>minVelocity){ay=amplitude*vy;targetY+=ay}raf=window.requestAnimationFrame(autoScroll)}function autoScroll(){var elapsed=Date.now()-timestamp;var moving=false;var dx=0;var dy=0;if(ax){dx=-ax*Math.exp(-elapsed/timeConstant);if(dx>.5||dx<-.5)moving=true;else dx=ax=0}if(ay){dy=-ay*Math.exp(-elapsed/timeConstant);if(dy>.5||dy<-.5)moving=true;else dy=ay=0}if(moving){scroll(targetX+dx,targetY+dy);raf=window.requestAnimationFrame(autoScroll)}}}},{}],5:[function(require,module,exports){module.exports=makeSvgController;function makeSvgController(svgElement){var elementValid=svgElement instanceof SVGElement;if(!elementValid){throw new Error("svg element is required for svg.panzoom to work")}var owner=svgElement.ownerSVGElement;if(!owner){throw new Error("Do not apply panzoom to the root <svg> element. "+"Use its child instead (e.g. <g></g>). "+"As of March 2016 only FireFox supported transform on the root element")}owner.setAttribute("tabindex",1);var api={getBBox:getBBox,getScreenCTM:getScreenCTM,getOwner:getOwner,applyTransform:applyTransform};return api;function getOwner(){return owner}function getBBox(){var bbox=svgElement.getBBox();return{left:bbox.x,top:bbox.y,width:bbox.width,height:bbox.height}}function getScreenCTM(){return owner.getScreenCTM()}function applyTransform(transform){svgElement.setAttribute("transform","matrix("+transform.scale+" 0 0 "+transform.scale+" "+transform.x+" "+transform.y+")")}}},{}],6:[function(require,module,exports){module.exports=createTextSelectionInterceptor;function createTextSelectionInterceptor(){var dragObject;var prevSelectStart;var prevDragStart;return{capture:capture,release:release};function capture(domObject){prevSelectStart=window.document.onselectstart;prevDragStart=window.document.ondragstart;window.document.onselectstart=disabled;dragObject=domObject;dragObject.ondragstart=disabled}function release(){window.document.onselectstart=prevSelectStart;if(dragObject)dragObject.ondragstart=prevDragStart}}function disabled(e){e.stopPropagation();return false}},{}],7:[function(require,module,exports){module.exports=Transform;function Transform(){this.x=0;this.y=0;this.scale=1}},{}],8:[function(require,module,exports){var BezierEasing=require("bezier-easing");var animations={ease:BezierEasing(.25,.1,.25,1),easeIn:BezierEasing(.42,0,1,1),easeOut:BezierEasing(0,0,.58,1),easeInOut:BezierEasing(.42,0,.58,1),linear:BezierEasing(0,0,1,1)};module.exports=animate;function animate(source,target,options){var start=Object.create(null);var diff=Object.create(null);options=options||{};var easing=typeof options.easing==="function"?options.easing:animations[options.easing];if(!easing){if(options.easing){console.warn("Unknown easing function in amator: "+options.easing)}easing=animations.ease}var step=typeof options.step==="function"?options.step:noop;var done=typeof options.done==="function"?options.done:noop;var scheduler=getScheduler(options.scheduler);var keys=Object.keys(target);keys.forEach(function(key){start[key]=source[key];diff[key]=target[key]-source[key]});var durationInMs=options.duration||400;var durationInFrames=Math.max(1,durationInMs*.06);var previousAnimationId;var frame=0;previousAnimationId=scheduler.next(loop);return{cancel:cancel};function cancel(){scheduler.cancel(previousAnimationId);previousAnimationId=0}function loop(){var t=easing(frame/durationInFrames);frame+=1;setValues(t);if(frame<=durationInFrames){previousAnimationId=scheduler.next(loop);step(source)}else{previousAnimationId=0;setTimeout(function(){done(source)},0)}}function setValues(t){keys.forEach(function(key){source[key]=diff[key]*t+start[key]})}}function noop(){}function getScheduler(scheduler){if(!scheduler){var canRaf=typeof window!=="undefined"&&window.requestAnimationFrame;return canRaf?rafScheduler():timeoutScheduler()}if(typeof scheduler.next!=="function")throw new Error("Scheduler is supposed to have next(cb) function");if(typeof scheduler.cancel!=="function")throw new Error("Scheduler is supposed to have cancel(handle) function");return scheduler}function rafScheduler(){return{next:window.requestAnimationFrame.bind(window),cancel:window.cancelAnimationFrame.bind(window)}}function timeoutScheduler(){return{next:function(cb){return setTimeout(cb,1e3/60)},cancel:function(id){return clearTimeout(id)}}}},{"bezier-easing":9}],9:[function(require,module,exports){var NEWTON_ITERATIONS=4;var NEWTON_MIN_SLOPE=.001;var SUBDIVISION_PRECISION=1e-7;var SUBDIVISION_MAX_ITERATIONS=10;var kSplineTableSize=11;var kSampleStepSize=1/(kSplineTableSize-1);var float32ArraySupported=typeof Float32Array==="function";function A(aA1,aA2){return 1-3*aA2+3*aA1}function B(aA1,aA2){return 3*aA2-6*aA1}function C(aA1){return 3*aA1}function calcBezier(aT,aA1,aA2){return((A(aA1,aA2)*aT+B(aA1,aA2))*aT+C(aA1))*aT}function getSlope(aT,aA1,aA2){return 3*A(aA1,aA2)*aT*aT+2*B(aA1,aA2)*aT+C(aA1)}function binarySubdivide(aX,aA,aB,mX1,mX2){var currentX,currentT,i=0;do{currentT=aA+(aB-aA)/2;currentX=calcBezier(currentT,mX1,mX2)-aX;if(currentX>0){aB=currentT}else{aA=currentT}}while(Math.abs(currentX)>SUBDIVISION_PRECISION&&++i<SUBDIVISION_MAX_ITERATIONS);return currentT}function newtonRaphsonIterate(aX,aGuessT,mX1,mX2){for(var i=0;i<NEWTON_ITERATIONS;++i){var currentSlope=getSlope(aGuessT,mX1,mX2);if(currentSlope===0){return aGuessT}var currentX=calcBezier(aGuessT,mX1,mX2)-aX;aGuessT-=currentX/currentSlope}return aGuessT}module.exports=function bezier(mX1,mY1,mX2,mY2){if(!(0<=mX1&&mX1<=1&&0<=mX2&&mX2<=1)){throw new Error("bezier x values must be in [0, 1] range")}var sampleValues=float32ArraySupported?new Float32Array(kSplineTableSize):new Array(kSplineTableSize);if(mX1!==mY1||mX2!==mY2){for(var i=0;i<kSplineTableSize;++i){sampleValues[i]=calcBezier(i*kSampleStepSize,mX1,mX2)}}function getTForX(aX){var intervalStart=0;var currentSample=1;var lastSample=kSplineTableSize-1;for(;currentSample!==lastSample&&sampleValues[currentSample]<=aX;++currentSample){intervalStart+=kSampleStepSize}--currentSample;var dist=(aX-sampleValues[currentSample])/(sampleValues[currentSample+1]-sampleValues[currentSample]);var guessForT=intervalStart+dist*kSampleStepSize;var initialSlope=getSlope(guessForT,mX1,mX2);if(initialSlope>=NEWTON_MIN_SLOPE){return newtonRaphsonIterate(aX,guessForT,mX1,mX2)}else if(initialSlope===0){return guessForT}else{return binarySubdivide(aX,intervalStart,intervalStart+kSampleStepSize,mX1,mX2)}}return function BezierEasing(x){if(mX1===mY1&&mX2===mY2){return x}if(x===0){return 0}if(x===1){return 1}return calcBezier(getTForX(x),mY1,mY2)}}},{}],10:[function(require,module,exports){module.exports=addWheelListener;module.exports.addWheelListener=addWheelListener;module.exports.removeWheelListener=removeWheelListener;var prefix="",_addEventListener,_removeEventListener,onwheel,support;detectEventModel(typeof window!=="undefined"&&window,typeof document!=="undefined"&&document);function addWheelListener(elem,callback,useCapture){_addWheelListener(elem,support,callback,useCapture);if(support=="DOMMouseScroll"){_addWheelListener(elem,"MozMousePixelScroll",callback,useCapture)}}function removeWheelListener(elem,callback,useCapture){_removeWheelListener(elem,support,callback,useCapture);if(support=="DOMMouseScroll"){_removeWheelListener(elem,"MozMousePixelScroll",callback,useCapture)}}function _addWheelListener(elem,eventName,callback,useCapture){elem[_addEventListener](prefix+eventName,support=="wheel"?callback:function(originalEvent){!originalEvent&&(originalEvent=window.event);var event={originalEvent:originalEvent,target:originalEvent.target||originalEvent.srcElement,type:"wheel",deltaMode:originalEvent.type=="MozMousePixelScroll"?0:1,deltaX:0,delatZ:0,clientX:originalEvent.clientX,clientY:originalEvent.clientY,preventDefault:function(){originalEvent.preventDefault?originalEvent.preventDefault():originalEvent.returnValue=false},stopPropagation:function(){if(originalEvent.stopPropagation)originalEvent.stopPropagation()},stopImmediatePropagation:function(){if(originalEvent.stopImmediatePropagation)originalEvent.stopImmediatePropagation()}};if(support=="mousewheel"){event.deltaY=-1/40*originalEvent.wheelDelta;originalEvent.wheelDeltaX&&(event.deltaX=-1/40*originalEvent.wheelDeltaX)}else{event.deltaY=originalEvent.detail}return callback(event)},useCapture||false)}function _removeWheelListener(elem,eventName,callback,useCapture){elem[_removeEventListener](prefix+eventName,callback,useCapture||false)}function detectEventModel(window,document){if(window&&window.addEventListener){_addEventListener="addEventListener";_removeEventListener="removeEventListener"}else{_addEventListener="attachEvent";_removeEventListener="detachEvent";prefix="on"}if(document){support="onwheel"in document.createElement("div")?"wheel":document.onmousewheel!==undefined?"mousewheel":"DOMMouseScroll"}else{support="wheel"}}},{}]},{},[1])(1)});

index.js

@@ -114,2 +114,6 @@ /* globals SVGElement */
     var rectHeight = rect.bottom - rect.top
+    if (!Number.isFinite(rectWidth) || !Number.isFinite(rectHeight)) {
+      throw new Error('Invalid rectangle');
+    }
+
     var dh = h/rectHeight
@@ -277,3 +281,4 @@ var dw = w/rectWidth
 
-    var parentScale = 1
+    var parentScaleX = 1
+    var parentScaleY = 1
     var parentOffsetX = 0
@@ -283,4 +288,6 @@ var parentOffsetY = 0
     if (domController.getScreenCTM) {
+      // TODO: This is likely need to be done for all mouse/touch events.
       var parentCTM = domController.getScreenCTM()
-      parentScale = parentCTM.a
+      parentScaleX = parentCTM.a
+      parentScaleY = parentCTM.b
       parentOffsetX = parentCTM.e
@@ -290,4 +297,4 @@ parentOffsetY = parentCTM.f
 
-    var x = clientX * parentScale - parentOffsetX
-    var y = clientY * parentScale - parentOffsetY
+    var x = clientX * parentScaleX - parentOffsetX
+    var y = clientY * parentScaleY - parentOffsetY
 
@@ -433,2 +440,3 @@ transform.x = x - ratio * (x - transform.x)
   function onTouch(e) {
+    beforeTouch(e);
     if (e.touches.length === 1) {
@@ -438,5 +446,2 @@ return handleSingleFingerTouch(e, e.touches[0])
       // handleTouchMove() will care about pinch zoom.
-      e.stopPropagation()
-      e.preventDefault()
-
       pinchZoomLength = getPinchZoomLength(e.touches[0], e.touches[1])
@@ -448,6 +453,14 @@ multitouch  = true
 
-  function handleSingleFingerTouch(e) {
+  function beforeTouch(e) {
+    if (options.onTouch && !options.onTouch(e)) {
+      // if they return `false` from onTouch, we don't want to stop
+      // events propagation. Fixes https://github.com/anvaka/panzoom/issues/12
+      return
+    }
+
     e.stopPropagation()
     e.preventDefault()
+  }
 
+  function handleSingleFingerTouch(e) {
     var touch = e.touches[0]
@@ -717,2 +730,2 @@ mouseX = touch.clientX
   }
-}
+}

package.json

 {
   "name": "panzoom",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Extensible, mobile friendly pan and zoom framework (supports DOM and SVG).",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -171,4 +171,24 @@ # panzoom
 
+## Handling touch events
+
+The library will handle `ontouch` events very aggressively, it will `preventDefault`, and
+`stopPropagation` for the touch events inside container. [Sometimes](https://github.com/anvaka/panzoom/issues/12) this is not a desirable behavior.
+
+If you want to take care about this yourself, you can pass `onTouch` callback to the options object:
+
+``` js
+panzoom(document.getElementById('g4'), {
+  onTouch: function(e) {
+    // `e` - is current touch event.
+
+    return false; // tells the library to not preventDefault.
+  }
+});
+```
+
+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](https://stackoverflow.com/questions/23862204/disable-ios-safari-elastic-scrolling). 
+
 # license
 
 MIT

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

160541

increased by1.25%

Lines of code

2013

increased by6.4%

Number of lines in readme file

194

increased by11.49%

No dependency changes