neo.mjs 6.15.11 → 6.16.1

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/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/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.11",
+    "version": "6.16.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -47,23 +47,23 @@
         "autoprefixer": "^10.4.19",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^12.0.0",
-        "cssnano": "^6.1.2",
-        "envinfo": "^7.12.0",
+        "commander": "^12.1.0",
+        "cssnano": "^7.0.2",
+        "envinfo": "^7.13.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.18",
-        "marked": "^12.0.1",
-        "monaco-editor": "^0.47.0",
+        "inquirer": "^9.2.23",
+        "marked": "^12.0.2",
+        "monaco-editor": "^0.49.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.38",
-        "sass": "^1.75.0",
+        "sass": "^1.77.4",
         "siesta-lite": "5.5.2",
         "url": "^0.11.3",
         "webpack": "^5.91.0",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^4.15.2",
+        "webpack-dev-server": "^5.0.4",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

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;
+}

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

@@ -0,0 +1,44 @@
+$base-color: #1c60a0;
+
+.colors-table-container.neo-table-container {
+    width: 100%;
+
+    .color-1 {
+        background-color: lighten($base-color, 10%);
+    }
+
+    .color-2 {
+        background-color: lighten($base-color, 20%);
+    }
+
+    .color-3 {
+        background-color: lighten($base-color, 30%);
+    }
+
+    .color-4 {
+        background-color: lighten($base-color, 40%);
+    }
+
+    .color-5 {
+        background-color: lighten($base-color, 50%);
+    }
+
+    .neo-index-column {
+        max-width: 40px;
+        min-width: 40px;
+        width    : 40px;
+    }
+
+    .neo-table-view {
+        .neo-table-row {
+            &:hover .neo-table-cell {
+                background-color: #d0aa72;
+                color           : #2b2b2b;
+            }
+        }
+    }
+
+    td, th {
+        min-width: 10%;
+    }
+}

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

@@ -0,0 +1,17 @@
+.colors-viewport {
+    padding: 2em;
+
+    > * {
+        &:not(:first-child) {
+            margin-top: 2em;
+        }
+    }
+
+    .portal-header-toolbar {
+        .neo-button {
+            &:not(:first-child) {
+                margin-left: .5em;
+            }
+        }
+    }
+}

package/resources/scss/src/layout/Card.scss

@@ -9,4 +9,21 @@
             display: none !important;
         }
     }
+
+    .neo-animation-wrapper {
+        display    : flex;
+        transition : transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
+        will-change: transform;
+
+        > * {
+            flex: 1 0 auto;
+        }
+    }
+
+    .neo-relative {
+        height  : 100%;
+        overflow: hidden;
+        position: relative;
+        width   : 100%;
+    }
 }

package/src/component/Base.mjs

@@ -944,6 +944,12 @@ class Base extends CoreBase {
         if (controller && value) {
             controller.windowId = value
         }
+
+        // If a component gets moved into a different window, an update cycle might still be running.
+        // Since the update might no longer get mapped, we want to re-enable this instance for future updates.
+        if (oldValue) {
+            this.isVdomUpdating = false
+        }
     }
 
     /**