canvas-datagrid 0.4.1 → 0.4.4

package/dist/types.d.ts

@@ -463,16 +463,16 @@ declare class canvasDatagrid {
      * @param dontDraw - Suppress the draw method after the selection change.
      */
     static selectAll(dontDraw: boolean): void;
-    /**
-     * Returns true if indices of columns next to the selected columnIndex is selected on every row.
-     * @param columnIndex - The column index to check.
-     */
-    static isMultiColumnsSelected(columnIndex: number): void;
     /**
      * Returns true if the selected columnIndex is selected on every row.
      * @param columnIndex - The column index to check.
      */
     static isColumnSelected(columnIndex: number): void;
+    /**
+     * Returns true if the selected rowIndex is selected on every column.
+     * @param rowIndex - The row index to check.
+     */
+    static isRowSelected(rowIndex: number): void;
     /**
      * Runs the defined method on each selected cell.
      * @param fn - The function to execute.  The signature of the function is: (data, rowIndex, columnName).
@@ -516,6 +516,22 @@ declare class canvasDatagrid {
      * @returns header with the selected name, or undefined.
      */
     static getHeaderByName(name: string): header;
+    /**
+     * Hide column/columns
+     */
+    static hideColumns(beginColumnOrderIndex: number, endColumnOrderIndex?: number): void;
+    /**
+     * Unihde column/columns
+     */
+    static unhideColumns(beginColumnOrderIndex: number, endColumnOrderIndex?: number): void;
+    /**
+     * Hide rows
+     */
+    static hideRows(beginRowIndex: number, endRowIndex: number): void;
+    /**
+     * Unhide rows
+     */
+    static unhideRows(beginRowIndex: number, endRowIndex: number): void;
     /**
      * Resizes a column to fit the longest value in the column. Call without a value to resize all columns.
      * Warning, can be slow on very large record sets (1m records ~3-5 seconds on an i7).
@@ -620,6 +636,12 @@ declare class canvasDatagrid {
      * @returns cell at the selected location.
      */
     static getVisibleCellByIndex(x: number, y: number): cell;
+    /**
+     * Get an unhide indicator at grid pixel coordinate x and y.
+     * @param x - Number of pixels from the left.
+     * @param y - Number of pixels from the top.
+     */
+    static getUnhideIndicator(x: number, y: number): void;
     /**
      * Get a column group at grid pixel coordinate x and y.
      * @param x - Number of pixels from the left.
@@ -2186,3 +2208,10 @@ declare namespace canvasDatagrid {
     }
 }
 
+/**
+ * Merge a new hidden row range into existed ranges array
+ * @param hiddenRowRanges - tuples: Array<[bgeinRowIndex, endRowIndex]>
+ * @param newRange - tuple: [beginRowIndex, endRowIndex]
+ */
+declare function mergeHiddenRowRanges(hiddenRowRanges: any[], newRange: number[]): boolean;
+

package/lib/contextMenu.js

@@ -538,8 +538,114 @@ export default function (self) {
       });
     }
   }
