@pmndrs/viverse 0.2.1 → 0.2.3

package/dist/{input → action}/action.d.ts

@@ -1,6 +1,13 @@
-export declare class EventAction<T = void> {
+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;
@@ -8,6 +15,12 @@ export declare class EventAction<T = void> {
     }): 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;
@@ -16,26 +29,12 @@ export type StateActionWriter<T> = {
  * 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> {
-    private readonly mergeWriters;
-    private readonly neutral;
+export declare class StateAction<T = unknown> {
+    private readonly mergeWriters?;
+    private readonly neutral?;
     private readonly absoluteActions;
-    constructor(mergeWriters: (...values: Array<T>) => T, neutral: T);
+    constructor(mergeWriters?: ((...values: Array<T>) => T) | undefined, neutral?: T | undefined);
     createWriter(abortSignal: AbortSignal): StateActionWriter<T>;
     get(): T;
-}
-/**
- * DeltaAction accumulates transient values each frame and clears them on frame advance.
- * Multiple writes per frame from any source are combined using combine().
- */
-export declare class DeltaAction<T> {
-    private readonly combine;
-    private readonly neutral;
-    constructor(combine: (...values: Array<T>) => T, neutral: T);
-    private readonly readers;
-    write(value: T): void;
-    createReader(abortSignal: AbortSignal): {
-        update(): void;
-        get(): T;
-    };
+    mapFrom<S>(fn: (value: S) => T): StateAction<S>;
 }

package/dist/{input → action}/action.js

@@ -1,12 +1,21 @@
-// no external imports
 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) => {
@@ -26,6 +35,41 @@ export class EventAction {
     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.
@@ -51,47 +95,20 @@ export class StateAction {
         };
     }
     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;
     }
-}
-/**
- * DeltaAction accumulates transient values each frame and clears them on frame advance.
- * Multiple writes per frame from any source are combined using combine().
- */
-export class DeltaAction {
-    combine;
-    neutral;
-    constructor(combine, neutral) {
-        this.combine = combine;
-        this.neutral = neutral;
-    }
-    readers = new Set();
-    write(value) {
-        for (const reader of this.readers) {
-            reader.next.push(value);
-        }
-    }
-    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 (reader.current.length === 0) {
-                    return this.neutral;
-                }
-                return this.combine(...reader.current);
-            },
+    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/{input → action}/index.d.ts

@@ -1,16 +1,17 @@
-import { EventAction, StateAction, DeltaAction } from './action.js';
+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<void>;
-export declare const ZoomAction: DeltaAction<number>;
-export declare const RotateYawAction: DeltaAction<number>;
-export declare const RotatePitchAction: DeltaAction<number>;
+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';

package/dist/{input → action}/index.js

@@ -1,4 +1,4 @@
-import { EventAction, StateAction, DeltaAction } from './action.js';
+import { EventAction, StateAction } from './action.js';
 export function BooleanOr(...values) {
     let value = false;
     for (let i = 0; i < values.length; i++) {
@@ -13,11 +13,12 @@ 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 DeltaAction(sum, 0);
-export const RotateYawAction = new DeltaAction(sum, 0);
-export const RotatePitchAction = new DeltaAction(sum, 0);
+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';

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,14 +1,11 @@
 import { RotatePitchAction, RotateYawAction, ZoomAction } from './index.js';
-/**
- * @requires to manually execute `domElement.setPointerCapture(pointerId)` on pointerdown
- */
-export class PointerCaptureInput {
+export class PointerCaptureRotateZoomActionBindings {
     domElement;
-    abortController = new AbortController();
     activePointers = new Map();
     lastPinchDist = null;
-    options = {};
-    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);
@@ -18,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)) {
@@ -29,18 +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);
-                    const zoomSpeed = this.options.zoomSpeed ?? 0.0001;
-                    ZoomAction.write((this.lastPinchDist - d) * zoomSpeed);
+                    const zoomSpeed = this.zoomSpeed ?? 0.0001;
+                    ZoomAction.emit((this.lastPinchDist - d) * zoomSpeed);
                     this.lastPinchDist = d;
                 }
                 event.preventDefault();
                 return;
             }
-            const rotationSpeed = this.options.rotationSpeed ?? 0.4;
-            RotateYawAction.write(-(event.movementX / window.innerHeight) * rotationSpeed);
-            RotatePitchAction.write(-(event.movementY / window.innerHeight) * rotationSpeed);
+            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,17 +55,14 @@ export class PointerCaptureInput {
                 this.lastPinchDist = null;
             }
         }, {
-            signal: this.abortController.signal,
+            signal: abortSignal,
         });
         domElement.addEventListener('wheel', (event) => {
             event.preventDefault();
-            const zoomSpeed = this.options.zoomSpeed ?? 0.0001;
-            ZoomAction.write(event.deltaY * zoomSpeed);
+            const zoomSpeed = this.zoomSpeed ?? 0.0001;
+            ZoomAction.emit(event.deltaY * zoomSpeed);
         }, {
-            signal: this.abortController.signal,
+            signal: abortSignal,
         });
     }
-    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;
+}