@ue-too/board 0.5.1 → 0.5.2

package/src/input-interpretation/input-state-machine/touch-input-state-machine.ts

@@ -0,0 +1,215 @@
+import { PointCal } from "@ue-too/math";
+import { EventReactions, EventGuards, Guard, TemplateState, TemplateStateMachine } from "@ue-too/being";
+import { TouchContext, TouchPoints } from "./touch-input-context";
+
+export type TouchStates = "IDLE" | "PENDING" | "IN_PROGRESS";
+
+/**
+ * @description The touch event payload.
+ * 
+ * @category Input State Machine
+ */
+export type TouchEventPayload = {
+    points: TouchPoints[];
+};
+
+/**
+ * @description The touch event mapping.
+ * 
+ * @category Input State Machine
+ */
+export type TouchEventMapping = {
+    touchstart: TouchEventPayload;
+    touchmove: TouchEventPayload;
+    touchend: TouchEventPayload;
+}
+
+/**
+ * @description The idle state of the touch input state machine.
+ * 
+ * @category Input State Machine
+ */
+export class IdleState extends TemplateState<TouchEventMapping, TouchContext, TouchStates> {
+
+    private _eventReactions: EventReactions<TouchEventMapping, TouchContext, TouchStates> = {
+        touchstart: {
+            action: this.touchstart,
+            defaultTargetState: "IDLE",
+        },
+        touchend: {
+            action: this.touchend,
+            defaultTargetState: "IDLE",
+        },
+    };
+
+    protected _guards: Guard<TouchContext, "touchPointsCount"> = {
+        touchPointsCount: ((context: TouchContext) => {
+            return context.getCurrentTouchPointsCount() === 2;
+        }).bind(this)
+    };
+
+    protected _eventGuards: Partial<EventGuards<TouchEventMapping, TouchStates, TouchContext, typeof this._guards>> = {
+        touchstart: [{
+            guard: "touchPointsCount",
+            target: "PENDING",
+        }],
+        touchend: [{
+            guard: "touchPointsCount",
+            target: "PENDING",
+        }],
+    };
+
+    get eventReactions(): EventReactions<TouchEventMapping, TouchContext, TouchStates> {
+        return this._eventReactions;
+    }
+
+    touchstart(context: TouchContext, payload: TouchEventPayload): void {
+        context.addTouchPoints(payload.points);
+    }
+
+    touchend(context: TouchContext, payload: TouchEventPayload): void {
+        context.removeTouchPoints(payload.points.map(p => p.ident));
+    }
+}
+
+/**
+ * @description The pending state of the touch input state machine.
+ * 
+ * @category Input State Machine
+ */
+export class PendingState extends TemplateState<TouchEventMapping, TouchContext, TouchStates> {
+
+    private _eventReactions: EventReactions<TouchEventMapping, TouchContext, TouchStates> = {
+        touchstart: {
+            action: this.touchstart,
+            defaultTargetState: "IDLE",
+        },
+        touchend: {
+            action: this.touchend,
+            defaultTargetState: "IDLE",
+        },
+        touchmove: {
+            action: this.touchmove,
+            defaultTargetState: "IN_PROGRESS",
+        },
+    };
+
+    get eventReactions(): EventReactions<TouchEventMapping, TouchContext, TouchStates> {
+        return this._eventReactions;
+    }
+
+    touchstart(context: TouchContext, payload: TouchEventPayload): void {
+        context.addTouchPoints(payload.points);
+    }
+
+    touchend(context: TouchContext, payload: TouchEventPayload): void {
+        context.removeTouchPoints(payload.points.map(p => p.ident));
+    }
+
+    touchmove(context: TouchContext, payload: TouchEventPayload): void {
+        const idents = payload.points.map(p => p.ident);
+        const initialPositions = context.getInitialTouchPointsPositions(idents);
+        const currentPositions = payload.points;
+        const initialStartAndEndDistance = PointCal.distanceBetweenPoints(initialPositions[0], initialPositions[1]);
+        const currentStartAndEndDistance = PointCal.distanceBetweenPoints(currentPositions[0], currentPositions[1]);
+        const midPoint = PointCal.linearInterpolation(initialPositions[0], initialPositions[1], 0.5);
+        const currentMidPoint = PointCal.linearInterpolation(currentPositions[0], currentPositions[1], 0.5);
+        const midPointDelta = PointCal.subVector(midPoint, currentMidPoint);
+        const cameraCenterInWindow = {x: context.canvas.position.x + context.canvas.width / 2, y: context.canvas.position.y + context.canvas.height / 2};
+        const midPointInViewPort = PointCal.subVector(midPoint, cameraCenterInWindow);
+        let panZoom = Math.abs(currentStartAndEndDistance - initialStartAndEndDistance) > PointCal.distanceBetweenPoints(midPoint, currentMidPoint) ? "ZOOMING" : "PANNING";
+       
+        context.updateTouchPoints(currentPositions);
+        switch(panZoom){
+            case "ZOOMING":
+                context.notifyOnZoom((currentStartAndEndDistance - initialStartAndEndDistance) * 0.005, midPointInViewPort);
+                break;
+            case "PANNING":
+                context.notifyOnPan(midPointDelta);
+                break;
+            default:
+                console.warn("Unknown panZoom state", panZoom);
+                break;
+        }
+    }
+}
+
+/**
+ * @description The in progress state of the touch input state machine.
+ * 
+ * @category Input State Machine
+ */
+export class InProgressState extends TemplateState<TouchEventMapping, TouchContext, TouchStates> {
+
+    private _eventReactions: EventReactions<TouchEventMapping, TouchContext, TouchStates> = {
+        touchmove: {
+            action: this.touchmove,
+            defaultTargetState: "IN_PROGRESS",
+        },
+        touchend: {
+            action: this.touchend,
+            defaultTargetState: "IDLE",
+        },
+        touchstart: {
+            action: ()=> "IDLE",
+            defaultTargetState: "IDLE",
+        },
+    };
+
+    get eventReactions(): EventReactions<TouchEventMapping, TouchContext, TouchStates> {
+        return this._eventReactions;
+    }
+
+    touchmove(context: TouchContext, payload: TouchEventPayload): void {
+        const idents = payload.points.map(p => p.ident);
+        const initialPositions = context.getInitialTouchPointsPositions(idents);
+        const currentPositions = payload.points;
+        const initialStartAndEndDistance = PointCal.distanceBetweenPoints(initialPositions[0], initialPositions[1]);
+        const currentStartAndEndDistance = PointCal.distanceBetweenPoints(currentPositions[0], currentPositions[1]);
+        const midPoint = PointCal.linearInterpolation(initialPositions[0], initialPositions[1], 0.5);
+        const currentMidPoint = PointCal.linearInterpolation(currentPositions[0], currentPositions[1], 0.5);
+        const midPointDelta = PointCal.subVector(midPoint, currentMidPoint);
+        const cameraCenterInWindow = {x: context.canvas.position.x + context.canvas.width / 2, y: context.canvas.position.y + context.canvas.height / 2};
+        const midPointInViewPort = PointCal.subVector(midPoint, cameraCenterInWindow);
+        let panZoom = Math.abs(currentStartAndEndDistance - initialStartAndEndDistance) > PointCal.distanceBetweenPoints(midPoint, currentMidPoint) ? "ZOOMING" : "PANNING";
+       
+        context.updateTouchPoints(currentPositions);
+        switch(panZoom){
+            case "ZOOMING":
+                if(!context.alignCoordinateSystem){
+                    midPointInViewPort.y = -midPointInViewPort.y;
+                }
+                context.notifyOnZoom(-(initialStartAndEndDistance -  currentStartAndEndDistance) * 0.005, midPointInViewPort);
+                break;
+            case "PANNING":
+                if(!context.alignCoordinateSystem){
+                    midPointDelta.y = -midPointDelta.y;
+                }
+                context.notifyOnPan(midPointDelta);
+                break;
+            default:
+                console.warn("Unknown panZoom state", panZoom);
+                break;
+        }
+    }
+
+    touchend(context: TouchContext, payload: TouchEventPayload): void {
+        context.removeTouchPoints(payload.points.map(p => p.ident));
+    }
+}
+
+/**
+ * @description The touch input state machine.
+ * 
+ * @category Input State Machine
+ */
+export type TouchInputStateMachine = TemplateStateMachine<TouchEventMapping, TouchContext, TouchStates>;
+
+export function createTouchInputStateMachine(context: TouchContext): TouchInputStateMachine {
+    return new TemplateStateMachine<TouchEventMapping, TouchContext, TouchStates>(
+        {
+            IDLE: new IdleState(),
+            PENDING: new PendingState(),
+            IN_PROGRESS: new InProgressState(),
+        }, "IDLE", context);
+}

