6 lines
No EOL
9.2 KiB
JavaScript
6 lines
No EOL
9.2 KiB
JavaScript
/**
|
|
* Panzoom for panning and zooming elements using CSS transforms
|
|
* Copyright Timmy Willison and other contributors
|
|
* https://github.com/timmywil/panzoom/blob/master/MIT-License.txt
|
|
*/
|
|
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Panzoom=e()}(this,function(){"use strict";var N=function(){return(N=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function L(t,e){for(var n=t.length;n--;)if(t[n].pointerId===e.pointerId)return n;return-1}function I(t,e){var n;if(e.touches)for(var o=n=0,r=e.touches;o<r.length;o++){var a=r[o];a.pointerId=n++,I(t,a)}else-1<(n=L(t,e))&&t.splice(n,1),t.push(e)}function W(t){for(var e,n=(t=t.slice(0)).pop();e=t.pop();)n={clientX:(e.clientX-n.clientX)/2+n.clientX,clientY:(e.clientY-n.clientY)/2+n.clientY};return n}function Z(t){if(t.length<2)return 0;var e=t[0],n=t[1];return Math.sqrt(Math.pow(Math.abs(n.clientX-e.clientX),2)+Math.pow(Math.abs(n.clientY-e.clientY),2))}"undefined"!=typeof window&&(window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"function"!=typeof window.CustomEvent&&(window.CustomEvent=function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:null};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}));var q={down:"mousedown",move:"mousemove",up:"mouseup mouseleave"};function B(t,e,n,o){q[t].split(" ").forEach(function(t){e.addEventListener(t,n,o)})}function D(t,e,n){q[t].split(" ").forEach(function(t){e.removeEventListener(t,n)})}"undefined"!=typeof window&&("function"==typeof window.PointerEvent?q={down:"pointerdown",move:"pointermove",up:"pointerup pointerleave pointercancel"}:"function"==typeof window.TouchEvent&&(q={down:"touchstart",move:"touchmove",up:"touchend touchcancel"}));var a,c="undefined"!=typeof document&&!!document.documentMode;var i=["webkit","moz","ms"],l={};function F(t){if(l[t])return l[t];var e=a=a||document.createElement("div").style;if(t in e)return l[t]=t;for(var n=t[0].toUpperCase()+t.slice(1),o=i.length;o--;){var r=""+i[o]+n;if(r in e)return l[t]=r}}function r(t,e){return parseFloat(e[F(t)])||0}function p(t,e,n){void 0===n&&(n=window.getComputedStyle(t));var o="border"===e?"Width":"";return{left:r(e+"Left"+o,n),right:r(e+"Right"+o,n),top:r(e+"Top"+o,n),bottom:r(e+"Bottom"+o,n)}}function R(t,e,n){t.style[F(e)]=n}function j(t){var e=t.parentNode,n=window.getComputedStyle(t),o=window.getComputedStyle(e),r=t.getBoundingClientRect(),a=e.getBoundingClientRect();return{elem:{style:n,width:r.width,height:r.height,top:r.top,bottom:r.bottom,left:r.left,right:r.right,margin:p(t,"margin",n),border:p(t,"border",n)},parent:{style:o,width:a.width,height:a.height,top:a.top,bottom:a.bottom,left:a.left,right:a.right,padding:p(e,"padding",o),border:p(e,"border",o)}}}var V=/^http:[\w\.\/]+svg$/;var G={animate:!1,canvas:!1,cursor:"move",disablePan:!1,disableZoom:!1,disableXAxis:!1,disableYAxis:!1,duration:200,easing:"ease-in-out",exclude:[],excludeClass:"panzoom-exclude",handleStartEvent:function(t){t.preventDefault(),t.stopPropagation()},maxScale:4,minScale:.125,overflow:"hidden",panOnlyWhenZoomed:!1,relative:!1,setTransform:function(t,e,n){var o,r=e.x,a=e.y,i=e.scale,l=e.isSVG;R(t,"transform","scale("+i+") translate("+r+"px, "+a+"px)"),l&&c&&(o=window.getComputedStyle(t).getPropertyValue("transform"),t.setAttribute("transform",o))},startX:0,startY:0,startScale:1,step:.3,touchAction:"none"};function t(g,y){if(!g)throw new Error("Panzoom requires an element as an argument");if(1!==g.nodeType)throw new Error("Panzoom requires an element with a nodeType of 1");if(e=(t=g).ownerDocument,n=t.parentNode,!(e&&n&&9===e.nodeType&&1===n.nodeType&&e.documentElement.contains(n)))throw new Error("Panzoom should be called on elements that have been attached to the DOM");var t,e,n;y=N(N({},G),y);var o,p=(o=g,V.test(o.namespaceURI)&&"svg"!==o.nodeName.toLowerCase()),r=g.parentNode;r.style.overflow=y.overflow,r.style.userSelect="none",r.style.touchAction=y.touchAction,(y.canvas?r:g).style.cursor=y.cursor,g.style.userSelect="none",g.style.touchAction=y.touchAction,R(g,"transformOrigin","string"==typeof y.origin?y.origin:p?"0 0":"50% 50%");var a,i,l,c,d,s,w=0,b=0,x=1,u=!1;function f(t,e,n){var o;n.silent||(o=new CustomEvent(t,{detail:e}),g.dispatchEvent(o))}function m(t,e){var n={x:w,y:b,scale:x,isSVG:p};return requestAnimationFrame(function(){var t;"boolean"==typeof e.animate&&(e.animate?(t=e,R(g,"transition",F("transform")+" "+t.duration+"ms "+t.easing)):R(g,"transition","none")),e.setTransform(g,n,e)}),f(t,n,e),f("panzoomchange",n,e),n}function h(){var t,e,n,o,r;y.contain&&(e=(t=j(g)).parent.width-t.parent.border.left-t.parent.border.right,n=t.parent.height-t.parent.border.top-t.parent.border.bottom,o=e/(t.elem.width/x),r=n/(t.elem.height/x),"inside"===y.contain?y.maxScale=Math.min(o,r):"outside"===y.contain&&(y.minScale=Math.max(o,r)))}function v(t,e,n,o){var r,a,i,l,c,p,d,s,u,f,m,h=N(N({},y),o),v={x:w,y:b,opts:h};return!h.force&&(h.disablePan||h.panOnlyWhenZoomed&&x===h.startScale)||(t=parseFloat(t),e=parseFloat(e),h.disableXAxis||(v.x=(h.relative?w:0)+t),h.disableYAxis||(v.y=(h.relative?b:0)+e),"inside"===h.contain?(r=j(g),v.x=Math.max(-r.elem.margin.left-r.parent.padding.left,Math.min(r.parent.width-r.elem.width/n-r.parent.padding.left-r.elem.margin.left-r.parent.border.left-r.parent.border.right,v.x)),v.y=Math.max(-r.elem.margin.top-r.parent.padding.top,Math.min(r.parent.height-r.elem.height/n-r.parent.padding.top-r.elem.margin.top-r.parent.border.top-r.parent.border.bottom,v.y))):"outside"===h.contain&&(p=((l=(a=(r=j(g)).elem.width/x)*n)-a)/2,d=((c=(i=r.elem.height/x)*n)-i)/2,s=(-(l-r.parent.width)-r.parent.padding.left-r.parent.border.left-r.parent.border.right+p)/n,u=(p-r.parent.padding.left)/n,v.x=Math.max(Math.min(v.x,u),s),f=(-(c-r.parent.height)-r.parent.padding.top-r.parent.border.top-r.parent.border.bottom+d)/n,m=(d-r.parent.padding.top)/n,v.y=Math.max(Math.min(v.y,m),f))),v}function S(t,e){var n=N(N({},y),e),o={scale:x,opts:n};return!n.force&&n.disableZoom||(o.scale=Math.min(Math.max(t,n.minScale),n.maxScale)),o}function E(t,e,n){var o=v(t,e,x,n),r=o.opts;return w=o.x,b=o.y,m("panzoompan",r)}function M(t,e){var n=S(t,e),o=n.opts;if(o.force||!o.disableZoom){t=n.scale;var r,a=w,i=b;o.focal&&(a=((r=o.focal).x/t-r.x/x+w*t)/t,i=(r.y/t-r.y/x+b*t)/t);var l=v(a,i,t,{relative:!1,force:!0});return w=l.x,b=l.y,x=t,m("panzoomzoom",o)}}function O(t,e){var n=N(N(N({},y),{animate:!0}),e);return M(x*Math.exp((t?1:-1)*n.step),n)}function P(t,e,n){var o=j(g),r=o.parent.width-o.parent.padding.left-o.parent.padding.right-o.parent.border.left-o.parent.border.right,a=o.parent.height-o.parent.padding.top-o.parent.padding.bottom-o.parent.border.top-o.parent.border.bottom,i=e.clientX-o.parent.left-o.parent.padding.left-o.parent.border.left-o.elem.margin.left,l=e.clientY-o.parent.top-o.parent.padding.top-o.parent.border.top-o.elem.margin.top;p||(i-=o.elem.width/x/2,l-=o.elem.height/x/2);var c={x:i/r*(r*t),y:l/a*(a*t)};return M(t,N(N({animate:!1},n),{focal:c}))}M(y.startScale,{animate:!1}),setTimeout(function(){h(),E(y.startX,y.startY,{animate:!1})});var z=[];function A(t){var e;!function(t,e){for(var n,o,r=t;null!=r;r=r.parentNode)if(n=r,o=e.excludeClass,1===n.nodeType&&-1<(" "+(n.getAttribute("class")||"").trim()+" ").indexOf(" "+o+" ")||-1<e.exclude.indexOf(r))return 1}(t.target,y)&&(I(z,t),u=!0,y.handleStartEvent(t),f("panzoomstart",{x:a=w,y:i=b,scale:x},y),e=W(z),l=e.clientX,c=e.clientY,d=x,s=Z(z))}function X(t){var e;u&&void 0!==a&&void 0!==i&&void 0!==l&&void 0!==c&&(I(z,t),e=W(z),1<z.length&&P(S((Z(z)-s)*y.step/80+d).scale,e),E(a+(e.clientX-l)/x,i+(e.clientY-c)/x,{animate:!1}))}function Y(t){1===z.length&&f("panzoomend",{x:w,y:b,scale:x},y),function(t,e){if(e.touches)for(;t.length;)t.pop();else{var n=L(t,e);-1<n&&t.splice(n,1)}}(z,t),u&&(u=!1,a=i=l=c=void 0)}var C=!1;function T(){C||(C=!0,B("down",y.canvas?r:g,A),B("move",document,X,{passive:!0}),B("up",document,Y,{passive:!0}))}return y.noBind||T(),{bind:T,destroy:function(){C=!1,D("down",y.canvas?r:g,A),D("move",document,X),D("up",document,Y)},eventNames:q,getPan:function(){return{x:w,y:b}},getScale:function(){return x},getOptions:function(){return function(t){var e,n={};for(e in t)t.hasOwnProperty(e)&&(n[e]=t[e]);return n}(y)},pan:E,reset:function(t){var e=N(N(N({},y),{animate:!0,force:!0}),t);x=S(e.startScale,e).scale;var n=v(e.startX,e.startY,x,e);return w=n.x,b=n.y,m("panzoomreset",e)},setOptions:function(t){for(var e in void 0===t&&(t={}),t)t.hasOwnProperty(e)&&(y[e]=t[e]);t.hasOwnProperty("cursor")&&(g.style.cursor=t.cursor),t.hasOwnProperty("overflow")&&(r.style.overflow=t.overflow),t.hasOwnProperty("touchAction")&&(r.style.touchAction=t.touchAction,g.style.touchAction=t.touchAction),(t.hasOwnProperty("minScale")||t.hasOwnProperty("maxScale")||t.hasOwnProperty("contain"))&&h()},setStyle:function(t,e){return R(g,t,e)},zoom:M,zoomIn:function(t){return O(!0,t)},zoomOut:function(t){return O(!1,t)},zoomToPoint:P,zoomWithWheel:function(t,e){t.preventDefault();var n=N(N({},y),e),o=(0===t.deltaY&&t.deltaX?t.deltaX:t.deltaY)<0?1:-1;return P(S(x*Math.exp(o*n.step/3),n).scale,t,n)}}}return t.defaultOptions=G,t}); |