neo.mjs 8.21.2 → 8.23.0

package/src/grid/View.mjs

@@ -81,6 +81,18 @@ class GridView extends Component {
          * @member {Object} keys
          */
         keys: {},
+        /**
+         * Stores the indexes of the first & last mounted columns, including bufferColumnRange
+         * @member {Number[]} mountedColumns_=[0,0]
+         * @protected
+         */
+        mountedColumns_: [0, 0],
+        /**
+         * Stores the indexes of the first & last mounted rows, including bufferRowRange
+         * @member {Number[]} mountedRows=[0,0]
+         * @protected
+         */
+        mountedRows: [0, 0],
         /**
          * @member {String} role='rowgroup'
          */
@@ -112,10 +124,16 @@ class GridView extends Component {
         store_: null,
         /**
          * Stores the indexes of the first & last painted columns
-         * @member {Number[]} visibleColumns_=[0,0]
+         * @member {Number[]} visibleColumns=[0,0]
+         * @protected
+         */
+        visibleColumns: [0, 0],
+        /**
+         * Stores the indexes of the first & last visible rows, excluding bufferRowRange
+         * @member {Number[]} visibleRows=[0,0]
          * @protected
          */
-        visibleColumns_: [0, 0],
+        visibleRows: [0, 0],
         /**
          * @member {String[]} wrapperCls=[]
          */
@@ -146,6 +164,19 @@ class GridView extends Component {
      */
     scrollTimeoutId = null
 
+    /**
+     * @member {String[]} selectedRows
+     */
+    get selectedCells() {
+        let {selectionModel} = this;
+
+        if (selectionModel.ntype.includes('cell')) {
+            return selectionModel.items
+        }
+
+        return []
+    }
+
     /**
      * @member {String[]} selectedRows
      */
@@ -193,7 +224,7 @@ class GridView extends Component {
      */
     afterSetAvailableHeight(value, oldValue) {
         if (value > 0) {
-            this.availableRows = Math.ceil(value / this.rowHeight) + 1
+            this.availableRows = Math.ceil(value / this.rowHeight) - 1
         }
     }
 
@@ -204,9 +235,7 @@ class GridView extends Component {
      * @protected
      */
     afterSetAvailableRows(value, oldValue) {
-        if (value > 0) {
-            this.createViewData()
-        }
+        value > 0 && this.createViewData()
     }
 
     /**
@@ -252,9 +281,7 @@ class GridView extends Component {
      * @protected
      */
     afterSetContainerWidth(value, oldValue) {
-        if (value > 0) {
-            this.updateVisibleColumns()
-        }
+        value > 0 && this.updateMountedAndVisibleColumns()
     }
 
     /**
@@ -280,6 +307,16 @@ class GridView extends Component {
         this.toggleCls('neo-is-scrolling', value)
     }
 
+    /**
+     * Triggered after the mountedColumns config got changed
+     * @param {Number[]} value
+     * @param {Number[]} oldValue
+     * @protected
+     */
+    afterSetMountedColumns(value, oldValue) {
+        oldValue !== undefined && this.createViewData()
+    }
+
     /**
      * Triggered after the rowHeight config got changed
      * @param {Number} value
@@ -302,16 +339,17 @@ class GridView extends Component {
             newStartIndex;
 
         if (value.x !== oldValue?.x) {
-            me.updateVisibleColumns()
+            me.updateMountedAndVisibleColumns()
         }
 
         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) {
+            if (Math.abs(me.startIndex - newStartIndex) >= bufferRowRange) {
                 me.startIndex = newStartIndex
+            } else {
+                me.visibleRows[0] = newStartIndex;
+                me.visibleRows[1] = newStartIndex + me.availableRows
             }
         }
     }
@@ -336,18 +374,6 @@ class GridView extends Component {
         oldValue !== undefined && this.createViewData()
     }
 
-    /**
-     * 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]
@@ -359,13 +385,13 @@ class GridView extends Component {
      */
     applyRendererOutput(data) {
         let {cellId, column, columnIndex, record, rowIndex} = data,
-            me            = this,
-            gridContainer = me.parent,
-            {store}       = me,
-            cellCls       = ['neo-grid-cell'],
-            colspan       = record[me.colspanField],
-            {dataField}   = column,
-            fieldValue    = record[dataField],
+            me                     = this,
+            gridContainer          = me.parent,
+            {selectedCells, store} = me,
+            cellCls                = ['neo-grid-cell'],
+            colspan                = record[me.colspanField],
+            {dataField}            = column,
+            fieldValue             = record[dataField],
             cellConfig, rendererOutput;
 
         if (fieldValue === null || fieldValue === undefined) {
@@ -421,6 +447,10 @@ class GridView extends Component {
             cellId = me.getCellId(record, column.dataField)
         }
 
+        if (selectedCells.includes(cellId)) {
+            cellCls.push('neo-selected')
+        }
+
         cellConfig = {
             'aria-colindex': columnIndex + 1, // 1 based
             id             : cellId,
@@ -486,12 +516,12 @@ class GridView extends Component {
         }
 
         let me            = this,
-            {bufferColumnRange, selectedRows, visibleColumns} = me,
+            {mountedColumns, selectedRows} = me,
             gridContainer = me.parent,
             columns       = gridContainer.headerToolbar.items,
             id            = me.getRowId(record, rowIndex),
             rowCls        = me.getRowClass(record, rowIndex),
-            config, column, columnPosition, endIndex, gridRow, i, startIndex;
+            config, column, columnPosition,  gridRow, i;
 
         if (rowIndex % 2 !== 0) {
             rowCls.push('neo-even')
@@ -519,10 +549,7 @@ class GridView extends Component {
             }
         };
 
-        endIndex   = Math.min(columns.length - 1, visibleColumns[1] + bufferColumnRange);
-        startIndex = Math.max(0, visibleColumns[0] - bufferColumnRange);
-
-        for (i=startIndex; i <= endIndex; i++) {
+        for (i=mountedColumns[0]; i <= mountedColumns[1]; i++) {
             column = columns[i];
             config = me.applyRendererOutput({column, columnIndex: i, record, rowIndex});
 
@@ -553,26 +580,25 @@ class GridView extends Component {
      *
      */
     createViewData() {
-        let me           = this,
-            {bufferRowRange, startIndex, store} = me,
-            countRecords = store.getCount(),
-            rows         = [],
-            endIndex, i;
+        let me                   = this,
+            {mountedRows, store} = me,
+            rows                 = [],
+            i;
 
         if (
             store.isLoading                   ||
             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
+            me.mountedColumns[1]          < 1
         ) {
             return
         }
 
-        endIndex   = Math.min(countRecords, me.availableRows + startIndex + bufferRowRange);
-        startIndex = Math.max(0, startIndex - bufferRowRange);
+        // Creates the new start & end indexes
+        me.updateMountedAndVisibleRows();
 
-        for (i=startIndex; i < endIndex; i++) {
+        for (i=mountedRows[0]; i < mountedRows[1]; i++) {
             rows.push(me.createRow({record: store.items[i], rowIndex: i}))
         }
 
@@ -700,6 +726,7 @@ class GridView extends Component {
 
     /**
      * Get the matching record by passing a row id, a cell id or an id inside a grid cell.
+     * Limited to mounted rows (must be inside the vdom).
      * @param {String} nodeId
      * @returns {Object|null}
      */
@@ -714,7 +741,7 @@ class GridView extends Component {
 
         parentNodes = VDomUtil.getParentNodes(me.vdom, nodeId);
 
-        for (node of parentNodes) {
+        for (node of parentNodes || []) {
             record = me.getRecordByRowId(node.id);
 
             if (record) {
@@ -725,6 +752,22 @@ class GridView extends Component {
         return null
     }
 
+    /**
+     * @param {String} cellId
+     * @returns {Record}
+     */
+    getRecordByCellId(cellId) {
+        let recordId = cellId.split('__')[1],
+            {store}  = this,
+            keyType  = store.getKeyType();
+
+        if (keyType === 'int' || keyType === 'integer') {
+            recordId = parseInt(recordId)
+        }
+
+        return store.get(recordId)
+    }
+
     /**
      * @param {String} rowId
      * @returns {Record}
@@ -732,9 +775,7 @@ class GridView extends Component {
     getRecordByRowId(rowId) {
         let recordId = rowId.split('__')[2],
             {store}  = this,
-            {model}  = store,
-            keyField = model?.getField(store.getKeyProperty()),
-            keyType  = keyField?.type?.toLowerCase();
+            keyType  = store.getKeyType();
 
         if (keyType === 'int' || keyType === 'integer') {
             recordId = parseInt(recordId)
@@ -823,6 +864,7 @@ class GridView extends Component {
     /**
      * Only triggers for vertical scrolling
      * @param {Object} data
+     * @protected
      */
     onScroll({scrollTop, touches}) {
         let me = this,
@@ -941,29 +983,64 @@ class GridView extends Component {
     }
 
     /**
-     * @param {Boolean} silent=false
+     * Used for keyboard navigation (selection models)
+     * @param {Number} index
+     * @param {Number} step
      */
-    updateScrollHeight(silent=false) {
-        let me           = this,
-            countRecords = me.store.getCount(),
-            {rowHeight}  = me;
+    scrollByRows(index, step) {
+        let me                         = this,
+            {mountedRows, visibleRows} = me,
+            countRecords               = me.store.getCount(),
+            newIndex                   = index + step,
+            lastRowGap, mounted, scrollPosition, visible;
+
+        if (newIndex >= countRecords) {
+            newIndex %= countRecords;
+            step     = newIndex - index
+        }
 
-        if (countRecords > 0 && rowHeight > 0) {
-            me.vdom.cn[0].height = `${(countRecords + 1) * rowHeight}px`;
-            !silent && me.update()
+        while (newIndex < 0) {
+            newIndex += countRecords;
+            step     += countRecords
+        }
+
+        mounted = newIndex >= mountedRows[0] && newIndex <= mountedRows[1];
+
+        // Not using >= or <=, since the first / last row might not be fully visible
+        visible = newIndex > visibleRows[0] && newIndex < visibleRows[1];
+
+        if (!visible) {
+            // Leaving the mounted area will re-calculate the visibleRows for us
+            if (mounted) {
+                visibleRows[0] += step;
+                visibleRows[1] += step
+            }
+
+            if (step < 0) {
+                scrollPosition = newIndex * me.rowHeight
+            } else {
+                lastRowGap     = me.rowHeight - (me.availableHeight % me.rowHeight);
+                scrollPosition = (newIndex - me.availableRows) * me.rowHeight + lastRowGap
+            }
+
+            Neo.main.DomAccess.scrollTo({
+                id      : me.vdom.id,
+                value   : scrollPosition,
+                windowId: me.windowId
+            })
         }
     }
 
     /**
      *
      */
-    updateVisibleColumns() {
-        let me                = this,
-            {columnPositions} = me,
-            {x}               = me.scrollPosition,
-            i                 = 0,
-            len               = columnPositions.getCount(),
-            endIndex          = len - 1,
+    updateMountedAndVisibleColumns() {
+        let me       = this,
+            {bufferColumnRange, columnPositions, visibleColumns} = me,
+            {x}      = me.scrollPosition,
+            i        = 0,
+            len      = columnPositions.getCount(),
+            endIndex = len - 1,
             column, startIndex;
 
         if (len < 1) {
@@ -987,7 +1064,46 @@ class GridView extends Component {
             Math.abs(startIndex - me.visibleColumns[0]) >= me.bufferColumnRange ||
             me.visibleColumns[1] < 1 // initial call
         ) {
-            me.visibleColumns = [startIndex, endIndex]
+            visibleColumns[0] = startIndex;
+            visibleColumns[1] = endIndex;
+
+            endIndex   = Math.min(len - 1, visibleColumns[1] + bufferColumnRange);
+            startIndex = Math.max(0, visibleColumns[0] - bufferColumnRange);
+
+            me.mountedColumns = [startIndex, endIndex]
+        }
+    }
+
+    /**
+     *
+     */
+    updateMountedAndVisibleRows() {
+        let me           = this,
+            {bufferRowRange, startIndex, store} = me,
+            countRecords = store.getCount(),
+            endIndex     = Math.min(countRecords, startIndex + me.availableRows);
+
+        me.visibleRows[0] = startIndex; // update the array inline
+        me.visibleRows[1] = endIndex;
+
+        startIndex = Math.max(0, startIndex - bufferRowRange);
+        endIndex   = Math.min(countRecords, endIndex + bufferRowRange);
+
+        me.mountedRows[0] = startIndex; // update the array inline
+        me.mountedRows[1] = endIndex;
+    }
+
+    /**
+     * @param {Boolean} silent=false
+     */
+    updateScrollHeight(silent=false) {
+        let me           = this,
+            countRecords = me.store.getCount(),
+            {rowHeight}  = me;
+
+        if (countRecords > 0 && rowHeight > 0) {
+            me.vdom.cn[0].height = `${(countRecords + 1) * rowHeight}px`;
+            !silent && me.update()
         }
     }
 }

package/src/grid/header/Toolbar.mjs

@@ -229,7 +229,7 @@ class Toolbar extends BaseToolbar {
                 availableWidth: lastItem.x + lastItem.width - rects[0].x
             });
 
-            !silent && view.updateVisibleColumns()
+            !silent && view.updateMountedAndVisibleColumns()
         }
     }
 

package/src/main/DomAccess.mjs

@@ -888,20 +888,17 @@ class DomAccess extends Base {
     }
 
     /**
+     * See: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy
      * @param {Object} data
-     * @param {String} data.direction left, top
+     * @param {String} data.behavior='auto' auto, instant, smooth
+     * @param {String} data.direction='top' left, top
      * @param {String} data.id
      * @param {Number} data.value
      * @returns {Object} obj.id => the passed id
      */
-    scrollBy(data) {
-        let node = this.getElement(data.id);
-
-        if (node) {
-            node[`scroll${Neo.capitalize(data.direction)}`] += data.value
-        }
-
-        return {id: data.id}
+    scrollBy({behavior='auto', direction='top', id, value}) {
+        this.getElement(id)?.scrollBy({behavior, [direction]: value});
+        return {id}
     }
 
     /**
@@ -928,7 +925,7 @@ 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);
 
@@ -941,31 +938,28 @@ class DomAccess extends Base {
     }
 
     /**
+     * See: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
      * @param {Object} data
+     * @param {String} data.behavior='auto' auto, instant, smooth
      * @param {String} data.direction='top' left, top
      * @param {String} data.id
      * @param {Number} data.value
      * @returns {Object} obj.id => the passed id
      */
-    scrollTo({direction='top', id, value}) {
-        let node = this.getElement(id);
-
-        if (node) {
-            node[`scroll${Neo.capitalize(direction)}`] = value
-        }
-
+    scrollTo({behavior='auto', direction='top', id, value}) {
+        this.getElement(id)?.scrollTo({behavior, [direction]: value});
         return {id}
     }
 
     /**
      * @param {Object} data
      * @param {String} data.id
-     * @param {String} [data.behavior='smooth']
-     * @param {String} [data.offset=34]
+     * @param {String} data.behavior='smooth'
+     * @param {Number} data.offset=34
      * @returns {Object} obj.id => the passed id
      */
-    scrollToTableRow(data) {
-        let node = this.getElement(data.id); // tr tag
+    scrollToTableRow({id, behavior='smooth', offset=34}) {
+        let node = this.getElement(id); // tr tag
 
         if (node) {
             let tableNode   = node.parentNode.parentNode,
@@ -974,12 +968,12 @@ class DomAccess extends Base {
                 top         = node.getBoundingClientRect().top;
 
             wrapperNode.scrollTo({
-                behavior: data.behavior || 'smooth',
-                top     : top - tableTop - (data.hasOwnProperty('offset') ? data.offset : 34)
+                behavior,
+                top: top - tableTop - offset
             })
         }
 
-        return {id: data.id}
+        return {id}
     }
 
     /**

package/src/selection/grid/CellModel.mjs

@@ -112,10 +112,10 @@ class CellModel extends BaseModel {
             {view}       = me,
             {store}      = view,
             currentIndex = 0,
-            dataField, newIndex;
+            dataField, newIndex, record;
 
         if (me.hasSelection()) {
-            currentIndex = store.indexOf(view.getRecord(me.items[0]));
+            currentIndex = store.indexOf(view.getRecordByCellId(me.items[0]));
             dataField    = view.getDataField(me.items[0])
         } else {
             dataField = me.dataFields[0]
@@ -127,7 +127,11 @@ class CellModel extends BaseModel {
             newIndex += store.getCount()
         }
 
-        me.select(view.getCellId(store.getAt(newIndex), dataField))
+        record = store.getAt(newIndex);
+
+        me.select(view.getCellId(record, dataField));
+
+        view.scrollByRows(currentIndex, step)
     }
 
     /**

package/src/selection/grid/RowModel.mjs

@@ -95,6 +95,8 @@ class RowModel extends BaseModel {
 
             if (rowId) {
                 me.select(rowId);
+
+                view.scrollByRows(currentIndex, step);
                 view.fire('select', {record})
             }
         }

package/src/selection/grid/_export.mjs

@@ -0,0 +1,8 @@
+import CellColumnModel    from './CellColumnModel.mjs';
+import CellColumnRowModel from './CellColumnRowModel.mjs';
+import CellModel          from './CellModel.mjs';
+import CellRowModel       from './CellRowModel.mjs';
+import ColumnModel        from './ColumnModel.mjs';
+import RowModel           from './RowModel.mjs';
+
+export {CellColumnModel, CellColumnRowModel, CellModel, CellRowModel, ColumnModel, RowModel};

package/src/util/ClassSystem.mjs

@@ -21,7 +21,7 @@ class ClassSystem extends Base {
      * @returns {Neo.core.Base} instance
      */
     static beforeSetInstance(config, DefaultClass=null, defaultValues={}) {
-        let isInstance = config instanceof Neo.core.Base;
+        let configType = Neo.typeOf(config);
 
         if (Neo.isString(DefaultClass)) {
             DefaultClass = Neo.ns(DefaultClass)
@@ -29,9 +29,9 @@ class ClassSystem extends Base {
 
         if (!config && DefaultClass) {
             config = Neo.create(DefaultClass, defaultValues)
-        } else if (config?.isClass) {
+        } else if (configType === 'NeoClass') {
             config = Neo.create(config, defaultValues)
-        } else if (Neo.isObject(config) && !isInstance) {
+        } else if (configType === 'Object') {
             if (config.ntype) {
                 config = Neo.ntype({
                     ...defaultValues,
@@ -51,7 +51,7 @@ class ClassSystem extends Base {
 
                 config = Neo.create(newConfig)
             }
-        } else if (isInstance) {
+        } else if (configType === 'NeoInstance') {
             if (defaultValues?.listeners) {
                 config.on(defaultValues.listeners)
             }

package/resources/scss/src/examples/ConfigurationPanel.scss

@@ -1,25 +0,0 @@
-.neo-configuration-panel {
-    transition: width .5s ease-in-out;
-
-    .neo-details-label {
-        background-color: #323232;
-        color           : #ddd;
-        font-size       : 13px;
-        margin          : 10px;
-        padding         : 10px;
-        white-space     : normal;
-    }
-
-    .neo-toolbar {
-        border       : 0;
-        border-bottom: 1px solid var(--panel-border-color);
-    }
-}
-
-.neo-configuration-panel-body {
-    overflow-y: scroll;
-}
-
-.neo-examples-tab-component {
-    background-color: var(--examples-tab-component-background-color);
-}