ue-too
Version:
pan, zoom, and rotate your html canvas
3 lines (2 loc) • 3 kB
JavaScript
class VanillaTouchEventParser{constructor(canvas,touchInputStateMachine){this._panDisabled=!1,this._zoomDisabled=!1,this._rotateDisabled=!1,this._canvas=canvas,this._disabled=!1,this.touchSM=touchInputStateMachine,this._abortController=new AbortController,this.bindListeners()}get touchStateMachine(){return this.touchSM}bindListeners(){this.touchstartHandler=this.touchstartHandler.bind(this),this.touchendHandler=this.touchendHandler.bind(this),this.touchcancelHandler=this.touchcancelHandler.bind(this),this.touchmoveHandler=this.touchmoveHandler.bind(this)}enableStrategy(){this._disabled=!1}disableStrategy(){this._disabled=!0}setUp(){this._canvas.addEventListener("touchstart",this.touchstartHandler,{signal:this._abortController.signal}),this._canvas.addEventListener("touchend",this.touchendHandler,{signal:this._abortController.signal}),this._canvas.addEventListener("touchcancel",this.touchcancelHandler,{signal:this._abortController.signal}),this._canvas.addEventListener("touchmove",this.touchmoveHandler,{signal:this._abortController.signal})}tearDown(){this._abortController.abort(),this._abortController=new AbortController}get disabled(){return this._disabled}get alignCoordinateSystem(){return this._touchInputTracker.alignCoordinateSystem}set alignCoordinateSystem(alignCoordinateSystem){this._touchInputTracker.alignCoordinateSystem=alignCoordinateSystem}get panDisabled(){return this._panDisabled}set panDisabled(panDisabled){this._panDisabled=panDisabled}get zoomDisabled(){return this._zoomDisabled}set zoomDisabled(zoomDisabled){this._zoomDisabled=zoomDisabled}get rotateDisabled(){return this._rotateDisabled}set rotateDisabled(rotateDisabled){this._rotateDisabled=rotateDisabled}touchstartHandler(e){if(this._disabled)return;const pointsAdded=[];for(let i=0;i<e.changedTouches.length;i++)pointsAdded.push({ident:e.changedTouches[i].identifier,x:e.changedTouches[i].clientX,y:e.changedTouches[i].clientY});this.touchSM.happens("touchstart",{points:pointsAdded}),e.preventDefault()}touchcancelHandler(e){if(this._disabled)return;const pointsRemoved=[];for(let i=0;i<e.changedTouches.length;i++)pointsRemoved.push({ident:e.changedTouches[i].identifier,x:e.changedTouches[i].clientX,y:e.changedTouches[i].clientY});this.touchSM.happens("touchend",{points:pointsRemoved})}touchendHandler(e){if(this._disabled)return;const pointsRemoved=[];for(let i=0;i<e.changedTouches.length;i++)pointsRemoved.push({ident:e.changedTouches[i].identifier,x:e.changedTouches[i].clientX,y:e.changedTouches[i].clientY});this.touchSM.happens("touchend",{points:pointsRemoved})}touchmoveHandler(e){if(this._disabled)return;e.preventDefault();const pointsMoved=[];for(let i=0;i<e.targetTouches.length;i++)pointsMoved.push({ident:e.targetTouches[i].identifier,x:e.targetTouches[i].clientX,y:e.targetTouches[i].clientY});this.touchSM.happens("touchmove",{points:pointsMoved})}attach(canvas){this.tearDown(),this._canvas=canvas,this.setUp()}}export{VanillaTouchEventParser};
//# sourceMappingURL=index.js.map