neo.mjs 7.6.0 → 7.8.0

package/apps/portal/view/learn/CubeLayoutButton.mjs

@@ -0,0 +1,77 @@
+import Button from '../../../../src/button/Base.mjs';
+
+/**
+ * @class Portal.view.learn.CubeLayoutButton
+ * @extends Neo.button.Base
+ */
+class CubeLayoutButton extends Button {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.learn.CubeLayoutButton'
+         * @protected
+         */
+        className: 'Portal.view.learn.CubeLayoutButton',
+        /**
+         * @member {String|null} activeLayout_=null
+         */
+        activeLayout_: null,
+    }
+
+    /**
+     * @member {Object} activateText='Activate Cube-Layout'
+     */
+    activateText = 'Activate Cube-Layout'
+    /**
+     * @member {Object} deactivateText='Deactivate Cube-Layout'
+     */
+    deactivateText = 'Deactivate Cube-Layout'
+
+    /**
+     * @member {Portal.view.ViewportController} viewportController
+     */
+    get viewportController() {
+        return this.getController('viewport-controller')
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.activeLayout = me.viewportController.mainContentLayout;
+        me.handler      = me.changeLayout.bind(me)
+    }
+
+    /**
+     * Triggered after the activeLayout config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetActiveLayout(value, oldValue) {
+        let me = this;
+
+        if (value) {
+            me.viewportController.mainContentLayout = value;
+
+            if (value === 'card') {
+                me.text = me.activateText
+            } else if (value === 'mixed') {
+                me.text = me.deactivateText
+            }
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    changeLayout(data) {
+        let me = this;
+
+        me.activeLayout = me.text === me.activateText ? 'mixed' : 'card'
+    }
+}
+
+export default Neo.setupClass(CubeLayoutButton);

package/apps/portal/view/learn/MainContainerController.mjs

@@ -1,4 +1,5 @@
 import Controller        from '../../../../src/controller/Component.mjs';
+import CubeLayoutButton  from './CubeLayoutButton.mjs'; // required for the Portal App .md file
 import {getSearchParams} from '../../Util.mjs';
 
 /**

package/apps/portal/view/learn/PageContainer.mjs

@@ -1,6 +1,6 @@
-import Container   from '../../../../src/container/Base.mjs';
-import ContentView from './ContentView.mjs';
-import Toolbar     from '../../../../src/toolbar/Base.mjs';
+import Container        from '../../../../src/container/Base.mjs';
+import ContentComponent from './ContentComponent.mjs';
+import Toolbar          from '../../../../src/toolbar/Base.mjs';
 
 /**
  * @class Portal.view.learn.PageContainer
@@ -29,7 +29,7 @@ class PageContainer extends Container {
          * @member {Object[]} items
          */
         items: [{
-            module   : ContentView,
+            module   : ContentComponent,
             reference: 'content',
             listeners: {
                 edit   : 'onContentEdit',

package/apps/shareddialog/view/DemoDialog.mjs

@@ -28,6 +28,7 @@ class DemoDialog extends Dialog {
          * @member {Object} itemDefaults={labelWidth:70}
          */
         itemDefaults: {
+            flex      : 'none',
             labelWidth: 70
         },
         /**
@@ -35,20 +36,11 @@ class DemoDialog extends Dialog {
          */
         items: [{
             module   : TextField,
-            flex     : 'none',
             labelText: 'Field 1'
         }, {
             module   : TextField,
-            flex     : 'none',
             labelText: 'Field 2'
-        }],
-        /**
-         * @member {Object} wrapperStyle={height:'40%',width:'40%'}
-         */
-        wrapperStyle: {
-            height: '40%',
-            width : '40%'
-        }
+        }]
     }
 }
 

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,9 @@ 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,
 
             dragZoneConfig: {
@@ -126,7 +119,7 @@ class MainContainerController extends ComponentController {
 
         if (me.dockedWindowProxy) {
             me.dockedWindowProxy.destroy(true);
-            me.dockedWindowProxy = null;
+            me.dockedWindowProxy = null
         }
     }
 
@@ -169,15 +162,15 @@ class MainContainerController extends ComponentController {
         } else { // drop the dialog fully into the dragEnd window
             me.mountDialogInOtherWindow({
                 fullyIncludeIntoWindow: true,
-                proxyRect             : proxyRect
+                proxyRect
             })
         }
     }
 
     /**
-     * @param {Boolean} enable
+     * @param {Boolean} enable=true
      */
