neo.mjs 7.7.0 → 7.8.0

package/apps/shareddialog/view/MainContainerController.mjs

@@ -2,6 +2,7 @@ import Component           from '../../../src/component/Base.mjs';
 import ComponentController from '../../../src/controller/Component.mjs';
 import ComponentManager    from '../../../src/manager/Component.mjs';
 import DemoDialog          from './DemoDialog.mjs';
+import DragProxyComponent  from '../../../src/draggable/DragProxyComponent.mjs';
 import NeoArray            from '../../../src/util/Array.mjs';
 import Rectangle           from '../../../src/util/Rectangle.mjs';
 
@@ -16,63 +17,53 @@ class MainContainerController extends ComponentController {
          * @protected
          */
         className: 'SharedDialog.view.MainContainerController',
-        /**
-         * @member {String[]} connectedApps=[]
-         */
-        connectedApps: [],
-        /**
-         * @member {String} currentTheme='neo-theme-light'
-         */
-        currentTheme: 'neo-theme-light',
-        /**
-         * @member {String} dockedWindowAppName='SharedDialog2'
-         */
-        dockedWindowAppName: 'SharedDialog2',
-        /**
-         * @member {Number|null} dockedWindowId=null
-         */
-        dockedWindowId: null,
-        /**
-         * @member {Neo.component.Base|null} dockedWindowProxy=null
-         */
-        dockedWindowProxy: null,
         /**
          * Valid values: bottom, left, right, top
          * @member {String} dockedWindowSide_='right'
          */
         dockedWindowSide_: 'right',
-        /**
-         * @member {Number} dockedWindowSize=500
-         */
-        dockedWindowSize: 620,
-        /**
-         * @member {Object} dialogRect=null
-         */
-        dialogRect: null,
-        /**
-         * @member {Object} dragStartWindowRect=null
-         */
-        dragStartWindowRect: null,
-        /**
-         * @member {Number|null} targetWindowSize=0
-         */
-        targetWindowSize: 0
     }
 
     /**
-     * The App worker will receive connect & disconnect events inside the SharedWorkers context
+     * @member {String[]} connectedApps=[]
      */
-    onConstructed() {
-        super.onConstructed();
-
-        let me = this;
-
-        Neo.currentWorker.on({
-            connect   : me.onAppConnect,
-            disconnect: me.onAppDisconnect,
-            scope     : me
-        })
-    }
+    connectedApps = []
+    /**
+     * @member {String} currentTheme='neo-theme-light'
+     */
+    currentTheme = 'neo-theme-light'
+    /**
+     * @member {String} dockedWindowAppName='SharedDialog2'
+     */
+    dockedWindowAppName = 'SharedDialog2'
+    /**
+     * @member {Number|null} dockedWindowId=null
+     */
+    dockedWindowId = null
+    /**
+     * @member {Neo.component.Base|null} dockedWindowProxy=null
+     */
+    dockedWindowProxy = null
+    /**
+     * @member {Number} dockedWindowSize=500
+     */
+    dockedWindowSize = 620
+    /**
+     * @member {Object} dialogRect=null
+     */
+    dialogRect = null
+    /**
+     * @member {Object} dragStartWindowRect=null
+     */
+    dragStartWindowRect = null
+    /**
+     * @member {String|null} previousTheme=null
+     */
+    previousTheme = null
+    /**
+     * @member {Number|null} targetWindowSize=0
+     */
+    targetWindowSize = 0
 
     /**
      * Triggered after the dockedWindowSide config got changed
@@ -103,7 +94,7 @@ class MainContainerController extends ComponentController {
             animateTargetId    : data.component.id,
             appName,
             boundaryContainerId: null,
-            cls                : [me.currentTheme, 'neo-dialog', 'neo-panel', 'neo-container'],
+            cls                : [me.currentTheme],
             height             : 200,
             width              : 300,
             windowId,
@@ -128,7 +119,7 @@ class MainContainerController extends ComponentController {
 
         if (me.dockedWindowProxy) {
             me.dockedWindowProxy.destroy(true);
-            me.dockedWindowProxy = null;
+            me.dockedWindowProxy = null
         }
     }
 
@@ -177,9 +168,9 @@ class MainContainerController extends ComponentController {
     }
 
     /**
-     * @param {Boolean} enable
+     * @param {Boolean} enable=true
      */
