canvas-datagrid 0.4.2 → 0.4.5

package/lib/groups/util.js

@@ -0,0 +1,42 @@
+'use strict';
+
+/**
+ * Merge a new hidden row range into existed ranges array
+ * @param {any[]} hiddenRowRanges tuples: Array<[bgeinRowIndex, endRowIndex]>
+ * @param {number[]} newRange tuple: [beginRowIndex, endRowIndex]
+ * @returns {boolean}
+ */
+const mergeHiddenRowRanges = function (hiddenRowRanges, newRange) {
+  const [beginRowIndex, endRowIndex] = newRange;
+  if (endRowIndex < beginRowIndex) return false;
+  let inserted = false;
+  for (let i = 0; i < hiddenRowRanges.length; i++) {
+    const range = hiddenRowRanges[i];
+    if (beginRowIndex > range[1] + 1) continue;
+    if (beginRowIndex <= range[0] && endRowIndex >= range[0]) {
+      hiddenRowRanges[i] = [beginRowIndex, Math.max(endRowIndex, range[1])];
+      inserted = true;
+      break;
+    }
+    if (beginRowIndex >= range[0]) {
+      hiddenRowRanges[i] = [range[0], Math.max(endRowIndex, range[1])];
+      inserted = true;
+      break;
+    }
+  }
+  if (!inserted) hiddenRowRanges.push([beginRowIndex, endRowIndex]);
+  // merge intersections after sorting ranges
+  hiddenRowRanges.sort((a, b) => a[0] - b[0]);
+  for (let i = 0; i < hiddenRowRanges.length - 1; i++) {
+    const range = hiddenRowRanges[i];
+    const nextRange = hiddenRowRanges[i + 1];
+    if (nextRange[0] <= range[1] + 1) {
+      hiddenRowRanges[i] = [range[0], Math.max(range[1], nextRange[1])];
+      hiddenRowRanges.splice(i + 1, 1);
+      i--;
+    }
+  }
+  return true;
+};
+
+export { mergeHiddenRowRanges };

package/lib/intf.js

