neo.mjs 6.17.2 → 6.18.1

package/apps/colors/view/ViewportController.mjs

@@ -0,0 +1,277 @@
+import Component from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Colors.view.ViewportController
+ * @extends Neo.controller.Component
+ */
+class ViewportController extends Component {
+    static config = {
+        /**
+         * @member {String} className='Colors.view.ViewportController'
+         * @protected
+         */
+        className: 'Colors.view.ViewportController'
+    }
+
+    /**
+     * @member {String[]} connectedApps=[]
+     */
+    connectedApps = []
+    /**
+     * @member {Number|null} intervalId
+     */
+    intervalId = null
+    /**
+     * @member {Object} widgetIndexMap
+     */
+    widgetIndexMap = {
+        'bar-chart': 3,
+        'pie-chart': 2,
+        table      : 1
+    }
+
+    /**
+     * @param {String} name The name of the reference
+     */
+    async createBrowserWindow(name) {
+        let me              = this,
+            {windowId}      = me,
+            {windowConfigs} = Neo,
+            firstWindowId   = parseInt(Object.keys(windowConfigs)[0]),
+            {basePath}      = windowConfigs[firstWindowId],
+            url             = `${basePath}apps/colors/childapps/widget/index.html?name=${name}`;
+
+        if (me.getModel().getData('openWidgetsAsPopups')) {
+            let widget                     = me.getReference(name),
+                winData                    = await Neo.Main.getWindowData({windowId} ),
+                rect                       = await me.component.getDomRect(widget.vdom.id), // using the vdom id to always get the top-level node
+                {height, left, top, width} = rect;
+
+            height -= 50; // popup header in Chrome
+            left   += winData.screenLeft;
+            top    += (winData.outerHeight - winData.innerHeight + winData.screenTop);
+
+            await Neo.Main.windowOpen({
+                url,
+                windowFeatures: `height=${height},left=${left},top=${top},width=${width}`,
+                windowName    : name
+            })
+        } else {
+            await Neo.Main.windowOpen({url, windowName: '_blank'})
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.appName
+     * @param {Number} data.windowId
+     */
+    async onAppConnect(data) {
+        if (data.appName === 'ColorsWidget') {
+            let me           = this,
+                app          = Neo.apps[data.appName],
+                mainView     = app.mainView,
+                {windowId}   = data,
+                url          = await Neo.Main.getByPath({path: 'document.URL', windowId}),
+                widgetName   = new URL(url).searchParams.get('name'),
+                widget       = me.getReference(widgetName),
+                widgetParent = widget.up();
+
+            me.connectedApps.push(widgetName);
+
+            me.getReference(`detach-${widgetName}-button`).disabled = true;
+
+            widgetParent.remove(widget, false);
+            mainView.add(widget)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.appName
+     * @param {Number} data.windowId
+     */
+    async onAppDisconnect(data) {
+        let me                  = this,
+            {appName, windowId} = data,
+            url                 = await Neo.Main.getByPath({path: 'document.URL', windowId}),
+            widgetName          = new URL(url).searchParams.get('name'),
+            widget              = me.getReference(widgetName),
+            widgetParent        = widget.up();
+
+        // Closing a non-main app needs to move the widget back into its original position & re-enable the show button
+        if (appName === 'ColorsWidget') {
+            widgetParent.remove(widget, false);
+            me.component.insert(me.widgetIndexMap[widgetName], widget);
+
+            me.getReference(`detach-${widgetName}-button`).disabled = false
+        }
+        // Close popup windows when closing or reloading the main window
+        else if (appName === 'Colors') {
+            Neo.Main.windowClose({names: me.connectedApps, windowId})
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onChangeAmountColors(data) {
+        this.updateDataProperty(data, 'amountColors',  data.value)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onChangeAmountColumns(data) {
+        this.updateDataProperty(data, 'amountColumns',  parseInt(data.value.name))
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onChangeAmountRows(data) {
+        this.updateDataProperty(data, 'amountRows',  parseInt(data.value.name))
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onChangeOpenWidgetsAsPopups(data) {
+        this.getModel().setData('openWidgetsAsPopups', data.value)
+    }
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        Neo.currentWorker.on({
+            connect   : me.onAppConnect,
+            disconnect: me.onAppDisconnect,
+            scope     : me
+        })
+    }
+
+    /**
+     *
+     */
+    onComponentConstructed() {
+        super.onComponentConstructed();
+        this.updateWidgets()
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onDetachBarChartButtonClick(data) {
+        await this.createBrowserWindow('bar-chart')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onDetachPieChartButtonClick(data) {
+        await this.createBrowserWindow('pie-chart')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onDetachTableButtonClick(data) {
+        await this.createBrowserWindow('table')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onStopButtonClick(data) {
+        let me = this;
+
+        me.getModel().setData({isUpdating: false});
+
+        if (me.intervalId) {
+            clearInterval(me.intervalId);
+            me.intervalId = null
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onStartButtonClick(data) {
+        let me           = this,
+            intervalTime = 1000 / 60; // assuming 60 FPS
+
+        me.getModel().setData({isUpdating: true});
+
+        if (!me.intervalId) {
+            me.intervalId = setInterval(() => {
+                me.updateWidgets()
+            }, intervalTime)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    updateCharts(data) {
+        this.getReference('bar-chart').chartData = data;
+        this.getReference('pie-chart').chartData = data
+    }
+
+    /**
+     * If the WebSocket stream is not running, we need to pull new data once to see the new setting visually
+     * @param {Object} data The change event data
+     * @param {String} name The VM data property name
+     * @param {Number|Object|null} value The new VM data property value
+     */
+    updateDataProperty(data, name, value) {
+        let model = this.getModel();
+
+        model.setData(name, value);
+
+        if (data.oldValue !== null && !model.getData('isUpdating')) {
+            this.updateWidgets()
+        }
+    }
+
+    /**
+     * @param {Object[]} records
+     */
+    updateTable(records) {
+        let table   = this.getReference('table'),
+            {store} = table;
+
+        if (store.getCount()) {
+            table.bulkUpdateRecords(records)
+        } else {
+            store.data = records
+        }
+    }
+
+    /**
+     *
+     */
+    updateWidgets() {
+        let me    = this,
+            model = me.getModel();
+
+        Colors.backend.ColorService.read({
+            amountColors : model.getData('amountColors'),
+            amountColumns: model.getData('amountColumns'),
+            amountRows   : model.getData('amountRows')
+        }).then(response => {
+            let {data} = response;
+
+            me.updateTable(data.tableData);
+            me.updateCharts(data.summaryData)
+        })
+    }
+}
+
+Neo.setupClass(ViewportController);
+
+export default ViewportController;

package/apps/colors/view/ViewportModel.mjs

@@ -0,0 +1,53 @@
+import Component   from '../../../src/model/Component.mjs';
+import ColorsStore from '../store/Colors.mjs';
+
+/**
+ * @class Colors.view.ViewportModel
+ * @extends Neo.model.Component
+ */
+class ViewportModel extends Component {
+    static config = {
+        /**
+         * @member {String} className='Colors.view.ViewportModel'
+         * @protected
+         */
+        className: 'Colors.view.ViewportModel',
+        /**
+         * @member {Object} data
+         */
+        data: {
+            /**
+             * @member {Number} data.amountColors=10
+             */
+            amountColors: 10,
+            /**
+             * @member {Number} data.amountColumns=10
+             */
+            amountColumns: 10,
+            /**
+             * @member {Number} data.amountRows=10
+             */
+            amountRows: 10,
+            /**
+             * @member {Boolean} data.isUpdating=false
+             */
+            isUpdating: false,
+            /**
+             * @member {Boolean} data.openWidgetsAsPopups=true
+             */
+            openWidgetsAsPopups: true
+        },
+        /**
+         * @member {Object} stores
+         */
+        stores: {
+            colors: {
+                module: ColorsStore
+            }
+        }
+    }
+}
+
+Neo.setupClass(ViewportModel);
+
+export default ViewportModel;

package/apps/portal/Util.mjs

@@ -0,0 +1,11 @@
+/**
+ * @param {String|null} searchString
+ * @returns {Function}
+ */
+export function getSearchParams(searchString) {
+    if (searchString?.startsWith('?')) {
+        searchString = searchString.substring(1)
+    }
+
+    return searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {}
+}

package/apps/portal/childapps/preview/neo-config.json

@@ -3,7 +3,7 @@
     "basePath"        : "../../../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-neo-light"],
+    "mainThreadAddons": ["AmCharts", "DragDrop", "Navigator", "Stylesheet"],
+    "themes"          : ["neo-theme-neo-light", "neo-theme-dark"],
     "useSharedWorkers": true
 }

package/apps/portal/neo-config.json

@@ -3,7 +3,8 @@
     "basePath"        : "../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["DragDrop", "HighlightJS", "IntersectionObserver", "MonacoEditor", "Navigator", "ResizeObserver", "Stylesheet"],
+    "mainThreadAddons": ["AmCharts", "DragDrop", "HighlightJS", "IntersectionObserver", "MonacoEditor", "Navigator", "ResizeObserver", "Stylesheet"],
+    "remotesApiUrl"   : "remotes-api.json",
     "themes"          : ["neo-theme-neo-light", "neo-theme-light", "neo-theme-dark"],
     "useSharedWorkers": true
 }

package/apps/portal/remotes-api.json

@@ -0,0 +1,13 @@
+{
+    "namespace": "Colors.backend",
+    "type"     : "websocket",
+    "url"      : "https://still-castle-38841.herokuapp.com/",
+
+    "services": {
+        "ColorService": {
+            "methods": {
+                "read": {"params":  [{"type":  "Object"}]}
+            }
+        }
+    }
+}

package/apps/portal/view/HeaderToolbar.mjs

@@ -31,7 +31,7 @@ class HeaderToolbar extends Base {
             minWidth: 60,
             iconCls : 'neo-logo-blue',
             route   : '/home',
-            text    : 'neo.mjs'
+            text    : 'Neo.mjs'
         }, '->', {
             text : 'Learn',
             route: '/learn'

package/apps/portal/view/ViewportController.mjs

@@ -1,4 +1,5 @@
-import Controller from '../../../src/controller/Component.mjs';
+import Controller        from '../../../src/controller/Component.mjs';
+import {getSearchParams} from '../Util.mjs';
 
 /**
  * @class Portal.view.ViewportController
@@ -11,6 +12,11 @@ class ViewportController extends Controller {
          * @protected
          */
         className: 'Portal.view.ViewportController',
+        /**
+         * @member {String} ntype='viewport-controller'
+         * @protected
+         */
+        ntype: 'viewport-controller',
         /**
          * @member {String|null} defaultHash='/home'
          */
@@ -27,6 +33,73 @@ class ViewportController extends Controller {
         }
     }
 
+    /**
+     * @member {String[]} connectedApps=[]
+     */
+    connectedApps = []
+
+    /**
+     * @param {Object} data
+     * @param {String} data.appName
+     * @param {Number} data.windowId
+     */
+    async onAppConnect(data) {
+        let {appName, windowId} = data,
+            app                 = Neo.apps[appName],
+            mainView            = app.mainView;
+
+        if (appName === 'PortalPreview') {
+            let searchString    = await Neo.Main.getByPath({path: 'location.search', windowId}),
+                livePreviewId   = getSearchParams(searchString).id,
+                livePreview     = Neo.getComponent(livePreviewId),
+                sourceContainer = livePreview.getReference('preview'),
+                tabContainer    = livePreview.tabContainer,
+                sourceView      = sourceContainer.removeAt(0, false);
+
+            livePreview.previewContainer = mainView;
+            mainView.add(sourceView);
+
+            tabContainer.activeIndex = 0; // switch to the source view
+
+            tabContainer.getTabAtIndex(1).disabled = true
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.appName
+     * @param {Number} data.windowId
+     */
+    async onAppDisconnect(data) {
+        let me                  = this,
+            {appName, windowId} = data,
+            app                 = Neo.apps[appName],
+            mainView            = app.mainView;
+
+        // Closing a code preview window needs to drop the preview back into the related main app
+        if (appName === 'PortalPreview') {
+            let searchString    = await Neo.Main.getByPath({path: 'location.search', windowId}),
+                livePreviewId   = getSearchParams(searchString).id,
+                livePreview     = Neo.getComponent(livePreviewId),
+                sourceContainer = livePreview.getReference('preview'),
+                tabContainer    = livePreview.tabContainer,
+                sourceView      = mainView.removeAt(0, false);
+
+            livePreview.previewContainer = null;
+            sourceContainer.add(sourceView);
+
+            livePreview.disableRunSource = true; // will get reset after the next activeIndex change (async)
+            tabContainer.activeIndex = 1;        // switch to the source view
+
+            livePreview.getReference('popout-window-button').disabled = false;
+            tabContainer.getTabAtIndex(1).disabled = false
+        }
+        // Close popup windows when closing or reloading the main window
+        else if (appName === 'Portal') {
+            Neo.Main.windowClose({names: me.connectedApps, windowId})
+        }
+    }
+
     /**
      * @param {Object[]} records
      */
@@ -50,6 +123,21 @@ class ViewportController extends Controller {
         this.getReference('blog-list').filterItems(data)
     }
 
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        Neo.currentWorker.on({
+            connect   : me.onAppConnect,
+            disconnect: me.onAppDisconnect,
+            scope     : me
+        });
+    }
+
     /**
      * @param {Object} params
      * @param {Object} value

package/apps/portal/view/home/MainContainer.mjs

@@ -1,7 +1,9 @@
 import AfterMath  from './parts/AfterMath.mjs';
+import Colors     from './parts/Colors.mjs';
 import Container  from '../../../../src/container/Base.mjs';
-import CoolStuff  from './parts/CoolStuff.mjs';
 import Features   from './parts/Features.mjs';
+import Helix      from './parts/Helix.mjs';
+import How        from './parts/How.mjs';
 import HelloWorld from './parts/HelloWorld.mjs';
 import MainNeo    from './parts/MainNeo.mjs';
 
@@ -24,14 +26,13 @@ class MainContainer extends Container {
          * @member {Object[]} items
          */
         items: [
-            {
-                ntype: 'component',
-                id   : 'progress'
-            },
+            {ntype: 'component', id: 'progress'},
             MainNeo,
             Features,
             HelloWorld,
-            CoolStuff,
+            Helix,
+            Colors,
+            How,
             AfterMath
         ],
         /**
@@ -40,11 +41,38 @@ class MainContainer extends Container {
         scrollable: true,
 
         domListeners: [{
+            intersect(data) {
+                Neo.getComponent(data.targetId)?.activate?.()
+            },
             scroll(event) {
                 this.toggleCls('hide-sidebar', event.scrollTop > 80)
             }
         }]
     }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me             = this,
+            {id, windowId} = me;
+
+        value && setTimeout(() => {
+            Neo.main.addon.IntersectionObserver.register({
+                callback : 'isVisible',
+                id,
+                observe  : ['.page'],
+                root     : `#${id}`,
+                threshold: 1.0,
+                windowId
+            })
+        }, 50)
+    }
 }
 
 Neo.setupClass(MainContainer);

package/apps/portal/view/home/parts/AfterMath.mjs

@@ -28,7 +28,7 @@ class AfterMath extends Container {
         }, {
             cls : 'neo-h2',
             flex: 'none',
-            html: 'More to come her',
+            html: 'More to come here',
             // height: 200
         }, {
             cls : 'neo-content',

package/apps/portal/view/home/parts/Colors.mjs

@@ -0,0 +1,98 @@
+import Container   from '../../../../../src/container/Base.mjs';
+import LivePreview from '../../learn/LivePreview.mjs';
+
+/**
+ * @class Portal.view.home.parts.Colors
+ * @extends Neo.container.Base
+ */
+class Colors extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.Colors'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.Colors',
+
+        cls: ['page', 'cool-stuff'],
+
+        responsive: {
+            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
+            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
+        },
+
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Container,
+            flex  : '1',
+            style : {padding: '2rem'},
+            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+            items : [{
+                cls : 'neo-h1',
+                flex: 'none',
+                html: 'Amazing Potential',
+                vdom: {tag: 'h1'}
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: 'Socket Data',
+                vdom: {tag: 'h2'}
+            }, {
+                flex: 'none',
+                vdom: {tag: 'p'},
+                html: [
+                    'This is similar to the Helix demo — it\'s an extremely fast multi-window app. Click the start button',
+                    'to see the view reflect changes in the data. And the app is multi-window: the table and charts can be',
+                    'undocked into their own windows. In fact, the entire demo can be undocked.'
+                ].join('')
+            }, {
+                flex: 'none',
+                html: 'But the demo differs from the helix example because the data is provided via a <i>socket</i>.',
+                vdom: {tag: 'p'}
+            }, {
+                flex: 'none',
+                vdom: {tag: 'p'},
+                html: [
+                    'Neo.mjs uniquely fits the bill for applications that need real-time visualizations of real-time data, such as',
+                    'stock market trading data and medical or scientific telemetry.'
+                ].join('')
+            }]
+        }, {
+            module: Container,
+            flex  : '2',
+            style : {background: 'lightgray', padding: '20px'},
+            layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+            items : [{
+                module   : LivePreview,
+                cls      : ['page-live-preview'],
+                height   : '100%',
+                reference: 'live-preview',
+
+                value: [
+                    "import Viewport from '../../../../apps/colors/view/Viewport.mjs';",
+                    "",
+                    "class MainView extends Viewport {",
+                    "    static config = {",
+                    "        className: 'Portal.view.Colors',",
+                    "        theme    : 'neo-theme-dark'",
+                    "    }",
+                    "}",
+                    "",
+                    "Neo.setupClass(MainView);"
+                ].join('\n')
+            }]
+        }]
+    }
+
+    /**
+     *
+     */
+    activate() {
+        this.getReference('live-preview').activeView = 'preview'
+    }
+}
+
+Neo.setupClass(Colors);
+
+export default Colors;