canvas-datagrid 0.3.15 → 0.3.19

package/CHANGELOG.md

@@ -7,7 +7,31 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## 0.3.14 - 2021-10-20
+## 0.3.19 - 2021-11-24
+
+### Fixed
+
+- Fix copy when column name or cell value is number (faimaklg, #402)
+- Fix moving multiple columns or rows (xianzhi3, #390)
+- Fix position of scroll bar with frozen pane xianzhi3, (#393)
+
+## 0.3.18 - 2021-11-18
+
+No changes; had to bump version number because race condition caused 0.3.16 to be published instead of 0.3.17.
+
+## 0.3.17 - 2021-11-18
+
+### Fixed
+
+- Do not render row gaps when sorting (ndrsn, #391)
+
+## 0.3.16 - 2021-11-18
+
+### Fixed
+
+- Fix string sort when value is null/undefined (faimaklg, #388)
+
+## 0.3.15 - 2021-11-18
 
 ### Fixed
 

package/dist/canvas-datagrid.debug.js

@@ -2386,8 +2386,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
           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);
-      en.verticalBox.y = columnHeaderCellHeight + self.style.scrollBarBoxMargin + (en.verticalBar.height - self.scrollBox.scrollBoxHeight) * (self.scrollBox.scrollTop / self.scrollBox.scrollHeight);
+
+      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 + 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;
@@ -2796,9 +2802,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
         self.ctx.restore(); // 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.
 
-        if (isRowHeader && self.attributes.showRowNumbers && self.attributes.showRowNumberGaps) {
+        var isSorting = self.orderings.columns && self.orderings.columns.length > 0;
+
+        if (isRowHeader && self.attributes.showRowNumbers && self.attributes.showRowNumberGaps && isSorting === false) {
           var previousRowNumber = self.getBoundRowIndexFromViewRowIndex(rowOrderIndex - 1);
           var hasRowGap = previousRowNumber !== undefined && cell.boundRowIndex > 0 && cell.boundRowIndex - previousRowNumber > 1;
 
@@ -3174,6 +3184,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       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;
@@ -3188,6 +3203,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
           addBorderLine(m, self.reorderTarget.sortRowIndex > self.reorderObject.sortRowIndex ? 'b' : 't');
         }
       } 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;
@@ -3805,14 +3826,20 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     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 - b - d; // TODO: This heightBoxRatio number is terribly wrong.
     // They should be a result of the size of the grid/canvas?
     // it being off causes the scroll bar to "slide" under
     // the dragged mouse.
     // https://github.com/TonyGermaneri/canvas-datagrid/issues/97
 
-    self.scrollBox.heightBoxRatio = (self.scrollBox.height - columnHeaderCellHeight) / dataHeight;
+    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 - b - d;
     self.scrollBox.scrollBoxWidth = Math.max(self.scrollBox.scrollBoxWidth, self.style.scrollBarBoxMinSize);
     self.scrollBox.scrollBoxHeight = Math.max(self.scrollBox.scrollBoxHeight, self.style.scrollBarBoxMinSize); // horizontal
@@ -3827,11 +3854,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     nb.height = self.style.scrollBarBoxWidth; // vertical
 
     v.x += self.width - 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
 
@@ -4060,6 +4088,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
             }
           } else if (dragBounds.top !== -1) {
             self.selectArea(sBounds, true);
+            if (sBounds.left == -1 && sBounds.top !== sBounds.bottom) self.isMultiRowsSelected = true;
           }
         }
 
@@ -4157,12 +4186,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
           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] || [];
@@ -4342,6 +4365,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       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,
       source: self.dragStartObject,
@@ -4353,6 +4382,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
     if (Math.abs(x) > self.attributes.reorderDeadZone || 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,
@@ -4365,7 +4395,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   self.stopDragReorder = function (e) {
     var oIndex,
         tIndex,
-        odata,
+        odata = [],
         cr = {
       'row-reorder': self.orders.rows,
       'column-reorder': self.orders.columns
@@ -4388,14 +4418,45 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       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();
@@ -4461,18 +4522,36 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       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 (self.currentCell && self.currentCell.rowIndex !== undefined && self.dragMode === 'frozen-row-marker') {
       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 && self.currentCell.columnIndex !== undefined && self.dragMode === 'frozen-column-marker') {
       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 || Math.abs(pos.y) > self.attributes.reorderDeadZone) {
@@ -4531,7 +4610,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     self.dragAddToSelection = !self.dragStartObject.selected;
 
     if (!ctrl && !e.shiftKey && !/(vertical|horizontal)-scroll-(bar|box)/.test(self.dragStartObject.context) && self.currentCell && !self.currentCell.isColumnHeader && !move && !freeze && !resize) {
-      self.selections = [];
+      if (!(self.dragMode == 'row-reorder' && self.isMultiRowsSelected)) self.selections = [];
     }
 
     if (self.dragStartObject.isGrid) {
@@ -4622,9 +4701,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     if (['row-reorder', 'column-reorder'].indexOf(self.dragMode) !== -1) {
       self.draggingItem = self.dragStartObject;
 
-      if (self.dragMode === 'column-reorder' && self.attributes.columnHeaderClickBehavior === 'select') {
+      if (self.dragMode === 'column-reorder' && !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);
@@ -4635,16 +4715,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
   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;
@@ -5217,6 +5290,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         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;');
     }
 
@@ -5232,8 +5306,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         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;
@@ -7734,6 +7808,35 @@ __webpack_require__.r(__webpack_exports__);
 
     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
@@ -7746,7 +7849,7 @@ __webpack_require__.r(__webpack_exports__);
   self.isColumnSelected = function (columnIndex) {
     var colIsSelected = true;
     self.viewData.forEach(function (row, rowIndex) {
-      if (!self.selections[rowIndex] || self.selections[rowIndex].indexOf(self.orders.columns[columnIndex]) === -1) {
+      if (!self.selections[rowIndex] || self.selections[rowIndex].indexOf(columnIndex) === -1) {
         colIsSelected = false;
       }
     });
@@ -7874,6 +7977,7 @@ __webpack_require__.r(__webpack_exports__);
         st,
         en,
         s = self.getVisibleSchema();
+    self.isMultiRowsSelected = false;
 
     function de() {
       if (supressEvent) {
@@ -8734,27 +8838,22 @@ __webpack_require__.r(__webpack_exports__);
   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;
-      }
+      var aValue = a[columnName] || '';
+      var 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);
     };
   };