neo.mjs 8.14.3 → 8.15.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-02-04",
+      "datePublished": "2025-02-06",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

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

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

package/apps/shareddialog/view/MainContainerController.mjs

@@ -1,4 +1,3 @@
-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';
@@ -127,14 +126,15 @@ class MainContainerController extends ComponentController {
      * @param {Object} proxyRect
      */
     dropDialogBetweenWindows(proxyRect) {
-        let me           = this,
-            dialog       = me.dialog,
-            intersection = Rectangle.getIntersectionDetails(me.dragStartWindowRect, proxyRect),
-            side         = me.dockedWindowSide,
-            size         = proxyRect.height * proxyRect.width,
+        let me               = this,
+            dialog           = me.dialog,
+            intersection     = Rectangle.getIntersection(me.dragStartWindowRect, proxyRect),
+            intersectionSize = intersection?.height * intersection?.width,
+            side             = me.dockedWindowSide,
+            size             = proxyRect.height * proxyRect.width,
             wrapperStyle;
 
-        if (intersection.area > size / 2) { // drop the dialog fully into the dragStart window
+        if (intersectionSize > size / 2) { // drop the dialog fully into the dragStart window
             me.destroyDockedWindowProxy();
 
             wrapperStyle = dialog.wrapperStyle;

package/examples/ServiceWorker.mjs

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

package/package.json

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

package/src/DefaultConfig.mjs

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

package/src/collection/Base.mjs

@@ -1,6 +1,7 @@
 import Base       from '../core/Base.mjs';
 import Filter     from './Filter.mjs';
 import Logger     from '../util/Logger.mjs';
+import NeoArray   from '../util/Array.mjs';
 import Observable from '../core/Observable.mjs';
 import Sorter     from './Sorter.mjs';
 
@@ -1015,6 +1016,25 @@ class Collection extends Base {
         return this._items[this.getCount() -1]
     }
 
+    /**
+     * Moves an item from fromIndex to toIndex
+     * @param {Number} fromIndex
+     * @param {Number} toIndex
+     */
+    move(fromIndex, toIndex) {
+        if (fromIndex === toIndex) {
+            return
+        }
+
+        let {items} = this;
+
+        if (fromIndex >= items.length) {
+            fromIndex = items.length - 1
+        }
+
+        items.splice(toIndex, 0, items.splice(fromIndex, 1)[0])
+    }
+
     /**
      * @param {Object} opts
      * @protected

package/src/draggable/DragZone.mjs

@@ -50,9 +50,18 @@ class DragZone extends Base {
          */
         bodyCursorStyle: null,
         /**
-         * @member {String|null} boundaryContainerId=null
+         * Limit the zone in which you can drag an element.
+         * You can pass a node id, or an array of 2 node ids, in case you need an intersection.
+         * Example for 2 ids: grid.header.Toolbar => boundaryContainerId: [id, me.parent.id]
+         * @member {String|String[]|null} boundaryContainerId=null
          */
         boundaryContainerId: null,
+        /**
+         * Stores the DOMRect matching this.boundaryContainerId
+         * @member {DOMRect|null} data=null
+         * @protected
+         */
+        boundaryContainerRect: null,
         /**
          * Store data which you want to pass to drop related events here
          * @member {Object|null} data=null
@@ -315,16 +324,18 @@ class DragZone extends Base {
             {appName, owner, windowId} = me,
             {cls}                      = owner,
             rect                       = me.getDragElementRect(data),
-            offsetX, offsetY;
+            mainData, offsetX, offsetY;
 
         me.setData();
 
-        Neo.main.addon.DragDrop.setConfigs({
+        mainData = await Neo.main.addon.DragDrop.setConfigs({
             appName,
             windowId,
             ...me.getMainThreadConfigs()
         });
 
+        me.boundaryContainerRect = mainData.boundaryContainerRect
+
         NeoArray.add(cls, 'neo-is-dragging');
         owner.cls = cls;
 

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

@@ -57,7 +57,7 @@ class SortZone extends BaseSortZone {
             {view}        = grid,
             gridRows      = view.getVdomRoot().cn,
             columnIndex   = me.dragElement['aria-colindex'] - 1,
-            {dataField}   = view.columnPositions[columnIndex],
+            {dataField}   = view.columnPositions.getAt(columnIndex),
             cells         = view.getColumnCells(dataField),
             rows          = [],
             config        = await super.createDragProxy(data, false),
@@ -95,10 +95,9 @@ class SortZone extends BaseSortZone {
         config.listeners = {
             mounted() {
                 Neo.main.DomAccess.scrollTo({
-                    direction: 'top',
-                    id       : viewWrapperId,
-                    value    : view.scrollPosition.y,
-                    windowId : this.windowId
+                    id      : viewWrapperId,
+                    value   : view.scrollPosition.y,
+                    windowId: this.windowId
                 })
             }
         };
@@ -150,14 +149,17 @@ class SortZone extends BaseSortZone {
         await super.onDragStart(data);
 
         if (this.moveColumnContent) {
-            let me          = this,
-                {view}      = me.owner.parent,
-                columnIndex = me.dragElement['aria-colindex'] - 1,
-                {dataField} = view.columnPositions[columnIndex],
-                cells       = view.getColumnCells(dataField);
+            let me             = this,
+                {view}         = me.owner.parent,
+                columnIndex    = me.dragElement['aria-colindex'] - 1,
+                columnPosition = view.columnPositions.getAt(columnIndex),
+                {dataField}    = columnPosition,
+                cells          = view.getColumnCells(dataField);
+
+            columnPosition.hidden = true;
 
             cells.forEach(cell => {
-                cell.style.display = 'none'
+                cell.style.visibility = 'hidden'
             });
 
             view.update()
@@ -172,33 +174,35 @@ class SortZone extends BaseSortZone {
         super.switchItems(index1, index2);
 
         if (this.moveColumnContent) {
-            let me              = this,
-                {itemRects}     = me,
-                {view}          = me.owner.parent,
-                columnPositions = view._columnPositions, // no clone
-                column1Cells    = view.getColumnCells(columnPositions[index1].dataField),
-                column2Cells    = view.getColumnCells(columnPositions[index2].dataField);
-
-            Object.assign(columnPositions[index1], {
+            let me                = this,
+                {itemRects}       = me,
+                {view}            = me.owner.parent,
+                {columnPositions} = view,
+                column1Position   = columnPositions.getAt(index1),
+                column2Position   = columnPositions.getAt(index2),
+                column1Cells      = view.getColumnCells(column1Position.dataField),
+                column2Cells      = view.getColumnCells(column2Position.dataField);
+
+            Object.assign(column1Position, {
                 width: itemRects[index2].width,
                 x    : itemRects[index2].x + 1
             });
 
-            Object.assign(columnPositions[index2], {
+            Object.assign(column2Position, {
                 width: itemRects[index1].width,
                 x    : itemRects[index1].x + 1
             });
 
-            NeoArray.move(columnPositions, index1, index2);
+            columnPositions.move(index1, index2);
 
             column1Cells.forEach(node => {
-                node.style.left  = columnPositions[index2].x     + 'px';
-                node.style.width = columnPositions[index2].width + 'px'
+                node.style.left  = column1Position.x     + 'px';
+                node.style.width = column1Position.width + 'px'
             });
 
             column2Cells.forEach(node => {
-                node.style.left  = columnPositions[index1].x + 'px';
-                node.style.width = columnPositions[index1].width + 'px'
+                node.style.left  = column2Position.x     + 'px';
+                node.style.width = column2Position.width + 'px'
             });
 
             view.update()

package/src/draggable/toolbar/SortZone.mjs

@@ -149,9 +149,9 @@ class SortZone extends DragZone {
     /**
      * @param {Object} data
      */
-    onDragMove(data) {
+    async onDragMove(data) {
         // the method can trigger before we got the client rects from the main thread
-        if (!this.itemRects) {
+        if (!this.itemRects || this.isScrolling) {
             return
         }
 
@@ -174,6 +174,13 @@ class SortZone extends DragZone {
         if (index > 0 && (!reversed && delta < 0 || reversed && delta > 0)) {
             if (Math.abs(delta) > itemRects[index - 1][itemWidth] * moveFactor) {
                 me.currentIndex--;
+
+                if (data.clientX < me.boundaryContainerRect.left) {
+                    me.isScrolling = true;
+                    await me.owner.scrollToIndex?.(me.currentIndex, itemRects[me.currentIndex]);
+                    me.isScrolling = false
+                }
+
                 me.switchItems(index, me.currentIndex)
             }
         }
@@ -181,6 +188,13 @@ class SortZone extends DragZone {
         else if (index < maxItems && (!reversed && delta > 0 || reversed && delta < 0)) {
             if (Math.abs(delta) > itemRects[index + 1][itemWidth] * moveFactor) {
                 me.currentIndex++;
+
+                if (data.clientX > me.boundaryContainerRect.right) {
+                    me.isScrolling = true;
+                    await me.owner.scrollToIndex?.(me.currentIndex, itemRects[me.currentIndex]);
+                    me.isScrolling = false
+                }
+
                 me.switchItems(index, me.currentIndex)
             }
         }

package/src/grid/View.mjs

@@ -1,4 +1,5 @@
 import ClassSystemUtil from '../util/ClassSystem.mjs';
+import Collection      from '../collection/Base.mjs';
 import Component       from '../component/Base.mjs';
 import NeoArray        from '../util/Array.mjs';
 import RowModel        from '../selection/grid/RowModel.mjs';
@@ -63,10 +64,10 @@ class GridView extends Component {
          */
         containerWidth_: 0,
         /**
-         * @member {Object[]} columnPositions_=[]
+         * @member {Neo.collection.Base|null} columnPositions_=null
          * @protected
          */
-        columnPositions_: [],
+        columnPositions_: null,
         /**
          * @member {Boolean} highlightModifiedCells_=false
          */
@@ -238,19 +239,7 @@ class GridView extends Component {
      * @protected
      */
     afterSetContainerWidth(value, oldValue) {
-        if (value > 0 && this.columnPositions.length > 0) {
-            this.updateVisibleColumns()
-        }
-    }
-
-    /**
-     * Triggered after the columnPositions config got changed
-     * @param {Object[]} value
-     * @param {Object[]} oldValue
-     * @protected
-     */
-    afterSetColumnPositions(value, oldValue) {
-        if (value.length > 0 && this.containerWidth > 0) {
+        if (value > 0) {
             this.updateVisibleColumns()
         }
     }
@@ -299,7 +288,7 @@ class GridView extends Component {
             {bufferRowRange} = me,
             newStartIndex;
 
-        if (value.x !== oldValue?.x && me.columnPositions.length > 0) {
+        if (value.x !== oldValue?.x) {
             me.updateVisibleColumns()
         }
 
@@ -461,6 +450,22 @@ class GridView extends Component {
         return cellConfig
     }
 
+    /**
+     * Triggered when accessing the columnPositions config
+     * @param {Object} value
+     * @protected
+     */
+    beforeGetColumnPositions(value) {
+        if (!value) {
+            this._columnPositions = value = Neo.create({
+                module     : Collection,
+                keyProperty: 'dataField'
+            })
+        }
+
+        return value
+    }
+
     /**
      * Triggered before the selectionModel config gets changed.
      * @param {Neo.selection.Model} value
@@ -490,7 +495,7 @@ class GridView extends Component {
             columns       = gridContainer.headerToolbar.items,
             id            = me.getRowId(record, rowIndex),
             trCls         = me.getTrClass(record, rowIndex),
-            config, column, endIndex, gridRow, i, startIndex;
+            config, column, columnPosition, endIndex, gridRow, i, startIndex;
 
         if (rowIndex % 2 !== 0) {
             trCls.push('neo-even')
@@ -529,10 +534,17 @@ class GridView extends Component {
                 config.cls = ['neo-locked', ...config.cls || []]
             }
 
+            columnPosition = me.columnPositions.get(column.dataField);
+
             config.style = {
                 ...config.style,
-                left : me.columnPositions[i].x     + 'px',
-                width: me.columnPositions[i].width + 'px'
+                left : columnPosition.x     + 'px',
+                width: columnPosition.width + 'px'
+            }
+
+            // Happens during a column header drag OP, when leaving the painted range
+            if (columnPosition.hidden) {
+                config.style.visibility = 'hidden'
             }
 
             gridRow.cn.push(config)
@@ -552,11 +564,11 @@ class GridView extends Component {
             endIndex, i;
 
         if (
-            countRecords              < 1 ||
-            me.availableRows          < 1 ||
-            me._containerWidth        < 1 || // we are not checking me.containerWidth, since we want to ignore the config symbol
-            me.columnPositions.length < 1 ||
-            me.visibleColumns[1]      < 1
+            countRecords                  < 1 ||
+            me.availableRows              < 1 ||
+            me._containerWidth            < 1 || // we are not checking me.containerWidth, since we want to ignore the config symbol
+            me.columnPositions.getCount() < 1 ||
+            me.visibleColumns[1]          < 1
         ) {
             return
         }
@@ -652,13 +664,14 @@ class GridView extends Component {
      * @returns {Object[]}
      */
     getColumnCells(dataField) {
-        let me       = this,
-            cells    = [],
-            vdomRoot = me.getVdomRoot(),
-            firstRow = vdomRoot.cn[0],
-            i        = 0,
-            len      = firstRow.cn.length,
-            columnIndex;
+        let me          = this,
+            cells       = [],
+            columnIndex = -1,
+            vdomRoot    = me.getVdomRoot(),
+            firstRow    = vdomRoot.cn[0],
+            i           = 0,
+            len         = firstRow.cn.length,
+            cell;
 
         // Columns might get moved via drag&drop, so let's check for the current match
         for (; i < len; i++) {
@@ -668,9 +681,12 @@ class GridView extends Component {
             }
         }
 
-        vdomRoot.cn.forEach(row => {
-            cells.push(row.cn[columnIndex])
-        });
+        if (columnIndex > -1) {
+            vdomRoot.cn.forEach(row => {
+                cell = row.cn[columnIndex];
+                cell && cells.push(cell)
+            })
+        }
 
         return cells
     }
@@ -900,12 +916,16 @@ class GridView extends Component {
             {columnPositions} = me,
             {x}               = me.scrollPosition,
             i                 = 0,
-            len               = columnPositions.length,
+            len               = columnPositions.getCount(),
             endIndex          = len - 1,
             column, startIndex;
 
+        if (len < 1) {
+            return
+        }
+
         for (; i < len; i++) {
-            column = columnPositions[i];
+            column = columnPositions.getAt(i);
 
             if (x >= column.x && x <= column.x + column.width) {
                 startIndex = i

package/src/grid/header/Toolbar.mjs

@@ -71,7 +71,7 @@ class Toolbar extends BaseToolbar {
                 me.sortZone = Neo.create({
                     module             : module.default,
                     appName,
-                    boundaryContainerId: id,
+                    boundaryContainerId: [id, me.parent.id],
                     owner              : me,
                     scrollLeft,
                     windowId,
@@ -201,6 +201,7 @@ class Toolbar extends BaseToolbar {
     async passSizeToView(silent=false) {
         let me              = this,
             {items}         = me,
+            {view}          = me.parent,
             rects           = await me.getDomRect(items.map(item => item.id)),
             lastItem        = rects[rects.length - 1],
             columnPositions = rects.map((item, index) => ({dataField: items[index].dataField, width: item.width, x: item.x - rects[0].x})),
@@ -221,12 +222,29 @@ class Toolbar extends BaseToolbar {
             await me.timeout(100);
             await me.passSizeToView(silent)
         } else {
-            me.parent.view[silent ? 'setSilent' : 'set']({
-                availableWidth: lastItem.x + lastItem.width - rects[0].x,
-                columnPositions
-            })
+            view.columnPositions.clear();
+            view.columnPositions.add(columnPositions);
+
+            view[silent ? 'setSilent' : 'set']({
+                availableWidth: lastItem.x + lastItem.width - rects[0].x
+            });
+
+            !silent && view.updateVisibleColumns()
         }
     }
+
+    /**
+     * @param {Number}  index
+     * @param {DOMRect} itemRect
+     * @returns {Promise<void>}
+     */
+    async scrollToIndex(index, itemRect) {
+        await Neo.main.DomAccess.scrollIntoView({
+            delay   : 125,
+            id      : this.items[index].id,
+            windowId: this.windowId
+        })
+    }
 }
 
 export default Neo.setupClass(Toolbar);

package/src/main/DomAccess.mjs

@@ -464,7 +464,7 @@ class DomAccess extends Base {
             returnData;
 
         if (Array.isArray(data.id)) {
-            return data.id.map(id => me.getBoundingClientRect({ id }));
+            return data.id.map(id => me.getBoundingClientRect({id}))
         } else {
             let node = me.getElementOrBody(data.nodeType ? data : data.id),
                 rect = {},
@@ -897,19 +897,16 @@ class DomAccess extends Base {
      * @param {String} [data.id]
      * @param {String} data.behavior='smooth'
      * @param {String} data.block='start'
+     * @param {Number} data.delay=500
      * @param {String} data.inline='nearest'
      * @param {String} [data.querySelector]
      * @returns {Promise<any>}
      */
-    scrollIntoView(data) {
-        let node = data.id ? this.getElement(data.id) : document.querySelector(data.querySelector),
-            opts = {
-                behavior: data.behavior || 'smooth',
-                block   : data.block    || 'start',
-                inline  : data.inline   || 'nearest'
-            };
+    scrollIntoView({id, behavior='smooth', block='start', delay=500, inline='nearest', querySelector}) {
+        let node = id ? this.getElement(id) : document.querySelector(querySelector),
+            opts = {behavior, block, inline};
 
-        if (opts.behavior !== 'smooth') {
+        if (behavior !== 'smooth') {
             node.scrollIntoView(opts)
         } else {
             // scrollIntoView() does not provide a callback yet.
@@ -918,11 +915,11 @@ class DomAccess extends Base {
                 if (node) {
                     let hasListener = 'scrollend' in window;
 
-                    hasListener && document.addEventListener('scrollend', () =>resolve(), {capture : true, once: true});
+                    hasListener && document.addEventListener('scrollend', () =>resolve(), {capture: true, once: true});
 
                     node.scrollIntoView(opts);
 
-                    !hasListener && this.timeout(500).then(() => {resolve()})
+                    !hasListener && this.timeout(delay).then(() => {resolve()})
                 } else {
                     resolve()
                 }

package/src/main/addon/DragDrop.mjs

@@ -1,6 +1,7 @@
 import Base      from './Base.mjs';
 import DomAccess from '../DomAccess.mjs';
 import DomEvents from '../DomEvents.mjs';
+import Rectangle from '../../util/Rectangle.mjs';
 
 /**
  * @class Neo.main.addon.DragDrop
@@ -438,23 +439,30 @@ class DragDrop extends Base {
     /**
      * DragZones will set these configs inside their dragStart() method.
      * They only persist until the end of a drag OP.
-     * @param {Object}  data
-     * @param {Boolean} data.alwaysFireDragMove
-     * @param {String}  data.boundaryContainerId
-     * @param {String}  data.scrollContainerId
-     * @param {Number}  data.scrollFactorLeft
-     * @param {Number}  data.scrollFactorTop
+     * @param {Object}               data
+     * @param {Boolean}              data.alwaysFireDragMove
+     * @param {String|String[]|null} data.boundaryContainerId
+     * @param {String|null}          data.scrollContainerId
+     * @param {Number}               data.scrollFactorLeft
+     * @param {Number}               data.scrollFactorTop
+     * @returns {Object} return the boundaryContainerRect
      */
     setConfigs(data) {
-        let me = this,
-            node;
+        let me                    = this,
+            {boundaryContainerId} = data,
+            node, rects;
 
         delete data.appName;
         delete data.windowId;
 
-        if (data.boundaryContainerId) {
-            node = DomAccess.getElementOrBody(data.boundaryContainerId);
-            me.boundaryContainerRect = node.getBoundingClientRect()
+        if (boundaryContainerId) {
+            rects = DomAccess.getBoundingClientRect({id: boundaryContainerId});
+
+            if (Array.isArray(boundaryContainerId)) {
+                me.boundaryContainerRect = Rectangle.getIntersection(...rects)
+            } else {
+                me.boundaryContainerRect = rects
+            }
         }
 
         delete data.boundaryContainerId;
@@ -489,6 +497,10 @@ class DragDrop extends Base {
                 }
             })
         }
+
+        return {
+            boundaryContainerRect: me.boundaryContainerRect || null
+        }
     }
 
     /**

package/src/util/Rectangle.mjs

@@ -111,30 +111,24 @@ export default class Rectangle extends DOMRect {
     }
 
     /**
-     * Returns the overlapping area of rect1 & rect2
-     * @param {Object} rect1
-     * @param {Object} rect2
-     * @returns {Number} The area (x * y)
+     * Returns the overlapping area of rect1 & rect2 as a new Rectangle
+     * @param {DOMRect|Neo.util.Rectangle} rect1
+     * @param {DOMRect|Neo.util.Rectangle} rect2
+     * @returns {Neo.util.Rectangle|null} The intersecting rect
      */
     static getIntersection(rect1, rect2) {
-        return Rectangle.getIntersectionDetails(rect1, rect2).area;
-    }
-
-    /**
-     * Returns the overlapping area of rect1 & rect2
-     * @param {Object} rect1
-     * @param {Object} rect2
-     * @returns {Object} x, y & area
-     */
-    static getIntersectionDetails(rect1, rect2) {
-        let width  = Math.max(0, Math.min(rect1.right,  rect2.right)  - Math.max(rect1.left, rect2.left)),
-            height = Math.max(0, Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top,  rect2.top));
+        let x      = Math.max(rect1.x,      rect2.x),
+            y      = Math.max(rect1.y,      rect2.y),
+            right  = Math.min(rect1.right,  rect2.right),
+            bottom = Math.min(rect1.bottom, rect2.bottom),
+            width  = Math.max(0, right  - x),
+            height = Math.max(0, bottom - y);
+
+        if (height < 1 || width < 1) {
+            return null
+        }
 
-        return {
-            area: height * width,
-            height,
-            width
-        };
+        return new Rectangle(x, y, width, height)
     }
 
     /**