UNPKG

@ordojs/mobile

Version:

Mobile and PWA support for OrdoJS applications

2 lines 4.74 kB
var c=class{config;element;touchPoints=new Map;gestureStartTime=0;gestureStartPoints=[];listeners=new Map;constructor(t,e={}){this.element=t,this.config={enabled:true,threshold:10,velocity:.3,direction:"both",preventDefault:true,...e},this.initialize();}initialize(){this.config.enabled&&(this.element.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:false}),this.element.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:false}),this.element.addEventListener("touchend",this.handleTouchEnd.bind(this),{passive:false}),this.element.addEventListener("touchcancel",this.handleTouchCancel.bind(this),{passive:false}));}handleTouchStart(t){this.config.preventDefault&&t.preventDefault(),this.gestureStartTime=Date.now(),this.gestureStartPoints=[],this.touchPoints.clear(),Array.from(t.touches).forEach(e=>{let i={x:e.clientX,y:e.clientY,identifier:e.identifier,timestamp:Date.now()};this.touchPoints.set(e.identifier,i),this.gestureStartPoints.push({...i});}),this.touchPoints.size===1&&(this.detectTap(),this.detectLongPress());}handleTouchMove(t){this.config.preventDefault&&t.preventDefault(),Array.from(t.touches).forEach(e=>{let i=this.touchPoints.get(e.identifier);i&&(i.x=e.clientX,i.y=e.clientY,i.timestamp=Date.now());}),this.touchPoints.size===1?(this.detectSwipe(),this.detectPan()):this.touchPoints.size===2&&(this.detectPinch(),this.detectRotate());}handleTouchEnd(t){this.config.preventDefault&&t.preventDefault();let e=Date.now()-this.gestureStartTime,i=Array.from(this.touchPoints.values());if(i.length===1){let n=i[0];if(!n)return;let s=this.gestureStartPoints.find(o=>o.identifier===n.identifier);if(s){let o=n.x-s.x,r=n.y-s.y,h=Math.sqrt(o*o+r*r),a=h/e;if(h<this.config.threshold&&e<300&&this.emitGesture("tap",{type:"tap",points:[n],deltaX:o,deltaY:r,velocity:a,direction:"none",duration:e}),h>this.config.threshold&&a>this.config.velocity){let u=this.getDirection(o,r);this.emitGesture("swipe",{type:"swipe",points:[n],deltaX:o,deltaY:r,velocity:a,direction:u,duration:e});}}}this.touchPoints.clear(),this.gestureStartPoints=[];}handleTouchCancel(t){this.touchPoints.clear(),this.gestureStartPoints=[];}detectTap(){}detectLongPress(){setTimeout(()=>{if(this.touchPoints.size===1){let t=Array.from(this.touchPoints.values())[0];if(!t)return;this.emitGesture("longpress",{type:"longpress",points:[t],deltaX:0,deltaY:0,velocity:0,direction:"none",duration:500});}},500);}detectSwipe(){}detectPan(){let t=Array.from(this.touchPoints.values());if(t.length===1){let e=t[0];if(!e)return;let i=this.gestureStartPoints.find(n=>n.identifier===e.identifier);if(i){let n=e.x-i.x,s=e.y-i.y,o=Math.sqrt(n*n+s*s);if(o>this.config.threshold){let r=this.getDirection(n,s);this.emitGesture("pan",{type:"pan",points:[e],deltaX:n,deltaY:s,velocity:o/(Date.now()-this.gestureStartTime),direction:r,duration:Date.now()-this.gestureStartTime});}}}}detectPinch(){let t=Array.from(this.touchPoints.values());if(t.length===2){let e=t[0],i=t[1],n=this.gestureStartPoints[0],s=this.gestureStartPoints[1];if(!e||!i||!n||!s)return;let o=this.getDistance(n,s),h=this.getDistance(e,i)/o;this.emitGesture("pinch",{type:"pinch",points:t,deltaX:0,deltaY:0,scale:h,velocity:0,direction:"none",duration:Date.now()-this.gestureStartTime});}}detectRotate(){let t=Array.from(this.touchPoints.values());if(t.length===2){let e=t[0],i=t[1],n=this.gestureStartPoints[0],s=this.gestureStartPoints[1];if(!e||!i||!n||!s)return;let o=this.getAngle(n,s),h=this.getAngle(e,i)-o;this.emitGesture("rotate",{type:"rotate",points:t,deltaX:0,deltaY:0,rotation:h,velocity:0,direction:"none",duration:Date.now()-this.gestureStartTime});}}getDistance(t,e){let i=t.x-e.x,n=t.y-e.y;return Math.sqrt(i*i+n*n)}getAngle(t,e){return Math.atan2(e.y-t.y,e.x-t.x)*180/Math.PI}getDirection(t,e){let i=Math.abs(t),n=Math.abs(e);return i>n?t>0?"right":"left":e>0?"down":"up"}emitGesture(t,e){let i=this.listeners.get(t);i&&i.forEach(n=>{try{n(e);}catch(s){console.error(`Error in gesture listener for ${t}:`,s);}});}on(t,e){this.listeners.has(t)||this.listeners.set(t,[]),this.listeners.get(t).push(e);}off(t,e){let i=this.listeners.get(t);if(i){let n=i.indexOf(e);n>-1&&i.splice(n,1);}}updateConfig(t){this.config={...this.config,...t};}getConfig(){return {...this.config}}destroy(){this.element.removeEventListener("touchstart",this.handleTouchStart.bind(this)),this.element.removeEventListener("touchmove",this.handleTouchMove.bind(this)),this.element.removeEventListener("touchend",this.handleTouchEnd.bind(this)),this.element.removeEventListener("touchcancel",this.handleTouchCancel.bind(this)),this.listeners.clear(),this.touchPoints.clear();}};export{c as GestureManager};//# sourceMappingURL=gestures.mjs.map //# sourceMappingURL=gestures.mjs.map