@woosh/meep-engine 2.58.0 → 2.59.1

package/src/engine/ui/GUIEngine.js

@@ -4,7 +4,7 @@
 
 
 import List from '../../core/collection/list/List.js';
-import { playTrackRealTime } from "../animation/playTrackRealTime.js";
+import {playTrackRealTime} from "../animation/playTrackRealTime.js";
 
 import GUIElement from '../ecs/gui/GUIElement.js';
 import ViewportPosition from '../ecs/gui/position/ViewportPosition.js';
@@ -18,82 +18,60 @@ import View from '../../view/View.js';
 import TransitionFunctions from "../animation/TransitionFunctions.js";
 import AnimationTrack from "../animation/keyed2/AnimationTrack.js";
 import AnimationTrackPlayback from "../animation/keyed2/AnimationTrackPlayback.js";
-import { TooltipManager } from "../../view/tooltip/TooltipManager.js";
-import { DomTooltipManager } from "../../view/tooltip/DomTooltipManager.js";
+import {TooltipManager} from "../../view/tooltip/TooltipManager.js";
+import {DomTooltipManager} from "../../view/tooltip/DomTooltipManager.js";
 import Ticker from "../simulation/Ticker.js";
-import { SimpleLifecycle, SimpleLifecycleStateType } from "../../core/process/SimpleLifecycle.js";
-import ObservedBoolean from "../../core/model/ObservedBoolean.js";
+import {SimpleLifecycle, SimpleLifecycleStateType} from "../../core/process/SimpleLifecycle.js";
 import EmptyView from "../../view/elements/EmptyView.js";
-import { GMLEngine } from "../../view/tooltip/gml/GMLEngine.js";
+import {GMLEngine} from "../../view/tooltip/gml/GMLEngine.js";
 import ObservedString from "../../core/model/ObservedString.js";
