@gg-web-engine/core 0.0.39 → 0.0.48

package/dist/base/clock/pausable-clock.js

@@ -1,35 +1,15 @@
-import { Subject } from 'rxjs';
+import { filter, Subject } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { GgGlobalClock } from './global-clock';
 /**
  * A class providing the ability to track time, fire ticks, provide time elapsed, and tick delta with the ability to suspend/resume it.
  */
 export class PausableClock {
-    /**
-     * Constructs a new PausableClock instance.
-     * @param autoStart Indicates whether the clock should start automatically upon creation.
-     * @param parentClock The parent clock to synchronize with. Defaults to GgGlobalClock instance.
-     */
-    constructor(autoStart = false, parentClock = GgGlobalClock.instance) {
-        this.parentClock = parentClock;
-        this.tickSub = null;
-        this._tick$ = new Subject();
-        // State variables
-        this.startedAt = -1;
-        this.oldRelativeTime = 0; // "elapsed", emitted on last tick
-        this.pausedAt = -1;
-        this.lastStopElapsed = 0;
-        this._timeScale = 1;
-        this.pausedByTimescale = false;
-        if (autoStart) {
-            this.start();
-        }
-    }
     /**
      * Observable stream of ticks, emitting an array containing the current time and the tick delta.
      */
     get tick$() {
-        return this._tick$.pipe(map(([oldTime, newTime]) => [newTime, newTime - oldTime]));
+        return this._tick$.asObservable();
     }
     /**
      * Checks if the clock is currently running.
@@ -90,6 +70,39 @@ export class PausableClock {
         }
         return this._timeScale * (this.parentClock.elapsedTime - this.startedAt);
     }
+    /**
+     * Constructs a new PausableClock instance.
+     * @param autoStart Indicates whether the clock should start automatically upon creation.
+     * @param parentClock The parent clock to synchronize with. Defaults to GgGlobalClock instance.
+     */
+    constructor(autoStart = false, parentClock = GgGlobalClock.instance) {
+        this.parentClock = parentClock;
+        this.tickSub = null;
+        this._internalTick$ = new Subject();
+        this._tick$ = new Subject();
+        /**
+         * Tick rate limiter. If set to 0 - tick rate is unlimited, 15 means "allow at most 15 ticks per second"
+         */
+        this.tickRateLimit = 0;
+        // events
+        this.paused$ = new Subject();
+        // State variables
+        this.startedAt = -1;
+        this.oldRelativeTime = 0; // "elapsed", emitted on last tick
+        this.pausedAt = -1;
+        this.lastStopElapsed = 0;
+        this._timeScale = 1;
+        this.pausedByTimescale = false;
+        this.lastFiredTickElapsed = 0;
+        if (autoStart) {
+            this.start();
+        }
+        this._internalTick$
+            .pipe(map(([_, newTime]) => [newTime, newTime - this.lastFiredTickElapsed]), filter(([elapsed]) => !this.tickRateLimit ||
+            Math.floor((this.lastFiredTickElapsed * this.tickRateLimit) / 1000) <
+                Math.floor((elapsed * this.tickRateLimit) / 1000)), tap(([elapsed]) => (this.lastFiredTickElapsed = elapsed)))
+            .subscribe(this._tick$);
+    }
     /**
      * Creates a child clock.
      * @param autoStart Indicates whether the child clock should start automatically.
@@ -124,6 +137,7 @@ export class PausableClock {
         this.stopListeningTicks();
         this.pausedAt = this.parentClock.elapsedTime;
         this.pausedByTimescale = false;
+        this.paused$.next(true);
     }
     /**
      * Resumes the clock.
@@ -135,6 +149,7 @@ export class PausableClock {
         this.startedAt += this.parentClock.elapsedTime - this.pausedAt;
         this.pausedAt = -1;
         this.startListeningTicks();
+        this.paused$.next(false);
     }
     /**
      * Starts listening for ticks from the parent clock.
@@ -145,7 +160,7 @@ export class PausableClock {
         }
         this.tickSub = this.parentClock.tick$
             .pipe(map(([_, d]) => [this.oldRelativeTime, this.oldRelativeTime + d * this.timeScale]), tap(([_, cur]) => (this.oldRelativeTime = cur)))
-            .subscribe(this._tick$);
+            .subscribe(this._internalTick$);
     }
     /**
      * Stops listening for ticks from the parent clock.

package/dist/base/components/rendering/i-renderer.component.d.ts

@@ -13,7 +13,7 @@ import { IVisualSceneComponent } from './i-visual-scene.component';
  * @property {number} [forceResolution] - Specifies the pixel resolution. Not set by default, which means "use device resolution".
  * @property {boolean} antialias - Specifies whether antialiasing is turned on/off. true by default.
  */
-export declare type RendererOptions = {
+export type RendererOptions = {
     transparent: boolean;
     background: number;
     size: Point2 | 'fullscreen' | ((pageSize: Point2) => Point2) | Observable<Point2>;
@@ -25,12 +25,12 @@ export declare abstract class IRendererComponent<D, R, VTypeDoc extends VisualTy
     readonly canvas?: HTMLCanvasElement | undefined;
     entity: IEntity | null;
     /** Specifies the options for the renderer. */
-    readonly rendererOptions: RendererOptions;
+    readonly rendererOptions: RendererOptions & Partial<VTypeDoc['rendererExtraOpts']>;
     /** get flag whether renderer shows physics debugger view */
     abstract get physicsDebugViewActive(): boolean;
     /** turns on/off physics debugger view for this renderer */
     abstract set physicsDebugViewActive(value: boolean);
-    protected constructor(scene: IVisualSceneComponent<D, R, VTypeDoc>, canvas?: HTMLCanvasElement | undefined, options?: Partial<RendererOptions>);
+    protected constructor(scene: IVisualSceneComponent<D, R, VTypeDoc>, canvas?: HTMLCanvasElement | undefined, options?: Partial<RendererOptions & VTypeDoc['rendererExtraOpts']>);
     /**
      * Renders the scene.
      */

package/dist/base/data-structures/graph.js

@@ -1,8 +1,4 @@
 export class Graph {
-    constructor(data) {
-        this.data = data;
-        this.adjacent = new Set();
-    }
     /**
      * Creates a new Graph instance from an array of elements, where each element in the array is a node in the graph.
      * The first element of the array is used as the root node of the graph.
@@ -47,6 +43,10 @@ export class Graph {
         }
         return nodes[0][0];
     }
+    constructor(data) {
+        this.data = data;
+        this.adjacent = new Set();
+    }
     addAdjacent(node) {
         if (this.adjacent.has(node)) {
             return false;

package/dist/base/entities/controllers/animation-mixer.d.ts

@@ -1,7 +1,7 @@
 import { IEntity } from '../i-entity';
 import { Observable, Subject } from 'rxjs';
 import { GgWorld, PhysicsTypeDocRepo, VisualTypeDocRepo } from '../../gg-world';
-export declare type AnimationFunction<T> = (elapsed: number, delta: number) => T;
+export type AnimationFunction<T> = (elapsed: number, delta: number) => T;
 /**
  * A class that performs property animations for a specific type `T` by using provided animation function.
  * Supports smooth transition between animation function by interpolating between values over time.

package/dist/base/entities/controllers/animation-mixer.js

@@ -8,33 +8,6 @@ import { map, tap } from 'rxjs/operators';
  * The animation function can be changed with `transitAnimationFunction` or `transitFromStaticState`.
  */
 export class AnimationMixer extends IEntity {
-    /**
-     * Creates a new `AnimationMixer` entity.
-     * @param _animationFunction The initial motion control function that determines the animation.
-     * @param _lerp The linear interpolation between two values of type `T`.
-     */
-    constructor(_animationFunction, _lerp = (a, b, t) => b) {
-        super();
-        this._animationFunction = _animationFunction;
-        this._lerp = _lerp;
-        this.tickOrder = TickOrder.ANIMATION_MIXERS;
-        /**
-         * A subject that emits the current value of the animation on every tick.
-         */
-        this._value$ = new Subject();
-        /**
-         * The current transition time reference `[elapsed, delta]` that interpolates between the old and new functions.
-         */
-        this._currentTransitionK = [0, 0];
-        /**
-         * The current transition subscription, which is null if no transition is currently active.
-         */
-        this._currentTransition = null;
-        /**
-         * A behavior subject that emits whether the animator is currently in a transition.
-         */
-        this._isInTransition$ = new BehaviorSubject(false);
-    }
     /**
      * Gets an observable of the current value of the animation.
      */
@@ -76,6 +49,33 @@ export class AnimationMixer extends IEntity {
         this._currentTransition = value;
         this._isInTransition$.next(!!value);
     }
+    /**
+     * Creates a new `AnimationMixer` entity.
+     * @param _animationFunction The initial motion control function that determines the animation.
+     * @param _lerp The linear interpolation between two values of type `T`.
+     */
+    constructor(_animationFunction, _lerp = (a, b, t) => b) {
+        super();
+        this._animationFunction = _animationFunction;
+        this._lerp = _lerp;
+        this.tickOrder = TickOrder.ANIMATION_MIXERS;
+        /**
+         * A subject that emits the current value of the animation on every tick.
+         */
+        this._value$ = new Subject();
+        /**
+         * The current transition time reference `[elapsed, delta]` that interpolates between the old and new functions.
+         */
+        this._currentTransitionK = [0, 0];
+        /**
+         * The current transition subscription, which is null if no transition is currently active.
+         */
+        this._currentTransition = null;
+        /**
+         * A behavior subject that emits whether the animator is currently in a transition.
+         */
+        this._isInTransition$ = new BehaviorSubject(false);
+    }
     /**
      * Set output to static value and smoothly transit to new control function
      * @param newFunc a new function

package/dist/base/entities/controllers/inline-controller.d.ts

@@ -1,3 +1,3 @@
 import { GgWorld } from '../../gg-world';
 import { Observable } from 'rxjs';
-export declare function createInlineTickController(world: GgWorld<any, any>, tickOrder?: number): Observable<[number, number]>;
+export declare function createInlineTickController(world: GgWorld<any, any>, tickOrder?: number, name?: string): Observable<[number, number]>;

package/dist/base/entities/controllers/inline-controller.js

@@ -6,8 +6,11 @@ class InlineTickController extends IEntity {
         this.tickOrder = tickOrder;
     }
 }
-export function createInlineTickController(world, tickOrder = TickOrder.CONTROLLERS) {
+export function createInlineTickController(world, tickOrder = TickOrder.CONTROLLERS, name) {
     const controller = new InlineTickController(tickOrder);
+    if (name) {
+        controller.name = name;
+    }
     world.addEntity(controller);
     return controller.tick$.pipe(finalize(() => {
         world.removeEntity(controller, true);

package/dist/base/entities/i-renderer.entity.js

@@ -6,21 +6,6 @@ import { distinctUntilChanged, map } from 'rxjs/operators';
  * @class
  */
 export class IRendererEntity extends IEntity {
-    /**
-     Initializes a new instance of the BaseGgRenderer class.
-     * @param renderer
-     */
-    constructor(renderer) {
-        super();
-        this.renderer = renderer;
-        this.tickOrder = TickOrder.RENDERING;
-        /** Represents the current size of the renderer. */
-        this._rendererSize$ = new BehaviorSubject(null);
-        this.addComponents(renderer);
-        this.tick$.subscribe(() => {
-            this.renderer.render();
-        });
-    }
     /**
      * Gets the observable that represents the current size of the renderer.
      * @returns {Observable<Point2 | null>} - An observable that represents the size of the renderer.
@@ -46,6 +31,21 @@ export class IRendererEntity extends IEntity {
     set physicsDebugViewActive(value) {
         this.renderer.physicsDebugViewActive = value;
     }
+    /**
+     Initializes a new instance of the BaseGgRenderer class.
+     * @param renderer
+     */
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        this.tickOrder = TickOrder.RENDERING;
+        /** Represents the current size of the renderer. */
+        this._rendererSize$ = new BehaviorSubject(null);
+        this.addComponents(renderer);
+        this.tick$.subscribe(() => {
+            this.renderer.render();
+        });
+    }
     onSpawned(world) {
         this._rendererSize$.next(null);
         if (this.rendererOptions.size == 'fullscreen' || typeof this.rendererOptions.size === 'function') {

package/dist/base/gg-world.d.ts

@@ -1,10 +1,12 @@
 import { IDisplayObjectComponent, IEntity, IPhysicsWorldComponent, IPositionable, IRenderableEntity, IRendererComponent, IRigidBodyComponent, ITriggerComponent, IVisualSceneComponent, KeyboardInput, PausableClock } from '../base';
-export declare type VisualTypeDocRepo<D, R> = {
+import { Subject } from 'rxjs';
+export type VisualTypeDocRepo<D, R> = {
     factory: unknown;
     displayObject: IDisplayObjectComponent<D, R>;
     renderer: IRendererComponent<D, R>;
+    rendererExtraOpts: {};
 };
-export declare type PhysicsTypeDocRepo<D, R> = {
+export type PhysicsTypeDocRepo<D, R> = {
     factory: unknown;
     rigidBody: IRigidBodyComponent<D, R>;
     trigger: ITriggerComponent<D, R>;
@@ -12,14 +14,18 @@ export declare type PhysicsTypeDocRepo<D, R> = {
 export declare abstract class GgWorld<D, R, VTypeDoc extends VisualTypeDocRepo<D, R> = VisualTypeDocRepo<D, R>, PTypeDoc extends PhysicsTypeDocRepo<D, R> = PhysicsTypeDocRepo<D, R>, VS extends IVisualSceneComponent<D, R, VTypeDoc> = IVisualSceneComponent<D, R, VTypeDoc>, PW extends IPhysicsWorldComponent<D, R, PTypeDoc> = IPhysicsWorldComponent<D, R, PTypeDoc>> {
     readonly visualScene: VS;
     readonly physicsWorld: PW;
+    private static default_name_counter;
+    private static _documentWorlds;
+    static get documentWorlds(): GgWorld<any, any>[];
     readonly worldClock: PausableClock;
     readonly keyboardInput: KeyboardInput;
-    private static default_name_counter;
     name: string;
     readonly children: IEntity[];
     protected readonly tickListeners: IEntity[];
-    private static _documentWorlds;
-    static get documentWorlds(): GgWorld<any, any>[];
+    readonly tickStarted$: Subject<void>;
+    readonly tickForwardTo$: Subject<IEntity | 'PHYSICS_WORLD'>;
+    readonly tickForwardedTo$: Subject<IEntity | 'PHYSICS_WORLD'>;
+    readonly paused$: Subject<boolean>;
     protected constructor(visualScene: VS, physicsWorld: PW);
     init(): Promise<void>;
     start(): void;

package/dist/base/gg-world.js

@@ -8,7 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { GgGlobalClock, IRendererEntity, KeyboardInput, TickOrder, } from '../base';
+import { lastValueFrom, Subject, take } from 'rxjs';
+import { PerformanceMeterEntity } from '../dev';
 export class GgWorld {
+    static get documentWorlds() {
+        return [...GgWorld._documentWorlds];
+    }
     constructor(visualScene, physicsWorld) {
         this.visualScene = visualScene;
         this.physicsWorld = physicsWorld;
@@ -18,17 +23,14 @@ export class GgWorld {
         this.children = [];
         // the same as children, but sorted by tick order
         this.tickListeners = [];
+        // events
+        this.tickStarted$ = new Subject();
+        this.tickForwardTo$ = new Subject();
+        this.tickForwardedTo$ = new Subject();
+        this.paused$ = new Subject();
         GgWorld._documentWorlds.push(this);
         this.keyboardInput.start();
         if (window.ggstatic) {
-            window.ggstatic.registerConsoleCommand(this, 'show_debugger', (...args) => __awaiter(this, void 0, void 0, function* () {
-                window.ggstatic.showDebugControls = ['1', 'true', '+'].includes(args[0]);
-                return '' + window.ggstatic.showDebugControls;
-            }), 'args: [0 or 1]; turn on/off debug panel. Default value is 0');
-            window.ggstatic.registerConsoleCommand(this, 'show_stats', (...args) => __awaiter(this, void 0, void 0, function* () {
-                window.ggstatic.showStats = ['1', 'true', '+'].includes(args[0]);
-                return '' + window.ggstatic.showStats;
-            }), 'args: [0 or 1]; turn on/off stats. Default value is 0');
             window.ggstatic.registerConsoleCommand(this, 'ph_timescale', (...args) => __awaiter(this, void 0, void 0, function* () {
                 this.worldClock.timeScale = +args[0];
                 return JSON.stringify(this.worldClock.timeScale);
@@ -56,32 +58,70 @@ export class GgWorld {
                 return 'false';
             }), 'args: [0 or 1] or [0 or 1, string]; turn on/off physics debug view. Second argument expects renderer ' +
                 'name, if not provided first renderer will be picked. Look up for renderer names using command "ls_renderers"');
+            window.ggstatic.registerConsoleCommand(this, 'performance_report', (...args) => __awaiter(this, void 0, void 0, function* () {
+                let mode = 'avg';
+                let samples = 20;
+                for (let i = 0; i < 2; i++) {
+                    if (['avg', 'peak'].includes(args[i])) {
+                        mode = args[i];
+                    }
+                    else if (!isNaN(+args[i])) {
+                        samples = +args[i];
+                    }
+                }
+                const meter = new PerformanceMeterEntity(samples, 250);
+                this.addEntity(meter);
+                yield lastValueFrom(this.worldClock.tick$.pipe(take(samples)));
+                const report = mode === 'avg' ? meter.avgReport : meter.peakReport;
+                this.removeEntity(meter);
+                const renderItems = report.entries.map(([name, value]) => `<span style='color:lightgray;'>${name}:</span>` +
+                    new Array(Math.max(0, 26 - name.length)).join('&nbsp;') +
+                    `${value.toFixed(2)} ms` +
+                    (mode === 'avg' ? ` (${((value * 100) / report.totalTime).toFixed(2)}%)` : ''));
+                let totalColor = 'lightgreen';
+                if (report.totalTime > 12) {
+                    totalColor = report.totalTime < 16 ? 'yellow' : 'red';
+                }
+                const title = `${mode === 'avg' ? 'Average' : 'Peak'} Frame time`;
+                renderItems.unshift(title +
+                    ':' +
+                    new Array(Math.max(0, 26 - title.length)).join('&nbsp;') +
+                    `<span style='color:${totalColor};'>${report.totalTime.toFixed(2)} ms</span>`);
+                renderItems.unshift(`Performance report (${samples} samples)`);
+                return renderItems.join('\n');
+            }), 'args: [int, avg|peak]; [avg|peak, int]; [avg|peak]; [int] or []; measure how much time was spent per ' +
+                'entity in world. Arguments are samples amount (20 by default) and "peak" or "avg" choice, both arguments are ' +
+                'optional. "avg" report sorts entities by average time consumed, "peak" records highest value for each entity');
         }
-    }
-    static get documentWorlds() {
-        return [...GgWorld._documentWorlds];
+        this.worldClock.paused$.subscribe(this.paused$);
     }
     init() {
         return __awaiter(this, void 0, void 0, function* () {
             yield Promise.all([this.physicsWorld.init(), this.visualScene.init()]);
+            const forwardTick = (listener, elapsed, delta) => {
+                if (listener.active) {
+                    this.tickForwardTo$.next(listener);
+                    listener.tick$.next([elapsed, delta]);
+                    this.tickForwardedTo$.next(listener);
+                }
+            };
             this.worldClock.tick$.subscribe(([elapsed, delta]) => {
+                this.tickStarted$.next();
                 let i = 0;
                 // emit tick to all entities with tick order < GGTickOrder.PHYSICS_SIMULATION
                 for (i; i < this.tickListeners.length; i++) {
                     if (this.tickListeners[i].tickOrder >= TickOrder.PHYSICS_SIMULATION) {
                         break;
                     }
-                    if (this.tickListeners[i].active) {
-                        this.tickListeners[i].tick$.next([elapsed, delta]);
-                    }
+                    forwardTick(this.tickListeners[i], elapsed, delta);
                 }
                 // run physics simulation
+                this.tickForwardTo$.next('PHYSICS_WORLD');
                 this.physicsWorld.simulate(delta);
+                this.tickForwardedTo$.next('PHYSICS_WORLD');
                 // emit tick to all remained entities
                 for (i; i < this.tickListeners.length; i++) {
-                    if (this.tickListeners[i].active) {
-                        this.tickListeners[i].tick$.next([elapsed, delta]);
-                    }
+                    forwardTick(this.tickListeners[i], elapsed, delta);
                 }
             });
         });
@@ -113,6 +153,9 @@ export class GgWorld {
         }
         this.worldClock.stop();
         this.keyboardInput.stop();
+        this.tickStarted$.complete();
+        this.tickForwardTo$.complete();
+        this.tickForwardedTo$.complete();
         for (let i = 0; i < this.children.length; i++) {
             this.children[i].onRemoved();
             this.children[i].dispose();

package/dist/base/inputs/direction.keyboard.input.d.ts

@@ -4,11 +4,11 @@ import { IInput } from './i-input';
 /**
  * The type representing desired keymap for DirectionKeyboardInput
  */
-export declare type DirectionKeyboardKeymap = 'arrows' | 'wasd' | 'wasd+arrows';
+export type DirectionKeyboardKeymap = 'arrows' | 'wasd' | 'wasd+arrows';
 /**
  * The type of DirectionKeyboardInput output value
  */
-export declare type DirectionKeyboardOutput = {
+export type DirectionKeyboardOutput = {
     upDown?: boolean;
     leftRight?: boolean;
 };

package/dist/base/inputs/direction.keyboard.input.js

@@ -6,6 +6,12 @@ import { IInput } from './i-input';
  * Supports two the most popular keyboard layouts: WASD and arrows.
  */
 export class DirectionKeyboardInput extends IInput {
+    /**
+     * Returns an observable that emits `DirectionKeyboardOutput` objects whenever the input changes.
+     */
+    get output$() {
+        return this._output$.asObservable();
+    }
     /**
      * Creates a new instance of the `DirectionKeyboardInput` class.
      *
@@ -21,12 +27,6 @@ export class DirectionKeyboardInput extends IInput {
          */
         this._output$ = new Subject();
     }
-    /**
-     * Returns an observable that emits `DirectionKeyboardOutput` objects whenever the input changes.
-     */
-    get output$() {
-        return this._output$.asObservable();
-    }
     /**
      * Called when the input handling should start.
      */

package/dist/base/inputs/mouse.input.d.ts

@@ -7,7 +7,7 @@ import { Point2 } from '../models/points';
  * canvas?: Canvas element. If not provided, mouse events will be listened on the whole window
  * pointerLock: The flag to enable pointer lock when clicking on canvas
  */
-export declare type MouseInputOptions = {
+export type MouseInputOptions = {
     canvas?: HTMLCanvasElement;
     pointerLock: boolean;
 };

package/dist/base/inputs/mouse.input.js

@@ -35,24 +35,6 @@ export var MouseInputState;
  * A class representing mouse input.
  */
 export class MouseInput extends IInput {
-    /**
-     Creates an instance of MouseInput.
-     @param {MouseInputOptions} options - The options for the MouseInput.
-     */
-    constructor(options = {}) {
-        super();
-        /**
-         An observable of the wheel scrolling.
-         */
-        this._wheel$ = null;
-        this._delta$ = new Subject();
-        this._position$ = new BehaviorSubject(Pnt2.O);
-        this._multiTouchPositions$ = new BehaviorSubject([]);
-        this.stopped$ = new Subject();
-        this._state$ = new BehaviorSubject(MouseInputState.NONE);
-        this.options = Object.assign(Object.assign({}, DEFAULT_MOUSE_INPUT_OPTIONS), options);
-        this.canvasClickListener = this.canvasClickListener.bind(this);
-    }
     static isTouchDevice() {
         return ('createTouch' in document ||
             !!navigator.userAgent.match(/(iPhone|iPod|iPad)/) ||
@@ -104,6 +86,24 @@ export class MouseInput extends IInput {
     get _element() {
         return this.options.canvas || window;
     }
+    /**
+     Creates an instance of MouseInput.
+     @param {MouseInputOptions} options - The options for the MouseInput.
+     */
+    constructor(options = {}) {
+        super();
+        /**
+         An observable of the wheel scrolling.
+         */
+        this._wheel$ = null;
+        this._delta$ = new Subject();
+        this._position$ = new BehaviorSubject(Pnt2.O);
+        this._multiTouchPositions$ = new BehaviorSubject([]);
+        this.stopped$ = new Subject();
+        this._state$ = new BehaviorSubject(MouseInputState.NONE);
+        this.options = Object.assign(Object.assign({}, DEFAULT_MOUSE_INPUT_OPTIONS), options);
+        this.canvasClickListener = this.canvasClickListener.bind(this);
+    }
     startInternal() {
         if (this.options.canvas) {
             this.options.canvas.style.touchAction = 'none';
@@ -162,11 +162,16 @@ export class MouseInput extends IInput {
             .pipe(takeUntil(this.stopped$))
             .subscribe((event) => {
             if (pointers.length === 0) {
-                if (this.options.canvas) {
-                    this.options.canvas.setPointerCapture(event.pointerId);
+                try {
+                    if (this.options.canvas) {
+                        this.options.canvas.setPointerCapture(event.pointerId);
+                    }
+                    this._element.addEventListener('pointerup', onPointerUp);
+                    this._element.addEventListener('pointercancel', onPointerUp);
+                }
+                catch (err) {
+                    console.error(err);
                 }
-                this._element.addEventListener('pointerup', onPointerUp);
-                this._element.addEventListener('pointercancel', onPointerUp);
             }
             pointers.push(event);
             if (event.pointerType === 'touch') {