canvas-datagrid 0.3.24 → 0.4.2

package/lib/publicMethods.js

@@ -331,6 +331,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
@@ -342,18 +375,25 @@ export default function (self) {
    * @param {number} [offsetY=0] Percentage offset the cell should be from the top edge (not including headers).  The default is 0, meaning the cell will appear at the top edge. Valid values are 0 through 1. 1 = Bottom, 0 = Top, 0.5 = Center.
    */
   self.scrollIntoView = function (x, y, offsetX, offsetY) {
-    if (
-      self.visibleCells.filter(function (cell) {
-        return (
-          (cell.rowIndex === y || y === undefined) &&
-          (cell.columnIndex === x || x === undefined) &&
-          cell.x > 0 &&
-          cell.y > 0 &&
-          cell.x + cell.width < self.width &&
-          cell.y + cell.height < self.height
-        );
-      }).length === 0
-    ) {
+    const matched = self.visibleCells.filter(function (cell) {
+      return (
+        (cell.rowIndex === y || y === undefined) &&
+        (cell.columnIndex === x || x === undefined) &&
+        cell.x > 0 &&
+        cell.y > 0 &&
+        cell.x + cell.width < self.width &&
+        cell.y + cell.height < self.height
+      );
+    });
+    if (matched.length === 1 && x !== undefined && y !== undefined) {
+      // goto specific cell and its part be hidden by header
+      if (
+        matched[0].x < self.getRowHeaderCellWidth() ||
+        matched[0].y < self.getColumnHeaderCellHeight()
+      )
+        matched.length = 0;
+    }
+    if (matched.length === 0) {
       self.gotoCell(x, y, offsetX, offsetY);
     }
   };
@@ -846,6 +886,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;
@@ -924,6 +1202,9 @@ export default function (self) {
           return;
         }
         // TODO:
+        if (!self.data) {
+          self.data = {};
+        }
         if (!self.data[rowIndex]) {
           self.data[rowIndex] = {};
         }
@@ -964,6 +1245,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
@@ -1008,6 +1336,44 @@ export default function (self) {
       return c.columnIndex === x && c.rowIndex === y;
     })[0];
   };
+  /**
+   * 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
@@ -1049,6 +1415,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',
@@ -1197,8 +1565,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') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.3.24",
+  "version": "0.4.2",
   "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",