neo.mjs 8.0.0 → 8.1.0

package/src/grid/View.mjs

@@ -1,11 +1,12 @@
 import Component from '../component/Base.mjs';
+import NeoArray  from '../util/Array.mjs';
 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'
@@ -17,10 +18,127 @@ 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'
+         */
+        colspanField: 'colspan',
+        /**
+         * @member {String|null} containerId=null
+         * @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}
          */
-        baseCls: ['neo-grid-view']
+        scrollPosition_: {x: 0, y: 0},
+        /**
+         * @member {String} selectedRecordField='annotations.selected'
+         */
+        selectedRecordField: 'annotations.selected',
+        /**
+         * @member {Number} startIndex_=0
+         */
+        startIndex_: 0,
+        /**
+         * @member {Neo.data.Store|null} store_=null
+         */
+        store_: null,
+        /**
+         * @member {Boolean} 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;
+
+        if (gridContainer.selectionModel.ntype === 'selection-grid-rowmodel') {
+            return gridContainer.selectionModel.items
+        }
+
+        return []
     }
 
     /**
@@ -32,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',
@@ -45,149 +166,369 @@ class View extends Component {
     }
 
     /**
-     * @param {Array} inputData
+     * 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
      */
-    createViewData(inputData) {
-        let me         = this,
-            amountRows = inputData.length,
-            container  = me.parent,
-            columns    = container.items[0].items,
-            colCount   = columns.length,
-            data       = [],
-            i          = 0,
-            {vdom}     = me,
-            cellCls, cellStyle, config, column, dockLeftMargin, dockRightMargin, id, index, j, rendererOutput,
-            record, rendererValue, selectedRows, trCls;
+    afterSetAvailableRows(value, oldValue) {
+        if (value > 0 && this.store.getCount() > 0) {
+            this.createViewData()
+        }
+    }
 
-        me.recordVnodeMap = {}; // remove old data
+    /**
+     * Triggered after the availableWidth config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetAvailableWidth(value, oldValue) {
+        if (value > 0) {
+            let me = this;
 
-        if (container.selectionModel?.ntype === 'selection-grid-rowmodel') {
-            selectedRows = container.selectionModel.items || []
+            me.vdom.width = value + 'px';
+            me.vdom.cn[1].width = value + 'px';
+            me.update()
         }
+    }
 
-        for (; i < amountRows; i++) {
-            record = inputData[i];
-            id     = me.getRowId(record, i);
+    /**
+     * Triggered after the bufferRowRange config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetBufferRowRange(value, oldValue) {
+        oldValue !== undefined && this.createViewData()
+    }
 
-            me.recordVnodeMap[id] = i;
+    /**
+     * Triggered after the columnPositions config got changed
+     * @param {Object[]} value
+     * @param {Object[]} oldValue
+     * @protected
+     */
+    afterSetColumnPositions(value, oldValue) {
+        let me = this;
 
-            trCls = me.getTrClass(record, i);
+        if (value.length > 0) {
+            // for changing an array inline, we need to use the leading underscore
+            me._visibleColumns[1] = value.length - 1;
 
-            if (selectedRows?.includes(id)) {
-                trCls.push('neo-selected');
+            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);
+    }
 
-                Neo.getComponent(me.containerId).fire('select', {
-                    record
-                })
+    /**
+     * 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()
+    }
 
-            data.push({
-                id,
-                cls     : trCls,
-                cn      : [],
-                tabIndex: '-1'
+    /**
+     * 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
             });
 
-            dockLeftMargin  = 0;
-            dockRightMargin = 0;
+            value.getCount() > 0 && me.updateScrollHeight()
+        }
+    }
 
-            j = 0;
+    /**
+     * 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]
+     * @param {Object} data.column
+     * @param {Neo.grid.Container} data.gridContainer
+     * @param {Number} data.index
+     * @param {Object} data.record
+     * @returns {Object}
+     */
+    applyRendererOutput(data) {
+        let {cellId, column, gridContainer, index, record} = data,
+            me          = this,
+            cellCls     = ['neo-grid-cell'],
+            colspan     = record[me.colspanField],
+            {dataField} = column,
+            fieldValue  = Neo.ns(dataField, false, record),
+            cellConfig, rendererOutput;
+
+        if (fieldValue === null || fieldValue === undefined) {
+            fieldValue = ''
+        }
 
-            for (; j < colCount; j++) {
-                column         = columns[j];
-                rendererValue  = Neo.ns(column.field, false, record);
+        rendererOutput = column.renderer.call(column.rendererScope || gridContainer, {
+            column,
+            dataField,
+            gridContainer,
+            index,
+            record,
+            value: fieldValue
+        });
 
-                if (rendererValue === null || rendererValue === undefined) {
-                    rendererValue = ''
+        switch (Neo.typeOf(rendererOutput)) {
+            case 'Object': {
+                if (rendererOutput.html) {
+                    rendererOutput.cls && cellCls.push(...rendererOutput.cls);
+                } else {
+                    rendererOutput = [rendererOutput];
                 }
+                break
+            }
+            case 'Date':
+            case 'Number':
+            case 'String': {
+                rendererOutput = {
+                    cls : cellCls,
+                    html: rendererOutput?.toString()
+                };
+                break
+            }
+        }
 
-                rendererOutput = column.renderer.call(column.rendererScope || container, {
-                    column,
-                    field: column.field,
-                    index: i,
-                    record,
-                    value: rendererValue
-                });
+        if (rendererOutput === null || rendererOutput === undefined) {
+            rendererOutput = ''
+        }
 
-                cellCls = rendererOutput?.cls || ['neo-grid-cell'];
+        if (column.cellAlign !== 'left') {
+            cellCls.push('neo-' + column.cellAlign)
+        }
 
-                if (column.align !== 'left') {
-                    cellCls.push('neo-' + column.align)
-                }
+        if (!cellId) {
+            cellId = me.getCellId(record, column.dataField)
+        }
 
-                if (!Neo.isObject(rendererOutput)) {
-                    rendererOutput = {
-                        cls : cellCls,
-                        html: rendererOutput?.toString()
-                    }
-                }
+        cellConfig = {
+            'aria-colindex': index + 1, // 1 based
+            id             : cellId,
+            cls            : cellCls,
+            role           : 'gridcell',
+            style          : rendererOutput.style || {},
+            tabIndex       : '-1'
+        };
+
+        if (column.width) {
+            cellConfig.style.minWidth = `${column.width}px`
+        }
 
-                cellStyle = rendererOutput.style || {};
+        if (colspan && Object.keys(colspan).includes(dataField)) {
+            cellConfig.colspan = colspan[dataField]
+        }
 
-                if (column.width) {
-                    cellStyle.minWidth = `${column.width}px`
-                }
+        if (Neo.typeOf(rendererOutput) === 'Object') {
+            cellConfig.innerHTML = rendererOutput.html  || ''
+        } else {
+            cellConfig.cn = rendererOutput
+        }
 
-                config = {
-                    id       : me.getCellId(record, column.field),
-                    cls      : cellCls,
-                    innerHTML: rendererOutput.html  || '',
-                    style    : cellStyle,
-                    tabIndex : '-1'
-                };
+        return cellConfig
+    }
 
-                if (column.dock) {
-                    config.cls = ['neo-locked', ...config.cls || []];
+    /**
+     * @param {Object} opts
+     * @param {Object} opts.record
+     * @param {Number} [opts.rowIndex]
+     * @returns {Object}
+     */
+    createRow({record, rowIndex}) {
+        if (!Neo.isNumber(rowIndex)) {
+            rowIndex = this.store.indexOf(record)
+        }
 
-                    if (column.dock === 'left') {
-                        config.style.left = dockLeftMargin + 'px';
-                        dockLeftMargin += column.width
-                    }
-                }
+        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;
 
-                if (column.flex) {
-                    config.style.width = '100%'
-                }
+        me.recordVnodeMap[id] = rowIndex;
+
+        if (rowIndex % 2 !== 0) {
+            trCls.push('neo-even')
+        }
+
+        if (selectedRows && Neo.ns(me.selectedRecordField, false, record)) {
+            NeoArray.add(selectedRows, id)
+        }
+
+        if (selectedRows?.includes(id)) {
+            trCls.push('neo-selected');
 
-                data[i].cn.push(config)
+            gridContainer.fire('select', {
+                record
+            })
+        }
+
+        gridRow = {
+            id,
+            '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)`
             }
+        };
 
-            j = 0;
+        for (i=visibleColumns[0]; i <= visibleColumns[1]; i++) {
+            column = columns[i];
+            config = me.applyRendererOutput({column, gridContainer, index: rowIndex, record});
 
-            for (; j < colCount; j++) {
-                index  = colCount - j -1;
-                column = columns[index];
+            if (column.dock) {
+                config.cls = ['neo-locked', ...config.cls || []]
+            }
 
-                if (column.dock === 'right') {
-                    data[i].cn[index].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'
             }
+
+            gridRow.cn.push(config)
         }
 
-        vdom.cn = data;
+        return gridRow
+    }
+
+    /**
+     *
+     */
+    createViewData() {
+        let me   = this,
+            {bufferRowRange, selectedRows, startIndex} = me,
+            rows = [],
+            endIndex, i;
+
+        if (me.availableRows < 1 || me.columnPositions.length < 1) {
+            return
+        }
+
+        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}))
+        }
 
-        container.dockLeftMargin  = dockLeftMargin;
-        container.dockRightMargin = dockRightMargin;
+        me.getVdomRoot().cn = rows;
 
         me.promiseUpdate().then(() => {
             if (selectedRows?.length > 0) {
-                // this logic only works for selection.table.RowModel
-                Neo.main.DomAccess.scrollToTableRow({
-                    appName: me.appName,
-                    id     : selectedRows[0]
-                })
+                // this logic only works for selection.grid.RowModel
+                Neo.main.DomAccess.scrollToTableRow({appName: me.appName, id: selectedRows[0]})
             }
         })
     }
 
     /**
-     * @param {Boolean} updateParentVdom
-     * @param {Boolean} silent
+     * @param args
      */
