canvas-datagrid 0.4.2 → 0.4.5

package/dist/types.d.ts

@@ -66,6 +66,8 @@
  * @param [args.autoScrollMargin = 5] - Number of pixels of mouse movement to trigger auto scroll.
  * @param [args.allowFreezingRows = false] - When true, the UI provides a drag-able cutter to freeze rows.
  * @param [args.allowFreezingColumns = false] - When true, the UI provides a drag-able cutter to freeze columns.
+ * @param [args.allowShrinkingSelection = false] - When true, this allows users to shrink the selection by dragging and dropping the handle inwards, similar to Excel. (Not supported yet.)
+ * @param [args.clearCellsWhenShrinkingSelection = false] - When true, this allows the clearing of the previously selected cells after the handle is moved inwards. (Not supported yet.)
  * @param [args.filterFrozenRows = true] - When false, rows on and above {@link canvasDatagrid#property:frozenRow}` will be ignored by filters when {@link canvasDatagrid#param:allowFreezingRows} is true.
  * @param [args.sortFrozenRows = true] - When false, rows on and above {@link canvasDatagrid#property:frozenRow}` will be ignored by sorters when {@link canvasDatagrid#param:allowSorting} is true.
  * @param [args.allowColumnReordering = true] - When true columns can be reordered.
@@ -128,7 +130,7 @@
  * @param [args.copyText = Copy] - The text that appears on the context menu when copy is available.
  * @param [args.columnHeaderClickBehavior = sort] - Can be any of sort, select, none.  When sort is selected, left clicking a column header will result in sorting ascending, then sorting descending if already sorted by this column.  If select is selected then clicking a column header will result in the column becoming selected.  Holding control/command or shift will select multiple columns in this mode.
  * @param [args.scrollPointerLock = false] - When true, clicking on the scroll box to scroll will cause the mouse cursor to disappear to prevent it from exiting the area observable to the grid.
- * @param [args.selectionHandleBehavior = 'none'] - When set to a value other than none a handle will appear in the lower right corner of the desktop version of the grid.  It does nothing but will be used in a future version of the grid.
+ * @param [args.selectionHandleBehavior = 'none'] - When set to a value other than none, a handle will appear in the lower right corner of the desktop version of the grid.
  * @param [args.columnSelectorVisibleText = '  &nbsp '] - When a column is hidden, this is the value to the left of the title in the column selector content menu.
  * @param [args.columnSelectorHiddenText = '\u2713'] - When a column is visible, this is the value to the left of the title in the column selector content menu.
  * @param [args.columnSelectorText = 'Add/remove columns'] - The text of the column selector context menu.
@@ -143,6 +145,7 @@
  * @param [args.touchZoomMin = 0.5] - The minimum zoom scale.
  * @param [args.touchZoomMax = 1.75] - The maximum zoom scale.
  * @param [args.maxPixelRatio = 1.5] - The maximum pixel ratio for high DPI displays.  High DPI displays can cause sluggish performance, this caps resolution the grid is rendered at.  Standard resolution (e.g.: 1920x1080) have a pixel ratio of 1:1 while higher resolution displays can be higher (e.g.: Retina display 2:1).  Higher numbers are sharper (higher resolution) up to the max of your display (usually 2), lower numbers are lower resolution, down to 1.  It might be fun to set a value lower than 1, I've never done it.
+ * @param [args.fillCellCallback] - The callback function that is called when a cell is filled.
  * @param [args.style = {}] - Sets selected values in style.
  * @param [args.filters = {}] - Sets selected values in filters.  See {@link canvasDatagrid.filters}.
  * @param [args.sorters = {}] - Sets selected values in sorters.  See {@link canvasDatagrid.sorters}.
@@ -169,6 +172,8 @@ declare class canvasDatagrid {
         autoScrollMargin?: number;
         allowFreezingRows?: boolean;
         allowFreezingColumns?: boolean;
+        allowShrinkingSelection?: boolean;
+        clearCellsWhenShrinkingSelection?: boolean;
         filterFrozenRows?: boolean;
         sortFrozenRows?: boolean;
         allowColumnReordering?: boolean;
@@ -246,6 +251,7 @@ declare class canvasDatagrid {
         touchZoomMin?: number;
         touchZoomMax?: number;
         maxPixelRatio?: number;
+        fillCellCallback?: any;
         style?: canvasDatagrid.style;
         filters?: canvasDatagrid.filter;
         sorters?: canvasDatagrid.sorter;
@@ -463,16 +469,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 +522,30 @@ declare class canvasDatagrid {
      * @returns header with the selected name, or undefined.
      */
     static getHeaderByName(name: string): header;
+    /**
+     * Hide column/columns
+     * @param beginColumnOrderIndex - The begin column order index
+     * @param [endColumnOrderIndex] - The end column order index
+     */
+    static hideColumns(beginColumnOrderIndex: number, endColumnOrderIndex?: number): void;
+    /**
+     * Unihde column/columns
+     * @param beginColumnOrderIndex - The begin column order index
+     * @param [endColumnOrderIndex] - The end column order index
+     */
+    static unhideColumns(beginColumnOrderIndex: number, endColumnOrderIndex?: number): void;
+    /**
+     * Hide rows
+     * @param beginRowIndex - The begin row index
+     * @param endRowIndex - The end row index
+     */
+    static hideRows(beginRowIndex: number, endRowIndex: number): void;
+    /**
+     * Unhide rows
+     * @param beginRowIndex - The begin row index
+     * @param endRowIndex - The end row index
+     */
+    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 +650,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.
@@ -1256,6 +1292,8 @@ declare namespace canvasDatagrid {
      * @property [editCellColor = black] - Style of editCellColor.
      * @property [editCellBackgroundColor = white] - Style of editCellBackgroundColor.
      * @property [editCellZIndex = 10000] - Style of editCellZIndex.
+     * @property [fillOverlayBorderColor = rgba(127, 127, 127, 1)] - Style of fillOverlayBorderColor.
+     * @property [fillOverlayBorderWidth = 2] - Style of fillOverlayBorderWidth.
      * @property [gridBackgroundColor = rgba(240, 240, 240, 1)] - Style of gridBackgroundColor.
      * @property [gridBorderColor = rgba(202, 202, 202, 1)] - Style of gridBorderColor.
      * @property [gridBorderWidth = 1] - Style of gridBorderWidth.
@@ -1774,6 +1812,14 @@ declare namespace canvasDatagrid {
          * Style of editCellZIndex.
         */
         editCellZIndex?: number;
+        /**
+         * Style of fillOverlayBorderColor.
+        */
+        fillOverlayBorderColor?: string;
+        /**
+         * Style of fillOverlayBorderWidth.
+        */
+        fillOverlayBorderWidth?: number;
         /**
          * Style of gridBackgroundColor.
         */
@@ -2186,3 +2232,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

@@ -25,9 +25,11 @@ export default function (self) {
       ['autoResizeRows', false],
       ['autoScrollOnMousemove', false],
       ['autoScrollMargin', 5],
+      ['allowShrinkingSelection', false],
       ['blanksText', '(Blanks)'],
       ['borderDragBehavior', 'none'],
       ['borderResizeZone', 10],
+      ['clearCellsWhenShrinkingSelection', false],
       ['clearSettingsOptionText', 'Clear saved settings'],
       ['columnHeaderClickBehavior', 'sort'],
       ['columnSelectorHiddenText', '   '],
@@ -45,6 +47,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 +297,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'],
@@ -365,6 +373,8 @@ export default function (self) {
       ['selectionHandleColor', 'rgba(66, 133, 244, 1)'],
       ['selectionHandleSize', 8],
       ['selectionHandleType', 'square'],
+      ['fillOverlayBorderColor', 'rgba(127, 127, 127, 1)'],
+      ['fillOverlayBorderWidth', 2],
       ['selectionOverlayBorderColor', 'rgba(66, 133, 244, 1)'],
       ['selectionOverlayBorderWidth', 1],
       ['treeArrowBorderColor', 'rgba(195, 199, 202, 1)'],
@@ -377,6 +387,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

@@ -29,6 +29,8 @@
  * @param {number} [args.autoScrollMargin=5] - Number of pixels of mouse movement to trigger auto scroll.
  * @param {boolean} [args.allowFreezingRows=false] - When true, the UI provides a drag-able cutter to freeze rows.
  * @param {boolean} [args.allowFreezingColumns=false] - When true, the UI provides a drag-able cutter to freeze columns.
+ * @param {boolean} [args.allowShrinkingSelection=false] - When true, this allows users to shrink the selection by dragging and dropping the handle inwards, similar to Excel. (Not supported yet.)
+ * @param {boolean} [args.clearCellsWhenShrinkingSelection=false] - When true, this allows the clearing of the previously selected cells after the handle is moved inwards. (Not supported yet.)
  * @param {boolean} [args.filterFrozenRows=true] - When false, rows on and above {@link canvasDatagrid#property:frozenRow}` will be ignored by filters when {@link canvasDatagrid#param:allowFreezingRows} is true.
  * @param {boolean} [args.sortFrozenRows=true] - When false, rows on and above {@link canvasDatagrid#property:frozenRow}` will be ignored by sorters when {@link canvasDatagrid#param:allowSorting} is true.
  * @param {boolean} [args.allowColumnReordering=true] - When true columns can be reordered.
@@ -91,7 +93,7 @@
  * @param {string} [args.copyText=Copy] - The text that appears on the context menu when copy is available.
  * @param {string} [args.columnHeaderClickBehavior=sort] - Can be any of sort, select, none.  When sort is selected, left clicking a column header will result in sorting ascending, then sorting descending if already sorted by this column.  If select is selected then clicking a column header will result in the column becoming selected.  Holding control/command or shift will select multiple columns in this mode.
  * @param {boolean} [args.scrollPointerLock=false] - When true, clicking on the scroll box to scroll will cause the mouse cursor to disappear to prevent it from exiting the area observable to the grid.
- * @param {string} [args.selectionHandleBehavior='none'] - When set to a value other than none a handle will appear in the lower right corner of the desktop version of the grid.  It does nothing but will be used in a future version of the grid.
+ * @param {string} [args.selectionHandleBehavior='none'] - When set to a value other than none, a handle will appear in the lower right corner of the desktop version of the grid.
  * @param {string} [args.columnSelectorVisibleText='  &nbsp '] - When a column is hidden, this is the value to the left of the title in the column selector content menu.
  * @param {string} [args.columnSelectorHiddenText='\u2713'] - When a column is visible, this is the value to the left of the title in the column selector content menu.
  * @param {string} [args.columnSelectorText='Add/remove columns'] - The text of the column selector context menu.
@@ -106,6 +108,7 @@
  * @param {number} [args.touchZoomMin=0.5] - The minimum zoom scale.
  * @param {number} [args.touchZoomMax=1.75] - The maximum zoom scale.
  * @param {number} [args.maxPixelRatio=1.5] - The maximum pixel ratio for high DPI displays.  High DPI displays can cause sluggish performance, this caps resolution the grid is rendered at.  Standard resolution (e.g.: 1920x1080) have a pixel ratio of 1:1 while higher resolution displays can be higher (e.g.: Retina display 2:1).  Higher numbers are sharper (higher resolution) up to the max of your display (usually 2), lower numbers are lower resolution, down to 1.  It might be fun to set a value lower than 1, I've never done it.
+ * @param {object} [args.fillCellCallback] - The callback function that is called when a cell is filled.
  * @param {canvasDatagrid.style} [args.style={}] - Sets selected values in style.
  * @param {canvasDatagrid.filter} [args.filters={}] - Sets selected values in filters.  See {@link canvasDatagrid.filters}.
  * @param {canvasDatagrid.sorter} [args.sorters={}] - Sets selected values in sorters.  See {@link canvasDatagrid.sorters}.
@@ -256,6 +259,32 @@
  * @property {object} text.width - The width of the text, including truncation and ellipsis.
  * @property {object} text.value - The value of the text, including truncation and ellipsis.
  */
+/**
+ * The additional function to invoke when a cell is filled. The return value of this
+ * function sets the new data of the cell.
+ * @function
+ * @name canvasDataGrid.fillCellCallback
+ * @param {object} args - Arguments that are passed to the function.
+ * @param {array} args.rows - Data that is being filled into all the cells, including this one.
+ * @param {string} args.direction - Direction of the fill operation, which can be 'horizontal' for x axis, 'vertical' for y axis, or 'both' when it goes both ways, e.g., when pasting unevenly.
+ * @param {object} args.newRowData - New row data that is going to replace 'existingRowData'. The result of this function will be kept in this object.
+ * @param {object} args.existingRowData - Existing data of the row. This will be replaced with 'newRowData'.
+ * @param {number} args.rowIndex - Index of the row on the grid.
+ * @param {number} args.rowOffset - Position/offset of 'cells' in 'rows'. Starts with '0'.
+ * @param {array} args.cells - New data for all the cells, including this one, for the current row. This is the same as accessing 'rows' using 'rowOffset'.
+ * @param {boolean} args.reversed - Whether the fill operation is applied in the reverse order, meaning if horizontal, we are going from right to left, and if vertical, we are going from bottom to top.
+ * @param {boolean} args.isFillingRow - Whether the current row is being filled. If the 'direction' is 'vertical', this will always be true, or sometimes true if the 'direction' is 'both'.
+ * @param {number} args.fillingRowPosition - Increase in position since the first filling of the rows. This will be '-1' if 'isFillingRow' is false. Starts with '0'.
+ * @param {number} args.fillingRowLength - Total length that 'fillingRowPosition' will go. This will be '-1' if 'isFillingRow' is false.
+ * @param {object} args.column - Column that this cell is on.
+ * @param {number} args.columnIndex - The index of the column on the grid.
+ * @param {string} args.newCellData - Data from 'cells' to be set for this cell. You can modify this and return the result to set the new data for this cell.
+ * @param {string} args.existingCellData - Existing data on this cell that is about to be replaced with the data you will return.
+ * @param {number} args.columnOffset - Position/offset of the 'newCellData' in 'cells'. Starts with '0'.
+ * @param {boolean} args.isFillingColumn - Whether the current column is being filled. If the 'direction' is 'horizontal', this will always be true, or sometimes true if the 'direction' is 'both'.
+ * @param {number} args.fillingColumnPosition - Increase in position since the first filling of the columns. This will be '-1' if 'isFillingColumn' is false. Starts with '0'.
+ * @param {number} args.fillingColumnLength - Total length that 'fillingColumnPosition' will go. This will be '-1' if 'isFillingColumn' is false.
+ */
 /**
  * Styles for the canvas data grid.  Standard CSS styles still apply but are not listed here.
  * @class
@@ -364,6 +393,8 @@
  * @property {string} [editCellColor=black] - Style of editCellColor.
  * @property {string} [editCellBackgroundColor=white] - Style of editCellBackgroundColor.
  * @property {number} [editCellZIndex=10000] - Style of editCellZIndex.
+ * @property {string} [fillOverlayBorderColor=rgba(127, 127, 127, 1)] - Style of fillOverlayBorderColor.
+ * @property {number} [fillOverlayBorderWidth=2] - Style of fillOverlayBorderWidth.
  * @property {string} [gridBackgroundColor=rgba(240, 240, 240, 1)] - Style of gridBackgroundColor.
  * @property {string} [gridBorderColor=rgba(202, 202, 202, 1)] - Style of gridBorderColor.
  * @property {number} [gridBorderWidth=1] - Style of gridBorderWidth.
@@ -973,6 +1004,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,