@@ -57,6 +57,19 @@ export default function (self, ctor) {
   self.scrollBox = {};
   self.visibleRows = [];
   self.visibleCells = [];
+  /**
+   * Each item of this  array contains these properties:
+   * - `x`, `y`, `x2`, `y2`
+   * - `orderIndex0`, `orderIndex1`: The closed interval of the hiding rows/columns.
+   * - `dir`: The directon of the unhide indicator. 'l' and 'r' for columns, 't' and 'b' for rows
+   */
+  self.visibleUnhideIndicators = [];
+  /**
+   * Each item is a tuple conatins two numbers:
+   * its type difination: Array<[beginRowIndex, endRowIndex]>
+   * Each tuple represents a closed Interval
+   */
+  self.hiddenRowRanges = [];
   /**
    * This array stored all groups information with context for drawing,
    * it is generated by drawing functions,
@@ -77,6 +90,9 @@ export default function (self, ctor) {
     trees: {},
   };
   self.selections = [];
+  self.selectedRows = [];
+  self.selectedColumns = [];
+  self.fillOverlay = {};
   self.filterable = {
     rows: [],
     columns: [],
@@ -162,6 +178,8 @@ export default function (self, ctor) {
     'cellmouseover',
     'click',
     'collapsetree',
+    'columnhide',
+    'columnunhide',
     'contextmenu',
     'copy',
     'datachanged',
@@ -364,7 +382,7 @@ export default function (self, ctor) {
         );
         const columnName = schema[boundColumnIndex].name;
 
-        self.originalData[boundRowIndex][columnName] = '';
+        self.viewData[boundRowIndex][columnName] = '';
 
         affectedCells.push([
           rowIndex,
@@ -654,6 +672,16 @@ export default function (self, ctor) {
       originalRowIndex,
     ]);
 
+    // Remove hidden rows here. So we can keep the bound indexes correct
+    if (self.hiddenRowRanges.length > 0) {
+      const ranges = self.hiddenRowRanges.sort((a, b) => b[1] - a[1]);
+      for (let i = 0; i < ranges.length; i++) {
+        const [beginRowIndex, endRowIndex] = ranges[i];
+        const countOfRows = endRowIndex - beginRowIndex + 1;
+        newViewData.splice(beginRowIndex, countOfRows);
+      }
+    }
+
     // Apply filtering
     for (const [headerName, filterText] of Object.entries(self.columnFilters)) {
       const header = self.getHeaderByName(headerName);
@@ -880,7 +908,6 @@ export default function (self, ctor) {
     if (!self.isChildGrid) {
       document.body.removeChild(self.controlInput);
     }
-    self.eventParent.removeEventListener('mouseup', self.mouseup, false);
     self.eventParent.removeEventListener('mousedown', self.mousedown, false);
     self.eventParent.removeEventListener('dblclick', self.dblclick, false);
     self.eventParent.removeEventListener('click', self.click, false);
@@ -894,7 +921,8 @@ export default function (self, ctor) {
     self.controlInput.removeEventListener('keypress', self.keypress, false);
     self.controlInput.removeEventListener('keyup', self.keyup, false);
     self.controlInput.removeEventListener('keydown', self.keydown, false);
-    document.body.removeEventListener('mousemove', self.mousemove);
+    window.removeEventListener('mouseup', self.mouseup, false);
+    window.removeEventListener('mousemove', self.mousemove);
     window.removeEventListener('resize', self.resize);
     if (self.observer && self.observer.disconnect) {
       self.observer.disconnect();
@@ -1487,6 +1515,10 @@ export default function (self, ctor) {
     self.intf.cut = self.cut;
     self.intf.paste = self.paste;
     self.intf.setStyleProperty = self.setStyleProperty;
+    self.intf.hideColumns = self.hideColumns;
+    self.intf.unhideColumns = self.unhideColumns;
+    self.intf.hideRows = self.hideRows;
+    self.intf.unhideRows = self.unhideRows;
     Object.defineProperty(self.intf, 'defaults', {
       get: function () {
         return {
@@ -2026,6 +2058,14 @@ export default function (self, ctor) {
       self.cellGridAttributes = value;
     },
   });
+  Object.defineProperty(self.intf, 'fillCellCallback', {
+    get: function () {
+      return self.fillCellCallback;
+    },
+    set: function setFillCellCallback(value) {
+      self.fillCellCallback = value;
+    },
+  });
   Object.defineProperty(self.intf, 'ctx', {
     get: function () {
       return self.ctx;

package/lib/main.js

@@ -103,6 +103,7 @@ export default function canvasDatagrid(args) {
       'filters',
       'treeGridAttributes',
       'cellGridAttributes',
+      'fillCellCallback',
       'data',
       'schema',
     ];

package/lib/publicMethods.js

@@ -2,6 +2,8 @@
 /*globals define: true, MutationObserver: false, requestAnimationFrame: false, performance: false, btoa: false*/
 'use strict';
 
+import { mergeHiddenRowRanges } from './groups/util';
+
 export default function (self) {
   /**
    * Converts a integer into a letter A - ZZZZZ...
@@ -406,6 +408,7 @@ export default function (self) {
    * @param {number} y The row index of the cell to set active.
    */
   self.setActiveCell = function (x, y) {
+    if (typeof x === 'undefined') return;
     if (x < 0) {
       x = 0;
     }
@@ -426,6 +429,8 @@ export default function (self) {
    */
   self.selectNone = function (dontDraw) {
     self.selections = [];
+    self.selectedRows = [];
+    self.selectedColumns = [];
     self.dispatchEvent('selectionchanged', {
       selectedData: self.getSelectedData(),
       selections: self.selections,
@@ -457,55 +462,47 @@ export default function (self) {
     self.draw();
   };
   /**
-   * Returns true if indices of columns next to the selected columnIndex is selected on every row.
+   * Returns true if the selected columnIndex is selected on every row.
    * @memberof canvasDatagrid
-   * @name isMultiColumnsSelected
+   * @name isColumnSelected
    * @method
    * @param {number} columnIndex The column index to check.
    */
-  self.isMultiColumnsSelected = function (columnIndex) {
-    var multiColIsSelected = true;
+  self.isColumnSelected = function (columnIndex) {
+    var colIsSelected = true;
     self.viewData.forEach(function (row, rowIndex) {
-      var columnIndices = self.selections[rowIndex];
       if (
-        !columnIndices ||
-        columnIndices.length <= 1 ||
-        columnIndices.indexOf(columnIndex) === -1
+        !self.selections[rowIndex] ||
+        self.selections[rowIndex].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;
-            }
-          }
-        }
+        colIsSelected = false;
       }
     });
-    return multiColIsSelected;
+    return colIsSelected;
   };
   /**
-   * Returns true if the selected columnIndex is selected on every row.
+   * Returns true if the selected rowIndex is selected on every column.
    * @memberof canvasDatagrid
-   * @name isColumnSelected
+   * @name isRowSelected
    * @method
-   * @param {number} columnIndex The column index to check.
+   * @param {number} rowIndex The row index to check.
    */
-  self.isColumnSelected = function (columnIndex) {
-    var colIsSelected = true;
-    self.viewData.forEach(function (row, rowIndex) {
+
+  self.isRowSelected = function (rowIndex) {
+    if (!self.selections[rowIndex]) return false;
+    var rowIsSelected = true;
+    var schema = self.getVisibleSchema();
+    schema.forEach(function (col, index) {
       if (
         !self.selections[rowIndex] ||
-        self.selections[rowIndex].indexOf(columnIndex) === -1
+        self.selections[rowIndex].indexOf(index) === -1
       ) {
-        colIsSelected = false;
+        rowIsSelected = false;
       }
     });
-    return colIsSelected;
+    return rowIsSelected;
   };
+
   /**
    * Runs the defined method on each selected cell.
    * @memberof canvasDatagrid
@@ -547,6 +544,8 @@ export default function (self) {
    */
   self.selectColumn = function (columnIndex, ctrl, shift, supressEvent) {
     var s, e, x;
+    self.isMultiRowsSelected = false;
+    self.isMultiColumnsSelected = false;
     function addCol(i) {
       self.viewData.forEach(function (row, rowIndex) {
         self.selections[rowIndex] = self.selections[rowIndex] || [];
@@ -574,17 +573,23 @@ export default function (self) {
       e = Math.max(self.activeCell.columnIndex, columnIndex);
       for (x = s; e > x; x += 1) {
         addCol(x);
+        if (self.selectedColumns.indexOf(x) === -1)
+          self.selectedColumns.push(x);
       }
+      if (s != e) self.isMultiColumnsSelected = true;
     }
     if (!ctrl && !shift) {
       self.selections = [];
+      self.selectedColumns = [];
       self.activeCell.columnIndex = columnIndex;
       self.activeCell.rowIndex = self.scrollIndexTop;
     }
     if (ctrl && self.isColumnSelected(columnIndex)) {
       removeCol(columnIndex);
+      self.selectedColumns.splice(columnIndex, 1);
     } else {
       addCol(columnIndex);
+      self.selectedColumns.push(columnIndex);
     }
     if (supressEvent) {
       return;
@@ -628,6 +633,13 @@ export default function (self) {
       self.selections[ri].push(-1);
       s.forEach(function (col, index) {
         self.selections[ri].push(self.orders.columns.indexOf(col.index));
+        if (
+          col.index !== -1 &&
+          self.selectedColumns.indexOf(
+            self.orders.columns.indexOf(col.index),
+          ) === -1
+        )
+          self.selectedColumns.push(self.orders.columns.indexOf(col.index));
       });
     }
     if (self.dragAddToSelection === false || self.dragObject === undefined) {
@@ -651,9 +663,12 @@ export default function (self) {
         en = Math.max(self.activeCell.rowIndex, rowIndex);
         for (x = st; en >= x; x += 1) {
           addRow(x);
+          self.selectedRows.push(x);
         }
       } else {
         addRow(rowIndex);
+        self.selectedRows = [];
+        self.selectedRows.push(rowIndex);
       }
     }
     de();
@@ -762,6 +777,101 @@ export default function (self) {
       }
     }
   };
+  /**
+   * Hide column/columns
+   * @memberof canvasDatagrid
+   * @name hideColumns
+   * @method
+   * @param {number} beginColumnOrderIndex The begin column order index
+   * @param {number} [endColumnOrderIndex] The end column order index
+   */
+  self.hideColumns = function (beginColumnOrderIndex, endColumnOrderIndex) {
+    const schema = self.getSchema();
+    const orders = self.orders.columns;
+    const hiddenColumns = [];
+    if (typeof endColumnOrderIndex !== 'number')
+      endColumnOrderIndex = beginColumnOrderIndex;
+    for (
+      let orderIndex = beginColumnOrderIndex;
+      orderIndex <= endColumnOrderIndex;
+      orderIndex++
+    ) {
+      const columnIndex = orders[orderIndex];
+      if (columnIndex >= 0 && !schema[columnIndex].hidden) {
+        hiddenColumns.push(columnIndex);
+        schema[columnIndex].hidden = true;
+
+        self.dispatchEvent('columnhide', {
+          columnIndex,
+        });
+      }
+    }
+
+    if (hiddenColumns.length > 0) {
+      self.setStorageData();
+      setTimeout(function () {
+        self.resize(true);
+      }, 10);
+    }
+
+    self.dispatchEvent('hidecolumns', {
+      hiddenColumns,
+    });
+  };
+  /**
+   * Unihde column/columns
+   * @memberof canvasDatagrid
+   * @name unhideColumns
+   * @method
+   * @param {number} beginColumnOrderIndex The begin column order index
+   * @param {number} [endColumnOrderIndex] The end column order index
+   */
+  self.unhideColumns = function (beginColumnOrderIndex, endColumnOrderIndex) {
+    const orders = self.orders.columns;
+    const schema = self.getSchema();
+
+    for (let i = beginColumnOrderIndex; i <= endColumnOrderIndex; i++) {
+      const columnIndex = orders[i];
+      const s = schema[columnIndex];
+
+      if (s && s.hidden) {
+        s.hidden = false;
+
+        self.dispatchEvent('columnunhide', {
+          columnIndex,
+        });
+      }
+    }
+    self.refresh();
+  };
+  /**
+   * Hide rows
+   * @memberof canvasDatagrid
+   * @name hideRows
+   * @method
+   * @param {number} beginRowIndex The begin row index
+   * @param {number} endRowIndex The end row index
+   */
+  self.hideRows = function (beginRowIndex, endRowIndex) {
+    if (
+      mergeHiddenRowRanges(self.hiddenRowRanges, [beginRowIndex, endRowIndex])
+    )
+      self.refresh();
+  };
+  /**
+   * Unhide rows
+   * @memberof canvasDatagrid
+   * @name unhideRows
+   * @method
+   * @param {number} beginRowIndex The begin row index
+   * @param {number} endRowIndex The end row index
+   */
+  self.unhideRows = function (beginRowIndex, endRowIndex) {
+    self.hiddenRowRanges = self.hiddenRowRanges.filter(
+      (range) => range[0] !== beginRowIndex || range[1] !== endRowIndex,
+    );
+    self.refresh();
+  };
   /**
    * Resizes a column to fit the longest value in the column. Call without a value to resize all columns.
    * Warning, can be slow on very large record sets (1m records ~3-5 seconds on an i7).
@@ -890,6 +1000,7 @@ export default function (self) {
   /**
    * Add grouping
    * @param {'columns'|'rows'} groupFor
+   * @method
    * @param {number} from
    * @param {number} to
    */
@@ -945,6 +1056,7 @@ export default function (self) {
   /**
    * Remove grouping
    * @param {Array<Array<{from:number,to:number,collapsed:boolean}>>} allGroups
+   * @method
    * @param {number} from
    * @param {number} to
    */
@@ -1140,10 +1252,15 @@ export default function (self) {
    */
   self.moveSelection = function (offsetX, offsetY) {
     var sel = [];
+    self.selectedRows = [];
+    self.selectedColumns = [];
     self.selections.forEach(function (row, rowIndex) {
       sel[rowIndex + offsetY] = [];
+      self.selectedRows.push(rowIndex + offsetY);
       row.forEach(function (colIndex) {
         sel[rowIndex + offsetY].push(colIndex + offsetX);
+        if (self.selectedColumns.indexOf(colIndex + offsetX) === -1)
+          self.selectedColumns.push(colIndex + offsetX);
       });
     });
     self.selections = sel;
@@ -1336,6 +1453,28 @@ export default function (self) {
       return c.columnIndex === x && c.rowIndex === y;
     })[0];
   };
+  /**
+   * Get an unhide indicator at grid pixel coordinate x and y.
+   * @memberof canvasDatagrid
+   * @name getUnhideIndicator
+   * @method
+   * @param {number} x Number of pixels from the left.
+   * @param {number} y Number of pixels from the top.
+   */
+  self.getUnhideIndicator = function (x, y) {
+    const indicators = self.visibleUnhideIndicators;
+    if (indicators.length <= 0) return;
+    for (let i = 0; i < indicators.length; i++) {
+      const indicator = indicators[i];
+      if (
+        x >= indicator.x &&
+        y >= indicator.y &&
+        x <= indicator.x2 &&
+        y <= indicator.y2
+      )
+        return indicator;
+    }
+  };
   /**
    * Get a column group at grid pixel coordinate x and y.
    * @memberof canvasDatagrid
@@ -1417,6 +1556,14 @@ export default function (self) {
     }
     x -= self.getRowGroupAreaWidth();
     y -= self.getColumnGroupAreaHeight();
+
+    if (self.dragStartObject !== undefined) {
+      if (x <= 0) x = 1;
+      if (x >= self.width) x = self.width - 1;
+      if (y <= 0) y = 1;
+      if (y >= self.height) y = self.height - 1;
+    }
+
     var border,
       tsz = useTouchScrollZones ? self.attributes.touchScrollZone : 0,
       moveMode = self.attributes.borderDragBehavior === 'move',
@@ -1463,13 +1610,15 @@ export default function (self) {
         entitiy.y + entitiy.height + self.style.cellBorderWidth > y
       ) {
         if (/frozen-row-marker/.test(cell.style)) {
+          if (self.dragMode === 'frozen-column-marker') continue;
           cell.dragContext = cell.style;
-          cell.context = 'row-resize';
+          cell.context = 'grab';
           return cell;
         }
         if (/frozen-column-marker/.test(cell.style)) {
+          if (self.dragMode === 'frozen-row-marker') continue;
           cell.dragContext = cell.style;
-          cell.context = 'col-resize';
+          cell.context = 'grab';
           return cell;
         }
         if (/selection-handle-/.test(cell.style)) {
@@ -1566,11 +1715,12 @@ export default function (self) {
         }
         if (cell.style === 'columnHeaderCell') {
           if (
-            cell.x +
-              cell.width -
-              self.attributes.columnGrabZoneSize -
-              self.style.cellBorderWidth >
-              x ||
+            (!self.isColumnSelected(cell.columnIndex) &&
+              cell.x +
+                cell.width -
+                self.attributes.columnGrabZoneSize -
+                self.style.cellBorderWidth >
+                x) ||
             !self.attributes.allowRowReordering
           ) {
             cell.dragContext = 'cell';
@@ -1583,9 +1733,10 @@ export default function (self) {
         }
         if (cell.style === 'rowHeaderCell') {
           if (
-            self.attributes.rowGrabZoneSize +
-              (cell.y - self.style.cellBorderWidth) <
-              y ||
+            (!self.isRowSelected(cell.rowIndex) &&
+              self.attributes.rowGrabZoneSize +
+                (cell.y - self.style.cellBorderWidth) <
+                y) ||
             !self.attributes.allowRowReordering
           ) {
             cell.dragContext = 'cell';
@@ -1709,6 +1860,8 @@ export default function (self) {
       s = self.getSchema();
     if (!ctrl) {
       self.selections = [];
+      self.selectedRows = [];
+      self.selectedColumns = [];
     }
     if (
       self.selectionBounds.top < -1 ||
@@ -1724,6 +1877,7 @@ export default function (self) {
       x += 1
     ) {
       self.selections[x] = [];
+      self.selectedRows.push(x);
       for (
         y = self.selectionBounds.left;
         y <= self.selectionBounds.right;
@@ -1732,6 +1886,9 @@ export default function (self) {
         if (self.selections[x].indexOf(y) === -1) {
           self.selections[x].push(y);
         }
+        if (y !== -1 && self.selectedColumns.indexOf(y) === -1) {
+          self.selectedColumns.push(y);
+        }
       }
     }
     ev = {
@@ -1783,8 +1940,9 @@ export default function (self) {
       self.ctx.font = self.style.columnHeaderCellFont;
       var t =
         self.ctx.measureText(col.title || col.name).width +
-        self.style.headerCellPaddingRight +
-        self.style.headerCellPaddingLeft;
+        self.style.columnHeaderCellPaddingRight +
+        self.style.columnHeaderCellPaddingLeft +
+        self.style.cellAutoResizePadding;
       m = t > m ? t : m;
       formatter = self.formatters[col.type];
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.4.2",
+  "version": "0.4.5",
   "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",
@@ -80,7 +80,7 @@
     "husky": "^4.3.0",
     "istanbul": "^0.4.5",
     "jsdoc": "^3.6.6",
-    "karma": "^5.2.3",
+    "karma": "^6.3.14",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.2",