@needle-tools/engine 2.24.0-pre

package/src/engine/engine_input.ts

@@ -0,0 +1,581 @@
+import * as THREE from 'three';
+import { Context } from './engine_setup';
+
+export declare type PointerEventArgs = { button: number; clientX: number; clientY: number; pointerId?: number, pointerType: string, source?: Event };
+
+export enum InputEvents {
+    PointerDown = "pointerDown",
+}
+
+// export class InputEvent extends Event {
+
+//     args : PointerEventArgs;
+
+//     constructor(type: string, args: PointerEventArgs) {
+//         super(type);
+//         this.args = args;
+//     }
+// }
+
+export class Input extends EventTarget {
+
+    _doubleClickTimeThreshold = .2;
+    _longPressTimeThreshold = 1;
+
+    get mousePosition(): THREE.Vector2 { return this._pointerPositions[0]; };
+    get mousePositionRC(): THREE.Vector2 { return this._pointerPositionsRC[0]; }
+    get mouseDown(): boolean { return this._pointerDown[0]; }
+    get mouseUp(): boolean { return this._pointerUp[0]; }
+    get mouseClick(): boolean { return this._pointerClick[0]; }
+    get mouseDoubleClick(): boolean { return this._pointerDoubleClick[0]; }
+    get mousePressed(): boolean { return this._pointerPressed[0]; }
+    get mouseWheelChanged(): boolean { return this.getMouseWheelChanged(0); }
+
+    private _specialCursorTrigger: number = 0;
+
+    setCursorPointer() {
+        this._specialCursorTrigger += 1;
+        this.context.domElement.style.cursor = "pointer";
+    }
+    setCursorNormal() {
+        this._specialCursorTrigger -= 1;
+        this._specialCursorTrigger = Math.max(0, this._specialCursorTrigger);
+        if (this._specialCursorTrigger === 0)
+            this.context.domElement.style.cursor = "default";
+    }
+
+    getPointerPressedCount(): number {
+        let count = 0;
+        for (let i = 0; i < this._pointerPressed.length; i++) {
+            if (this._pointerPressed[i]) {
+                count++;
+            }
+        }
+        return count;
+    }
+
+    getPointerPosition(i: number): THREE.Vector2 | null {
+        if (i >= this._pointerPositions.length) return null;
+        return this._pointerPositions[i];
+    }
+    getPointerPositionLastFrame(i: number): THREE.Vector2 | null {
+        if (i >= this._pointerPositionsLastFrame.length) return null;
+        return this._pointerPositionsLastFrame[i];
+    }
+    getPointerPositionDelta(i: number): THREE.Vector2 | null {
+        if (i >= this._pointerPositionsDelta.length) return null;
+        return this._pointerPositionsDelta[i];
+    }
+    getPointerPositionRC(i: number): THREE.Vector2 | null {
+        if (i >= this._pointerPositionsRC.length) return null;
+        return this._pointerPositionsRC[i];
+    }
+    getPointerDown(i: number): boolean {
+        if (i >= this._pointerDown.length) return false;
+        return this._pointerDown[i];
+    }
+    getPointerUp(i: number): boolean {
+        if (i >= this._pointerUp.length) return false;
+        return this._pointerUp[i];
+    }
+    getPointerPressed(i: number): boolean {
+        if (i >= this._pointerPressed.length) return false;
+        return this._pointerPressed[i];
+    }
+    getPointerClicked(i: number): boolean {
+        if (i >= this._pointerClick.length) return false;
+        return this._pointerClick[i];
+    }
+    getPointerDoubleClicked(i: number): boolean {
+        if (i >= this._pointerDoubleClick.length) return false;
+        return this._pointerDoubleClick[i];
+    }
+    getPointerDownTime(i: number): number {
+        if (i >= this._pointerDownTime.length) return -1;
+        return this._pointerDownTime[i];
+    }
+    getPointerUpTime(i: number): number {
+        if (i >= this._pointerUpTime.length) return -1;
+        return this._pointerUpTime[i];
+    }
+    getPointerLongPress(i: number): boolean {
+        if (i >= this._pointerDownTime.length) return false;
+        return this.getPointerPressed(i) && this.context.time.time - this._pointerDownTime[i] > this._longPressTimeThreshold;
+    }
+    getIsMouse(i: number): boolean {
+        if (i >= this._pointerTypes.length) return false;
+        return this._pointerTypes[i] === "mouse";
+    }
+    getIsTouch(i: number): boolean {
+        if (i >= this._pointerTypes.length) return false;
+        return this._pointerTypes[i] === "touch";
+    }
+    getTouchesPressedCount(): number {
+        let count = 0;
+        for (let i = 0; i < this._pointerPressed.length; i++) {
+            if (this._pointerPressed[i] && this.getIsTouch(i)) {
+                count++;
+            }
+        }
+        return count;
+    }
+    getMouseWheelChanged(i: number = 0): boolean {
+        if (i >= this._mouseWheelChanged.length) return false;
+        return this._mouseWheelChanged[i];
+    }
+    getPointerEvent(i: number): Event | undefined {
+        if (i >= this._pointerEvent.length) return undefined;
+        return this._pointerEvent[i] ?? undefined;
+    }
+
+    private context: Context;
+
+    private _pointerDown: boolean[] = [false];
+    private _pointerUp: boolean[] = [false];
+    private _pointerClick: boolean[] = [false];
+    private _pointerDoubleClick: boolean[] = [false];
+    private _pointerPressed: boolean[] = [false];
+    private _pointerPositions: THREE.Vector2[] = [new THREE.Vector2()];
+    private _pointerPositionsLastFrame: THREE.Vector2[] = [new THREE.Vector2()];
+    private _pointerPositionsDelta: THREE.Vector2[] = [new THREE.Vector2()];
+    private _pointerPositionsRC: THREE.Vector2[] = [new THREE.Vector2()];
+    private _pointerPositionDown: THREE.Vector2[] = [new THREE.Vector2()];
+    private _pointerDownTime: number[] = [];
+    private _pointerUpTime: number[] = [];
+    private _pointerIds: number[] = [];
+    private _pointerTypes: string[] = [""];
+    private _mouseWheelChanged: boolean[] = [false];
+    private _pointerEvent: Event[] = [];
+
+    getKeyDown(): string | null {
+        for (const key in this.keysPressed) {
+            const k = this.keysPressed[key];
+            if (k.startFrame === this.context.time.frameCount) return k.key;
+        }
+        return null;
+    }
+    getKeyPressed(): string | null {
+        for (const key in this.keysPressed) {
+            const k = this.keysPressed[key];
+            if (k.pressed)
+                return k.key;
+        }
+        return null;
+    }
+    isKeyDown(keyCode: number) {
+        // console.log( this.keysPressed[keyCode]?.frame, time.frameCount);
+        return this.context.application.isVisible && this.context.application.hasFocus && this.keysPressed[keyCode]?.startFrame === this.context.time.frameCount && this.keysPressed[keyCode].pressed;
+    }
+    isKeyUp(keyCode: number) {
+        return this.context.application.isVisible && this.context.application.hasFocus && this.keysPressed[keyCode]?.frame === this.context.time.frameCount && !this.keysPressed[keyCode].pressed;
+    }
+    isKeyPressed(keyCode: number) {
+        return this.context.application.isVisible && this.context.application.hasFocus && this.keysPressed[keyCode]?.pressed;// && time.frameCount - this.keysPressed[keyCode].frame < 100;
+    }
+
+    createPointerDown(args: PointerEventArgs) {
+        this.onDown(args);
+    }
+
+    createPointerMove(args: PointerEventArgs) {
+        this.onMove(args);
+    }
+
+    createPointerUp(args: PointerEventArgs) {
+        this.onUp(args);
+    }
+
+    constructor(context: Context) {
+        super();
+        this.context = context;
+        this.context.post_render_callbacks.push(this.onEndOfFrame.bind(this));
+
+        const eventElement = this.context.renderer.domElement;
+
+        // this.context.renderer.domElement.addEventListener('mousedown', this.onMouseDown.bind(this), false);
+        // this.context.renderer.domElement.addEventListener('mousemove', this.onMouseMove.bind(this), false);
+        // this.context.renderer.domElement.addEventListener('mouseup', this.onMouseUp.bind(this), false);
+
+        eventElement.addEventListener('touchmove', this.onTouchMove.bind(this), { passive: true });
+        eventElement.addEventListener('touchend', this.onTouchUp.bind(this), false);
+
+        eventElement.addEventListener('pointerdown', this.onPointerDown.bind(this), false);
+        eventElement.addEventListener('pointermove', this.onPointerMove.bind(this), false);
+        eventElement.addEventListener('pointerup', this.onPointerUp.bind(this), false);
+        eventElement.addEventListener('wheel', this.onMouseWheel.bind(this), { passive: true });
+
+        window.addEventListener("keydown", this.onKeyDown.bind(this), false);
+        window.addEventListener("keypress", this.onKeyPressed.bind(this), false);
+        window.addEventListener("keyup", this.onKeyUp.bind(this), false);
+
+        // e.g. when using sharex to capture we loose focus thus dont get e.g. key up events
+        window.addEventListener('blur', this.onLostFocus.bind(this));
+
+        // setTimeout(() => {
+        //     this.createPointerDown({ pointerId: 0, button: 0, clientX: 0, clientY: 0, pointerType: "mouse" });
+        //     setTimeout(() => {
+        //         this.createPointerUp({ pointerId: 0, button: 0, clientX: 0, clientY: 0, pointerType: "mouse" });
+        //     }, 1000);
+        // }, 2000);
+    }
+
+    private onLostFocus() {
+        for (const kp in this.keysPressed) {
+            this.keysPressed[kp].pressed = false;
+        }
+    }
+
+    private onEndOfFrame() {
+        for (let i = 0; i < this._pointerUp.length; i++)
+            this._pointerUp[i] = false;
+        for (let i = 0; i < this._pointerDown.length; i++)
+            this._pointerDown[i] = false;
+        for (let i = 0; i < this._pointerClick.length; i++)
+            this._pointerClick[i] = false;
+        for (let i = 0; i < this._pointerDoubleClick.length; i++)
+            this._pointerDoubleClick[i] = false;
+        for (const pt of this._pointerPositionsDelta) {
+            pt.set(0, 0);
+        }
+        for (let i = 0; i < this._mouseWheelChanged.length; i++)
+            this._mouseWheelChanged[i] = false;
+    }
+
+
+    private keysPressed: { [key: number]: { pressed: boolean, frame: number, startFrame: number, key: string } } = {};
+
+    private onKeyDown(evt) {
+        if (!this.context.application.hasFocus)
+            return;
+        const ex = this.keysPressed[evt.keyCode];
+        if (ex && ex.pressed) return;
+        this.keysPressed[evt.keyCode] = { pressed: true, frame: this.context.time.frameCount + 1, startFrame: this.context.time.frameCount + 1, key: evt.key };
+    }
+    private onKeyPressed(evt) {
+        if (!this.context.application.hasFocus)
+            return;
+        const p = this.keysPressed[evt.keyCode];
+        if (!p) return;
+        p.pressed = true;
+        p.frame = this.context.time.frameCount + 1;
+    }
+    private onKeyUp(evt) {
+        if (!this.context.application.hasFocus)
+            return;
+        const p = this.keysPressed[evt.keyCode];
+        if (!p) return;
+        p.pressed = false;
+        p.frame = this.context.time.frameCount + 1;
+        // console.log("UP", evt.key, evt.keyCode, this.keysPressed);
+    }
+
+    private onMouseWheel(_evt) {
+        if (this._mouseWheelChanged.length <= 0) this._mouseWheelChanged.push(false);
+        this._mouseWheelChanged[0] = true;
+    }
+
+    private onTouchMove(_evt) {
+        // TODO: handle this properly
+        // evt.pointerType = "touch";
+        // evt.clientX = evt.touches[0].clientX;
+        // evt.clientY = evt.touches[0].clientY;
+        // evt.button = 0;
+        // this.onPointerMove(evt, true);
+    }
+
+    private onTouchUp(_evt) {
+        // TODO: handle this properly
+        // evt.pointerType = "touch";
+        // evt.clientX = evt.changedTouches[0].clientX;
+        // evt.clientY = evt.changedTouches[0].clientY;
+        // let i = this.getPointerIndex(evt.changedTouches[0].identifier);
+        // evt.button = i;
+        // console.log(i, evt);
+        // this.onPointerUp(evt, true);
+    }
+
+    private onPointerDown(evt: PointerEvent) {
+        if (evt.defaultPrevented) return;
+        if (evt.pointerType === undefined && evt.pointerId === undefined) return;
+        if (evt.preventDefault)
+            evt.preventDefault();
+        let i = evt.pointerType === "mouse" ? evt.button : this.getPointerIndex(evt.pointerId);
+        if (evt.pointerId === undefined && evt.button !== undefined) {
+            i = evt.button;
+        }
+        this.onDown({ button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: evt.pointerType, source: evt });
+        // console.log(this.getPointerPressedCount());
+        // evt.stopPropagation();
+    }
+
+    private onPointerMove(evt: PointerEvent, suppressPreventDefault: boolean | undefined = undefined) {
+        // console.log(evt);
+        if (evt.defaultPrevented) return;
+        if (evt.pointerType === undefined && evt.pointerId === undefined) return;
+        if (suppressPreventDefault !== true)
+            evt.preventDefault();
+        let i = evt.pointerType === "mouse" ? evt.button : this.getPointerIndex(evt.pointerId);
+        if (evt.pointerId === undefined && evt.button !== undefined) {
+            i = evt.button;
+        }
+        if (i < 0) i = 0;
+        const args = { button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: evt.pointerType, source: evt };
+        this.onMove(args);
+    }
+
+    private onPointerUp(evt: PointerEvent, suppressPreventDefault: boolean | undefined = undefined) {
+        if (evt.defaultPrevented) return;
+        if (evt.pointerType === undefined && evt.pointerId === undefined) return;
+        if (suppressPreventDefault !== true)
+            evt.preventDefault();
+        // console.log(evt, this._pointerIds);
+        let i = evt.pointerType === "mouse" ? evt.button : this.getPointerIndex(evt.pointerId);
+        // console.log("INDEX", i);
+        if (evt.pointerId === undefined && evt.button !== undefined) {
+            i = evt.button;
+        }
+        this._pointerIds[i] = -1;
+        this.onUp({ button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: evt.pointerType, source: evt });
+        // console.log(this.getPointerPressedCount());
+        // evt.stopPropagation();
+    }
+
+    // private onMouseDown(evt){
+    //     console.log(evt.pointerType);
+    //     if (evt.pointerType !== undefined) return;
+    //     this.onDown(evt); 
+    // }
+    // private onMouseMove(evt){
+    //     if (evt.pointerType !== undefined) return;
+    //     this.onMove(evt);
+    // }
+    // private onMouseUp(evt){
+    //     console.log(evt.pointerType);
+    //     if (evt.pointerType !== undefined) return;
+    //     this.onUp(evt);
+    // }
+
+
+    private isInRect(_evt: { clientX: number, clientY: number }): boolean {
+        return true;
+        /*
+        const rect = this.context.domElement.getBoundingClientRect();
+        const px = evt.clientX - window.scrollX;
+        const py = evt.clientY - window.scrollY;
+        return px >= rect.left && px <= rect.right && py >= rect.top && py <= rect.bottom;
+        */
+    }
+
+    private onDown(evt: PointerEventArgs) {
+        if (!this.isInRect(evt)) return;
+        // console.log("DOWN", evt.button);
+        this.setPointerState(evt.button, this._pointerPressed, true);
+        this.setPointerState(evt.button, this._pointerDown, true);
+        this.setPointerStateT(evt.button, this._pointerEvent, evt.source);
+
+        while (evt.button >= this._pointerTypes.length) this._pointerTypes.push(evt.pointerType);
+        this._pointerTypes[evt.button] = evt.pointerType === undefined ? "mouse" : evt.pointerType;
+
+        while (evt.button >= this._pointerPositionDown.length) this._pointerPositionDown.push(new THREE.Vector2());
+        this._pointerPositionDown[evt.button].set(evt.clientX, evt.clientY);
+
+        if (evt.button >= this._pointerDownTime.length) this._pointerDownTime.push(0);
+        this._pointerDownTime[evt.button] = this.context.time.time;
+
+        this.updatePointerPosition(evt);
+        // console.log("DOWN", this._pointerDown, this.mousePositionRC);
+
+        Context.Current = this.context;
+        this.dispatchEvent(new Event(InputEvents.PointerDown));
+    }
+    // moveEvent?: Event;
+    private onMove(evt: PointerEventArgs) {
+        if (!this.isInRect(evt)) return;
+        this.updatePointerPosition(evt);
+        this.setPointerStateT(evt.button, this._pointerEvent, evt.source);
+        // this.moveEvent = evt.source;
+    }
+    private onUp(evt: PointerEventArgs) {
+        // console.log("UP", evt.button);
+        this.setPointerState(evt.button, this._pointerPressed, false);
+        this.setPointerStateT(evt.button, this._pointerEvent, evt.source);
+
+        if (!this.isInRect(evt)) return;
+        this.setPointerState(evt.button, this._pointerUp, true);
+
+        this.updatePointerPosition(evt);
+
+        if (!this._pointerPositionDown[evt.button]) {
+            console.warn("Received pointer up event without matching down event for button: " + evt.button)
+            return;
+        }
+        const dx = evt.clientX - this._pointerPositionDown[evt.button].x;
+        const dy = evt.clientY - this._pointerPositionDown[evt.button].y;
+
+        if (evt.button >= this._pointerUpTime.length) this._pointerUpTime.push(-99);
+
+        // console.log(dx, dy);
+        if (Math.abs(dx) < 5 && Math.abs(dy) < 5) {
+            this.setPointerState(evt.button, this._pointerClick, true);
+
+            // handle double click
+            const lastUp = this._pointerUpTime[evt.button];
+            const dt = this.context.time.time - lastUp;
+            // console.log(dt);
+            if (dt < this._doubleClickTimeThreshold && dt > 0) {
+                this.setPointerState(evt.button, this._pointerDoubleClick, true);
+            }
+        }
+        this._pointerUpTime[evt.button] = this.context.time.time;
+    }
+
+    private updatePointerPosition(evt) {
+        // console.log("MOVE");
+        while (evt.button >= this._pointerPositions.length) this._pointerPositions.push(new THREE.Vector2());
+        while (evt.button >= this._pointerPositionsLastFrame.length) this._pointerPositionsLastFrame.push(new THREE.Vector2());
+        while (evt.button >= this._pointerPositionsDelta.length) this._pointerPositionsDelta.push(new THREE.Vector2());
+
+        const lf = this._pointerPositionsLastFrame[evt.button];
+        lf.copy(this._pointerPositions[evt.button]);
+        this._pointerPositionsDelta[evt.button].set(evt.clientX - lf.x, evt.clientY - lf.y);
+
+        this._pointerPositions[evt.button].x = evt.clientX;
+        this._pointerPositions[evt.button].y = evt.clientY;
+
+        // we want to have the position 01 on the canvas for raycasting
+        const px = evt.clientX + window.scrollX;
+        const py = evt.clientY + window.scrollY;
+        while (evt.button >= this._pointerPositionsRC.length) this._pointerPositionsRC.push(new THREE.Vector2());
+        this._pointerPositionsRC[evt.button].x = (px - this.context.domX) / this.context.domWidth * 2 - 1;
+        this._pointerPositionsRC[evt.button].y = -((py - this.context.domY) / this.context.domHeight) * 2 + 1;
+        // console.log(evt.button)
+    }
+
+    private getPointerIndex(pointerId: number) {
+        for (let i = 0; i < this._pointerIds.length; i++) {
+            if (this._pointerIds[i] === pointerId) return i;
+        }
+        for (let i = 0; i < this._pointerIds.length; i++) {
+            if (this._pointerIds[i] === -1) {
+                this._pointerIds[i] = pointerId;
+            }
+            if (this._pointerIds[i] === pointerId) return i;
+        }
+        this._pointerIds.push(pointerId);
+        return this._pointerIds.length - 1;
+    }
+
+    private setPointerState(index: number, arr: boolean[], value: boolean) {
+        while (arr.length <= index) arr.push(false);
+        arr[index] = value;
+    }
+
+    private setPointerStateT<T>(index: number, arr: T[], value: T) {
+        while (arr.length <= index) arr.push(null as any);
+        arr[index] = value;
+    }
+}
+
+
+
+export enum KeyCode {
+    BACKSPACE = 8,
+    TAB = 9,
+    ENTER = 13,
+    SHIFT = 16,
+    CTRL = 17,
+    ALT = 18,
+    PAUSE = 19,
+    CAPS_LOCK = 20,
+    ESCAPE = 27,
+    SPACE = 32,
+    PAGE_UP = 33,
+    PAGE_DOWN = 34,
+    END = 35,
+    HOME = 36,
+    LEFT_ARROW = 37,
+    UP_ARROW = 38,
+    RIGHT_ARROW = 39,
+    DOWN_ARROW = 40,
+    INSERT = 45,
+    DELETE = 46,
+    KEY_0 = 48,
+    KEY_1 = 49,
+    KEY_2 = 50,
+    KEY_3 = 51,
+    KEY_4 = 52,
+    KEY_5 = 53,
+    KEY_6 = 54,
+    KEY_7 = 55,
+    KEY_8 = 56,
+    KEY_9 = 57,
+    KEY_A = 65,
+    KEY_B = 66,
+    KEY_C = 67,
+    KEY_D = 68,
+    KEY_E = 69,
+    KEY_F = 70,
+    KEY_G = 71,
+    KEY_H = 72,
+    KEY_I = 73,
+    KEY_J = 74,
+    KEY_K = 75,
+    KEY_L = 76,
+    KEY_M = 77,
+    KEY_N = 78,
+    KEY_O = 79,
+    KEY_P = 80,
+    KEY_Q = 81,
+    KEY_R = 82,
+    KEY_S = 83,
+    KEY_T = 84,
+    KEY_U = 85,
+    KEY_V = 86,
+    KEY_W = 87,
+    KEY_X = 88,
+    KEY_Y = 89,
+    KEY_Z = 90,
+    LEFT_META = 91,
+    RIGHT_META = 92,
+    SELECT = 93,
+    NUMPAD_0 = 96,
+    NUMPAD_1 = 97,
+    NUMPAD_2 = 98,
+    NUMPAD_3 = 99,
+    NUMPAD_4 = 100,
+    NUMPAD_5 = 101,
+    NUMPAD_6 = 102,
+    NUMPAD_7 = 103,
+    NUMPAD_8 = 104,
+    NUMPAD_9 = 105,
+    MULTIPLY = 106,
+    ADD = 107,
+    SUBTRACT = 109,
+    DECIMAL = 110,
+    DIVIDE = 111,
+    F1 = 112,
+    F2 = 113,
+    F3 = 114,
+    F4 = 115,
+    F5 = 116,
+    F6 = 117,
+    F7 = 118,
+    F8 = 119,
+    F9 = 120,
+    F10 = 121,
+    F11 = 122,
+    F12 = 123,
+    NUM_LOCK = 144,
+    SCROLL_LOCK = 145,
+    SEMICOLON = 186,
+    EQUALS = 187,
+    COMMA = 188,
+    DASH = 189,
+    PERIOD = 190,
+    FORWARD_SLASH = 191,
+    GRAVE_ACCENT = 192,
+    OPEN_BRACKET = 219,
+    BACK_SLASH = 220,
+    CLOSE_BRACKET = 221,
+    SINGLE_QUOTE = 222
+};

package/src/engine/engine_input_utils.ts

@@ -0,0 +1,24 @@
+
+export function awaitInputAsync() : Promise<void> {
+    return new Promise((res, _) => {
+        const callback = () => {
+            if (fn == undefined) return;
+            document.removeEventListener('pointerdown', fn);
+            document.removeEventListener('click', fn);
+            document.removeEventListener('dragstart', fn);
+            document.removeEventListener('touchstart', fn);
+            res();
+        };
+        let fn = callback;
+        document.addEventListener('pointerdown', fn);
+        document.addEventListener('click', fn);
+        document.addEventListener('dragstart', fn);
+        document.addEventListener('touchstart', fn);
+
+    });
+}
+
+export async function awaitInput(cb) {
+    await awaitInputAsync();
+    cb();
+}