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

Library for the most common UI interactions

var dropzone=(()=>{var u=(s,e)=>()=>(s&&(e=s(s=0)),e);var H=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports);var T,x,D=u(()=>{T=class{constructor(e){this.draggableElements=[],this.draggedElement=null,this.enabled=!1,this.onMouseDown=this.onMouseDown.bind(this),this.onMouseMove=this.onMouseMove.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.options=e}get draggedItemIndex(){return[...this.draggableElements].indexOf(this.draggedElement)}get bodyScrollOffset(){return{x:document.body.scrollLeft,y:document.body.scrollTop}}setPointerOffset(e,t,n){let{x:i,y:r}=n.getBoundingClientRect();this.offset={x:e-i,y:t-r}}},x=T});function F(s){return s*180/Math.PI}function N(){return(Math.random()+1).toString(36).substring(7)}function f(s,e,t,n){let i=s-t,r=e-n;return Math.hypot(i,r)}function P(s,e,t,n){return{x:(s+t)/2,y:(e+n)/2}}var M=u(()=>{});var b,v,I=u(()=>{b=class s{constructor(){this.actions=[],this.keyboardFunctions=[],this.gamepadFunctions=[]}init(){window._IM||(window._IM=new s)}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(i=>e.includes(i))&&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 b});var S,m,z=u(()=>{I();S=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)}},m=new S});function A(s,e){if(e<0&&s>-200&&s<200)return"top";if(e>0&&s>-200&&s<200)return"bottom";if(s<0&&e>-200&&e<200)return"left";if(s>0&&e>-200&&e<200)return"right";if(s<=-200&&e<=-200)return"top-left";if(s>=200&&e<=-200)return"top-right";if(s<=-200&&e>=200)return"bottom-left";if(s>=200&&e>=200)return"bottom-right"}function g(s){return s instanceof HTMLElement?s:document.querySelector(s)}var k=u(()=>{});var p,y,w,C=u(()=>{k();M();p=2,y=class{constructor(){this.activeTouches=new Map}hold(e){if(!e)return console.error("Options not provided for hold!");let t,n=g(e.element);if(!n)return console.error("Element not found!");let i=({touches:o})=>{this.activeTouches.set(o[0].identifier,o[0]),t=setTimeout(()=>{e.callback&&e.callback()},e.time||1e3)},r=({touches:o})=>{this.activeTouches.delete(o[0].identifier),clearTimeout(t)};return n.addEventListener("touchstart",i),n.addEventListener("touchend",r),{remove(){n.removeEventListener("touchstart",i),n.removeEventListener("touchend",r)}}}tap(e){if(!e)return console.error("Options not provided for tap!");let t,n,i=!0,r=e.tapsNumber||1,o=g(e.element);if(!o)return console.error("Element not found!");let d=({touches:a})=>{this.activeTouches.set(a[0].identifier,a[0]),clearTimeout(n),i=!0,t=setTimeout(()=>{i=!1},e.tapTime||200)},c=({touches:a})=>{this.activeTouches.delete(a[0].identifier),clearTimeout(t),i&&(r--,n=setTimeout(()=>{r=e.tapsNumber||1,clearTimeout(n)},e.betweenTapsTime||500),!(r!==0||!e.callback)&&(e.callback(),i=!0,clearTimeout(t),r=e.tapsNumber||1))};return o.addEventListener("touchstart",d),o.addEventListener("touchend",c),{remove(){o.removeEventListener("touchstart",d),o.removeEventListener("touchend",c)}}}drag(e){if(!e)return console.error("Options not provided for drag!");let t=g(e.element);if(!t)return console.error("Element not found!");let n=({touches:o,target:d,currentTarget:c})=>{this.activeTouches.set(o[0].identifier,o[0]),document.addEventListener("touchmove",i),document.addEventListener("touchend",r),e.onDragStart&&e.onDragStart({x:o[0].clientX,y:o[0].clientY,target:d,currentTarget:c})},i=({touches:o})=>{this.activeTouches.has(o[0].identifier)&&e.onDrag&&e.onDrag({x:o[0].clientX,y:o[0].clientY})},r=({touches:o})=>{this.activeTouches.delete(o[0].identifier),document.removeEventListener("touchmove",i),document.removeEventListener("touchend",r),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,i,r=!0,o=100;e.touchNumber||=1;let d=g(e.element);if(!d)return console.error("Element not found!");let c=({touches:l})=>{this.activeTouches.set(l[0].identifier,l[0]),this.activeTouches.size>e.touchNumber&&(document.removeEventListener("touchmove",a),document.removeEventListener("touchend",h)),this.activeTouches.size===e.touchNumber&&(t=setTimeout(()=>{r=!1,clearTimeout(t),t=null},1e3),document.addEventListener("touchmove",a),document.addEventListener("touchend",h))},a=({touches:l})=>{if(!this.activeTouches.has(l[0].identifier))return;let{clientX:_,clientY:O}=this.activeTouches.get(l[0].identifier),U=l[0].clientX-_,B=l[0].clientY-O;n=A(U,B),i=f(_,O,l[0].clientX,l[0].clientY)},h=({touches:l})=>{this.activeTouches.delete(l[0].identifier),this.activeTouches.size===0&&(document.removeEventListener("touchmove",a),document.removeEventListener("touchend",h),E()&&e.callback(n),clearTimeout(t),r=!0,t=null)},E=()=>r&&e.callback&&n&&i>o;return d.addEventListener("touchstart",c),{remove(){d.removeEventListener("touchstart",c)}}}pinch(e){if(!e)return console.error("Options not provided for pinch!");let t,n=40,i=g(e.element);if(!i)return console.error("Element not found!");let r=({touches:c})=>{this.activeTouches.set(c[0].identifier,c[0]),!(this.activeTouches.size<p)&&(document.addEventListener("touchmove",o),document.addEventListener("touchend",d),t=f(this.activeTouches.get(0).clientX,this.activeTouches.get(0).clientY,this.activeTouches.get(1).clientX,this.activeTouches.get(1).clientY))},o=({touches:c})=>{if(this.activeTouches.size!==p)return;this.activeTouches.set(c[0].identifier,c[0]);let a=f(this.activeTouches.get(0).clientX,this.activeTouches.get(0).clientY,this.activeTouches.get(1).clientX,this.activeTouches.get(1).clientY),h=Math.sign(a-t)*n;t=a;let E=P(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:h,midpoint:E})},d=({touches:c})=>{this.activeTouches.delete(c[0].identifier),this.activeTouches.size===0&&(document.removeEventListener("touchmove",o),document.removeEventListener("touchend",d))};return i.addEventListener("touchstart",r),{remove(){i.removeEventListener("touchstart",r)}}}rotate(e){if(!e)return console.error("Options not provided for rotate!");let t=0,n,i=g(e.element);if(!i)return console.error("Element not found!");let r=({touches:a})=>{this.activeTouches.size<p||(this.activeTouches.set(a[0].identifier,a[0]),t=c()-n,e.callback&&e.callback(t))},o=({touches:a})=>{this.activeTouches.set(a[0].identifier,a[0]),this.activeTouches.size===p&&(n=c()-t,document.addEventListener("touchmove",r),document.addEventListener("touchend",d))},d=({touches:a})=>{this.activeTouches.delete(a[0].identifier),document.removeEventListener("touchmove",r),document.removeEventListener("touchend",d)};i.addEventListener("touchstart",o);let c=()=>{let E=this.activeTouches.get(0).clientY-this.activeTouches.get(1).clientY,l=this.activeTouches.get(0).clientX-this.activeTouches.get(1).clientX;return(F(Math.atan2(E,l))+360+90)%360};return{remove(){i.removeEventListener("touchstart",o)}}}},w=new y});var L,W,R=u(()=>{D();M();z();C();L=class extends x{constructor(e){super(e);let t=N();this.dropzones=[],this.draggedOver=null,this.actionName=`drag-and-drop-${t}`,this.automaticAction=`move-to-${t}`,this.onMouseEnter=this.onMouseEnter.bind(this),this.onMouseLeave=this.onMouseLeave.bind(this),this._touchEnabled=!1,this.touchEvents=[],this.init()}set touchEnabled(e){this._touchEnabled!==e&&(this._touchEnabled=e,this._touchEnabled?this.addTouchEvents():this.removeTouchEvents())}init(){if(!this.enabled){if(this.draggableElements=document.querySelectorAll(this.options.element),this.draggableElements.length===0)return console.error(`${this.options.element} is not a valid element selector.`);this.draggableElements.forEach(e=>e.addEventListener("mousedown",this.onMouseDown)),this.createDropzones(),this.dropzones.length!==0&&(this.dropzones.forEach(e=>{e.addEventListener("mouseenter",this.onMouseEnter),e.addEventListener("mouseleave",this.onMouseLeave)}),this.registerDragActions(),this.enabled=!0)}}deinit(){this.enabled&&(this.draggableElements.forEach(e=>e.removeEventListener("mousedown",this.onMouseDown)),this.dropzones.forEach(e=>{e.removeEventListener("mouseenter",this.onMouseEnter),e.removeEventListener("mouseleave",this.onMouseLeave)}),this.removeActions(),this.enabled=!1)}onMouseDown(e){this.draggedElement=e.currentTarget,this.draggedElement.style.position="absolute",this.draggedElement.style.pointerEvents="none",this.setPointerOffset(e.clientX,e.clientY,this.draggedElement),m.execute(this.actionName,{x:e.clientX+this.bodyScrollOffset.x-this.offset.x,y:e.clientY+this.bodyScrollOffset.y-this.offset.y,index:this.draggedItemIndex}),this.options.dragStyle&&this.draggedElement.classList.add(this.options.dragStyle),this.options.onDragStart&&this.options.onDragStart(this.draggedElement),document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)}onMouseMove(e){m.execute(this.actionName,{x:e.clientX+this.bodyScrollOffset.x-this.offset.x,y:e.clientY+this.bodyScrollOffset.y-this.offset.y,index:this.draggedItemIndex})}onMouseUp(){document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onMouseUp),this.draggedElement.style.position="",this.draggedElement.style.pointerEvents="",this.draggedElement.style.left="",this.draggedElement.style.top="",this.options.onDragEnd&&this.options.onDragEnd(this.draggedElement),this.options.dragStyle&&this.draggedElement.classList.remove(this.options.dragStyle),this.draggedOver&&this.handleDrop(),this.draggedElement=null}onMouseEnter(e){this.draggedElement&&(this.draggedOver=e.currentTarget,this.options.dropzoneActiveClass&&this.draggedOver.classList.add(this.options.dropzoneActiveClass))}onMouseLeave(){this.draggedElement&&(this.options.dropzoneActiveClass&&this.draggedOver&&this.draggedOver.classList.remove(this.options.dropzoneActiveClass),this.draggedOver=null)}registerDragActions(){m.register(this.actionName,({x:e,y:t,index:n})=>{if(!this.draggableElements[n])return console.error(`There is no draggable element at index ${n}`);this.draggableElements[n].style.left=`${e}px`,this.draggableElements[n].style.top=`${t}px`,this.options.onDragMove&&this.options.onDragMove({x:e,y:t})}),m.register(this.automaticAction,this.automaticMove.bind(this)),this.actionsRegistered=!0}removeActions(){m.remove(this.actionName),m.remove(this.automaticAction)}addTouchEvents(){this.draggableElements.forEach(e=>{this.touchEvents.push(w.drag({element:e,onDragStart:t=>{this.onMouseDown({currentTarget:t.currentTarget,clientX:t.x,clientY:t.y})},onDrag:({x:t,y:n})=>{this.onMouseMove({clientX:t,clientY:n});let i=document.elementFromPoint(t,n),r=this.options.dropzones.reduce((o,d)=>o||(o=i.closest(d)),null);if(r||(r=this.dropzones.includes(i)?i:null),r){this.onMouseEnter({currentTarget:r});return}this.onMouseLeave()},onDragEnd:()=>{this.onMouseUp()}}))})}removeTouchEvents(){this.touchEvents.forEach(e=>e.remove()),this.touchEvents=[]}automaticMove({elementIndex:e,dropzoneIndex:t}){let{x:n,y:i}=this.dropzones[t].getBoundingClientRect(),{x:r,y:o}=this.draggableElements[e].getBoundingClientRect(),d={x:Math.sign(n-r),y:Math.sign(i-o)};this.draggableElements[e].style.position="absolute";let c=(a,h)=>{if(a===n&&h===i){this.dropzones[t].appendChild(this.draggableElements[e]),this.draggableElements[e].style.position="";return}a=a!==n?d.x+a:a,h=h!==i?d.y+h:h,this.draggableElements[e].style.left=`${a}px`,this.draggableElements[e].style.top=`${h}px`,(a!==n||h!==i)&&requestAnimationFrame(()=>c(a,h))};c(r,o)}createDropzones(){this.dropzones=this.options.dropzones.reduce((e,t)=>{let n=[...document.querySelectorAll(t)];return n.length===0&&console.error(`${t} is not a valid html element to be used as a dropzone`),e.concat(n)},[])}handleDrop(){let e=this.options.dropType,t={preventDefault:()=>{e="ignore"},target:this.draggedElement,dropzone:this.draggedOver};if(this.options.onDrop&&this.options.onDrop(t),e!=="ignore"){switch(this.draggedOver.children.length===0&&(e="add"),e){case"add":this.draggedOver.appendChild(this.draggedElement);break;case"shift":this.shiftElements();break;case"switch":this.draggedElement.parentNode.appendChild(this.draggedOver.children[0]),this.draggedOver.appendChild(this.draggedElement);break;case"none":break;default:break}this.onMouseLeave()}}shiftElements(){let e=this.dropzones.findIndex(o=>o===this.draggedOver),t=this.dropzones.map(o=>o.children[0]===this.draggedElement?[]:[...o.children]),n=t.reduce((o,d,c)=>(d.length===0&&(o=Math.abs(e-c)<Math.abs(e-o)?c:o),o),1e5),i=Math.sign(e-n)>0?0:1,r=Math.sign(e-n)<0?0:1;t.splice(e+r,0,[this.draggedElement]),t.splice(n+i,1),t.forEach((o,d)=>{o.forEach(c=>this.dropzones[d].appendChild(c))})}},W=L});var X=H((ce,$)=>{R();I();v.init();$.exports=W});return X();})();
//# sourceMappingURL=dropzone.min.js.map