canvas-datagrid 0.3.25 → 0.4.0

package/lib/events/index.js

@@ -130,6 +130,8 @@ export default function (self) {
       l = (self.viewData || []).length,
       columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
       rowHeaderCellWidth = self.getRowHeaderCellWidth(),
+      topGroupAreaHeight = self.getColumnGroupAreaHeight(),
+      leftGroupAreaWidth = self.getRowGroupAreaWidth(),
       ch = self.style.cellHeight,
       s = self.getSchema();
     // sets actual DOM canvas element
@@ -148,8 +150,10 @@ export default function (self) {
       self.scrollBox.verticalBoxVisible = dataHeight > self.scrollBox.height;
     }
     function setScrollBoxSize() {
-      self.scrollBox.width = self.width - rowHeaderCellWidth;
-      self.scrollBox.height = self.height - columnHeaderCellHeight;
+      self.scrollBox.width =
+        self.width - rowHeaderCellWidth - leftGroupAreaWidth;
+      self.scrollBox.height =
+        self.height - columnHeaderCellHeight - topGroupAreaHeight;
     }
     function setCanvasSize() {
       if (self.isChildGrid) {
@@ -157,8 +161,13 @@ export default function (self) {
       }
       dims = {
         // HACK +1 ? maybe it's a magic cell border?  Required to line up properly in auto height mode.
-        height: columnHeaderCellHeight + dataHeight + cellBorder + 1,
-        width: dataWidth + rowHeaderCellWidth + cellBorder,
+        height:
+          columnHeaderCellHeight +
+          topGroupAreaHeight +
+          dataHeight +
+          cellBorder +
+          1,
+        width: dataWidth + rowHeaderCellWidth + cellBorder + leftGroupAreaWidth,
       };
       ['width', 'height'].forEach(function (dim) {
         //TODO: support inherit
@@ -190,18 +199,31 @@ 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
-        column = s[self.orders.columns[columnIndex]];
-        if (column.hidden) {
+        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;
-          return accumulator;
+          frozenWidth = accumulator;
+        } else {
+          self.scrollCache.x[columnIndex] = Math.max(
+            frozenWidth + columnWidth,
+            accumulator,
+          );
         }
-        var va =
-          accumulator + self.getColumnWidth(self.orders.columns[columnIndex]);
-        self.scrollCache.x[columnIndex] = va;
-        return va;
+        return accumulator;
       }, 0) || 0;
     if (self.attributes.showNewRow) {
       dataHeight += ch;
@@ -224,8 +246,9 @@ export default function (self) {
     }
     /// calculate scroll bar dimensions
     // non-controversial
-    self.scrollBox.top = columnHeaderCellHeight + columnHeaderCellBorder;
-    self.scrollBox.left = rowHeaderCellWidth;
+    self.scrollBox.top =
+      columnHeaderCellHeight + topGroupAreaHeight + columnHeaderCellBorder;
+    self.scrollBox.left = rowHeaderCellWidth + leftGroupAreaWidth;
     // width and height of scroll box
     setScrollBoxSize();
     // is the data larger than the scroll box
@@ -274,6 +297,7 @@ export default function (self) {
     self.scrollBox.heightBoxRatio =
       (self.scrollBox.height -
         columnHeaderCellHeight -
+        topGroupAreaHeight -
         self.scrollCache.y[self.frozenRow]) /
       dataHeight;
     self.scrollBox.scrollBoxHeight =
@@ -291,9 +315,14 @@ export default function (self) {
     );
     // horizontal
     n.x += rowHeaderCellWidth;
-    n.y += self.height - self.style.scrollBarWidth - d;
+    n.y += self.height - self.style.scrollBarWidth - d - topGroupAreaHeight;
     n.width =
-      self.width - self.style.scrollBarWidth - rowHeaderCellWidth - d - m;
+      self.width -
+      self.style.scrollBarWidth -
+      rowHeaderCellWidth -
+      leftGroupAreaWidth -
+      d -
+      m;
     n.height = self.style.scrollBarWidth + self.style.scrollBarBorderWidth + d;
     // horizontal box
     nb.y = n.y + self.style.scrollBarBoxMargin;
@@ -302,13 +331,19 @@ export default function (self) {
     // vertical
     v.x +=
       self.width -
+      leftGroupAreaWidth -
       self.style.scrollBarWidth -
       self.style.scrollBarBorderWidth -
       d;
     v.y += columnHeaderCellHeight + self.scrollCache.y[self.frozenRow];
     v.width = self.style.scrollBarWidth + self.style.scrollBarBorderWidth + d;
     v.height =
-      self.height - columnHeaderCellHeight - self.style.scrollBarWidth - d - m;
+      self.height -
+      columnHeaderCellHeight -
+      topGroupAreaHeight -
+      self.style.scrollBarWidth -
+      d -
+      m;
     // vertical box
     vb.x = v.x + self.style.scrollBarBoxMargin;
     vb.y += self.scrollCache.y[self.frozenRow];
@@ -469,6 +504,7 @@ export default function (self) {
           rowIndex: cell.rowIndex,
           columnIndex: cell.columnIndex,
           onFilterButton: false,
+          onCellTreeIcon: false,
         };
         if (
           cell.isFilterable &&
@@ -488,6 +524,26 @@ export default function (self) {
           self.hovers.onFilterButton = true;
           self.draw();
         }
+        if (cell.isRowTree || cell.isColumnTree) {
+          const pc = cell.isRowTree
+            ? self.cellTree.rows[cell.rowIndex].parentCount
+            : 0;
+          const rc = self.style.cellTreeIconWidth * self.scale,
+            rx =
+              cell.x +
+              cell.paddingLeft +
+              self.canvasOffsetLeft +
+              self.style.cellTreeIconMarginLeft +
+              pc * (rc + cell.paddingLeft),
+            ry =
+              cell.y +
+              self.canvasOffsetTop +
+              self.style.cellTreeIconMarginTop * self.scale;
+          if (x >= rx && x <= rx + rc && y >= ry && y < ry + rc) {
+            self.hovers.onCellTreeIcon = true;
+            self.draw();
+          }
+        }
       }
       if (self.selecting || self.reorderObject) {
         delta = {
@@ -549,12 +605,20 @@ export default function (self) {
               }
               self.draw();
               return;
+            } else if (
+              cell.hovered &&
+              self.hovers.onCellTreeIcon &&
+              e.type == 'mousedown'
+            ) {
+              self.toggleCollapseTree(cell.rowIndex, cell.columnIndex);
+              return;
             } else {
               self.selectedFilterButton = {
                 columnIndex: -1,
                 rowIndex: -1,
               };
               if (self.hovers.onFilterButton) return;
+              if (self.hovers.onCellTreeIcon) return;
               if (!self.dragAddToSelection && cell.rowIndex !== undefined) {
                 if (
                   self.selections[cell.rowIndex] &&
@@ -627,6 +691,12 @@ export default function (self) {
         }
       }
     }
+    const columnGroup = self.getColumnGroupAt(self.mouse.x, self.mouse.y);
+    if (columnGroup) self.cursor = 'pointer';
+
+    const rowGroup = self.getRowGroupAt(self.mouse.x, self.mouse.y);
+    if (rowGroup) self.cursor = 'pointer';
+
     self.cellBoundaryCrossed = false;
     self.rowBoundaryCrossed = false;
     self.columnBoundaryCrossed = false;
@@ -675,9 +745,25 @@ export default function (self) {
     ) {
       return;
     }
+
+    let group = self.getColumnGroupAt(pos.x, pos.y);
+    if (!group) group = self.getRowGroupAt(pos.x, pos.y);
+    if (group) {
+      if (self.toggleGroup(group)) {
+        self.setStorageData();
+        self.refresh();
+        return;
+      }
+    }
+
     if (!self.hasFocus) {
       return;
     }
+
+    const leftOffset = self.getRowGroupAreaWidth();
+    const topOffset = self.getColumnGroupAreaHeight();
+    const xInGrid = pos.x - leftOffset;
+    const yInGrid = pos.y - topOffset;
     if (
       ['rowHeaderCell', 'columnHeaderCell'].indexOf(self.currentCell.style) ===
         -1 &&
@@ -715,17 +801,17 @@ export default function (self) {
         if (
           self.currentCell.style === 'rowHeaderCell' &&
           self.attributes.tree &&
-          pos.x > 0 &&
-          pos.x - self.currentCell.x <
+          xInGrid > 0 &&
+          xInGrid - self.currentCell.x <
             self.style.treeArrowWidth +
               self.style.treeArrowMarginLeft +
               self.style.treeArrowMarginRight +
               self.style.treeArrowClickRadius &&
-          pos.y - self.currentCell.y <
+          yInGrid - self.currentCell.y <
             self.style.treeArrowHeight +
               self.style.treeArrowMarginTop +
               self.style.treeArrowClickRadius &&
-          pos.y > 0
+          yInGrid > 0
         ) {
           self.toggleTree(i.rowIndex);
           return;
@@ -765,7 +851,6 @@ export default function (self) {
       self.dragMode === 'ew-resize'
     ) {
       self.resize(true);
-      self.scrollBox.scrollLeft += x;
     }
     if (self.dragMode === 'ew-resize') {
       self.sizes.columns[
@@ -1127,6 +1212,8 @@ export default function (self) {
 
     self.ignoreNextClick = true;
     self.freezeMarkerPosition = pos;
+    pos.x -= self.getRowGroupAreaWidth();
+    pos.y -= self.getColumnGroupAreaHeight();
     if (
       self.currentCell &&
       self.currentCell.rowIndex !== undefined &&
@@ -1647,9 +1734,21 @@ export default function (self) {
       self.autosize();
     } else if (
       ['cell', 'activeCell'].includes(self.currentCell.style) &&
-      !self.hovers.onFilterButton
+      !self.hovers.onFilterButton &&
+      !self.hovers.onCellTreeIcon
     ) {
-      self.beginEditAt(self.currentCell.columnIndex, self.currentCell.rowIndex);
+      if (self.currentCell.isRowTree || self.currentCell.isColumnTree) {
+        self.cellTreeExpandCollapse(
+          self.currentCell.rowIndex,
+          self.currentCell.columnIndex,
+        );
+        self.draw();
+      } else {
+        self.beginEditAt(
+          self.currentCell.columnIndex,
+          self.currentCell.rowIndex,
+        );
+      }
     }
   };
   self.scrollWheel = function (e) {

package/lib/events/util.js

@@ -112,7 +112,7 @@ const createHTMLString = function (selectedData, isNeat) {
       (row) =>
         '<tr>' +
         Object.values(row)
-          .map((value) => '<td>' + htmlSafe(value) + '</td>')
+          .map((value) => ['<td>', htmlSafe(value), '</td>'].join(''))
           .join('') +
         '</tr>',
     )