@pmndrs/viverse 0.2.0 → 0.2.2

package/dist/action/action.d.ts

@@ -0,0 +1,40 @@
+export type WriteonlyEventAction<T = void> = {
+    emit(value: T): void;
+};
+export declare class EventAction<T = unknown> implements WriteonlyEventAction<T> {
+    private readonly combine?;
+    private readonly neutral?;
+    private latestTime;
+    private readonly subscriptionListeners;
+    private readonly readers;
+    constructor(combine?: ((...values: Array<T>) => T) | undefined, neutral?: T | undefined);
+    emit(value: T): void;
+    subscribe(callback: (value: T) => void, options?: {
+        once?: true;
+        signal?: AbortSignal;
+    }): void;
+    waitFor(signal?: AbortSignal): Promise<T>;
+    getLatestTime(): number;
+    createReader(abortSignal: AbortSignal): {
+        update(): void;
+        get(): T;
+    };
+    mapFrom<S>(fn: (value: S) => T, abortSignal?: AbortSignal): EventAction<S>;
+    filterFrom(fn: (value: T) => boolean, abortSignal?: AbortSignal): EventAction<T>;
+}
+export type StateActionWriter<T> = {
+    write(value: T): void;
+};
+/**
+ * StateAction keeps the latest state per writer and merges them on read.
+ * Values persist until the writer is disposed (abortSignal aborts).
+ */
+export declare class StateAction<T = unknown> {
+    private readonly mergeWriters?;
+    private readonly neutral?;
+    private readonly absoluteActions;
+    constructor(mergeWriters?: ((...values: Array<T>) => T) | undefined, neutral?: T | undefined);
+    createWriter(abortSignal: AbortSignal): StateActionWriter<T>;
+    get(): T;
+    mapFrom<S>(fn: (value: S) => T): StateAction<S>;
+}

package/dist/action/action.js

@@ -0,0 +1,114 @@
+export class EventAction {
+    combine;
+    neutral;
+    latestTime = -Infinity;
+    subscriptionListeners = new Set();
+    readers = new Set();
+    constructor(combine, neutral) {
+        this.combine = combine;
+        this.neutral = neutral;
+    }
+    emit(value) {
+        this.latestTime = performance.now() / 1000;
+        for (const listener of this.subscriptionListeners) {
+            listener(value);
+        }
+        for (const reader of this.readers) {
+            reader.next.push(value);
+        }
+    }
+    subscribe(callback, options) {
+        const listener = (value) => {
+            if (options?.once === true) {
+                this.subscriptionListeners.delete(listener);
+            }
+            callback(value);
+        };
+        this.subscriptionListeners.add(listener);
+        if (options?.signal != null) {
+            options.signal.addEventListener('abort', () => this.subscriptionListeners.delete(listener), { once: true });
+        }
+    }
+    waitFor(signal) {
+        return new Promise((resolve) => this.subscribe(resolve, { once: true, signal }));
+    }
+    getLatestTime() {
+        return this.latestTime;
+    }
+    createReader(abortSignal) {
+        const reader = { next: new Array(), current: new Array() };
+        this.readers.add(reader);
+        abortSignal.addEventListener('abort', () => {
+            this.readers.delete(reader);
+        }, { once: true });
+        return {
+            update: () => {
+                reader.current.length = 0;
+                if (reader.next.length) {
+                    reader.current.push(...reader.next);
+                    reader.next.length = 0;
+                }
+            },
+            get: () => {
+                if (this.combine == null) {
+                    throw new Error(`unable to use a reader without providing a combine function`);
+                }
+                if (reader.current.length === 0) {
+                    return this.neutral;
+                }
+                return this.combine(...reader.current);
+            },
+        };
+    }
+    mapFrom(fn, abortSignal) {
+        const action = new EventAction();
+        action.subscribe((value) => this.emit(fn(value)), { signal: abortSignal });
+        return action;
+    }
+    filterFrom(fn, abortSignal) {
+        const action = new EventAction();
+        action.subscribe((value) => void (fn(value) && this.emit(value)), { signal: abortSignal });
+        return action;
+    }
+}
+/**
+ * StateAction keeps the latest state per writer and merges them on read.
+ * Values persist until the writer is disposed (abortSignal aborts).
+ */
+export class StateAction {
+    mergeWriters;
+    neutral;
+    absoluteActions = new Map();
+    constructor(mergeWriters, neutral) {
+        this.mergeWriters = mergeWriters;
+        this.neutral = neutral;
+    }
+    createWriter(abortSignal) {
+        const emitterUuid = globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2);
+        abortSignal.addEventListener('abort', () => this.absoluteActions.delete(emitterUuid), { once: true });
+        return {
+            write: (value) => {
+                if (!abortSignal.aborted) {
+                    this.absoluteActions.set(emitterUuid, value);
+                }
+            },
+        };
+    }
+    get() {
+        if (this.mergeWriters == null) {
+            throw new Error(`unable to read from a state action without providing a merge function`);
+        }
+        const values = [...this.absoluteActions.values()];
+        return values.length ? this.mergeWriters(...values) : this.neutral;
+    }
+    mapFrom(fn) {
+        const action = new StateAction();
+        action.createWriter = (abortSignal) => {
+            const writer = this.createWriter(abortSignal);
+            return {
+                write: (value) => writer.write(fn(value)),
+            };
+        };
+        return action;
+    }
+}

