coherent-gameface-interaction-manager/dist/zoom.min.js

Library for the most common UI interactions

var zoom=(()=>{var d=(i,e)=>()=>(i&&(e=i(i=0)),e);var Y=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports);var I,v,p=d(()=>{I=class i{constructor(){this.actions=[],this.keyboardFunctions=[],this.gamepadFunctions=[]}init(){window._IM||(window._IM=new i)}getKeys(e){return _IM.keyboardFunctions.filter(t=>t.keys.every(n=>e.includes(n)))}getKeysIndex(e){return _IM.keyboardFunctions.findIndex(t=>t.keys.every(n=>e.includes(n)))}getGamepadAction({actions:e,type:t}){return _IM.gamepadFunctions.find(n=>n.actions.every(r=>e.includes(r))&&n.type===t&&n.actions.length===e.length)}getGamepadActions(e){return _IM.gamepadFunctions.filter(t=>t.actions.every(n=>e.includes(n))&&t.actions.length===e.length)}getGamepadActionIndex(e){return _IM.gamepadFunctions.findIndex(t=>t.actions.every(n=>e.includes(n)))}getAction(e){return _IM.actions.find(t=>t.name===e)}getActionIndex(e){return _IM.actions.findIndex(t=>t.name===e)}},v=new I});var _,f,F=d(()=>{p();_=class{register(e,t){if(v.getAction(e))return console.error(`The following action "${e}" is already registered!`);_IM.actions.push({name:e,callback:t})}remove(e){let t=v.getActionIndex(e);if(t===-1)return console.error(`${e} is not a registered action!`);_IM.actions.splice(t,1)}execute(e,t){let n=v.getAction(e);if(!n)return console.error(`${e} is not a registered action!`);n.callback(t)}},f=new _});function L(i,e){if(e<0&&i>-200&&i<200)return"top";if(e>0&&i>-200&&i<200)return"bottom";if(i<0&&e>-200&&e<200)return"left";if(i>0&&e>-200&&e<200)return"right";if(i<=-200&&e<=-200)return"top-left";if(i>=200&&e<=-200)return"top-right";if(i<=-200&&e>=200)return"bottom-left";if(i>=200&&e>=200)return"bottom-right"}function h(i){return i instanceof HTMLElement?i:document.querySelector(i)}var y=d(()=>{});function N(i){return i*180/Math.PI}function T(i,e,t,n){let r=i-t,s=e-n;return Math.hypot(r,s)}function O(i,e,t,n){return{x:(i+t)/2,y:(e+n)/2}}var P=d(()=>{});var g,S,w,z=d(()=>{y();P();g=2,S=class{constructor(){this.activeTouches=new Map}hold(e){if(!e)return console.error("Options not provided for hold!");let t,n=h(e.element);if(!n)return console.error("Element not found!");let r=({touches:o})=>{this.activeTouches.set(o[0].identifier,o[0]),t=setTimeout(()=>{e.callback&&e.callback()},e.time||1e3)},s=({touches:o})=>{this.activeTouches.delete(o[0].identifier),clearTimeout(t)};return n.addEventListener("touchstart",r),n.addEventListener("touchend",s),{remove(){n.removeEventListener("touchstart",r),n.removeEventListener("touchend",s)}}}tap(e){if(!e)return console.error("Options not provided for tap!");let t,n,r=!0,s=e.tapsNumber||1,o=h(e.element);if(!o)return console.error("Element not found!");let c=({touches:a})=>{this.activeTouches.set(a[0].identifier,a[0]),clearTimeout(n),r=!0,t=setTimeout(()=>{r=!1},e.tapTime||200)},u=({touches:a})=>{this.activeTouches.delete(a[0].identifier),clearTimeout(t),r&&(s--,n=setTimeout(()=>{s=e.tapsNumber||1,clearTimeout(n)},e.betweenTapsTime||500),!(s!==0||!e.callback)&&(e.callback(),r=!0,clearTimeout(t),s=e.tapsNumber||1))};return o.addEventListener("touchstart",c),o.addEventListener("touchend",u),{remove(){o.removeEventListener("touchstart",c),o.removeEventListener("touchend",u)}}}drag(e){if(!e)return console.error("Options not provided for drag!");let t=h(e.element);if(!t)return console.error("Element not found!");let n=({touches:o,target:c,currentTarget:u})=>{this.activeTouches.set(o[0].identifier,o[0]),document.addEventListener("touchmove",r),document.addEventListener("touchend",s),e.onDragStart&&e.onDragStart({x:o[0].clientX,y:o[0].clientY,target:c,currentTarget:u})},r=({touches:o})=>{this.activeTouches.has(o[0].identifier)&&e.onDrag&&e.onDrag({x:o[0].clientX,y:o[0].clientY})},s=({touches:o})=>{this.activeTouches.delete(o[0].identifier),document.removeEventListener("touchmove",r),document.removeEventListener("touchend",s),e.onDragEnd&&e.onDragEnd({x:o[0].clientX,y:o[0].clientY})};return t.addEventListener("touchstart",n),{remove(){t.removeEventListener("touchstart",n)}}}swipe(e){if(!e)return console.error("Options not provided for swipe!");let t,n,r,s=!0,o=100;e.touchNumber||=1;let c=h(e.element);if(!c)return console.error("Element not found!");let u=({touches:l})=>{this.activeTouches.set(l[0].identifier,l[0]),this.activeTouches.size>e.touchNumber&&(document.removeEventListener("touchmove",a),document.removeEventListener("touchend",m)),this.activeTouches.size===e.touchNumber&&(t=setTimeout(()=>{s=!1,clearTimeout(t),t=null},1e3),document.addEventListener("touchmove",a),document.addEventListener("touchend",m))},a=({touches:l})=>{if(!this.activeTouches.has(l[0].identifier))return;let{clientX:M,clientY:x}=this.activeTouches.get(l[0].identifier),A=l[0].clientX-M,R=l[0].clientY-x;n=L(A,R),r=T(M,x,l[0].clientX,l[0].clientY)},m=({touches:l})=>{this.activeTouches.delete(l[0].identifier),this.activeTouches.size===0&&(document.removeEventListener("touchmove",a),document.removeEventListener("touchend",m),E()&&e.callback(n),clearTimeout(t),s=!0,t=null)},E=()=>s&&e.callback&&n&&r>o;return c.addEventListener("touchstart",u),{remove(){c.removeEventListener("touchstart",u)}}}pinch(e){if(!e)return console.error("Options not provided for pinch!");let t,n=40,r=h(e.element);if(!r)return console.error("Element not found!");let s=({touches:u})=>{this.activeTouches.set(u[0].identifier,u[0]),!(this.activeTouches.size<g)&&(document.addEventListener("touchmove",o),document.addEventListener("touchend",c),t=T(this.activeTouches.get(0).clientX,this.activeTouches.get(0).clientY,this.activeTouches.get(1).clientX,this.activeTouches.get(1).clientY))},o=({touches:u})=>{if(this.activeTouches.size!==g)return;this.activeTouches.set(u[0].identifier,u[0]);let a=T(this.activeTouches.get(0).clientX,this.activeTouches.get(0).clientY,this.activeTouches.get(1).clientX,this.activeTouches.get(1).clientY),m=Math.sign(a-t)*n;t=a;let E=O(this.activeTouches.get(0).clientX,this.activeTouches.get(0).clientY,this.activeTouches.get(1).clientX,this.activeTouches.get(1).clientY);e.callback&&e.callback({pinchDelta:m,midpoint:E})},c=({touches:u})=>{this.activeTouches.delete(u[0].identifier),this.activeTouches.size===0&&(document.removeEventListener("touchmove",o),document.removeEventListener("touchend",c))};return r.addEventListener("touchstart",s),{remove(){r.removeEventListener("touchstart",s)}}}rotate(e){if(!e)return console.error("Options not provided for rotate!");let t=0,n,r=h(e.element);if(!r)return console.error("Element not found!");let s=({touches:a})=>{this.activeTouches.size<g||(this.activeTouches.set(a[0].identifier,a[0]),t=u()-n,e.callback&&e.callback(t))},o=({touches:a})=>{this.activeTouches.set(a[0].identifier,a[0]),this.activeTouches.size===g&&(n=u()-t,document.addEventListener("touchmove",s),document.addEventListener("touchend",c))},c=({touches:a})=>{this.activeTouches.delete(a[0].identifier),document.removeEventListener("touchmove",s),document.removeEventListener("touchend",c)};r.addEventListener("touchstart",o);let u=()=>{let E=this.activeTouches.get(0).clientY-this.activeTouches.get(1).clientY,l=this.activeTouches.get(0).clientX-this.activeTouches.get(1).clientX;return(N(Math.atan2(E,l))+360+90)%360};return{remove(){r.removeEventListener("touchstart",o)}}}},w=new S});var b,W,D=d(()=>{F();z();b=class{constructor(e){let t=(Math.random()+1).toString(36).substring(7);this.options=e,this.options.maxZoom=this.options.maxZoom||1/0,this.options.minZoom=this.options.minZoom||.1,this.options.zoomFactor=this.options.zoomFactor||.1,this.enabled=!1,this.actionName=`pan-and-zoom-${t}`,this.offset={x:0,y:0},this.transform={x:0,y:0,scale:1},this.onWheel=this.onWheel.bind(this),this._touchEnabled=!1,this.touchEvents=null,this.init()}set touchEnabled(e){this._touchEnabled!==e&&(this._touchEnabled=e,this._touchEnabled?this.addTouchEvents():this.removeTouchEvents())}init(){if(!this.enabled){if(this.zoomableElement=document.querySelector(this.options.element),!this.zoomableElement)return console.error(`${this.options.element} is not a correct element selector`);this.zoomableElement.addEventListener("wheel",this.onWheel),this.registerActions(),this.zoomableElement.style.transformOrigin="top left",this.enabled=!0}}deinit(){this.enabled&&(this.zoomableElement.removeEventListener("wheel",this.onWheel),this.removeActions(),this.enabled=!1)}onWheel(e){e.preventDefault(),f.execute(this.actionName,{x:e.clientX,y:e.clientY,zoomDirection:Math.sign(e.deltaY)})}registerActions(){f.register(this.actionName,({x:e,y:t,zoomDirection:n})=>{let r=this.calculateOffsets(e,t);this.options.onZoom&&this.options.onZoom();let s=(this.transform.scale-n*this.options.zoomFactor).toFixed(5);if(s<this.options.minZoom||s>this.options.maxZoom)return;let o={x:r.x/this.transform.scale,y:r.y/this.transform.scale},c=this.transform;c.x+=o.x*(this.transform.scale-s),c.y+=o.y*(this.transform.scale-s),c.scale=s,this.zoomableElement.style.transform=`matrix(${c.scale}, 0, 0, ${c.scale}, ${c.x}, ${c.y})`,this.transform=c})}removeActions(){f.remove(this.actionName)}addTouchEvents(){this.touchEvents=w.pinch({element:this.zoomableElement,callback:({pinchDelta:e,midpoint:t})=>{f.execute(this.actionName,{x:t.x,y:t.y,zoomDirection:Math.sign(e)*-1})}})}removeTouchEvents(){this.touchEvents.remove(),this.touchEvents=null}calculateOffsets(e,t){let n=this.zoomableElement.getBoundingClientRect();return{x:e-n.x,y:t-n.y}}},W=b});var X=Y((te,k)=>{D();p();v.init();k.exports=W});return X();})();
//# sourceMappingURL=zoom.min.js.map