neo.mjs 6.17.1 → 6.18.0

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

@@ -26,9 +26,12 @@ class HeaderToolbar extends Base {
          * @member {Object[]} items
          */
         items: [{
-            cls  : ['logo'],
-            route: '/home',
-            text : 'neo.mjs'
+            cls     : ['logo'],
+            id      : 'neo-logo-button',
+            minWidth: 60,
+            iconCls : 'neo-logo-blue',
+            route   : '/home',
+            text    : 'Neo.mjs'
         }, '->', {
             text : 'Learn',
             route: '/learn'
@@ -40,30 +43,44 @@ class HeaderToolbar extends Base {
             text : 'Docs',
             route: '/docs'
         }, {
-            cls    : ['github-button'],
-            iconCls: 'fa-brands fa-github',
-            url    : 'https://github.com/neomjs/neo',
-            tooltip: {
-                html     : 'GitHub',
-                showDelay: '0',
-                hideDelay: '0'
-            }
-        }, {
-            iconCls: 'fa-brands fa-slack',
-            url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA',
-            tooltip: {
-                html     : 'Join Slack',
-                showDelay: '0',
-                hideDelay: '0'
-            }
-        }, {
-            iconCls: 'fa-brands fa-discord',
-            url    : 'https://discord.gg/6p8paPq',
-            tooltip: {
-                html     : 'Join Discord',
-                showDelay: '0',
-                hideDelay: '0'
-            }
+            ntype : 'container',
+            layout: 'hbox',
+
+            responsive: {
+                medium: { cls: ['separate-bar'], layout: 'vbox' },
+                large : { cls: ['inline'],       layout: 'hbox' }
+            },
+
+            itemDefaults: {
+                ntype: 'button',
+                ui   : 'ghost'
+            },
+
+            items: [{
+                iconCls: 'fa-brands fa-github',
+                url    : 'https://github.com/neomjs/neo',
+                tooltip: {
+                    html     : 'GitHub',
+                    showDelay: '0',
+                    hideDelay: '0'
+                }
+            }, {
+                iconCls: 'fa-brands fa-slack',
+                url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA',
+                tooltip: {
+                    html     : 'Join Slack',
+                    showDelay: '0',
+                    hideDelay: '0'
+                }
+            }, {
+                iconCls: 'fa-brands fa-discord',
+                url    : 'https://discord.gg/6p8paPq',
+                tooltip: {
+                    html     : 'Join Discord',
+                    showDelay: '0',
+                    hideDelay: '0'
+                }
+            }]
         }]
     }
 }

package/apps/portal/view/Viewport.mjs

@@ -28,6 +28,10 @@ class Viewport extends BaseViewport {
          * @member {Neo.controller.Component} controller=ViewportController
          */
         controller: ViewportController,
+        /**
+         * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         */
+        layout: {ntype: 'vbox', align: 'stretch'},
         /**
          * @member {Object[]} items
          */
@@ -50,6 +54,10 @@ class Viewport extends BaseViewport {
          * @member {Neo.model.Component} model=ViewportModel
          */
         model: ViewportModel,
+        /**
+         * @member {Boolean} monitorSize=true
+         */
+        monitorSize: true,
         /**
          * Values are: large, medium, small, xSmall
          * @member {String|null} size_=null
@@ -62,7 +70,10 @@ class Viewport extends BaseViewport {
      */
     construct(config) {
         super.construct(config);
-        this.addDomListeners([{resize: this.onResize, scope: this}])
+
+        let me = this;
+
+        me.on('resize', me.onResize, me)
     }
 
     /**

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