neo.mjs 6.17.2 → 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

@@ -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,8 @@
 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 HelloWorld from './parts/HelloWorld.mjs';
 import MainNeo    from './parts/MainNeo.mjs';
 
@@ -24,14 +25,12 @@ class MainContainer extends Container {
          * @member {Object[]} items
          */
         items: [
-            {
-                ntype: 'component',
-                id   : 'progress'
-            },
+            {ntype: 'component', id: 'progress'},
             MainNeo,
             Features,
             HelloWorld,
-            CoolStuff,
+            Colors,
+            Helix,
             AfterMath
         ],
         /**

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/{CoolStuff.mjs → Colors.mjs}

@@ -2,16 +2,16 @@ import Container   from '../../../../../src/container/Base.mjs';
 import LivePreview from '../../learn/LivePreview.mjs';
 
 /**
- * @class Portal.view.home.parts.CoolStuff
+ * @class Portal.view.home.parts.Colors
  * @extends Neo.container.Base
  */
-class CoolStuff extends Container {
+class Colors extends Container {
     static config = {
         /**
-         * @member {String} className='Portal.view.home.parts.CoolStuff'
+         * @member {String} className='Portal.view.home.parts.Colors'
          * @protected
          */
-        className: 'Portal.view.home.parts.CoolStuff',
+        className: 'Portal.view.home.parts.Colors',
 
         cls: ['page', 'cool-stuff'],
 
@@ -31,42 +31,34 @@ class CoolStuff extends Container {
             items : [{
                 cls : 'neo-h1',
                 flex: 'none',
-                html: 'Cool Stuff'
+                html: 'Colors Dashboard'
             }, {
                 cls : 'neo-h2',
                 flex: 'none',
-                html: 'WOW - See the power of Neo',
-                // height: 200
+                html: 'Expand the widgets into multiple Windows'
             }, {
                 cls : 'neo-content',
                 flex: 'none',
-                html: 'Neo uses several cores to run the application. See the spinner on the page?',
-                // height: 200
+                html: 'The State Management will continue to work.'
             }]
         }, {
             module: Container,
-            flex  : '0.8',
-            // responsive: {
-            //     medium: {flex: '1.2'},
-            //     large: {flex: '0.6'}
-            // },
+            flex  : '2',
             style : {background: 'grey', padding: '20px'},
             layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
             items : [{
-                module: LivePreview,
-                cls   : ['page-live-preview'],
-                style : {background: 'white'},
-                value : [
-                    "import Container from '../../../../src/container/Base.mjs';",
+                module    : LivePreview,
+                activeView: 'preview',
+                cls       : ['page-live-preview'],
+                height    : '100%',
+
+                value: [
+                    "import Viewport from '../../../../apps/colors/view/Viewport.mjs';",
                     "",
-                    "class MainView extends Container {",
+                    "class MainView extends Viewport {",
                     "    static config = {",
-                    "        className: 'Portal.view.MainView',",
-                    "        layout   : {ntype:'vbox', align:'stretch'},",
-                    "        items    : [{",
-                    "            module: Container,",
-                    "            html  : 'Hello World'",
-                    "        }]",
+                    "        className: 'Portal.view.Colors',",
+                    "        theme    : 'neo-theme-dark'",
                     "    }",
                     "}",
                     "",
@@ -77,6 +69,6 @@ class CoolStuff extends Container {
     }
 }
 
-Neo.setupClass(CoolStuff);
+Neo.setupClass(Colors);
 
-export default CoolStuff;
+export default Colors;