neo.mjs 8.23.0 → 8.25.0

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
          */
-        scrollPosition_: {x: 0, y: 0},
+        scrollLeft_: 0,
+        /**
+         * @member {Number} scrollTop_=0
+         * @protected
+         */
+        scrollTop_: 0,
         /**
          * @member {Neo.selection.Model} selectionModel_=null
          */
@@ -147,23 +153,6 @@ class GridView extends Component {
         ]}
     }
 
-    /**
-     * 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',
@@ -314,7 +298,7 @@ class GridView extends Component {
      * @protected
      */
     afterSetMountedColumns(value, oldValue) {
-        oldValue !== undefined && this.createViewData()
+        oldValue && this.createViewData()
     }
 
     /**
@@ -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
      */
-    afterSetScrollPosition(value, oldValue) {
+    afterSetScrollLeft(value, oldValue) {
+        this.updateMountedAndVisibleColumns()
+    }
+
+    /**
+     * Triggered after the scrollTop config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    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
             })
         }
@@ -1036,18 +954,18 @@ class GridView extends Component {
      */
     updateMountedAndVisibleColumns() {
         let me       = this,
-            {bufferColumnRange, columnPositions, visibleColumns} = me,
-            {x}      = me.scrollPosition,
-            i        = 0,
-            len      = columnPositions.getCount(),
-            endIndex = len - 1,
+            {bufferColumnRange, columnPositions, mountedColumns, visibleColumns} = me,
+            i            = 0,
+            countColumns = columnPositions.getCount(),
+            endIndex     = countColumns - 1,
+            x            = me.scrollLeft,
             column, startIndex;
 
-        if (len < 1) {
+        if (countColumns < 1) {
             return
         }
 
-        for (; i < len; i++) {
+        for (; i < countColumns; i++) {
             column = columnPositions.getAt(i);
 
             if (x >= column.x && x <= column.x + column.width) {
@@ -1060,15 +978,12 @@ class GridView extends Component {
             }
         }
 
-        if (
-            Math.abs(startIndex - me.visibleColumns[0]) >= me.bufferColumnRange ||
-            me.visibleColumns[1] < 1 // initial call
-        ) {
-            visibleColumns[0] = startIndex;
-            visibleColumns[1] = endIndex;
+        visibleColumns[0] = startIndex; // update the array inline
+        visibleColumns[1] = endIndex;
 
-            endIndex   = Math.min(len - 1, visibleColumns[1] + bufferColumnRange);
+        if (visibleColumns[0] <= mountedColumns[0] || visibleColumns[1] >= mountedColumns[1]) {
             startIndex = Math.max(0, visibleColumns[0] - bufferColumnRange);
+            endIndex   = Math.min(countColumns - 1, visibleColumns[1] + bufferColumnRange);
 
             me.mountedColumns = [startIndex, endIndex]
         }

package/src/grid/header/Toolbar.mjs

@@ -235,10 +235,9 @@ class Toolbar extends BaseToolbar {
 
     /**
      * @param {Number}  index
-     * @param {DOMRect} itemRect
      * @returns {Promise<void>}
      */
-    async scrollToIndex(index, itemRect) {
+    async scrollToIndex(index) {
         await Neo.main.DomAccess.scrollIntoView({
             delay   : 125,
             id      : this.items[index].id,

package/src/selection/grid/CellModel.mjs

@@ -85,7 +85,7 @@ class CellModel extends BaseModel {
         let me                 = this,
             {dataFields, view} = me,
             {store}            = view,
-            currentColumn, newIndex, record;
+            currentColumn, currentIndex, newIndex, record;
 
         if (me.hasSelection()) {
             currentColumn = view.getDataField(me.items[0]);
@@ -95,13 +95,16 @@ class CellModel extends BaseModel {
             record        = store.getAt(0)
         }
 
-        newIndex = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
+        currentIndex = dataFields.indexOf(currentColumn);
+        newIndex     = (currentIndex + step) % dataFields.length;
 
         while (newIndex < 0) {
             newIndex += dataFields.length
         }
 
-        me.select(view.getCellId(record, dataFields[newIndex]))
+        me.select(view.getCellId(record, dataFields[newIndex]));
+
+        view.parent.scrollByColumns(currentIndex, step)
     }
 
     /**
@@ -112,10 +115,10 @@ class CellModel extends BaseModel {
             {view}       = me,
             {store}      = view,
             currentIndex = 0,
-            dataField, newIndex, record;
+            dataField, newIndex;
 
         if (me.hasSelection()) {
-            currentIndex = store.indexOf(view.getRecordByCellId(me.items[0]));
+            currentIndex = store.indexOf(view.getRecord(me.items[0]));
             dataField    = view.getDataField(me.items[0])
         } else {
             dataField = me.dataFields[0]
@@ -127,10 +130,7 @@ class CellModel extends BaseModel {
             newIndex += store.getCount()
         }
 
-        record = store.getAt(newIndex);
-
-        me.select(view.getCellId(record, dataField));
-
+        me.select(view.getCellId(store.getAt(newIndex), dataField));
         view.scrollByRows(currentIndex, step)
     }
 

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;
-    }
-}