canvas-datagrid 0.4.5 → 0.4.6

package/dist/types.d.ts

@@ -119,6 +119,7 @@
  * @param [args.rowGroupIndicatorPosition = 'bottom'] - Ths position of the row group indicator(icon), available values: 'top' and 'bottom'.
  * @param [args.showOrderByOption = true] - Show an option on the context menu sort rows.
  * @param [args.showPaste = false] - Show the paste option in the context menu when applicable.
+ * @param [args.resizeAfterDragged] - Resize after the handle is dropped, similar to Excel.
  * @param [args.schema = []] - Sets the schema. See {@link canvasDatagrid.schema}.
  * @param [args.data = []] - Sets the data. See {@link canvasDatagrid.data}.
  * @param [args.touchReleaseAnimationDurationMs = 2000] - How long the ease animation runs after touch release.
@@ -225,6 +226,7 @@ declare class canvasDatagrid {
         rowGroupIndicatorPosition?: string;
         showOrderByOption?: boolean;
         showPaste?: boolean;
+        resizeAfterDragged?: boolean;
         schema?: any[];
         data?: any[];
         touchReleaseAnimationDurationMs?: number;
@@ -459,48 +461,6 @@ declare class canvasDatagrid {
      * @param y - The row index of the cell to set active.
      */
     static setActiveCell(x: number, y: number): void;
-    /**
-     * Removes the selection.
-     * @param dontDraw - Suppress the draw method after the selection change.
-     */
-    static selectNone(dontDraw: boolean): void;
-    /**
-     * Selects every visible cell.
-     * @param dontDraw - Suppress the draw method after the selection change.
-     */
-    static selectAll(dontDraw: boolean): 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).
-     * @param expandToRow - When true the data in the array is expanded to the entire row.
-     */
-    static forEachSelectedCell(fn: number, expandToRow: number): void;
-    /**
-     * Selects a column.
-     * @param columnIndex - The column index to select.
-     * @param toggleSelectMode - When true, behaves as if you were holding control/command when you clicked the column.
-     * @param shift - When true, behaves as if you were holding shift when you clicked the column.
-     * @param supressSelectionchangedEvent - When true, prevents the selectionchanged event from firing.
-     */
-    static selectColumn(columnIndex: number, toggleSelectMode: boolean, shift: boolean, supressSelectionchangedEvent: boolean): void;
-    /**
-     * Selects a row.
-     * @param rowIndex - The row index to select.
-     * @param ctrl - When true, behaves as if you were holding control/command when you clicked the row.
-     * @param shift - When true, behaves as if you were holding shift when you clicked the row.
-     * @param supressSelectionchangedEvent - When true, prevents the selectionchanged event from firing.
-     */
-    static selectRow(rowIndex: number, ctrl: boolean, shift: boolean, supressSelectionchangedEvent: boolean): void;
     /**
      * Collapse a tree grid by row index.
      * @param index - The index of the row to collapse.
@@ -603,17 +563,6 @@ declare class canvasDatagrid {
      * @param rowIndexTo - The row index which is the end of the group
      */
     static toggleGroupRows(rowIndexFrom: number, rowIndexTo: number): void;
-    /**
-     * Moves the current selection relative to the its current position.  Note: this method does not move the selected data, just the selection itself.
-     * @param offsetX - The number of columns to offset the selection.
-     * @param offsetY - The number of rows to offset the selection.
-     */
-    static moveSelection(offsetX: number, offsetY: number): void;
-    /**
-     * Deletes currently selected data.
-     * @param dontDraw - Suppress the draw method after the selection change.
-     */
-    static deleteSelectedData(dontDraw: boolean): void;
     /**
      * Moves data in the provided selection to another position in the grid.  Moving data off the edge of the schema (columns/x) will truncate data.
      * @param sel - 2D array representing selected rows and columns.  `canvasDatagrid.selections` is in this format and can be used here.
@@ -675,11 +624,6 @@ declare class canvasDatagrid {
      * @returns cell at the selected location.
      */
     static getCellAt(x: number, y: number): cell;
-    /**
-     * Gets the bounds of current selection.
-     * @returns selection.
-     */
-    static getSelectionBounds(): rect;
     /**
      * Returns an auto generated schema based on data structure.
      * @returns schema A schema based on the first item in the data array.
@@ -691,11 +635,6 @@ declare class canvasDatagrid {
      * track of changes made to the data since last this method was called.
      */
     static clearChangeLog(): void;
-    /**
-     * Selects an area of the grid.
-     * @param bounds - A rect object representing the selected values.
-     */
-    static selectArea(bounds: rect): void;
     /**
      * Returns the maximum text width for a given column by column name.
      * @param name - The name of the column to calculate the value's width of.
@@ -716,6 +655,74 @@ declare class canvasDatagrid {
      * @param columnIndex - The column index to lookup.
      */
     static getColumnWidth(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;
+    /**
+     * Removes the selection.
+     * @param dontDraw - Suppress the draw method after the selection change.
+     */
+    static selectNone(dontDraw: boolean): void;
+    /**
+     * Selects every visible cell.
+     * @param dontDraw - Suppress the draw method after the selection change.
+     */
+    static selectAll(dontDraw: boolean): void;
+    /**
+     * Moves the current selection relative to the its current position.  Note: this method does not move the selected data, just the selection itself.
+     * @param offsetX - The number of columns to offset the selection.
+     * @param offsetY - The number of rows to offset the selection.
+     */
+    static moveSelection(offsetX: number, offsetY: number): void;
+    /**
+     * Gets the bounds of current selection.
+     * @param [sanitized] - sanitize the bound object if the value of thie paramater is `true`
+     * @returns two situations:
+     * 1. The result is always a bound object if `sanitized` is not `true`.
+     * And the result is `{top: Infinity, left: Infinity, bottom: -Infinity, right: -Infinity}` if there haven't selections.
+     * This is used for keeping compatibility with existing APIs.
+     * 2. When the parameter `sanitized` is true. The result will be null if there haven't selections.
+     */
+    static getSelectionBounds(sanitized?: boolean): rect;
+    /**
+     * Deletes currently selected data.
+     * @param dontDraw - Suppress the draw method after the selection change.
+     */
+    static deleteSelectedData(dontDraw: boolean): void;
+    /**
+     * Runs the defined method on each selected cell.
+     * @param fn - The function to execute.  The signature of the function is: (data, rowIndex, columnName).
+     * @param expandToRow - When true the data in the array is expanded to the entire row.
+     */
+    static forEachSelectedCell(fn: number, expandToRow: number): void;
+    /**
+     * Selects a column.
+     * @param columnIndex - The column index to select.
+     * @param toggleSelectMode - When true, behaves as if you were holding control/command when you clicked the column.
+     * @param shift - When true, behaves as if you were holding shift when you clicked the column.
+     * @param suppressEvent - When true, prevents the selectionchanged event from firing.
+     */
+    static selectColumn(columnIndex: number, toggleSelectMode: boolean, shift: boolean, suppressEvent: boolean): void;
+    /**
+     * Selects a row.
+     * @param rowIndex - The row index to select.
+     * @param ctrl - When true, behaves as if you were holding control/command when you clicked the row.
+     * @param shift - When true, behaves as if you were holding shift when you clicked the row.
+     * @param supressSelectionchangedEvent - When true, prevents the selectionchanged event from firing.
+     */
+    static selectRow(rowIndex: number, ctrl: boolean, shift: boolean, supressSelectionchangedEvent: boolean): void;
+    /**
+     * Selects an area of the grid.
+     * @param [bounds] - A rect object representing the selected values.
+     */
+    static selectArea(bounds?: rect, ctrl?: boolean): void;
     /**
      * Selected rows.  Same as the `data` property but filtered for the rows the user has cells selected in.  If any cell in the row is selected, all data for that row will appear in this array.
     */
@@ -1205,8 +1212,8 @@ declare namespace canvasDatagrid {
      * @property [activeCellSelectedBackgroundColor = rgba(236, 243, 255, 1)] - Style of activeCellSelectedBackgroundColor.
      * @property [activeCellSelectedColor = rgba(0, 0, 0, 1)] - Style of activeCellSelectedColor.
      * @property [activeCellVerticalAlignment = center] - Style of activeCellVerticalAlignment.
-     * @property [activeHeaderCellBackgroundColor = rgba(225, 225, 225, 1)] - Style of activeHeaderCellBackgroundColor.
-     * @property [activeHeaderCellColor = rgba(0, 0, 0, 1)] - Style of activeHeaderCellColor.
+     * @property [activeColumnHeaderCellBackgroundColor = rgba(225, 225, 225, 1)] - Style of activeColumnHeaderCellBackgroundColor.
+     * @property [activeColumnHeaderCellColor = rgba(0, 0, 0, 1)] - Style of activeColumnHeaderCellColor.
      * @property [activeRowHeaderCellBackgroundColor = rgba(225, 225, 225, 1)] - Style of activeRowHeaderCellBackgroundColor.
      * @property [activeRowHeaderCellColor = rgba(0, 0, 0, 1)] - Style of activeRowHeaderCellColor.
      * @property [autocompleteBottomMargin = 60] - Style of autocompleteBottomMargin.
@@ -1333,6 +1340,8 @@ declare namespace canvasDatagrid {
      * @property [reorderMarkerBorderWidth = 1.25] - Style of reorderMarkerBorderWidth.
      * @property [reorderMarkerIndexBorderColor = rgba(66, 133, 244, 1)] - Style of reorderMarkerIndexBorderColor.
      * @property [reorderMarkerIndexBorderWidth = 2.75] - Style of reorderMarkerIndexBorderWidth.
+     * @property [resizeMarkerColor = rgba(0, 0, 0, 0.2)] - Style of resizeMarkerColor.
+     * @property [resizeMarkerSize = 2] - Style of resizeMarkerSize.
      * @property [rowGroupColumnWidth = 25] - Style of rowGroupColumnWidth.
      * @property [rowHeaderCellBackgroundColor = rgba(240, 240, 240, 1)] - Style of rowHeaderCellBackgroundColor.
      * @property [rowHeaderCellBorderColor = rgba(152, 152, 152, 1)] - Style of rowHeaderCellBorderColor.
@@ -1465,13 +1474,13 @@ declare namespace canvasDatagrid {
         */
         activeCellVerticalAlignment?: string;
         /**
-         * Style of activeHeaderCellBackgroundColor.
+         * Style of activeColumnHeaderCellBackgroundColor.
         */
-        activeHeaderCellBackgroundColor?: string;
+        activeColumnHeaderCellBackgroundColor?: string;
         /**
-         * Style of activeHeaderCellColor.
+         * Style of activeColumnHeaderCellColor.
         */
-        activeHeaderCellColor?: string;
+        activeColumnHeaderCellColor?: string;
         /**
          * Style of activeRowHeaderCellBackgroundColor.
         */
@@ -1976,6 +1985,14 @@ declare namespace canvasDatagrid {
          * Style of reorderMarkerIndexBorderWidth.
         */
         reorderMarkerIndexBorderWidth?: number;
+        /**
+         * Style of resizeMarkerColor.
+        */
+        resizeMarkerColor?: string;
+        /**
+         * Style of resizeMarkerSize.
+        */
+        resizeMarkerSize?: number;
         /**
          * Style of rowGroupColumnWidth.
         */
@@ -2239,3 +2256,187 @@ declare namespace canvasDatagrid {
  */
 declare function mergeHiddenRowRanges(hiddenRowRanges: any[], newRange: number[]): boolean;
 
+/**
+ * Swap values between two properties in an object
+ * @param obj - The object
+ * @param prop0 - First property name
+ * @param prop1 - Another property name
+ */
+declare function swapProps(obj: any, prop0: string, prop1: string): void;
+
+/**
+ * This function transforms a selection object to normalized.
+ * Here is the definition of **normalized selection object**:
+ * - It contains these required properties: type, startRow, startColumn, endRow, endColumn
+ * - Property `endRow` and property `endColumn` must exist even if their value are the same with `startRow` or `startColumn`.
+ * - The value of `endRow` must be equals or greater than the value of `startRow`
+ * - The value of `endColumn` must be equals or greater than the value of `startColumn`
+ */
+declare function normalizeSelection(sel: SelectionDescriptor): SelectionDescriptor;
+
+/**
+ * Parse a string expression to a selection object. Here are some example expressions:
+ * - cells:20,30-40,50
+ * - row:5
+ * - cols:5-9
+ */
+declare function getSelectionFromString(str: string): SelectionDescriptor;
+
+/**
+ * Check are two cells block the same
+ */
+declare function isSameCellsBlock(block0: SelectionDescriptor, block1: SelectionDescriptor): boolean;
+
+/**
+ * This function is used in the function `mergeSelections`
+ */
+declare function mergeCellsIntoRowsOrColumns(cells: SelectionDescriptor, rowsOrColumns: SelectionDescriptor): SelectionDescriptor;
+
+/**
+ * Merge two selection objects (Splicing, Containing)
+ * @returns A concatenated selection object based on `block0`.
+ * Or `undefined` if they can't be concatenated
+ */
+declare function mergeSelections(sel0: SelectionDescriptor, sel1: SelectionDescriptor): SelectionDescriptor;
+
+/**
+ * Remove some rows from a rows selection
+ * @param selection - It must be a selection with type as `Rows`
+ * @param remove - It must be a selection with type as `Rows`
+ * @returns Returning a `undefined` represents parameter `remove` doesn't intersect with parameter `selection`
+ */
+declare function removePartOfRowsSelection(selection: SelectionDescriptor, remove: SelectionDescriptor): SelectionDescriptor[];
+
+/**
+ * Remove some columns from a columns selection
+ * @param selection - It must be a selection with type as `Columns`
+ * @param remove - It must be a selection with type as `Columns`
+ * @returns Returning a `undefined` represents parameter `remove` doesn't intersect with parameter `selection`
+ */
+declare function removePartOfColumnsSelection(selection: any, remove: any): object[];
+
+/**
+ * Remove a cells block from a cells selection
+ * @param selection - It must be a selection with type as `Cells` or `UnselectedCells`
+ * @param remove - It must be a selection
+ * @returns Returning a `undefined` represents parameter `remove` doesn't intersect with parameter `selection`
+ */
+declare function removePartOfCellsSelection(selection: SelectionDescriptor, remove: SelectionDescriptor): SelectionDescriptor[];
+
+/**
+ * Get intersection of two selection object
+ * @returns a selection object or undefined
+ */
+declare function getIntersection(sel0: SelectionDescriptor, sel1: SelectionDescriptor): SelectionDescriptor;
+
+/**
+ * Add a selection object into `selections` array. And there are two behaviours if this function:
+ * - It appends a new selection object into the `selections` array
+ * - It rewrites the selection item in the `selections` array (merge or change its type)
+ * @param add - Supported types: Cells, Rows, Columns
+ * @param [context] - Eg: {rows:1000, columns:1000}
+ * @returns is the selections array changed
+ */
+declare function addIntoSelections(selections: SelectionDescriptor[], add: SelectionDescriptor, context?: ContextForSelectionAction): boolean;
+
+/**
+ * Remove a selection area from `selections` array
+ * @param remove - Supported types: Cells, Rows, Columns
+ * @param [context] - Eg: {rows:1000, columns:1000}
+ * @returns is the selections array changed
+ */
+declare function removeFromSelections(selections: SelectionDescriptor[], remove: SelectionDescriptor, context?: ContextForSelectionAction): boolean;
+
+/**
+ * Clean up a selections array.
+ * This function removes unnecessary selection object, and it tries to merge different selections.
+ */
+declare function cleanupSelections(selections: SelectionDescriptor[]): void;
+
+/**
+ * Check if all cells in a given row selected
+ */
+declare function isRowSelected(selections: SelectionDescriptor[], rowIndex: number): void;
+
+/**
+ * Check if all cells in a given column selected
+ */
+declare function isColumnSelected(selections: SelectionDescriptor[], columnIndex: number): void;
+
+/**
+ * Check if a given cell selected
+ */
+declare function isCellSelected(selections: SelectionDescriptor[], rowIndex: number, columnIndex: number): void;
+
+/**
+ * Check if all given cells selected
+ * @param range - the range of cells block
+ */
+declare function areAllCellsSelected(selections: SelectionDescriptor[], range: RangeDescriptor): boolean;
+
+/**
+ * Get selection state from cells
+ * @returns Returning `true` means all given cells are selected,
+ * Returning `false` means all given cells are not selected.
+ * Returning a two-dimensional array means some cells are selected and some cells are not selected.
+ * A reference for returned value: `state[rowIndex - range.startRow][colIndex - range.startColumn]`
+ */
+declare function getSelectionStateFromCells(selections: SelectionDescriptor[], range: RangeDescriptor): boolean | boolean[][];
+
+/**
+ * Get verbose selection state from cells.
+ * (`verbose` in here means that you can locate particular selection for selected cells)
+ * @returns Each item in this two-dimensional array is 0 or a positive int,
+ * it represents the index of matched selection plus 1 if it is a positive int.
+ * And if the value of item is 0, it means this cell is not selected.
+ * A reference for returned value: `state[rowIndex - range.startRow][colIndex - range.startColumn]`
+ */
+declare function getVerboseSelectionStateFromCells(selections: SelectionDescriptor[], range: RangeDescriptor): number[][];
+
+/**
+ * Check if any contiguous columns are selected.
+ * (This function is useful for the preconditions for actions on columns, Eg: grouping, hiding)
+ * @param allowImpurity - This function ignores other selected rows/cells if its value is `true`
+ * @returns a tuple [beginViewColumnIndex, endViewColumnIndex] or `undefined`
+ */
+declare function getSelectedContiguousColumns(selections: SelectionDescriptor[], allowImpurity: boolean): number[];
+
+/**
+ * Check if any contiguous rows are selected.
+ * (This function is useful for the preconditions for actions on rows, Eg: grouping, hiding)
+ * @param allowImpurity - This function ignores other selected columns/cells if its value is `true`
+ * @returns a tuple [beginRowOrderIndex, endRowOrderIndex] or `undefined`
+ */
+declare function getSelectedContiguousRows(selections: SelectionDescriptor[], allowImpurity: boolean): number[];
+
+/**
+ * Check if current selections are complex.
+ * How we defined "complex" in here:
+ * - There are any unselected cells in selected rows/columns
+ * - More than one selection type in current selections
+ */
+declare function areSelectionsComplex(selections: SelectionDescriptor[]): boolean;
+
+/**
+ * Check if current selections are neat.
+ * This method is used for make new API are compatible with obsolete API
+ * For example:
+ * - Selected like <0,0-10,10> or rows<5-10>  is neat
+ * - Selected like <0,0-10,10>&<11,1-11,10> is untidy
+ * @param selections - selections after clean up
+ */
+declare function areSelectionsNeat(selections: SelectionDescriptor[]): boolean;
+
+declare function moveSelections(selections: SelectionDescriptor[], offsetX: number, offsetY: number): void;
+
+declare function cloneSelections(selections: SelectionDescriptor[]): SelectionDescriptor[];
+
+declare function getSelectionBounds(selections: SelectionDescriptor[]): RectangleObject;
+
+/**
+ * @param cell - Signature: `{rowIndex:number;columnIndex:number}`
+ * @param keyEvent - Signature: `{key:string;shiftKey:boolean}`
+ * @param context - Signature: `{columns:number;rows:number}`
+ */
+declare function shrinkOrExpandSelections(selections: SelectionDescriptor[], cell: any, keyEvent: any, context: any): boolean;
+

package/lib/component.js

@@ -60,8 +60,7 @@ export default function () {
       defs = {};
     intf.computedStyle = cStyle;
     defaults(defs);
-    defs = defs.defaults.styles;
-    defs.forEach(function (def) {
+    defs.defaults.styles.forEach(function (def) {
       var val;
       val = cStyle.getPropertyValue(component.hyphenateProperty(def[0], true));
       if (val === '') {

package/lib/contextMenu.js

@@ -344,7 +344,7 @@ export default function (self) {
         return selectedIndex;
       },
       set: function (value) {
-        if (typeof value !== 'number' || isNaN(value || !isFinite(value))) {
+        if (typeof value !== 'number' || isNaN(value) || !isFinite(value)) {
           throw new Error('Context menu selected index must be a sane number.');
         }
         selectedIndex = value;
@@ -539,97 +539,6 @@ 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) {
     const schema = self.getSchema();
     /**
@@ -656,12 +565,7 @@ export default function (self) {
     if (self.attributes.showFilter && isNormalCell) {
       createFilterContextMenuItems(e);
     }
-    if (
-      self.attributes.showCopy &&
-      self.selections.reduce(function (p, r) {
-        return p + r.length;
-      }, 0) > 0
-    ) {
+    if (self.attributes.showCopy && self.canSelectionsBeCopied()) {
       e.items.push({
         title: self.attributes.copyText,
         click: function () {
@@ -675,7 +579,11 @@ export default function (self) {
       e.items.push({
         title: self.attributes.pasteText,
         click: function () {
-          self.paste(self.clipBoardData, e.cell.columnIndex, e.cell.rowIndex);
+          // Original function call:
+          // self.paste(self.clipBoardData, e.cell.columnIndex, e.cell.rowIndex);
+          // We can remove the last two parameters follow
+          // because this function only need one parameter by following the function declaration
+          self.paste(self.clipBoardData);
           self.draw();
         },
       });
@@ -720,7 +628,7 @@ export default function (self) {
         const columnOrderIndex = e.cell.columnIndex;
         const columnIndex = self.orders.columns[columnOrderIndex];
 
-        const contiguousColumns = getSelectedContiguousColumns(e, schema);
+        const contiguousColumns = self.getSelectedContiguousColumns(schema);
         let title = '';
         if (contiguousColumns) {
           title = contiguousColumns
@@ -809,7 +717,7 @@ export default function (self) {
     //#region hide rows
     const canHideRows = !isSorting && e.cell.isRowHeader && e.cell.header;
     if (canHideRows) {
-      const range = getSelectedContiguousRows(true);
+      const range = self.getSelectedContiguousRows(true);
       if (range) {
         const boundRowIndexes = range.map((viewRowIndex) =>
           self.getBoundRowIndexFromViewRowIndex(viewRowIndex),
@@ -1009,7 +917,7 @@ export default function (self) {
       }
     }
     if (canGroupByRows) {
-      const range = getSelectedContiguousRows(false) || [];
+      const range = self.getSelectedContiguousRows(false) || [];
       const rangeTitle = range
         .map((rowIndex) => {
           const index = self.getBoundRowIndexFromViewRowIndex(rowIndex);

package/lib/defaults.js

@@ -61,6 +61,7 @@ export default function (self) {
       ['persistantSelectionMode', false],
       ['removeFilterOptionText', 'Remove filter on %s'],
       ['reorderDeadZone', 3],
+      ['resizeAfterDragged', false],
       ['resizeScrollZone', 20],
       ['rowGrabZoneSize', 5],
       ['columnGrabZoneSize', 30],
@@ -336,6 +337,8 @@ export default function (self) {
       ['reorderMarkerBorderWidth', 1.25],
       ['reorderMarkerIndexBorderColor', 'rgba(66, 133, 244, 1)'],
       ['reorderMarkerIndexBorderWidth', 2.75],
+      ['resizeMarkerColor', 'rgba(0, 0, 0, 0.2)'],
+      ['resizeMarkerSize', 2],
       ['rowGroupColumnWidth', 25],
       ['rowHeaderCellBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['rowHeaderCellBorderColor', 'rgba(200, 200, 200, 1)'],

package/lib/docs.js

@@ -82,6 +82,7 @@
  * @param {string} [args.rowGroupIndicatorPosition='bottom'] - Ths position of the row group indicator(icon), available values: 'top' and 'bottom'.
  * @param {boolean} [args.showOrderByOption=true] - Show an option on the context menu sort rows.
  * @param {boolean} [args.showPaste=false] - Show the paste option in the context menu when applicable.
+ * @param {boolean} [args.resizeAfterDragged] - Resize after the handle is dropped, similar to Excel.
  * @param {array} [args.schema=[]] - Sets the schema. See {@link canvasDatagrid.schema}.
  * @param {array} [args.data=[]] - Sets the data. See {@link canvasDatagrid.data}.
  * @param {number} [args.touchReleaseAnimationDurationMs=2000] - How long the ease animation runs after touch release.
@@ -306,8 +307,8 @@
  * @property {string} [activeCellSelectedBackgroundColor=rgba(236, 243, 255, 1)] - Style of activeCellSelectedBackgroundColor.
  * @property {string} [activeCellSelectedColor=rgba(0, 0, 0, 1)] - Style of activeCellSelectedColor.
  * @property {string} [activeCellVerticalAlignment=center] - Style of activeCellVerticalAlignment.
- * @property {string} [activeHeaderCellBackgroundColor=rgba(225, 225, 225, 1)] - Style of activeHeaderCellBackgroundColor.
- * @property {string} [activeHeaderCellColor=rgba(0, 0, 0, 1)] - Style of activeHeaderCellColor.
+ * @property {string} [activeColumnHeaderCellBackgroundColor=rgba(225, 225, 225, 1)] - Style of activeColumnHeaderCellBackgroundColor.
+ * @property {string} [activeColumnHeaderCellColor=rgba(0, 0, 0, 1)] - Style of activeColumnHeaderCellColor.
  * @property {string} [activeRowHeaderCellBackgroundColor=rgba(225, 225, 225, 1)] - Style of activeRowHeaderCellBackgroundColor.
  * @property {string} [activeRowHeaderCellColor=rgba(0, 0, 0, 1)] - Style of activeRowHeaderCellColor.
  * @property {number} [autocompleteBottomMargin=60] - Style of autocompleteBottomMargin.
@@ -434,6 +435,8 @@
  * @property {number} [reorderMarkerBorderWidth=1.25] - Style of reorderMarkerBorderWidth.
  * @property {string} [reorderMarkerIndexBorderColor=rgba(66, 133, 244, 1)] - Style of reorderMarkerIndexBorderColor.
  * @property {number} [reorderMarkerIndexBorderWidth=2.75] - Style of reorderMarkerIndexBorderWidth.
+ * @property {string} [resizeMarkerColor=rgba(0, 0, 0, 0.2)] - Style of resizeMarkerColor.
+ * @property {number} [resizeMarkerSize=2] - Style of resizeMarkerSize.
  * @property {number} [rowGroupColumnWidth=25] - Style of rowGroupColumnWidth.
  * @property {string} [rowHeaderCellBackgroundColor=rgba(240, 240, 240, 1)] - Style of rowHeaderCellBackgroundColor.
  * @property {string} [rowHeaderCellBorderColor=rgba(152, 152, 152, 1)] - Style of rowHeaderCellBorderColor.

package/lib/dom.js

@@ -755,6 +755,7 @@ export default function (self) {
       Object.keys(css[className]).map(function (prop) {
         el.style[prop] = css[className][prop];
       });
+      el.className = className;
     }
     return;
   };
@@ -803,7 +804,7 @@ export default function (self) {
     self.eventParent.addEventListener('mousedown', self.mousedown, false);
     self.eventParent.addEventListener('dblclick', self.dblclick, false);
     self.eventParent.addEventListener('click', self.click, false);
-    window.addEventListener('mouseup', self.mouseup, false);
+    self.eventParent.addEventListener('mouseup', self.mouseup, false);
     window.addEventListener('mousemove', self.mousemove);
     self[self.isChildGrid ? 'parentGrid' : 'eventParent'].addEventListener(
       'wheel',