fixed issue #121 column freezing not working. The root cause was a ba…

…d column reorder width index value. Freezing has been refactored to be easier to understand and faster.
TonyGermaneri · Jun 11, 2018 · 15753b4 · 15753b4
1 parent 6dd355f
commit 15753b4
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 62 deletions.
diff --git a/build.txt b/build.txt
@@ -1 +1 @@
-1978
+1981
diff --git a/dist/canvas-datagrid.debug.js b/dist/canvas-datagrid.debug.js
diff --git a/dist/canvas-datagrid.debug.map b/dist/canvas-datagrid.debug.map
diff --git a/dist/canvas-datagrid.js b/dist/canvas-datagrid.js
diff --git a/dist/canvas-datagrid.map b/dist/canvas-datagrid.map
diff --git a/lib/dom.js b/lib/dom.js
@@ -299,7 +299,6 @@ define([], function () {
                     if (ny > self.data.length - 1) {
                         ny = 0;
                     }
-                    console.log('nx', nx, 'ny', ny);
                     self.scrollIntoView(nx, ny);
                     self.beginEditAt(nx, ny);
                 }

diff --git a/lib/draw.js b/lib/draw.js
@@ -312,7 +312,7 @@ define([], function () {
                 column;
             hiddenFrozenColumnCount = 0;
             while (x < n) {
-                column = s[self.orders.columns[x]];
+                column = s[x];
                 if (column.hidden) {
                     hiddenFrozenColumnCount += 1;
                 } else {
@@ -364,7 +364,6 @@ define([], function () {
                 moveBorders = [],
                 selectionHandles = [],
                 rowHeaders = [],
-                frozenColumnWidths = getFrozenColumnsWidth(),
                 l = data.length,
                 u = self.currentCell || {},
                 columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
@@ -781,13 +780,10 @@ define([], function () {
                     if (self.attributes.showRowHeaders) {
                         x += rowHeaderCellWidth;
                     }
-                    if (self.attributes.allowFreezingColumns) {
-                        x += frozenColumnWidths;
-                    }
                     y = 0;
                     // cell height might have changed during drawing
                     cellHeight = self.getColumnHeaderCellHeight();
-                    drawHeaderColumnRange(self.scrollIndexLeft + self.frozenColumn - hiddenFrozenColumnCount, g);
+                    drawHeaderColumnRange(self.scrollIndexLeft, g);
                     nonFrozenHeaderWidth = x;
                     x = self.style.columnHeaderCellBorderWidth;
                     if (self.attributes.showRowHeaders) {
@@ -840,11 +836,8 @@ define([], function () {
                     x += rowHeaderCellWidth;
                 }
                 cellHeight = rowHeight;
-                if (self.attributes.allowFreezingColumns) {
-                    x += frozenColumnWidths;
-                }
                 //draw normal columns
-                for (o = (self.scrollIndexLeft + self.frozenColumn - hiddenFrozenColumnCount); o < g; o += 1) {
+                for (o = (self.scrollIndexLeft); o < g; o += 1) {
                     i = self.orders.columns[o];
                     x += drawCell(rd, r, d)(s[i], i, o);
                     if (x > self.width) {
@@ -1213,6 +1206,7 @@ define([], function () {
                     return a + b;
                 }, 0) / Math.min(drawCount, perfCounters.length)).toFixed(1);
                 d.perfDelta = perfCounters[0].toFixed(1);
+                d.frozenColumnsWidth = getFrozenColumnsWidth();
                 d.htmlImages = Object.keys(self.htmlImageCache).length;
                 d.reorderObject = 'x: ' + (self.reorderObject || {columnIndex: 0}).columnIndex + ', y: ' + (self.reorderObject || {rowIndex: 0}).rowIndex;
                 d.reorderTarget = 'x: ' + (self.reorderTarget || {columnIndex: 0}).columnIndex + ', y: ' + (self.reorderTarget || {rowIndex: 0}).rowIndex;

diff --git a/lib/events.js b/lib/events.js
@@ -160,7 +160,7 @@ define([], function () {
                     self.scrollCache.x[columnIndex] = accumulator;
                     return accumulator;
                 }
-                var va = accumulator + ((self.sizes.columns[columnIndex] || column.width || self.style.cellWidth) * self.scale);
+                var va = accumulator + self.getColummnWidth(self.orders.columns[columnIndex]);
                 self.scrollCache.x[columnIndex] = va;
                 return va;
             }, 0) || 0;
@@ -298,10 +298,10 @@ define([], function () {
                 self.scrollIndexTop = 0;
             }
             self.scrollPixelTop = 0;
-            self.scrollIndexLeft = 0;
+            self.scrollIndexLeft = self.frozenColumn;
             self.scrollPixelLeft = 0;
             while (self.scrollPixelTop < self.scrollBox.scrollTop && self.scrollIndexTop < self.data.length) {
-                // start on index +1 since index +0 was checked prior to loop start in "go too far"
+                // start on index +1 since index 0 was used in "go too far" section above
                 self.scrollIndexTop += 1;
                 self.scrollPixelTop = self.scrollCache.y[self.scrollIndexTop];
             }
@@ -311,8 +311,7 @@ define([], function () {
             }
             if (s.length > 0) {
                 self.scrollIndexLeft = Math.max(self.scrollIndexLeft - 1, 0);
-                self.scrollPixelLeft = Math.max(self.scrollPixelLeft
-                    - ((self.sizes.columns[self.scrollIndexLeft] || s[self.scrollIndexLeft].width || self.style.cellWidth) * self.scale), 0);
+                self.scrollPixelLeft -= self.getColummnWidth(self.orders.columns[self.scrollIndexLeft]);
             }
             if ((self.data || []).length > 0) {
                 self.scrollIndexTop = Math.max(self.scrollIndexTop - 1, 0);
@@ -707,6 +706,7 @@ define([], function () {
                 tIndex = cr[self.dragMode].indexOf(self.reorderTarget[i]);
                 cr[self.dragMode].splice(oIndex, 1);
                 cr[self.dragMode].splice(tIndex, 0, self.reorderObject[i]);
+                self.resize();
                 self.setStorageData();
             }
             self.reorderObject = undefined;

diff --git a/lib/publicMethods.js b/lib/publicMethods.js
@@ -226,15 +226,9 @@ define([], function () {
          * @param {number} columnIndex The column index of the column to find.
          */
         self.findColumnScrollLeft = function (columnIndex) {
-            var left = 0, y = 0, s = self.getSchema(), l = s.length - 1;
-            if (columnIndex > l) {
-                throw new Error('Column index out of range.');
-            }
-            while (y < columnIndex) {
-                left += self.sizes.columns[y] || s[y].width || self.style.cellWidth;
-                y += 1;
-            }
-            return left;
+            var i = Math.max(columnIndex - 1, 0);
+            if (self.scrollCache.x[i] === undefined) { throw new Error('Column index out of range.'); }
+            return self.scrollCache.x[i];
         };
         /**
          * Scrolls to the cell at columnIndex x, and rowIndex y.  If you define both rowIndex and columnIndex additional calculations can be made to center the cell using the target cell's height and width.  Defining only one rowIndex or only columnIndex will result in simpler calculations.

diff --git a/tutorials/developer.html b/tutorials/developer.html
@@ -6,7 +6,9 @@
     <script>
         var s = document.createElement('script');
         s.src = "../dist/canvas-datagrid.debug.js?cacheBust=" + +new Date();
-        s.onload = g;
+        s.onload = function () {
+            setTimeout(g, 1000);
+        }
         document.head.appendChild(s);
     </script>
     <meta name="viewport" content="width=device-width">

diff --git a/tutorials/developer.js b/tutorials/developer.js
@@ -11,6 +11,9 @@ function g() {
             allowFreezingRows: true,
             debug: false
         });
+    grid.addEventListener('expandtree', function (e) {
+        e.treeGrid.data = getData('');
+    });
     grid.style.columnHeaderCellHeight = 40;
     grid.style.cellHeight = 40;
     grid.style.height = '100%';
@@ -19,7 +22,7 @@ function g() {
         var data = [];
         for (x = 0; x < 100; x += 1) {
             data[x] = {};
-            for (y = 0; y < 50; y += 1) {
+            for (y = 0; y < 5; y += 1) {
                 data[x][String.fromCharCode(65 + y)] = prefix + x + ':' + y;
             }
         }
@@ -28,15 +31,22 @@ function g() {
         return data;
     }
     grid.data = getData('');
-    for (x = 0; x < 10; x += 1) {
-        grid.schema[x].width = 1000;
-        // grid.schema[x].hidden = true;
+    for (x = 0; x < 40; x += 1) {
+        // grid.schema[x].width = 500 * Math.random();
+        // grid.schema[x].hidden = Math.random() > 0.5;
     }
+
+    [0, 1, 2].forEach(function (x) {
+        grid.schema[x].width = 100;
+        grid.schema[x].hidden = false;
+    });
+    grid.schema[0].width = 200;
+    grid.schema[0].hidden = false;
     grid.style.height = '100%';
     grid.style.width = '100%';
     // grid.style.height = 'auto';
     // grid.style.width = 'auto';
-    setTimeout(function () {
-        grid.scrollIntoView(20, 75, .5, .5);
-    }, 1000);
+    // setTimeout(function () {
+    //     grid.scrollIntoView(20, 75, .5, .5);
+    // }, 1000);
 }