+
+  /**
+   * Return a tuple if the user selected contiguous columns, otherwise `null`.
+   * Info: Because the user may reorder the columns,
+   * the schemaIndex of the first item may be greater than the schemaIndex of the second item,
+   * but the columnIndex of the firs item must less than the columnIndex of the second item.
+   * @param {any[]} schema from `self.getSchema()`
+   * @returns {any[]} column schemas tuple (each schema has an additional field `schemaIndex`)
+   */
+  function getSelectedContiguousColumns(ev, schema) {
+    const memoKey = '__contiguousColumns';
+    if (Array.isArray(ev[memoKey]) || ev[memoKey] === null) return ev[memoKey];
+    ev[memoKey] = null;
+
+    if (!Array.isArray(self.selections) || self.selections.length === 0) return;
+    const selection = self.selections[0];
+    if (!selection || selection.length === 0) return;
+    for (let rowIndex = 0; rowIndex < self.viewData.length; rowIndex++) {
+      const row = self.viewData[rowIndex];
+      if (!row) continue;
+      const compare = self.selections[rowIndex];
+      if (!compare) return;
+      if (compare.length !== selection.length) return;
+      for (let i = 0; i < selection.length; i++)
+        if (selection[i] !== compare[i]) return;
+    }
+    selection.sort((a, b) => a - b);
+
+    /** @type {number[][]} */
+    const ranges = [];
+    let begin = selection[0];
+    let end = selection[0];
+    for (let i = 1; i < selection.length; i++) {
+      const orderIndex = selection[i];
+      if (orderIndex === end + 1) {
+        end = orderIndex;
+        continue;
+      }
+      ranges.push([begin, end]);
+      begin = orderIndex;
+      end = orderIndex;
+    }
+    ranges.push([begin, end]);
+
+    const currentOrderIndex = ev.cell.columnIndex;
+    const matchedRange = ranges.find(
+      (range) =>
+        currentOrderIndex >= range[0] &&
+        currentOrderIndex <= range[1] &&
+        range[0] !== range[1],
+    );
+    if (!matchedRange) return;
+
+    /** @type {number[]} orders[index] => columnIndex */
+    const orders = self.orders.columns;
+    if (!Array.isArray(orders)) return;
+
+    const matchedSchema = matchedRange.map((orderIndex) => {
+      const schemaIndex = orders[orderIndex];
+      const thisSchema = schema[schemaIndex];
+      return Object.assign({}, thisSchema, { orderIndex });
+    });
+    if (matchedSchema.findIndex((it) => !it) >= 0) return;
+    return (ev[memoKey] = matchedSchema);
+  }
+  /**
+   * @param {boolean} [allowOnlyOneRow]
+   * @returns {number[]} a rowIndex tuple. It can contains one row index or two row indexes.
+   */
+  function getSelectedContiguousRows(allowOnlyOneRow) {
+    let range = [];
+    let prev = -2;
+    let ok = true;
+    self.selections.forEach(function (row, index) {
+      if (!ok) return;
+      if (prev < -1) {
+        prev = index;
+        range[0] = index;
+        return;
+      }
+      if (index !== prev + 1 || !row || row.length === 0) {
+        ok = false;
+        return;
+      }
+      prev = index;
+      range[1] = index;
+    });
+    if (ok) {
+      if (range.length === 1) return allowOnlyOneRow ? range : null;
+      return range;
+    }
+  }
   function addDefaultContextMenuItem(e) {
-    var isNormalCell =
+    const schema = self.getSchema();
+    /**
+     * A map between columnIndex and column data
+     * @type {Map<string,any>}
+     */
+    let columns;
+    const getColumnsMap = () => {
+      if (!columns)
+        columns = new Map(schema.map((_col) => [_col.columnIndex, _col]));
+      return columns;
+    };
+    const isSorting =
+      self.orderings.columns && self.orderings.columns.length > 0;
+
+    const isNormalCell =
       !(
         e.cell.isBackground ||
         e.cell.isColumnHeaderCellCap ||
@@ -614,20 +720,30 @@ export default function (self) {
         const columnOrderIndex = e.cell.columnIndex;
         const columnIndex = self.orders.columns[columnOrderIndex];
 
+        const contiguousColumns = getSelectedContiguousColumns(e, schema);
+        let title = '';
+        if (contiguousColumns) {
+          title = contiguousColumns
+            .map((col) => col.title || col.name)
+            .join('-');
+        } else {
+          const column = schema[columnIndex];
+          if (column) title = column.title || column.name;
+        }
         e.items.push({
-          title: self.attributes.hideColumnText.replace(
-            /%s/gi,
-            e.cell.header.title || e.cell.header.name,
-          ),
+          title: self.attributes.hideColumnText.replace(/%s/gi, title),
           click: function (ev) {
-            self.getSchema()[columnIndex].hidden = true;
             ev.preventDefault();
             self.stopPropagation(ev);
             self.disposeContextMenu();
-            self.setStorageData();
-            setTimeout(function () {
-              self.resize(true);
-            }, 10);
+            if (contiguousColumns) {
+              self.hideColumns(
+                contiguousColumns[0].orderIndex,
+                contiguousColumns[1].orderIndex,
+              );
+            } else {
+              self.hideColumns(columnOrderIndex);
+            }
           },
         });
       }
@@ -689,6 +805,51 @@ export default function (self) {
         },
       });
     }
+
+    //#region hide rows
+    const canHideRows = !isSorting && e.cell.isRowHeader && e.cell.header;
+    if (canHideRows) {
+      const range = getSelectedContiguousRows(true);
+      if (range) {
+        const boundRowIndexes = range.map((viewRowIndex) =>
+          self.getBoundRowIndexFromViewRowIndex(viewRowIndex),
+        );
+        let title;
+        if (boundRowIndexes.length === 1) {
+          if (typeof boundRowIndexes[0] === 'number')
+            title = boundRowIndexes[0] + 1;
+          else title = range[0] + 1;
+
+          title = self.attributes.showHideRow.replace('%s', title);
+          // hide one row
+          e.items.push({
+            title,
+            click: function (ev) {
+              ev.preventDefault();
+              self.hideRows(boundRowIndexes[0], boundRowIndexes[0]);
+            },
+          });
+        } else if (boundRowIndexes[0] <= boundRowIndexes[1]) {
+          title = boundRowIndexes
+            .map((it, index) => {
+              if (typeof it === 'number') return it + 1;
+              return range[index] + 1;
+            })
+            .join('-');
+          title = self.attributes.showHideRows.replace('%s', title);
+          // hide rows
+          e.items.push({
+            title,
+            click: function (ev) {
+              ev.preventDefault();
+              self.hideRows(boundRowIndexes[0], boundRowIndexes[1]);
+            },
+          });
+        }
+      }
+    }
+    //#endregion hide rows
+
     //#region group/ungroup columns
     const groupAreaHeight = self.getColumnGroupAreaHeight();
     const groupAreaWidth = self.getRowGroupAreaWidth();
