neo.mjs 8.4.1 → 8.4.2

package/apps/ServiceWorker.mjs

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

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.4.1'
+                html  : 'v8.4.2'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/MainContainer.mjs

@@ -49,12 +49,19 @@ class MainContainer extends Viewport {
                 value     : '50',
                 width     : 200
             }, {
-                labelText : 'Buffer Row Range',
-                labelWidth: 140,
+                labelText : 'Buffer Rows',
+                labelWidth: 95,
                 listeners : {change: 'up.ontBufferRowRangeChange'},
                 store     : ['0', '3', '5', '10', '25', '50'],
                 value     : '5',
-                width     : 200
+                width     : 160
+            }, {
+                labelText : 'Buffer Columns',
+                labelWidth: 120,
+                listeners : {change: 'up.ontBufferColumnRangeChange'},
+                store     : ['0', '3', '5', '10', '20'],
+                value     : '0',
+                width     : 185
             }]
         }, {
             module    : GridContainer,
@@ -73,12 +80,16 @@ class MainContainer extends Viewport {
         style: {padding: '20px'}
     }
 
+    get grid() {
+        return this.getItem('grid')
+    }
+
     /**
      * @param {Object} data
      */
     onAmountColumnsChange(data) {
         if (data.oldValue) {
-            this.getItem('grid').amountColumns = parseInt(data.value.id)
+            this.grid.amountColumns = parseInt(data.value.id)
         }
     }
 
@@ -87,7 +98,16 @@ class MainContainer extends Viewport {
      */
     onAmountRowsChange(data) {
         if (data.oldValue) {
-            this.getItem('grid').store.amountRows = parseInt(data.value.id)
+            this.grid.store.amountRows = parseInt(data.value.id)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    ontBufferColumnRangeChange(data) {
+        if (data.oldValue) {
+            this.grid.view.bufferColumnRange = parseInt(data.value.id)
         }
     }
 
@@ -96,7 +116,7 @@ class MainContainer extends Viewport {
      */
     ontBufferRowRangeChange(data) {
         if (data.oldValue) {
-            this.getItem('grid').view.bufferRowRange = parseInt(data.value.id)
+            this.grid.view.bufferRowRange = parseInt(data.value.id)
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.4.1",
+    "version": "8.4.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/DefaultConfig.mjs

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

package/src/grid/Container.mjs

@@ -608,12 +608,6 @@ class GridContainer extends BaseContainer {
             if (me.store.sorters.length < 1) {
                 me.removeSortingCss()
             }
-        } else {
-            me.on('rendered', () => {
-                me.timeout(50).then(() => {
-                    me.createViewData(data)
-                })
-            }, me, {once: true})
         }
     }
 

package/src/grid/View.mjs

@@ -38,6 +38,12 @@ class GridView extends Component {
          * @protected
          */
         baseCls: ['neo-grid-view'],
+        /**
+         * The amount of columns (cells) to paint before the first & after the last visible column,
+         * to enhance the scrolling performance
+         * @member {Number} bufferColumnRange_=0
+         */
+        bufferColumnRange_: 0,
         /**
          * The amount of rows to paint before the first & after the last visible row,
          * to enhance the scrolling performance
@@ -54,6 +60,11 @@ class GridView extends Component {
          * @protected
          */
         containerId: null,
+        /**
+         * Internal flag. Gets calculated after mounting grid.View rows
+         * @member {Number} containerWidth_=0
+         */
+        containerWidth_: 0,
         /**
          * @member {Object[]} columnPositions_=[]
          * @protected
@@ -98,7 +109,7 @@ class GridView extends Component {
         useRowRecordIds: true,
         /**
          * Stores the indexes of the first & last painted columns
-         * @member {Array} visibleColumns_=[0,0]
+         * @member {Number[]} visibleColumns_=[0,0]
          * @protected
          */
         visibleColumns_: [0, 0],
@@ -205,6 +216,16 @@ class GridView extends Component {
         }
     }
 
+    /**
+     * Triggered after the bufferColumnRange config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetBufferColumnRange(value, oldValue) {
+        oldValue !== undefined && this.createViewData()
+    }
+
     /**
      * Triggered after the bufferRowRange config got changed
      * @param {Number} value
@@ -215,6 +236,18 @@ class GridView extends Component {
         oldValue !== undefined && this.createViewData()
     }
 
+    /**
+     * Triggered after the containerWidth config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetContainerWidth(value, oldValue) {
+        if (value > 0 && this.columnPositions.length > 0) {
+            this.updateVisibleColumns()
+        }
+    }
+
     /**
      * Triggered after the columnPositions config got changed
      * @param {Object[]} value
@@ -222,13 +255,8 @@ class GridView extends Component {
      * @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;
-
-            me.createViewData()
+        if (value.length > 0 && this.containerWidth > 0) {
+            this.updateVisibleColumns()
         }
     }
 
@@ -322,8 +350,8 @@ class GridView extends Component {
 
     /**
      * Triggered after the visibleColumns config got changed
-     * @param {Number} value
-     * @param {Number} oldValue
+     * @param {Number[]} value
+     * @param {Number[]} oldValue
      * @protected
      */
     afterSetVisibleColumns(value, oldValue) {
@@ -433,11 +461,11 @@ class GridView extends Component {
         }
 
         let me       = this,
-            {gridContainer, selectedRows, visibleColumns} = me,
+            {bufferColumnRange, gridContainer, selectedRows, visibleColumns} = me,
             columns  = gridContainer.items[0].items,
             id       = me.getRowId(record, rowIndex),
             trCls    = me.getTrClass(record, rowIndex),
-            config, column, gridRow, i;
+            config, column, endIndex, gridRow, i, startIndex;
 
         me.recordVnodeMap[id] = rowIndex;
 
@@ -471,7 +499,10 @@ class GridView extends Component {
             }
         };
 
-        for (i=visibleColumns[0]; i <= visibleColumns[1]; i++) {
+        endIndex   = Math.min(columns.length - 1, visibleColumns[1] + bufferColumnRange);
+        startIndex = Math.max(0, visibleColumns[0] - bufferColumnRange);
+
+        for (i=startIndex; i <= endIndex; i++) {
             column = columns[i];
             config = me.applyRendererOutput({column, gridContainer, index: rowIndex, record});
 
@@ -495,16 +526,23 @@ class GridView extends Component {
      *
      */
     createViewData() {
-        let me   = this,
+        let me           = this,
             {bufferRowRange, startIndex, store} = me,
-            rows = [],
+            countRecords = store.getCount(),
+            rows         = [],
             endIndex, i;
 
-        if (store.getCount() < 1 || me.availableRows < 1 || me.columnPositions.length < 1) {
+        if (
+            countRecords              < 1 ||
+            me.availableRows          < 1 ||
+            me._containerWidth        < 1 || // we are not checking me.containerWidth, since we want to ignore the config symbol
+            me.columnPositions.length < 1 ||
+            me.visibleColumns[1]      < 1
+        ) {
             return
         }
 
-        endIndex   = Math.min(store.getCount(), me.availableRows + startIndex + bufferRowRange);
+        endIndex   = Math.min(countRecords, me.availableRows + startIndex + bufferRowRange);
         startIndex = Math.max(0, startIndex - bufferRowRange);
 
         for (i=startIndex; i < endIndex; i++) {
@@ -787,15 +825,16 @@ class GridView extends Component {
      *
      */
     updateVisibleColumns() {
-        let me       = this,
-            {x}      = me.scrollPosition,
-            i        = 0,
-            len      = me.columnPositions.length,
-            endIndex = len - 1,
+        let me                = this,
+            {columnPositions} = me,
+            {x}               = me.scrollPosition,
+            i                 = 0,
+            len               = columnPositions.length,
+            endIndex          = len - 1,
             column, startIndex;
 
         for (; i < len; i++) {
-            column = me.columnPositions[i];
+            column = columnPositions[i];
 
             if (x >= column.x && x <= column.x + column.width) {
                 startIndex = i
@@ -807,7 +846,12 @@ class GridView extends Component {
             }
         }
 
-        me.visibleColumns = [startIndex, endIndex]
+        if (
+            Math.abs(startIndex - me.visibleColumns[0]) >= me.bufferColumnRange ||
+            me.visibleColumns[1] < 1 // initial call
+        ) {
+            me.visibleColumns = [startIndex, endIndex]
+        }
     }
 }