canvas-datagrid 0.4.2 → 0.4.3

package/lib/events/index.js

@@ -74,6 +74,43 @@ export default function (self) {
           1),
     );
   };
+  /**
+   * @returns {number} dataWidth
+   */
+  self.refreshScrollCacheX = function () {
+    const s = self.getSchema();
+    self.scrollCache.x = [];
+
+    /** @type {number} it will be used in `reduceSchema` only  */
+    let frozenWidth = 0;
+
+    const collapsedColumnGroups = self.getCollapsedColumnGroups();
+    const isColumnCollapsed = (columnIndex) =>
+      collapsedColumnGroups.findIndex(
+        (group) => columnIndex >= group.from && columnIndex <= group.to,
+      ) >= 0;
+
+    const dataWidth =
+      s.reduce(function reduceSchema(accumulator, column, columnIndex) {
+        // intentional redefintion of column.  This causes scrollCache to be in the correct order
+        const schemaIndex = self.orders.columns[columnIndex];
+        const columnWidth = self.getColumnWidth(schemaIndex);
+        column = s[schemaIndex];
+        if (!column.hidden && !isColumnCollapsed(columnIndex))
+          accumulator += columnWidth;
+        if (columnIndex < self.frozenColumn) {
+          self.scrollCache.x[columnIndex] = accumulator;
+          frozenWidth = accumulator;
+        } else {
+          self.scrollCache.x[columnIndex] = Math.max(
+            frozenWidth + columnWidth,
+            accumulator,
+          );
+        }
+        return accumulator;
+      }, 0) || 0;
+    return dataWidth;
+  };
   self.resize = function (drawAfterResize) {
     if (!self.canvas) {
       return;
@@ -132,8 +169,7 @@ export default function (self) {
       rowHeaderCellWidth = self.getRowHeaderCellWidth(),
       topGroupAreaHeight = self.getColumnGroupAreaHeight(),
       leftGroupAreaWidth = self.getRowGroupAreaWidth(),
-      ch = self.style.cellHeight,
-      s = self.getSchema();
+      ch = self.style.cellHeight;
     // sets actual DOM canvas element
     function checkScrollBoxVisibility() {
       self.scrollBox.horizontalBarVisible =
@@ -187,7 +223,7 @@ export default function (self) {
         }
       });
     }
-    self.scrollCache.x = [];
+    dataWidth = self.refreshScrollCacheX();
     self.scrollCache.y = [];
     for (x = 0; x < l; x += 1) {
       self.scrollCache.y[x] = dataHeight;
@@ -199,32 +235,6 @@ export default function (self) {
     if (l > 1) {
       self.scrollCache.y[x] = dataHeight;
     }
-    const collapsedColumnGroups = self.getCollapsedColumnGroups();
-    const isColumnCollapsed = (columnIndex) =>
-      collapsedColumnGroups.findIndex(
-        (group) => columnIndex >= group.from && columnIndex <= group.to,
-      ) >= 0;
-    /** @type {number} it will be used in `reduceSchema` only  */
-    let frozenWidth = 0;
-    dataWidth =
-      s.reduce(function reduceSchema(accumulator, column, columnIndex) {
-        // intentional redefintion of column.  This causes scrollCache to be in the correct order
-        const schemaIndex = self.orders.columns[columnIndex];
-        const columnWidth = self.getColumnWidth(schemaIndex);
-        column = s[schemaIndex];
-        if (!column.hidden && !isColumnCollapsed(columnIndex))
-          accumulator += columnWidth;
-        if (columnIndex < self.frozenColumn) {
-          self.scrollCache.x[columnIndex] = accumulator;
-          frozenWidth = accumulator;
-        } else {
-          self.scrollCache.x[columnIndex] = Math.max(
-            frozenWidth + columnWidth,
-            accumulator,
-          );
-        }
-        return accumulator;
-      }, 0) || 0;
     if (self.attributes.showNewRow) {
       dataHeight += ch;
     }
@@ -501,6 +511,20 @@ export default function (self) {
     }
     self.currentCell = cell;
 
+    if (
+      !self.draggingItem && // It is not in dragging mode (avoid changing hovers frequent)
+      cell &&
+      (cell.context === 'cell' || cell.context === self.cursorGrab)
+    ) {
+      const indicator = self.getUnhideIndicator(self.mouse.x, self.mouse.y);
+      if (indicator) {
+        self.cursor = 'pointer';
+        self.hovers = { unhideIndicator: indicator };
+        self.draw();
+        return;
+      }
+    }
+
     self.hovers = {};
     if (!self.draggingItem && cell) {
       self.dragItem = cell;
@@ -791,6 +815,15 @@ export default function (self) {
       return;
     }
 
+    const unhideIndicator = self.getUnhideIndicator(pos.x, pos.y);
+    if (unhideIndicator) {
+      const { dir, orderIndex0, orderIndex1 } = unhideIndicator;
+      if (dir === 'l' || dir === 'r')
+        self.unhideColumns(orderIndex0, orderIndex1);
+      else self.unhideRows(orderIndex0, orderIndex1);
+      return;
+    }
+
     let group = self.getColumnGroupAt(pos.x, pos.y);
     if (!group) group = self.getRowGroupAt(pos.x, pos.y);
     if (group) {
@@ -1294,13 +1327,14 @@ export default function (self) {
       self.currentCell.columnIndex !== undefined &&
       self.dragMode === 'frozen-column-marker'
     ) {
+      const dataWidth = self.refreshScrollCacheX();
       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];
+      // var dataWidth = self.scrollCache.x[self.scrollCache.x.length - 1];
       self.scrollBox.widthBoxRatio =
         (self.scrollBox.width - self.scrollCache.x[self.frozenColumn - 1]) /
         dataWidth;
@@ -1359,6 +1393,7 @@ export default function (self) {
       move = /-move/.test(self.dragMode),
       freeze = /frozen-row-marker|frozen-column-marker/.test(self.dragMode),
       resize = /-resize/.test(self.dragMode);
+    const onUnhideIndicator = self.hovers && self.hovers.unhideIndicator;
     self.dragStart = overridePos || self.getLayerPos(e);
     self.scrollStart = {
       left: self.scrollBox.scrollLeft,
@@ -1388,7 +1423,10 @@ export default function (self) {
     if (self.dragStartObject.isGrid) {
       return;
     }
-    if (self.scrollModes.indexOf(self.dragStartObject.context) !== -1) {
+    if (
+      self.scrollModes.indexOf(self.dragStartObject.context) !== -1 &&
+      !onUnhideIndicator
+    ) {
       self.scrollMode = self.dragStartObject.context;
       self.scrollStartMode = self.dragStartObject.context;
       self.scrollGrid(e);
@@ -1457,7 +1495,7 @@ export default function (self) {
       document.body.addEventListener('mouseup', self.stopFreezeMove, false);
       return self.mousemove(e);
     }
-    if (resize) {
+    if (resize && !onUnhideIndicator) {
       self.draggingItem = self.dragItem;
       if (self.draggingItem.rowOpen) {
         self.resizingStartingHeight =

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,
@@ -654,6 +667,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);
@@ -1257,6 +1280,17 @@ export default function (self, ctor) {
     };
   };
 
+  self.unhideColumns = function (orderIndex0, orderIndex1) {
+    const orders = self.orders.columns;
+    const schema = self.getSchema();
+    for (let i = orderIndex0; i <= orderIndex1; i++) {
+      const columnIndex = orders[i];
+      const s = schema[columnIndex];
+      if (s && s.hidden) s.hidden = false;
+    }
+    self.refresh();
+  };
+
   self.getDomRoot = function () {
     return self.shadowRoot ? self.shadowRoot.host : self.parentNode;
   };
@@ -1487,6 +1521,9 @@ 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.hideRows = self.hideRows;
+    self.intf.unhideRows = self.unhideRows;
     Object.defineProperty(self.intf, 'defaults', {
       get: function () {
         return {

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...
@@ -762,6 +764,63 @@ export default function (self) {
       }
     }
   };
+  /**
+   * Hide column/columns
+   * @memberof canvasDatagrid
+   * @name hideColumns
+   * @param {number} beginColumnOrderIndex
+   * @param {number} [endColumnOrderIndex]
+   */
+  self.hideColumns = function (beginColumnOrderIndex, endColumnOrderIndex) {
+    const schema = self.getSchema();
+    const orders = self.orders.columns;
+    let count = 0;
+    if (typeof endColumnOrderIndex !== 'number')
+      endColumnOrderIndex = beginColumnOrderIndex;
+    for (
+      let orderIndex = beginColumnOrderIndex;
+      orderIndex <= endColumnOrderIndex;
+      orderIndex++
+    ) {
+      const columnIndex = orders[orderIndex];
+      if (columnIndex >= 0 && !schema[columnIndex].hidden) {
+        count++;
+        schema[columnIndex].hidden = true;
+      }
+    }
+    if (count > 0) {
+      self.setStorageData();
+      setTimeout(function () {
+        self.resize(true);
+      }, 10);
+    }
+  };
+  /**
+   * Hide rows
+   * @memberof canvasDatagrid
+   * @name hideRows
+   * @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
+   * @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).
@@ -1336,6 +1395,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
@@ -1783,8 +1864,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.3",
   "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",