-    destroy(updateParentVdom, silent) {
+    destroy(...args) {
         this.store = null;
-        super.destroy(updateParentVdom, silent)
+        super.destroy(...args)
     }
 
     /**
@@ -196,11 +537,11 @@ class View extends Component {
      */
     fireCellEvent(data, eventName) {
         let me        = this,
-            {id}      = data.target,
+            id        = data.currentTarget,
             dataField = me.getCellDataField(id),
             record    = me.getRecord(id);
 
-        me.parent.fire(eventName, {id: me, data, dataField, record})
+        me.gridContainer.fire(eventName, {data, dataField, record, view: me})
     }
 
     /**
@@ -209,10 +550,10 @@ class View extends Component {
      */
     fireRowEvent(data, eventName) {
         let me     = this,
-            {id}   = data.target,
+            id     = data.currentTarget,
             record = me.getRecord(id);
 
-        me.parent.fire(eventName, {id: me, data, record})
+        me.gridContainer.fire(eventName, {data, record, view: me})
     }
 
     /**
@@ -225,15 +566,39 @@ class View extends Component {
 
     /**
      * @param {Object} record
-     * @param {String} field
+     * @param {String} dataField
      * @returns {String}
      */
-    getCellId(record, field) {
-        return this.id + '__' + record[this.store.keyProperty] + '__' + field
+    getCellId(record, dataField) {
+        return this.id + '__' + record[this.store.keyProperty] + '__' + dataField
+    }
+
+    /**
+     * Get a grid column or column index by a given field name
+     * @param {String} field
+     * @param {Boolean} returnIndex=false
+     * @returns {Object|Number|null}
+     */
+    getColumn(field, returnIndex=false) {
+        let {gridContainer} = this,
+            columns         = gridContainer.headerToolbar.items,
+            i               = 0,
+            len             = columns.length,
+            column;
+
+        for (; i < len; i++) {
+            column = columns[i];
+
+            if (column.dataField === field) {
+                return returnIndex ? i : column
+            }
+        }
+
+        return null
     }
 
     /**
-     * Get the matching record by passing a row id, a cell id or an id inside a table cell.
+     * Get the matching record by passing a row id, a cell id or an id inside a grid cell.
      * @param {String} nodeId
      * @returns {Object|null}
      */
@@ -243,7 +608,7 @@ class View extends Component {
             node, parentNodes;
 
         if (record) {
-            return record
+            return record;
         }
 
         parentNodes = VDomUtil.getParentNodes(me.vdom, nodeId);
@@ -273,7 +638,15 @@ class View extends Component {
      * @returns {String}
      */
     getRowId(record, index) {
-        return `${this.id}__tr__${record[this.store.keyProperty]}`
+        let me      = this,
+            {store} = me;
+
+        if (me.useRowRecordIds) {
+            return `${me.id}__tr__${record[store.keyProperty]}`
+        } else {
+            index = Neo.isNumber(index) ? index : store.indexOf(record);
+            return me.vdom.cn[index]?.id || Neo.getId('tr')
+        }
     }
 
     /**
@@ -286,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
      */
@@ -314,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';
@@ -322,25 +737,85 @@ class View extends Component {
      * @param {Neo.data.Model} opts.model The model instance of the changed record
      * @param {Object} opts.record
      */
-    onStoreRecordChange(opts) {
-        let me     = this,
-            deltas = [],
-            cellId, cellNode;
+    onStoreRecordChange({fields, model, record}) {
+        let me               = this,
+            fieldNames       = fields.map(field => field.name),
+            needsUpdate      = false,
+            {gridContainer}  = me,
+            {selectionModel} = gridContainer,
+            {vdom}           = me,
+            cellId, cellNode, column, index, scope;
+
+        if (fieldNames.includes(me.colspanField)) {
+            index = me.store.indexOf(record);
+            me.vdom.cn[index] = me.createRow({record, rowIndex: index});
+            me.update()
+        } else {
+            fields.forEach(field => {
+                if (field.name === me.selectedRecordField) {
+                    if (selectionModel.ntype === 'selection-grid-rowmodel') {
+                        selectionModel[field.value ? 'select' : 'deselect'](me.getRowId(record))
+                    }
+                } else {
+                    cellId   = me.getCellId(record, field.name);
+                    cellNode = VDomUtil.find(vdom, cellId);
+
+                    // the vdom might not exist yet => nothing to do in this case
+                    if (cellNode?.vdom) {
+                        column      = me.getColumn(field.name);
+                        index       = cellNode.index;
+                        needsUpdate = true;
+                        scope       = column.rendererScope || gridContainer;
+
+                        cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, gridContainer, index, record})
+                    }
+                }
+            })
+        }
 
-        opts.fields.forEach(field => {
-            cellId   = me.getCellId(opts.record, field.name);
-            cellNode = me.getVdomChild(cellId);
+        needsUpdate && me.update()
+    }
 
-            cellNode.innerHTML = field.value; // keep the vdom in sync
+    /**
+     *
+     */
+    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()
+        }
+    }
 
-            deltas.push({
-                id       : cellId,
-                innerHTML: field.value
-            })
-        });
+    /**
+     *
+     */
+    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
+            }
+        }
 
-        deltas.length > 0 && Neo.applyDeltas(me.appName, deltas)
+        me.visibleColumns = [startIndex, endIndex]
     }
 }
 
-export default Neo.setupClass(View);
+export default Neo.setupClass(GridView);