neo.mjs 6.15.10 → 6.16.0

package/apps/colors/view/ViewportController.mjs

@@ -0,0 +1,268 @@
+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 createPopupWindow(name) {
+        let me                         = this,
+            widget                     = me.getReference(name),
+            winData                    = await Neo.Main.getWindowData(),
+            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);
+
+        Neo.Main.windowOpen({
+            url           : `./childapps/widget/index.html?name=${name}`,
+            windowFeatures: `height=${height},left=${left},top=${top},width=${width}`,
+            windowName    : name
+        })
+    }
+
+    /**
+     * @returns {Object[]}
+     */
+    generateData() {
+        let me   = this,
+            data = [],
+            i    = 0,
+            len  = 20;
+
+        for (; i < len; i++) {
+            data.push({
+                id     : `row${i + 1}`,
+                columnA: me.getRandomInteger(),
+                columnB: me.getRandomInteger(),
+                columnC: me.getRandomInteger(),
+                columnD: me.getRandomInteger(),
+                columnE: me.getRandomInteger(),
+                columnF: me.getRandomInteger(),
+                columnG: me.getRandomInteger(),
+                columnH: me.getRandomInteger(),
+                columnI: me.getRandomInteger(),
+                columnJ: me.getRandomInteger()
+            })
+        }
+
+        return data
+    }
+
+    /**
+     * @returns {Number}
+     */
+    getRandomInteger() {
+        return Math.floor(Math.random() * 5) + 1
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.appName
+     * @param {Number} data.windowId
+     */
+    async onAppConnect(data) {
+        if (data.appName !== 'Colors') {
+            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);
+
+            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 code preview window needs to drop the preview back into the related main app
+        if (appName !== 'Colors') {
+            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 {
+            Neo.Main.windowClose({names: me.connectedApps, windowId})
+        }
+    }
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        Neo.currentWorker.on({
+            connect   : me.onAppConnect,
+            disconnect: me.onAppDisconnect,
+            scope     : me
+        })
+    }
+
+    /**
+     *
+     */
+    onComponentConstructed() {
+        super.onComponentConstructed();
+
+        let me   = this,
+            data = me.generateData();
+
+        me.getStore('colors').data = data;
+        me.updateCharts(data)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onDetachBarChartButtonClick(data) {
+        data.component.disabled = true;
+        await this.createPopupWindow('bar-chart')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onDetachPieChartButtonClick(data) {
+        data.component.disabled = true;
+        await this.createPopupWindow('pie-chart')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onDetachTableButtonClick(data) {
+        data.component.disabled = true;
+        await this.createPopupWindow('table')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onStopButtonClick(data) {
+        let me = this;
+
+        if (me.intervalId) {
+            clearInterval(me.intervalId);
+            me.intervalId = null
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onStartButtonClick(data) {
+        let me           = this,
+            intervalTime = 1000 / 60, // assuming 60 FPS
+            store        = me.getStore('colors'),
+            table        = me.getReference('table'),
+            tableView    = table.view;
+
+        if (!me.intervalId) {
+            me.intervalId = setInterval(() => {
+                let data = me.generateData();
+
+                tableView.silentVdomUpdate = true;
+
+                store.items.forEach((record, index) => {
+                    record.set(data[index])
+                });
+
+                tableView.silentVdomUpdate = false;
+
+                tableView.update();
+
+                me.updateCharts(data)
+            }, intervalTime);
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    updateCharts(data) {
+        let startCharCode = 'A'.charCodeAt(0),
+            colorSummary  = {
+                colorA: 0,
+                colorB: 0,
+                colorC: 0,
+                colorD: 0,
+                colorE: 0
+            },
+            chartData;
+
+        data.forEach(item => {
+            Object.entries(item).forEach(([key, value]) => {
+                if (key !== 'id') {
+                    colorSummary['color' + String.fromCharCode(startCharCode + value - 1)]++
+                }
+            })
+        });
+
+        chartData = [
+            {color: '#247acb', count: colorSummary['colorA']},
+            {color: '#4493de', count: colorSummary['colorB']},
+            {color: '#6face6', count: colorSummary['colorC']},
+            {color: '#9bc5ed', count: colorSummary['colorD']},
+            {color: '#c6def5', count: colorSummary['colorE']}
+        ];
+
+        this.getReference('bar-chart').chartData = chartData;
+        this.getReference('pie-chart').chartData = chartData
+    }
+}
+
+Neo.setupClass(ViewportController);
+
+export default ViewportController;

package/apps/colors/view/ViewportModel.mjs

@@ -0,0 +1,32 @@
+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 {Object} stores
+         */
+        stores: {
+            colors: {
+                module: ColorsStore
+            }
+        }
+    }
+}
+
+Neo.setupClass(ViewportModel);
+
+export default ViewportModel;

package/apps/covid/view/MainContainerController.mjs

@@ -232,7 +232,7 @@ class MainContainerController extends ComponentController {
             record;
 
         if (store.getCount() > 0) {
-            if (Neo.isObject(value)) {
+            if (Neo.isRecord(value)) {
                 record = value;
                 value  = value[component.displayField];
             } else {

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

@@ -56,11 +56,11 @@ class Viewport extends Container {
 
             items: [{
                 module: ContentBox,
-                header: 'Quick Application Development',
+                header: 'Next-Generation Runtime',
                 route : '#/learn/WhyNeo-Quick',
 
                 content: [
-                    'Property lifecycle hooks',
+                    'Multi-threaded',
                     'Elegant state management',
                     'Simple and powerful debugging'
                 ]
@@ -74,16 +74,6 @@ class Viewport extends Container {
                     'Over 40,000 delta updates per second',
                     'Item 3'
                 ]
-            }, {
-                module: ContentBox,
-                header: 'Multi Window Apps',
-                route : '#/learn/WhyNeo-Multi-Window',
-
-                content: [
-                    'Item 1',
-                    'Item 2',
-                    'Item 3'
-                ]
             }]
         }]
     }

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -408,7 +408,7 @@ class MainContainerController extends ComponentController {
             record;
 
         if (store.getCount() > 0) {
-            if (Neo.isObject(value)) {
+            if (Neo.isRecord(value)) {
                 record = value;
                 value  = value[component.displayField]
             } else {

package/buildScripts/webpack/json/myApps.template.json

@@ -1,5 +1,6 @@
 {
     "apps": [
+        "Colors",
         "Covid",
         "Docs",
         "Form",

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.15.10'
+         * @member {String} version='6.15.11'
          */
-        version: '6.15.10'
+        version: '6.15.11'
     }
 
     /**

package/examples/layout/card/MainContainer.mjs

@@ -0,0 +1,148 @@
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import Container             from '../../../src/container/Base.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+import Radio                 from '../../../src/form/field/Radio.mjs';
+import Toolbar               from '../../../src/toolbar/Base.mjs';
+
+/**
+ * @class Neo.examples.layout.card.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.layout.card.MainContainer',
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me       = this,
+            {layout} = me.exampleComponent.getItem('card-container');
+
+        return [{
+            module        : Radio,
+            checked       : layout.slideDirection === 'horizontal',
+            hideValueLabel: false,
+            labelText     : 'slideDirection',
+            listeners     : {change: me.onRadioLayoutChange.bind(me, 'slideDirection', 'horizontal')},
+            name          : 'slideDirection',
+            valueLabelText: 'horizontal'
+        }, {
+            module        : Radio,
+            checked       : layout.slideDirection === 'vertical',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioLayoutChange.bind(me, 'slideDirection', 'vertical')},
+            name          : 'slideDirection',
+            valueLabelText: 'vertical'
+        }, {
+            module        : Radio,
+            checked       : layout.slideDirection === null,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioLayoutChange.bind(me, 'slideDirection', null)},
+            name          : 'slideDirection',
+            valueLabelText: 'null'
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'height',
+            listeners : {change: me.onConfigChange.bind(me, 'height')},
+            maxValue  : 300,
+            minValue  : 30,
+            stepSize  : 5,
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.height
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'width',
+            listeners : {change: me.onConfigChange.bind(me, 'width')},
+            maxValue  : 300,
+            minValue  : 100,
+            stepSize  : 5,
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.width
+        }];
+    }
+
+    /**
+     * @returns {Neo.component.Base}
+     */
+    createExampleComponent() {
+        return Neo.create({
+            module   : Container,
+            height   : 300,
+            width    : 400,
+
+            items: [{
+                module   : Container,
+                layout   : {ntype: 'card', slideDirection: 'horizontal'},
+                reference: 'card-container',
+
+                items: [{
+                    style: {backgroundColor: 'red'}
+                }, {
+                    style: {backgroundColor: 'blue'}
+                }, {
+                    style: {backgroundColor: 'green'}
+                }]
+            }, {
+                module: Toolbar,
+                flex  : 'none',
+                style : {marginTop: '1em'},
+
+                items: [{
+                    disabled: true,
+                    handler  : 'up.onPrevButtonClick',
+                    reference: 'prev-button',
+                    text     : 'Prev'
+                }, '->', {
+                    handler  : 'up.onNextButtonClick',
+                    reference: 'next-button',
+                    text     : 'Next'
+                }]
+            }]
+        })
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onNextButtonClick(data) {
+        let cardContainer = this.getItem('card-container'),
+            {layout}      = cardContainer;
+
+        layout.activeIndex++;
+        data.component.disabled = layout.activeIndex === cardContainer.items.length - 1;
+        this.getItem('prev-button').disabled = false
+    }
+
+    /**
+     * @param {String} config
+     * @param {String} value
+     * @param {Object} opts
+     */
+    onRadioLayoutChange(config, value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            this.getItem('card-container').layout[config] = value
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onPrevButtonClick(data) {
+        let cardContainer = this.getItem('card-container'),
+            {layout}      = cardContainer;
+
+        layout.activeIndex--;
+        data.component.disabled = layout.activeIndex === 0;
+        this.getItem('next-button').disabled = false
+    }
+}
+
+Neo.setupClass(MainContainer);
+
+export default MainContainer;

package/examples/layout/card/app.mjs

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

package/examples/layout/card/index.html

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

package/examples/layout/card/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/layout/card/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.15.10",
+    "version": "6.16.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,8 +52,8 @@
         "envinfo": "^7.12.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.18",
-        "marked": "^12.0.1",
+        "inquirer": "^9.2.19",
+        "marked": "^12.0.2",
         "monaco-editor": "^0.47.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",

package/resources/data/deck/learnneo/pages/2023-10-14T19-25-08-153Z.md

@@ -22,10 +22,10 @@ The `docs` directory holds the Neo.mjs API docs.
 ## The structure of a simple app
 
 In order to discuss the structure of an app, we'll create a simple starter 
-app vis this script, run from the workspace. The script prompts for various 
+app via this script, run from the workspace. The script prompts for various 
 application settings. 
 
-`npm run create-app-empty`
+`npm run create-app-minimal`
 
 At the first prompt, we'll name the app `Foo`, and accept the default for everything else.
 The script creates an application structured as follows.

package/resources/data/deck/learnneo/pages/Earthquakes.md

@@ -41,7 +41,7 @@ In this lab, you'll generate a Neo.mjs workspace and run the starter app.
 
 <details>
 <summary>Wait!</summary>
-You may already have a workspace! If so, you can skip this lab. For example, if you followed the _Getting Started > Setup_ topic, above, you should already have a workspace.
+You may already have a workspace! If so, you can skip this lab. For example, if you followed the <a href="#/learn/Setup">Getting Started > Setup</a> topic, above, you should already have a workspace.
 
 If you don't have a workspace, then continue on to the next step.
 </details>
@@ -125,7 +125,7 @@ Parallel processing &mdash; along wih the efficient way the vdom worker applies
 If you look in the `package.json` script block you'll see several scripts used for generating applications 
 and classes, doing builds, and starting a server. We'll use several of them throughout the tutorials.
 
-- create-app &mdash; creates a simple demo app
+- &mdash; creates a simple demo app
 - create-app-minimal &mdash; creates a application shell with no content
 - server-start &mdash; starts a server with webroot set to the workspace
 - build-all &mdash; builds minimized versions of your apps
@@ -146,7 +146,7 @@ In this lab you'll create a starter app and add a single component.
 Use a terminal window to navigate to the workspace and run the following script. Use "Earthquakes"
 as the app name, and defaults for everything else.
 
-    npm run generate-app-minimal
+    npm run create-app-minimal
 
 After the script runs yous should see these files in the `app/earthquakes` directory.
 

package/resources/data/deck/learnneo/pages/Setup.md

@@ -22,4 +22,4 @@ Then run the following command, choosing the defaults for each prompt.
 
 When you're finished you should have a Neo.mjs workspace, as described in the _Workspaces and Applications_ topic, which follows.
 
-
+It's probably a good idea to do an `npm install` in the workspace as soon as you've created it.

package/resources/data/deck/learnneo/pages/WhyNeo-Speed.md

@@ -20,7 +20,7 @@ Click on Preview, then use your mouse or trackpad to pan and zoom — the he
 If you move quickly, you might reach 20,000 or 30,000 delta updates per second. We've seen some examples that go over 40,000 updates per 
 second — but we've never actually hit the limit.
 
-<pre data-neo>
+<pre data-neo data-read-only>
 import Base from '../../../../src/container/Base.mjs';
 import Helix from '../../../../src/component/Helix.mjs';
 class Foo extends Base {

package/resources/data/deck/learnneo/tree.json

@@ -41,7 +41,7 @@
         {"name": "Other JavaScript Class Features",         "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T20-20-37-336Z"},
         {"name": "Super",                                   "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T21-58-25-809Z"},
         {"name": "New Node",                                "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-31T13-59-37-550Z"},
-    {"name": "Appendix",                                    "parentId": null,                                 "id": "appendix",  "collapsed":  true},
+    {"name": "Appendix",                                    "parentId": null,                                 "id": "appendix",  "hidden":  true, "collapsed":  true},
         {"name": "Stylesheet",                              "parentId": "appendix",          "isLeaf": true,  "id": "stylesheet"},
         {"name": "Test",                                    "parentId": "appendix",          "isLeaf": true,  "id": "TestLivePreview"}
 ]}

package/resources/scss/src/apps/colors/BarChartComponent.scss

@@ -0,0 +1,3 @@
+.colors-bar-chart {
+    border: 1px solid #555;
+}

package/resources/scss/src/apps/colors/PieChartComponent.scss

@@ -0,0 +1,3 @@
+.colors-pie-chart {
+    border: 1px solid #555;
+}