package/dist/action/index.d.ts

@@ -0,0 +1,18 @@
+import { EventAction, StateAction } from './action.js';
+export declare function BooleanOr(...values: Array<boolean>): boolean;
+export declare const MoveForwardAction: StateAction<number>;
+export declare const MoveBackwardAction: StateAction<number>;
+export declare const MoveLeftAction: StateAction<number>;
+export declare const MoveRightAction: StateAction<number>;
+export declare const RunAction: StateAction<boolean>;
+export declare const JumpAction: EventAction<unknown>;
+export declare const ZoomAction: EventAction<number>;
+export declare const RotateYawAction: EventAction<number>;
+export declare const RotatePitchAction: EventAction<number>;
+export * from './pointer-lock.js';
+export * from './pointer-capture.js';
+export * from './pointer.js';
+export * from './keyboard.js';
+export * from './screen-joystick.js';
+export * from './screen-jump-button.js';
+export * from './action.js';

package/dist/action/index.js

@@ -0,0 +1,25 @@
+import { EventAction, StateAction } from './action.js';
+export function BooleanOr(...values) {
+    let value = false;
+    for (let i = 0; i < values.length; i++) {
+        value ||= values[i];
+    }
+    return value;
+}
+const sum = (...values) => values.reduce((a, b) => a + b, 0);
+export const MoveForwardAction = new StateAction(Math.max, 0);
+export const MoveBackwardAction = new StateAction(Math.max, 0);
+export const MoveLeftAction = new StateAction(Math.max, 0);
+export const MoveRightAction = new StateAction(Math.max, 0);
+export const RunAction = new StateAction(BooleanOr, false);
+export const JumpAction = new EventAction();
+export const ZoomAction = new EventAction(sum, 0);
+export const RotateYawAction = new EventAction(sum, 0);
+export const RotatePitchAction = new EventAction(sum, 0);
+export * from './pointer-lock.js';
+export * from './pointer-capture.js';
+export * from './pointer.js';
+export * from './keyboard.js';
+export * from './screen-joystick.js';
+export * from './screen-jump-button.js';
+export * from './action.js';

package/dist/action/keyboard.d.ts