-    enableOpenDialogButtons(enable) {
+    enableOpenDialogButtons(enable=true) {
         this.getOpenDialogButtons().forEach(button => {
             button.disabled = !enable
         })
@@ -196,9 +187,7 @@ class MainContainerController extends ComponentController {
      *
      */
     getOpenDialogButtons() {
-        return ComponentManager.find({
-            flag: 'open-dialog-button'
-        })
+        return ComponentManager.find({flag: 'open-dialog-button'})
     }
 
     /**
@@ -221,9 +210,8 @@ class MainContainerController extends ComponentController {
      * @return {{left: String, top: String}}
      */
     getProxyPosition(proxyRect, side, fullyIncludeIntoWindow=false) {
-        let me                  = this,
-            dragStartWindowRect = me.dragStartWindowRect,
-            targetWindowSize    = me.targetWindowSize,
+        let me                                      = this,
+            {dragStartWindowRect, targetWindowSize} = me,
             left, top;
 
         switch(side) {
@@ -312,16 +300,16 @@ class MainContainerController extends ComponentController {
      * @param {Number} data.windowId
      */
     onAppConnect(data) {
-        let me   = this,
-            name = data.appName;
+        let me                  = this,
+            {appName, windowId} = data;
 
-        NeoArray.add(me.connectedApps, name);
+        NeoArray.add(me.connectedApps, appName);
 
-        if (name !== 'SharedDialog' && me.currentTheme !== 'neo-theme-light') {
-            me.switchThemeForApp(name, me.currentTheme)
+        if (appName !== 'SharedDialog' && me.currentTheme !== 'neo-theme-light') {
+            me.switchThemeForApp(windowId)
         }
 
-        if (name === me.dockedWindowAppName) {
+        if (appName === me.dockedWindowAppName) {
             me.dockedWindowId = data.windowId;
             me.getOpenDockedWindowButton().disabled = true
         }
@@ -334,29 +322,46 @@ class MainContainerController extends ComponentController {
      * @param {String} data.appName
      */
     onAppDisconnect(data) {
-        let me   = this,
-            name = data.appName;
+        let me                                = this,
+            {connectedApps, dialog, windowId} = me,
+            name                              = data.appName;
 
         if (name === 'SharedDialog') {
             // we want to close all popup windows, which equals to all connected apps minus the main app
-            NeoArray.remove(me.connectedApps, 'SharedDialog');
+            NeoArray.remove(connectedApps, 'SharedDialog');
 
             Neo.Main.windowClose({
-                names: me.connectedApps
+                names: connectedApps,
+                windowId
             })
-        } else {
-            NeoArray.remove(me.connectedApps, name);
+        } if (name === me.dockedWindowAppName) {
+            NeoArray.remove(connectedApps, name);
 
-            Neo.main.addon.WindowPosition.unregisterWindow({
-                name: name
-            })
-        }
+            Neo.main.addon.WindowPosition.unregisterWindow({name, windowId});
+
+            if (dialog && dialog.windowId !== windowId) {
+                me.enableOpenDialogButtons()
+            }
 
-        if (name === me.dockedWindowAppName) {
             me.getOpenDockedWindowButton().disabled = false
         }
     }
 
+    /**
+     * The App worker will receive connect & disconnect events inside the SharedWorkers context
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        Neo.currentWorker.on({
+            connect   : me.onAppConnect,
+            disconnect: me.onAppDisconnect,
+            scope     : me
+        })
+    }
+
     /**
      * @param {Object} data
      */
@@ -368,7 +373,8 @@ class MainContainerController extends ComponentController {
      *
      */
     onDialogClose() {
-        this.enableOpenDialogButtons(true)
+        this.enableOpenDialogButtons(true);
+        this.dialog = null
     }
 
     /**
@@ -383,11 +389,10 @@ class MainContainerController extends ComponentController {
      */
     onDragEnd(data) {
         if (this.hasDockedWindow()) {
-            let me                  = this,
-                dialog              = me.dialog,
-                dragStartWindowRect = me.dragStartWindowRect,
-                proxyRect           = Rectangle.moveTo(me.dialogRect, data.clientX - data.offsetX, data.clientY - data.offsetY),
-                side                = me.dockedWindowSide;
+            let me        = this,
+                {dialog, dragStartWindowRect} = me,
+                proxyRect = Rectangle.moveTo(me.dialogRect, data.clientX - data.offsetX, data.clientY - data.offsetY),
+                side      = me.dockedWindowSide;
 
             if (dialog.appName === me.dockedWindowAppName) {
                 side = me.getOppositeSide(me.dockedWindowSide)
@@ -409,7 +414,7 @@ class MainContainerController extends ComponentController {
     onDragMove(data) {
         if (this.hasDockedWindow()) {
             let me        = this,
-                 {dialogRect, dragStartWindowRect, dockedWindowAppName, dockedWindowId} = me,
+                {dialogRect, dragStartWindowRect, dockedWindowAppName, dockedWindowId} = me,
                 proxyRect = Rectangle.moveTo(dialogRect, data.clientX - data.offsetX, data.clientY - data.offsetY),
                 side      = me.dockedWindowSide,
                 proxyPosition, vdom;
@@ -437,14 +442,12 @@ class MainContainerController extends ComponentController {
                     });
 
                     me.dockedWindowProxy = Neo.create({
-                        module    : Component,
-                        appName   : dockedWindowAppName,
-                        autoMount : true,
-                        autoRender: true,
-                        cls       : ['neo-dialog', 'neo-panel', 'neo-dragproxy'],
-                        parentId  : 'document.body',
-                        vdom      : vdom,
-                        windowId  : dockedWindowId
+                        module          : DragProxyComponent,
+                        appName         : dockedWindowAppName,
+                        cls             : ['neo-dialog', 'neo-panel', 'neo-container'],
+                        moveInMainThread: false,
+                        vdom            : vdom,
+                        windowId        : dockedWindowId
                     });
 
                     // The other window has most likely not loaded The dialog JS module yet,
@@ -472,7 +475,7 @@ class MainContainerController extends ComponentController {
     onDragStart(data) {
         if (this.hasDockedWindow()) {
             let me               = this,
-                appName          = me.component.appName,
+                {appName}        = me.component,
                 dockedHorizontal = me.dockedWindowSide === 'left' || me.dockedWindowSide === 'right';
 
             me.dialogRect = data.dragElementRect;
@@ -583,35 +586,34 @@ class MainContainerController extends ComponentController {
             theme      = 'neo-theme-light';
         }
 
+        me.previousTheme = me.currentTheme;
+        me.currentTheme  = theme;
+
         me.connectedApps.forEach(appName => {
-            me.switchThemeForApp(appName, theme)
+            me.switchThemeForApp(Neo.apps[appName].windowId)
         });
 
-        button.set({
-            iconCls: iconCls,
-            text   : buttonText
-        });
+        button.set({iconCls, text: buttonText});
 
         if (dialog) {
             cls = dialog.cls;
 
-            NeoArray.removeAdd(cls, me.currentTheme, theme);
+            NeoArray.removeAdd(cls, me.previousTheme, me.currentTheme);
 
             dialog.cls = cls
         }
-
-        me.currentTheme = theme
     }
 
     /**
-     * @param {String} appName
-     * @param {String} theme
+     * @param {Number} windowId
      */
-    switchThemeForApp(appName, theme) {
+    switchThemeForApp(windowId) {
+        let {currentTheme, previousTheme} = this;
+
         Neo.main.DomAccess.setBodyCls({
-            appName: appName,
-            add    : [theme],
-            remove : [this.currentTheme]
+            add    : [currentTheme],
+            remove : previousTheme ? [previousTheme]: [],
+            windowId
         })
     }
 

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

@@ -4,10 +4,10 @@
         "Covid",
         "Docs",
         "Form",
-        "Krausest",
         "Portal",
         "RealWorld",
         "RealWorld2",
+        "Route",
         "SharedCovid",
         "SharedDialog"
     ]

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.7.0",
+    "version": "7.8.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -54,13 +54,13 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^10.2.2",
+        "inquirer": "^11.0.2",
         "marked": "^14.1.2",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.47",
-        "sass": "^1.79.2",
+        "sass": "^1.79.3",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.94.0",

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

@@ -3,7 +3,7 @@ Welcome to Neo.mjs! This set of topics contains information to help you use Neo.
 
 ## Topics
 
-### Why Neo?
+### Benefits
 
 Describes technical and business reasons for using Neo.mjs
 

package/resources/data/deck/learnneo/pages/benefits/FormsEngine.md

@@ -1,7 +1,7 @@
 ## Forms include a State-Provider
 
 You do not need to define a state tree on your own.
-It if sufficient to just use namespaces inside the `name` attribute of each field.
+It is sufficient to just use namespaces inside the `name` attribute of each field.
 
 <pre data-neo>
 import Button        from '../button/Base.mjs';

package/resources/data/deck/learnneo/pages/guides/PortalApp.md

@@ -0,0 +1,35 @@
+## Study the Code
+
+As you hopefully have noticed by now, this entire multi-window app is created based on Neo.mjs.
+
+You can learn a lot by studying the code-base carefully:
+<a target="_blank" href="https://github.com/neomjs/neo/tree/dev/apps/portal">Portal App Code</a>
+
+Please give us a heads-up, in case there are specific topics which you would like to see
+getting covered here.
+
+## Easter Eggs
+
+Every good app needs to have some meaningful Easter eggs.
+
+### Examples: Resort TabHeaderButtons via Drag&Drop
+
+Did you notice that you can resort the Tabs inside <a href="#/examples">Examples</a>?
+
+After re-sorting, the routing and the tab.Strip animations will still work. Enjoy!
+
+### Switch the main navigation layout to an animated Cube
+
+Fair warning: this animated layout does require some advanced GPU processing power.
+At the moment, it performs best using Firefox.
+
+The setting will get stored inside the LocalStorage,
+so you will need to click the following Button a 2nd time to deactivate it again.
+Or you can clear the LocalStorage manually.</br></br>
+
+<pre data-neo-component>
+{
+    "className": "Portal.view.learn.CubeLayoutButton",
+    "style"    : {"margin": 0}
+}
+</pre>

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

@@ -32,6 +32,7 @@
         {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
             {"name": "Custom Events",                       "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
             {"name": "DOM Events",                          "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
+        {"name": "Portal App",                              "parentId": "InDepth",                            "id": "guides.PortalApp"},
         {"name": "Tables (Stores)",                         "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
         {"name": "Multi-Window Applications",               "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
         {"name": "Main Thread Addons",                      "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons", "hidden": true},

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '7.7.0'
+     * @default '7.8.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '7.7.0'
+    version: '7.8.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/collection/Base.mjs

@@ -990,12 +990,13 @@ class Base extends CoreBase {
     }
 
     /**
-     * Helper method to check if a given value is either an object or a neo data record
+     * Helper method to check if a given input is either object-like or a key
      * @param {*} value
-     * @returns {Boolean}
+     * @returns {Boolean} returns true for object-like values
      */
     isItem(value) {
-        return Neo.isObject(value) || Neo.isRecord(value)
+        // We can not use Neo.isObject() || Neo.isRecord(), since collections can store neo instances too.
+        return typeof value === 'object'
     }
 
     /**

package/src/container/Base.mjs

@@ -87,7 +87,10 @@ class Base extends Component {
          */
         items_: [],
         /**
-         * @member {Object} layout_={ntype: 'vbox', align: 'stretch'}
+         * It is crucial to define a layout before the container does get rendered.
+         * Meaning: onConstructed() is the latest life-cycle point.
+         * You can use layout: 'base', in case you do not need a layout at all.
+         * @member {Object|String|null} layout_={ntype: 'vbox', align: 'stretch'}
          */
         layout_: {
             ntype: 'vbox',
@@ -135,7 +138,7 @@ class Base extends Component {
     }
 
     /**
-     * @param {Neo.layout.Base} value
+     * @param {Neo.layout.Base|null} value
      * @param {Neo.layout.Base|null} oldValue
      * @protected
      */
@@ -144,15 +147,15 @@ class Base extends Component {
 
         if (me.rendered) {
             oldValue?.removeRenderAttributes();
-            value.applyRenderAttributes();
+            value?.applyRenderAttributes();
 
             me.items.forEach((item, index) => {
                 oldValue?.removeChildAttributes(item, index);
-                value.applyChildAttributes(item, index)
-            });
-
-            oldValue?.destroy()
+                value?.applyChildAttributes(item, index)
+            })
         }
+
+        oldValue?.destroy?.()
     }
 
     /**
@@ -419,6 +422,8 @@ class Base extends Component {
      * @param {Boolean} [silent=false] true to update the vdom silently (useful for destroying multiple child items in a row)
      */
     destroy(updateParentVdom=false, silent=false) {
+        this.layout?.destroy();
+
         this.items?.forEach(item => {
             item.destroy?.(false, true)
         });

package/src/draggable/DragProxyComponent.mjs

@@ -25,9 +25,9 @@ class DragProxyComponent extends Base {
          */
         autoRender: true,
         /**
-         * @member {String[]} cls=['neo-dragproxy']
+         * @member {String[]} baseCls=['neo-dragproxy']
          */
-        cls: ['neo-dragproxy'],
+        baseCls: ['neo-dragproxy'],
         /**
          * @member {Boolean} moveInMainThread=true
          */
@@ -35,28 +35,18 @@ class DragProxyComponent extends Base {
     }
 
     /**
-     * @param {Object} config
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
      */
-    construct(config) {
-        super.construct(config);
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
 
-        let me = this;
-
-        me.on('mounted', me.onMounted, me)
-    }
-
-    /**
-     * @param {String} id
-     */
-    onMounted(id) {
-        if (this.moveInMainThread) {
+        if (value && this.moveInMainThread) {
             let {appName, id, windowId} = this;
 
-            Neo.main.addon.DragDrop.setDragProxyElement({
-                appName,
-                id,
-                windowId
-            })
+            Neo.main.addon.DragDrop.setDragProxyElement({appName, id, windowId})
         }
     }
 }