canvas-datagrid 0.3.25 → 0.4.3

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...
@@ -331,6 +333,39 @@ export default function (self) {
       imgSrc,
     );
   };
+
+  /**
+   * Expand/Collapse CellTree.
+   * @memberof canvasDatagrid
+   * @name toggleCellCollapseTree
+   * @method
+   * @param {array} treeData The array of cellTree to expand or collapse.
+   */
+
+  self.toggleCellCollapseTree = function (treeData) {
+    for (let type in treeData) {
+      for (let t of treeData[type])
+        if (t.length > 0) self.toggleCollapseTree(t[0], t[1], type);
+    }
+    self.draw();
+  };
+
+  /**
+   * Expand/Collapse CellTree.
+   * @memberof canvasDatagrid
+   * @name expandCollapseCellTree
+   * @method
+   * @param {array} treeData The array of cellTree to expand or collapse.
+   */
+
+  self.expandCollapseCellTree = function (treeData) {
+    for (let type in treeData) {
+      for (let t of treeData[type])
+        if (t.length > 0) self.cellTreeExpandCollapse(t[0], t[1], type);
+    }
+    self.draw();
+  };
+
   /**
    * Scrolls the cell at cell x, row y into view if it is not already.
    * @memberof canvasDatagrid
@@ -729,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).
@@ -853,6 +945,244 @@ export default function (self) {
     }
     self.setStorageData();
   };
+
+  /**
+   * Add grouping
+   * @param {'columns'|'rows'} groupFor
+   * @param {number} from
+   * @param {number} to
+   */
+  function addGroup(groupFor, from, to) {
+    let newRow = false;
+    const allGroups =
+      groupFor === 'rows' ? self.groupedRows : self.groupedColumns;
+    for (let i = allGroups.length - 1; i >= 0; i--) {
+      const groups = allGroups[i];
+      const min = groups[0].from,
+        max = groups[groups.length - 1].to;
+      if (from <= min && to >= max) {
+        if (from === min && to === max && groups.length === 1) return; // nothings happened
+        // new group wrap this row
+        continue;
+      }
+      for (let gi = 0; gi < groups.length; gi++) {
+        const g = groups[gi];
+        if (from > g.to) continue;
+        if (from >= g.from) {
+          if (to > g.to) {
+            if (from === g.from) {
+              allGroups.splice(i, 0, [{ from, to, collapsed: false }]);
+              self.refresh();
+              return;
+            }
+            throw new Error(`Can't group these ${groupFor}`);
+          }
+          if (to === g.to) {
+            if (from === g.from) return; // nothings happened
+          }
+          newRow = true;
+          break;
+        }
+        if (to >= g.from) {
+          if (to < g.to) throw new Error(`Can't group these ${groupFor}`);
+          allGroups.splice(i, 0, [{ from, to, collapsed: false }]);
+        } else {
+          groups.splice(gi, 0, { from, to, collapsed: false });
+        }
+        self.refresh();
+        return;
+      }
+      if (newRow) continue;
+      groups.push({ from, to, collapsed: false });
+      self.refresh();
+      return;
+    }
+    if (newRow) allGroups.push([{ from, to, collapsed: false }]);
+    else allGroups.unshift([{ from, to, collapsed: false }]);
+    self.refresh();
+  }
+  /**
+   * Remove grouping
+   * @param {Array<Array<{from:number,to:number,collapsed:boolean}>>} allGroups
+   * @param {number} from
+   * @param {number} to
+   */
+  function removeGroup(allGroups, from, to) {
+    for (let i = 0; i < allGroups.length; i++) {
+      const groups = allGroups[i];
+      for (let gi = 0; gi < groups.length; gi++) {
+        const group = groups[gi];
+        if (group.from === from && group.to === to) {
+          if (groups.length <= 1) allGroups.splice(i, 1);
+          else groups.splice(gi, 1);
+          self.refresh();
+          return;
+        }
+      }
+    }
+  }
+  /**
+   * Grouping columns
+   * @memberof canvasDatagrid
+   * @name groupColumns
+   * @method
+   * @param {number|string} firstColumnName Name of the first column to be grouped.
+   * @param {number|string} lastColumnName Name of the last column to be grouped.
+   */
+  self.groupColumns = function (firstColumnName, lastColumnName) {
+    /** @type {Array<{name: string,columnIndex:number}>} */
+    const schema = self.getSchema();
+    let firstOne, lastOne;
+    for (let i = 0; i < schema.length; i++) {
+      const it = schema[i];
+      if (firstOne && lastOne) break;
+      if (it.name === firstColumnName) {
+        firstOne = it;
+        continue;
+      }
+      if (it.name === lastColumnName) {
+        lastOne = it;
+        continue;
+      }
+    }
+    if (!firstOne) throw new Error(`No such column name for first column`);
+    if (!lastOne) throw new Error(`No such column name for last column`);
+    if (lastOne.columnIndex > firstOne.columnIndex !== true)
+      throw new Error(`Can't group these columns`);
+
+    const from = firstOne.columnIndex;
+    const to = lastOne.columnIndex;
+    const ev = { group: { type: 'columns', from, to } };
+    try {
+      addGroup('columns', from, to);
+    } catch (error) {
+      ev.error = error;
+    }
+    self.dispatchEvent('aftercreategroup', ev);
+  };
+  /**
+   * Grouping columns
+   * @memberof canvasDatagrid
+   * @name groupRows
+   * @method
+   * @param {number} rowIndexFrom The row index which is the beginning of the group
+   * @param {number} rowIndexTo The row index which is the end of the group
+   */
+  self.groupRows = function (rowIndexFrom, rowIndexTo) {
+    if (!Number.isInteger(rowIndexFrom) || rowIndexFrom < 0)
+      throw new Error(`No such row for the beginning of the group`);
+
+    const dataLength = self.viewData.length;
+    if (
+      !Number.isInteger(rowIndexFrom) ||
+      rowIndexTo <= rowIndexFrom ||
+      rowIndexTo >= dataLength
+    )
+      throw new Error(`No such row for the end of the group`);
+    const ev = {
+      group: {
+        type: 'rows',
+        from: rowIndexFrom,
+        to: rowIndexTo,
+      },
+    };
+    try {
+      addGroup('rows', rowIndexFrom, rowIndexTo);
+    } catch (error) {
+      ev.error = error;
+    }
+    self.dispatchEvent('aftercreategroup', ev);
+  };
+  /**
+   * Remove grouping columns
+   * @memberof canvasDatagrid
+   * @name removeGroupColumns
+   * @method
+   * @param {number|string} firstColumnName Name of the first column to be grouped.
+   * @param {number|string} lastColumnName Name of the last column to be grouped.
+   */
+  self.removeGroupColumns = function (firstColumnName, lastColumnName) {
+    /** @type {Array<{name:string,columnIndex:number}>} */
+    const schema = self.getSchema();
+    let firstOne, lastOne;
+    for (let i = 0; i < schema.length; i++) {
+      const it = schema[i];
+      if (firstOne && lastOne) break;
+      if (it.name === firstColumnName) {
+        firstOne = it;
+        continue;
+      }
+      if (it.name === lastColumnName) {
+        lastOne = it;
+        continue;
+      }
+    }
+    if (!firstOne) throw new Error(`No such column name for first column`);
+    if (!lastOne) throw new Error(`No such column name for last column`);
+    const from = firstOne.columnIndex;
+    const to = lastOne.columnIndex;
+    removeGroup(self.groupedColumns, from, to);
+  };
+  /**
+   * Remove grouping columns
+   * @memberof canvasDatagrid
+   * @name removeGroupRows
+   * @method
+   * @param {number} rowIndexFrom The row index which is the beginning of the group
+   * @param {number} rowIndexTo The row index which is the end of the group
+   */
+  self.removeGroupRows = function (rowIndexFrom, rowIndexTo) {
+    removeGroup(self.groupedRows, rowIndexFrom, rowIndexTo);
+  };
+  /**
+   * Toggle(expand/collapsed) grouping columns
+   * @memberof canvasDatagrid
+   * @name toggleGroupColumns
+   * @method
+   * @param {number|string} firstColumnName Name of the first column to be grouped.
+   * @param {number|string} lastColumnName Name of the last column to be grouped.
+   */
+  self.toggleGroupColumns = function (firstColumnName, lastColumnName) {
+    /** @type {Array<{name:string,columnIndex:number}>} */
+    const schema = self.getSchema();
+    let firstOne, lastOne;
+    for (let i = 0; i < schema.length; i++) {
+      const it = schema[i];
+      if (firstOne && lastOne) break;
+      if (it.name === firstColumnName) {
+        firstOne = it;
+        continue;
+      }
+      if (it.name === lastColumnName) {
+        lastOne = it;
+        continue;
+      }
+    }
+    if (!firstOne || !lastOne) return;
+    const from = firstOne.columnIndex;
+    const to = lastOne.columnIndex;
+    if (self.toggleGroup({ type: 'c', from, to })) {
+      self.disposeContextMenu();
+      self.setStorageData();
+      self.refresh();
+    }
+  };
+  /**
+   * Toggle(expand/collapsed) grouping rows
+   * @memberof canvasDatagrid
+   * @name toggleGroupRows
+   * @method
+   * @param {number} rowIndexFrom The row index which is the beginning of the group
+   * @param {number} rowIndexTo The row index which is the end of the group
+   */
+  self.toggleGroupRows = function (rowIndexFrom, rowIndexTo) {
+    if (self.toggleGroup({ type: 'r', from: rowIndexFrom, to: rowIndexTo })) {
+      self.disposeContextMenu();
+      self.setStorageData();
+      self.refresh();
+    }
+  };
+
   self.isInGrid = function (e) {
     if (e.x < 0 || e.x > self.width || e.y < 0 || e.y > self.height) {
       return false;
@@ -931,6 +1261,9 @@ export default function (self) {
           return;
         }
         // TODO:
+        if (!self.data) {
+          self.data = {};
+        }
         if (!self.data[rowIndex]) {
           self.data[rowIndex] = {};
         }
@@ -971,6 +1304,53 @@ export default function (self) {
       });
     });
   };
