canvas-datagrid 0.4.1 → 0.4.4

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
+   * @param {number} [endColumnOrderIndex]
+   */
+  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
+   * @param {number} [endColumnOrderIndex]
+   */
+  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
+   * @param {number} endRowIndex
+   */
+  self.hideRows = function (beginRowIndex, endRowIndex) {
+    if (
+      mergeHiddenRowRanges(self.hiddenRowRanges, [beginRowIndex, endRowIndex])
+    )
+      self.refresh();
+  };
+  /**
+   * Unhide rows
+   * @memberof canvasDatagrid
+   * @name unhideRows
+   * @method
+   * @param {number} beginRowIndex
+   * @param {number} endRowIndex
+   */
+  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.1",
+  "version": "0.4.4",
   "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",