canvas-datagrid 0.4.4 → 0.4.6

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', '   '],
@@ -59,6 +61,7 @@ export default function (self) {
       ['persistantSelectionMode', false],
       ['removeFilterOptionText', 'Remove filter on %s'],
       ['reorderDeadZone', 3],
+      ['resizeAfterDragged', false],
       ['resizeScrollZone', 20],
       ['rowGrabZoneSize', 5],
       ['columnGrabZoneSize', 30],
@@ -334,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)'],
@@ -371,6 +376,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)'],

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.
@@ -80,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.
@@ -91,7 +94,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 +109,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 +260,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
@@ -277,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.
@@ -364,6 +394,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.
@@ -403,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',

package/lib/draw.js

@@ -2,6 +2,8 @@
 /*globals XMLSerializer: false, define: true, Blob: false, MutationObserver: false, requestAnimationFrame: false, performance: false, btoa: false*/
 'use strict';
 
+import { isCellSelected } from './selections/util';
+
 export default function (self) {
   var perfCounters = [],
     cachedImagesDrawn = false,
@@ -943,13 +945,17 @@ export default function (self) {
           selectionHandles.push([cell, 'tr']);
           cell.selectionHandle = 'tr';
         }
-        if (
-          cell.selectionBorderTop &&
-          cell.selectionBorderLeft &&
-          self.mobile
-        ) {
-          selectionHandles.push([cell, 'tl']);
-          cell.selectionHandle = 'tl';
+        if (cell.selectionBorderTop && cell.selectionBorderLeft) {
+          if (self.mobile) {
+            selectionHandles.push([cell, 'tl']);
+            cell.selectionHandle = 'tl';
+          }
+          if (self.fillOverlay.handle) {
+            self.fillOverlay.snapTo = {
+              x: cell.x,
+              y: cell.y,
+            };
+          }
         }
         if (
           cell.selectionBorderBottom &&
@@ -966,6 +972,22 @@ export default function (self) {
         ) {
           selectionHandles.push([cell, 'br']);
           cell.selectionHandle = 'br';
+
+          if (self.fillOverlay.handle) {
+            self.fillOverlay.handle.x = cell.x + cell.width;
+            self.fillOverlay.handle.y = cell.y + cell.height;
+          }
+        }
+
+        if (self.fillOverlay.handle) {
+          // Some corners may not be displaying, so we get at least
+          // one correct axis in order to display a fill overlay.
+          if (self.fillOverlay.snapTo.x === -1 && cell.selectionBorderLeft) {
+            self.fillOverlay.snapTo.x = cell.x;
+          }
+          if (self.fillOverlay.snapTo.y === -1 && cell.selectionBorderTop) {
+            self.fillOverlay.snapTo.y = cell.y;
+          }
         }
       }
     }
@@ -975,21 +997,23 @@ export default function (self) {
       propPrefix,
       offsetPoint,
     ) {
-      offsetPoint = offsetPoint || { x: 0, y: 0 };
       cell.selectionBorder = '';
-      if (
-        !cell.isRowHeader &&
-        self.selections[cell.rowIndex + -offsetPoint.y] &&
-        self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-          cell.columnIndex + -offsetPoint.x,
-        ) !== -1
-      ) {
+      // TODO: optimize it by `getSelectionStateFromCells`
+      const isSelected = offsetPoint
+        ? (row, col) =>
+            isCellSelected(
+              self.selections,
+              row - offsetPoint.y,
+              col - offsetPoint.x,
+            )
+        : (row, col) => isCellSelected(self.selections, row, col);
+      const lastColumnIndex = Math.max(schema.length - 1, 0);
+      const lastRowIndex = Math.max(viewData.length - 1, 0);
+      const { isRowHeader, rowIndex, columnIndex } = cell;
+
+      if (!isRowHeader && isSelected(rowIndex, columnIndex)) {
         if (
-          (!self.selections[cell.rowIndex - 1 + -offsetPoint.y] ||
-            self.selections[cell.rowIndex - 1 + -offsetPoint.y].indexOf(
-              cell.columnIndex + -offsetPoint.x,
-            ) === -1 ||
-            cell.rowIndex === 0) &&
+          (!isSelected(rowIndex - 1, columnIndex) || rowIndex === 0) &&
           !cell.isHeader
         ) {
           drawArray.push([cell, 't']);
@@ -997,32 +1021,21 @@ export default function (self) {
           cell[propPrefix + 'Border'] += 't';
         }
         if (
-          !self.selections[cell.rowIndex + 1 + -offsetPoint.y] ||
-          self.selections[cell.rowIndex + 1 + -offsetPoint.y].indexOf(
-            cell.columnIndex + -offsetPoint.x,
-          ) === -1
+          rowIndex >= lastRowIndex ||
+          !isSelected(rowIndex + 1, columnIndex)
         ) {
           drawArray.push([cell, 'b']);
           cell[propPrefix + 'BorderBottom'] = true;
           cell[propPrefix + 'Border'] += 'b';
         }
-        if (
-          !self.selections[cell.rowIndex + -offsetPoint.y] ||
-          cell.columnIndex === 0 ||
-          self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-            cell.columnIndex - 1 + -offsetPoint.x,
-          ) === -1
-        ) {
+        if (columnIndex === 0 || !isSelected(rowIndex, columnIndex - 1)) {
           drawArray.push([cell, 'l']);
           cell[propPrefix + 'BorderLeft'] = true;
           cell[propPrefix + 'Border'] += 'l';
         }
         if (
-          !self.selections[cell.rowIndex + -offsetPoint.y] ||
-          cell.columnIndex === schema.length ||
-          self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-            cell.columnIndex + 1 + -offsetPoint.x,
-          ) === -1
+          columnIndex >= lastColumnIndex ||
+          !isSelected(rowIndex, columnIndex + 1)
         ) {
           drawArray.push([cell, 'r']);
           cell[propPrefix + 'BorderRight'] = true;
@@ -1031,6 +1044,10 @@ export default function (self) {
       }
     }
     function drawCell(rowData, rowOrderIndex, rowIndex) {
+      const isActiveRowHeader =
+        self.orders.rows[self.activeCell.rowIndex] === rowOrderIndex ||
+        self.isRowSelected(rowOrderIndex);
+
       return function drawEach(header, headerIndex, columnOrderIndex) {
         if (header.hidden) {
           return 0;
@@ -1046,9 +1063,12 @@ export default function (self) {
             self.filterable.rows.includes(rowIndex) &&
             self.filterable.columns.includes(headerIndex),
           wrap = self.style.cellWhiteSpace !== 'nowrap',
-          selected =
-            self.selections[rowOrderIndex] &&
-            self.selections[rowOrderIndex].indexOf(columnOrderIndex) !== -1,
+          // TODO: optimize it by `getSelectionStateFromCells`
+          selected = isCellSelected(
+            self.selections,
+            rowOrderIndex,
+            columnOrderIndex,
+          ),
           hovered =
             self.hovers.rowIndex === rowOrderIndex &&
             (self.attributes.hoverMode === 'row' ||
@@ -1062,17 +1082,6 @@ export default function (self) {
           isColumnHeaderCellCap = cellStyle === 'columnHeaderCellCap',
           rawValue = rowData ? rowData[header.name] : undefined,
           isGrid = header.type === 'canvas-datagrid',
-          activeHeader =
-            (self.orders.rows[self.activeCell.rowIndex] === rowOrderIndex ||
-              self.selectedRows.indexOf(rowOrderIndex) >= 0 ||
-              self.orders.columns[self.activeCell.columnIndex] ===
-                headerIndex ||
-              self.selectedColumns.indexOf(headerIndex) >= 0) &&
-            (columnOrderIndex === -1 || rowOrderIndex === -1)
-              ? isRowHeader
-                ? 'activeRowHeaderCell'
-                : 'activeColumnHeaderCell'
-              : false,
           val,
           f = self.formatters[header.type || 'string'],
           orderByArrowSize = 0,
@@ -1083,6 +1092,19 @@ export default function (self) {
             row: rowData,
             header: header,
           };
+
+        const isActiveColumnHeader =
+          self.orders.columns[self.activeCell.columnIndex] === headerIndex ||
+          self.isColumnSelected(self.activeCell.viewColumnIndex);
+        let activeHeader = false;
+        if (
+          (isActiveColumnHeader || isActiveRowHeader) &&
+          (columnOrderIndex === -1 || rowOrderIndex === -1)
+        )
+          activeHeader = isRowHeader
+            ? 'activeRowHeaderCell'
+            : 'activeColumnHeaderCell';
+
         if (isColumnHeaderCellCap) {
           cellWidth = w - x;
         }
@@ -2427,10 +2449,7 @@ export default function (self) {
       self.ctx.lineWidth = self.style.reorderMarkerBorderWidth;
       self.ctx.strokeStyle = self.style.reorderMarkerBorderColor;
       if (self.dragMode === 'row-reorder') {
-        for (var k = 0; k < self.selections.length; k++) {
-          if (!self.selections[k] || k == self.reorderObject.rowIndex) continue;
-          b.height += self.getRowHeight(k);
-        }
+        b.height = self.getSelectedRowsHeight();
         b.width = w;
         b.x = 0;
         m.width = w;
@@ -2441,7 +2460,7 @@ export default function (self) {
         self.ctx.lineWidth = self.style.reorderMarkerIndexBorderWidth;
         self.ctx.strokeStyle = self.style.reorderMarkerIndexBorderColor;
         if (
-          self.selectedRows.indexOf(self.reorderTarget.sortRowIndex) === -1 &&
+          !self.isRowSelected(self.reorderTarget.sortRowIndex) &&
           self.currentCell.rowIndex !== self.reorderObject.rowIndex &&
           self.currentCell.rowIndex > -1 &&
           self.currentCell.rowIndex < l
@@ -2454,14 +2473,7 @@ export default function (self) {
           );
         }
       } else if (self.dragMode === 'column-reorder' && self.reorderObject) {
-        var selectedColumns = self.selections[0];
-        if (selectedColumns) {
-          for (var k = 1; k < selectedColumns.length; k++) {
-            b.width += self.getColumnWidth(
-              self.orders.columns[selectedColumns[k]],
-            );
-          }
-        }
+        b.width = self.getSelectedColumnsWidth();
         b.height = h;
         b.y = 0;
         m.height = h;
@@ -2473,8 +2485,7 @@ export default function (self) {
         self.ctx.lineWidth = self.style.reorderMarkerIndexBorderWidth;
         self.ctx.strokeStyle = self.style.reorderMarkerIndexBorderColor;
         if (
-          self.selectedColumns.indexOf(self.reorderTarget.sortColumnIndex) ===
-            -1 &&
+          !self.isColumnSelected(self.reorderTarget.sortColumnIndex) &&
           self.currentCell.sortColumnIndex !==
             self.reorderObject.sortColumnIndex &&
           self.reorderTarget.columnIndex !== self.reorderObject.columnIndex &&
@@ -2490,16 +2501,43 @@ export default function (self) {
         }
       }
     }
+    function drawResizeMarkers() {
+      if (
+        !self.attributes.resizeAfterDragged ||
+        !self.draggingItem ||
+        !self.pendingDragResize ||
+        (self.dragMode != 'ew-resize' && self.dragMode != 'ns-resize')
+      ) {
+        return;
+      }
+
+      const resizingRow = self.dragMode == 'ns-resize';
+      const height = resizingRow ? self.style.resizeMarkerSize : self.height;
+      const width = resizingRow ? self.width : self.style.resizeMarkerSize;
+      const minX =
+        self.dragStart.x -
+        (self.resizingStartingWidth - self.style.minColumnWidth);
+      const minY =
+        self.dragStart.y -
+        (self.resizingStartingHeight - self.style.minRowHeight);
+      const x = resizingRow ? 0 : Math.max(self.pendingDragResize.x, minX);
+      const y = !resizingRow ? 0 : Math.max(self.pendingDragResize.y, minY);
+
+      self.ctx.fillStyle = self.style.resizeMarkerColor;
+      fillRect(x, y, width, height);
+    }
     function drawBorder() {
       self.ctx.lineWidth = self.style.gridBorderWidth;
       self.ctx.strokeStyle = self.style.gridBorderColor;
       strokeRect(0, 0, self.width, self.height);
     }
     function drawSelectionBorders() {
-      self.ctx.lineWidth = self.style.selectionOverlayBorderWidth;
-      self.ctx.strokeStyle = self.style.selectionOverlayBorderColor;
       function dsb(c) {
-        addBorderLine(c[0], c[1]);
+        if (!self.fillOverlay.handle) {
+          self.ctx.lineWidth = self.style.selectionOverlayBorderWidth;
+          self.ctx.strokeStyle = self.style.selectionOverlayBorderColor;
+          addBorderLine(c[0], c[1]);
+        }
       }
       selectionBorders
         .filter(function (c) {
@@ -2542,9 +2580,14 @@ export default function (self) {
         })
         .forEach(dsb);
       self.ctx.restore();
+
+      drawFillOverlay();
     }
     function drawSelectionHandles() {
-      if (self.mobile || self.attributes.allowMovingSelection) {
+      if (
+        (self.mobile || self.attributes.allowMovingSelection) &&
+        self.attributes.editable
+      ) {
         self.ctx.lineWidth = self.style.selectionHandleBorderWidth;
         self.ctx.strokeStyle = self.style.selectionHandleBorderColor;
         self.ctx.fillStyle = self.style.selectionHandleColor;
@@ -2565,6 +2608,62 @@ export default function (self) {
         });
       }
     }
+    function drawFillOverlay() {
+      if (!self.fillOverlay.handle || !self.fillOverlay.snapTo) {
+        return;
+      }
+
+      self.ctx.save();
+
+      const overlay = self.fillOverlay;
+      const handle = overlay.handle;
+      const toX = overlay.snapTo.x;
+      const toY = overlay.snapTo.y;
+
+      // The cell that the cursor is moving over. This may be unavailable
+      // when the cursor is outside the grid or is pointing to something else.
+      //
+      // When unavailable, we use the actual position of the cursor to draw
+      // the overlay.
+      const snap = overlay.snap;
+
+      // Calculate the X, Y coordinates of the cursor with snap positions and
+      // the direction of the movement in mind.
+      //
+      // When the movement is horizontal, we get the Y coordinate from the handle,
+      // and vice-versa.
+      const cursorX =
+        overlay.direction === 'x'
+          ? snap
+            ? snap.x + (overlay.x < toX ? 0 : snap.width)
+            : overlay.x
+          : handle.x;
+      const cursorY =
+        overlay.direction === undefined || overlay.direction === 'y'
+          ? snap
+            ? snap.y + (overlay.y < toY ? 0 : snap.height)
+            : overlay.y
+          : handle.y;
+
+      // The final coordinates of the rect. We use 'minX' and 'minY' to avoid
+      // drawing on the frozen area.
+      const x = Math.max(Math.min(toX, cursorX), overlay.minX);
+      const y = Math.max(Math.min(toY, cursorY), overlay.minY);
+
+      // Width and height of the rect are the difference between the
+      // coordinates of both the rect and the cursor. The user may be pointing
+      // behind and/or upwards of the rect, so we need to take that into
+      // account.
+      const width = Math.max(toX, cursorX) - x;
+      const height = Math.max(toY, cursorY) - y;
+
+      self.ctx.strokeStyle = self.style.fillOverlayBorderColor;
+      self.ctx.lineWidth = self.style.fillOverlayBorderWidth;
+      self.ctx.setLineDash([3, 3]);
+      strokeRect(x, y, width, height);
+      self.ctx.setLineDash([]);
+      self.ctx.restore();
+    }
     function drawActiveCell() {
       if (!aCell) {
         return;
@@ -2981,6 +3080,7 @@ export default function (self) {
     drawSelectionHandles();
     drawReorderMarkers();
     drawMoveMarkers();
+    drawResizeMarkers();
     drawBorder();
     drawSelectionBorders();
     drawScrollBars();