neo.mjs 8.25.0 → 8.26.0

package/apps/ServiceWorker.mjs

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

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

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.25.0'
+                html  : 'v8.26.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/ControlsContainer.mjs

@@ -28,8 +28,9 @@ class ControlsContainer extends Container {
             handler: 'up.onControlsToggleButtonClick',
             iconCls: 'fas fa-bars'
         }, {
-            module: TabContainer,
-            cls   : ['neo-examples-bigdata-controls-container-content'],
+            module  : TabContainer,
+            cls     : ['neo-examples-bigdata-controls-container-content'],
+            sortable: true,
 
             items: [{
                 module: Container,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.25.0",
+    "version": "8.26.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/tab/Container.scss

@@ -31,9 +31,4 @@
         border  : var(--tab-container-content-border);
         overflow: hidden;
     }
-
-    .neo-tab-header-toolbar {
-        background-color: transparent;
-        padding         : 0;
-    }
 }

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -2401,7 +2401,7 @@ class Component extends Base {
     /**
      * Change multiple configs at once, ensuring that all afterSet methods get all new assigned values
      * @param {Object} values={}
-     * @param {Boolean} [silent=false]
+     * @param {Boolean} silent=false
      * @returns {Promise<*>}
      */
     set(values={}, silent=false) {

package/src/draggable/grid/header/toolbar/SortZone.mjs

@@ -18,6 +18,10 @@ class SortZone extends BaseSortZone {
          * @protected
          */
         ntype: 'grid-header-toolbar-sortzone',
+        /**
+         * @member {Boolean} adjustItemRectsToParent=false
+         */
+        adjustItemRectsToParent: false,
         /**
          * @member {String|null} itemMargin='1px'
          * @protected

package/src/draggable/toolbar/SortZone.mjs

@@ -17,6 +17,13 @@ class SortZone extends DragZone {
          * @protected
          */
         ntype: 'toolbar-sortzone',
+        /**
+         * Depending on the parent structure using position absolute and relative, it can be needed to subtract
+         * the x & y parent rect values from the item rects.
+         * For tab.header.Toolbar it is needed, for grid.header.Toolbar it is not
+         * @member {Boolean} adjustItemRectsToParent=true
+         */
+        adjustItemRectsToParent: true,
         /**
          * @member {Boolean} alwaysFireDragMove=true
          */
@@ -161,22 +168,25 @@ class SortZone extends DragZone {
             return
         }
 
-        let me          = this,
-            index       = me.currentIndex,
-            {itemRects} = me,
-            maxItems    = itemRects.length - 1,
-            reversed    = me.reversedLayoutDirection,
+        let me                 = this,
+            {clientX, clientY} = data,
+            index              = me.currentIndex,
+            {itemRects}        = me,
+            maxItems           = itemRects.length - 1,
+            ownerX             = me.adjustItemRectsToParent ? me.ownerRect.x : 0,
+            ownerY             = me.adjustItemRectsToParent ? me.ownerRect.y : 0,
+            reversed           = me.reversedLayoutDirection,
             delta, isOverDragging, isOverDraggingEnd, isOverDraggingStart, itemHeightOrWidth, moveFactor;
 
         if (me.sortDirection === 'horizontal') {
-            delta               = data.clientX + me.scrollLeft - me.offsetX - itemRects[index].left;
-            isOverDraggingEnd   = data.clientX > me.boundaryContainerRect.right;
-            isOverDraggingStart = data.clientX < me.boundaryContainerRect.left;
+            delta               = clientX - ownerX + me.scrollLeft - me.offsetX - itemRects[index].left;
+            isOverDraggingEnd   = clientX > me.boundaryContainerRect.right;
+            isOverDraggingStart = clientX < me.boundaryContainerRect.left;
             itemHeightOrWidth   = 'width'
         } else {
-            delta               = data.clientY + me.scrollTop - me.offsetY - itemRects[index].top;
-            isOverDraggingEnd   = data.clientY > me.boundaryContainerRect.bottom;
-            isOverDraggingStart = data.clientY < me.boundaryContainerRect.top;
+            delta               = clientY - ownerY + me.scrollTop - me.offsetY - itemRects[index].top;
+            isOverDraggingEnd   = clientY > me.boundaryContainerRect.bottom;
+            isOverDraggingStart = clientY < me.boundaryContainerRect.top;
             itemHeightOrWidth   = 'height'
         }
 
@@ -243,11 +253,11 @@ class SortZone extends DragZone {
             Object.assign(me, {
                 currentIndex           : index,
                 dragElement            : VDomUtil.find(owner.vdom, button.id).vdom,
-                dragProxyConfig        : {...me.dragProxyConfig, cls : [...owner.cls]},
+                dragProxyConfig        : {...me.dragProxyConfig, cls: [...owner.cls]},
                 indexMap               : indexMap,
-                ownerStyle             : {height: ownerStyle.height, width : ownerStyle.width},
+                ownerStyle             : {height: ownerStyle.height, width: ownerStyle.width},
                 reversedLayoutDirection: layout.direction === 'column-reverse' || layout.direction === 'row-reverse',
-                sortDirection          : owner.layout.ntype === 'layout-vbox' ? 'vertical' : 'horizontal',
+                sortDirection          : layout.direction.includes('row') ? 'horizontal' : 'vertical',
                 startIndex             : index
             });
 
@@ -273,6 +283,12 @@ class SortZone extends DragZone {
                 owner.style = ownerStyle;
 
                 itemRects.shift();
+
+                me.adjustItemRectsToParent && itemRects.forEach(rect => {
+                    rect.x -= me.ownerRect.x;
+                    rect.y -= me.ownerRect.y
+                });
+
                 me.itemRects = itemRects;
 
                 owner.items.forEach((item, index) => {

package/src/layout/Base.mjs

@@ -154,6 +154,37 @@ class Layout extends Base {
             container.wrapperCls = wrapperCls
         }
     }
+
+    /**
+     * Change multiple configs at once, ensuring that all afterSet methods get all new assigned values
+     * @param {Object} values={}
+     * @param {Boolean} silent=false
+     * @returns {Promise<*>}
+     */
+    set(values={}, silent=false) {
+        let me          = this,
+            {container} = me;
+
+        container.silentVdomUpdate = true;
+
+        super.set(values);
+
+        container.silentVdomUpdate = false;
+
+        if (silent || !container.needsVdomUpdate) {
+            return Promise.resolve()
+        } else {
+            return container.promiseUpdate()
+        }
+    }
+
+    /**
+     * Convenience shortcut calling set() with the silent flag
+     * @param {Object} values={}
+     */
+    setSilent(values={}) {
+        return this.set(values, true)
+    }
 }
 
 export default Neo.setupClass(Layout);

package/src/layout/Flexbox.mjs

@@ -248,18 +248,10 @@ class Flexbox extends Base {
 
         NeoArray.remove(wrapperCls, prefix + 'container');
 
-        if (me.align) {
-            NeoArray.remove(wrapperCls, prefix + 'align-' + me.align)
-        }
-        if (me.direction) {
-            NeoArray.remove(wrapperCls, prefix + 'direction-' + me.direction)
-        }
-        if (me.pack) {
-            NeoArray.remove(wrapperCls, prefix + 'pack-' + me.pack)
-        }
-        if (me.wrap) {
-            NeoArray.remove(wrapperCls, prefix + 'wrap-' + me.wrap)
-        }
+        me.align     && NeoArray.remove(wrapperCls, prefix + 'align-'     + me.align);
+        me.direction && NeoArray.remove(wrapperCls, prefix + 'direction-' + me.direction);
+        me.pack      && NeoArray.remove(wrapperCls, prefix + 'pack-'      + me.pack);
+        me.wrap      && NeoArray.remove(wrapperCls, prefix + 'wrap-'      + me.wrap);
 
         container.wrapperCls = wrapperCls
     }

package/src/tab/Container.mjs

@@ -188,12 +188,14 @@ class Container extends BaseContainer {
 
         NeoArray.remove(cls, 'neo-' + oldValue);
         NeoArray.add(cls, 'neo-' + value);
-        me.cls = cls;
+        me.setSilent({cls});
 
         if (me.rendered) {
-            me.layout = me.getLayoutConfig();
-            me.getTabBar().dock = value;
-            me.getTabStrip().cls = ['neo-tab-strip',  'neo-dock-' + value];
+            me.layout.setSilent(me.getLayoutConfig());
+            me.getTabBar().setSilent({dock: value});
+            me.getTabStrip().setSilent({cls: ['neo-tab-strip',  'neo-dock-' + value]});
+
+            me.updateDepth = 2;
 
             me.fire('tabBarPositionChange', {
                 component: me,
@@ -201,6 +203,8 @@ class Container extends BaseContainer {
                 value
             })
         }
+
+        me.update()
     }
 
     /**
@@ -322,32 +326,30 @@ class Container extends BaseContainer {
      * @protected
      */
     getLayoutConfig() {
-        const layoutMap = {
-            'bottom': {
-                ntype: 'vbox',
-                align: 'stretch',
+        let layoutMap = {
+            bottom: {
+                align    : 'stretch',
                 direction: 'column-reverse',
-                pack: 'start'
+                pack     : 'start'
             },
-            'left': {
-                ntype: 'hbox',
-                align: 'stretch',
+            left: {
+                align    : 'stretch',
                 direction: 'row',
-                pack: 'start'
+                pack     : 'start'
             },
-            'right': {
-                ntype: 'hbox',
-                align: 'stretch',
+            right: {
+                align    : 'stretch',
                 direction: 'row-reverse',
-                pack: 'start'
+                pack     : 'start'
             },
-            'top': {
-                ntype: 'vbox',
-                align: 'stretch'
+            top: {
+                align    : 'stretch',
+                direction: 'column',
+                pack     : 'start'
             }
         };
 
-        return layoutMap[this.tabBarPosition] || null;
+        return layoutMap[this.tabBarPosition] || null
     }
 
     /**
@@ -505,7 +507,7 @@ class Container extends BaseContainer {
      *
      */
     onConstructed() {
-        this.layout = this.getLayoutConfig(); // silent update
+        this.layout = {ntype: 'flexbox', ...this.getLayoutConfig()};
         super.onConstructed()
     }
 

package/src/tab/header/Toolbar.mjs

@@ -96,14 +96,13 @@ class Toolbar extends BaseToolbar {
             case 'bottom':
             case 'top':
                 layoutConfig = {
-                    ntype: 'hbox',
-                    align: 'center',
-                    pack : 'start'
+                    align    : 'center',
+                    direction: 'row',
+                    pack     : 'start'
                 };
                 break
             case 'left':
                 layoutConfig = {
-                    ntype    : 'vbox',
                     align    : 'center',
                     direction: 'column-reverse',
                     pack     : 'end'
@@ -111,7 +110,6 @@ class Toolbar extends BaseToolbar {
                 break
             case 'right':
                 layoutConfig = {
-                    ntype    : 'vbox',
                     align    : 'center',
                     direction: 'column',
                     pack     : 'start'

package/src/toolbar/Base.mjs

@@ -42,12 +42,13 @@ class Toolbar extends Container {
             ntype: 'button'
         },
         /**
-         * @member {Object} layout={ntype: 'hbox', align: 'center', pack : 'start'}
+         * @member {Object} layout={ntype:'flexbox',align:'center',direction: 'row', pack:'start'}
          */
         layout: {
-            ntype: 'hbox',
-            align: 'center',
-            pack : 'start'
+            ntype    : 'flexbox',
+            align    : 'center',
+            direction: 'row',
+            pack     : 'start'
         },
         /**
          * @member {Boolean} sortable_=false
@@ -84,16 +85,26 @@ class Toolbar extends Container {
      * @protected
      */
     afterSetDock(value, oldValue) {
+        if (!value && !oldValue) {
+            return
+        }
+
         let me            = this,
             {cls}         = me,
-            dockPositions = me.getStaticConfig('dockPositions');
+            dockPositions = me.getStaticConfig('dockPositions'),
+            layoutConfig  = me.getLayoutConfig();
 
         dockPositions.forEach(key => {
-            key !== null && NeoArray[key === value ? 'add' : 'remove'](cls, 'neo-dock-' + key)
+            key !== null && NeoArray.toggle(cls, 'neo-dock-' + key, key === value)
         });
 
-        me.cls    = cls;
-        me.layout = me.getLayoutConfig()
+        if (!me.layout) {
+            layoutConfig.ntype = 'flexbox';
+            me.set({cls, layout: layoutConfig})
+        } else {
+            me.layout.set(layoutConfig);
+            me.cls = cls;
+        }
     }
 
     /**
@@ -170,14 +181,13 @@ class Toolbar extends Container {
                 case 'bottom':
                 case 'top':
                     layoutConfig = {
-                        ntype: 'hbox',
-                        align: 'center',
-                        pack : 'start'
+                        align    : 'center',
+                        direction: 'row',
+                        pack     : 'start'
                     };
                     break
                 case 'left':
                     layoutConfig = {
-                        ntype    : 'vbox',
                         align    : 'center',
                         direction: 'column-reverse',
                         pack     : 'start'
@@ -185,7 +195,6 @@ class Toolbar extends Container {
                     break
                 case 'right':
                     layoutConfig = {
-                        ntype    : 'vbox',
                         align    : 'center',
                         direction: 'column',
                         pack     : 'start'

package/src/vdom/Helper.mjs

@@ -281,7 +281,10 @@ class Helper extends Base {
             }
 
             // Same node, continue recursively
-            if (childNode && childNode.id === oldChildNode?.id) {
+            if (childNode && oldChildNode && (
+                childNode.id === oldChildNode.id ||
+                (childNode.componentId && childNode.componentId === oldChildNode.componentId))
+            ) {
                 me.createDeltas({deltas, oldVnode: oldChildNode, oldVnodeMap, vnode: childNode, vnodeMap});
                 continue
             }