neo.mjs 8.24.0 → 8.25.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-02-24",
+      "datePublished": "2025-02-26",
       "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.24.0'
+                html  : 'v8.25.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/GridContainer.mjs

@@ -1,8 +1,6 @@
 import BaseGridContainer from '../../../src/grid/Container.mjs';
 import MainStore         from './MainStore.mjs';
 
-import * as selection from '../../../src/selection/grid/_export.mjs';
-
 /**
  * @class Neo.examples.grid.bigData.GridContainer
  * @extends Neo.grid.Container
@@ -35,7 +33,6 @@ class GridContainer extends BaseGridContainer {
          * @member {Object} viewConfig
          */
         viewConfig: {
-            selectionModel: selection.CellModel, // todo: remove after #6491 is resolved
             bufferColumnRange: 3,
             bufferRowRange   : 5
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.24.0",
+    "version": "8.25.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -62,7 +62,7 @@
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.5.3",
-        "sass": "^1.85.0",
+        "sass": "^1.85.1",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.98.0",

package/resources/scss/src/button/Base.scss

@@ -106,9 +106,9 @@
     }
 
     &:active {
-        background-color: var(--button-background-color-active) !important;
-        background-image: none !important;
-        border          : var(--button-border-active) !important;
+        background-color: var(--button-background-color-active);
+        background-image: none;
+        border          : var(--button-border-active);
 
         .neo-button-glyph {
             color: var(--button-glyph-color-active);

package/resources/scss/src/grid/VerticalScrollbar.scss

@@ -0,0 +1,21 @@
+.neo-grid-vertical-scrollbar {
+    bottom    : 1px;
+    opacity   : 0;
+    overflow-y: scroll;
+    position  : absolute;
+    right     : 0;
+    top       : 31px; // header-toolbar height
+    transition: opacity 1s ease-out;
+    width     : 16px;
+    z-index   : 2;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.neo-grid-wrapper:has(.neo-grid-view.neo-is-scrolling) {
+    .neo-grid-vertical-scrollbar {
+        opacity: 1;
+    }
+}

package/src/DefaultConfig.mjs

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

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

@@ -96,7 +96,7 @@ class SortZone extends BaseSortZone {
             mounted() {
                 Neo.main.DomAccess.scrollTo({
                     id      : viewWrapperId,
-                    value   : view.scrollPosition.y,
+                    value   : view.scrollTop,
                     windowId: this.windowId
                 })
             }

package/src/grid/Container.mjs

@@ -1,9 +1,10 @@
-import BaseContainer   from '../container/Base.mjs';
-import ClassSystemUtil from '../util/ClassSystem.mjs';
-import GridScrollbar   from './Scrollbar.mjs';
-import GridView        from './View.mjs';
-import Store           from '../data/Store.mjs';
-import * as header     from './header/_export.mjs';
+import BaseContainer     from '../container/Base.mjs';
+import ClassSystemUtil   from '../util/ClassSystem.mjs';
+import GridView          from './View.mjs';
+import ScrollManager     from './ScrollManager.mjs';
+import Store             from '../data/Store.mjs';
+import VerticalScrollbar from './VerticalScrollbar.mjs';
+import * as header       from './header/_export.mjs';
 
 /**
  * @class Neo.grid.Container
@@ -119,17 +120,10 @@ class GridContainer extends BaseContainer {
      */
     initialResizeEvent = true
     /**
-     * Flag for identifying the ownership of a touchmove operation
-     * @member {Boolean} isTouchMoveOwner=false
+     * @member {Neo.grid.ScrollManager|null} scrollManager=null
      * @protected
      */
-    isTouchMoveOwner = false
-    /**
-     * Storing touchmove position for mobile envs
-     * @member {Number} lastTouchY=0
-     * @protected
-     */
-    lastTouchY = 0
+    scrollManager = null
 
     /**
      * Convenience method to access the Neo.grid.header.Toolbar
@@ -176,7 +170,7 @@ class GridContainer extends BaseContainer {
         }];
 
         me.scrollbar = Neo.create({
-            module  : GridScrollbar,
+            module  : VerticalScrollbar,
             appName,
             parentId: me.id,
             rowHeight,
@@ -192,7 +186,6 @@ class GridContainer extends BaseContainer {
 
         me.addDomListeners({
             resize: me.onResize,
-            scroll: me.onScroll,
             scope : me
         })
     }
@@ -475,6 +468,8 @@ class GridContainer extends BaseContainer {
     destroy(...args) {
         let me = this;
 
+        me.scrollManager.destroy();
+
         me.mounted && Neo.main.addon.ResizeObserver.unregister({
             id      : me.id,
             windowId: me.windowId
@@ -513,6 +508,21 @@ class GridContainer extends BaseContainer {
         return `${this.id}__wrapper`
     }
 
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        me.scrollManager = Neo.create({
+            module       : ScrollManager,
+            gridContainer: me,
+            gridView     : me.view
+        })
+    }
+
     /**
      * @param {Object} data
      */
@@ -530,44 +540,6 @@ class GridContainer extends BaseContainer {
         }
     }
 
-    /**
-     * @param {Object} data
-     * @param {Number} data.scrollLeft
-     * @param {Object} data.target
-     * @param {Object} data.touches
-     */
-    onScroll({scrollLeft, target, touches}) {
-        let me     = this,
-            {view} = me,
-            deltaY, lastTouchY;
-
-        // We must ignore events for grid-scrollbar
-        if (target.id.includes('grid-container')) {
-            me.headerToolbar.scrollLeft = scrollLeft;
-            view.scrollPosition = {x: scrollLeft, y: view.scrollPosition.y};
-
-            if (touches) {
-                if (!view.isTouchMoveOwner) {
-                    me.isTouchMoveOwner = true
-                }
-
-                if (me.isTouchMoveOwner) {
-                    lastTouchY = touches.lastTouch.clientY - touches.firstTouch.clientY;
-                    deltaY     = me.lastTouchY - lastTouchY;
-
-                    deltaY !== 0 && Neo.main.DomAccess.scrollTo({
-                        direction: 'top',
-                        id       : view.vdom.id,
-                        value    : view.scrollPosition.y + deltaY
-                    })
-
-                    me.lastTouchY = lastTouchY
-                }
-            }
-
-        }
-    }
-
     /**
      * @param {Object} opts
      * @param {String} opts.direction
@@ -670,7 +642,7 @@ class GridContainer extends BaseContainer {
             {columnPositions, containerWidth, mountedColumns, visibleColumns} = view,
             countColumns = columnPositions.getCount(),
             newIndex     = index + step,
-            column, mounted, scrollPosition, visible;
+            column, mounted, scrollLeft, visible;
 
         if (newIndex >= countColumns) {
             newIndex %= countColumns;
@@ -697,15 +669,15 @@ class GridContainer extends BaseContainer {
             column = columnPositions.getAt(newIndex);
 
             if (step < 0) {
-                scrollPosition = column.x
+                scrollLeft = column.x
             } else {
-                scrollPosition = column.x - containerWidth + column.width
+                scrollLeft = column.x - containerWidth + column.width
             }
 
             Neo.main.DomAccess.scrollTo({
                 direction: 'left',
                 id       : me.id,
-                value    : scrollPosition,
+                value    : scrollLeft,
                 windowId : me.windowId
             })
         }

package/src/grid/ScrollManager.mjs

@@ -0,0 +1,179 @@
+import Base from '../core/Base.mjs';
+
+/**
+ * @class Neo.grid.ScrollManager
+ * @extends Neo.core.Base
+ */
+class ScrollManager extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.ScrollManager'
+         * @protected
+         */
+        className: 'Neo.grid.ScrollManager',
+        /**
+         * @member {Number} scrollLeft_=0
+         * @protected
+         */
+        scrollLeft_: 0,
+        /**
+         * @member {Number} scrollTop_=0
+         * @protected
+         */
+        scrollTop_: 0
+    }
+
+    /**
+     * @member {Neo.grid.Container|null} gridContainer=null
+     * @protected
+     */
+    gridContainer = null
+    /**
+     * @member {Neo.grid.View|null} gridView=null
+     * @protected
+     */
+    gridView = null
+    /**
+     * Storing touchmove position for mobile envs
+     * @member {Number} lastTouchX=0
+     * @protected
+     */
+    lastTouchX = 0
+    /**
+     * Storing touchmove position for mobile envs
+     * @member {Number} lastTouchY=0
+     * @protected
+     */
+    lastTouchY = 0
+    /**
+     * @member {Number|null}} scrollTimeoutId=null
+     * @protected
+     */
+    scrollTimeoutId = null
+    /**
+     * Flag for identifying the ownership of a touchmove operation
+     * @member {'container'|'view'|null} touchMoveOwner=null
+     * @protected
+     */
+    touchMoveOwner = null
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.gridContainer.addDomListeners({
+            scroll: me.onContainerScroll,
+            scope : me
+        });
+
+        me.gridView.addDomListeners({
+            scroll     : me.onViewScroll,
+            touchcancel: me.onTouchCancel,
+            touchend   : me.onTouchEnd,
+            scope      : me
+        })
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} data.scrollLeft
+     * @param {Object} data.target
+     * @param {Object} data.touches
+     */
+    onContainerScroll({scrollLeft, target, touches}) {
+        let me    = this,
+            view = me.gridView,
+            deltaY, lastTouchY;
+
+        // We must ignore events for grid-scrollbar
+        if (target.id.includes('grid-container')) {
+            me  .scrollLeft = scrollLeft;
+            view.scrollLeft = scrollLeft;
+
+            me.gridContainer.headerToolbar.scrollLeft = scrollLeft;
+
+            if (touches) {
+                if (me.touchMoveOwner !== 'view') {
+                    me.touchMoveOwner = 'container'
+                }
+
+                if (me.touchMoveOwner === 'container') {
+                    lastTouchY = touches.lastTouch.clientY - touches.firstTouch.clientY;
+                    deltaY     = me.lastTouchY - lastTouchY;
+
+                    deltaY !== 0 && Neo.main.DomAccess.scrollTo({
+                        direction: 'top',
+                        id       : view.vdom.id,
+                        value    : me.scrollTop + deltaY
+                    })
+
+                    me.lastTouchY = lastTouchY
+                }
+            }
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onTouchCancel(data) {
+        this.onTouchEnd(data)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onTouchEnd(data) {
+        let me = this;
+
+        me.touchMoveOwner = null;
+        me.lastTouchX     = 0;
+        me.lastTouchY     = 0
+    }
+
+    /**
+     * Only triggers for vertical scrolling
+     * @param {Object} data
+     * @protected
+     */
+    onViewScroll({scrollTop, touches}) {
+        let me   = this,
+            view = me.gridView,
+            deltaX, lastTouchX;
+
+        me.scrollTop = scrollTop;
+
+        me.scrollTimeoutId && clearTimeout(me.scrollTimeoutId);
+
+        me.scrollTimeoutId = setTimeout(() => {
+            view.isScrolling = false
+        }, 30);
+
+        view.set({isScrolling: true, scrollTop});
+
+        if (touches) {
+            if (me.touchMoveOwner !== 'container') {
+                me.touchMoveOwner = 'view'
+            }
+
+            if (me.touchMoveOwner === 'view') {
+                lastTouchX = touches.lastTouch.clientX - touches.firstTouch.clientX;
+                deltaX     = me.lastTouchX - lastTouchX;
+
+                deltaX !== 0 && Neo.main.DomAccess.scrollTo({
+                    direction: 'left',
+                    id       : me.gridContainer.id,
+                    value    : me.scrollLeft + deltaX
+                })
+
+                me.lastTouchX = lastTouchX
+            }
+        }
+    }
+}
+
+export default Neo.setupClass(ScrollManager);

package/src/grid/{Scrollbar.mjs → VerticalScrollbar.mjs}

@@ -1,26 +1,28 @@
 import Component from '../component/Base.mjs';
 
 /**
- * @class Neo.grid.Scrollbar
+ * We do not want to use the default scrollbar for vertical scrolling, since it would show up at the right edge
+ * of the last column. Instead, we want to show it at the right edge of the container (always visible when scrolling).
+ * @class Neo.grid.VerticalScrollbar
  * @extends Neo.component.Base
  */
-class GridScrollbar extends Component {
+class VerticalScrollbar extends Component {
     static config = {
         /**
-         * @member {String} className='Neo.grid.Scrollbar'
+         * @member {String} className='Neo.grid.VerticalScrollbar'
          * @protected
          */
-        className: 'Neo.grid.Scrollbar',
+        className: 'Neo.grid.VerticalScrollbar',
         /**
-         * @member {String} ntype='grid-scrollbar'
+         * @member {String} ntype='grid-vertical-scrollbar'
          * @protected
          */
-        ntype: 'grid-scrollbar',
+        ntype: 'grid-vertical-scrollbar',
         /**
-         * @member {String[]} baseCls=['neo-grid-scrollbar']
+         * @member {String[]} baseCls=['neo-grid-vertical-scrollbar']
          * @protected
          */
-        baseCls: ['neo-grid-scrollbar'],
+        baseCls: ['neo-grid-vertical-scrollbar'],
         /**
          * Number in px
          * @member {Number} rowHeight_=0
@@ -116,4 +118,4 @@ class GridScrollbar extends Component {
     }
 }
 
-export default Neo.setupClass(GridScrollbar);
+export default Neo.setupClass(VerticalScrollbar);

package/src/grid/View.mjs

@@ -103,9 +103,15 @@ class GridView extends Component {
          */
         rowHeight_: 0,
         /**
-         * @member {Object} scrollPosition_={x:0,y:0}
+         * @member {Number} scrollLeft_=0
+         * @protected
+         */
+        scrollLeft_: 0,
+        /**
+         * @member {Number} scrollTop_=0
+         * @protected
          */
-        scrollPosition_: {x: 0, y: 0},
+        scrollTop_: 0,
         /**
          * @member {Neo.selection.Model} selectionModel_=null
          */
@@ -142,28 +148,11 @@ class GridView extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-            {tabIndex: '-1', cn: [
-                    {cn: []}
-                ]}
+        {tabIndex: '-1', cn: [
+            {cn: []}
+        ]}
     }
 
-    /**
-     * Flag for identifying the ownership of a touchmove operation
-     * @member {Boolean} isTouchMoveOwner=false
-     * @protected
-     */
-    isTouchMoveOwner = false
-    /**
-     * Storing touchmove position for mobile envs
-     * @member {Number} lastTouchX=0
-     * @protected
-     */
-    lastTouchX = 0
-    /**
-     * @member {Number|null}} scrollTimeoutId=null
-     */
-    scrollTimeoutId = null
-
     /**
      * @member {String[]} selectedRows
      */
@@ -199,11 +188,6 @@ class GridView extends Component {
         let me = this;
 
         me.addDomListeners([{
-            scroll     : me.onScroll,
-            touchcancel: me.onTouchCancel,
-            touchend   : me.onTouchEnd,
-            scope      : me
-        }, {
             click   : me.onCellClick,
             dblclick: me.onCellDoubleClick,
             delegate: '.neo-grid-cell',
@@ -328,29 +312,31 @@ class GridView extends Component {
     }
 
     /**
-     * Triggered after the scrollPosition config got changed
-     * @param {Object} value
-     * @param {Object} oldValue
+     * Triggered after the scrollLeft config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetScrollLeft(value, oldValue) {
+        this.updateMountedAndVisibleColumns()
+    }
+
+    /**
+     * Triggered after the scrollTop config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
      * @protected
      */
-    afterSetScrollPosition(value, oldValue) {
+    afterSetScrollTop(value, oldValue) {
         let me               = this,
             {bufferRowRange} = me,
-            newStartIndex;
+            newStartIndex    = Math.floor(value / me.rowHeight);
 
-        if (value.x !== oldValue?.x) {
-            me.updateMountedAndVisibleColumns()
-        }
-
-        if (value.y !== oldValue?.y) {
-            newStartIndex = Math.floor(value.y / me.rowHeight);
-
-            if (Math.abs(me.startIndex - newStartIndex) >= bufferRowRange) {
-                me.startIndex = newStartIndex
-            } else {
-                me.visibleRows[0] = newStartIndex;
-                me.visibleRows[1] = newStartIndex + me.availableRows
-            }
+        if (Math.abs(me.startIndex - newStartIndex) >= bufferRowRange) {
+            me.startIndex = newStartIndex
+        } else {
+            me.visibleRows[0] = newStartIndex;
+            me.visibleRows[1] = newStartIndex + me.availableRows
         }
     }
 
@@ -861,46 +847,6 @@ class GridView extends Component {
         this.fireRowEvent(data, 'rowDoubleClick')
     }
 
-    /**
-     * Only triggers for vertical scrolling
-     * @param {Object} data
-     * @protected
-     */
-    onScroll({scrollTop, touches}) {
-        let me = this,
-            deltaX, lastTouchX;
-
-        me.scrollTimeoutId && clearTimeout(me.scrollTimeoutId);
-
-        me.scrollTimeoutId = setTimeout(() => {
-            me.isScrolling = false
-        }, 30);
-
-        me.set({
-            isScrolling   : true,
-            scrollPosition: {x: me.scrollPosition.x, y: scrollTop}
-        });
-
-        if (touches) {
-            if (!me.parent.isTouchMoveOwner) {
-                me.isTouchMoveOwner = true
-            }
-
-            if (me.isTouchMoveOwner) {
-                lastTouchX = touches.lastTouch.clientX - touches.firstTouch.clientX;
-                deltaX     = me.lastTouchX - lastTouchX;
-
-                deltaX !== 0 && Neo.main.DomAccess.scrollTo({
-                    direction: 'left',
-                    id       : me.parent.id,
-                    value    : me.scrollPosition.x + deltaX
-                })
-
-                me.lastTouchX = lastTouchX
-            }
-        }
-    }
-
     /**
      * Gets triggered after changing the value of a record field.
      * E.g. myRecord.foo = 'bar';
@@ -954,34 +900,6 @@ class GridView extends Component {
         needsUpdate && me.update()
     }
 
-    /**
-     * @param {Object} data
-     */
-    onTouchCancel(data) {
-        let me       = this,
-            {parent} = me;
-
-        me.isTouchMoveOwner = false;
-        me.lastTouchX       = 0;
-
-        parent.isTouchMoveOwner = false;
-        parent.lastTouchY       = 0
-    }
-
-    /**
-     * @param {Object} data
-     */
-    onTouchEnd(data) {
-        let me       = this,
-            {parent} = me;
-
-        me.isTouchMoveOwner = false;
-        me.lastTouchX       = 0;
-
-        parent.isTouchMoveOwner = false;
-        parent.lastTouchY       = 0
-    }
-
     /**
      * Used for keyboard navigation (selection models)
      * @param {Number} index
@@ -992,7 +910,7 @@ class GridView extends Component {
             {mountedRows, visibleRows} = me,
             countRecords               = me.store.getCount(),
             newIndex                   = index + step,
-            lastRowGap, mounted, scrollPosition, visible;
+            lastRowGap, mounted, scrollTop, visible;
 
         if (newIndex >= countRecords) {
             newIndex %= countRecords;
@@ -1017,15 +935,15 @@ class GridView extends Component {
             }
 
             if (step < 0) {
-                scrollPosition = newIndex * me.rowHeight
+                scrollTop = newIndex * me.rowHeight
             } else {
-                lastRowGap     = me.rowHeight - (me.availableHeight % me.rowHeight);
-                scrollPosition = (newIndex - me.availableRows) * me.rowHeight + lastRowGap
+                lastRowGap = me.rowHeight - (me.availableHeight % me.rowHeight);
+                scrollTop  = (newIndex - me.availableRows) * me.rowHeight + lastRowGap
             }
 
             Neo.main.DomAccess.scrollTo({
                 id      : me.vdom.id,
-                value   : scrollPosition,
+                value   : scrollTop,
                 windowId: me.windowId
             })
         }
@@ -1037,10 +955,10 @@ class GridView extends Component {
     updateMountedAndVisibleColumns() {
         let me       = this,
             {bufferColumnRange, columnPositions, mountedColumns, visibleColumns} = me,
-            {x}          = me.scrollPosition,
             i            = 0,
             countColumns = columnPositions.getCount(),
             endIndex     = countColumns - 1,
+            x            = me.scrollLeft,
             column, startIndex;
 
         if (countColumns < 1) {

package/resources/scss/src/grid/Scrollbar.scss

@@ -1,21 +0,0 @@
-.neo-grid-scrollbar {
-    bottom          : 1px;
-    opacity         : 0;
-    overflow-y      : scroll;
-    position        : absolute;
-    right           : 0;
-    top             : 31px; // header-toolbar height
-    transition      : opacity 1s ease-out;
-    width           : 16px;
-    z-index         : 2;
-
-    &:hover {
-        opacity: 1;
-    }
-}
-
-.neo-grid-wrapper:has(.neo-grid-view.neo-is-scrolling) {
-    .neo-grid-scrollbar {
-        opacity: 1;
-    }
-}