@@ -760,28 +921,13 @@ export default function (self) {
     const canUngroupColumns =
       self.attributes.allowGroupingColumns && e.cell.isColumnHeader;
     const canGroupByRows =
-      self.attributes.allowGroupingRows && e.cell.isRowHeader && e.cell.header;
+      !isSorting &&
+      self.attributes.allowGroupingRows &&
+      e.cell.isRowHeader &&
+      e.cell.header;
     const canUngroupRows =
       self.attributes.allowGroupingRows && e.cell.isRowHeader;
 
-    /**
-     * The value for storing the return value from `self.getSchema()`
-     * @type {any[]}
-     */
-    let schema;
-    /**
-     * A map between columnIndex and column data
-     * @type {Map<string,any>}
-     */
-    let columns;
-    const getColumnsMap = () => {
-      if (!columns) {
-        if (!schema) schema = self.getSchema();
-        columns = new Map(schema.map((_col) => [_col.columnIndex, _col]));
-      }
-      return columns;
-    };
-
     if (canGroupByColumns) {
       /** @type {number[]} */
       const groupIndexes = [];
@@ -863,23 +1009,7 @@ export default function (self) {
       }
     }
     if (canGroupByRows) {
-      let range = [];
-      let prev = -2;
-      let ok = true;
-      self.selections.forEach(function (row, index) {
-        if (!ok) return;
-        if (prev < -1) {
-          prev = index;
-          range[0] = index;
-          return;
-        }
-        if (index !== prev + 1 || !row || row.length === 0) {
-          ok = false;
-          return;
-        }
-        prev = index;
-        range[1] = index;
-      });
+      const range = getSelectedContiguousRows(false) || [];
       const rangeTitle = range
         .map((rowIndex) => {
           const index = self.getBoundRowIndexFromViewRowIndex(rowIndex);
@@ -888,7 +1018,6 @@ export default function (self) {
         })
         .join('-');
       if (
-        ok &&
         range.length === 2 &&
         self.isNewGroupRangeValid(self.groupedRows, range[0], range[1])
       ) {
@@ -999,7 +1128,7 @@ export default function (self) {
     function createDisposeEvent() {
       requestAnimationFrame(function () {
         document.addEventListener('click', self.disposeContextMenu);
-        document.removeEventListener('mouseup', createDisposeEvent);
+        window.removeEventListener('mouseup', createDisposeEvent);
       });
     }
     var contextPosition,
@@ -1047,7 +1176,7 @@ export default function (self) {
       }
       self.contextMenu = createContextMenu(ev, contextPosition, items);
       if (e.type == 'mousedown') {
-        document.addEventListener('mouseup', createDisposeEvent);
+        window.addEventListener('mouseup', createDisposeEvent);
       } else {
         createDisposeEvent();
       }

package/lib/defaults.js

@@ -45,6 +45,10 @@ export default function (self) {
       ['filterFrozenRows', true],
       ['globalRowResize', false],
       ['hideColumnText', 'Hide %s'],
+      ['showUnhideColumnsIndicator', false],
+      ['showUnhideRowsIndicator', false],
+      ['showHideRow', 'Hide row %s'],
+      ['showHideRows', 'Hide rows %s'],
       ['hoverMode', 'cell'],
       ['keepFocusOnMouseOut', false],
       ['maxAutoCompleteItems', 200],
@@ -291,14 +295,16 @@ export default function (self) {
       ['filterButtonHoverBackgroundColor', 'rgba(235, 235, 235, 1)'],
       ['filterButtonMenuOffsetTop', 10],
       ['filterButtonWidth', 20],
-      ['frozenMarkerHoverColor', 'rgba(236, 243, 255, 1)'],
-      ['frozenMarkerHoverBorderColor', 'rgba(110, 168, 255, 1)'],
-      ['frozenMarkerActiveColor', 'rgba(236, 243, 255, 1)'],
-      ['frozenMarkerActiveBorderColor', 'rgba(110, 168, 255, 1)'],
-      ['frozenMarkerColor', 'rgba(222, 222, 222, 1)'],
-      ['frozenMarkerBorderColor', 'rgba(168, 168, 168, 1)'],
+      ['frozenMarkerHoverColor', 'rgba(165, 198, 254, 1)'],
+      ['frozenMarkerHoverBorderColor', 'rgba(165, 198, 254, 1)'],
+      ['frozenMarkerActiveColor', 'rgba(165, 198, 254, 0.2)'],
+      ['frozenMarkerActiveBorderColor', 'rgba(165, 198, 254, 0.5)'],
+      ['frozenMarkerActiveHeaderColor', 'rgba(165, 198, 254, 1)'],
+      ['frozenMarkerColor', 'rgba(221, 221, 221, 1)'],
+      ['frozenMarkerBorderColor', 'rgba(221, 221, 221, 1)'],
       ['frozenMarkerBorderWidth', 1],
-      ['frozenMarkerWidth', 2],
+      ['frozenMarkerHeaderColor', 'rgba(188, 188, 188, 1)'],
+      ['frozenMarkerWidth', 4],
       ['groupingAreaBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['gridBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['gridBorderCollapse', 'collapse'],
@@ -377,6 +383,10 @@ export default function (self) {
       ['treeArrowMarginTop', 6],
       ['treeArrowWidth', 13],
       ['treeGridHeight', 250],
+      ['unhideIndicatorColor', 'rgba(0, 0, 0, 1)'],
+      ['unhideIndicatorBackgroundColor', 'rgba(255, 255, 255, 1)'],
+      ['unhideIndicatorBorderColor', 'rgba(174, 193, 232, 1)'],
+      ['unhideIndicatorSize', 16],
       ['width', 'auto'],
     ],
   };

package/lib/docs.js

@@ -973,6 +973,22 @@
  * @param {object} e.ctx Canvas context.
  * @param {canvasDatagrid.cell} e.cell The cell being moved out of.
  */
+/**
+ * Fires column(s) are being hidden
+ * @event
+ * @name canvasDatagrid#columnhide
+ * @param {object} e Event object.
+ * @param {object} e.ctx Canvas context.
+ * @param {columnIndex} e.columnIndex Index of column being hidden.
+ */
+/**
+ * Fires column(s) are being unhidden
+ * @event
+ * @name canvasDatagrid#columnunhide
+ * @param {object} e Event object.
+ * @param {object} e.ctx Canvas context.
+ * @param {columnIndex} e.columnIndex Index of column being unhidden.
+ */
 /**
  * Fires when the mouse enters a row.
  * @event

package/lib/dom.js

@@ -370,6 +370,19 @@ export default function (self) {
     var shouldClearCellValue = cellValueIsEmpty || inEnterMode;
 
     self.input.value = shouldClearCellValue ? '' : cell.value;
+    let width = Math.round(
+      self.input.value.length *
+        parseInt(self.style.editCellFontSize, 10) *
+        0.7 *
+        self.scale,
+    );
+    if (width + self.style.cellPaddingLeft < cell.width) {
+      width = cell.width - self.style.cellPaddingLeft;
+    } else if (width > self.width - cell.x - self.style.scrollBarWidth) {
+      width = self.width - cell.x - self.style.scrollBarWidth;
+      self.input.style.height = 'auto';
+    }
+    self.input.style.width = width + 'px';
     self.input.focus();
     self.input.addEventListener('click', self.stopPropagation);
     self.input.addEventListener('dblclick', self.stopPropagation);
@@ -450,6 +463,20 @@ export default function (self) {
         }
         self.scrollIntoView(nx, ny);
         self.beginEditAt(nx, ny, e);
+      } else {
+        let width = Math.round(
+          self.input.value.length *
+            parseInt(self.style.editCellFontSize, 10) *
+            0.7 *
+            self.scale,
+        );
+        if (width + self.style.cellPaddingLeft < cell.width) {
+          width = cell.width - self.style.cellPaddingLeft;
+        } else if (width > self.width - cell.x - self.style.scrollBarWidth) {
+          width = self.width - cell.x - self.style.scrollBarWidth;
+          self.input.style.height = 'auto';
+        }
+        self.input.style.width = width + 'px';
       }
     });
 
@@ -773,11 +800,11 @@ export default function (self) {
     });
     self.eventParent.addEventListener('scroll', self.resize, false);
     self.eventParent.addEventListener('touchstart', self.touchstart, false);
-    self.eventParent.addEventListener('mouseup', self.mouseup, false);
     self.eventParent.addEventListener('mousedown', self.mousedown, false);
     self.eventParent.addEventListener('dblclick', self.dblclick, false);
     self.eventParent.addEventListener('click', self.click, false);
-    document.body.addEventListener('mousemove', self.mousemove);
+    window.addEventListener('mouseup', self.mouseup, false);
+    window.addEventListener('mousemove', self.mousemove);
     self[self.isChildGrid ? 'parentGrid' : 'eventParent'].addEventListener(
       'wheel',
       self.scrollWheel,