@gg-web-engine/core 0.0.49 → 0.0.56

package/dist/3d/loader.js

@@ -99,7 +99,7 @@ export class Gg3dLoader {
             const loadOptions = Object.assign(Object.assign({}, defaultLoadOptions), options);
             const { resources, meta } = yield this.loadGgGlbResources(path, loadOptions.cachingStrategy);
             const result = {
-                entities: resources.map(({ object3D, body }) => new Entity3d(object3D, body)),
+                entities: resources.map(x => new Entity3d({ object3D: x.object3D, objectBody: x.body })),
                 meta,
             };
             if (loadOptions.loadProps) {

package/dist/base/clock/global-clock.d.ts

@@ -1,16 +1,12 @@
-import { Observable } from 'rxjs';
-import { PausableClock } from './pausable-clock';
 import { IClock } from './i-clock';
 /**
  * A singleton class, providing ability to track time, fire ticks, provide time elapsed + tick delta.
  * Starts as soon as accessed and counts time from 01/01/1970
  */
-export declare class GgGlobalClock implements IClock {
+export declare class GgGlobalClock extends IClock {
     private static _instance;
     static get instance(): GgGlobalClock;
-    private readonly _tick$;
-    get tick$(): Observable<[number, number]>;
     get elapsedTime(): number;
-    createChildClock(autoStart: boolean): PausableClock;
     private constructor();
+    dispose(): void;
 }

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

@@ -1,32 +1,32 @@
-import { animationFrameScheduler, of, Subject } from 'rxjs';
-import { map, repeat, tap } from 'rxjs/operators';
-import { PausableClock } from './pausable-clock';
+import { IClock } from './i-clock';
+const now = typeof performance === 'undefined' ? () => Date.now() : () => performance.now();
 /**
  * A singleton class, providing ability to track time, fire ticks, provide time elapsed + tick delta.
  * Starts as soon as accessed and counts time from 01/01/1970
  */
-export class GgGlobalClock {
+export class GgGlobalClock extends IClock {
     static get instance() {
         if (!GgGlobalClock._instance) {
             GgGlobalClock._instance = new GgGlobalClock();
         }
         return GgGlobalClock._instance;
     }
-    get tick$() {
-        return this._tick$.pipe(map(([oldTime, newTime]) => [newTime, newTime - oldTime]));
-    }
     get elapsedTime() {
-        return (typeof performance === 'undefined' ? Date : performance).now();
-    }
-    createChildClock(autoStart) {
-        return new PausableClock(autoStart, this);
+        return now();
     }
     constructor() {
-        this._tick$ = new Subject();
+        super(null);
         let oldRelativeTime = this.elapsedTime;
-        of(undefined, animationFrameScheduler)
-            .pipe(repeat())
-            .pipe(map(() => [oldRelativeTime, this.elapsedTime]), tap(([_, cur]) => (oldRelativeTime = cur)))
-            .subscribe(this._tick$);
+        const tick = () => {
+            requestAnimationFrame(tick);
+            const prev = oldRelativeTime;
+            const cur = this.elapsedTime;
+            oldRelativeTime = cur;
+            this._tick$.next([prev, cur - prev]);
+        };
+        requestAnimationFrame(tick);
+    }
+    dispose() {
+        throw new Error('Cannot dispose global clock');
     }
 }

package/dist/base/clock/i-clock.d.ts

@@ -1,7 +1,16 @@
-import { Observable } from 'rxjs';
-import { PausableClock } from './pausable-clock';
-export interface IClock {
+import { Observable, Subject } from 'rxjs';
+export declare abstract class IClock {
+    readonly parent: IClock | null;
+    protected readonly _tick$: Subject<[number, number]>;
+    /**
+     * Observable stream of ticks, emitting an array containing the current time and the tick delta.
+     */
     get tick$(): Observable<[number, number]>;
-    get elapsedTime(): number;
-    createChildClock(autoStart: boolean): PausableClock;
+    abstract get elapsedTime(): number;
+    protected _children: IClock[];
+    get children(): IClock[];
+    protected constructor(parent: IClock | null);
+    addChild(clock: IClock): void;
+    removeChild(clock: IClock): void;
+    dispose(): void;
 }

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

@@ -1 +1,43 @@
-export {};
+import { Subject } from 'rxjs';
+export class IClock {
+    /**
+     * Observable stream of ticks, emitting an array containing the current time and the tick delta.
+     */
+    get tick$() {
+        return this._tick$.asObservable();
+    }
+    get children() {
+        return [...this._children];
+    }
+    constructor(parent) {
+        this.parent = parent;
+        this._tick$ = new Subject();
+        this._children = [];
+        if (parent) {
+            parent.addChild(this);
+        }
+    }
+    addChild(clock) {
+        if (clock.parent !== this) {
+            throw new Error('Incorrect child clock');
+        }
+        if (!this._children.includes(clock)) {
+            this._children.push(clock);
+        }
+    }
+    removeChild(clock) {
+        if (clock.parent !== this) {
+            throw new Error('Incorrect child clock');
+        }
+        this._children = this._children.filter(c => c !== clock);
+    }
+    dispose() {
+        if (this.parent) {
+            this.parent.removeChild(this);
+        }
+        for (const c of this._children) {
+            c.dispose();
+        }
+        this._tick$.complete();
+    }
+}

package/dist/base/clock/pausable-clock.d.ts

@@ -1,17 +1,12 @@
-import { Observable, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 import { IClock } from './i-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 declare class PausableClock implements IClock {
+export declare class PausableClock extends IClock {
     protected readonly parentClock: IClock;
     private tickSub;
     private readonly _internalTick$;
-    private readonly _tick$;
-    /**
-     * Observable stream of ticks, emitting an array containing the current time and the tick delta.
-     */
-    get tick$(): Observable<[number, number]>;
     /**
      * Checks if the clock is currently running.
      */
@@ -54,12 +49,6 @@ export declare class PausableClock implements IClock {
      * @param parentClock The parent clock to synchronize with. Defaults to GgGlobalClock instance.
      */
     constructor(autoStart?: boolean, parentClock?: IClock);
-    /**
-     * Creates a child clock.
-     * @param autoStart Indicates whether the child clock should start automatically.
-     * @returns A new instance of PausableClock.
-     */
-    createChildClock(autoStart: boolean): PausableClock;
     /**
      * Starts the clock.
      */
@@ -84,4 +73,5 @@ export declare class PausableClock implements IClock {
      * Stops listening for ticks from the parent clock.
      */
     protected stopListeningTicks(): void;
+    dispose(): void;
 }

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

@@ -1,16 +1,11 @@
 import { filter, Subject } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { GgGlobalClock } from './global-clock';
+import { IClock } from './i-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 {
-    /**
-     * Observable stream of ticks, emitting an array containing the current time and the tick delta.
-     */
-    get tick$() {
-        return this._tick$.asObservable();
-    }
+export class PausableClock extends IClock {
     /**
      * Checks if the clock is currently running.
      */
@@ -76,10 +71,10 @@ export class PausableClock {
      * @param parentClock The parent clock to synchronize with. Defaults to GgGlobalClock instance.
      */
     constructor(autoStart = false, parentClock = GgGlobalClock.instance) {
+        super(parentClock);
         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"
          */
@@ -103,14 +98,6 @@ export class PausableClock {
                 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.
-     * @returns A new instance of PausableClock.
-     */
-    createChildClock(autoStart) {
-        return new PausableClock(autoStart, this);
-    }
     /**
      * Starts the clock.
      */
@@ -170,4 +157,9 @@ export class PausableClock {
         (_a = this.tickSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         this.tickSub = null;
     }
+    dispose() {
+        this.stopListeningTicks();
+        this._internalTick$.complete();
+        super.dispose();
+    }
 }

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

@@ -16,6 +16,7 @@ export declare abstract class GgWorld<D, R, VTypeDoc extends VisualTypeDocRepo<D
     readonly physicsWorld: PW;
     private static default_name_counter;
     private static _documentWorlds;
+    static readonly worldCreated$: Subject<GgWorld<any, any>>;
     static get documentWorlds(): GgWorld<any, any>[];
     readonly worldClock: PausableClock;
     readonly keyboardInput: KeyboardInput;
@@ -26,6 +27,7 @@ export declare abstract class GgWorld<D, R, VTypeDoc extends VisualTypeDocRepo<D
     readonly tickForwardTo$: Subject<IEntity | 'PHYSICS_WORLD'>;
     readonly tickForwardedTo$: Subject<IEntity | 'PHYSICS_WORLD'>;
     readonly paused$: Subject<boolean>;
+    readonly disposed$: Subject<void>;
     protected constructor(visualScene: VS, physicsWorld: PW);
     init(): Promise<void>;
     start(): void;
@@ -40,4 +42,8 @@ export declare abstract class GgWorld<D, R, VTypeDoc extends VisualTypeDocRepo<D
     position?: D, rotation?: R, material?: unknown): IPositionable<D, R> & IRenderableEntity<D, R, VTypeDoc>;
     addEntity(entity: IEntity): void;
     removeEntity(entity: IEntity, dispose?: boolean): void;
+    private onGgStaticInitialized;
+    protected registerConsoleCommands(ggstatic: {
+        registerConsoleCommand: (world: GgWorld<any, any> | null, command: string, handler: (...args: string[]) => Promise<string>, doc?: string) => void;
+    }): void;
 }

package/dist/base/gg-world.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { GgGlobalClock, IRendererEntity, KeyboardInput, TickOrder, } from '../base';
+import { IRendererEntity, KeyboardInput, PausableClock, TickOrder, } from '../base';
 import { lastValueFrom, Subject, take } from 'rxjs';
 import { PerformanceMeterEntity } from '../dev';
 export class GgWorld {
@@ -17,7 +17,7 @@ export class GgWorld {
     constructor(visualScene, physicsWorld) {
         this.visualScene = visualScene;
         this.physicsWorld = physicsWorld;
-        this.worldClock = GgGlobalClock.instance.createChildClock(false);
+        this.worldClock = new PausableClock(false);
         this.keyboardInput = new KeyboardInput();
         this.name = 'w0x' + (GgWorld.default_name_counter++).toString(16);
         this.children = [];
@@ -28,72 +28,18 @@ export class GgWorld {
         this.tickForwardTo$ = new Subject();
         this.tickForwardedTo$ = new Subject();
         this.paused$ = new Subject();
-        GgWorld._documentWorlds.push(this);
+        this.disposed$ = new Subject();
         this.keyboardInput.start();
         if (window.ggstatic) {
-            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);
-            }), 'args: [float]; change time scale of physics engine. Default value is 1.0');
-            window.ggstatic.registerConsoleCommand(this, 'ls_renderers', () => __awaiter(this, void 0, void 0, function* () {
-                return this.children
-                    .filter(e => e instanceof IRendererEntity)
-                    .map(r => r.name)
-                    .join('\n');
-            }), 'no args; print all renderers in selected world');
-            window.ggstatic.registerConsoleCommand(this, 'dr_drawphysics', (...args) => __awaiter(this, void 0, void 0, function* () {
-                const value = ['1', 'true', '+'].includes(args[0]);
-                const rendererName = args[1];
-                let renderer;
-                if (rendererName) {
-                    renderer = this.children.find(x => x instanceof IRendererEntity && x.name === rendererName);
-                }
-                else {
-                    renderer = this.children.find(x => x instanceof IRendererEntity);
-                }
-                if (renderer) {
-                    renderer.physicsDebugViewActive = value;
-                    return '' + value;
-                }
-                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');
+            this.registerConsoleCommands(window.ggstatic);
+        }
+        else {
+            this.onGgStaticInitialized = this.onGgStaticInitialized.bind(this);
+            window.addEventListener('ggstatic_added', this.onGgStaticInitialized);
         }
         this.worldClock.paused$.subscribe(this.paused$);
+        GgWorld._documentWorlds.push(this);
+        GgWorld.worldCreated$.next(this);
     }
     init() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -145,12 +91,15 @@ export class GgWorld {
         return this.worldClock.elapsedTime;
     }
     createClock(autoStart) {
-        return this.worldClock.createChildClock(autoStart);
+        return new PausableClock(autoStart, this.worldClock);
     }
     dispose() {
         if (window.ggstatic) {
             window.ggstatic.deregisterWorldCommands(this);
         }
+        else {
+            window.removeEventListener('ggstatic_added', this.onGgStaticInitialized);
+        }
         this.worldClock.stop();
         this.keyboardInput.stop();
         this.tickStarted$.complete();
@@ -164,6 +113,9 @@ export class GgWorld {
         this.tickListeners.splice(0, this.tickListeners.length);
         this.physicsWorld.dispose();
         this.visualScene.dispose();
+        GgWorld._documentWorlds.splice(GgWorld._documentWorlds.indexOf(this), 1);
+        this.disposed$.next();
+        this.disposed$.complete();
     }
     addEntity(entity) {
         if (!!entity.world) {
@@ -188,6 +140,91 @@ export class GgWorld {
             entity.dispose();
         }
     }
+    onGgStaticInitialized() {
+        window.removeEventListener('ggstatic_added', this.onGgStaticInitialized);
+        this.registerConsoleCommands(window.ggstatic);
+    }
+    registerConsoleCommands(ggstatic) {
+        ggstatic.registerConsoleCommand(this, 'timescale', (...args) => __awaiter(this, void 0, void 0, function* () {
+            if (!isNaN(+args[0])) {
+                this.worldClock.timeScale = +args[0];
+            }
+            return this.worldClock.timeScale.toString();
+        }), 'args: [ float? ]; Get current time scale of selected world clock or set it.' +
+            ' Default value is 1.0 (no time scale applied)');
+        ggstatic.registerConsoleCommand(this, 'fps_limit', (...args) => __awaiter(this, void 0, void 0, function* () {
+            if (!isNaN(+args[0])) {
+                this.worldClock.tickRateLimit = +args[0];
+            }
+            return this.worldClock.tickRateLimit.toString();
+        }), 'args: [ int? ]; Get current tick rate limit of selected world clock or set it. 0 means no limit applied');
+        ggstatic.registerConsoleCommand(this, 'renderers', () => __awaiter(this, void 0, void 0, function* () {
+            return this.children
+                .filter(e => e instanceof IRendererEntity)
+                .map(r => r.name)
+                .join('\n');
+        }), 'no args; Print all renderers in selected world');
+        ggstatic.registerConsoleCommand(this, 'debug_view', (...args) => __awaiter(this, void 0, void 0, function* () {
+            let value = 'toggle';
+            let rendererName = undefined;
+            for (let arg of args) {
+                if (['1', '0'].includes(arg)) {
+                    value = arg === '1';
+                }
+                else {
+                    rendererName = arg;
+                }
+            }
+            let renderer = this.children.find(x => x instanceof IRendererEntity && (!rendererName || x.name === rendererName));
+            if (renderer) {
+                renderer.physicsDebugViewActive = value === 'toggle' ? !renderer.physicsDebugViewActive : value;
+                return renderer.physicsDebugViewActive ? '1' : '0';
+            }
+            else if (rendererName) {
+                throw new Error(`Renderer with name "${rendererName}" not found`);
+            }
+            else {
+                throw new Error(`No renderer found`);
+            }
+        }), 'args: [ 0|1?, string? ]; Turn on/off physics debug view, skip first argument to toggle value.' +
+            ' Second argument expects renderer name, if not provided first renderer will be picked.' +
+            ' Use "renderers" to get list of renderers in the world');
+        ggstatic.registerConsoleCommand(this, 'performance', (...args) => __awaiter(this, void 0, void 0, function* () {
+            let mode = 'avg';
+            let samples = 20;
+            for (let arg of args) {
+                if (['avg', 'peak'].includes(arg)) {
+                    mode = arg;
+                }
+                else if (!isNaN(+arg)) {
+                    samples = +arg;
+                }
+            }
+            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? ]; 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');
+    }
 }
 GgWorld.default_name_counter = 0;
 GgWorld._documentWorlds = [];
+GgWorld.worldCreated$ = new Subject();

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

@@ -14,7 +14,7 @@ export declare class KeyboardInput extends IInput {
     /**
      * Which element types should filter key downs when focused
      */
-    externalFocusBlacklist: {
+    static externalFocusBlacklist: {
         new (): HTMLElement;
     }[];
     /**

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

@@ -17,15 +17,6 @@ export class KeyboardInput extends IInput {
          * Flag which disables handling key downs, when document has some "typeable" element focused
          */
         this.skipKeyDownsOnExternalFocus = true;
-        /**
-         * Which element types should filter key downs when focused
-         */
-        this.externalFocusBlacklist = [
-            HTMLInputElement,
-            HTMLTextAreaElement,
-            HTMLSelectElement,
-            HTMLButtonElement,
-        ];
         this.handleKeys = this.handleKeys.bind(this);
         this.resetAllKeys = this.resetAllKeys.bind(this);
         this.onPointerLockChange = this.onPointerLockChange.bind(this);
@@ -127,7 +118,7 @@ export class KeyboardInput extends IInput {
         }
         const pressed = e.type == 'keydown';
         if (pressed && this.skipKeyDownsOnExternalFocus && document.activeElement) {
-            for (const k of this.externalFocusBlacklist) {
+            for (const k of KeyboardInput.externalFocusBlacklist) {
                 if (document.activeElement instanceof k) {
                     return;
                 }
@@ -151,3 +142,12 @@ export class KeyboardInput extends IInput {
         }
     }
 }
+/**
+ * Which element types should filter key downs when focused
+ */
+KeyboardInput.externalFocusBlacklist = [
+    HTMLInputElement,
+    HTMLTextAreaElement,
+    HTMLSelectElement,
+    HTMLButtonElement,
+];

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

@@ -156,7 +156,7 @@ export class MouseInput extends IInput {
                 if (this.options.canvas) {
                     this.options.canvas.releasePointerCapture(event.pointerId);
                 }
-                this._element.removeEventListener('pointerup', onPointerUp);
+                window.removeEventListener('pointerup', onPointerUp);
                 this._element.removeEventListener('pointercancel', onPointerUp);
             }
             this._state$.next(pointerLengthsStateMap[Math.min(pointers.length, 2)]);
@@ -169,7 +169,8 @@ export class MouseInput extends IInput {
                     if (this.options.canvas) {
                         this.options.canvas.setPointerCapture(event.pointerId);
                     }
-                    this._element.addEventListener('pointerup', onPointerUp);
+                    // use window instead of this._element to handle case when mouse was released over other element
+                    window.addEventListener('pointerup', onPointerUp);
                     this._element.addEventListener('pointercancel', onPointerUp);
                 }
                 catch (err) {

package/dist/dev/gg-console.ui.js

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { VERSION } from '../version';
 export class GgConsoleUI {
     constructor() {
         this.output = `
@@ -20,11 +21,12 @@ export class GgConsoleUI {
                 ░ ░   ░ ░ ░   ░      ░   ░     ░    ░    ░ 
                       ░       ░        ░       ░  ░ ░      
                                                          ░ 
+                             Version: ${VERSION}
              >>> https://github.com/AndyGura/gg-web-engine <<<
 Welcome to GG web engine UI console. 
 Enter command in input below.
 
-List of available commands: `.replace(/ /g, '&nbsp;') + `<span style="color:yellow">ls_commands</span>`;
+List of available commands: `.replace(/ /g, '&nbsp;') + `<span style='color:yellow'>commands</span>`;
         this.commandHistory = [];
         this.currentCommandIndex = 0; // for repeating command using up/down arrow keys
         this.elements = null;
@@ -98,9 +100,14 @@ List of available commands: `.replace(/ /g, '&nbsp;') + `<span style="color:yell
             if (value.trim() === '') {
                 return;
             }
-            let autocompletion = window.ggstatic.availableCommands.find((c) => c[0].startsWith(value));
-            if (autocompletion && autocompletion[0].length > value.length) {
-                this.elements.input.value = autocompletion[0];
+            let autocompletion = null;
+            for (let [command] of window.ggstatic.availableCommands) {
+                if (command.startsWith(value) && (!autocompletion || autocompletion.length > command.length)) {
+                    autocompletion = command;
+                }
+            }
+            if (autocompletion && autocompletion.length > value.length) {
+                this.elements.input.value = autocompletion;
                 this.elements.input.setSelectionRange(value.length, this.elements.input.value.length);
             }
         };
@@ -135,6 +142,9 @@ List of available commands: `.replace(/ /g, '&nbsp;') + `<span style="color:yell
     onInput() {
         return __awaiter(this, void 0, void 0, function* () {
             const command = this.elements.input.value;
+            if (command.length === 0) {
+                return;
+            }
             this.elements.input.value = '';
             this.stdout('\n> ' + command);
             this.stdout('\n' + (yield window.ggstatic.console(command)));

package/dist/dev/gg-debugger.ui.d.ts

@@ -4,11 +4,11 @@ export declare class GgDebuggerUI {
     private statsRemoved$;
     get showStats(): boolean;
     private currentWorld;
-    setShowStats(selectedWorld: GgWorld<any, any>, value: boolean): void;
+    setShowStats(selectedWorld: GgWorld<any, any> | null, value: boolean): void;
     private debugControlsRemoved$;
     private viewUpdated$;
     get showDebugControls(): boolean;
-    setShowDebugControls(selectedWorld: GgWorld<any, any>, value: boolean): void;
+    setShowDebugControls(selectedWorld: GgWorld<any, any> | null, value: boolean): void;
     private snapshot;
     perfStatsMode: 'AVG' | 'PEAK';
     private performanceStatsSnapshot;