@needle-tools/engine 3.28.7-beta → 3.28.7-beta.1

package/src/engine/engine_input.ts

@@ -1,880 +1,880 @@
-import { Vector2 } from 'three';
-import { showBalloonMessage, showBalloonWarning } from './debug/debug.js';
-import { Context } from './engine_setup.js';
-import type { IInput, Vec2 } from './engine_types.js';
-import { getParam } from './engine_utils.js';
-
-const debug = getParam("debuginput");
-
-export class NEPointerEvent extends PointerEvent {
-    readonly source: Event | null;
-
-    constructor(type: InputEvents, source: Event | null, init: PointerEventInit) {
-        super(type, init)
-        this.source = source;
-    }
-    stopImmediatePropagation(): void {
-        super.stopImmediatePropagation();
-        this.source?.stopImmediatePropagation();
-    }
-}
-export class NEKeyboardEvent extends KeyboardEvent {
-    source?: Event
-    constructor(type: InputEvents, source: Event, init: KeyboardEventInit) {
-        super(type, init)
-        this.source = source;
-    }
-    stopImmediatePropagation(): void {
-        super.stopImmediatePropagation();
-        this.source?.stopImmediatePropagation();
-    }
-}
-
-export class KeyEventArgs {
-    key: string;
-    keyType: string;
-    source?: Event;
-    constructor(evt: KeyboardEvent) {
-        this.key = evt.key;
-        this.keyType = evt.type;
-        this.source = evt;
-    }
-}
-
-export enum InputEvents {
-    PointerDown = "pointerdown",
-    PointerUp = "pointerup",
-    PointerMove = "pointermove",
-    KeyDown = "keydown",
-    KeyUp = "keyup",
-    KeyPressed = "keypress"
-}
-
-export enum PointerType {
-    Mouse = "mouse",
-    Touch = "touch",
-}
-
-export class Input extends EventTarget implements IInput {
-
-    _doubleClickTimeThreshold = .2;
-    _longPressTimeThreshold = 1;
-
-    get mousePosition(): Vector2 { return this._pointerPositions[0]; };
-    get mousePositionRC(): 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";
-    }
-
-    setPointerUsed(i: number, used: boolean = true) {
-        if (i >= this._pointerUsed.length) {
-            if (i >= this._pointerIds.length)
-                return;
-            while (this._pointerUsed.length <= i) {
-                this._pointerUsed.push(false);
-            }
-        }
-        this._pointerUsed[i] = used;
-    }
-    getPointerUsed(i: number) {
-        if (i >= this._pointerUsed.length) return false;
-        return this._pointerUsed[i];
-    }
-    /** how many pointers are currently pressed */
-    getPointerPressedCount(): number {
-        let count = 0;
-        for (let i = 0; i < this._pointerPressed.length; i++) {
-            if (this._pointerPressed[i]) {
-                count++;
-            }
-        }
-        return count;
-    }
-
-    getPointerPosition(i: number): Vector2 | null {
-        if (i >= this._pointerPositions.length) return null;
-        return this._pointerPositions[i];
-    }
-    getPointerPositionLastFrame(i: number): Vector2 | null {
-        if (i >= this._pointerPositionsLastFrame.length) return null;
-        return this._pointerPositionsLastFrame[i];
-    }
-    getPointerPositionDelta(i: number): Vector2 | null {
-        if (i >= this._pointerPositionsDelta.length) return null;
-        return this._pointerPositionsDelta[i];
-    }
-    getPointerPositionRC(i: number): 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 < 0 || i >= this._pointerTypes.length) return false;
-        return this._pointerTypes[i] === PointerType.Mouse;
-    }
-    getIsTouch(i: number): boolean {
-        if (i < 0 || i >= this._pointerTypes.length) return false;
-        return this._pointerTypes[i] === PointerType.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];
-    }
-    getMouseWheelDeltaY(i: number = 0): number {
-        if (i >= this._mouseWheelDeltaY.length) return 0;
-        return this._mouseWheelDeltaY[i];
-    }
-    getPointerEvent(i: number): Event | undefined {
-        if (i >= this._pointerEvent.length) return undefined;
-        return this._pointerEvent[i] ?? undefined;
-    }
-    *foreachPointerId(pointerType?: string | PointerType | string[] | PointerType[]): Generator<number> {
-        for (let i = 0; i < this._pointerTypes.length; i++) {
-            // check if the pointer is active
-            if (this._pointerIsActive(i)) {
-                // if specific pointer types are requested
-                if (pointerType !== undefined) {
-                    const type = this._pointerTypes[i];
-                    if (Array.isArray(pointerType)) {
-                        let isInArray = false;
-                        for (const t of pointerType) {
-                            if (type === t) {
-                                isInArray = true;
-                                break;
-                            }
-                        }
-                        if (!isInArray) continue;
-                    } else {
-                        if (pointerType !== type) continue;
-                    }
-                }
-                yield i;
-            }
-        }
-    }
-    *foreachTouchId(): Generator<number> {
-        for (let i = 0; i < this._pointerTypes.length; i++) {
-            const type = this._pointerTypes[i];
-            if (type !== PointerType.Touch) continue;
-            if (this._pointerIsActive[i])
-                yield i;
-        }
-    }
-
-    private _pointerIsActive(index: number) {
-        if (index < 0) return false;
-        return this._pointerPressed[index] || this._pointerDown[index] || this._pointerUp[index];
-    }
-
-    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: Vector2[] = [new Vector2()];
-    private _pointerPositionsLastFrame: Vector2[] = [new Vector2()];
-    private _pointerPositionsDelta: Vector2[] = [new Vector2()];
-    private _pointerPositionsRC: Vector2[] = [new Vector2()];
-    private _pointerPositionDown: Vector2[] = [new Vector2()];
-    private _pointerDownTime: number[] = [];
-    private _pointerUpTime: number[] = [];
-    private _pointerUpTimestamp: number[] = [];
-    private _pointerIds: number[] = [];
-    private _pointerTypes: string[] = [""];
-    private _mouseWheelChanged: boolean[] = [false];
-    private _mouseWheelDeltaY: number[] = [0];
-    private _pointerEvent: Event[] = [];
-    private _pointerUsed: boolean[] = [];
-
-    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: KeyCode | string) {
-        if (!this.context.application.isVisible || !this.context.application.hasFocus) return false;
-        const codes = this.getCodeForCommonKeyName(keyCode);
-        if (codes !== null) {
-            for (const code of codes) if (this.isKeyDown(code)) return true;
-            return false;
-        }
-        return this.keysPressed[keyCode]?.startFrame === this.context.time.frameCount && this.keysPressed[keyCode].pressed;
-    }
-    isKeyUp(keyCode: KeyCode | string) {
-        if (!this.context.application.isVisible || !this.context.application.hasFocus) return false;
-        const codes = this.getCodeForCommonKeyName(keyCode);
-        if (codes !== null) {
-            for (const code of codes) if (this.isKeyUp(code)) return true;
-            return false;
-        }
-        return this.keysPressed[keyCode]?.frame === this.context.time.frameCount && !this.keysPressed[keyCode].pressed;
-    }
-    isKeyPressed(keyCode: KeyCode | string) {
-        if (!this.context.application.isVisible || !this.context.application.hasFocus) return false;
-        const codes = this.getCodeForCommonKeyName(keyCode);
-        if (codes !== null) {
-            for (const code of codes) if (this.isKeyPressed(code)) return true;
-            return false;
-        }
-        return this.keysPressed[keyCode]?.pressed;// && time.frameCount - this.keysPressed[keyCode].frame < 100;
-    }
-
-    // utility helper for mapping common names to actual codes; e.g. "Shift" -> "ShiftLeft" and "ShiftRight" or "a" -> "KeyA"
-    private getCodeForCommonKeyName(keyName: string): string[] | null {
-        if (keyName.length === 1) {
-            // check if this is a digit
-            if (keyName >= "0" && keyName <= "9")
-                return ["Digit" + keyName];
-            // check if this is a letter
-            if (keyName >= "a" && keyName <= "z")
-                return ["Key" + keyName.toUpperCase()];
-            if (keyName == " ")
-                return ["Space"];
-        }
-        switch (keyName) {
-            case "shift":
-            case "Shift":
-                return ["ShiftLeft", "ShiftRight"];
-            case "control":
-            case "Control":
-                return ["ControlLeft", "ControlRight"];
-            case "alt":
-            case "Alt":
-                return ["AltLeft", "AltRight"];
-        }
-        return null;
-    }
-
-    createPointerDown(args: NEPointerEvent) {
-        if (debug) showBalloonMessage("Create Pointer down");
-        this.onDown(args);
-    }
-
-    createPointerMove(args: NEPointerEvent) {
-        if (debug) showBalloonMessage("Create Pointer move");
-        this.onMove(args);
-    }
-
-    createPointerUp(args: NEPointerEvent) {
-        if (debug) showBalloonMessage("Create Pointer up");
-        this.onUp(args);
-    }
-
-    convertScreenspaceToRaycastSpace(vec2: Vec2) {
-        vec2.x = (vec2.x - this.context.domX) / this.context.domWidth * 2 - 1;
-        vec2.y = -((vec2.y - this.context.domY) / this.context.domHeight) * 2 + 1;
-    }
-
-    constructor(context: Context) {
-        super();
-        this.context = context;
-        this.context.post_render_callbacks.push(this.onEndOfFrame);
-
-        window.addEventListener('touchstart', this.onTouchStart, false);
-        window.addEventListener('touchmove', this.onTouchMove, { passive: true });
-        window.addEventListener('touchend', this.onTouchUp, false);
-
-        window.addEventListener('mousedown', this.onMouseDown, false);
-        window.addEventListener('mousemove', this.onMouseMove, false);
-        window.addEventListener('mouseup', this.onMouseUp, false);
-        window.addEventListener('wheel', this.onMouseWheel, { passive: true });
-
-        window.addEventListener("keydown", this.onKeyDown, false);
-        window.addEventListener("keypress", this.onKeyPressed, false);
-        window.addEventListener("keyup", this.onKeyUp, false);
-
-        // e.g. when using sharex to capture we loose focus thus dont get e.g. key up events
-        window.addEventListener('blur', this.onLostFocus);
-    }
-
-    dispose() {
-        const index = this.context.post_render_callbacks.indexOf(this.onEndOfFrame);
-        if (index >= 0) this.context.post_render_callbacks.splice(index, 1);
-
-        window.removeEventListener('touchstart', this.onTouchStart, false);
-        window.removeEventListener('touchmove', this.onTouchMove, false);
-        window.removeEventListener('touchend', this.onTouchUp, false);
-
-        window.removeEventListener('mousedown', this.onMouseDown, false);
-        window.removeEventListener('mousemove', this.onMouseMove, false);
-        window.removeEventListener('mouseup', this.onMouseUp, false);
-        window.removeEventListener('wheel', this.onMouseWheel, false);
-
-        window.removeEventListener("keydown", this.onKeyDown, false);
-        window.removeEventListener("keypress", this.onKeyPressed, false);
-        window.removeEventListener("keyup", this.onKeyUp, false);
-
-        window.removeEventListener('blur', this.onLostFocus);
-    }
-
-    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;
-        for (let i = 0; i < this._mouseWheelDeltaY.length; i++)
-            this._mouseWheelDeltaY[i] = 0;
-    }
-
-    private canReceiveInput(evt: Event) {
-        // If the user has HTML objects ontop of the canvas
-        // if(evt.target === this.context.renderer.domElement) return true;
-        // const css = window.getComputedStyle(evt.target as HTMLElement);
-        // if(css.pointerEvents === "all") return false;
-
-        // We only check the target elements here since the canvas may be overlapped by other elements
-        // in which case we do not want to use the input (e.g. if a HTML element is being triggered)
-        if(evt.target === this.context.renderer?.domElement) return true;
-        if(evt.target === this.context.domElement) return true;
-        return false;
-    }
-
-    private keysPressed: { [key: KeyCode | string]: { pressed: boolean, frame: number, startFrame: number, key: string, code: KeyCode | string } } = {};
-
-    private onKeyDown = (evt: KeyboardEvent) => {
-        if (!this.context.application.hasFocus)
-            return;
-        const ex = this.keysPressed[evt.code];
-        if (ex && ex.pressed) return;
-        this.keysPressed[evt.code] = { pressed: true, frame: this.context.time.frameCount + 1, startFrame: this.context.time.frameCount + 1, key: evt.key, code: evt.code };
-        const ne = new NEKeyboardEvent(InputEvents.KeyDown, evt, evt);
-        this.onDispatchEvent(ne);
-    }
-    private onKeyPressed = (evt: KeyboardEvent) => {
-        if (!this.context.application.hasFocus)
-            return;
-        const p = this.keysPressed[evt.code];
-        if (!p) return;
-        p.pressed = true;
-        p.frame = this.context.time.frameCount + 1;
-        const ne = new NEKeyboardEvent(InputEvents.KeyPressed, evt, evt);
-        this.onDispatchEvent(ne);
-
-    }
-    private onKeyUp = (evt: KeyboardEvent) => {
-        if (!this.context.application.hasFocus)
-            return;
-        const p = this.keysPressed[evt.code];
-        if (!p) return;
-        p.pressed = false;
-        p.frame = this.context.time.frameCount + 1;
-        const ne = new NEKeyboardEvent(InputEvents.KeyUp, evt, evt);
-        this.onDispatchEvent(ne);
-    }
-
-    private onMouseWheel = (evt: WheelEvent) => {
-        if (this.canReceiveInput(evt) === false) return;
-        if (this._mouseWheelDeltaY.length <= 0) this._mouseWheelDeltaY.push(0);
-        if (this._mouseWheelChanged.length <= 0) this._mouseWheelChanged.push(false);
-        this._mouseWheelChanged[0] = true;
-        const current = this._mouseWheelDeltaY[0];
-        this._mouseWheelDeltaY[0] = current + evt.deltaY;
-    }
-
-    private onTouchStart = (evt: TouchEvent) => {
-        if (evt.changedTouches.length <= 0) return;
-        if (this.canReceiveInput(evt) === false) return;
-        for (let i = 0; i < evt.changedTouches.length; i++) {
-            const touch = evt.changedTouches[i];
-            const id = this.getPointerIndex(touch.identifier)
-            if (debug) showBalloonMessage(`touch start #${id}, identifier:${touch.identifier}`);
-            const ne = new NEPointerEvent(InputEvents.PointerDown, evt, { button: id, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch });
-            this.onDown(ne);
-        }
-    }
-
-    private onTouchMove = (evt: TouchEvent) => {
-        if (evt.changedTouches.length <= 0) return;
-        for (let i = 0; i < evt.changedTouches.length; i++) {
-            const touch = evt.changedTouches[i];
-            const id = this.getPointerIndex(touch.identifier)
-            const ne = new NEPointerEvent(InputEvents.PointerMove, evt, { button: id, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch });
-            this.onMove(ne);
-        }
-    }
-
-    private onTouchUp = (evt: TouchEvent) => {
-        if (evt.changedTouches.length <= 0) return;
-        for (let i = 0; i < evt.changedTouches.length; i++) {
-            const touch = evt.changedTouches[i];
-            const id = this.getPointerIndex(touch.identifier);
-
-            if (!this.isNewEvent(evt.timeStamp, id, this._pointerUpTimestamp)) continue;
-
-            if (debug) showBalloonMessage(`touch up #${id}, identifier:${touch.identifier}`);
-            const ne = new NEPointerEvent(InputEvents.PointerUp, evt, { button: id, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch });
-            this.onUp(ne);
-        }
-    }
-
-    private onMouseDown = (evt: MouseEvent) => {
-        if (evt.defaultPrevented) return;
-        if (this.canReceiveInput(evt) === false) return;
-        const id = evt.button;
-        const ne = new NEPointerEvent(InputEvents.PointerDown, evt, { button: id, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse });
-        this.onDown(ne);
-    }
-
-    private onMouseMove = (evt: MouseEvent) => {
-        if (evt.defaultPrevented) return;
-        const id = evt.button;
-        const ne = new NEPointerEvent(InputEvents.PointerMove, evt, { button: id, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse });
-        this.onMove(ne);
-    }
-
-    private onMouseUp = (evt: MouseEvent) => {
-        if (evt.defaultPrevented) return;
-        const id = evt.button;
-        if (!this.isNewEvent(evt.timeStamp, id, this._pointerUpTimestamp)) return;
-        const ne = new NEPointerEvent(InputEvents.PointerUp, evt, { button: id, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse });
-        this.onUp(ne);
-    }
-
-    // Prevent the same event being handled twice (e.g. on touch we get a mouseUp and touchUp evt with the same timestamp)
-    private isNewEvent(timestamp: number, index: number, arr: number[]): boolean {
-        while (arr.length <= index) arr.push(-1);
-        if (timestamp === arr[index]) return false;
-        arr[index] = timestamp;
-        return true;
-    }
-
-    private isInRect(e: { clientX: number, clientY: number }): boolean {
-        if (this.context.isInXR) return true;
-        const rect = this.context.domElement.getBoundingClientRect();
-        const px = e.clientX;
-        const py = e.clientY;
-        const isInRect = px >= rect.x && px <= rect.right && py >= rect.y && py <= rect.bottom;
-        if (debug && !isInRect) console.log("Not in rect", rect, px, py);
-        return isInRect;
-
-    }
-
-    private onDown(evt: NEPointerEvent) {
-        if (debug) console.log(evt.pointerType, "DOWN", evt.button);
-        if (!this.isInRect(evt)) return;
-
-        // check if we received an mouse UP event for a touch (for some reason we get a mouse.down for touch.up)
-        if (evt.pointerType === PointerType.Mouse) {
-            const upTime = this._pointerUpTimestamp[evt.button];
-            if (upTime > 0 && evt.source?.timeStamp !== undefined) {
-                const diff = (evt.source.timeStamp - upTime);
-                // on android touch up and mouse up have the exact same value
-                // but on iOS they are not the same but a few milliseconds apart
-                if (diff < 60 && diff >= 0) {
-                    // we received an UP event for a touch, ignore this DOWN event
-                    if (debug) console.log("Ignoring mouse.down for touch.up");
-                    return;
-                }
-            }
-        }
-
-        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;
-
-        while (evt.button >= this._pointerPositionDown.length) this._pointerPositionDown.push(new Vector2());
-        this._pointerPositionDown[evt.button].set(evt.clientX, evt.clientY);
-        while (evt.button >= this._pointerPositions.length) this._pointerPositions.push(new Vector2());
-        this._pointerPositions[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);
-
-        this.onDispatchEvent(evt);
-    }
-    // moveEvent?: Event;
-    private onMove(evt: NEPointerEvent) {
-        const index = evt.button;
-        
-        const isDown = this.getPointerPressed(index);
-        if (isDown === false && !this.isInRect(evt)) return;
-        if (evt.pointerType === PointerType.Touch && !isDown) return;
-        if (debug) console.log(evt.pointerType, "MOVE", index);
-        
-        this.updatePointerPosition(evt);
-        this.setPointerStateT(index, this._pointerEvent, evt.source);
-        this.onDispatchEvent(evt);
-    }
-    private onUp(evt: NEPointerEvent) {
-        if (this._pointerIds?.length >= evt.button)
-            this._pointerIds[evt.button] = -1;
-        const wasDown = this._pointerPressed[evt.button];
-        if (!wasDown) {
-            if (debug) console.log(evt.pointerType, "UP", evt.button, "was not down");
-            return;
-        }
-        if (debug) console.log(evt.pointerType, "UP", evt.button);
-        this.setPointerState(evt.button, this._pointerPressed, false);
-        this.setPointerStateT(evt.button, this._pointerEvent, evt.source);
-
-        // if (!this.isInRect(evt)) {
-        //     if (debug) showBalloonWarning("Pointer out of bounds: " + evt.clientX + ", " + evt.clientY);
-        //     return;
-        // }
-        this.setPointerState(evt.button, this._pointerUp, true);
-
-        while (evt.button >= this._pointerUsed.length) this._pointerUsed.push(false);
-        this.setPointerState(evt.button, this._pointerUsed, false);
-
-        this.updatePointerPosition(evt);
-
-        if (!this._pointerPositionDown[evt.button]) {
-            if (debug) showBalloonWarning("Received pointer up event without matching down event for button: " + 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;
-
-        this.onDispatchEvent(evt);
-    }
-
-    private updatePointerPosition(evt: NEPointerEvent) {
-        // console.log("MOVE");
-        while (evt.button >= this._pointerPositions.length) this._pointerPositions.push(new Vector2());
-        while (evt.button >= this._pointerPositionsLastFrame.length) this._pointerPositionsLastFrame.push(new Vector2());
-        while (evt.button >= this._pointerPositionsDelta.length) this._pointerPositionsDelta.push(new Vector2());
-
-        const lf = this._pointerPositionsLastFrame[evt.button];
-        lf.copy(this._pointerPositions[evt.button]);
-        // accumulate delta (it's reset in end of frame), if we just write it here it's not correct when the browser console is open
-        const delta = this._pointerPositionsDelta[evt.button];
-        let dx = evt.clientX - lf.x;
-        let dy = evt.clientY - lf.y;
-        // if pointer is locked, clientX and Y are not changed, but Movement is.
-        if(evt.source instanceof MouseEvent || evt.source instanceof TouchEvent) {
-            const source = evt.source as PointerEvent;
-            if(dx === 0 && source.movementX !== 0)
-                dx = source.movementX || 0;
-            if(dy === 0 && source.movementY !== 0)
-                dy = source.movementY || 0;
-        }
-        delta.x += dx;
-        delta.y += dy;
-
-        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;
-        const py = evt.clientY;
-        while (evt.button >= this._pointerPositionsRC.length) this._pointerPositionsRC.push(new Vector2());
-        const rc = this._pointerPositionsRC[evt.button];
-        rc.set(px, py);
-        this.convertScreenspaceToRaycastSpace(rc);
-        // console.log(this.context.alias, rc);
-        // 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)
-    }
-
-    /** get the next free id */
-    private getPointerIndex(pointerId: number) {
-        const ids = this._pointerIds;
-        // test if theres a pointer with the id
-        let firstFreeIndex = -1;
-        for (let i = 0; i < ids.length; i++) {
-            if (ids[i] === pointerId) return i;
-            else if (firstFreeIndex === -1 && ids[i] === -1)
-                firstFreeIndex = i;
-        }
-        // if not take the free slot if any
-        if (firstFreeIndex !== -1) {
-            ids[firstFreeIndex] = pointerId;
-            return firstFreeIndex;
-        }
-        ids.push(pointerId);
-        return ids.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;
-    }
-
-    private onDispatchEvent(evt: NEPointerEvent | KeyboardEvent) {
-        const prevContext = Context.Current;
-        try {
-            Context.Current = this.context;
-            this.dispatchEvent(evt);
-        }
-        finally {
-            Context.Current = prevContext;
-        }
-    }
-}
-
-export declare type KeyCode =
-    | "Tab"
-    | "Enter"
-    | "ShiftLeft"
-    | "ShiftRight"
-    | "ControlLeft"
-    | "ControlRight"
-    | "AltLeft"
-    | "AltRight"
-    | "Pause"
-    | "CapsLock"
-    | "Escape"
-    | "Space"
-    | "PageUp"
-    | "PageDown"
-    | "End"
-    | "Home"
-    | "ArrowLeft"
-    | "ArrowUp"
-    | "ArrowRight"
-    | "ArrowDown"
-    | "Insert"
-    | "Delete"
-    | "Digit0"
-    | "Digit1"
-    | "Digit2"
-    | "Digit3"
-    | "Digit4"
-    | "Digit5"
-    | "Digit6"
-    | "Digit7"
-    | "Digit8"
-    | "Digit9"
-    | "KeyA"
-    | "KeyB"
-    | "KeyC"
-    | "KeyD"
-    | "KeyE"
-    | "KeyF"
-    | "KeyG"
-    | "KeyH"
-    | "KeyI"
-    | "KeyJ"
-    | "KeyK"
-    | "KeyL"
-    | "KeyM"
-    | "KeyN"
-    | "KeyO"
-    | "KeyP"
-    | "KeyQ"
-    | "KeyR"
-    | "KeyS"
-    | "KeyT"
-    | "KeyU"
-    | "KeyV"
-    | "KeyW"
-    | "KeyX"
-    | "KeyY"
-    | "KeyZ"
-    | "Select"
-    | "Numpad0"
-    | "Numpad1"
-    | "Numpad2"
-    | "Numpad3"
-    | "Numpad4"
-    | "Numpad5"
-    | "Numpad6"
-    | "Numpad7"
-    | "Numpad8"
-    | "Numpad9"
-    | "Multiply"
-    | "Add"
-    | "Subtract"
-    | "Decimal"
-    | "Divide"
-    | "F1"
-    | "F2"
-    | "F3"
-    | "F4"
-    | "F5"
-    | "F6"
-    | "F7"
-    | "F8"
-    | "F9"
-    | "F10"
-    | "F11"
-    | "F12";
-
-    // 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 = "d",
-    // 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,
+import { Vector2 } from 'three';
+import { showBalloonMessage, showBalloonWarning } from './debug/debug.js';
+import { Context } from './engine_setup.js';
+import type { IInput, Vec2 } from './engine_types.js';
+import { getParam } from './engine_utils.js';
+
+const debug = getParam("debuginput");
+
+export class NEPointerEvent extends PointerEvent {
+    readonly source: Event | null;
+
+    constructor(type: InputEvents, source: Event | null, init: PointerEventInit) {
+        super(type, init)
+        this.source = source;
+    }
+    stopImmediatePropagation(): void {
+        super.stopImmediatePropagation();
+        this.source?.stopImmediatePropagation();
+    }
+}
+export class NEKeyboardEvent extends KeyboardEvent {
+    source?: Event
+    constructor(type: InputEvents, source: Event, init: KeyboardEventInit) {
+        super(type, init)
+        this.source = source;
+    }
+    stopImmediatePropagation(): void {
+        super.stopImmediatePropagation();
+        this.source?.stopImmediatePropagation();
+    }
+}
+
+export class KeyEventArgs {
+    key: string;
+    keyType: string;
+    source?: Event;
+    constructor(evt: KeyboardEvent) {
+        this.key = evt.key;
+        this.keyType = evt.type;
+        this.source = evt;
+    }
+}
+
+export enum InputEvents {
+    PointerDown = "pointerdown",
+    PointerUp = "pointerup",
+    PointerMove = "pointermove",
+    KeyDown = "keydown",
+    KeyUp = "keyup",
+    KeyPressed = "keypress"
+}
+
+export enum PointerType {
+    Mouse = "mouse",
+    Touch = "touch",
+}
+
+export class Input extends EventTarget implements IInput {
+
+    _doubleClickTimeThreshold = .2;
+    _longPressTimeThreshold = 1;
+
+    get mousePosition(): Vector2 { return this._pointerPositions[0]; };
+    get mousePositionRC(): 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";
+    }
+
+    setPointerUsed(i: number, used: boolean = true) {
+        if (i >= this._pointerUsed.length) {
+            if (i >= this._pointerIds.length)
+                return;
+            while (this._pointerUsed.length <= i) {
+                this._pointerUsed.push(false);
+            }
+        }
+        this._pointerUsed[i] = used;
+    }
+    getPointerUsed(i: number) {
+        if (i >= this._pointerUsed.length) return false;
+        return this._pointerUsed[i];
+    }
+    /** how many pointers are currently pressed */
+    getPointerPressedCount(): number {
+        let count = 0;
+        for (let i = 0; i < this._pointerPressed.length; i++) {
+            if (this._pointerPressed[i]) {
+                count++;
+            }
+        }
+        return count;
+    }
+
+    getPointerPosition(i: number): Vector2 | null {
+        if (i >= this._pointerPositions.length) return null;
+        return this._pointerPositions[i];
+    }
+    getPointerPositionLastFrame(i: number): Vector2 | null {
+        if (i >= this._pointerPositionsLastFrame.length) return null;
+        return this._pointerPositionsLastFrame[i];
+    }
+    getPointerPositionDelta(i: number): Vector2 | null {
+        if (i >= this._pointerPositionsDelta.length) return null;
+        return this._pointerPositionsDelta[i];
+    }
+    getPointerPositionRC(i: number): 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 < 0 || i >= this._pointerTypes.length) return false;
+        return this._pointerTypes[i] === PointerType.Mouse;
+    }
+    getIsTouch(i: number): boolean {
+        if (i < 0 || i >= this._pointerTypes.length) return false;
+        return this._pointerTypes[i] === PointerType.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];
+    }
+    getMouseWheelDeltaY(i: number = 0): number {
+        if (i >= this._mouseWheelDeltaY.length) return 0;
+        return this._mouseWheelDeltaY[i];
+    }
+    getPointerEvent(i: number): Event | undefined {
+        if (i >= this._pointerEvent.length) return undefined;
+        return this._pointerEvent[i] ?? undefined;
+    }
+    *foreachPointerId(pointerType?: string | PointerType | string[] | PointerType[]): Generator<number> {
+        for (let i = 0; i < this._pointerTypes.length; i++) {
+            // check if the pointer is active
+            if (this._pointerIsActive(i)) {
+                // if specific pointer types are requested
+                if (pointerType !== undefined) {
+                    const type = this._pointerTypes[i];
+                    if (Array.isArray(pointerType)) {
+                        let isInArray = false;
+                        for (const t of pointerType) {
+                            if (type === t) {
+                                isInArray = true;
+                                break;
+                            }
+                        }
+                        if (!isInArray) continue;
+                    } else {
+                        if (pointerType !== type) continue;
+                    }
+                }
+                yield i;
+            }
+        }
+    }
+    *foreachTouchId(): Generator<number> {
+        for (let i = 0; i < this._pointerTypes.length; i++) {
+            const type = this._pointerTypes[i];
+            if (type !== PointerType.Touch) continue;
+            if (this._pointerIsActive[i])
+                yield i;
+        }
+    }
+
+    private _pointerIsActive(index: number) {
+        if (index < 0) return false;
+        return this._pointerPressed[index] || this._pointerDown[index] || this._pointerUp[index];
+    }
+
+    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: Vector2[] = [new Vector2()];
+    private _pointerPositionsLastFrame: Vector2[] = [new Vector2()];
+    private _pointerPositionsDelta: Vector2[] = [new Vector2()];
+    private _pointerPositionsRC: Vector2[] = [new Vector2()];
+    private _pointerPositionDown: Vector2[] = [new Vector2()];
+    private _pointerDownTime: number[] = [];
+    private _pointerUpTime: number[] = [];
+    private _pointerUpTimestamp: number[] = [];
+    private _pointerIds: number[] = [];
+    private _pointerTypes: string[] = [""];
+    private _mouseWheelChanged: boolean[] = [false];
+    private _mouseWheelDeltaY: number[] = [0];
+    private _pointerEvent: Event[] = [];
+    private _pointerUsed: boolean[] = [];
+
+    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: KeyCode | string) {
+        if (!this.context.application.isVisible || !this.context.application.hasFocus) return false;
+        const codes = this.getCodeForCommonKeyName(keyCode);
+        if (codes !== null) {
+            for (const code of codes) if (this.isKeyDown(code)) return true;
+            return false;
+        }
+        return this.keysPressed[keyCode]?.startFrame === this.context.time.frameCount && this.keysPressed[keyCode].pressed;
+    }
+    isKeyUp(keyCode: KeyCode | string) {
+        if (!this.context.application.isVisible || !this.context.application.hasFocus) return false;
+        const codes = this.getCodeForCommonKeyName(keyCode);
+        if (codes !== null) {
+            for (const code of codes) if (this.isKeyUp(code)) return true;
+            return false;
+        }
+        return this.keysPressed[keyCode]?.frame === this.context.time.frameCount && !this.keysPressed[keyCode].pressed;
+    }
+    isKeyPressed(keyCode: KeyCode | string) {
+        if (!this.context.application.isVisible || !this.context.application.hasFocus) return false;
+        const codes = this.getCodeForCommonKeyName(keyCode);
+        if (codes !== null) {
+            for (const code of codes) if (this.isKeyPressed(code)) return true;
+            return false;
+        }
+        return this.keysPressed[keyCode]?.pressed;// && time.frameCount - this.keysPressed[keyCode].frame < 100;
+    }
+
+    // utility helper for mapping common names to actual codes; e.g. "Shift" -> "ShiftLeft" and "ShiftRight" or "a" -> "KeyA"
+    private getCodeForCommonKeyName(keyName: string): string[] | null {
+        if (keyName.length === 1) {
+            // check if this is a digit
+            if (keyName >= "0" && keyName <= "9")
+                return ["Digit" + keyName];
+            // check if this is a letter
+            if (keyName >= "a" && keyName <= "z")
+                return ["Key" + keyName.toUpperCase()];
+            if (keyName == " ")
+                return ["Space"];
+        }
+        switch (keyName) {
+            case "shift":
+            case "Shift":
+                return ["ShiftLeft", "ShiftRight"];
+            case "control":
+            case "Control":
+                return ["ControlLeft", "ControlRight"];
+            case "alt":
+            case "Alt":
+                return ["AltLeft", "AltRight"];
+        }
+        return null;
+    }
+
+    createPointerDown(args: NEPointerEvent) {
+        if (debug) showBalloonMessage("Create Pointer down");
+        this.onDown(args);
+    }
+
+    createPointerMove(args: NEPointerEvent) {
+        if (debug) showBalloonMessage("Create Pointer move");
+        this.onMove(args);
+    }
+
+    createPointerUp(args: NEPointerEvent) {
+        if (debug) showBalloonMessage("Create Pointer up");
+        this.onUp(args);
+    }
+
+    convertScreenspaceToRaycastSpace(vec2: Vec2) {
+        vec2.x = (vec2.x - this.context.domX) / this.context.domWidth * 2 - 1;
+        vec2.y = -((vec2.y - this.context.domY) / this.context.domHeight) * 2 + 1;
+    }
+
+    constructor(context: Context) {
+        super();
+        this.context = context;
+        this.context.post_render_callbacks.push(this.onEndOfFrame);
+
+        window.addEventListener('touchstart', this.onTouchStart, false);
+        window.addEventListener('touchmove', this.onTouchMove, { passive: true });
+        window.addEventListener('touchend', this.onTouchUp, false);
+
+        window.addEventListener('mousedown', this.onMouseDown, false);
+        window.addEventListener('mousemove', this.onMouseMove, false);
+        window.addEventListener('mouseup', this.onMouseUp, false);
+        window.addEventListener('wheel', this.onMouseWheel, { passive: true });
+
+        window.addEventListener("keydown", this.onKeyDown, false);
+        window.addEventListener("keypress", this.onKeyPressed, false);
+        window.addEventListener("keyup", this.onKeyUp, false);
+
+        // e.g. when using sharex to capture we loose focus thus dont get e.g. key up events
+        window.addEventListener('blur', this.onLostFocus);
+    }
+
+    dispose() {
+        const index = this.context.post_render_callbacks.indexOf(this.onEndOfFrame);
+        if (index >= 0) this.context.post_render_callbacks.splice(index, 1);
+
+        window.removeEventListener('touchstart', this.onTouchStart, false);
+        window.removeEventListener('touchmove', this.onTouchMove, false);
+        window.removeEventListener('touchend', this.onTouchUp, false);
+
+        window.removeEventListener('mousedown', this.onMouseDown, false);
+        window.removeEventListener('mousemove', this.onMouseMove, false);
+        window.removeEventListener('mouseup', this.onMouseUp, false);
+        window.removeEventListener('wheel', this.onMouseWheel, false);
+
+        window.removeEventListener("keydown", this.onKeyDown, false);
+        window.removeEventListener("keypress", this.onKeyPressed, false);
+        window.removeEventListener("keyup", this.onKeyUp, false);
+
+        window.removeEventListener('blur', this.onLostFocus);
+    }
+
+    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;
+        for (let i = 0; i < this._mouseWheelDeltaY.length; i++)
+            this._mouseWheelDeltaY[i] = 0;
+    }
+
+    private canReceiveInput(evt: Event) {
+        // If the user has HTML objects ontop of the canvas
+        // if(evt.target === this.context.renderer.domElement) return true;
+        // const css = window.getComputedStyle(evt.target as HTMLElement);
+        // if(css.pointerEvents === "all") return false;
+
+        // We only check the target elements here since the canvas may be overlapped by other elements
+        // in which case we do not want to use the input (e.g. if a HTML element is being triggered)
+        if(evt.target === this.context.renderer?.domElement) return true;
+        if(evt.target === this.context.domElement) return true;
+        return false;
+    }
+
+    private keysPressed: { [key: KeyCode | string]: { pressed: boolean, frame: number, startFrame: number, key: string, code: KeyCode | string } } = {};
+
+    private onKeyDown = (evt: KeyboardEvent) => {
+        if (!this.context.application.hasFocus)
+            return;
+        const ex = this.keysPressed[evt.code];
+        if (ex && ex.pressed) return;
+        this.keysPressed[evt.code] = { pressed: true, frame: this.context.time.frameCount + 1, startFrame: this.context.time.frameCount + 1, key: evt.key, code: evt.code };
+        const ne = new NEKeyboardEvent(InputEvents.KeyDown, evt, evt);
+        this.onDispatchEvent(ne);
+    }
+    private onKeyPressed = (evt: KeyboardEvent) => {
+        if (!this.context.application.hasFocus)
+            return;
+        const p = this.keysPressed[evt.code];
+        if (!p) return;
+        p.pressed = true;
+        p.frame = this.context.time.frameCount + 1;
+        const ne = new NEKeyboardEvent(InputEvents.KeyPressed, evt, evt);
+        this.onDispatchEvent(ne);
+
+    }
+    private onKeyUp = (evt: KeyboardEvent) => {
+        if (!this.context.application.hasFocus)
+            return;
+        const p = this.keysPressed[evt.code];
+        if (!p) return;
+        p.pressed = false;
+        p.frame = this.context.time.frameCount + 1;
+        const ne = new NEKeyboardEvent(InputEvents.KeyUp, evt, evt);
+        this.onDispatchEvent(ne);
+    }
+
+    private onMouseWheel = (evt: WheelEvent) => {
+        if (this.canReceiveInput(evt) === false) return;
+        if (this._mouseWheelDeltaY.length <= 0) this._mouseWheelDeltaY.push(0);
+        if (this._mouseWheelChanged.length <= 0) this._mouseWheelChanged.push(false);
+        this._mouseWheelChanged[0] = true;
+        const current = this._mouseWheelDeltaY[0];
+        this._mouseWheelDeltaY[0] = current + evt.deltaY;
+    }
+
+    private onTouchStart = (evt: TouchEvent) => {
+        if (evt.changedTouches.length <= 0) return;
+        if (this.canReceiveInput(evt) === false) return;
+        for (let i = 0; i < evt.changedTouches.length; i++) {
+            const touch = evt.changedTouches[i];
+            const id = this.getPointerIndex(touch.identifier)
+            if (debug) showBalloonMessage(`touch start #${id}, identifier:${touch.identifier}`);
+            const ne = new NEPointerEvent(InputEvents.PointerDown, evt, { button: id, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch });
+            this.onDown(ne);
+        }
+    }
+
+    private onTouchMove = (evt: TouchEvent) => {
+        if (evt.changedTouches.length <= 0) return;
+        for (let i = 0; i < evt.changedTouches.length; i++) {
+            const touch = evt.changedTouches[i];
+            const id = this.getPointerIndex(touch.identifier)
+            const ne = new NEPointerEvent(InputEvents.PointerMove, evt, { button: id, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch });
+            this.onMove(ne);
+        }
+    }
+
+    private onTouchUp = (evt: TouchEvent) => {
+        if (evt.changedTouches.length <= 0) return;
+        for (let i = 0; i < evt.changedTouches.length; i++) {
+            const touch = evt.changedTouches[i];
+            const id = this.getPointerIndex(touch.identifier);
+
+            if (!this.isNewEvent(evt.timeStamp, id, this._pointerUpTimestamp)) continue;
+
+            if (debug) showBalloonMessage(`touch up #${id}, identifier:${touch.identifier}`);
+            const ne = new NEPointerEvent(InputEvents.PointerUp, evt, { button: id, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch });
+            this.onUp(ne);
+        }
+    }
+
+    private onMouseDown = (evt: MouseEvent) => {
+        if (evt.defaultPrevented) return;
+        if (this.canReceiveInput(evt) === false) return;
+        const id = evt.button;
+        const ne = new NEPointerEvent(InputEvents.PointerDown, evt, { button: id, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse });
+        this.onDown(ne);
+    }
+
+    private onMouseMove = (evt: MouseEvent) => {
+        if (evt.defaultPrevented) return;
+        const id = evt.button;
+        const ne = new NEPointerEvent(InputEvents.PointerMove, evt, { button: id, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse });
+        this.onMove(ne);
+    }
+
+    private onMouseUp = (evt: MouseEvent) => {
+        if (evt.defaultPrevented) return;
+        const id = evt.button;
+        if (!this.isNewEvent(evt.timeStamp, id, this._pointerUpTimestamp)) return;
+        const ne = new NEPointerEvent(InputEvents.PointerUp, evt, { button: id, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse });
+        this.onUp(ne);
+    }
+
+    // Prevent the same event being handled twice (e.g. on touch we get a mouseUp and touchUp evt with the same timestamp)
+    private isNewEvent(timestamp: number, index: number, arr: number[]): boolean {
+        while (arr.length <= index) arr.push(-1);
+        if (timestamp === arr[index]) return false;
+        arr[index] = timestamp;
+        return true;
+    }
+
+    private isInRect(e: { clientX: number, clientY: number }): boolean {
+        if (this.context.isInXR) return true;
+        const rect = this.context.domElement.getBoundingClientRect();
+        const px = e.clientX;
+        const py = e.clientY;
+        const isInRect = px >= rect.x && px <= rect.right && py >= rect.y && py <= rect.bottom;
+        if (debug && !isInRect) console.log("Not in rect", rect, px, py);
+        return isInRect;
+
+    }
+
+    private onDown(evt: NEPointerEvent) {
+        if (debug) console.log(evt.pointerType, "DOWN", evt.button);
+        if (!this.isInRect(evt)) return;
+
+        // check if we received an mouse UP event for a touch (for some reason we get a mouse.down for touch.up)
+        if (evt.pointerType === PointerType.Mouse) {
+            const upTime = this._pointerUpTimestamp[evt.button];
+            if (upTime > 0 && evt.source?.timeStamp !== undefined) {
+                const diff = (evt.source.timeStamp - upTime);
+                // on android touch up and mouse up have the exact same value
+                // but on iOS they are not the same but a few milliseconds apart
+                if (diff < 60 && diff >= 0) {
+                    // we received an UP event for a touch, ignore this DOWN event
+                    if (debug) console.log("Ignoring mouse.down for touch.up");
+                    return;
+                }
+            }
+        }
+
+        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;
+
+        while (evt.button >= this._pointerPositionDown.length) this._pointerPositionDown.push(new Vector2());
+        this._pointerPositionDown[evt.button].set(evt.clientX, evt.clientY);
+        while (evt.button >= this._pointerPositions.length) this._pointerPositions.push(new Vector2());
+        this._pointerPositions[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);
+
+        this.onDispatchEvent(evt);
+    }
+    // moveEvent?: Event;
+    private onMove(evt: NEPointerEvent) {
+        const index = evt.button;
+        
+        const isDown = this.getPointerPressed(index);
+        if (isDown === false && !this.isInRect(evt)) return;
+        if (evt.pointerType === PointerType.Touch && !isDown) return;
+        if (debug) console.log(evt.pointerType, "MOVE", index);
+        
+        this.updatePointerPosition(evt);
+        this.setPointerStateT(index, this._pointerEvent, evt.source);
+        this.onDispatchEvent(evt);
+    }
+    private onUp(evt: NEPointerEvent) {
+        if (this._pointerIds?.length >= evt.button)
+            this._pointerIds[evt.button] = -1;
+        const wasDown = this._pointerPressed[evt.button];
+        if (!wasDown) {
+            if (debug) console.log(evt.pointerType, "UP", evt.button, "was not down");
+            return;
+        }
+        if (debug) console.log(evt.pointerType, "UP", evt.button);
+        this.setPointerState(evt.button, this._pointerPressed, false);
+        this.setPointerStateT(evt.button, this._pointerEvent, evt.source);
+
+        // if (!this.isInRect(evt)) {
+        //     if (debug) showBalloonWarning("Pointer out of bounds: " + evt.clientX + ", " + evt.clientY);
+        //     return;
+        // }
+        this.setPointerState(evt.button, this._pointerUp, true);
+
+        while (evt.button >= this._pointerUsed.length) this._pointerUsed.push(false);
+        this.setPointerState(evt.button, this._pointerUsed, false);
+
+        this.updatePointerPosition(evt);
+
+        if (!this._pointerPositionDown[evt.button]) {
+            if (debug) showBalloonWarning("Received pointer up event without matching down event for button: " + 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;
+
+        this.onDispatchEvent(evt);
+    }
+
+    private updatePointerPosition(evt: NEPointerEvent) {
+        // console.log("MOVE");
+        while (evt.button >= this._pointerPositions.length) this._pointerPositions.push(new Vector2());
+        while (evt.button >= this._pointerPositionsLastFrame.length) this._pointerPositionsLastFrame.push(new Vector2());
+        while (evt.button >= this._pointerPositionsDelta.length) this._pointerPositionsDelta.push(new Vector2());
+
+        const lf = this._pointerPositionsLastFrame[evt.button];
+        lf.copy(this._pointerPositions[evt.button]);
+        // accumulate delta (it's reset in end of frame), if we just write it here it's not correct when the browser console is open
+        const delta = this._pointerPositionsDelta[evt.button];
+        let dx = evt.clientX - lf.x;
+        let dy = evt.clientY - lf.y;
+        // if pointer is locked, clientX and Y are not changed, but Movement is.
+        if(evt.source instanceof MouseEvent || evt.source instanceof TouchEvent) {
+            const source = evt.source as PointerEvent;
+            if(dx === 0 && source.movementX !== 0)
+                dx = source.movementX || 0;
+            if(dy === 0 && source.movementY !== 0)
+                dy = source.movementY || 0;
+        }
+        delta.x += dx;
+        delta.y += dy;
+
+        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;
+        const py = evt.clientY;
+        while (evt.button >= this._pointerPositionsRC.length) this._pointerPositionsRC.push(new Vector2());
+        const rc = this._pointerPositionsRC[evt.button];
+        rc.set(px, py);
+        this.convertScreenspaceToRaycastSpace(rc);
+        // console.log(this.context.alias, rc);
+        // 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)
+    }
+
+    /** get the next free id */
+    private getPointerIndex(pointerId: number) {
+        const ids = this._pointerIds;
+        // test if theres a pointer with the id
+        let firstFreeIndex = -1;
+        for (let i = 0; i < ids.length; i++) {
+            if (ids[i] === pointerId) return i;
+            else if (firstFreeIndex === -1 && ids[i] === -1)
+                firstFreeIndex = i;
+        }
+        // if not take the free slot if any
+        if (firstFreeIndex !== -1) {
+            ids[firstFreeIndex] = pointerId;
+            return firstFreeIndex;
+        }
+        ids.push(pointerId);
+        return ids.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;
+    }
+
+    private onDispatchEvent(evt: NEPointerEvent | KeyboardEvent) {
+        const prevContext = Context.Current;
+        try {
+            Context.Current = this.context;
+            this.dispatchEvent(evt);
+        }
+        finally {
+            Context.Current = prevContext;
+        }
+    }
+}
+
+export declare type KeyCode =
+    | "Tab"
+    | "Enter"
+    | "ShiftLeft"
+    | "ShiftRight"
+    | "ControlLeft"
+    | "ControlRight"
+    | "AltLeft"
+    | "AltRight"
+    | "Pause"
+    | "CapsLock"
+    | "Escape"
+    | "Space"
+    | "PageUp"
+    | "PageDown"
+    | "End"
+    | "Home"
+    | "ArrowLeft"
+    | "ArrowUp"
+    | "ArrowRight"
+    | "ArrowDown"
+    | "Insert"
+    | "Delete"
+    | "Digit0"
+    | "Digit1"
+    | "Digit2"
+    | "Digit3"
+    | "Digit4"
+    | "Digit5"
+    | "Digit6"
+    | "Digit7"
+    | "Digit8"
+    | "Digit9"
+    | "KeyA"
+    | "KeyB"
+    | "KeyC"
+    | "KeyD"
+    | "KeyE"
+    | "KeyF"
+    | "KeyG"
+    | "KeyH"
+    | "KeyI"
+    | "KeyJ"
+    | "KeyK"
+    | "KeyL"
+    | "KeyM"
+    | "KeyN"
+    | "KeyO"
+    | "KeyP"
+    | "KeyQ"
+    | "KeyR"
+    | "KeyS"
+    | "KeyT"
+    | "KeyU"
+    | "KeyV"
+    | "KeyW"
+    | "KeyX"
+    | "KeyY"
+    | "KeyZ"
+    | "Select"
+    | "Numpad0"
+    | "Numpad1"
+    | "Numpad2"
+    | "Numpad3"
+    | "Numpad4"
+    | "Numpad5"
+    | "Numpad6"
+    | "Numpad7"
+    | "Numpad8"
+    | "Numpad9"
+    | "Multiply"
+    | "Add"
+    | "Subtract"
+    | "Decimal"
+    | "Divide"
+    | "F1"
+    | "F2"
+    | "F3"
+    | "F4"
+    | "F5"
+    | "F6"
+    | "F7"
+    | "F8"
+    | "F9"
+    | "F10"
+    | "F11"
+    | "F12";
+
+    // 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 = "d",
+    // 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