@niuee/board
Version:
<h1 align="center"> board </h1> <p align="center"> board supercharges your html canvas element giving it the capabilities to pan, zoom, rotate, and much more. </p> <p align="center"> <a href="https://www.npmjs.com/package/@niuee/board">
3 lines (2 loc) • 3.05 kB
JavaScript
class VanillaTouchEventParser{constructor(canvas,stateMachine){this._panDisabled=!1,this._zoomDisabled=!1,this._rotateDisabled=!1,this.touchPointsMap=new Map,this._canvas=canvas,this._disabled=!1,this.touchSM=stateMachine,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)}resetAttributes(){this.touchPointsMap.clear()}enableStrategy(){this._disabled=!1}disableStrategy(){this.resetAttributes(),this._disabled=!0}setUp(){this._canvas.addEventListener("touchstart",this.touchstartHandler),this._canvas.addEventListener("touchend",this.touchendHandler),this._canvas.addEventListener("touchcancel",this.touchcancelHandler),this._canvas.addEventListener("touchmove",this.touchmoveHandler)}tearDown(){this.resetAttributes(),this._canvas.removeEventListener("touchstart",this.touchstartHandler),this._canvas.removeEventListener("touchend",this.touchendHandler),this._canvas.removeEventListener("touchcancel",this.touchcancelHandler),this._canvas.removeEventListener("touchmove",this.touchmoveHandler)}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})}}export{VanillaTouchEventParser};
//# sourceMappingURL=index.js.map