canvas-datagrid 0.4.1 → 0.4.4

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;
@@ -132,8 +169,7 @@ export default function (self) {
       rowHeaderCellWidth = self.getRowHeaderCellWidth(),
       topGroupAreaHeight = self.getColumnGroupAreaHeight(),
       leftGroupAreaWidth = self.getRowGroupAreaWidth(),
-      ch = self.style.cellHeight,
-      s = self.getSchema();
+      ch = self.style.cellHeight;
     // sets actual DOM canvas element
     function checkScrollBoxVisibility() {
       self.scrollBox.horizontalBarVisible =
@@ -187,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;
@@ -199,32 +235,6 @@ 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
-        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;
     if (self.attributes.showNewRow) {
       dataHeight += ch;
     }
@@ -376,9 +386,17 @@ export default function (self) {
     );
     // set canvas drawing related items
     if (!self.isChildGrid) {
-      self.canvas.width = self.width * ratio;
-      self.canvas.height = self.height * ratio;
-      self.ctx.scale(ratio, ratio);
+      const newWidth = self.width * ratio;
+      const newHeight = self.height * ratio;
+      // We need to check is settings size to canvas necessary,
+      // because settings the canvas'size will cause the canvas and its state be cleared
+      // even if the size is the same.
+      // Notes: Please don't call `self.resize()` without a subsequent call to `self.draw()`
+      if (self.canvas.width !== newWidth || self.canvas.height !== newHeight) {
+        self.canvas.width = newWidth;
+        self.canvas.height = newHeight;
+        self.ctx.scale(ratio, ratio);
+      }
     }
     // resize any open dom elements (input/textarea)
     self.resizeEditInput();
@@ -455,6 +473,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) &&
@@ -493,6 +519,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;
@@ -584,6 +624,9 @@ export default function (self) {
           dragBounds.top = -1;
           dragBounds.bottom = self.viewData.length - 1;
           if (dragBounds.left < 0) dragBounds.left = 0;
+          if (dragBounds.left != dragBounds.right)
+            self.isMultiColumnsSelected = true;
+          else self.isMultiRowsSelected = false;
         }
 
         if (
@@ -697,6 +740,8 @@ export default function (self) {
         ) {
           if (!(cell.hovered && self.hovers.onFilterButton)) {
             self.selections = [];
+            self.selectedRows = [];
+            self.selectedColumns = [];
           }
           if (dragBounds.top === -1) {
             dragBounds.top = 0;
@@ -708,8 +753,13 @@ export default function (self) {
             }
           } else {
             self.selectArea(sBounds, true);
-            if (sBounds.left == -1 && sBounds.top !== sBounds.bottom)
+            self.activeCell.rowIndex = sBounds.top;
+            self.activeCell.columnIndex = sBounds.left;
+            if (sBounds.left == -1 && sBounds.top !== sBounds.bottom) {
+              self.activeCell.columnIndex = 0;
               self.isMultiRowsSelected = true;
+              self.isMultiColumnsSelected = false;
+            }
           }
         }
 
@@ -783,6 +833,15 @@ 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) {
@@ -940,12 +999,8 @@ export default function (self) {
     }
 
     self.resize();
-    document.body.removeEventListener(
-      'mousemove',
-      self.dragResizeColumn,
-      false,
-    );
-    document.body.removeEventListener('mouseup', self.stopDragResize, false);
+    window.removeEventListener('mousemove', self.dragResizeColumn, false);
+    window.removeEventListener('mouseup', self.stopDragResize, false);
     self.setStorageData();
     self.draw(true);
     self.ignoreNextClick = true;
@@ -1052,7 +1107,7 @@ export default function (self) {
     if (document.exitPointerLock) {
       document.exitPointerLock();
     }
-    document.removeEventListener('mousemove', self.scrollGrid, false);
+    window.removeEventListener('mousemove', self.scrollGrid, false);
   };
   self.dragReorder = function (e) {
     var pos,
@@ -1070,10 +1125,7 @@ export default function (self) {
       return;
     }
     if ((e.ctrlKey || e.metaKey || e.shiftKey) && self.reorderObject) {
-      if (
-        self.dragMode === 'column-reorder' &&
-        !self.isMultiColumnsSelected(self.draggingItem.header.index)
-      ) {
+      if (self.dragMode === 'column-reorder' && !self.isMultiColumnsSelected) {
         self.selectColumn(self.draggingItem.header.index, false, false);
       }
     }
@@ -1097,6 +1149,11 @@ export default function (self) {
           -1,
           self.activeCell.rowIndex,
         );
+      if (self.isMultiColumnsSelected)
+        self.reorderObject = self.getVisibleCellByIndex(
+          self.activeCell.columnIndex,
+          -1,
+        );
       if (!self.reorderObject) return;
       self.reorderTarget = self.currentCell;
       self.reorderObject.dragOffset = {
@@ -1123,8 +1180,8 @@ export default function (self) {
         'row-reorder': 'rowIndex',
         'column-reorder': 'sortColumnIndex',
       }[self.dragMode];
-    document.body.removeEventListener('mousemove', self.dragReorder, false);
-    document.body.removeEventListener('mouseup', self.stopDragReorder, false);
+    window.removeEventListener('mousemove', self.dragReorder, false);
+    window.removeEventListener('mouseup', self.stopDragReorder, false);
     if (
       self.reorderObject &&
       self.reorderTarget &&
@@ -1147,23 +1204,34 @@ export default function (self) {
       tIndex = cr[self.dragMode].indexOf(self.reorderTarget[i]);
       if (self.dragMode === 'column-reorder') {
         var sortColumnIndices = [];
-        var seletedColumnIndices = [];
+        var selectedColumnIndices = [];
         if (self.selections[0]) {
+          oIndex = self.selections[0][0];
           self.selections[0].forEach(function (value) {
             sortColumnIndices.push(self.orders.columns[value]);
           });
         }
         var deleteCount = sortColumnIndices.length;
-        cr[self.dragMode].splice(oIndex, deleteCount);
-        if (tIndex > oIndex) tIndex = tIndex - (deleteCount - 1);
-        for (var i = 0; i < sortColumnIndices.length; i++) {
-          seletedColumnIndices.push(tIndex + i);
-          cr[self.dragMode].splice(tIndex + i, 0, sortColumnIndices[i]);
+        if (
+          tIndex < oIndex ||
+          (tIndex > oIndex && Math.abs(tIndex - oIndex) >= deleteCount)
+        ) {
+          cr[self.dragMode].splice(oIndex, deleteCount);
+          if (tIndex > oIndex) tIndex = tIndex - (deleteCount - 1);
+
+          self.selectedColumns = [];
+          for (var i = 0; i < sortColumnIndices.length; i++) {
+            if (i === 0) self.activeCell.columnIndex = tIndex;
+            selectedColumnIndices.push(tIndex + i);
+            self.selectedColumns.push(sortColumnIndices[i]);
+            cr[self.dragMode].splice(tIndex + i, 0, sortColumnIndices[i]);
+          }
+
+          self.orders.columns = cr[self.dragMode];
+          self.viewData.forEach(function (row, rowIndex) {
+            self.selections[rowIndex] = selectedColumnIndices;
+          });
         }
-        self.orders.columns = cr[self.dragMode];
-        self.viewData.forEach(function (row, rowIndex) {
-          self.selections[rowIndex] = seletedColumnIndices;
-        });
       } else {
         var selectedRows = [];
         self.selections.forEach(function (row, rowIndex) {
@@ -1172,13 +1240,21 @@ export default function (self) {
             odata.push(self.viewData[rowIndex]);
           }
         });
-        self.viewData.splice(oIndex, odata.length);
-        self.selections = [];
-        if (tIndex > oIndex) tIndex = tIndex - (odata.length - 1);
-        self.activeCell.rowIndex = tIndex;
-        for (var i = 0; i < odata.length; i++) {
-          self.viewData.splice(tIndex + i, 0, odata[i]);
-          self.selections[tIndex + i] = selectedRows[i];
+        if (
+          tIndex < oIndex ||
+          (tIndex > oIndex && Math.abs(tIndex - oIndex) >= odata.length)
+        ) {
+          self.viewData.splice(oIndex, odata.length);
+          self.selections = [];
+          self.selectedRows = [];
+          if (tIndex > oIndex) tIndex = tIndex - (odata.length - 1);
+          self.activeCell.rowIndex = tIndex;
+
+          for (var i = 0; i < odata.length; i++) {
+            self.viewData.splice(tIndex + i, 0, odata[i]);
+            self.selections[tIndex + i] = selectedRows[i];
+            self.selectedRows.push(tIndex + i);
+          }
         }
       }
       self.resize();
@@ -1209,8 +1285,8 @@ export default function (self) {
     }
   };
   self.stopDragMove = function (e) {
-    document.body.removeEventListener('mousemove', self.dragMove, false);
-    document.body.removeEventListener('mouseup', self.stopDragMove, false);
+    window.removeEventListener('mousemove', self.dragMove, false);
+    window.removeEventListener('mouseup', self.stopDragMove, false);
     var b = self.getSelectionBounds();
     if (
       self.dispatchEvent('endmove', { NativeEvent: e, cell: self.currentCell })
@@ -1241,16 +1317,30 @@ export default function (self) {
     ) {
       return;
     }
-    var pos = self.getLayerPos(e),
+    var pos = self.getLayerPos(e);
+
+    self.ignoreNextClick = true;
+    self.freezeMarkerPosition = pos;
+    pos.x -= self.getRowGroupAreaWidth();
+    pos.y -= self.getColumnGroupAreaHeight();
+    if (
+      Math.abs(pos.x) > self.attributes.reorderDeadZone ||
+      Math.abs(pos.y) > self.attributes.reorderDeadZone
+    ) {
+      setTimeout(function () {
+        self.autoScrollZone(e, pos.x, pos.y, false);
+      }, 1);
+    }
+  };
+  self.stopFreezeMove = function (e) {
+    let pos = self.getLayerPos(e),
       bm = self.style.gridBorderCollapse === 'collapse' ? 1 : 2,
       columnHeaderCellBorder = self.style.columnHeaderCellBorderWidth * bm,
       columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
       rowHeaderCellWidth = self.getRowHeaderCellWidth();
-
-    self.ignoreNextClick = true;
-    self.freezeMarkerPosition = pos;
     pos.x -= self.getRowGroupAreaWidth();
     pos.y -= self.getColumnGroupAreaHeight();
+
     if (
       self.currentCell &&
       self.currentCell.rowIndex !== undefined &&
@@ -1286,15 +1376,20 @@ 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;
+      let x =
+        self.currentCell.x -
+        self.style.frozenMarkerWidth -
+        self.style.frozenMarkerBorderWidth;
+      if (pos.x > x + self.currentCell.width / 2)
+        self.frozenColumn = self.currentCell.columnIndex + 1;
+      else if (self.currentCell.columnIndex >= 0)
+        self.frozenColumn = self.currentCell.columnIndex;
       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];
+        rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn];
       self.scrollBox.widthBoxRatio =
-        (self.scrollBox.width - self.scrollCache.x[self.frozenColumn - 1]) /
+        (self.scrollBox.width - self.scrollCache.x[self.frozenColumn]) /
         dataWidth;
       self.scrollBox.scrollBoxWidth =
         self.scrollBox.width * self.scrollBox.widthBoxRatio -
@@ -1313,10 +1408,9 @@ export default function (self) {
         self.autoScrollZone(e, pos.x, pos.y, false);
       }, 1);
     }
-  };
-  self.stopFreezeMove = function (e) {
-    document.body.removeEventListener('mousemove', self.freezeMove, false);
-    document.body.removeEventListener('mouseup', self.stopFreezeMove, false);
+
+    window.removeEventListener('mousemove', self.freezeMove, false);
+    window.removeEventListener('mouseup', self.stopFreezeMove, false);
     self.freezeMarkerPosition = undefined;
     if (
       self.dispatchEvent('endfreezemove', {
@@ -1330,6 +1424,7 @@ export default function (self) {
       return;
     }
     self.draw(true);
+    self.resize();
   };
   self.mousedown = function (e, overridePos) {
     self.lastMouseDownTarget = e.target;
@@ -1351,6 +1446,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,
@@ -1375,12 +1471,17 @@ export default function (self) {
         !(self.currentCell.hovered && self.hovers.onFilterButton)
       ) {
         self.selections = [];
+        self.selectedRows = [];
+        self.selectedColumns = [];
       }
     }
     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);
@@ -1396,8 +1497,8 @@ export default function (self) {
         };
         self.canvas.requestPointerLock();
       }
-      document.addEventListener('mousemove', self.scrollGrid, false);
-      document.addEventListener('mouseup', self.stopScrollGrid, false);
+      window.addEventListener('mousemove', self.scrollGrid, false);
+      window.addEventListener('mouseup', self.stopScrollGrid, false);
       self.ignoreNextClick = true;
       return;
     }
@@ -1415,7 +1516,9 @@ export default function (self) {
         self.dragStartObject.columnIndex > -1
       ) {
         self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
-      } else if (self.attributes.selectionMode !== 'row') {
+        return;
+      }
+      if (self.attributes.selectionMode !== 'row') {
         self.mousemove(e);
       }
       return;
@@ -1432,8 +1535,8 @@ export default function (self) {
       ) {
         return;
       }
-      document.body.addEventListener('mousemove', self.dragMove, false);
-      document.body.addEventListener('mouseup', self.stopDragMove, false);
+      window.addEventListener('mousemove', self.dragMove, false);
+      window.addEventListener('mouseup', self.stopDragMove, false);
       return self.mousemove(e);
     }
     if (freeze) {
@@ -1445,11 +1548,15 @@ export default function (self) {
       if (self.dispatchEvent('beginfreezemove', { NativeEvent: e })) {
         return;
       }
-      document.body.addEventListener('mousemove', self.freezeMove, false);
-      document.body.addEventListener('mouseup', self.stopFreezeMove, false);
+
+      self.freezeMarkerPosition = self.getLayerPos(e);
+      self.freezeMarkerPosition.isGrab = true;
+
+      window.addEventListener('mousemove', self.freezeMove, false);
+      window.addEventListener('mouseup', self.stopFreezeMove, false);
       return self.mousemove(e);
     }
-    if (resize) {
+    if (resize && !onUnhideIndicator) {
       self.draggingItem = self.dragItem;
       if (self.draggingItem.rowOpen) {
         self.resizingStartingHeight =
@@ -1464,22 +1571,19 @@ export default function (self) {
             ? 'cornerCell'
             : self.draggingItem.sortColumnIndex
         ] || self.draggingItem.width;
-      document.body.addEventListener('mousemove', self.dragResizeColumn, false);
-      document.body.addEventListener('mouseup', self.stopDragResize, false);
+      window.addEventListener('mousemove', self.dragResizeColumn, false);
+      window.addEventListener('mouseup', self.stopDragResize, false);
       return;
     }
     if (['row-reorder', 'column-reorder'].indexOf(self.dragMode) !== -1) {
       self.draggingItem = self.dragStartObject;
-      if (
-        self.dragMode === 'column-reorder' &&
-        !self.isMultiColumnsSelected(self.currentCell.header.index)
-      ) {
+      if (self.dragMode === 'column-reorder' && !self.isMultiColumnsSelected) {
         self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
       } else if (self.dragMode === 'row-reorder' && !self.isMultiRowsSelected) {
         self.selectRow(self.dragStartObject.rowIndex, ctrl, null);
       }
-      document.body.addEventListener('mousemove', self.dragReorder, false);
-      document.body.addEventListener('mouseup', self.stopDragReorder, false);
+      window.addEventListener('mousemove', self.dragReorder, false);
+      window.addEventListener('mouseup', self.stopDragReorder, false);
       return;
     }
   };
@@ -1707,6 +1811,8 @@ export default function (self) {
       if (!e.shiftKey && self.attributes.selectionFollowsActiveCell) {
         if (!ctrl) {
           self.selections = [];
+          self.selectedRows = [];
+          self.selectedColumns = [];
         }
         self.selections[y] = self.selections[y] || [];
         self.selections[y].push(x);
@@ -1865,6 +1971,8 @@ export default function (self) {
       });
     } else {
       var selections = [];
+      self.selectedRows = [];
+      self.selectedColumns = [];
       for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
         // Rows may have been moved by user, so get the actual row index
         // (instead of the row index at which the row is rendered):
@@ -1875,6 +1983,7 @@ export default function (self) {
         var newRowData = Object.assign({}, existingRowData);
 
         selections[realRowIndex] = [];
+        self.selectedRows.push(realRowIndex);
 
         for (var colIndex = 0; colIndex < cells.length; colIndex++) {
           var column = schema[startColIndex + colIndex];
@@ -1897,6 +2006,8 @@ export default function (self) {
           selections[realRowIndex].push(startColIndex + colIndex);
 
           newRowData[columnName] = cellData;
+          if (self.selectedColumns.indexOf(startColIndex + colIndex) === -1)
+            self.selectedColumns.push(startColIndex + colIndex);
         }
 
         self.originalData[self.boundRowIndexMap.get(realRowIndex)] = newRowData;

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

package/lib/intf.js

@@ -57,6 +57,19 @@ export default function (self, ctor) {
   self.scrollBox = {};
   self.visibleRows = [];
   self.visibleCells = [];
+  /**
+   * Each item of this  array contains these properties:
+   * - `x`, `y`, `x2`, `y2`
+   * - `orderIndex0`, `orderIndex1`: The closed interval of the hiding rows/columns.
+   * - `dir`: The directon of the unhide indicator. 'l' and 'r' for columns, 't' and 'b' for rows
+   */
+  self.visibleUnhideIndicators = [];
+  /**
+   * Each item is a tuple conatins two numbers:
+   * its type difination: Array<[beginRowIndex, endRowIndex]>
+   * Each tuple represents a closed Interval
+   */
+  self.hiddenRowRanges = [];
   /**
    * This array stored all groups information with context for drawing,
    * it is generated by drawing functions,
@@ -77,6 +90,8 @@ export default function (self, ctor) {
     trees: {},
   };
   self.selections = [];
+  self.selectedRows = [];
+  self.selectedColumns = [];
   self.filterable = {
     rows: [],
     columns: [],
@@ -162,6 +177,8 @@ export default function (self, ctor) {
     'cellmouseover',
     'click',
     'collapsetree',
+    'columnhide',
+    'columnunhide',
     'contextmenu',
     'copy',
     'datachanged',
@@ -654,6 +671,16 @@ export default function (self, ctor) {
       originalRowIndex,
     ]);
 
+    // Remove hidden rows here. So we can keep the bound indexes correct
+    if (self.hiddenRowRanges.length > 0) {
+      const ranges = self.hiddenRowRanges.sort((a, b) => b[1] - a[1]);
+      for (let i = 0; i < ranges.length; i++) {
+        const [beginRowIndex, endRowIndex] = ranges[i];
+        const countOfRows = endRowIndex - beginRowIndex + 1;
+        newViewData.splice(beginRowIndex, countOfRows);
+      }
+    }
+
     // Apply filtering
     for (const [headerName, filterText] of Object.entries(self.columnFilters)) {
       const header = self.getHeaderByName(headerName);
@@ -880,7 +907,6 @@ export default function (self, ctor) {
     if (!self.isChildGrid) {
       document.body.removeChild(self.controlInput);
     }
-    self.eventParent.removeEventListener('mouseup', self.mouseup, false);
     self.eventParent.removeEventListener('mousedown', self.mousedown, false);
     self.eventParent.removeEventListener('dblclick', self.dblclick, false);
     self.eventParent.removeEventListener('click', self.click, false);
@@ -894,7 +920,8 @@ export default function (self, ctor) {
     self.controlInput.removeEventListener('keypress', self.keypress, false);
     self.controlInput.removeEventListener('keyup', self.keyup, false);
     self.controlInput.removeEventListener('keydown', self.keydown, false);
-    document.body.removeEventListener('mousemove', self.mousemove);
+    window.removeEventListener('mouseup', self.mouseup, false);
+    window.removeEventListener('mousemove', self.mousemove);
     window.removeEventListener('resize', self.resize);
     if (self.observer && self.observer.disconnect) {
       self.observer.disconnect();
@@ -1487,6 +1514,10 @@ export default function (self, ctor) {
     self.intf.cut = self.cut;
     self.intf.paste = self.paste;
     self.intf.setStyleProperty = self.setStyleProperty;
+    self.intf.hideColumns = self.hideColumns;
+    self.intf.unhideColumns = self.unhideColumns;
+    self.intf.hideRows = self.hideRows;
+    self.intf.unhideRows = self.unhideRows;
     Object.defineProperty(self.intf, 'defaults', {
       get: function () {
         return {