package/src/input-interpretation/raw-input-parser/index.ts

@@ -0,0 +1,2 @@
+export * from "./vanilla-kmt-event-parser";
+export * from "./vanilla-touch-event-parser";

package/src/input-interpretation/raw-input-parser/vanilla-kmt-event-parser.ts

@@ -0,0 +1,207 @@
+import type { KmtInputStateMachine } from "../../input-interpretation/input-state-machine";
+
+/**
+ * @category Event Parser
+ */
+
+export interface KMTEventParser {
+    disabled: boolean;
+    setUp(): void;
+    tearDown(): void;
+    attach(canvas: HTMLCanvasElement): void;
+}
+
+/**
+ * @description The minimum pointer event.
+ * This is for the interoperability between the vanilla javascript and the pixijs event system.
+ * 
+ * @category Event Parser
+ */
+export type MinimumPointerEvent = {
+    button: number;
+    pointerType: string;
+    clientX: number;
+    clientY: number;
+    buttons: number;
+}
+
+/**
+ * @description The minimum wheel event.
+ * This is for the interoperability between the vanilla javascript and the pixijs event system.
+ * 
+ * @category Event Parser
+ */
+export type MinimumWheelEvent = {
+    preventDefault: () => void;
+    deltaX: number;
+    deltaY: number;
+    ctrlKey: boolean;
+    clientX: number;
+    clientY: number;
+}
+
+/**
+ * @description The minimum keyboard event.
+ * This is for the interoperability between the vanilla javascript and the pixijs event system.
+ * 
+ * @category Event Parser
+ */
+export type MinimumKeyboardEvent = {
+    preventDefault: () => void;
+    key: string;
+};
+
+/**
+ * @description The event target with pointer events.
+ * This is for the interoperability between the vanilla javascript and the pixijs event system.
+ * 
+ * @category Event Parser
+ */
+export type EventTargetWithPointerEvents = {
+    addEventListener: (type: string, listener: (event: any) => void, options?: {passive: boolean}) => void;
+    removeEventListener: (type: string, listener: (event: any) => void) => void;
+};
+
+
+/**
+ * @description The vanilla keyboard mouse and trackpad(KMT) event parser.
+ * This parser converts the raw events to events that can be used by the input state machine.
+ * 
+ * @category Event Parser
+ */
+export class VanillaKMTEventParser implements KMTEventParser {
+
+    private _disabled: boolean;
+    private _stateMachine: KmtInputStateMachine;
+    private _keyfirstPressed: Map<string, boolean>;
+    private _abortController: AbortController;
+    private _canvas: HTMLCanvasElement;
+
+
+    constructor(canvas: HTMLCanvasElement, kmtInputStateMachine: KmtInputStateMachine){
+        this._canvas = canvas;
+        this.bindFunctions();
+        this._abortController = new AbortController();
+        this._stateMachine = kmtInputStateMachine;
+        this._keyfirstPressed = new Map();
+    }
+
+    get disabled(): boolean {
+        return this._disabled;
+    }
+
+    set disabled(value: boolean){
+        this._disabled = value;
+    }
+
+    get stateMachine(): KmtInputStateMachine {
+        return this._stateMachine;
+    }
+
+    addEventListeners(signal: AbortSignal){
+        this._canvas.addEventListener('pointerdown', this.pointerDownHandler, {signal});
+        this._canvas.addEventListener('pointerup', this.pointerUpHandler, {signal});
+        this._canvas.addEventListener('pointermove', this.pointerMoveHandler, {signal});
+        this._canvas.addEventListener('wheel', this.scrollHandler, {signal});
+        window.addEventListener('keydown', this.keypressHandler, {signal});
+        window.addEventListener('keyup', this.keyupHandler, {signal});
+    }
+    
+    setUp(): void {
+        this.addEventListeners(this._abortController.signal);
+    }
+
+    tearDown(): void {
+        this._abortController.abort();
+        this._abortController = new AbortController();
+    }
+
+    bindFunctions(): void {
+        this.pointerDownHandler = this.pointerDownHandler.bind(this);
+        this.pointerUpHandler = this.pointerUpHandler.bind(this);
+        this.pointerMoveHandler = this.pointerMoveHandler.bind(this);
+        this.scrollHandler = this.scrollHandler.bind(this);
+        this.keypressHandler = this.keypressHandler.bind(this);
+        this.keyupHandler = this.keyupHandler.bind(this);
+    }
+
+    pointerDownHandler(e: MinimumPointerEvent){
+        if(this._disabled){
+            return;
+        }
+        if(e.button === 0 && e.pointerType === "mouse"){
+            this.stateMachine.happens("leftPointerDown", {x: e.clientX, y: e.clientY});
+            return;
+        }
+        if(e.button === 1 && e.pointerType === "mouse"){
+            this.stateMachine.happens("middlePointerDown", {x: e.clientX, y: e.clientY});
+            return;
+        }
+    }
+
+    pointerUpHandler(e: MinimumPointerEvent){
+        if(this._disabled){
+            return;
+        }
+        if(e.button === 0 && e.pointerType === "mouse"){
+            this.stateMachine.happens("leftPointerUp", {x: e.clientX, y: e.clientY});
+            return;
+        }
+        if(e.button === 1 && e.pointerType === "mouse"){
+            this.stateMachine.happens("middlePointerUp", {x: e.clientX, y: e.clientY});
+            return;
+        }
+    }
+
+    pointerMoveHandler(e: MinimumPointerEvent){
+        if(this._disabled){
+            return;
+        }
+        if((e.buttons === 1) && e.pointerType === "mouse"){
+            this.stateMachine.happens("leftPointerMove", {x: e.clientX, y: e.clientY});
+            return;
+        }
+        if((e.buttons  === 4) && e.pointerType === "mouse"){
+            this.stateMachine.happens("middlePointerMove", {x: e.clientX, y: e.clientY});
+            return;
+        }
+    }
+
+    scrollHandler(e: MinimumWheelEvent){
+        if(this._disabled) return;
+        e.preventDefault();
+        if(e.ctrlKey){
+            this.stateMachine.happens("scrollWithCtrl", {x: e.clientX, y: e.clientY, deltaX: e.deltaX, deltaY: e.deltaY});
+        } else {
+            this.stateMachine.happens("scroll", {deltaX: e.deltaX, deltaY: e.deltaY});
+        }
+    }
+
+    keypressHandler(e: KeyboardEvent){
+        if(e.target !== document.body){
+            return;
+        }
+        if(this._keyfirstPressed.has(e.key)){
+            return;
+        }
+        this._keyfirstPressed.set(e.key, true);
+        if(e.key === " "){
+            this.stateMachine.happens("spacebarDown", {});
+        }
+    }
+
+    keyupHandler(e: KeyboardEvent){
+        if(this._keyfirstPressed.has(e.key)){
+            this._keyfirstPressed.delete(e.key);
+        }
+        if(e.key === " "){
+            this.stateMachine.happens("spacebarUp", {});
+        }
+    }
+
+    attach(canvas: HTMLCanvasElement){
+        this.tearDown();
+        this._canvas = canvas;
+        this.setUp();
+    }
+}