-import { CursorType } from "./cursor/CursorType.js";
-import { noop } from "../../core/function/Functions.js";
-import { SerializationMetadata } from "../ecs/components/SerializationMetadata.js";
-import { SceneGUIContext } from "./scene/SceneGUIContext.js";
+import {CursorType} from "./cursor/CursorType.js";
+import {noop} from "../../core/function/Functions.js";
+import {SerializationMetadata} from "../ecs/components/SerializationMetadata.js";
+import {SceneGUIContext} from "./scene/SceneGUIContext.js";
 
 
-function GUIEngine() {
-    this.windows = new List();
-
-    /**
-     * When set to 'true' - indicated that GUI engine should be the only one receiving the inputs, this is useful for Modal dialogs and other overlays
-     * @readonly
-     * @type {ObservedBoolean}
-     */
-    this.captureInputs = new ObservedBoolean(false);
+class GUIEngine {
+    windows = new List();
 
     /**
      *
      * @type {EntityManager|null}
      */
-    this.entityManager = null;
+    entityManager = null;
 
     /**
      *
      * @type {Engine}
      */
-    this.engine = null;
+    engine = null;
 
     /**
      *
      * @type {WeakMap<Scene, SceneGUIContext>}
      */
-    this.sceneContexts = new WeakMap();
+    sceneContexts = new WeakMap();
 
     /**
      *
      * @type {TooltipManager}
      */
-    this.tooltips = new TooltipManager();
+    tooltips = new TooltipManager();
 
     /**
      *
      * @type {DomTooltipManager}
      */
-    this.viewTooltips = new DomTooltipManager(this.tooltips);
+    viewTooltips = new DomTooltipManager(this.tooltips);
 
 
     /**
      *
      * @type {Ticker}
      */
-    this.ticker = new Ticker();
-    this.ticker.subscribe(d => {
-
+    ticker = new Ticker();
 
-        let ctx = null;
-        try {
-            ctx = this.getActiveSceneContext();
-        } catch (e) {
-            //skip
-        }
-
-        if (ctx !== null) {
-            ctx.tick(d);
-        }
-    });
-
-    this.view = new EmptyView({
+    view = new EmptyView({
         classList: ['gui-engine-root'],
         css: {
             position: "absolute",
@@ -106,458 +84,477 @@ function GUIEngine() {
      *
      * @type {GMLEngine}
      */
-    this.gml = new GMLEngine();
+    gml = new GMLEngine();
 
     /**
      *
      * @type {ObservedString}
      */
-    this.cursor = new ObservedString(CursorType.Normal);
+    cursor = new ObservedString(CursorType.Normal);
 
 
     /**
      *
      * @type {Localization|null}
      */
-    this.localization = null;
-}
+    localization = null;
 
-/**
- * @param {boolean} closeable
- * @param {View} content
- * @param {string} title
- * @param {View} [wrapper]
- * @returns {Entity}
- */
-GUIEngine.prototype.openWindow = function ({ closeable, content, title, wrapper }) {
-    const entityBuilder = new Entity();
+    constructor() {
 
-    function closeAction() {
-        entityBuilder.destroy();
-    }
+        this.ticker.subscribe(d => {
 
-    const windowView = new SimpleWindowView(content, {
-        closeAction,
-        title,
-        closeable
-    });
 
-    entityBuilder.add(new ViewportPosition());
+            let ctx = null;
+            try {
+                ctx = this.getActiveSceneContext();
+            } catch (e) {
+                //skip
+            }
+
+            if (ctx !== null) {
+                ctx.tick(d);
+            }
+        });
 
-    let vElement;
-    if (wrapper !== undefined) {
-        vElement = wrapper;
-        wrapper.addChild(windowView);
-    } else {
-        vElement = windowView;
     }
 
-    const guiElement = GUIElement.fromView(vElement);
-    entityBuilder.add(guiElement)
-        .add(SerializationMetadata.Transient);
+    /**
+     * @param {boolean} closeable
+     * @param {View} content
+     * @param {string} title
+     * @param {View} [wrapper]
+     * @returns {Entity}
+     */
+    openWindow({closeable, content, title, wrapper}) {
+        const entityBuilder = new Entity();
 
-    const dataset = this.entityManager.dataset;
+        function closeAction() {
+            entityBuilder.destroy();
+        }
 
-    animateView(windowView, dataset);
+        const windowView = new SimpleWindowView(content, {
+            closeAction,
+            title,
+            closeable
+        });
 
-    entityBuilder.build(dataset);
+        entityBuilder.add(new ViewportPosition());
 
-    return entityBuilder;
-};
+        let vElement;
+        if (wrapper !== undefined) {
+            vElement = wrapper;
+            wrapper.addChild(windowView);
+        } else {
+            vElement = windowView;
+        }
 
-/**
- *
- * @param {View} view
- * @param {EntityComponentDataset} ecd
- */
-function animateView(view, ecd) {
+        const guiElement = GUIElement.fromView(vElement);
+        entityBuilder.add(guiElement)
+            .add(SerializationMetadata.Transient);
 
-    const animationTrack = new AnimationTrack(["alpha", "scale"]);
-    animationTrack.addKey(0, [0, 0.95]);
-    animationTrack.addKey(0.2, [1, 1]);
+        const dataset = this.entityManager.dataset;
 
-    animationTrack.addTransition(0, TransitionFunctions.Linear);
+        animateView(windowView, dataset);
 
-    const playback = new AnimationTrackPlayback(animationTrack, function (alpha, scale) {
-        this.el.style.opacity = alpha;
-        this.scale.set(scale, scale);
-    }, view);
+        entityBuilder.build(dataset);
 
-    //force view status to initial key of animation
-    playback.update();
+        return entityBuilder;
+    }
 
-    playTrackRealTime(playback, ecd);
-}
+    /**
+     *
+     * @param {View} content
+     * @param {string} title
+     * @param {number} priority
+     * @returns {SimpleLifecycle}
+     */
+    createModal({content, title, priority = 0}) {
+        const entityManager = this.entityManager;
 
-/**
- *
- * @param {View} content
- * @param {string} title
- * @param {number} priority
- * @returns {SimpleLifecycle}
- */
-GUIEngine.prototype.createModal = function ({ content, title, priority = 0 }) {
-    const entityManager = this.entityManager;
+        const self = this;
+        let window = null;
+        let overlay = null;
 
-    const self = this;
-    let window = null;
-    let overlay = null;
 
+        function destroy() {
+            window.destroy();
+            overlay.destroy();
+        }
 
-    function destroy() {
-        window.destroy();
-        overlay.destroy();
-    }
+        function makeOverlay() {
+            const overlay = new View();
+            overlay.el = document.createElement('div');
+            overlay.el.classList.add('ui-modal-overlay');
+            //make overlay dismiss modal
+            overlay.el.addEventListener('click', function (event) {
+                event.stopPropagation();
+                lifecycle.makeDestroyed();
+            });
+
+            const builder = new Entity();
+
+            builder.add(SerializationMetadata.Transient);
+            builder.add(GUIElement.fromView(overlay));
+            return builder;
+        }
 
-    function makeOverlay() {
-        const overlay = new View();
-        overlay.el = document.createElement('div');
-        overlay.el.classList.add('ui-modal-overlay');
-        //make overlay dismiss modal
-        overlay.el.addEventListener('click', function (event) {
-            event.stopPropagation();
-            lifecycle.makeDestroyed();
-        });
+        function build() {
+            overlay = makeOverlay();
 
-        const builder = new Entity();
+            overlay.build(entityManager.dataset);
 
-        builder.add(SerializationMetadata.Transient);
-        builder.add(GUIElement.fromView(overlay));
-        return builder;
-    }
+            const view = content;
 
-    function build() {
-        overlay = makeOverlay();
+            const vModalContainer = new EmptyView({classList: ['ui-modal-window-container']});
 
-        overlay.build(entityManager.dataset);
+            window = self.openWindow({
+                title: title,
+                content: view,
+                closeable: false,
+                wrapper: vModalContainer
+            });
 
-        const view = content;
+            const windowGuiElement = window.getComponent(GUIElement);
+            windowGuiElement.anchor.set(0.5, 0.5);
 
-        const vModalContainer = new EmptyView({ classList: ['ui-modal-window-container'] });
+            window.removeComponent(ViewportPosition);
 
-        window = self.openWindow({
-            title: title,
-            content: view,
-            closeable: false,
-            wrapper: vModalContainer
-        });
+        }
+
+        const lifecycle = new SimpleLifecycle({priority});
 
-        const windowGuiElement = window.getComponent(GUIElement);
-        windowGuiElement.anchor.set(0.5, 0.5);
+        lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Active, build);
+        lifecycle.sm.addEventHandlerStateExit(SimpleLifecycleStateType.Active, destroy);
 
-        window.removeComponent(ViewportPosition);
+        this.getActiveSceneContext().modals.add(lifecycle);
 
+        return lifecycle;
     }
 
-    const lifecycle = new SimpleLifecycle({ priority });
+    /**
+     *
+     * @param {string} title
+     * @param {View} content
+     * @param {ObservedBoolean|ReactiveExpression} [confirmationEnabled]
+     * @returns {Promise<any>}
+     */
+    createModalConfirmation({title, content, confirmationEnabled}) {
 
-    lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Active, build);
-    lifecycle.sm.addEventHandlerStateExit(SimpleLifecycleStateType.Active, destroy);
+        const self = this;
 
-    this.getActiveSceneContext().modals.add(lifecycle);
+        let lifecycle = null;
 
-    return lifecycle;
-};
 
-/**
- *
- * @param {string} title
- * @param {View} content
- * @param {ObservedBoolean|ReactiveExpression} [confirmationEnabled]
- * @returns {Promise<any>}
- */
-GUIEngine.prototype.createModalConfirmation = function ({ title, content, confirmationEnabled }) {
+        const result = new Promise(function (resolve, reject) {
+            //make view
+
+            let resolved = false;
 
-    const self = this;
+            function clear() {
+                lifecycle.makeDestroyed();
+            }
 
-    let lifecycle = null;
+            function callbackYes() {
+                resolved = true;
+                clear();
+                resolve();
+            }
 
+            function callbackNo() {
+                resolved = true;
+                clear();
+                reject();
+            }
 
-    const result = new Promise(function (resolve, reject) {
-        //make view
+            const view = new ConfirmationDialogView(content,
+                [{
+                    name: "yes",
+                    displayName: self.localization.getString("system_confirmation_confirm"),
+                    callback: callbackYes,
+                    enabled: confirmationEnabled
+                }, {
+                    name: "no",
+                    displayName: self.localization.getString("system_confirmation_cancel"),
+                    callback: callbackNo
+                }]
+            );
+
+            lifecycle = self.createModal({
+                content: view,
+                title: title
+            });
+
+            lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Destroyed, function () {
+                if (!resolved) {
+                    //if destroyed without resolution, reject the promise
+                    reject();
+                }
+            });
+        });
 
-        let resolved = false;
 
-        function clear() {
-            lifecycle.makeDestroyed();
-        }
+        return result;
+    }
+
+    /**
+     * @param {string} text
+     * @param {string} title
+     * @returns {Promise} will be resolved or rejected based on user choice
+     */
+    confirmTextDialog({text, title}) {
+        const content = createTextView(text);
+
+        return this.createModalConfirmation({
+            title,
+            content: content
+        });
+    }
 
-        function callbackYes() {
-            resolved = true;
-            clear();
-            resolve();
+    /**
+     *
+     * @param {string} text
+     * @param {string} title
+     * @returns {Promise}
+     */
+    createTextAlert({text, title}) {
+        const content = createTextView(text);
+        return this.createAlert({
+            content,
+            title
+        });
+    }
+
+    /**
+     *
+     * @param {View} content
+     * @param {string} title
+     * @param {View[]} [marks]
+     * @param {number} priority
+     * @param {function(SimpleLifecycle)} [lifecycleHook]
+     * @returns {Promise}
+     */
+    createAlert(
+        {
+            content,
+            title,
+            marks = [],
+            priority = 0,
+            lifecycleHook = noop
         }
+    ) {
+        /**
+         *
+         * @type {SimpleLifecycle|null}
+         */
+        let lifecycle = null;
 
-        function callbackNo() {
-            resolved = true;
-            clear();
-            reject();
+        function clear() {
+            lifecycle.makeDestroyed();
         }
 
+        const localization = this.localization;
+
         const view = new ConfirmationDialogView(content,
             [{
-                name: "yes",
-                displayName: self.localization.getString("system_confirmation_confirm"),
-                callback: callbackYes,
-                enabled: confirmationEnabled
-            }, {
-                name: "no",
-                displayName: self.localization.getString("system_confirmation_cancel"),
-                callback: callbackNo
+                name: "ok",
+                displayName: localization.getString("system_confirmation_continue"),
+                callback: clear
             }]
         );
 
-        lifecycle = self.createModal({
-            content: view,
-            title: title
-        });
+        if (marks.length > 0) {
+            const vMarks = new EmptyView({classList: ['marks']});
 
-        lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Destroyed, function () {
-            if (!resolved) {
-                //if destroyed without resolution, reject the promise
-                reject();
-            }
-        });
-    });
+            marks.forEach(vMarks.addChild, vMarks);
 
+            view.addChild(vMarks);
+        }
 
-    return result;
-};
-
-/**
- *
- * @param {string} text
- * @return {View}
- */
-function createTextView(text) {
-    const content = new View();
-    content.el = document.createElement('div');
-    content.el.classList.add('text');
-    content.el.innerText = text;
-
-    content.size.set(300, 100);
-    return content;
-}
 
-/**
- * @param {string} text
- * @param {string} title
- * @returns {Promise} will be resolved or rejected based on user choice
- */
-GUIEngine.prototype.confirmTextDialog = function ({ text, title }) {
-    const content = createTextView(text);
+        lifecycle = this.createModal({
+            content: view,
+            title,
+            priority
+        });
 
-    return this.createModalConfirmation({
-        title,
-        content: content
-    });
-};
+        const result = new Promise(function (resolve, reject) {
+            lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Destroyed, resolve);
+        });
 
-/**
- *
- * @param {string} text
- * @param {string} title
- * @returns {Promise}
- */
-GUIEngine.prototype.createTextAlert = function ({ text, title }) {
-    const content = createTextView(text);
-    return this.createAlert({
-        content,
-        title
-    });
-};
+        lifecycleHook(lifecycle);
 
-/**
- *
- * @param {View} content
- * @param {string} title
- * @param {View[]} [marks]
- * @param {number} priority
- * @param {function(SimpleLifecycle)} [lifecycleHook]
- * @returns {Promise}
- */
-GUIEngine.prototype.createAlert = function (
-    {
-        content,
-        title,
-        marks = [],
-        priority = 0,
-        lifecycleHook = noop
+        return result;
     }
-) {
+
     /**
      *
-     * @type {SimpleLifecycle|null}
+     * @param {Scene} scene
+     * @return {SceneGUIContext}
      */
-    let lifecycle = null;
+    obtainSceneContext(scene) {
 
-    function clear() {
-        lifecycle.makeDestroyed();
-    }
-
-    const localization = this.localization;
+        let context = this.sceneContexts.get(scene);
 
-    const view = new ConfirmationDialogView(content,
-        [{
-            name: "ok",
-            displayName: localization.getString("system_confirmation_continue"),
-            callback: clear
-        }]
-    );
+        if (context === undefined) {
+            context = new SceneGUIContext();
 
-    if (marks.length > 0) {
-        const vMarks = new EmptyView({ classList: ['marks'] });
+            context.initialize(scene);
+            context.startup();
 
-        marks.forEach(vMarks.addChild, vMarks);
+            this.sceneContexts.set(scene, context);
+        }
 
-        view.addChild(vMarks);
+        return context;
     }
 
+    /**
+     * @returns {SceneGUIContext|null}
+     */
+    getActiveSceneContext() {
+        const engine = this.engine;
 
-    lifecycle = this.createModal({
-        content: view,
-        title,
-        priority
-    });
-
-    const result = new Promise(function (resolve, reject) {
-        lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Destroyed, resolve);
-    });
-
-    lifecycleHook(lifecycle);
+        if (engine === null) {
+            throw new Error(`Engine is not set`);
+        }
 
-    return result;
-};
+        const sm = engine.sceneManager;
 
-/**
- *
- * @param {Scene} scene
- * @return {SceneGUIContext}
- */
-GUIEngine.prototype.obtainSceneContext = function (scene) {
+        const scene = sm.current_scene;
 
-    let context = this.sceneContexts.get(scene);
+        if (scene === null) {
+            return null;
+        }
 
-    if (context === undefined) {
-        context = new SceneGUIContext();
+        return this.obtainSceneContext(scene);
+    }
 
-        context.initialize(scene);
-        context.startup();
+    /**
+     * Invoked when locale is updated
+     * @private
+     */
+    __update_localization() {
+        // write locale to the view class so that CSS can be modifier on per-locale basis
+        this.view.removeClassesByPattern(/locale-/)
 
-        this.sceneContexts.set(scene, context);
+        this.view.addClass(`locale-${this.localization.locale.getValue()}`);
     }
 
-    return context;
-};
+    /**
+     *
+     * @param {Engine} engine
+     */
+    startup(engine) {
+        this.engine = engine;
+        this.entityManager = engine.entityManager;
 
-/**
- * @returns {SceneGUIContext|null}
- */
-GUIEngine.prototype.getActiveSceneContext = function () {
-    const engine = this.engine;
+        const self = this;
 
-    if (engine === null) {
-        throw new Error(`Engine is not set`);
-    }
+        /**
+         *
+         * @type {Localization}
+         */
+        const localization = engine.localization;
 
-    const sm = engine.sceneManager;
+        this.gml.initialize(engine.staticKnowledge, localization);
 
-    const scene = sm.current_scene;
+        this.tooltips.initialize(this.gml, engine.devices.pointer);
 
-    if (scene === null) {
-        return null;
-    }
+        //attach tooltips to GML
+        this.gml.tooltips = this.viewTooltips;
 
-    return this.obtainSceneContext(scene);
-};
+        this.view.addChild(this.tooltips.contextView);
 
-/**
- * Invoked when locale is updated
- * @private
- */
-GUIEngine.prototype.__update_localization = function () {
-    // write locale to the view class so that CSS can be modifier on per-locale basis
-    this.view.removeClassesByPattern(/locale-/)
+        engine.gameView.addChild(this.view);
 
-    this.view.addClass(`locale-${this.localization.locale.getValue()}`);
-};
+        engine.gameView.size.process(function (x, y) {
+            self.view.size.set(x, y);
 
-/**
- *
- * @param {Engine} engine
- */
-GUIEngine.prototype.startup = function (engine) {
-    this.engine = engine;
-    this.entityManager = engine.entityManager;
+            self.tooltips.contextView.size.set(x, y);
+        });
 
-    const self = this;
+        this.ticker.start();
 
-    /**
-     *
-     * @type {Localization}
-     */
-    const localization = engine.localization;
+        this.localization = localization;
 
-    this.gml.initialize(engine.staticKnowledge, localization);
 
-    this.tooltips.initialize(this.gml, engine.devices.pointer);
-
-    //attach tooltips to GML
-    this.gml.tooltips = this.viewTooltips;
+        //register cursor propagation
+        this.cursor.process(function (newValue, oldValue) {
+            function className(cursorName) {
+                return `cursor-${cursorName}`;
+            }
 
-    this.view.addChild(this.tooltips.contextView);
+            const classList = engine.graphics.domElement.classList;
 
-    engine.gameView.addChild(this.view);
+            if (typeof oldValue === 'string') {
+                classList.remove(className(oldValue));
+            }
 
-    engine.gameView.size.process(function (x, y) {
-        self.view.size.set(x, y);
+            if (typeof newValue === 'string') {
+                classList.add(className(newValue));
+            }
+        });
 
-        self.tooltips.contextView.size.set(x, y);
-    });
+        // subscribe to localization changes
+        this.localization.locale.onChanged.add(this.__update_localization, this);
+        this.__update_localization();
 
-    this.ticker.start();
+        return Promise.all([
+            this.tooltips.startup()
+        ]);
+    }
 
-    this.localization = localization;
+    shutdown() {
+        this.windows.reset();
+        this.entityManager = null;
 
+        const pTooltips = this.tooltips.shutdown()
 
-    //register cursor propagation
-    this.cursor.process(function (newValue, oldValue) {
-        function className(cursorName) {
-            return `cursor-${cursorName}`;
-        }
+        // unsubscribe from localization changes
+        this.localization.locale.onChanged.remove(this.__update_localization, this);
 
-        const classList = engine.graphics.domElement.classList;
+        return Promise.all([
+            pTooltips
+        ]);
+    }
+}
 
-        if (typeof oldValue === 'string') {
-            classList.remove(className(oldValue));
-        }
+/**
+ *
+ * @param {View} view
+ * @param {EntityComponentDataset} ecd
+ */
+function animateView(view, ecd) {
 
-        if (typeof newValue === 'string') {
-            classList.add(className(newValue));
-        }
-    });
+    const animationTrack = new AnimationTrack(["alpha", "scale"]);
+    animationTrack.addKey(0, [0, 0.95]);
+    animationTrack.addKey(0.2, [1, 1]);
 
-    // subscribe to localization changes
-    this.localization.locale.onChanged.add(this.__update_localization, this);
-    this.__update_localization();
+    animationTrack.addTransition(0, TransitionFunctions.Linear);
 
-    return Promise.all([
-        this.tooltips.startup()
-    ]);
-};
+    const playback = new AnimationTrackPlayback(animationTrack, function (alpha, scale) {
+        this.el.style.opacity = alpha;
+        this.scale.set(scale, scale);
+    }, view);
 
-GUIEngine.prototype.shutdown = function () {
-    this.windows.reset();
-    this.entityManager = null;
+    //force view status to initial key of animation
+    playback.update();
 
-    const pTooltips = this.tooltips.shutdown()
+    playTrackRealTime(playback, ecd);
+}
 
-    // unsubscribe from localization changes
-    this.localization.locale.onChanged.remove(this.__update_localization, this);
+/**
+ *
+ * @param {string} text
+ * @return {View}
+ */
+function createTextView(text) {
+    const content = new View();
+    content.el = document.createElement('div');
+    content.el.classList.add('text');
+    content.el.innerText = text;
 
-    return Promise.all([
-        pTooltips
-    ]);
-};
+    content.size.set(300, 100);
+    return content;
+}
 
 export default GUIEngine;