@@ -0,0 +1,26 @@
+import { StateAction, WriteonlyEventAction } from './index.js';
+export declare class KeyboardActionBinding {
+    private pressedKeys;
+    private writer?;
+    private _keys;
+    get keys(): Array<string>;
+    set keys(keys: Array<string>);
+    requiresPointerLock?: boolean;
+    private updateState;
+    constructor(action: WriteonlyEventAction<KeyboardEvent> | StateAction<boolean>, domElement: HTMLElement, abortSignal: AbortSignal);
+}
+export declare const DefaultMoveForwardKeys: string[];
+export declare const DefaultMoveBackwardKeys: string[];
+export declare const DefaultMoveLeftKeys: string[];
+export declare const DefaultMoveRightKeys: string[];
+export declare const DefaultRunKeys: string[];
+export declare const DefaultJumpKeys: string[];
+export declare class KeyboardLocomotionActionBindings {
+    moveForwardBinding: KeyboardActionBinding;
+    moveLeftBinding: KeyboardActionBinding;
+    moveRightBinding: KeyboardActionBinding;
+    moveBackwardBinding: KeyboardActionBinding;
+    jumpBinding: KeyboardActionBinding;
+    runBinding: KeyboardActionBinding;
+    constructor(domElement: HTMLElement, abortSignal: AbortSignal);
+}

package/dist/action/keyboard.js

@@ -0,0 +1,89 @@
+import { JumpAction, MoveBackwardAction, MoveForwardAction, MoveLeftAction, MoveRightAction, StateAction, RunAction, } from './index.js';
+export class KeyboardActionBinding {
+    pressedKeys = new Set();
+    writer;
+    //options
+    _keys = [];
+    get keys() {
+        return this._keys;
+    }
+    set keys(keys) {
+        this._keys = keys;
+        this.updateState();
+    }
+    requiresPointerLock;
+    updateState() {
+        this.writer?.write(this.keys.some((key) => this.pressedKeys.has(key)));
+    }
+    constructor(action, domElement, abortSignal) {
+        if (action instanceof StateAction) {
+            this.writer = action.createWriter(abortSignal);
+            domElement.tabIndex = 0;
+            domElement.addEventListener('keydown', (e) => {
+                if ((this.requiresPointerLock ?? false) && document.pointerLockElement != domElement) {
+                    return;
+                }
+                this.pressedKeys.add(e.code);
+                this.updateState();
+            }, { signal: abortSignal });
+            domElement.addEventListener('keyup', (e) => {
+                console.log('up');
+                this.pressedKeys.delete(e.code);
+                this.updateState();
+            }, { signal: abortSignal });
+            // Handle focus loss to clear pressed keys
+            const onBlur = () => {
+                console.log('blur');
+                this.pressedKeys.clear();
+                this.updateState();
+            };
+            domElement.addEventListener('blur', onBlur, { signal: abortSignal });
+            domElement.addEventListener('visibilitychange', () => {
+                if (document.visibilityState !== 'visible') {
+                    onBlur();
+                }
+            }, { signal: abortSignal });
+            window.addEventListener('blur', onBlur, { signal: abortSignal });
+            document.addEventListener('pointerlockchange', () => {
+                if (document.pointerLockElement !== domElement) {
+                    onBlur();
+                }
+            });
+            return;
+        }
+        domElement.addEventListener('keydown', (e) => {
+            if (!this.keys.includes(e.code) || e.repeat) {
+                return;
+            }
+            action.emit(e);
+        }, { signal: abortSignal });
+    }
+}
+export const DefaultMoveForwardKeys = ['KeyW'];
+export const DefaultMoveBackwardKeys = ['KeyS'];
+export const DefaultMoveLeftKeys = ['KeyA'];
+export const DefaultMoveRightKeys = ['KeyD'];
+export const DefaultRunKeys = ['ShiftRight', 'ShiftLeft'];
+export const DefaultJumpKeys = ['Space'];
+export class KeyboardLocomotionActionBindings {
+    moveForwardBinding;
+    moveLeftBinding;
+    moveRightBinding;
+    moveBackwardBinding;
+    jumpBinding;
+    runBinding;
+    constructor(domElement, abortSignal) {
+        this.moveForwardBinding = new KeyboardActionBinding(MoveForwardAction.mapFrom((isPressed) => (isPressed ? 1 : 0)), domElement, abortSignal);
+        this.moveForwardBinding.keys = DefaultMoveForwardKeys;
+        this.moveLeftBinding = new KeyboardActionBinding(MoveLeftAction.mapFrom((isPressed) => (isPressed ? 1 : 0)), domElement, abortSignal);
+        this.moveLeftBinding.keys = DefaultMoveLeftKeys;
+        this.moveRightBinding = new KeyboardActionBinding(MoveRightAction.mapFrom((isPressed) => (isPressed ? 1 : 0)), domElement, abortSignal);
+        this.moveRightBinding.keys = DefaultMoveRightKeys;
+        this.moveBackwardBinding = new KeyboardActionBinding(MoveBackwardAction.mapFrom((isPressed) => (isPressed ? 1 : 0)), domElement, abortSignal);
+        this.moveBackwardBinding.keys = DefaultMoveBackwardKeys;
+        this.jumpBinding = new KeyboardActionBinding(JumpAction, domElement, abortSignal);
+        this.jumpBinding.keys = DefaultJumpKeys;
+        this.runBinding = new KeyboardActionBinding(RunAction, domElement, abortSignal);
+        this.runBinding.keys = DefaultRunKeys;
+    }
+}

