canvas-datagrid 0.3.15 → 0.3.19

package/dist/types.d.ts

@@ -416,6 +416,11 @@ declare class canvasDatagrid {
      * @param dontDraw - Suppress the draw method after the selection change.
      */
     static selectAll(dontDraw: boolean): void;
+    /**
+     * Returns true if indices of columns next to the selected columnIndex is selected on every row.
+     * @param columnIndex - The column index to check.
+     */
+    static isMultiColumnsSelected(columnIndex: number): void;
     /**
      * Returns true if the selected columnIndex is selected on every row.
      * @param columnIndex - The column index to check.

package/lib/draw.js

@@ -601,15 +601,29 @@ export default function (self) {
         m = self.style.scrollBarBoxMargin * 2;
       self.ctx.strokeStyle = self.style.scrollBarBorderColor;
       self.ctx.lineWidth = self.style.scrollBarBorderWidth;
-      en.horizontalBox.x =
-        rowHeaderCellWidth +
-        self.style.scrollBarBoxMargin +
-        (en.horizontalBar.width - self.scrollBox.scrollBoxWidth) *
-          (self.scrollBox.scrollLeft / self.scrollBox.scrollWidth);
+      if (self.frozenColumn > 0) {
+        en.horizontalBox.x =
+          rowHeaderCellWidth +
+          self.style.scrollBarBoxMargin +
+          self.scrollCache.x[self.frozenColumn - 1] +
+          (en.horizontalBar.width -
+            self.scrollCache.x[self.frozenColumn - 1] -
+            self.scrollBox.scrollBoxWidth) *
+            (self.scrollBox.scrollLeft / self.scrollBox.scrollWidth);
+      } else {
+        en.horizontalBox.x =
+          rowHeaderCellWidth +
+          self.style.scrollBarBoxMargin +
+          (en.horizontalBar.width - self.scrollBox.scrollBoxWidth) *
+            (self.scrollBox.scrollLeft / self.scrollBox.scrollWidth);
+      }
       en.verticalBox.y =
         columnHeaderCellHeight +
         self.style.scrollBarBoxMargin +
-        (en.verticalBar.height - self.scrollBox.scrollBoxHeight) *
+        self.scrollCache.y[self.frozenRow] +
+        (en.verticalBar.height -
+          self.scrollBox.scrollBoxHeight -
+          self.scrollCache.y[self.frozenRow]) *
           (self.scrollBox.scrollTop / self.scrollBox.scrollHeight);
       if (self.scrollBox.horizontalBarVisible) {
         self.ctx.fillStyle = self.style.scrollBarBackgroundColor;
@@ -1102,11 +1116,17 @@ export default function (self) {
 
         // Gaps may occur in row numbers between consecutively rendered rows
         // when we are filtering. We draw attention to this by drawing a thick
-        // border overlapping the two consecutive row headers.
+        // border overlapping the two consecutive row headers. If sorting, visible
+        // row numbers stay the same (i.e. they don't correspond to the underlying
+        // data's row number), so we do not show row gaps in that case.
+        const isSorting =
+          self.orderings.columns && self.orderings.columns.length > 0;
+
         if (
           isRowHeader &&
           self.attributes.showRowNumbers &&
-          self.attributes.showRowNumberGaps
+          self.attributes.showRowNumberGaps &&
+          isSorting === false
         ) {
           const previousRowNumber = self.getBoundRowIndexFromViewRowIndex(
             rowOrderIndex - 1,
@@ -1514,6 +1534,10 @@ export default function (self) {
       self.ctx.lineWidth = self.style.reorderMarkerBorderWidth;
       self.ctx.strokeStyle = self.style.reorderMarkerBorderColor;
       if (self.dragMode === 'row-reorder') {
+        for (var k = 0; k < self.selections.length; k++) {
+          if (!self.selections[k] || k == self.reorderObject.rowIndex) continue;
+          b.height += self.getRowHeight(k);
+        }
         b.width = w;
         b.x = 0;
         m.width = w;
@@ -1536,6 +1560,12 @@ export default function (self) {
           );
         }
       } else if (self.dragMode === 'column-reorder' && self.reorderObject) {
+        var selectedColumns = self.selections[0];
+        for (var k = 1; k < selectedColumns.length; k++) {
+          b.width += self.getColumnWidth(
+            self.orders.columns[selectedColumns[k]],
+          );
+        }
         b.height = h;
         b.y = 0;
         m.height = h;

package/lib/events/index.js

@@ -254,7 +254,13 @@ export default function (self) {
     setScrollBoxSize();
     self.scrollBox.scrollWidth = dataWidth - self.scrollBox.width;
     self.scrollBox.scrollHeight = dataHeight - self.scrollBox.height;
-    self.scrollBox.widthBoxRatio = self.scrollBox.width / dataWidth;
+    if (self.frozenColumn > 0) {
+      self.scrollBox.widthBoxRatio =
+        (self.scrollBox.width - self.scrollCache.x[self.frozenColumn - 1]) /
+        dataWidth;
+    } else {
+      self.scrollBox.widthBoxRatio = self.scrollBox.width / dataWidth;
+    }
     self.scrollBox.scrollBoxWidth =
       self.scrollBox.width * self.scrollBox.widthBoxRatio -
       self.style.scrollBarWidth -
@@ -266,7 +272,10 @@ export default function (self) {
     // the dragged mouse.
     // https://github.com/TonyGermaneri/canvas-datagrid/issues/97
     self.scrollBox.heightBoxRatio =
-      (self.scrollBox.height - columnHeaderCellHeight) / dataHeight;
+      (self.scrollBox.height -
+        columnHeaderCellHeight -
+        self.scrollCache.y[self.frozenRow]) /
+      dataHeight;
     self.scrollBox.scrollBoxHeight =
       self.scrollBox.height * self.scrollBox.heightBoxRatio -
       self.style.scrollBarWidth -
@@ -296,12 +305,13 @@ export default function (self) {
       self.style.scrollBarWidth -
       self.style.scrollBarBorderWidth -
       d;
-    v.y += columnHeaderCellHeight;
+    v.y += columnHeaderCellHeight + self.scrollCache.y[self.frozenRow];
     v.width = self.style.scrollBarWidth + self.style.scrollBarBorderWidth + d;
     v.height =
       self.height - columnHeaderCellHeight - self.style.scrollBarWidth - d - m;
     // vertical box
     vb.x = v.x + self.style.scrollBarBoxMargin;
+    vb.y += self.scrollCache.y[self.frozenRow];
     vb.width = self.style.scrollBarBoxWidth;
     vb.height = self.scrollBox.scrollBoxHeight;
     // corner
@@ -546,6 +556,8 @@ export default function (self) {
             }
           } else if (dragBounds.top !== -1) {
             self.selectArea(sBounds, true);
+            if (sBounds.left == -1 && sBounds.top !== sBounds.bottom)
+              self.isMultiRowsSelected = true;
           }
         }
 
@@ -641,11 +653,6 @@ export default function (self) {
           checkSelectionChange();
           return;
         }
-        if (self.attributes.columnHeaderClickBehavior === 'select') {
-          self.selectColumn(i.header.index, ctrl, e.shiftKey);
-          self.draw();
-          return;
-        }
       }
       self.selections[i.rowIndex] = self.selections[i.rowIndex] || [];
       if (
@@ -868,6 +875,14 @@ export default function (self) {
     if (!self.attributes.allowRowReordering && rowReorder) {
       return;
     }
+    if ((e.ctrlKey || e.metaKey || e.shiftKey) && self.reorderObject) {
+      if (
+        self.dragMode === 'column-reorder' &&
+        !self.isMultiColumnsSelected(self.draggingItem.header.index)
+      ) {
+        self.selectColumn(self.draggingItem.header.index, false, false);
+      }
+    }
     if (
       self.dispatchEvent('reordering', {
         NativeEvent: e,
@@ -883,6 +898,11 @@ export default function (self) {
       Math.abs(y) > self.attributes.reorderDeadZone
     ) {
       self.reorderObject = self.draggingItem;
+      if (self.isMultiRowsSelected)
+        self.reorderObject = self.getVisibleCellByIndex(
+          -1,
+          self.activeCell.rowIndex,
+        );
       self.reorderTarget = self.currentCell;
       self.reorderObject.dragOffset = {
         x: x,
@@ -899,7 +919,7 @@ export default function (self) {
   self.stopDragReorder = function (e) {
     var oIndex,
       tIndex,
-      odata,
+      odata = [],
       cr = {
         'row-reorder': self.orders.rows,
         'column-reorder': self.orders.columns,
@@ -931,14 +951,40 @@ export default function (self) {
       oIndex = cr[self.dragMode].indexOf(self.reorderObject[i]);
       tIndex = cr[self.dragMode].indexOf(self.reorderTarget[i]);
       if (self.dragMode === 'column-reorder') {
-        cr[self.dragMode].splice(oIndex, 1);
-        cr[self.dragMode].splice(tIndex, 0, self.reorderObject[i]);
+        var sortColumnIndices = [];
+        var seletedColumnIndices = [];
+        if (self.selections[0]) {
+          self.selections[0].forEach(function (value) {
+            sortColumnIndices.push(self.orders.columns[value]);
+          });
+        }
+        var deleteCount = sortColumnIndices.length;
+        cr[self.dragMode].splice(oIndex, deleteCount);
+        if (tIndex > oIndex) tIndex = tIndex - (deleteCount - 1);
+        for (var i = 0; i < sortColumnIndices.length; i++) {
+          seletedColumnIndices.push(tIndex + i);
+          cr[self.dragMode].splice(tIndex + i, 0, sortColumnIndices[i]);
+        }
         self.orders.columns = cr[self.dragMode];
+        self.viewData.forEach(function (row, rowIndex) {
+          self.selections[rowIndex] = seletedColumnIndices;
+        });
       } else {
-        // self.orders.rows = cr[self.dragMode];
-        odata = self.viewData[oIndex];
-        self.viewData[oIndex] = self.viewData[tIndex];
-        self.viewData[tIndex] = odata;
+        var selectedRows = [];
+        self.selections.forEach(function (row, rowIndex) {
+          if (row) {
+            selectedRows.push(row);
+            odata.push(self.viewData[rowIndex]);
+          }
+        });
+        self.viewData.splice(oIndex, odata.length);
+        self.selections = [];
+        if (tIndex > oIndex) tIndex = tIndex - (odata.length - 1);
+        self.activeCell.rowIndex = tIndex;
+        for (var i = 0; i < odata.length; i++) {
+          self.viewData.splice(tIndex + i, 0, odata[i]);
+          self.selections[tIndex + i] = selectedRows[i];
+        }
       }
       self.resize();
       self.setStorageData();
@@ -1000,7 +1046,12 @@ export default function (self) {
     ) {
       return;
     }
-    var pos = self.getLayerPos(e);
+    var pos = self.getLayerPos(e),
+      bm = self.style.gridBorderCollapse === 'collapse' ? 1 : 2,
+      columnHeaderCellBorder = self.style.columnHeaderCellBorderWidth * bm,
+      columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
+      rowHeaderCellWidth = self.getRowHeaderCellWidth();
+
     self.ignoreNextClick = true;
     self.freezeMarkerPosition = pos;
     if (
@@ -1010,6 +1061,28 @@ export default function (self) {
     ) {
       self.scrollBox.scrollTop = 0;
       self.frozenRow = self.currentCell.rowIndex + 1;
+      self.scrollBox.bar.v.y =
+        columnHeaderCellHeight +
+        columnHeaderCellBorder +
+        self.scrollCache.y[self.frozenRow];
+      self.scrollBox.box.v.y =
+        columnHeaderCellHeight +
+        columnHeaderCellBorder +
+        self.scrollCache.y[self.frozenRow];
+      var dataHeight = self.scrollCache.y[self.scrollCache.y.length - 1];
+      self.scrollBox.heightBoxRatio =
+        (self.scrollBox.height -
+          columnHeaderCellHeight -
+          self.scrollCache.y[self.frozenRow]) /
+        dataHeight;
+      self.scrollBox.scrollBoxHeight =
+        self.scrollBox.height * self.scrollBox.heightBoxRatio -
+        self.style.scrollBarWidth;
+      self.scrollBox.scrollBoxHeight = Math.max(
+        self.scrollBox.scrollBoxHeight,
+        self.style.scrollBarBoxMinSize,
+      );
+      self.scrollBox.box.v.height = self.scrollBox.scrollBoxHeight;
     }
     if (
       self.currentCell &&
@@ -1018,6 +1091,22 @@ export default function (self) {
     ) {
       self.scrollBox.scrollLeft = 0;
       self.frozenColumn = self.currentCell.columnIndex + 1;
+      self.scrollBox.bar.h.x =
+        rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn - 1];
+      self.scrollBox.box.h.x =
+        rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn - 1];
+      var dataWidth = self.scrollCache.x[self.scrollCache.x.length - 1];
+      self.scrollBox.widthBoxRatio =
+        (self.scrollBox.width - self.scrollCache.x[self.frozenColumn - 1]) /
+        dataWidth;
+      self.scrollBox.scrollBoxWidth =
+        self.scrollBox.width * self.scrollBox.widthBoxRatio -
+        self.style.scrollBarWidth;
+      self.scrollBox.scrollBoxWidth = Math.max(
+        self.scrollBox.scrollBoxWidth,
+        self.style.scrollBarBoxMinSize,
+      );
+      self.scrollBox.box.h.width = self.scrollBox.scrollBoxWidth;
     }
     if (
       Math.abs(pos.x) > self.attributes.reorderDeadZone ||
@@ -1084,7 +1173,8 @@ export default function (self) {
       !freeze &&
       !resize
     ) {
-      self.selections = [];
+      if (!(self.dragMode == 'row-reorder' && self.isMultiRowsSelected))
+        self.selections = [];
     }
     if (self.dragStartObject.isGrid) {
       return;
@@ -1175,10 +1265,11 @@ export default function (self) {
       self.draggingItem = self.dragStartObject;
       if (
         self.dragMode === 'column-reorder' &&
-        self.attributes.columnHeaderClickBehavior === 'select'
+        !self.isMultiColumnsSelected(self.currentCell.header.index)
       ) {
         self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
-        self.draw();
+      } else if (self.dragMode === 'row-reorder' && !self.isMultiRowsSelected) {
+        self.selectRow(self.dragStartObject.rowIndex, ctrl, null);
       }
       document.body.addEventListener('mousemove', self.dragReorder, false);
       document.body.addEventListener('mouseup', self.stopDragReorder, false);
@@ -1187,14 +1278,9 @@ export default function (self) {
   };
   self.mouseup = function (e) {
     clearTimeout(self.scrollTimer);
-    var ctrl = e.ctrlKey || e.metaKey;
     self.cellBoundaryCrossed = true;
     self.rowBoundaryCrossed = true;
     self.columnBoundaryCrossed = true;
-    if (self.draggingItem) {
-      self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
-      self.draw();
-    }
     self.selecting = undefined;
     self.draggingItem = undefined;
     self.dragStartObject = undefined;
@@ -1740,6 +1826,7 @@ export default function (self) {
       firstRowKeys,
       isNeat = true; // Selected like [[0, 1], [0, 1]] of [[0, 3]] is neat; Selected like [[0, 1], [1, 2]] is untidy
     function htmlSafe(v) {
+      if (typeof v === 'number') return v;
       return v.replace(/</g, '&lt;').replace(/>/g, '&gt;');
     }
     s.forEach(function (column, columnIndex) {
@@ -1753,8 +1840,8 @@ export default function (self) {
         if (!firstRowKeys) firstRowKeys = Object.keys(row);
         if (isNeat && rowKeys.length !== firstRowKeys.length) isNeat = false;
         sSorted.forEach(function (column, columnIndex) {
-          if (rowKeys.indexOf(column.name) < 0) {
-            if (firstRowKeys.indexOf(column.name) < 0) {
+          if (rowKeys.indexOf(String(column.name)) < 0) {
+            if (firstRowKeys.indexOf(String(column.name)) < 0) {
               return;
             } else if (isNeat) {
               isNeat = false;

package/lib/publicMethods.js

@@ -379,6 +379,37 @@ export default function (self) {
     }
     self.draw();
   };
+  /**
+   * Returns true if indices of columns next to the selected columnIndex is selected on every row.
+   * @memberof canvasDatagrid
+   * @name isMultiColumnsSelected
+   * @method
+   * @param {number} columnIndex The column index to check.
+   */
+  self.isMultiColumnsSelected = function (columnIndex) {
+    var multiColIsSelected = true;
+    self.viewData.forEach(function (row, rowIndex) {
+      var columnIndices = self.selections[rowIndex];
+      if (
+        !columnIndices ||
+        columnIndices.length <= 1 ||
+        columnIndices.indexOf(columnIndex) === -1
+      ) {
+        multiColIsSelected = false;
+      } else if (columnIndices.length > 1) {
+        if (columnIndices[0] != columnIndex) multiColIsSelected = false;
+        else {
+          for (var i = 0; i < columnIndices.length - 1; i++) {
+            if (columnIndices[i] + 1 != columnIndices[i + 1]) {
+              multiColIsSelected = false;
+              break;
+            }
+          }
+        }
+      }
+    });
+    return multiColIsSelected;
+  };
   /**
    * Returns true if the selected columnIndex is selected on every row.
    * @memberof canvasDatagrid
@@ -391,8 +422,7 @@ export default function (self) {
     self.viewData.forEach(function (row, rowIndex) {
       if (
         !self.selections[rowIndex] ||
-        self.selections[rowIndex].indexOf(self.orders.columns[columnIndex]) ===
-          -1
+        self.selections[rowIndex].indexOf(columnIndex) === -1
       ) {
         colIsSelected = false;
       }
@@ -504,6 +534,7 @@ export default function (self) {
       st,
       en,
       s = self.getVisibleSchema();
+    self.isMultiRowsSelected = false;
     function de() {
       if (supressEvent) {
         return;
@@ -1367,22 +1398,18 @@ export default function (self) {
   self.sorters.string = function (columnName, direction) {
     var asc = direction === 'asc';
     return function (a, b) {
-      if (a[columnName] === undefined || a[columnName] === null) {
-        return 1;
-      }
-      if (b[columnName] === undefined || b[columnName] === null) {
-        return 0;
-      }
+      const aValue = a[columnName] || '';
+      const bValue = b[columnName] || '';
       if (asc) {
-        if (!a[columnName].localeCompare) {
+        if (!aValue.localeCompare) {
           return 1;
         }
-        return a[columnName].localeCompare(b[columnName]);
+        return aValue.localeCompare(bValue);
       }
-      if (!b[columnName].localeCompare) {
+      if (!bValue.localeCompare) {
         return 1;
       }
-      return b[columnName].localeCompare(a[columnName]);
+      return bValue.localeCompare(aValue);
     };
   };
   self.sorters.number = function (columnName, direction) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.3.15",
+  "version": "0.3.19",
   "description": "Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.",
   "main": "./dist/canvas-datagrid.js",
   "module": "./dist/canvas-datagrid.module.js",