canvas-datagrid 0.3.24 → 0.4.2

package/lib/intf.js

@@ -57,6 +57,20 @@ export default function (self, ctor) {
   self.scrollBox = {};
   self.visibleRows = [];
   self.visibleCells = [];
+  /**
+   * This array stored all groups information with context for drawing,
+   * it is generated by drawing functions,
+   * and be used for searching groups when users operate on the spreadsheet
+   * Each item of this array contains these properties:
+   * - `type`: its available values: 'c' and 'r'. indicates the type of this item, 'c' for column group
+   *           and 'r' for row group.
+   * - `x`,`y`: the left-top point of this group's rendering area.
+   * - `x2`, `y2`: the right-bottom of this group's rendering area.
+   * - `collapsed`: this value indicates the collapsed status of this group.
+   * - `from`, `to`: The column index range of this group (We use this value for searching the group)
+   * - `row`: The row index for column groups (We use this value for searching the group)
+   */
+  self.visibleGroups = [];
   self.sizes = {
     rows: {},
     columns: {},
@@ -71,6 +85,18 @@ export default function (self, ctor) {
     columnIndex: -1,
     rowIndex: -1,
   };
+  self.cellTree = {
+    rows: [],
+    columns: {},
+    tempSchema: {},
+    rowTreeColIndex: 0,
+    columnTreeRowStartIndex: 0,
+    columnTreeRowEndIndex: 0,
+    origin: {
+      rows: [],
+      columns: {},
+    },
+  };
   self.hovers = {};
   self.attributes = {};
   self.style = {};
@@ -86,6 +112,29 @@ export default function (self, ctor) {
   self.scrollPixelLeft = 0;
   self.childGrids = {};
   self.openChildren = {};
+
+  /**
+   * Array for grouped columns
+   * Each item in this array is an array and it represents some grouping in one row
+   * A grouping descriptor has three properties:
+   * - `from`: The column index of the first column
+   * - `to`: The column index of the last column
+   * - `collapsed`: Is this group be collapsed
+   * @example [[{ from: 1, to: 2, collapsed: false }]]
+   */
+  self.groupedColumns = [];
+
+  /**
+   * Array for grouped rows
+   * Each item in this array is an array and it represents some grouping in one column
+   * A grouping descriptor has three properties:
+   * - `from`: The row index of the first row
+   * - `to`: The row index of the last row
+   * - `collapsed`: Is this group be collapsed
+   * @example [[{ from: 1, to: 2, collapsed: false }]]
+   */
+  self.groupedRows = [];
+
   self.scrollModes = [
     'vertical-scroll-box',
     'vertical-scroll-top',
@@ -99,6 +148,7 @@ export default function (self, ctor) {
     'afterdraw',
     'afterrendercell',
     'afterrenderfilterbutton',
+    'aftercreategroup',
     'attributechanged',
     'beforebeginedit',
     'beforecreatecellgrid',
@@ -314,7 +364,7 @@ export default function (self, ctor) {
         );
         const columnName = schema[boundColumnIndex].name;
 
-        self.viewData[boundRowIndex][columnName] = '';
+        self.originalData[boundRowIndex][columnName] = '';
 
         affectedCells.push([
           rowIndex,
@@ -337,6 +387,124 @@ export default function (self, ctor) {
   self.getBoundColumnIndexFromViewColumnIndex = function (viewColumnIndex) {
     return self.orders.columns[viewColumnIndex];
   };
+  /**
+   * Get the height of the area about column groups for rendering and handling events.
+   */
+  self.getColumnGroupAreaHeight = function () {
+    if (!self.attributes.allowGroupingColumns) {
+      return 0;
+    }
+    const groups = self.groupedColumns.length;
+    const base = self.style.columnGroupRowHeight * self.scale;
+    return base * groups;
+  };
+  /**
+   * Get the width of the area about row groups for rendering and handling events.
+   */
+  self.getRowGroupAreaWidth = function () {
+    if (!self.attributes.allowGroupingRows) {
+      return 0;
+    }
+    const groups = self.groupedRows.length;
+    const base = self.style.rowGroupColumnWidth * self.scale;
+    return base * groups;
+  };
+  self.getCollapsedColumnGroups = function () {
+    const result = [];
+    for (let rowIndex = 0; rowIndex < self.groupedColumns.length; rowIndex++) {
+      const groups = self.groupedColumns[rowIndex];
+      for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
+        const group = groups[groupIndex];
+        if (group.collapsed) result.push(group);
+      }
+    }
+    return result;
+  };
+  self.getCollapsedRowGroups = function () {
+    const result = [];
+    for (let rowIndex = 0; rowIndex < self.groupedRows.length; rowIndex++) {
+      const groups = self.groupedRows[rowIndex];
+      for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
+        const group = groups[groupIndex];
+        if (group.collapsed) result.push(group);
+      }
+    }
+    return result;
+  };
+  /**
+   * Toggle the collapse status of a group (expanded/collapsed)
+   * @param {{type:string,from:number,to:number}} group
+   */
+  self.toggleGroup = function (group) {
+    if (group.type === 'c') {
+      const { from, to } = group;
+      /** @type {{from:number,to:number,collapsed:boolean}} */
+      let matchedGroup;
+      /** @type {Array<Array<{from:number,to:number,collapsed:boolean}>>} */
+      const allGroups = self.groupedColumns;
+      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) {
+            matchedGroup = group;
+            break;
+          }
+        }
+        if (matchedGroup) break;
+      }
+      if (!matchedGroup) return;
+      const nextCollapsed = !matchedGroup.collapsed;
+      matchedGroup.collapsed = nextCollapsed;
+      return true;
+    }
+    if (group.type === 'r') {
+      const { from, to } = group;
+      /** @type {{from:number,to:number,collapsed:boolean}} */
+      let matchedGroup;
+      /** @type {Array<Array<{from:number,to:number,collapsed:boolean}>>} */
+      const allGroups = self.groupedRows;
+      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) {
+            matchedGroup = group;
+            break;
+          }
+        }
+        if (matchedGroup) break;
+      }
+      if (!matchedGroup) return;
+      const nextCollapsed = !matchedGroup.collapsed;
+      matchedGroup.collapsed = nextCollapsed;
+      return true;
+    }
+    return false;
+  };
+  self.isNewGroupRangeValid = function (groupsArray, from, to) {
+    for (let i = 0; i < groupsArray.length; i++) {
+      const groups = groupsArray[i];
+      for (let gIndex = 0; gIndex < groups.length; gIndex++) {
+        const group = groups[gIndex];
+        if (from === group.to + 1) return false;
+        if (from > group.to) continue;
+
+        if (from === group.from) {
+          if (to === group.to) return false;
+          if (to > group.to) return true;
+          break; // check smaller range
+        }
+        if (from > group.from) {
+          if (to > group.to) return false;
+          break; // check smaller range
+        }
+        if (to < group.to) return false;
+        return true;
+      }
+    }
+    return true;
+  };
   self.getColumnHeaderCellHeight = function () {
     if (!self.attributes.showColumnHeaders) {
       return 0;
@@ -464,6 +632,16 @@ export default function (self, ctor) {
   self.hasActiveFilters = function () {
     return self.columnFilters && Object.keys(self.columnFilters).length > 0;
   };
+  self.hasCollapsedRowGroup = function () {
+    for (let i = 0; i < self.groupedRows.length; i++) {
+      const groups = self.groupedRows[i];
+      for (let j = 0; j < groups.length; j++) {
+        const g = groups[j];
+        if (g.collapsed) return true;
+      }
+    }
+    return false;
+  };
   self.getFilteredAndSortedViewData = function (originalData) {
     // We make a copy of originalData here in order be able to
     // filter and sort rows without modifying the original array.
@@ -499,6 +677,59 @@ export default function (self, ctor) {
       });
     }
 
+    //#region Hide rows from collapsed group
+    /** @type {number[][]} */
+    let collapsedGroups = [];
+    for (let i = 0; i < self.groupedRows.length; i++) {
+      const rows = self.groupedRows[i];
+      for (let j = 0; j < rows.length; j++) {
+        const r = rows[j];
+        if (!r.collapsed) continue;
+        collapsedGroups.push([r.from, r.to]);
+      }
+    }
+    if (collapsedGroups.length > 0) {
+      //#region merge groups
+      collapsedGroups.sort((a, b) => a[0] - b[0]);
+      let newLen = 0;
+      const len = collapsedGroups.length;
+      for (let i = 0; i < len; i++) {
+        const r = collapsedGroups[i];
+        if (i === len - 1) {
+          collapsedGroups[newLen++] = r;
+          break;
+        }
+        const to = r[1];
+        const [from2, to2] = collapsedGroups[i + 1];
+        if (from2 > to + 1) {
+          collapsedGroups[newLen++] = r;
+          continue;
+        }
+        collapsedGroups[i + 1] = r;
+        if (to2 > to) collapsedGroups[i + 1][1] = to2;
+      }
+      collapsedGroups = collapsedGroups.slice(0, newLen);
+      //#endregion merge groups
+
+      //#region omit rows by groups
+      let g = collapsedGroups.shift();
+      for (let start = 0; start < newViewData.length; start++) {
+        const it = newViewData[start][1];
+        if (it < g[0]) continue;
+        let end = start + 1;
+        for (; end < newViewData.length; end++) {
+          const it2 = newViewData[end][1];
+          if (it2 > g[1]) break;
+        }
+        newViewData.splice(start, end - start);
+        g = collapsedGroups.shift();
+        if (!g) break;
+        start--;
+      }
+      //#endregion omit rows by groups
+    }
+    //#endregion Hide rows from collapsed group
+
     // Apply sorting
     for (const column of self.orderings.columns) {
       const sortFn = column.sortFunction(column.orderBy, column.orderDirection);
@@ -703,6 +934,329 @@ export default function (self, ctor) {
       }
     }
   };
+  self.toggleCollapseTree = function (rowIndex, columnIndex, type) {
+    let tempData = [];
+    let collapsedCount = 0;
+    if (
+      columnIndex == self.cellTree.rowTreeColIndex &&
+      (rowIndex > 0 || (rowIndex == 0 && self.cellTree.rows[0].icon))
+    ) {
+      let ctr = self.cellTree.rows;
+      switch (type) {
+        case 'Expand':
+          ctr[rowIndex].expand = true;
+          self.cellTree.origin.rows[ctr[rowIndex].index].expand = true;
+          break;
+
+        case 'Collapse':
+          ctr[rowIndex].expand = false;
+          self.cellTree.origin.rows[ctr[rowIndex].index].expand = false;
+          break;
+
+        default:
+          ctr[rowIndex].expand = !ctr[rowIndex].expand;
+          self.cellTree.origin.rows[ctr[rowIndex].index].expand =
+            ctr[rowIndex].expand;
+      }
+      for (
+        let ri = ctr[rowIndex].index + 1;
+        ri <= ctr[rowIndex].lastchild;
+        ri++
+      ) {
+        let orTree = self.cellTree.origin.rows[ri];
+        if (ctr[rowIndex].expand) {
+          orTree.hide = false;
+          if (orTree.icon && !orTree.expand) ri = orTree.lastchild;
+        } else {
+          orTree.hide = true;
+        }
+      }
+    } else if (self.cellTree.columns[rowIndex]) {
+      let ctc = self.cellTree.columns[rowIndex];
+
+      switch (type) {
+        case 'Expand':
+          ctc[columnIndex].expand = true;
+          break;
+
+        case 'Collapse':
+          ctc[columnIndex].expand = false;
+          break;
+
+        default:
+          ctc[columnIndex].expand = !ctc[columnIndex].expand;
+      }
+      for (
+        let ci = ctc[columnIndex].index + 1;
+        ci <= ctc[columnIndex].lastchild;
+        ci++
+      ) {
+        if (ctc[columnIndex].expand)
+          self.cellTree.tempSchema[ci].hidden = false;
+        else self.cellTree.tempSchema[ci].hidden = true;
+      }
+      let rc = 0,
+        _ri;
+
+      if (ctc[columnIndex].expand) {
+        while (rc < ctc[columnIndex].child) {
+          _ri = rowIndex + rc + 1;
+
+          for (
+            let _ci = ctc[columnIndex].index;
+            _ci <= ctc[columnIndex].lastchild;
+            _ci++
+          ) {
+            if (
+              self.cellTree.origin.columns[_ri] &&
+              self.cellTree.origin.columns[_ri][_ci].icon &&
+              !self.cellTree.origin.columns[_ri][_ci].expand
+            ) {
+              for (
+                let si = _ci + 1;
+                si <= self.cellTree.origin.columns[_ri][_ci].lastchild;
+                si++
+              ) {
+                self.cellTree.tempSchema[si].hidden = true;
+              }
+            }
+          }
+
+          rc++;
+        }
+      }
+    }
+    let otherData = {};
+    let collapsed = [];
+    self.cellTree.rows = [];
+    self.cellTree.columns = {};
+    for (let k in self.cellTree.origin.rows) {
+      let tempRow = [];
+      let tree = self.cellTree.origin.rows[k];
+      if (!tree.hide) {
+        let colTrees = [];
+        let collapsedColCount = 0;
+        if (k < self.cellTree.columnTreeRowStartIndex) {
+          tempData.push(self.originalData[k]);
+        } else {
+          if (k > self.cellTree.columnTreeRowEndIndex) {
+            otherData[k] = self.viewData[k];
+            collapsedCount++;
+          } else {
+            for (let l = 0; l < self.originalData[k].length; l++) {
+              if (!self.cellTree.tempSchema[l].hidden) {
+                if (l < self.cellTree.rowTreeColIndex) {
+                  if (!Object.prototype.hasOwnProperty.call(otherData, k))
+                    otherData[k] = [];
+                  otherData[k].push(self.viewData[k][l]);
+                }
+                tempRow.push(self.originalData[k][l]);
+                if (
+                  Object.prototype.hasOwnProperty.call(
+                    self.cellTree.origin.columns,
+                    k,
+                  )
+                )
+                  colTrees.push(self.cellTree.origin.columns[k][l]);
+              } else collapsedColCount++;
+            }
+            tempRow.push(
+              ...Array(collapsedColCount)
+                .fill()
+                .map(function () {
+                  return '';
+                }),
+            );
+            if (colTrees.length) {
+              colTrees.push(
+                ...Array(collapsedColCount)
+                  .fill()
+                  .map(() => {
+                    return {};
+                  }),
+              );
+              self.cellTree.columns[k] = colTrees;
+            }
+            tempData.push(tempRow);
+          }
+        }
+        self.cellTree.rows.push(tree);
+      } else {
+        for (let l = 0; l < self.cellTree.rowTreeColIndex; l++) {
+          tempRow.push(self.viewData[k][l]);
+        }
+        otherData[k] = tempRow;
+        collapsed.push(
+          Array(self.viewData[0].length)
+            .fill()
+            .map(function () {
+              return '';
+            }),
+        );
+        collapsedCount++;
+      }
+    }
+    if (collapsedCount) {
+      self.cellTree.rows.push(
+        ...Array(collapsedCount)
+          .fill()
+          .map((u, index) => {
+            return { index: self.cellTree.rows.length + index };
+          }),
+      );
+      tempData.push(...collapsed);
+    }
+    for (let k in otherData) {
+      if (k > self.cellTree.columnTreeRowEndIndex) tempData[k] = otherData[k];
+      else
+        for (let l in otherData[k]) {
+          tempData[k][l] = otherData[k][l];
+        }
+    }
+    self.viewData = tempData;
+  };
+  self.cellTreeExpandCollapse = function (rowIndex, columnIndex, type) {
+    if (
+      columnIndex == self.cellTree.rowTreeColIndex &&
+      (rowIndex > 0 || (rowIndex == 0 && self.cellTree.rows[0].icon))
+    ) {
+      const ctr = self.cellTree.rows;
+      switch (type) {
+        case 'Expand':
+          ctr[rowIndex].expand = true;
+          break;
+        case 'Collapse':
+          ctr[rowIndex].expand = false;
+          break;
+        default:
+          ctr[rowIndex].expand = !ctr[rowIndex].expand;
+      }
+      for (let ri = rowIndex + 1; ri <= ctr[rowIndex].lastchild; ri++) {
+        if (ctr[rowIndex].expand) {
+          ctr[ri].hide = false;
+          if (ctr[ri].icon && !ctr[ri].expand) ri = ctr[ri].lastchild;
+        } else {
+          ctr[ri].hide = true;
+        }
+      }
+    } else if (self.cellTree.columns[rowIndex]) {
+      const ctc = self.cellTree.columns[rowIndex];
+      switch (type) {
+        case 'Expand':
+          ctc[columnIndex].expand = true;
+          break;
+        case 'Collapse':
+          ctc[columnIndex].expand = false;
+          break;
+        default:
+          ctc[columnIndex].expand = !ctc[columnIndex].expand;
+      }
+
+      for (let ci = columnIndex + 1; ci <= ctc[columnIndex].lastchild; ci++) {
+        if (ctc[columnIndex].expand) self.tempSchema[ci].hidden = false;
+        else self.tempSchema[ci].hidden = true;
+      }
+
+      let rc = 0,
+        ri;
+      if (ctc[columnIndex].expand) {
+        while (rc < ctc[columnIndex].child) {
+          ri = rowIndex + rc + 1;
+          for (let ci = columnIndex; ci <= ctc[columnIndex].lastchild; ci++) {
+            if (
+              self.cellTree.columns[ri] &&
+              self.cellTree.columns[ri][ci].icon &&
+              !self.cellTree.columns[ri][ci].expand
+            ) {
+              for (
+                let si = ci + 1;
+                si <= self.cellTree.columns[ri][ci].lastchild;
+                si++
+              )
+                self.tempSchema[si].hidden = true;
+            }
+          }
+          rc++;
+        }
+      }
+    }
+  };
+
+  self.initCellTreeSettings = function () {
+    if (self.viewData === undefined) return;
+    if (self.attributes.rowTree.length > 0 && self.viewData.length > 0) {
+      self.cellTree.rows = Array(self.viewData.length)
+        .fill()
+        .map((u, index) => ({ index: index }));
+      self.cellTree.rowTreeColIndex = self.attributes.rowTreeColIndex;
+      let invalidRowTree = false;
+      for (let rt of self.attributes.rowTree) {
+        if (self.cellTree.rows.length <= rt.end) {
+          invalidRowTree = true;
+          break;
+        }
+
+        for (let ri = rt.begin; ri <= rt.end; ri++) {
+          if (ri == rt.begin) {
+            self.cellTree.rows[ri].icon = true;
+            self.cellTree.rows[ri].lastchild = rt.end;
+            self.cellTree.rows[ri].expand = true;
+            if (!self.cellTree.rows[ri].parentCount)
+              self.cellTree.rows[ri].parentCount = 0;
+          } else {
+            self.cellTree.rows[ri].hide = false;
+            self.cellTree.rows[ri].parentIndex = rt.begin;
+            if (self.cellTree.rows[ri] && self.cellTree.rows[ri].parentCount)
+              self.cellTree.rows[ri].parentCount += 1;
+            else self.cellTree.rows[ri].parentCount = 1;
+          }
+        }
+      }
+      if (invalidRowTree) self.cellTree.rows = {};
+    }
+    if (self.attributes.columnTree.length > 0 && self.viewData.length > 0) {
+      self.cellTree.columnTreeRowStartIndex =
+        self.attributes.columnTreeRowStartIndex;
+      self.cellTree.columnTreeRowEndIndex =
+        self.attributes.columnTreeRowEndIndex;
+      let dataColumnLength = Object.keys(self.viewData[0]).length;
+      let invalidColumnTree = false;
+      for (let ct of self.attributes.columnTree) {
+        if (dataColumnLength <= ct.end) {
+          invalidColumnTree = true;
+          break;
+        }
+
+        if (!self.cellTree.columns[ct.row])
+          self.cellTree.columns[ct.row] = Array(dataColumnLength)
+            .fill()
+            .map((u, index) => ({ index: index }));
+
+        for (let i = ct.begin; i <= ct.end; i++) {
+          const ctc = self.cellTree.columns[ct.row][i];
+          if (i == ct.begin) {
+            ctc.icon = true;
+            ctc.lastchild = ct.end;
+            ctc.length = ct.end - ct.begin;
+            ctc.expand = true;
+            if (ct.child) ctc.child = ct.child;
+            else ctc.child = 0;
+          }
+        }
+      }
+      self.cellTree.tempSchema = Array(dataColumnLength)
+        .fill()
+        .map(function () {
+          return { hidden: false };
+        });
+      if (invalidColumnTree) self.cellTree.columns = {};
+    }
+    self.cellTree.origin = {
+      rows: self.cellTree.rows,
+      columns: self.cellTree.columns,
+    };
+  };
+
   self.getDomRoot = function () {
     return self.shadowRoot ? self.shadowRoot.host : self.parentNode;
   };
@@ -874,6 +1428,8 @@ export default function (self, ctor) {
     self.intf.gotoCell = self.gotoCell;
     self.intf.gotoRow = self.gotoRow;
     self.intf.addButton = self.addButton;
+    self.intf.toggleCellCollapseTree = self.toggleCellCollapseTree;
+    self.intf.expandCollapseCellTree = self.expandCollapseCellTree;
     self.intf.getHeaderByName = self.getHeaderByName;
     self.intf.findColumnScrollLeft = self.findColumnScrollLeft;
     self.intf.findRowScrollTop = self.findRowScrollTop;
@@ -881,6 +1437,14 @@ export default function (self, ctor) {
     self.intf.findColumnMaxTextLength = self.findColumnMaxTextLength;
     self.intf.disposeContextMenu = self.disposeContextMenu;
     self.intf.getCellAt = self.getCellAt;
+    self.intf.groupColumns = self.groupColumns;
+    self.intf.groupRows = self.groupRows;
+    self.intf.removeGroupColumns = self.removeGroupColumns;
+    self.intf.removeGroupRows = self.removeGroupRows;
+    self.intf.toggleGroupColumns = self.toggleGroupColumns;
+    self.intf.toggleGroupRows = self.toggleGroupRows;
+    self.intf.getGroupsColumnBelongsTo = self.getGroupsColumnBelongsTo;
+    self.intf.getGroupsRowBelongsTo = self.getGroupsRowBelongsTo;
     self.intf.isCellVisible = self.isCellVisible;
     self.intf.isRowVisible = self.isRowVisible;
     self.intf.isColumnVisible = self.isColumnVisible;
@@ -1010,6 +1574,13 @@ export default function (self, ctor) {
           if (key === 'name') {
             self.tryLoadStoredSettings();
           }
+          if (
+            key === 'rowTree' ||
+            key === 'columnTree' ||
+            key === 'columnTreeRowEndIndex'
+          ) {
+            self.initCellTreeSettings();
+          }
           self.draw(true);
           self.dispatchEvent('attributechanged', {
             name: key,
@@ -1623,6 +2194,7 @@ export default function (self, ctor) {
         self.createRowOrders();
         self.tryLoadStoredSettings();
         self.dispatchEvent('datachanged', { data: self.originalData });
+        self.initCellTreeSettings();
         self.resize(true);
       });
     },