+  /**
+   * Get the column group info given column belongs to
+   * @memberof canvasDatagrid
+   * @name getGroupsColumnBelongsTo
+   * @method
+   * @param {number} columnIndex Column index.
+   * @returns {Array<{from:number,to:number,collapsed:boolean}>}
+   */
+  self.getGroupsColumnBelongsTo = function (columnIndex) {
+    if (!self.attributes.allowGroupingColumns) return [];
+    const result = [];
+    for (let i = 0; i < self.groupedColumns.length; i++) {
+      const groups = self.groupedColumns[i];
+      for (let j = 0; j < groups.length; j++) {
+        const group = groups[j];
+        if (columnIndex >= group.from && columnIndex <= group.to) {
+          result.push(group);
+          break;
+        }
+      }
+    }
+    return result;
+  };
+  /**
+   * Get the row group info given row belongs to
+   * @memberof canvasDatagrid
+   * @name getGroupsRowBelongsTo
+   * @method
+   * @param {number} rowIndex Row index.
+   * @returns {Array<{from:number,to:number,collapsed:boolean}>}
+   */
+  self.getGroupsRowBelongsTo = function (rowIndex) {
+    if (!self.attributes.allowGroupingRows) return [];
+    const result = [];
+    for (let i = 0; i < self.groupedRows.length; i++) {
+      const groups = self.groupedRows[i];
+      for (let j = 0; j < groups.length; j++) {
+        const group = groups[j];
+        if (rowIndex >= group.from && rowIndex <= group.to) {
+          result.push(group);
+          break;
+        }
+      }
+    }
+    return result;
+  };
+
   /**
    * Checks if a given column is visible.
    * @memberof canvasDatagrid
@@ -1015,6 +1395,66 @@ 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
+   * @name getColumnGroupAt
+   * @method
+   * @param {number} x Number of pixels from the left.
+   * @param {number} y Number of pixels from the top.
+   */
+  self.getColumnGroupAt = function (x, y) {
+    const groups = self.groupedColumns.length;
+    if (groups <= 0) return;
+    const yZero = self.getColumnGroupAreaHeight();
+    if (y >= yZero) return;
+    for (let i = 0; i < self.visibleGroups.length; i++) {
+      const g = self.visibleGroups[i];
+      if (g.type !== 'c') continue;
+      if (x >= g.x && y >= g.y && x <= g.x2 && y <= g.y2) return g;
+    }
+  };
+  /**
+   * Get a row group at grid pixel coordinate x and y.
+   * @memberof canvasDatagrid
+   * @name getRowGroupAt
+   * @method
+   * @param {number} x Number of pixels from the left.
+   * @param {number} y Number of pixels from the top.
+   */
+  self.getRowGroupAt = function (x, y) {
+    const groups = self.groupedRows.length;
+    if (groups <= 0) return;
+    const xZero = self.getRowGroupAreaWidth();
+    if (x >= xZero) return;
+    for (let i = 0; i < self.visibleGroups.length; i++) {
+      const g = self.visibleGroups[i];
+      if (g.type !== 'r') continue;
+      if (x >= g.x && y >= g.y && x <= g.x2 && y <= g.y2) return g;
+    }
+  };
   /**
    * Gets the cell at grid pixel coordinate x and y.  Author's note.  This function ties drawing and events together.  This is a very complex function and is core to the component.
    * @memberof canvasDatagrid
@@ -1056,6 +1496,8 @@ export default function (self) {
     if (!self.visibleCells) {
       return;
     }
+    x -= self.getRowGroupAreaWidth();
+    y -= self.getColumnGroupAreaHeight();
     var border,
       tsz = useTouchScrollZones ? self.attributes.touchScrollZone : 0,
       moveMode = self.attributes.borderDragBehavior === 'move',
@@ -1204,8 +1646,20 @@ export default function (self) {
           }
         }
         if (cell.style === 'columnHeaderCell') {
-          cell.context = 'cell';
-          cell.dragContext = 'column-reorder';
+          if (
+            cell.x +
+              cell.width -
+              self.attributes.columnGrabZoneSize -
+              self.style.cellBorderWidth >
+              x ||
+            !self.attributes.allowRowReordering
+          ) {
+            cell.dragContext = 'cell';
+            cell.context = 'cell';
+          } else {
+            cell.context = self.cursorGrab;
+            cell.dragContext = 'column-reorder';
+          }
           return cell;
         }
         if (cell.style === 'rowHeaderCell') {
@@ -1410,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.3.25",
+  "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",