npm - neo.mjs - Versions diffs - 4.0.2 → 4.0.5 - Mend

neo.mjs 4.0.2 → 4.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/apps/website/data/blog.json +13 -0
package/examples/component/wrapper/cesiumJS/MainContainer.mjs +38 -0
package/examples/component/wrapper/cesiumJS/MainContainerController.mjs +30 -0
package/examples/component/wrapper/cesiumJS/app.mjs +7 -0
package/examples/component/wrapper/cesiumJS/index.html +11 -0
package/examples/component/wrapper/cesiumJS/neo-config.json +8 -0
package/package.json +1 -1
package/src/DefaultConfig.mjs +10 -1
package/src/Main.mjs +1 -1
package/src/component/wrapper/CesiumJS.mjs +104 -0
package/src/data/connection/Xhr.mjs +1 -1
package/src/layout/Card.mjs +9 -8
package/src/main/addon/CesiumJS.mjs +126 -0
package/src/manager/RemotesApi.mjs +40 -0
package/src/worker/Canvas.mjs +6 -6
package/src/worker/Data.mjs +34 -16
package/src/worker/Manager.mjs +10 -6
package/src/worker/ServiceBase.mjs +6 -6
package/src/worker/VDom.mjs +2 -2

package/apps/website/data/blog.json CHANGED Viewed

@@ -1,4 +1,17 @@
 [
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Apr 13, 2022",
+        "id"          : 52,
+        "image"       : "safari-now-fully-supports-sharedworkers.png",
+        "name"        : "Safari now fully supports SharedWorkers",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/safari-now-fully-supports-sharedworkers-534733b56b4c?source=friends_link&sk=97b83b39629cf79dbe8feff0042c19b3"
+    },
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",

package/examples/component/wrapper/cesiumJS/MainContainer.mjs ADDED Viewed

@@ -0,0 +1,38 @@
+import Button                  from '../../../../src/button/Base.mjs';
+import CesiumJSComponent       from '../../../../src/component/wrapper/CesiumJS.mjs';
+import MainContainerController from './MainContainerController.mjs';
+import Toolbar                 from '../../../../src/container/Toolbar.mjs';
+import Viewport                from '../../../../src/container/Viewport.mjs';
+/**
+ * @class Neo.examples.component.wrapper.cesiumJS.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static getConfig() {return {
+        className : 'Neo.examples.component.wrapper.cesiumJS.MainContainer',
+        autoMount : true,
+        controller: MainContainerController,
+        layout    : {ntype: 'vbox', align: 'stretch'},
+        items: [{
+            module   : CesiumJSComponent,
+            flex     : 1,
+            reference: 'cesium-component'
+        }, {
+            module: Toolbar,
+            flex  : 'none',
+            style : {margin: '20px'},
+            items : [{
+                module : Button,
+                handler: 'onFlyToButtonClick',
+                iconCls: 'fa-solid fa-plane',
+                text   : 'Fly to San Fran'
+            }]
+        }]
+    }}
+}
+Neo.applyClassConfig(MainContainer);
+export default MainContainer;

package/examples/component/wrapper/cesiumJS/MainContainerController.mjs ADDED Viewed

@@ -0,0 +1,30 @@
+import ComponentController from '../../../../src/controller/Component.mjs';
+/**
+ * @class Neo.examples.component.wrapper.cesiumJS.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends ComponentController {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.wrapper.cesiumJS.MainContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.component.wrapper.cesiumJS.MainContainerController'
+    }}
+    /**
+     * @param {Object} data
+     */
+    onFlyToButtonClick(data) {
+        this.getReference('cesium-component').flyTo({
+            destination: [-122.4175, 37.655, 400],
+            heading    : 0.0,
+            pitch      : -15.0
+        });
+    }
+}
+Neo.applyClassConfig(MainContainerController);
+export default MainContainerController;

package/examples/component/wrapper/cesiumJS/app.mjs ADDED Viewed

@@ -0,0 +1,7 @@
+import MainContainer from './MainContainer.mjs';
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.component.wrapper.cesiumJS'
+});

