coherent-gameface-interaction-manager
Version:
Library for the most common UI interactions
3 lines (2 loc) • 11.7 kB
JavaScript
var resize=(()=>{var v=(o,e)=>()=>(o&&(e=o(o=0)),e);var H=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports);function y(o){return o*180/Math.PI}function p(o,e,t){return Math.min(Math.max(o,e),t)}function F(){return(Math.random()+1).toString(36).substring(7)}function f(o,e,t,i){let n=o-t,r=e-i;return Math.hypot(n,r)}function W(o,e,t,i){return{x:(o+t)/2,y:(e+i)/2}}var M=v(()=>{});var b,g,I=v(()=>{b=class o{constructor(){this.actions=[],this.keyboardFunctions=[],this.gamepadFunctions=[]}init(){window._IM||(window._IM=new o)}getKeys(e){return _IM.keyboardFunctions.filter(t=>t.keys.every(i=>e.includes(i)))}getKeysIndex(e){return _IM.keyboardFunctions.findIndex(t=>t.keys.every(i=>e.includes(i)))}getGamepadAction({actions:e,type:t}){return _IM.gamepadFunctions.find(i=>i.actions.every(n=>e.includes(n))&&i.type===t&&i.actions.length===e.length)}getGamepadActions(e){return _IM.gamepadFunctions.filter(t=>t.actions.every(i=>e.includes(i))&&t.actions.length===e.length)}getGamepadActionIndex(e){return _IM.gamepadFunctions.findIndex(t=>t.actions.every(i=>e.includes(i)))}getAction(e){return _IM.actions.find(t=>t.name===e)}getActionIndex(e){return _IM.actions.findIndex(t=>t.name===e)}},g=new b});var w,d,P=v(()=>{I();w=class{register(e,t){if(g.getAction(e))return console.error(`The following action "${e}" is already registered!`);_IM.actions.push({name:e,callback:t})}remove(e){let t=g.getActionIndex(e);if(t===-1)return console.error(`${e} is not a registered action!`);_IM.actions.splice(t,1)}execute(e,t){let i=g.getAction(e);if(!i)return console.error(`${e} is not a registered action!`);i.callback(t)}},d=new w});function N(o,e){if(e<0&&o>-200&&o<200)return"top";if(e>0&&o>-200&&o<200)return"bottom";if(o<0&&e>-200&&e<200)return"left";if(o>0&&e>-200&&e<200)return"right";if(o<=-200&&e<=-200)return"top-left";if(o>=200&&e<=-200)return"top-right";if(o<=-200&&e>=200)return"bottom-left";if(o>=200&&e>=200)return"bottom-right"}function l(o){return o instanceof HTMLElement?o:document.querySelector(o)}var O=v(()=>{});var T,_,D,A=v(()=>{O();M();T=2,_=class{constructor(){this.activeTouches=new Map}hold(e){if(!e)return console.error("Options not provided for hold!");let t,i=l(e.element);if(!i)return console.error("Element not found!");let n=({touches:s})=>{this.activeTouches.set(s[0].identifier,s[0]),t=setTimeout(()=>{e.callback&&e.callback()},e.time||1e3)},r=({touches:s})=>{this.activeTouches.delete(s[0].identifier),clearTimeout(t)};return i.addEventListener("touchstart",n),i.addEventListener("touchend",r),{remove(){i.removeEventListener("touchstart",n),i.removeEventListener("touchend",r)}}}tap(e){if(!e)return console.error("Options not provided for tap!");let t,i,n=!0,r=e.tapsNumber||1,s=l(e.element);if(!s)return console.error("Element not found!");let a=({touches:c})=>{this.activeTouches.set(c[0].identifier,c[0]),clearTimeout(i),n=!0,t=setTimeout(()=>{n=!1},e.tapTime||200)},h=({touches:c})=>{this.activeTouches.delete(c[0].identifier),clearTimeout(t),n&&(r--,i=setTimeout(()=>{r=e.tapsNumber||1,clearTimeout(i)},e.betweenTapsTime||500),!(r!==0||!e.callback)&&(e.callback(),n=!0,clearTimeout(t),r=e.tapsNumber||1))};return s.addEventListener("touchstart",a),s.addEventListener("touchend",h),{remove(){s.removeEventListener("touchstart",a),s.removeEventListener("touchend",h)}}}drag(e){if(!e)return console.error("Options not provided for drag!");let t=l(e.element);if(!t)return console.error("Element not found!");let i=({touches:s,target:a,currentTarget:h})=>{this.activeTouches.set(s[0].identifier,s[0]),document.addEventListener("touchmove",n),document.addEventListener("touchend",r),e.onDragStart&&e.onDragStart({x:s[0].clientX,y:s[0].clientY,target:a,currentTarget:h})},n=({touches:s})=>{this.activeTouches.has(s[0].identifier)&&e.onDrag&&e.onDrag({x:s[0].clientX,y:s[0].clientY})},r=({touches:s})=>{this.activeTouches.delete(s[0].identifier),document.removeEventListener("touchmove",n),document.removeEventListener("touchend",r),e.onDragEnd&&e.onDragEnd({x:s[0].clientX,y:s[0].clientY})};return t.addEventListener("touchstart",i),{remove(){t.removeEventListener("touchstart",i)}}}swipe(e){if(!e)return console.error("Options not provided for swipe!");let t,i,n,r=!0,s=100;e.touchNumber||=1;let a=l(e.element);if(!a)return console.error("Element not found!");let h=({touches:u})=>{this.activeTouches.set(u[0].identifier,u[0]),this.activeTouches.size>e.touchNumber&&(document.removeEventListener("touchmove",c),document.removeEventListener("touchend",m)),this.activeTouches.size===e.touchNumber&&(t=setTimeout(()=>{r=!1,clearTimeout(t),t=null},1e3),document.addEventListener("touchmove",c),document.addEventListener("touchend",m))},c=({touches:u})=>{if(!this.activeTouches.has(u[0].identifier))return;let{clientX:S,clientY:L}=this.activeTouches.get(u[0].identifier),C=u[0].clientX-S,R=u[0].clientY-L;i=N(C,R),n=f(S,L,u[0].clientX,u[0].clientY)},m=({touches:u})=>{this.activeTouches.delete(u[0].identifier),this.activeTouches.size===0&&(document.removeEventListener("touchmove",c),document.removeEventListener("touchend",m),E()&&e.callback(i),clearTimeout(t),r=!0,t=null)},E=()=>r&&e.callback&&i&&n>s;return a.addEventListener("touchstart",h),{remove(){a.removeEventListener("touchstart",h)}}}pinch(e){if(!e)return console.error("Options not provided for pinch!");let t,i=40,n=l(e.element);if(!n)return console.error("Element not found!");let r=({touches:h})=>{this.activeTouches.set(h[0].identifier,h[0]),!(this.activeTouches.size<T)&&(document.addEventListener("touchmove",s),document.addEventListener("touchend",a),t=f(this.activeTouches.get(0).clientX,this.activeTouches.get(0).clientY,this.activeTouches.get(1).clientX,this.activeTouches.get(1).clientY))},s=({touches:h})=>{if(this.activeTouches.size!==T)return;this.activeTouches.set(h[0].identifier,h[0]);let c=f(this.activeTouches.get(0).clientX,this.activeTouches.get(0).clientY,this.activeTouches.get(1).clientX,this.activeTouches.get(1).clientY),m=Math.sign(c-t)*i;t=c;let E=W(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})},a=({touches:h})=>{this.activeTouches.delete(h[0].identifier),this.activeTouches.size===0&&(document.removeEventListener("touchmove",s),document.removeEventListener("touchend",a))};return n.addEventListener("touchstart",r),{remove(){n.removeEventListener("touchstart",r)}}}rotate(e){if(!e)return console.error("Options not provided for rotate!");let t=0,i,n=l(e.element);if(!n)return console.error("Element not found!");let r=({touches:c})=>{this.activeTouches.size<T||(this.activeTouches.set(c[0].identifier,c[0]),t=h()-i,e.callback&&e.callback(t))},s=({touches:c})=>{this.activeTouches.set(c[0].identifier,c[0]),this.activeTouches.size===T&&(i=h()-t,document.addEventListener("touchmove",r),document.addEventListener("touchend",a))},a=({touches:c})=>{this.activeTouches.delete(c[0].identifier),document.removeEventListener("touchmove",r),document.removeEventListener("touchend",a)};n.addEventListener("touchstart",s);let h=()=>{let E=this.activeTouches.get(0).clientY-this.activeTouches.get(1).clientY,u=this.activeTouches.get(0).clientX-this.activeTouches.get(1).clientX;return(y(Math.atan2(E,u))+360+90)%360};return{remove(){n.removeEventListener("touchstart",s)}}}},D=new _});var x,k,z=v(()=>{M();P();A();x=class{constructor(e){this.options=e,this.options.edgeWidth=e.edgeWidth||5,this.options.heightMin=this.options.heightMin||50,this.options.heightMax=this.options.heightMax||window.innerHeight,this.options.widthMin=this.options.widthMin||50,this.options.widthMax=this.options.widthMax||window.innerWidth,this.resizableElement=null,this.enabled=!1,this.activeEdge=null,this.edges={bottom:null,right:null,bottomRight:null};let t=F();this.heightAction=`resize-height-${t}`,this.widthAction=`resize-width-${t}`,this.onMouseDown=this.onMouseDown.bind(this),this.onMouseMove=this.onMouseMove.bind(this),this.onMouseUp=this.onMouseUp.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.resizableElement=document.querySelector(this.options.element),!this.resizableElement)return console.error(`${this.options.element} is not a correct selector`);this.resizableElement.addEventListener("mousedown",this.onMouseDown),this.addEdges(),this.registerActions(),this.enabled=!0}}deinit(){this.enabled&&(this.resizableElement.removeEventListener("mousedown",this.onMouseDown),this.removeEdges(),this.removeActions(),this.enabled=!1)}onMouseDown(e){if(this.activeEdge=this.setEdge(e.target),!this.activeEdge)return;let{x:t,y:i}=this.resizableElement.getBoundingClientRect();this.elementRect={x:t,y:i},document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)}onMouseMove(e){let t=e.clientX-this.elementRect.x,i=e.clientY-this.elementRect.y;switch(this.activeEdge){case"bottom":d.execute(this.heightAction,i),this.options.onHeightChange&&this.options.onHeightChange(i);break;case"right":d.execute(this.widthAction,t),this.options.onWidthChange&&this.options.onWidthChange(t);break;case"bottomRight":d.execute(this.heightAction,i),d.execute(this.widthAction,t),this.options.onWidthChange&&this.options.onWidthChange(t),this.options.onHeightChange&&this.options.onHeightChange(i);break}}onMouseUp(){this.activeEdge=null,document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onMouseUp)}addTouchEvents(){this.touchEvents=D.drag({element:this.resizableElement,onDragStart:e=>{this.onMouseDown(e)},onDrag:({x:e,y:t})=>{this.onMouseMove({clientX:e,clientY:t})},onDragEnd:()=>{this.onMouseUp()}})}removeTouchEvents(){this.touchEvents.remove(),this.touchEvents=null}setEdge(e){return e.dataset.edge?e.dataset.edge:null}checkPosition(){let{position:e}=getComputedStyle(this.resizableElement);e==="absolute"||e==="relative"||(this.resizableElement.style.position="relative")}addEdges(){this.checkPosition();let{width:e,height:t}=this.resizableElement.getBoundingClientRect();Object.entries(this.edges).forEach(([i,n])=>{switch(n=document.createElement("DIV"),n.dataset.edge=i,n.style.position="absolute",i){case"bottom":n.style.width=`${e-this.options.edgeWidth}px`,n.style.height=`${this.options.edgeWidth}px`,n.style.bottom=`-${this.options.edgeWidth}px`;break;case"bottomRight":n.style.width=`${this.options.edgeWidth}px`,n.style.height=`${this.options.edgeWidth}px`,n.style.bottom=`-${this.options.edgeWidth}px`,n.style.right=`-${this.options.edgeWidth}px`;break;case"right":n.style.width=`${this.options.edgeWidth}px`,n.style.height=`${t-this.options.edgeWidth}px`,n.style.right=`-${this.options.edgeWidth}px`;break}this.edges[i]=n,this.resizableElement.appendChild(n)})}removeEdges(){Object.values(this.edges).forEach(e=>{this.resizableElement.removeChild(e)})}registerActions(){d.register(this.heightAction,e=>{this.resizableElement.style.height=`${p(e,this.options.heightMin,this.options.heightMax)}px`,this.edges.right.style.height=`${p(e,this.options.heightMin,this.options.heightMax)-this.options.edgeWidth}px`}),d.register(this.widthAction,e=>{this.resizableElement.style.width=`${p(e,this.options.widthMin,this.options.widthMax)}px`,this.edges.bottom.style.width=`${p(e,this.options.widthMin,this.options.widthMax)-this.options.edgeWidth}px`})}removeActions(){d.remove(this.heightAction),d.remove(this.widthAction)}},k=x});var X=H((oe,$)=>{z();I();g.init();$.exports=k});return X();})();
//# sourceMappingURL=resize.min.js.map