package/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts

@@ -0,0 +1,169 @@
+import { TouchInputStateMachine } from "../../input-interpretation/input-state-machine/touch-input-state-machine";
+import { TouchInputTracker, TouchPoints } from "../../input-interpretation/input-state-machine/touch-input-context";
+
+/**
+ * @description The touch event parser.
+ * This is for the interoperability between the vanilla javascript and the pixijs event system.
+ * 
+ * @category Event Parser
+ */
+export interface TouchEventParser {
+    disabled: boolean;
+    panDisabled: boolean;
+    zoomDisabled: boolean;
+    rotateDisabled: boolean;
+    enableStrategy(): void;
+    disableStrategy(): void;
+    setUp(): void;
+    tearDown(): void;
+    attach(canvas: HTMLCanvasElement): void;
+}
+
+/**
+ * @description The vanilla touch event parser.
+ * This parser converts the raw events to events that can be used by the input state machine.
+ * 
+ * @category Event Parser
+ */
+export class VanillaTouchEventParser implements TouchEventParser {
+
+    private _canvas: HTMLCanvasElement;
+    private _touchInputTracker: TouchInputTracker;
+    private _disabled: boolean;
+    private _panDisabled: boolean = false;
+    private _zoomDisabled: boolean = false;
+    private _rotateDisabled: boolean = false;
+
+    private touchSM: TouchInputStateMachine;
+
+    private _abortController: AbortController;
+
+    constructor(canvas: HTMLCanvasElement, touchInputStateMachine: TouchInputStateMachine){
+        this._canvas = canvas;
+        this._disabled = false;
+        this.touchSM = touchInputStateMachine;
+        this._abortController = new AbortController();
+
+        this.bindListeners();
+    }
+
+    get touchStateMachine(): TouchInputStateMachine {
+        return this.touchSM;
+    }
+
+    bindListeners(): void{
+        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(): void {
+        this._disabled = false;
+    }
+
+    disableStrategy(): void {
+        this._disabled = true;
+    }
+
+    setUp(): void {
+        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(): void {
+        this._abortController.abort();
+        this._abortController = new AbortController();
+    }
+
+    get disabled(): boolean {
+        return this._disabled;
+    }
+
+    get alignCoordinateSystem(): boolean {
+        return this._touchInputTracker.alignCoordinateSystem;
+    }
+
+    set alignCoordinateSystem(alignCoordinateSystem: boolean){
+        this._touchInputTracker.alignCoordinateSystem = alignCoordinateSystem;
+    }
+
+    get panDisabled(): boolean {
+        return this._panDisabled;
+    }
+
+    set panDisabled(panDisabled: boolean){
+        this._panDisabled = panDisabled;
+    }
+
+    get zoomDisabled(): boolean {
+        return this._zoomDisabled;
+    }
+
+    set zoomDisabled(zoomDisabled: boolean){
+        this._zoomDisabled = zoomDisabled;
+    }
+
+    get rotateDisabled(): boolean {
+        return this._rotateDisabled;
+    }
+
+    set rotateDisabled(rotateDisabled: boolean){
+        this._rotateDisabled = rotateDisabled;
+    }
+
+    touchstartHandler(e: TouchEvent){
+        if(this._disabled) {
+            return;
+        }
+
+        const pointsAdded: TouchPoints[] = [];
+        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: TouchEvent){
+        if(this._disabled) {
+            return;
+        }
+        const pointsRemoved: TouchPoints[] = [];
+        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: TouchEvent){
+        if(this._disabled) {
+            return;
+        }
+        const pointsRemoved: TouchPoints[] = [];
+        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: TouchEvent){
+        if(this._disabled) {
+            return;
+        }
+        e.preventDefault();
+        const pointsMoved: TouchPoints[] = [];
+        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: HTMLCanvasElement){
+        this.tearDown();
+        this._canvas = canvas;
+        this.setUp();
+    }
+}

package/src/input-interpretation/raw-input-publisher/index.ts

@@ -0,0 +1 @@
+export * from "./raw-input-publisher";