package/examples/component/wrapper/cesiumJS/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo CesiumJS Component</title>
+</head>
+<body>
+    <script src="../../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/component/wrapper/cesiumJS/neo-config.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+    "appPath"         : "examples/component/wrapper/cesiumJS/app.mjs",
+    "basePath"        : "../../../../",
+    "cesiumJsToken"   : "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4NGY3Y2YyNi1hODY3LTQ2YmMtYWIzNS01NzIxOTM5YzQ5MTUiLCJpZCI6MjQ3NDAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODU2OTUzMjB9._j_owvL1zmT8KMPPWEWknoryJCIdVL8bY_E3vgoN8KI",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["CesiumJS", "Stylesheet"]
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.2",
+    "version": "4.0.5",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/DefaultConfig.mjs CHANGED Viewed

@@ -34,6 +34,15 @@ const DefaultConfig = {
      * @type String
      */
     basePath: './',
+    /**
+     * Pass a token in case you are using the CesiumJS main thread addon
+     * See: https://github.com/neomjs/neo/blob/dev/src/main/addon/CesiumJS.mjs
+     * @default null
+     * @memberOf! module:Neo
+     * @name config.cesiumJsToken
+     * @type String|null
+     */
+    cesiumJsToken: null,
     /**
      * The current environment. Valid values: 'development', 'dist/development', 'dist/production'
      * This config will get auto-generated
@@ -44,7 +53,7 @@ const DefaultConfig = {
      */
     environment: 'dist/production',
     /**
-     * In case you are using the GoogleAnalytics mainThreadAddon or useGoogleAnalytics: true,
+     * In case you are using the GoogleAnalytics main thread addon or useGoogleAnalytics: true,
      * you can change the gtag id here. Required for the online examples (gh pages)
      * @default 'UA-153734404-1'
      * @memberOf! module:Neo

package/src/Main.mjs CHANGED Viewed

@@ -170,7 +170,7 @@ class Main extends core.Base {
                 availWidth : screen.availWidth,
                 colorDepth : screen.colorDepth,
                 height     : screen.height,
-                orientation: {angle: screen.orientation.angle, type: screen.orientation.type},
+                orientation: {angle: screen.orientation?.angle, type: screen.orientation?.type},
                 pixelDepth : screen.pixelDepth,
                 width      : screen.width
             },

package/src/component/wrapper/CesiumJS.mjs ADDED Viewed

@@ -0,0 +1,104 @@
+import Component from '../Base.mjs';
+/**
+ * Convenience class to render a CesiumJS component
+ * Requires adding the CesiumJS main thread addon
+ * @class Neo.component.wrapper.CesiumJS
+ * @extends Neo.component.Base
+ */
+class CesiumJS extends Component {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.component.wrapper.CesiumJS'
+         * @protected
+         */
+        className: 'Neo.component.wrapper.CesiumJS',
+        /**
+         * @member {String} ntype='cesiumjs-component'
+         * @protected
+         */
+        ntype: 'cesiumjs-component',
+        /**
+         * @member {Boolean} createOsmBuildings=true
+         */
+        createOsmBuildings: true,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {style: {position: 'relative', height: '100%', width: '100%'}, cn: [
+            {style: {position: 'absolute', height: '100%', width: '100%'}, }
+        ]}
+    }}
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        let me = this;
+        if (value === false && oldValue !== undefined) {
+            Neo.main.addon.CesiumJS.destroy({
+                appName: me.appName,
+                id     : me.id
+            });
+        }
+        super.afterSetMounted(value, oldValue);
+        if (value) {
+            let opts = {
+                appName           : me.appName,
+                createOsmBuildings: me.createOsmBuildings,
+                id                : me.id
+            };
+            setTimeout(() => {
+                Neo.main.addon.CesiumJS.create(opts).then(() => {
+                    me.onComponentMounted();
+                });
+            }, 50);
+        }
+    }
+    /**
+     * @param {Object} data
+     * @param {Number[]} data.destination
+     * @param {Number} data.heading
+     * @param {Number} data.pitch
+     */
+    flyTo(data) {
+        Neo.main.addon.CesiumJS.flyTo({
+            ...data,
+            id: this.id
+        });
+    }
+    /**
+     *
+     */
+    getVdomRoot() {
+        return this.vdom.cn[0];
+    }
+    /**
+     *
+     */
+    getVnodeRoot() {
+        return this.vnode.childNodes[0];
+    }
+    /**
+     *
+     */
+    onComponentMounted() {
+        console.log('onComponentMounted', this.id);
+    }
+}
+Neo.applyClassConfig(CesiumJS);
+export default CesiumJS;