-    enableOpenDialogButtons(enable) {
+    enableOpenDialogButtons(enable=true) {
         this.getOpenDialogButtons().forEach(button => {
             button.disabled = !enable
         })
@@ -194,9 +187,7 @@ class MainContainerController extends ComponentController {
      *
      */
     getOpenDialogButtons() {
-        return ComponentManager.find({
-            flag: 'open-dialog-button'
-        })
+        return ComponentManager.find({flag: 'open-dialog-button'})
     }
 
     /**
@@ -219,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) {
@@ -260,14 +250,16 @@ class MainContainerController extends ComponentController {
      */
     mountDialogInOtherWindow(data) {
         let me                   = this,
-            appName              = me.component.appName,
+            {appName, windowId}  = me.component,
             dialog               = me.dialog,
             dragEndWindowAppName = me.dockedWindowAppName,
+            dragEndWindowId      = me.dockedWindowId,
             side                 = me.dockedWindowSide,
-            proxyPosition, wrapperStyle;
+            needsSwitch, proxyPosition, wrapperStyle;
 
         if (dialog.appName === dragEndWindowAppName) {
-            dragEndWindowAppName = me.component.appName;
+            dragEndWindowAppName = appName;
+            dragEndWindowId      = windowId;
             side                 = me.getOppositeSide(me.dockedWindowSide)
         }
 
@@ -278,9 +270,10 @@ class MainContainerController extends ComponentController {
         // we need a delay to ensure dialog.Base: onDragEnd() is done.
         // we could use the dragEnd event of the dragZone instead.
         me.timeout(70).then(() => {
-            dialog.appName = dialog.appName === dragEndWindowAppName ? appName : dragEndWindowAppName;
+            needsSwitch = dialog.appName === dragEndWindowAppName;
 
-            // todo: windowI
+            dialog.appName  = needsSwitch ? appName  : dragEndWindowAppName;
+            dialog.windowId = needsSwitch ? windowId : dragEndWindowId;
 
             me.getOpenDialogButtons().forEach(button => {
                 if (button.appName === dialog.appName) {
@@ -307,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
         }
@@ -329,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
      */
@@ -363,16 +373,15 @@ class MainContainerController extends ComponentController {
      *
      */
     onDialogClose() {
-        this.enableOpenDialogButtons(true)
+        this.enableOpenDialogButtons(true);
+        this.dialog = null
     }
 
     /**
      * @param {Object} data
      */
     onDockedPositionChange(data) {
-        if (data.value === true) {
-            this.dockedWindowSide = data.component.value
-        }
+        this.dockedWindowSide = data.value
     }
 
     /**
@@ -380,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)
@@ -392,7 +400,6 @@ class MainContainerController extends ComponentController {
 
             if (Rectangle.leavesSide(dragStartWindowRect, proxyRect, side)) {
                 if (Rectangle.excludes(dragStartWindowRect, proxyRect)) {
-                    console.log('mountDialogInOtherWindow');
                     me.mountDialogInOtherWindow({proxyRect})
                 } else {
                     me.dropDialogBetweenWindows(proxyRect)
@@ -407,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;
@@ -435,19 +442,20 @@ class MainContainerController extends ComponentController {
                     });
 
                     me.dockedWindowProxy = Neo.create({
-                        module    : Component,
-                        appName   : dockedWindowAppName,
-                        autoMount : true,
-                        autoRender: true,
-                        cls       : ['neo-dialog', '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
                     });
-console.log(me.windowId, dockedWindowId);
+
                     // The other window has most likely not loaded The dialog JS module yet,
                     // but the drag proxy is using some CSS rules of it.
+                    // todo: a new helper method to parse an existing instance based on its cmp tree for theme files
                     Neo.currentWorker.insertThemeFiles(dockedWindowId, Neo.dialog.Base.prototype);
+                    Neo.currentWorker.insertThemeFiles(dockedWindowId, Neo.form.field.Text.prototype);
+                    Neo.currentWorker.insertThemeFiles(dockedWindowId, Neo.form.field.trigger.Clear.prototype);
                     Neo.currentWorker.insertThemeFiles(dockedWindowId, Neo.draggable.DragProxyComponent.prototype)
                 } else {
                     me.updateDockedWindowProxyStyle({
@@ -467,7 +475,7 @@ console.log(me.windowId, dockedWindowId);
     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;
@@ -508,35 +516,37 @@ console.log(me.windowId, dockedWindowId);
      * @param {Object} handlerData
      */
     openDockedWindow(handlerData) {
-        Neo.Main.getWindowData().then(data => {
+        let {windowId} = this;
+
+        Neo.Main.getWindowData({windowId}).then(data => {
             let me     = this,
                 dock   = me.dockedWindowSide,
                 size   = me.dockedWindowSize,
                 height, left, top, width;
 
-            switch (dock) {
+            switch(dock) {
                 case 'bottom':
                     height = size;
                     left   = data.screenLeft;
-                    top    = data.outerHeight + data.screenTop - 52;
+                    top    = data.outerHeight + data.screenTop - 62;
                     width  = data.outerWidth;
                     break
                 case 'left':
-                    height = data.outerHeight - 78;
+                    height = data.outerHeight - 86;
                     left   = data.screenLeft  - size;
-                    top    = data.screenTop   + 28;
+                    top    = data.screenTop   + 24;
                     width  = size;
                     break
                 case 'right':
-                    height = data.outerHeight - 78;
+                    height = data.outerHeight - 86;
                     left   = data.outerWidth  + data.screenLeft;
-                    top    = data.screenTop   + 28;
+                    top    = data.screenTop   + 24;
                     width  = size;
                     break
                 case 'top':
                     height = size;
                     left   = data.screenLeft;
-                    top    = data.screenTop - size + 28;
+                    top    = data.screenTop - size + 24;
                     width  = data.outerWidth;
                     break
             }
@@ -544,13 +554,15 @@ console.log(me.windowId, dockedWindowId);
             Neo.Main.windowOpen({
                 url           : 'childapps/shareddialog2/index.html',
                 windowFeatures: `height=${height},left=${left},top=${top},width=${width}`,
+                windowId,
                 windowName    : me.dockedWindowAppName
             });
 
             Neo.main.addon.WindowPosition.registerWindow({
-                dock: dock,
+                dock,
                 name: me.dockedWindowAppName,
-                size: size
+                size,
+                windowId
             })
         })
     }
@@ -574,35 +586,34 @@ console.log(me.windowId, dockedWindowId);
             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.6.0'
+         * @member {String} version='7.8.0'
          */
-        version: '7.6.0'
+        version: '7.8.0'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.6.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.78.0",
+        "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