package/dist/action/pointer-capture.d.ts

@@ -0,0 +1,8 @@
+export declare class PointerCaptureRotateZoomActionBindings {
+    private readonly domElement;
+    private activePointers;
+    private lastPinchDist;
+    rotationSpeed?: number;
+    zoomSpeed?: number;
+    constructor(domElement: HTMLElement, abortSignal: AbortSignal);
+}

package/dist/{input → action}/pointer-capture.js

@@ -1,16 +1,11 @@
-import { DeltaPitchField, DeltaYawField, DeltaZoomField } from './index.js';
-/**
- * @requires to manually execute `domElement.setPointerCapture(pointerId)` on pointerdown
- */
-export class PointerCaptureInput {
+import { RotatePitchAction, RotateYawAction, ZoomAction } from './index.js';
+export class PointerCaptureRotateZoomActionBindings {
     domElement;
-    abortController = new AbortController();
-    deltaZoom = 0;
-    deltaYaw = 0;
-    deltaPitch = 0;
     activePointers = new Map();
     lastPinchDist = null;
-    constructor(domElement) {
+    rotationSpeed; // default 0.4
+    zoomSpeed; // default 0.0001
+    constructor(domElement, abortSignal) {
         this.domElement = domElement;
         domElement.addEventListener('pointerdown', (event) => {
             this.domElement.setPointerCapture(event.pointerId);
@@ -20,7 +15,7 @@ export class PointerCaptureInput {
                 this.lastPinchDist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
             }
         }, {
-            signal: this.abortController.signal,
+            signal: abortSignal,
         });
         domElement.addEventListener('pointermove', (event) => {
             if (!this.domElement.hasPointerCapture(event.pointerId)) {
@@ -31,16 +26,18 @@ export class PointerCaptureInput {
                 const pts = Array.from(this.activePointers.values());
                 if (this.lastPinchDist != null) {
                     const d = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
-                    this.deltaZoom += this.lastPinchDist - d;
+                    const zoomSpeed = this.zoomSpeed ?? 0.0001;
+                    ZoomAction.emit((this.lastPinchDist - d) * zoomSpeed);
                     this.lastPinchDist = d;
                 }
                 event.preventDefault();
                 return;
             }
-            this.deltaYaw -= event.movementX / window.innerHeight;
-            this.deltaPitch -= event.movementY / window.innerHeight;
+            const rotationSpeed = this.rotationSpeed ?? 0.4;
+            RotateYawAction.emit(-(event.movementX / window.innerHeight) * rotationSpeed);
+            RotatePitchAction.emit(-(event.movementY / window.innerHeight) * rotationSpeed);
         }, {
-            signal: this.abortController.signal,
+            signal: abortSignal,
         });
         domElement.addEventListener('pointerup', (event) => {
             this.domElement.releasePointerCapture(event.pointerId);
@@ -49,7 +46,7 @@ export class PointerCaptureInput {
                 this.lastPinchDist = null;
             }
         }, {
-            signal: this.abortController.signal,
+            signal: abortSignal,
         });
         domElement.addEventListener('pointercancel', (event) => {
             this.domElement.releasePointerCapture(event.pointerId);
@@ -58,36 +55,14 @@ export class PointerCaptureInput {
                 this.lastPinchDist = null;
             }
         }, {
-            signal: this.abortController.signal,
+            signal: abortSignal,
         });
         domElement.addEventListener('wheel', (event) => {
             event.preventDefault();
-            this.deltaZoom += event.deltaY;
+            const zoomSpeed = this.zoomSpeed ?? 0.0001;
+            ZoomAction.emit(event.deltaY * zoomSpeed);
         }, {
-            signal: this.abortController.signal,
+            signal: abortSignal,
         });
     }
-    get(field, options) {
-        const rotationSpeed = options.pointerCaptureRotationSpeed ?? 0.4;
-        const zoomSpeed = options.pointerCaptureZoomSpeed ?? 0.0001;
-        let result;
-        switch (field) {
-            case DeltaPitchField:
-                result = (this.deltaPitch * rotationSpeed);
-                this.deltaPitch = 0;
-                break;
-            case DeltaYawField:
-                result = (this.deltaYaw * rotationSpeed);
-                this.deltaYaw = 0;
-                break;
-            case DeltaZoomField:
-                result = (this.deltaZoom * zoomSpeed);
-                this.deltaZoom = 0;
-                break;
-        }
-        return result;
-    }
-    dispose() {
-        this.abortController.abort();
-    }
 }

package/dist/action/pointer-lock.d.ts

@@ -0,0 +1,6 @@
+export declare class PointerLockRotateZoomActionBindings {
+    rotationSpeed?: number;
+    zoomSpeed?: number;
+    lockOnClick?: boolean;
+    constructor(domElement: HTMLElement, abortSignal: AbortSignal);
+}

package/dist/action/pointer-lock.js

@@ -0,0 +1,49 @@
+import { RotatePitchAction, RotateYawAction, ZoomAction } from './index.js';
+export class PointerLockRotateZoomActionBindings {
+    rotationSpeed; // default 0.4
+    zoomSpeed; // default 0.0001
+    lockOnClick;
+    constructor(domElement, abortSignal) {
+        // lock on click (only left click)
+        domElement.addEventListener('mousedown', (event) => {
+            const lockOnClick = this.lockOnClick ?? true;
+            if (!lockOnClick) {
+                return;
+            }
+            // 0 = primary/left button
+            if (event.button !== 0) {
+                return;
+            }
+            if (document.pointerLockElement === domElement) {
+                return;
+            }
+            // request pointer lock as a user-gesture
+            if (domElement.requestPointerLock) {
+                domElement.requestPointerLock();
+            }
+        }, {
+            signal: abortSignal,
+        });
+        domElement.addEventListener('pointermove', (event) => {
+            if (document.pointerLockElement != domElement) {
+                return;
+            }
+            const rect = domElement.getBoundingClientRect();
+            const rotationSpeed = this.rotationSpeed ?? 0.4;
+            RotateYawAction.emit(-(event.movementX / rect.height) * rotationSpeed);
+            RotatePitchAction.emit(-(event.movementY / rect.height) * rotationSpeed);
+        }, {
+            signal: abortSignal,
+        });
+        domElement.addEventListener('wheel', (event) => {
+            if (document.pointerLockElement != domElement) {
+                return;
+            }
+            const zoomSpeed = this.zoomSpeed ?? 0.0001;
+            ZoomAction.emit(event.deltaY * zoomSpeed);
+            event.preventDefault();
+        }, {
+            signal: abortSignal,
+        });
+    }
+}

package/dist/action/pointer.d.ts

@@ -0,0 +1,18 @@
+import { StateAction, WriteonlyEventAction } from './index.js';
+export declare class PointerButtonActionBinding {
+    private readonly domElement;
+    private writer?;
+    private eventAction?;
+    private buttonsMask;
+    private wasPressed;
+    private _buttons;
+    /**
+     * When undefined, any pressed button will set the state to true.
+     */
+    get buttons(): Array<number> | undefined;
+    set buttons(buttons: Array<number> | undefined);
+    requiresPointerLock?: boolean;
+    private getPressedButtonsFromMask;
+    private processPointer;
+    constructor(action: WriteonlyEventAction<PointerEvent> | StateAction<boolean>, domElement: HTMLElement, abortSignal: AbortSignal);
+}

package/dist/action/pointer.js

@@ -0,0 +1,90 @@
+import { StateAction } from './index.js';
+export class PointerButtonActionBinding {
+    domElement;
+    writer;
+    eventAction;
+    buttonsMask = 0;
+    wasPressed = false;
+    // options
+    _buttons;
+    /**
+     * When undefined, any pressed button will set the state to true.
+     */
+    get buttons() {
+        return this._buttons;
+    }
+    set buttons(buttons) {
+        this._buttons = buttons;
+        this.processPointer();
+    }
+    requiresPointerLock;
+    getPressedButtonsFromMask(mask) {
+        const pressed = [];
+        if (mask & 1)
+            pressed.push(0);
+        if (mask & 2)
+            pressed.push(2);
+        if (mask & 4)
+            pressed.push(1);
+        if (mask & 8)
+            pressed.push(3);
+        if (mask & 16)
+            pressed.push(4);
+        return pressed;
+    }
+    processPointer(e) {
+        if (e != null) {
+            this.buttonsMask = e.buttons;
+        }
+        if ((this.requiresPointerLock ?? false) && document.pointerLockElement != this.domElement) {
+            this.buttonsMask = 0;
+        }
+        const pressedButtons = this.getPressedButtonsFromMask(this.buttonsMask);
+        const isActive = this.buttons == null ? pressedButtons.length > 0 : this.buttons.some((btn) => pressedButtons.includes(btn));
+        if (this.writer != null) {
+            this.writer.write(isActive);
+        }
+        if (this.eventAction != null && e != null) {
+            if (isActive && !this.wasPressed) {
+                this.eventAction.emit(e);
+            }
+        }
+        this.wasPressed = isActive;
+    }
+    constructor(action, domElement, abortSignal) {
+        this.domElement = domElement;
+        if (action instanceof StateAction) {
+            this.writer = action.createWriter(abortSignal);
+        }
+        else {
+            this.eventAction = action;
+        }
+        domElement.addEventListener('pointerdown', (e) => {
+            this.processPointer(e);
+        }, { signal: abortSignal });
+        domElement.addEventListener('pointermove', (e) => {
+            // Moving while multiple buttons are pressed is the only signal we get
+            // when a second button is pressed simultaneously.
+            this.processPointer(e);
+        }, { signal: abortSignal });
+        domElement.addEventListener('pointerup', (e) => {
+            this.processPointer(e);
+        }, { signal: abortSignal });
+        domElement.addEventListener('pointercancel', (e) => {
+            this.processPointer(e);
+        }, { signal: abortSignal });
+        domElement.addEventListener('pointerleave', (e) => {
+            this.processPointer(e);
+        }, { signal: abortSignal });
+        domElement.addEventListener('blur', () => {
+            // On blur, assume no buttons pressed.
+            this.buttonsMask = 0;
+            this.processPointer();
+        }, { signal: abortSignal });
+        document.addEventListener('pointerlockchange', () => {
+            if (document.pointerLockElement !== domElement) {
+                this.processPointer();
+            }
+        });
+    }
+}

package/dist/action/screen-joystick.d.ts

@@ -0,0 +1,16 @@
+export declare class ScreenJoystickLocomotionActionBindings {
+    private abortSignal;
+    readonly root: HTMLDivElement;
+    private readonly handle;
+    private pointerId;
+    private readonly forwardWriter;
+    private readonly backwardWriter;
+    private readonly leftWriter;
+    private readonly rightWriter;
+    private readonly runWriter;
+    runDistancePx?: number;
+    deadZonePx?: number;
+    constructor(domElement: HTMLElement, abortSignal: AbortSignal);
+    private updateHandle;
+    private resetHandle;
+}