package/src/data/connection/Xhr.mjs CHANGED Viewed

@@ -169,7 +169,7 @@ class Xhr extends Base {
         if (!opts.url) {
             console.error('Neo.Xhr.request without a given url' + JSON.stringify(opts));
         } else {
-            if (!opts.insideNeo && location.href.includes('/node_modules/neo.mjs/') && !location.href.includes('https://neomjs.github.io/')) {
+            if (!opts.insideNeo && location.href.includes('/node_modules/neo.mjs/') && !location.href.startsWith('https://neomjs.github.io/')) {
                 if (opts.url.startsWith('./') || opts.url.startsWith('../')) {
                     opts.url = '../../' + opts.url;
                 }

package/src/layout/Card.mjs CHANGED Viewed

@@ -61,11 +61,12 @@ class Card extends Base {
      * @protected
      */
     async afterSetActiveIndex(value, oldValue) {
-        let me          = this,
-            containerId = me.containerId,
-            container   = Neo.getComponent(containerId) || Neo.get(containerId), // the instance might not be registered yet
-            sCfg        = me.getStaticConfig(),
-            needsUpdate = false,
+        let me                  = this,
+            containerId         = me.containerId,
+            container           = Neo.getComponent(containerId) || Neo.get(containerId), // the instance might not be registered yet
+            sCfg                = me.getStaticConfig(),
+            needsUpdate         = false,
+            removeInactiveCards = me.removeInactiveCards,
             cls, i, isActiveIndex, item, items, len, module, proto, vdom;
         if (Neo.isNumber(value) && container) {
@@ -119,14 +120,14 @@ class Card extends Base {
                     NeoArray.remove(cls, isActiveIndex ? sCfg.inactiveItemCls : sCfg.activeItemCls);
                     NeoArray.add(   cls, isActiveIndex ? sCfg.activeItemCls   : sCfg.inactiveItemCls);
-                    if (me.removeInactiveCards || needsUpdate) {
+                    if (removeInactiveCards || needsUpdate) {
                         item._cls = cls; // silent update
                         item.getVdomRoot().cls = cls;
                         if (isActiveIndex) {
                             delete item.vdom.removeDom;
                             item.activate?.();
-                        } else {
+                        } else if (removeInactiveCards) {
                             item.mounted = false;
                             item.vdom.removeDom = true;
                         }
@@ -136,7 +137,7 @@ class Card extends Base {
                 }
             }
-            if (me.removeInactiveCards || needsUpdate) {
+            if (removeInactiveCards || needsUpdate) {
                 container.vdom = vdom;
             }
         }

package/src/main/addon/CesiumJS.mjs ADDED Viewed

@@ -0,0 +1,126 @@
+import Base      from '../../core/Base.mjs';
+import DomAccess from '../DomAccess.mjs';
+/**
+ * See: https://github.com/CesiumGS/cesium
+ * @class Neo.main.addon.CesiumJS
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class CesiumJS extends Base {
+    /**
+     * @member {Object} viewers={}
+     * @protected
+     */
+    viewers = {}
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.main.addon.CesiumJS'
+         * @protected
+         */
+        className: 'Neo.main.addon.CesiumJS',
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            app: [
+                'create',
+                'createOsmBuildings',
+                'destroy',
+                'flyTo'
+            ]
+        },
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }}
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.loadFiles();
+    }
+    /**
+     * @param {Object} data
+     * @param {Boolean} data.createOsmBuildings
+     * @param {String} data.id
+     */
+    create(data) {
+        this.viewers[data.id] = new Cesium.Viewer(data.id, {
+            terrainProvider: Cesium.createWorldTerrain()
+        });
+        data.createOsmBuildings && this.createOsmBuildings({
+            id: data.id
+        });
+    }
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     */
+    createOsmBuildings(data) {
+        this.viewers[data.id].scene.primitives.add(Cesium.createOsmBuildings());
+    }
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     */
+    destroy(data) {
+        // todo
+        console.log('main.addon.CesiumJS: destroy()', data);
+    }
+    /**
+     * @param {Object} data
+     * @param {Number[]} data.destination
+     * @param {Number} data.heading
+     * @param {String} data.id
+     * @param {Number} data.pitch
+     */
+    flyTo(data) {
+        this.viewers[data.id].camera.flyTo({
+            destination: Cesium.Cartesian3.fromDegrees(...data.destination),
+            orientation: {
+                heading: Cesium.Math.toRadians(data.heading),
+                pitch  : Cesium.Math.toRadians(data.pitch),
+            }
+        });
+    }
+    /**
+     * @protected
+     */
+    loadFiles() {
+        Promise.all([
+            DomAccess.loadScript(    'https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js'),
+            DomAccess.loadStylesheet('https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css')
+        ]).then(() => {
+            this.onFilesLoaded();
+        });
+    }
+    /**
+     *
+     */
+    onFilesLoaded() {
+        Cesium.Ion.defaultAccessToken = Neo.config.cesiumJsToken;
+    }
+}
+Neo.applyClassConfig(CesiumJS);
+let instance = Neo.create(CesiumJS);
+Neo.applyToGlobalNs(instance);
+export default instance;

package/src/manager/RemotesApi.mjs ADDED Viewed

@@ -0,0 +1,40 @@
+import Base from './Base.mjs';
+/**
+ * @class Neo.manager.RemotesApi
+ * @extends Neo.manager.Base
+ * @singleton
+ */
+class RemotesApi extends Base {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.manager.RemotesApi'
+         * @protected
+         */
+        className: 'Neo.manager.RemotesApi',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }}
+    /**
+     *
+     * @param msg
+     * @returns {Promise<any>}
+     */
+    async onMessage(msg) {
+        let response = await Neo.Fetch.get(msg);
+        return response;
+    }
+}
+Neo.applyClassConfig(RemotesApi);
+let instance = Neo.create(RemotesApi);
+Neo.applyToGlobalNs(instance);
+export default instance;

package/src/worker/Canvas.mjs CHANGED Viewed

@@ -37,15 +37,15 @@ class Canvas extends Base {
      *
      */
     afterConnect() {
-        let me      = this,
-            channel = new MessageChannel(),
-            port    = channel.port2;
+        let me             = this,
+            channel        = new MessageChannel(),
+            {port1, port2} = channel;
-        channel.port1.onmessage = me.onMessage.bind(me);
+        port1.onmessage = me.onMessage.bind(me);
-        me.sendMessage('app', {action: 'registerPort', transfer: port}, [port]);
+        me.sendMessage('app', {action: 'registerPort', transfer: port2}, [port2]);
-        me.channelPorts.app = channel.port1;
+        me.channelPorts.app = port1;
     }
     /**

package/src/worker/Data.mjs CHANGED Viewed

@@ -14,6 +14,12 @@ import Xhr          from '../Xhr.mjs';
  * @singleton
  */
 class Data extends Base {
+    /**
+     * @member {Boolean} remotesManagerLoaded=false
+     * @protected
+     */
+    remotesManagerLoaded = false
     static getConfig() {return {
         /**
          * @member {String} className='Neo.worker.Data'
@@ -36,15 +42,15 @@ class Data extends Base {
      *
      */
     afterConnect() {
-        let me      = this,
-            channel = new MessageChannel(),
-            port    = channel.port2;
+        let me             = this,
+            channel        = new MessageChannel(),
+            {port1, port2} = channel;
-        channel.port1.onmessage = me.onMessage.bind(me);
+        port1.onmessage = me.onMessage.bind(me);
-        me.sendMessage('app', {action: 'registerPort', transfer: port}, [port]);
+        me.sendMessage('app', {action: 'registerPort', transfer: port2}, [port2]);
-        me.channelPorts.app = channel.port1;
+        me.channelPorts.app = port1;
     }
     /**
@@ -57,21 +63,33 @@ class Data extends Base {
     /**
      * @param {Object} msg
      */
-    async onRpc(msg) {
-        console.log('onRpc', msg);
-        let response = await Neo.Fetch.get(msg);
+    onRegisterNeoConfig(msg) {
+        super.onRegisterNeoConfig(msg);
-        this.resolve(msg, response);
+        Neo.config.remotesApiUrl && import('../manager/RemotesApi.mjs').then(module => {
+            this.remotesManagerLoaded = true
+        })
     }
     /**
-     * Just for testing
-     * @param {Number} ms
-     * @returns {Promise<unknown>}
+     * @param {Object} msg
      */
-    timeout(ms) {
-        return new Promise(resolve => setTimeout(resolve, ms));
+    async onRpc(msg) {
+        console.log('onRpc', msg);
+        let me = this,
+            response;
+        if (!me.remotesManagerLoaded) {
+            // todo: we could store calls which arrive too early and pass them to the manager once it is ready
+            console.warn('manager.RemotesApi not loaded yet', msg);
+            me.reject(msg);
+        } else {
+            response = await Neo.manager.RemotesApi.onMessage(msg);
+            me.resolve(msg, response);
+        }
     }
 }

package/src/worker/Manager.mjs CHANGED Viewed

@@ -160,21 +160,25 @@ class Manager extends Base {
      * Calls createWorker for each worker inside the this.workers config.
      */
     createWorkers() {
-        let me   = this,
-            hash = location.hash,
+        let me     = this,
+            config = Neo.clone(NeoConfig, true),
+            hash   = location.hash,
             key, value;
+        // remove configs which are not relevant for the workers scope
+        delete config.cesiumJsToken;
         // pass the initial hash value as Neo.configs
         if (hash) {
-            NeoConfig.hash = {
+            config.hash = {
                 hash      : DomEvents.parseHash(hash.substr(1)),
                 hashString: hash.substr(1)
             };
         }
         for ([key, value] of Object.entries(me.workers)) {
-            if (key === 'canvas' && !NeoConfig.useCanvasWorker ||
-                key === 'vdom'   && !NeoConfig.useVdomWorker
+            if (key === 'canvas' && !config.useCanvasWorker ||
+                key === 'vdom'   && !config.useVdomWorker
             ) {
                 continue;
             }
@@ -189,7 +193,7 @@ class Manager extends Base {
             me.sendMessage(key, {
                 action: 'registerNeoConfig',
-                data  : NeoConfig
+                data  : config
             });
         }
     }

package/src/worker/ServiceBase.mjs CHANGED Viewed

@@ -116,18 +116,18 @@ class ServiceBase extends Base {
      * @param {Client} client
      */
     createMessageChannel(client) {
-        let me      = this,
-            channel = new MessageChannel(),
-            port    = channel.port2;
+        let me             = this,
+            channel        = new MessageChannel(),
+            {port1, port2} = channel;
-        channel.port1.onmessage = me.onMessage.bind(me);
+        port1.onmessage = me.onMessage.bind(me);
-        me.sendMessage('app', {action: 'registerPort', transfer: port}, [port]);
+        me.sendMessage('app', {action: 'registerPort', transfer: port2}, [port2]);
         me.channelPorts.push({
             clientId   : client.id,
             destination: 'app',
-            port       : channel.port1
+            port       : port1
         });
     }

package/src/worker/VDom.mjs CHANGED Viewed

@@ -35,11 +35,11 @@ class VDom extends Base {
     afterConnect() {
         let me      = this,
             channel = new MessageChannel(),
-            port    = channel.port2;
+            {port2} = channel;
         channel.port1.onmessage = me.onMessage.bind(me);
-        me.sendMessage('app', {action: 'registerPort', transfer: port}, [port]);
+        me.sendMessage('app', {action: 'registerPort', transfer: port2}, [port2]);
     }
 }