ue-too/input-interpretation/input-state-machine/index.js

pan, zoom, and rotate your html canvas

import{TemplateState as TemplateState$1,TemplateStateMachine as TemplateStateMachine$1}from"../../being/interfaces";import{PointCal}from"point2point";const NO_OP=()=>{};class TemplateStateMachine{constructor(states,initialState,context){this._timeouts=void 0,this._states=states,this._currentState=initialState,this._context=context,this._statesArray=Object.keys(states),this._stateChangeCallbacks=[],this._happensCallbacks=[]}switchTo(state){this._currentState=state}happens(event,payload){this._timeouts&&clearTimeout(this._timeouts),this._happensCallbacks.forEach((callback=>callback(event,payload,this._context)));const nextState=this._states[this._currentState].handles(event,payload,this._context,this);if(void 0!==nextState&&nextState!==this._currentState){const originalState=this._currentState;this._states[this._currentState].beforeExit(this._context,this,nextState),this.switchTo(nextState),this._states[this._currentState].uponEnter(this._context,this,originalState),this._stateChangeCallbacks.forEach((callback=>callback(originalState,this._currentState)))}return nextState}onStateChange(callback){this._stateChangeCallbacks.push(callback)}onHappens(callback){this._happensCallbacks.push(callback)}get currentState(){return this._currentState}setContext(context){this._context=context}get possibleStates(){return this._statesArray}get states(){return this._states}}class TemplateState{constructor(){this._guards={},this._eventGuards={},this._delay=void 0}get guards(){return this._guards}get eventGuards(){return this._eventGuards}get delay(){return this._delay}uponEnter(context,stateMachine,from){}beforeExit(context,stateMachine,to){}handles(event,payload,context,stateMachine){if(this.eventReactions[event]){this.eventReactions[event].action(context,payload,stateMachine);const targetState=this.eventReactions[event].defaultTargetState,guardToEvaluate=this._eventGuards[event];if(guardToEvaluate){const target=guardToEvaluate.find((guard=>!!this.guards[guard.guard]&&this.guards[guard.guard](context)));return target?target.target:targetState}return targetState}}}class Observable{constructor(){this.observers=[]}subscribe(observer,options){if(this.observers.push(observer),null==options?void 0:options.signal){if(options.signal.aborted)return this.observers=this.observers.filter((o=>o!==observer)),()=>{};const abortHandler=()=>{var _a;this.observers=this.observers.filter((o=>o!==observer)),null===(_a=options.signal)||void 0===_a||_a.removeEventListener("abort",abortHandler)};options.signal.addEventListener("abort",abortHandler)}return()=>{this.observers=this.observers.filter((o=>o!==observer))}}notify(...data){this.observers.forEach((observer=>queueMicrotask((()=>observer(...data)))))}}class CanvasPositionDimensionPublisher{constructor(canvas){this._observers=new Observable,this.lastRect=canvas.getBoundingClientRect(),this.resizeObserver=new ResizeObserver((entries=>{for(const entry of entries){const trueRect=getTrueRect(entry.target.getBoundingClientRect(),window.getComputedStyle(entry.target));rectChanged(this.lastRect,trueRect)&&(this.publishPositionUpdate(trueRect),this.lastRect=trueRect)}})),this.intersectionObserver=new IntersectionObserver((entries=>{for(const entry of entries)if(entry.isIntersecting){const trueRect=getTrueRect(entry.boundingClientRect,window.getComputedStyle(entry.target));rectChanged(this.lastRect,trueRect)&&(this.publishPositionUpdate(trueRect),this.lastRect=trueRect)}})),this.scrollHandler=(()=>{const trueRect=getTrueRect(canvas.getBoundingClientRect(),window.getComputedStyle(canvas));rectChanged(this.lastRect,trueRect)&&(this.publishPositionUpdate(trueRect),this.lastRect=trueRect)}).bind(this),this.resizeHandler=(()=>{const trueRect=getTrueRect(canvas.getBoundingClientRect(),window.getComputedStyle(canvas));rectChanged(this.lastRect,trueRect)&&(this.publishPositionUpdate(trueRect),this.lastRect=trueRect)}).bind(this),this.resizeObserver.observe(canvas),this.intersectionObserver.observe(canvas),window.addEventListener("scroll",this.scrollHandler,{passive:!0}),window.addEventListener("resize",this.resizeHandler,{passive:!0})}dispose(){this.resizeObserver.disconnect(),this.intersectionObserver.disconnect(),window.removeEventListener("scroll",this.scrollHandler),window.removeEventListener("resize",this.resizeHandler)}attach(canvas){this.dispose(),this.resizeObserver.observe(canvas),this.intersectionObserver.observe(canvas),this.scrollHandler=(()=>{const trueRect=getTrueRect(canvas.getBoundingClientRect(),window.getComputedStyle(canvas));rectChanged(this.lastRect,trueRect)&&(this.publishPositionUpdate(trueRect),this.lastRect=trueRect)}).bind(this),this.resizeHandler=(()=>{const trueRect=getTrueRect(canvas.getBoundingClientRect(),window.getComputedStyle(canvas));rectChanged(this.lastRect,trueRect)&&(this.publishPositionUpdate(trueRect),this.lastRect=trueRect)}).bind(this),window.addEventListener("scroll",this.scrollHandler,{passive:!0}),window.addEventListener("resize",this.resizeHandler,{passive:!0})}publishPositionUpdate(rect){this._observers.notify(rect)}onPositionUpdate(observer,options){this._observers.subscribe(observer,options)}}function getTrueRect(rect,computedStyle){const paddingLeft=parseFloat(computedStyle.paddingLeft),paddingTop=parseFloat(computedStyle.paddingTop),paddingRight=parseFloat(computedStyle.paddingRight),paddingBottom=parseFloat(computedStyle.paddingBottom),borderLeft=parseFloat(computedStyle.borderLeftWidth),borderTop=parseFloat(computedStyle.borderTopWidth),borderRight=parseFloat(computedStyle.borderRightWidth),borderBottom=parseFloat(computedStyle.borderBottomWidth),trueLeft=rect.left+paddingLeft+borderLeft,trueTop=rect.top+paddingTop+borderTop,trueWidth=rect.width-paddingLeft-paddingRight-borderLeft-borderRight,trueHeight=rect.height-paddingTop-paddingBottom-borderTop-borderBottom;return new DOMRect(trueLeft,trueTop,trueWidth,trueHeight)}function rectChanged(r1,r2){return r1.top!==r2.top||r1.left!==r2.left||r1.width!==r2.width||r1.height!==r2.height}class DummyCanvasOperator{constructor(){this.width=0,this.height=0,this.position={x:0,y:0},this.setCursor=NO_OP}}class CanvasCacheInWebWorker{constructor(postMessageFunction){this._width=0,this._height=0,this._position={x:0,y:0},this._postMessageFunction=postMessageFunction}set width(width){this._width=width}set height(height){this._height=height}set position(position){this._position=position}get width(){return this._width}get height(){return this._height}get position(){return this._position}setCursor(style){this._postMessageFunction({type:"setCursor",style:style})}}class CanvasProxy{constructor(canvas,canvasPositionDimensionPublisher=new CanvasPositionDimensionPublisher(canvas)){const trueRect=getTrueRect(canvas.getBoundingClientRect(),window.getComputedStyle(canvas));this._width=trueRect.width,this._height=trueRect.height,this._position={x:trueRect.left,y:trueRect.top},this._canvas=canvas,this._canvasPositionDimensionPublisher=canvasPositionDimensionPublisher,this._canvasPositionDimensionPublisher.onPositionUpdate((rect=>{this._width=rect.width,this._height=rect.height,this._position={x:rect.left,y:rect.top}}))}get width(){return this._width}get height(){return this._height}get position(){return this._position}setCursor(style){this._canvas.style.cursor=style}attach(canvas){this._canvasPositionDimensionPublisher.attach(canvas),this._canvas=canvas;const trueRect=getTrueRect(canvas.getBoundingClientRect(),window.getComputedStyle(canvas));this._width=trueRect.width,this._height=trueRect.height,this._position={x:trueRect.left,y:trueRect.top}}}class CanvasProxyWorkerRelay{constructor(canvas,webWorker,canvasDiemsionPublisher){const boundingRect=canvas.getBoundingClientRect();this._canvas=canvas,this._webWorker=webWorker;const trueRect=getTrueRect(boundingRect,window.getComputedStyle(canvas));this._width=trueRect.width,this._height=trueRect.height,this._position={x:trueRect.left,y:trueRect.top},this._webWorker.postMessage({type:"setCanvasDimensions",width:boundingRect.width,height:boundingRect.height,position:{x:boundingRect.left,y:boundingRect.top}}),canvasDiemsionPublisher.onPositionUpdate((rect=>{this._width=rect.width,this._height=rect.height,this._position={x:rect.left,y:rect.top},this._webWorker.postMessage({type:"updateCanvasDimensions",width:rect.width,height:rect.height,position:{x:rect.left,y:rect.top}})}))}get width(){return this._width}get height(){return this._height}get position(){return this._position}setCursor(style){this._canvas.style.cursor=style}}class DummyKmtInputContext{constructor(){this.alignCoordinateSystem=!1,this.canvas=new DummyCanvasOperator,this.initialCursorPosition={x:0,y:0}}notifyOnPan(delta){}notifyOnZoom(zoomAmount,anchorPoint){}notifyOnRotate(deltaRotation){}setInitialCursorPosition(position){}cleanup(){}setup(){}}class ObservableInputTracker{constructor(canvasOperator,inputPublisher){this._alignCoordinateSystem=!0,this._canvasOperator=canvasOperator,this._inputPublisher=inputPublisher,this._initialCursorPosition={x:0,y:0}}get alignCoordinateSystem(){return this._alignCoordinateSystem}get canvas(){return this._canvasOperator}get initialCursorPosition(){return this._initialCursorPosition}set alignCoordinateSystem(value){this._alignCoordinateSystem=value}notifyOnPan(delta){this._inputPublisher.notifyPan(delta)}notifyOnZoom(zoomAmount,anchorPoint){this._inputPublisher.notifyZoom(zoomAmount,anchorPoint)}notifyOnRotate(deltaRotation){this._inputPublisher.notifyRotate(deltaRotation)}setInitialCursorPosition(position){this._initialCursorPosition=position}cleanup(){}setup(){}}function convertFromWindow2ViewPort(point,canvas){const canvasBoundingRect=canvas.getBoundingClientRect(),cameraCenterInWindow={x:canvasBoundingRect.left+(canvasBoundingRect.right-canvasBoundingRect.left)/2,y:canvasBoundingRect.top+(canvasBoundingRect.bottom-canvasBoundingRect.top)/2};return PointCal.subVector(point,cameraCenterInWindow)}function convertFromWindow2ViewPortWithCanvasOperator(point,canvasOperator){const cameraCenterInWindow={x:canvasOperator.position.x+canvasOperator.width/2,y:canvasOperator.position.y+canvasOperator.height/2};return PointCal.subVector(point,cameraCenterInWindow)}function convertFromWindow2ViewPortCanvasOperator(point,canvasOperator){const cameraCenterInWindow={x:canvasOperator.position.x+canvasOperator.width/2,y:canvasOperator.position.y+canvasOperator.height/2};return PointCal.subVector(point,cameraCenterInWindow)}class KmtIdleState extends TemplateState$1{constructor(){super(),this._guards={isIdle:()=>!0},this._eventGuards={},this._eventReactions={spacebarDown:{action:this.spacebarDownHandler,defaultTargetState:"READY_TO_PAN_VIA_SPACEBAR"},scroll:{action:this.scrollHandler,defaultTargetState:"IDLE"},scrollWithCtrl:{action:this.scrollWithCtrlHandler,defaultTargetState:"IDLE"},middlePointerDown:{action:this.middlePointerDownHandler,defaultTargetState:"READY_TO_PAN_VIA_SCROLL_WHEEL"}}}get eventReactions(){return this._eventReactions}scrollHandler(context,payload){const delta=Object.assign({},payload);context.alignCoordinateSystem||(delta.deltaY=-delta.deltaY),context.notifyOnPan({x:delta.deltaX,y:delta.deltaY})}scrollWithCtrlHandler(context,payload){let scrollSensitivity=.005;Math.abs(payload.deltaY)>100&&(scrollSensitivity=5e-4);const zoomAmount=payload.deltaY*scrollSensitivity,anchorPoint=convertFromWindow2ViewPortCanvasOperator({x:payload.x,y:payload.y},context.canvas);context.alignCoordinateSystem||(anchorPoint.y=-anchorPoint.y),context.notifyOnZoom(-5*zoomAmount,anchorPoint)}spacebarDownHandler(context,payload){context.canvas.setCursor("grab")}middlePointerDownHandler(context,payload){context.setInitialCursorPosition({x:payload.x,y:payload.y}),context.canvas.setCursor("grabbing")}}class ReadyToSelectState extends TemplateState$1{constructor(){super(),this.leftPointerMove=((context,payload)=>{const viewportPoint=convertFromWindow2ViewPort({x:payload.x,y:payload.y},context.canvas);context.setSelectionEndPoint(viewportPoint),context.toggleSelectionBox(!0)}).bind(this),this._eventReactions={leftPointerUp:{action:()=>"IDLE",defaultTargetState:"IDLE"},leftPointerMove:{action:this.leftPointerMove,defaultTargetState:"SELECTING"}}}get eventReactions(){return this._eventReactions}}class ReadyToPanViaSpaceBarState extends TemplateState$1{constructor(){super(),this._eventReactions={spacebarUp:{action:this.spacebarUpHandler,defaultTargetState:"IDLE"},leftPointerDown:{action:this.leftPointerDownHandler,defaultTargetState:"INITIAL_PAN"}}}get eventReactions(){return this._eventReactions}leftPointerDownHandler(context,payload){context.setInitialCursorPosition({x:payload.x,y:payload.y}),context.canvas.setCursor("grabbing")}spacebarUpHandler(context,payload){context.canvas.setCursor("default")}}class InitialPanState extends TemplateState$1{constructor(){super(),this._eventReactions={leftPointerUp:{action:this.leftPointerUpHandler,defaultTargetState:"READY_TO_PAN_VIA_SPACEBAR"},leftPointerMove:{action:this.leftPointerMoveHandler,defaultTargetState:"PAN"},spacebarUp:{action:()=>"IDLE",defaultTargetState:"IDLE"},leftPointerDown:{action:()=>"PAN",defaultTargetState:"PAN"}}}get eventReactions(){return this._eventReactions}leftPointerMoveHandler(context,payload){const delta={x:context.initialCursorPosition.x-payload.x,y:context.initialCursorPosition.y-payload.y};context.alignCoordinateSystem||(delta.y=-delta.y),context.notifyOnPan(delta),context.setInitialCursorPosition({x:payload.x,y:payload.y})}leftPointerUpHandler(context,payload){context.canvas.setCursor("grab")}}class ReadyToPanViaScrollWheelState extends TemplateState$1{constructor(){super(),this._eventReactions={middlePointerUp:{action:this.middlePointerUpHandler,defaultTargetState:"IDLE"},middlePointerMove:{action:this.middlePointerMoveHandler,defaultTargetState:"PAN_VIA_SCROLL_WHEEL"}}}get eventReactions(){return this._eventReactions}middlePointerMoveHandler(context,payload){context.canvas.setCursor("grabbing")}middlePointerUpHandler(context,payload){context.canvas.setCursor("default")}}class PanState extends TemplateState$1{constructor(){super(),this._eventReactions={leftPointerUp:{action:this.leftPointerUpHandler,defaultTargetState:"READY_TO_PAN_VIA_SPACEBAR"},leftPointerMove:{action:this.leftPointerMoveHandler,defaultTargetState:"PAN"},spacebarUp:{action:this.spacebarUpHandler,defaultTargetState:"IDLE"}}}get eventReactions(){return this._eventReactions}leftPointerMoveHandler(context,payload){const delta={x:context.initialCursorPosition.x-payload.x,y:context.initialCursorPosition.y-payload.y};context.alignCoordinateSystem||(delta.y=-delta.y),context.notifyOnPan(delta),context.setInitialCursorPosition({x:payload.x,y:payload.y})}spacebarUpHandler(context,payload){context.canvas.setCursor("default")}leftPointerUpHandler(context,payload){context.canvas.setCursor("grab")}}class PanViaScrollWheelState extends TemplateState$1{constructor(){super(...arguments),this._eventReactions={middlePointerUp:{action:this.middlePointerUpHandler,defaultTargetState:"IDLE"},middlePointerMove:{action:this.middlePointerMoveHandler,defaultTargetState:"PAN_VIA_SCROLL_WHEEL"}}}get eventReactions(){return this._eventReactions}middlePointerMoveHandler(context,payload){const delta={x:context.initialCursorPosition.x-payload.x,y:context.initialCursorPosition.y-payload.y};context.alignCoordinateSystem||(delta.y=-delta.y),context.notifyOnPan(delta),context.setInitialCursorPosition({x:payload.x,y:payload.y})}middlePointerUpHandler(context,payload){context.canvas.setCursor("default")}}class KmtEmptyState extends TemplateState$1{constructor(){super()}get eventReactions(){return{}}}function createKmtInputStateMachine(context){const states={IDLE:new KmtIdleState,READY_TO_PAN_VIA_SPACEBAR:new ReadyToPanViaSpaceBarState,INITIAL_PAN:new InitialPanState,PAN:new PanState,READY_TO_PAN_VIA_SCROLL_WHEEL:new ReadyToPanViaScrollWheelState,PAN_VIA_SCROLL_WHEEL:new PanViaScrollWheelState};return new TemplateStateMachine$1(states,"IDLE",context)}class KmtInputStateMachineWebWorkerProxy extends TemplateStateMachine$1{constructor(webworker){super({IDLE:new KmtEmptyState,READY_TO_PAN_VIA_SPACEBAR:new KmtEmptyState,INITIAL_PAN:new KmtEmptyState,PAN:new KmtEmptyState,READY_TO_PAN_VIA_SCROLL_WHEEL:new KmtEmptyState,PAN_VIA_SCROLL_WHEEL:new KmtEmptyState},"IDLE",new DummyKmtInputContext),this._webworker=webworker}happens(event,payload){return this._webworker.postMessage({type:"kmtInputStateMachine",event:event,payload:payload}),"IDLE"}}class IdleState extends TemplateState{constructor(){super(...arguments),this._eventReactions={touchstart:{action:this.touchstart,defaultTargetState:"IDLE"},touchend:{action:this.touchend,defaultTargetState:"IDLE"}},this._guards={touchPointsCount:(context=>2===context.getCurrentTouchPointsCount()).bind(this)},this._eventGuards={touchstart:[{guard:"touchPointsCount",target:"PENDING"}],touchend:[{guard:"touchPointsCount",target:"PENDING"}]}}get eventReactions(){return this._eventReactions}touchstart(context,payload){context.addTouchPoints(payload.points)}touchend(context,payload){context.removeTouchPoints(payload.points.map((p=>p.ident)))}}class PendingState extends TemplateState{constructor(){super(...arguments),this._eventReactions={touchstart:{action:this.touchstart,defaultTargetState:"IDLE"},touchend:{action:this.touchend,defaultTargetState:"IDLE"},touchmove:{action:this.touchmove,defaultTargetState:"IN_PROGRESS"}}}get eventReactions(){return this._eventReactions}touchstart(context,payload){context.addTouchPoints(payload.points)}touchend(context,payload){context.removeTouchPoints(payload.points.map((p=>p.ident)))}touchmove(context,payload){const idents=payload.points.map((p=>p.ident)),initialPositions=context.getInitialTouchPointsPositions(idents),currentPositions=payload.points,initialStartAndEndDistance=PointCal.distanceBetweenPoints(initialPositions[0],initialPositions[1]),currentStartAndEndDistance=PointCal.distanceBetweenPoints(currentPositions[0],currentPositions[1]),midPoint=PointCal.linearInterpolation(initialPositions[0],initialPositions[1],.5),currentMidPoint=PointCal.linearInterpolation(currentPositions[0],currentPositions[1],.5),midPointDelta=PointCal.subVector(midPoint,currentMidPoint),cameraCenterInWindow={x:context.canvas.position.x+context.canvas.width/2,y:context.canvas.position.y+context.canvas.height/2},midPointInViewPort=PointCal.subVector(midPoint,cameraCenterInWindow);let panZoom=Math.abs(currentStartAndEndDistance-initialStartAndEndDistance)>PointCal.distanceBetweenPoints(midPoint,currentMidPoint)?"ZOOMING":"PANNING";switch(context.updateTouchPoints(currentPositions),panZoom){case"ZOOMING":context.notifyOnZoom(.005*(currentStartAndEndDistance-initialStartAndEndDistance),midPointInViewPort);break;case"PANNING":context.notifyOnPan(midPointDelta);break;default:console.warn("Unknown panZoom state",panZoom)}}}class InProgressState extends TemplateState{constructor(){super(...arguments),this._eventReactions={touchmove:{action:this.touchmove,defaultTargetState:"IN_PROGRESS"},touchend:{action:this.touchend,defaultTargetState:"IDLE"},touchstart:{action:()=>"IDLE",defaultTargetState:"IDLE"}}}get eventReactions(){return this._eventReactions}touchmove(context,payload){const idents=payload.points.map((p=>p.ident)),initialPositions=context.getInitialTouchPointsPositions(idents),currentPositions=payload.points,initialStartAndEndDistance=PointCal.distanceBetweenPoints(initialPositions[0],initialPositions[1]),currentStartAndEndDistance=PointCal.distanceBetweenPoints(currentPositions[0],currentPositions[1]),midPoint=PointCal.linearInterpolation(initialPositions[0],initialPositions[1],.5),currentMidPoint=PointCal.linearInterpolation(currentPositions[0],currentPositions[1],.5),midPointDelta=PointCal.subVector(midPoint,currentMidPoint),cameraCenterInWindow={x:context.canvas.position.x+context.canvas.width/2,y:context.canvas.position.y+context.canvas.height/2},midPointInViewPort=PointCal.subVector(midPoint,cameraCenterInWindow);let panZoom=Math.abs(currentStartAndEndDistance-initialStartAndEndDistance)>PointCal.distanceBetweenPoints(midPoint,currentMidPoint)?"ZOOMING":"PANNING";switch(context.updateTouchPoints(currentPositions),panZoom){case"ZOOMING":context.alignCoordinateSystem||(midPointInViewPort.y=-midPointInViewPort.y),context.notifyOnZoom(.005*-(initialStartAndEndDistance-currentStartAndEndDistance),midPointInViewPort);break;case"PANNING":context.alignCoordinateSystem||(midPointDelta.y=-midPointDelta.y),context.notifyOnPan(midPointDelta);break;default:console.warn("Unknown panZoom state",panZoom)}}touchend(context,payload){context.removeTouchPoints(payload.points.map((p=>p.ident)))}}function createTouchInputStateMachine(context){return new TemplateStateMachine({IDLE:new IdleState,PENDING:new PendingState,IN_PROGRESS:new InProgressState},"IDLE",context)}class TouchInputTracker{constructor(canvas,inputPublisher){this._touchPointsMap=new Map,this._canvas=canvas,this._inputPublisher=inputPublisher,this._alignCoordinateSystem=!0}addTouchPoints(points){points.forEach((point=>{this._touchPointsMap.set(point.ident,Object.assign({},point))}))}removeTouchPoints(identifiers){identifiers.forEach((ident=>{this._touchPointsMap.has(ident)&&this._touchPointsMap.delete(ident)}))}getCurrentTouchPointsCount(){return this._touchPointsMap.size}getInitialTouchPointsPositions(idents){const res=[];return idents.forEach((ident=>{if(this._touchPointsMap.has(ident)){const point=this._touchPointsMap.get(ident);point&&res.push(point)}})),res}updateTouchPoints(pointsMoved){pointsMoved.forEach((point=>{this._touchPointsMap.has(point.ident)&&this._touchPointsMap.set(point.ident,Object.assign({},point))}))}notifyOnPan(delta){this._inputPublisher.notifyPan(delta)}notifyOnZoom(zoomAmount,anchorPoint){this._inputPublisher.notifyZoom(zoomAmount,anchorPoint)}get alignCoordinateSystem(){return this._alignCoordinateSystem}set alignCoordinateSystem(value){this._alignCoordinateSystem=value}get canvas(){return this._canvas}cleanup(){}setup(){}}export{CanvasCacheInWebWorker,CanvasProxy,CanvasProxyWorkerRelay,DummyCanvasOperator,DummyKmtInputContext,IdleState,InProgressState,InitialPanState,KmtEmptyState,KmtIdleState,KmtInputStateMachineWebWorkerProxy,ObservableInputTracker,PanState,PanViaScrollWheelState,PendingState,ReadyToPanViaScrollWheelState,ReadyToPanViaSpaceBarState,ReadyToSelectState,TouchInputTracker,convertFromWindow2ViewPort,convertFromWindow2ViewPortCanvasOperator,convertFromWindow2ViewPortWithCanvasOperator,createKmtInputStateMachine,createTouchInputStateMachine};
//# sourceMappingURL=index.js.map