canvas-datagrid 0.3.25 → 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;
@@ -130,8 +167,9 @@ export default function (self) {
       l = (self.viewData || []).length,
       columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
       rowHeaderCellWidth = self.getRowHeaderCellWidth(),
-      ch = self.style.cellHeight,
-      s = self.getSchema();
+      topGroupAreaHeight = self.getColumnGroupAreaHeight(),
+      leftGroupAreaWidth = self.getRowGroupAreaWidth(),
+      ch = self.style.cellHeight;
     // sets actual DOM canvas element
     function checkScrollBoxVisibility() {
       self.scrollBox.horizontalBarVisible =
@@ -148,8 +186,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 +197,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
@@ -178,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;
@@ -190,19 +235,6 @@ export default function (self) {
     if (l > 1) {
       self.scrollCache.y[x] = dataHeight;
     }
-    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) {
-          self.scrollCache.x[columnIndex] = accumulator;
-          return accumulator;
-        }
-        var va =
-          accumulator + self.getColumnWidth(self.orders.columns[columnIndex]);
-        self.scrollCache.x[columnIndex] = va;
-        return va;
-      }, 0) || 0;
     if (self.attributes.showNewRow) {
       dataHeight += ch;
     }
@@ -224,8 +256,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 +307,7 @@ export default function (self) {
     self.scrollBox.heightBoxRatio =
       (self.scrollBox.height -
         columnHeaderCellHeight -
+        topGroupAreaHeight -
         self.scrollCache.y[self.frozenRow]) /
       dataHeight;
     self.scrollBox.scrollBoxHeight =
@@ -291,9 +325,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 +341,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];
@@ -420,6 +465,14 @@ export default function (self) {
     if (self.contextMenu || self.input) {
       return;
     }
+
+    // Cancel dragging action if user ventures outside grid
+    if (self.draggingItem && e.which === 0) {
+      self.stopFreezeMove(e);
+      self.mouseup(e);
+      return;
+    }
+
     self.mouse = overridePos || self.getLayerPos(e);
     var ctrl =
         (e.ctrlKey || e.metaKey || self.attributes.persistantSelectionMode) &&
@@ -458,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;
@@ -469,6 +536,7 @@ export default function (self) {
           rowIndex: cell.rowIndex,
           columnIndex: cell.columnIndex,
           onFilterButton: false,
+          onCellTreeIcon: false,
         };
         if (
           cell.isFilterable &&
@@ -488,6 +556,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 = {
@@ -512,7 +600,24 @@ export default function (self) {
           dragBounds.right = s.length - 1;
           dragBounds.top = Math.min(sBounds.top, cell.rowIndex);
           dragBounds.bottom = Math.max(sBounds.bottom, cell.rowIndex);
+          if (dragBounds.top < 0) dragBounds.top = 0;
         }
+
+        if (self.dragStartObject.rowIndex === -1) {
+          sBounds = self.getSelectionBounds();
+          dragBounds.left =
+            cell.columnIndex === undefined
+              ? sBounds.left
+              : Math.min(sBounds.left, cell.columnIndex);
+          dragBounds.right =
+            cell.columnIndex === undefined
+              ? sBounds.right
+              : Math.max(sBounds.right, cell.columnIndex);
+          dragBounds.top = -1;
+          dragBounds.bottom = self.viewData.length - 1;
+          if (dragBounds.left < 0) dragBounds.left = 0;
+        }
+
         if (
           self.dragStartObject.rowIndex !== cell.rowIndex ||
           self.dragStartObject.columnIndex !== cell.columnIndex
@@ -525,11 +630,31 @@ export default function (self) {
           self.attributes.selectionMode === 'row'
         ) {
           if (
+            cell.rowIndex !== undefined &&
             (self.attributes.selectionMode === 'row' ||
               self.dragStartObject.columnIndex === -1) &&
             self.rowBoundaryCrossed
           ) {
-            self.selectRow(cell.rowIndex, ctrl, null, true);
+            if (self.dragStartObject.rowIndex < cell.rowIndex) {
+              dragBounds.top = self.dragStartObject.rowIndex;
+              dragBounds.bottom = cell.rowIndex;
+            } else {
+              dragBounds.top = cell.rowIndex;
+              dragBounds.bottom = self.dragStartObject.rowIndex;
+            }
+          } else if (
+            cell.rowIndex !== undefined &&
+            (self.attributes.selectionMode === 'column' ||
+              self.dragStartObject.rowIndex === -1) &&
+            self.columnBoundaryCrossed
+          ) {
+            if (self.dragStartObject.columnIndex < cell.columnIndex) {
+              dragBounds.left = self.dragStartObject.columnIndex;
+              dragBounds.right = cell.columnIndex;
+            } else {
+              dragBounds.left = cell.columnIndex;
+              dragBounds.right = self.dragStartObject.columnIndex;
+            }
           } else if (self.attributes.selectionMode !== 'row') {
             if (cell.hovered && self.hovers.onFilterButton) {
               if (cell.openedFilter) {
@@ -549,12 +674,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 +760,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 +814,34 @@ 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) {
+      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 +879,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 +929,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 +1290,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 &&
@@ -1162,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;
@@ -1227,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,
@@ -1256,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);
@@ -1285,6 +1455,12 @@ export default function (self) {
         self.dragStartObject.rowIndex > -1
       ) {
         self.selectRow(self.dragStartObject.rowIndex, ctrl, null);
+      } else if (
+        (self.attributes.selectionMode === 'column' ||
+          self.dragStartObject.rowIndex === -1) &&
+        self.dragStartObject.columnIndex > -1
+      ) {
+        self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
       } else if (self.attributes.selectionMode !== 'row') {
         self.mousemove(e);
       }
@@ -1319,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 =
@@ -1647,9 +1823,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>',
     )

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 };