neo.mjs 8.0.1 → 8.1.1

package/src/grid/View.mjs

@@ -6,7 +6,7 @@ import VDomUtil  from '../util/VDom.mjs';
  * @class Neo.grid.View
  * @extends Neo.component.Base
  */
-class View extends Component {
+class GridView extends Component {
     static config = {
         /**
          * @member {String} className='Neo.grid.View'
@@ -18,10 +18,32 @@ class View extends Component {
          * @protected
          */
         ntype: 'grid-view',
+        /**
+         * Internal flag. Gets calculated when mounting the grid.Container
+         * @member {Number} availableHeight_=0
+         */
+        availableHeight_: 0,
+        /**
+         * Internal flag. Gets calculated when changing the availableHeight config
+         * @member {Number} availableRows_=0
+         */
+        availableRows_: 0,
+        /**
+         * Internal flag. Gets calculated after mounting grid.View rows
+         * @member {Number} availableWidth_=0
+         */
+        availableWidth_: 0,
         /**
          * @member {String[]} baseCls=['neo-grid-view']
+         * @protected
          */
         baseCls: ['neo-grid-view'],
+        /**
+         * The amount of rows to paint before the first & after the last visible row,
+         * to enhance the scrolling performance
+         * @member {Number} bufferRowRange_=3
+         */
+        bufferRowRange_: 3,
         /**
          * Define which model field contains the value of colspan definitions
          * @member {String} colspanField='colspan'
@@ -32,29 +54,85 @@ class View extends Component {
          * @protected
          */
         containerId: null,
+        /**
+         * @member {Object[]} columnPositions_=[]
+         * @protected
+         */
+        columnPositions_: [],
+        /**
+         * @member {Boolean} isScrolling_=false
+         */
+        isScrolling_: false,
         /**
          * @member {Object} recordVnodeMap={}
          */
         recordVnodeMap: {},
+        /**
+         * @member {String} role='rowgroup'
+         */
+        role: 'rowgroup',
+        /**
+         * Number in px
+         * @member {Number} rowHeight_=0
+         */
+        rowHeight_: 0,
+        /**
+         * @member {Object} scrollPosition_={x:0,y:0}
+         */
+        scrollPosition_: {x: 0, y: 0},
         /**
          * @member {String} selectedRecordField='annotations.selected'
          */
         selectedRecordField: 'annotations.selected',
         /**
-         * @member {Neo.data.Store|null} store=null
+         * @member {Number} startIndex_=0
+         */
+        startIndex_: 0,
+        /**
+         * @member {Neo.data.Store|null} store_=null
          */
-        store: null,
+        store_: null,
         /**
          * @member {Boolean} useRowRecordIds=true
          */
-        useRowRecordIds: true
+        useRowRecordIds: true,
+        /**
+         * Stores the indexes of the first & last painted columns
+         * @member {Array} visibleColumns_=[0,0]
+         * @protected
+         */
+        visibleColumns_: [0, 0],
+        /**
+         * @member {String[]} wrapperCls=[]
+         */
+        wrapperCls: ['neo-grid-view-wrapper'],
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {cn: [
+            {cn: []},
+            {cls: 'neo-grid-scrollbar'}
+        ]}
+    }
+
+    /**
+     * @member {Number|null}} scrollTimeoutId=null
+     */
+    scrollTimeoutId = null
+
+    /**
+     * @member {Neo.grid.Container|null} gridContainer
+     */
+    get gridContainer() {
+        return Neo.getComponent(this.containerId)
     }
 
     /**
      * @member {String[]} selectedRows
      */
     get selectedRows() {
-        let gridContainer = this.parent;
+        let {gridContainer} = this;
 
         if (gridContainer.selectionModel.ntype === 'selection-grid-rowmodel') {
             return gridContainer.selectionModel.items
@@ -72,6 +150,9 @@ class View extends Component {
         let me = this;
 
         me.addDomListeners([{
+            scroll: me.onScroll,
+            scope : me
+        }, {
             click   : me.onCellClick,
             dblclick: me.onCellDoubleClick,
             delegate: '.neo-grid-cell',
@@ -84,6 +165,175 @@ class View extends Component {
         }])
     }
 
+    /**
+     * Triggered after the availableHeight config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetAvailableHeight(value, oldValue) {
+        if (value > 0) {
+            this.availableRows = Math.ceil(value / this.rowHeight) + 1
+        }
+    }
+
+    /**
+     * Triggered after the availableRows config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetAvailableRows(value, oldValue) {
+        if (value > 0 && this.store.getCount() > 0) {
+            this.createViewData()
+        }
+    }
+
+    /**
+     * Triggered after the availableWidth config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetAvailableWidth(value, oldValue) {
+        if (value > 0) {
+            let me = this;
+
+            me.vdom.width = value + 'px';
+            me.vdom.cn[1].width = value + 'px';
+            me.update()
+        }
+    }
+
+    /**
+     * Triggered after the bufferRowRange config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetBufferRowRange(value, oldValue) {
+        oldValue !== undefined && this.createViewData()
+    }
+
+    /**
+     * Triggered after the columnPositions config got changed
+     * @param {Object[]} value
+     * @param {Object[]} oldValue
+     * @protected
+     */
+    afterSetColumnPositions(value, oldValue) {
+        let me = this;
+
+        if (value.length > 0) {
+            // for changing an array inline, we need to use the leading underscore
+            me._visibleColumns[1] = value.length - 1;
+
+            if (me.store.getCount() > 0) {
+                me.createViewData()
+            }
+        }
+    }
+
+    /**
+     * Triggered after the id config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetId(value, oldValue) {
+        this.vdom.id = value + '__wrapper';
+
+        // silent vdom update, the super call will trigger the engine
+        super.afterSetId(value, oldValue);
+    }
+
+    /**
+     * Triggered after the isScrolling config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetIsScrolling(value, oldValue) {
+        this.toggleCls('neo-is-scrolling', value)
+    }
+
+    /**
+     * Triggered after the rowHeight config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetRowHeight(value, oldValue) {
+        value > 0 && this.updateScrollHeight()
+    }
+
+    /**
+     * Triggered after the scrollPosition config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @protected
+     */
+    afterSetScrollPosition(value, oldValue) {
+        let me               = this,
+            {bufferRowRange} = me,
+            newStartIndex;
+
+        if (value.x !== oldValue?.x && me.columnPositions.length > 0) {
+            me.updateVisibleColumns()
+        }
+
+        if (value.y !== oldValue?.y) {
+            newStartIndex = Math.floor(value.y / me.rowHeight);
+
+            if (newStartIndex < bufferRowRange) {
+                me.startIndex = 0
+            } else if (Math.abs(me.startIndex - newStartIndex) >= bufferRowRange) {
+                me.startIndex = newStartIndex
+            }
+        }
+    }
+
+    /**
+     * Triggered after the startIndex config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetStartIndex(value, oldValue) {
+        oldValue !== undefined && this.createViewData()
+    }
+
+    /**
+     * Triggered after the store config got changed
+     * @param {Neo.data.Store|null} value
+     * @param {Neo.data.Store|null} oldValue
+     * @protected
+     */
+    afterSetStore(value, oldValue) {
+        if (value) {
+            let me = this;
+
+            value.on({
+                load : me.updateScrollHeight,
+                scope: me
+            });
+
+            value.getCount() > 0 && me.updateScrollHeight()
+        }
+    }
+
+    /**
+     * Triggered after the visibleColumns config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetVisibleColumns(value, oldValue) {
+        if (oldValue !== undefined) {
+            this.createViewData()
+        }
+    }
+
     /**
      * @param {Object} data
      * @param {String} [data.cellId]
@@ -148,10 +398,12 @@ class View extends Component {
         }
 
         cellConfig = {
-            id      : cellId,
-            cls     : cellCls,
-            style   : rendererOutput.style || {},
-            tabIndex: '-1'
+            'aria-colindex': index + 1, // 1 based
+            id             : cellId,
+            cls            : cellCls,
+            role           : 'gridcell',
+            style          : rendererOutput.style || {},
+            tabIndex       : '-1'
         };
 
         if (column.width) {
@@ -182,21 +434,19 @@ class View extends Component {
             rowIndex = this.store.indexOf(record)
         }
 
-        let me              = this,
-            gridContainer   = me.parent,
-            colspan         = record[me.colspanField],
-            colspanKeys     = colspan && Object.keys(colspan),
-            columns         = gridContainer.items[0].items,
-            colCount        = columns.length,
-            dockLeftMargin  = 0,
-            dockRightMargin = 0,
-            id              = me.getRowId(record, rowIndex),
-            {selectedRows}  = me,
-            trCls           = me.getTrClass(record, rowIndex),
-            config, column, columnIndex, gridRow, i;
+        let me       = this,
+            {gridContainer, selectedRows, visibleColumns} = me,
+            columns  = gridContainer.items[0].items,
+            id       = me.getRowId(record, rowIndex),
+            trCls    = me.getTrClass(record, rowIndex),
+            config, column, gridRow, i;
 
         me.recordVnodeMap[id] = rowIndex;
 
+        if (rowIndex % 2 !== 0) {
+            trCls.push('neo-even')
+        }
+
         if (selectedRows && Neo.ns(me.selectedRecordField, false, record)) {
             NeoArray.add(selectedRows, id)
         }
@@ -204,77 +454,66 @@ class View extends Component {
         if (selectedRows?.includes(id)) {
             trCls.push('neo-selected');
 
-            me.parent.fire('select', {
+            gridContainer.fire('select', {
                 record
             })
         }
 
         gridRow = {
             id,
-            cls     : trCls,
-            cn      : [],
-            tabIndex: '-1'
+            'aria-rowindex': rowIndex + 2, // header row => 1, first body row => 2
+            cls            : trCls,
+            cn             : [],
+            role           : 'row',
+            tabIndex       : '-1',
+
+            style: {
+                height   : me.rowHeight + 'px',
+                transform: `translate(0px, ${rowIndex * me.rowHeight}px)`
+            }
         };
 
-        for (i=0; i < colCount; i++) {
+        for (i=visibleColumns[0]; i <= visibleColumns[1]; i++) {
             column = columns[i];
             config = me.applyRendererOutput({column, gridContainer, index: rowIndex, record});
 
             if (column.dock) {
-                config.cls = ['neo-locked', ...config.cls || []];
-
-                if (column.dock === 'left') {
-                    config.style.left = dockLeftMargin + 'px';
-                    dockLeftMargin += (column.width + 1) // todo: borders fix
-                }
-            }
-
-            if (column.flex) {
-                config.style.width = '100%'
+                config.cls = ['neo-locked', ...config.cls || []]
             }
 
-            gridRow.cn.push(config);
-
-            if (colspanKeys?.includes(column.dataField)) {
-                i += (colspan[column.dataField] - 1)
-            }
-        }
-
-        for (i=0; i < colCount; i++) {
-            columnIndex = colCount - i -1;
-            column      = columns[columnIndex];
-
-            if (column.dock === 'right') {
-                gridRow.cn[columnIndex].style.right = dockRightMargin + 'px';
-                dockRightMargin += (column.width + 1) // todo: borders fix
+            config.style = {
+                ...config.style,
+                left : me.columnPositions[i].x     + 'px',
+                width: me.columnPositions[i].width + 'px'
             }
 
-            if (colspanKeys?.includes(column.dataField)) {
-                i += (colspan[column.dataField] - 1)
-            }
+            gridRow.cn.push(config)
         }
 
-        // the dock margins are the same for each row
-        rowIndex === 0 && Object.assign(gridContainer, {dockLeftMargin, dockRightMargin});
-
         return gridRow
     }
 
     /**
-     * @param {Object[]} inputData
+     *
      */
-    createViewData(inputData) {
-        let me             = this,
-            amountRows     = inputData.length,
-            i              = 0,
-            rows           = [],
-            {selectedRows} = me;
+    createViewData() {
+        let me   = this,
+            {bufferRowRange, selectedRows, startIndex} = me,
+            rows = [],
+            endIndex, i;
+
+        if (me.availableRows < 1 || me.columnPositions.length < 1) {
+            return
+        }
 
-        for (; i < amountRows; i++) {
-            rows.push(me.createRow({record: inputData[i], rowIndex: i}))
+        endIndex   = Math.min(me.store.getCount(), me.availableRows + startIndex + bufferRowRange);
+        startIndex = Math.max(0, startIndex - bufferRowRange);
+
+        for (i=startIndex; i < endIndex; i++) {
+            rows.push(me.createRow({record: me.store.items[i], rowIndex: i}))
         }
 
-        me.vdom.cn = rows;
+        me.getVdomRoot().cn = rows;
 
         me.promiseUpdate().then(() => {
             if (selectedRows?.length > 0) {
@@ -302,7 +541,7 @@ class View extends Component {
             dataField = me.getCellDataField(id),
             record    = me.getRecord(id);
 
-        me.parent.fire(eventName, {data, dataField, record, view: me})
+        me.gridContainer.fire(eventName, {data, dataField, record, view: me})
     }
 
     /**
@@ -314,7 +553,7 @@ class View extends Component {
             id     = data.currentTarget,
             record = me.getRecord(id);
 
-        me.parent.fire(eventName, {data, record, view: me})
+        me.gridContainer.fire(eventName, {data, record, view: me})
     }
 
     /**
@@ -341,10 +580,10 @@ class View extends Component {
      * @returns {Object|Number|null}
      */
     getColumn(field, returnIndex=false) {
-        let container = this.parent,
-            columns   = container.headerToolbar.items,
-            i         = 0,
-            len       = columns.length,
+        let {gridContainer} = this,
+            columns         = gridContainer.headerToolbar.items,
+            i               = 0,
+            len             = columns.length,
             column;
 
         for (; i < len; i++) {
@@ -420,6 +659,29 @@ class View extends Component {
         return ['neo-grid-row']
     }
 
+    /**
+     * @override
+     * @returns {*}
+     */
+    getVdomRoot() {
+        return this.vdom.cn[0]
+    }
+
+    /**
+     * @returns {Object[]} The new vdom items root
+     */
+    getVdomItemsRoot() {
+        return this.vdom.cn[0]
+    }
+
+    /**
+     * @override
+     * @returns {Neo.vdom.VNode}
+     */
+    getVnodeRoot() {
+        return this.vnode.childNodes[0]
+    }
+
     /**
      * @param {Object} data
      */
@@ -448,6 +710,25 @@ class View extends Component {
         this.fireRowEvent(data, 'rowDoubleClick')
     }
 
+    /**
+     * Only triggers for vertical scrolling
+     * @param {Object} data
+     */
+    onScroll(data) {
+        let me = this;
+
+        me.scrollTimeoutId && clearTimeout(me.scrollTimeoutId);
+
+        me.scrollTimeoutId = setTimeout(() => {
+            me.isScrolling = false
+        }, 30);
+
+        me.set({
+            isScrolling   : true,
+            scrollPosition: {x: me.scrollPosition.x, y: data.scrollTop}
+        })
+    }
+
     /**
      * Gets triggered after changing the value of a record field.
      * E.g. myRecord.foo = 'bar';
@@ -460,7 +741,7 @@ class View extends Component {
         let me               = this,
             fieldNames       = fields.map(field => field.name),
             needsUpdate      = false,
-            gridContainer    = me.parent,
+            {gridContainer}  = me,
             {selectionModel} = gridContainer,
             {vdom}           = me,
             cellId, cellNode, column, index, scope;
@@ -494,6 +775,47 @@ class View extends Component {
 
         needsUpdate && me.update()
     }
+
+    /**
+     *
+     */
+    updateScrollHeight() {
+        let me           = this,
+            countRecords = me.store.getCount(),
+            {rowHeight}  = me;
+
+        if (countRecords > 0 && rowHeight > 0) {
+            me.vdom.cn[1].height = `${(countRecords + 1) * rowHeight}px`;
+            me.update()
+        }
+    }
+
+    /**
+     *
+     */
+    updateVisibleColumns() {
+        let me       = this,
+            {x}      = me.scrollPosition,
+            i        = 0,
+            len      = me.columnPositions.length,
+            endIndex = len - 1,
+            column, startIndex;
+
+        for (; i < len; i++) {
+            column = me.columnPositions[i];
+
+            if (x >= column.x && x <= column.x + column.width) {
+                startIndex = i
+            }
+
+            if (me.containerWidth + x < column.x) {
+                endIndex = i - 1;
+                break
+            }
+        }
+
+        me.visibleColumns = [startIndex, endIndex]
+    }
 }
 
-export default Neo.setupClass(View);
+export default Neo.setupClass(GridView);

package/src/grid/header/Button.mjs

@@ -28,9 +28,9 @@ class Button extends BaseButton {
          */
         ntype: 'grid-header-button',
         /**
-         * @member {String[]} baseCls=['neo-grid-header-button']
+         * @member {String[]} baseCls=['neo-grid-header-button','neo-button']
          */
-        baseCls: ['neo-grid-header-button'],
+        baseCls: ['neo-grid-header-button', 'neo-button'],
         /**
          * Alignment of the matching grid cells. Valid values are left, center, right
          * @member {String} cellAlign_='left'
@@ -86,6 +86,10 @@ class Button extends BaseButton {
          * @member {Neo.core.Base|null} rendererScope=null
          */
         rendererScope: null,
+        /**
+         * @member {String} role='columnheader'
+         */
+        role: 'columnheader',
         /**
          * @member {Boolean} showHeaderFilter_=false
          */