panzoom.min.js

function PanZoom(t,e){let n=[],i=(e=e||{}).minScale?e.minScale:.1,s=e.maxScale?e.maxScale:5,a=e.increment?e.increment:.05,l=!!e.liner&&e.liner;return document.querySelectorAll(t).forEach(function(t){n.push(new AttachPanZoom(t,i,s,a,l))}),1==n.length?n[0]:n}function AttachPanZoom(t,e,n,i,s){this.increment=i,this.minScale=e,this.maxScale=n,this.liner=s,this.panning=!1,this.oldX=this.oldY=0;let a=this;t.style.transform="matrix(1, 0, 0, 1, 0, 0)",this.getTransformMatrix=function(){let e=t.style.transform,n=e.indexOf("(")+1,i=e.indexOf(")"),s=e.slice(n,i).split(",");return{scale:+s[0],transX:+s[4],transY:+s[5]}},this.setTransformMatrix=function(e){t.style.transform="matrix("+e.scale+", 0, 0, "+e.scale+", "+e.transX+", "+e.transY+")"},this.applyTranslate=function(t,e){let n=this.getTransformMatrix();n.transX+=t,n.transY+=e,this.setTransformMatrix(n)},this.applyScale=function(e,n,i){let s=this.getTransformMatrix(),a=n-(t.width?t.width:t.offsetWidth)/2,l=i-(t.height?t.height:t.offsetHeight)/2;e=this.liner?e:e*s.scale,s.scale+=e;let r=s.scale<=this.minScale||s.scale>=this.maxScale;s.scale<this.minScale&&(s.scale=this.minScale),s.scale>this.maxScale&&(s.scale=this.maxScale),r||(this.applyTranslate(a,l),this.setTransformMatrix(s),this.applyTranslate(-a*e,-l*e))},t.addEventListener("mousedown",function(t){t.preventDefault(),this.panning=!0,this.oldX=t.clientX,this.oldY=t.clientY}),t.addEventListener("mouseup",function(t){this.panning=!1}),t.addEventListener("mouseleave",function(t){this.panning=!1}),t.addEventListener("mousemove",function(t){if(this.panning){let e=t.clientX-this.oldX,n=t.clientY-this.oldY;a.applyTranslate(e,n),this.oldX=t.clientX,this.oldY=t.clientY}}),this.getScrollDirection=function(t){(t.wheelDelta?t.wheelDelta:-1*t.deltaY)<0?a.applyScale(-a.increment,t.offsetX,t.offsetY):a.applyScale(a.increment,t.offsetX,t.offsetY)},t.addEventListener("DOMMouseScroll",this.getScrollDirection,!1),t.addEventListener("mousewheel",this.getScrollDirection,!1)}