canvas-datagrid 0.4.2 → 0.4.5

package/lib/events/index.js

@@ -74,6 +74,43 @@ export default function (self) {
           1),
     );
   };
+  /**
+   * @returns {number} dataWidth
+   */
+  self.refreshScrollCacheX = function () {
+    const s = self.getSchema();
+    self.scrollCache.x = [];
+
+    /** @type {number} it will be used in `reduceSchema` only  */
+    let frozenWidth = 0;
+
+    const collapsedColumnGroups = self.getCollapsedColumnGroups();
+    const isColumnCollapsed = (columnIndex) =>
+      collapsedColumnGroups.findIndex(
+        (group) => columnIndex >= group.from && columnIndex <= group.to,
+      ) >= 0;
+
+    const dataWidth =
+      s.reduce(function reduceSchema(accumulator, column, columnIndex) {
+        // intentional redefintion of column.  This causes scrollCache to be in the correct order
+        const schemaIndex = self.orders.columns[columnIndex];
+        const columnWidth = self.getColumnWidth(schemaIndex);
+        column = s[schemaIndex];
+        if (!column.hidden && !isColumnCollapsed(columnIndex))
+          accumulator += columnWidth;
+        if (columnIndex < self.frozenColumn) {
+          self.scrollCache.x[columnIndex] = accumulator;
+          frozenWidth = accumulator;
+        } else {
+          self.scrollCache.x[columnIndex] = Math.max(
+            frozenWidth + columnWidth,
+            accumulator,
+          );
+        }
+        return accumulator;
+      }, 0) || 0;
+    return dataWidth;
+  };
   self.resize = function (drawAfterResize) {
     if (!self.canvas) {
       return;
@@ -132,8 +169,7 @@ export default function (self) {
       rowHeaderCellWidth = self.getRowHeaderCellWidth(),
       topGroupAreaHeight = self.getColumnGroupAreaHeight(),
       leftGroupAreaWidth = self.getRowGroupAreaWidth(),
-      ch = self.style.cellHeight,
-      s = self.getSchema();
+      ch = self.style.cellHeight;
     // sets actual DOM canvas element
     function checkScrollBoxVisibility() {
       self.scrollBox.horizontalBarVisible =
@@ -187,7 +223,7 @@ export default function (self) {
         }
       });
     }
-    self.scrollCache.x = [];
+    dataWidth = self.refreshScrollCacheX();
     self.scrollCache.y = [];
     for (x = 0; x < l; x += 1) {
       self.scrollCache.y[x] = dataHeight;
@@ -199,32 +235,6 @@ export default function (self) {
     if (l > 1) {
       self.scrollCache.y[x] = dataHeight;
     }
-    const collapsedColumnGroups = self.getCollapsedColumnGroups();
-    const isColumnCollapsed = (columnIndex) =>
-      collapsedColumnGroups.findIndex(
-        (group) => columnIndex >= group.from && columnIndex <= group.to,
-      ) >= 0;
-    /** @type {number} it will be used in `reduceSchema` only  */
-    let frozenWidth = 0;
-    dataWidth =
-      s.reduce(function reduceSchema(accumulator, column, columnIndex) {
-        // intentional redefintion of column.  This causes scrollCache to be in the correct order
-        const schemaIndex = self.orders.columns[columnIndex];
-        const columnWidth = self.getColumnWidth(schemaIndex);
-        column = s[schemaIndex];
-        if (!column.hidden && !isColumnCollapsed(columnIndex))
-          accumulator += columnWidth;
-        if (columnIndex < self.frozenColumn) {
-          self.scrollCache.x[columnIndex] = accumulator;
-          frozenWidth = accumulator;
-        } else {
-          self.scrollCache.x[columnIndex] = Math.max(
-            frozenWidth + columnWidth,
-            accumulator,
-          );
-        }
-        return accumulator;
-      }, 0) || 0;
     if (self.attributes.showNewRow) {
       dataHeight += ch;
     }
@@ -376,9 +386,17 @@ export default function (self) {
     );
     // set canvas drawing related items
     if (!self.isChildGrid) {
-      self.canvas.width = self.width * ratio;
-      self.canvas.height = self.height * ratio;
-      self.ctx.scale(ratio, ratio);
+      const newWidth = self.width * ratio;
+      const newHeight = self.height * ratio;
+      // We need to check is settings size to canvas necessary,
+      // because settings the canvas'size will cause the canvas and its state be cleared
+      // even if the size is the same.
+      // Notes: Please don't call `self.resize()` without a subsequent call to `self.draw()`
+      if (self.canvas.width !== newWidth || self.canvas.height !== newHeight) {
+        self.canvas.width = newWidth;
+        self.canvas.height = newHeight;
+        self.ctx.scale(ratio, ratio);
+      }
     }
     // resize any open dom elements (input/textarea)
     self.resizeEditInput();
@@ -475,6 +493,8 @@ export default function (self) {
       y = self.mouse.y,
       cell = self.getCellAt(x, y),
       delta,
+      disallowVerticalAutoScroll = false,
+      disallowHorizontalAutoScroll = false,
       ev = { NativeEvent: e, cell: cell, x: x, y: y },
       previousCell = self.currentCell;
     clearTimeout(self.scrollTimer);
@@ -501,6 +521,20 @@ export default function (self) {
     }
     self.currentCell = cell;
 
+    if (
+      !self.draggingItem && // It is not in dragging mode (avoid changing hovers frequent)
+      cell &&
+      (cell.context === 'cell' || cell.context === self.cursorGrab)
+    ) {
+      const indicator = self.getUnhideIndicator(self.mouse.x, self.mouse.y);
+      if (indicator) {
+        self.cursor = 'pointer';
+        self.hovers = { unhideIndicator: indicator };
+        self.draw();
+        return;
+      }
+    }
+
     self.hovers = {};
     if (!self.draggingItem && cell) {
       self.dragItem = cell;
@@ -592,6 +626,9 @@ export default function (self) {
           dragBounds.top = -1;
           dragBounds.bottom = self.viewData.length - 1;
           if (dragBounds.left < 0) dragBounds.left = 0;
+          if (dragBounds.left != dragBounds.right)
+            self.isMultiColumnsSelected = true;
+          else self.isMultiRowsSelected = false;
         }
 
         if (
@@ -705,6 +742,8 @@ export default function (self) {
         ) {
           if (!(cell.hovered && self.hovers.onFilterButton)) {
             self.selections = [];
+            self.selectedRows = [];
+            self.selectedColumns = [];
           }
           if (dragBounds.top === -1) {
             dragBounds.top = 0;
@@ -716,14 +755,42 @@ export default function (self) {
             }
           } else {
             self.selectArea(sBounds, true);
-            if (sBounds.left == -1 && sBounds.top !== sBounds.bottom)
+            self.activeCell.rowIndex = sBounds.top;
+            self.activeCell.columnIndex = sBounds.left;
+            if (sBounds.left == -1 && sBounds.top !== sBounds.bottom) {
+              self.activeCell.columnIndex = 0;
               self.isMultiRowsSelected = true;
+              self.isMultiColumnsSelected = false;
+            }
           }
         }
+      } else if (self.movingSelectionHandle) {
+        delta = {
+          x: Math.abs(self.dragStart.x - x),
+          y: Math.abs(self.dragStart.y - y),
+        };
 
-        if (self.attributes.autoScrollOnMousemove) {
-          var movedVertically = delta.y > self.attributes.autoScrollMargin;
-          var movedHorizontally = delta.x > self.attributes.autoScrollMargin;
+        // Disallow auto-scroll to the direction that overlay is not
+        // moving towards.
+        if (self.fillOverlay.direction === 'y') {
+          disallowHorizontalAutoScroll = true;
+        } else if (self.fillOverlay.direction === 'x') {
+          disallowVerticalAutoScroll = true;
+        }
+      }
+
+      if (delta) {
+        if (
+          self.attributes.autoScrollOnMousemove ||
+          disallowVerticalAutoScroll ||
+          disallowHorizontalAutoScroll
+        ) {
+          var movedVertically =
+            !disallowVerticalAutoScroll &&
+            delta.y > self.attributes.autoScrollMargin;
+          var movedHorizontally =
+            !disallowHorizontalAutoScroll &&
+            delta.x > self.attributes.autoScrollMargin;
 
           if (movedVertically && !movedHorizontally)
             self.autoScrollZone(e, -1, y, ctrl);
@@ -791,6 +858,15 @@ export default function (self) {
       return;
     }
 
+    const unhideIndicator = self.getUnhideIndicator(pos.x, pos.y);
+    if (unhideIndicator) {
+      const { dir, orderIndex0, orderIndex1 } = unhideIndicator;
+      if (dir === 'l' || dir === 'r')
+        self.unhideColumns(orderIndex0, orderIndex1);
+      else self.unhideRows(orderIndex0, orderIndex1);
+      return;
+    }
+
     let group = self.getColumnGroupAt(pos.x, pos.y);
     if (!group) group = self.getRowGroupAt(pos.x, pos.y);
     if (group) {
@@ -948,12 +1024,8 @@ export default function (self) {
     }
 
     self.resize();
-    document.body.removeEventListener(
-      'mousemove',
-      self.dragResizeColumn,
-      false,
-    );
-    document.body.removeEventListener('mouseup', self.stopDragResize, false);
+    window.removeEventListener('mousemove', self.dragResizeColumn, false);
+    window.removeEventListener('mouseup', self.stopDragResize, false);
     self.setStorageData();
     self.draw(true);
     self.ignoreNextClick = true;
@@ -1060,7 +1132,7 @@ export default function (self) {
     if (document.exitPointerLock) {
       document.exitPointerLock();
     }
-    document.removeEventListener('mousemove', self.scrollGrid, false);
+    window.removeEventListener('mousemove', self.scrollGrid, false);
   };
   self.dragReorder = function (e) {
     var pos,
@@ -1078,10 +1150,7 @@ export default function (self) {
       return;
     }
     if ((e.ctrlKey || e.metaKey || e.shiftKey) && self.reorderObject) {
-      if (
-        self.dragMode === 'column-reorder' &&
-        !self.isMultiColumnsSelected(self.draggingItem.header.index)
-      ) {
+      if (self.dragMode === 'column-reorder' && !self.isMultiColumnsSelected) {
         self.selectColumn(self.draggingItem.header.index, false, false);
       }
     }
@@ -1105,6 +1174,11 @@ export default function (self) {
           -1,
           self.activeCell.rowIndex,
         );
+      if (self.isMultiColumnsSelected)
+        self.reorderObject = self.getVisibleCellByIndex(
+          self.activeCell.columnIndex,
+          -1,
+        );
       if (!self.reorderObject) return;
       self.reorderTarget = self.currentCell;
       self.reorderObject.dragOffset = {
@@ -1131,8 +1205,8 @@ export default function (self) {
         'row-reorder': 'rowIndex',
         'column-reorder': 'sortColumnIndex',
       }[self.dragMode];
-    document.body.removeEventListener('mousemove', self.dragReorder, false);
-    document.body.removeEventListener('mouseup', self.stopDragReorder, false);
+    window.removeEventListener('mousemove', self.dragReorder, false);
+    window.removeEventListener('mouseup', self.stopDragReorder, false);
     if (
       self.reorderObject &&
       self.reorderTarget &&
@@ -1155,23 +1229,34 @@ export default function (self) {
       tIndex = cr[self.dragMode].indexOf(self.reorderTarget[i]);
       if (self.dragMode === 'column-reorder') {
         var sortColumnIndices = [];
-        var seletedColumnIndices = [];
+        var selectedColumnIndices = [];
         if (self.selections[0]) {
+          oIndex = self.selections[0][0];
           self.selections[0].forEach(function (value) {
             sortColumnIndices.push(self.orders.columns[value]);
           });
         }
         var deleteCount = sortColumnIndices.length;
-        cr[self.dragMode].splice(oIndex, deleteCount);
-        if (tIndex > oIndex) tIndex = tIndex - (deleteCount - 1);
-        for (var i = 0; i < sortColumnIndices.length; i++) {
-          seletedColumnIndices.push(tIndex + i);
-          cr[self.dragMode].splice(tIndex + i, 0, sortColumnIndices[i]);
+        if (
+          tIndex < oIndex ||
+          (tIndex > oIndex && Math.abs(tIndex - oIndex) >= deleteCount)
+        ) {
+          cr[self.dragMode].splice(oIndex, deleteCount);
+          if (tIndex > oIndex) tIndex = tIndex - (deleteCount - 1);
+
+          self.selectedColumns = [];
+          for (var i = 0; i < sortColumnIndices.length; i++) {
+            if (i === 0) self.activeCell.columnIndex = tIndex;
+            selectedColumnIndices.push(tIndex + i);
+            self.selectedColumns.push(sortColumnIndices[i]);
+            cr[self.dragMode].splice(tIndex + i, 0, sortColumnIndices[i]);
+          }
+
+          self.orders.columns = cr[self.dragMode];
+          self.viewData.forEach(function (row, rowIndex) {
+            self.selections[rowIndex] = selectedColumnIndices;
+          });
         }
-        self.orders.columns = cr[self.dragMode];
-        self.viewData.forEach(function (row, rowIndex) {
-          self.selections[rowIndex] = seletedColumnIndices;
-        });
       } else {
         var selectedRows = [];
         self.selections.forEach(function (row, rowIndex) {
@@ -1180,13 +1265,21 @@ export default function (self) {
             odata.push(self.viewData[rowIndex]);
           }
         });
-        self.viewData.splice(oIndex, odata.length);
-        self.selections = [];
-        if (tIndex > oIndex) tIndex = tIndex - (odata.length - 1);
-        self.activeCell.rowIndex = tIndex;
-        for (var i = 0; i < odata.length; i++) {
-          self.viewData.splice(tIndex + i, 0, odata[i]);
-          self.selections[tIndex + i] = selectedRows[i];
+        if (
+          tIndex < oIndex ||
+          (tIndex > oIndex && Math.abs(tIndex - oIndex) >= odata.length)
+        ) {
+          self.viewData.splice(oIndex, odata.length);
+          self.selections = [];
+          self.selectedRows = [];
+          if (tIndex > oIndex) tIndex = tIndex - (odata.length - 1);
+          self.activeCell.rowIndex = tIndex;
+
+          for (var i = 0; i < odata.length; i++) {
+            self.viewData.splice(tIndex + i, 0, odata[i]);
+            self.selections[tIndex + i] = selectedRows[i];
+            self.selectedRows.push(tIndex + i);
+          }
         }
       }
       self.resize();
@@ -1217,8 +1310,8 @@ export default function (self) {
     }
   };
   self.stopDragMove = function (e) {
-    document.body.removeEventListener('mousemove', self.dragMove, false);
-    document.body.removeEventListener('mouseup', self.stopDragMove, false);
+    window.removeEventListener('mousemove', self.dragMove, false);
+    window.removeEventListener('mouseup', self.stopDragMove, false);
     var b = self.getSelectionBounds();
     if (
       self.dispatchEvent('endmove', { NativeEvent: e, cell: self.currentCell })
@@ -1249,16 +1342,30 @@ export default function (self) {
     ) {
       return;
     }
-    var pos = self.getLayerPos(e),
+    var pos = self.getLayerPos(e);
+
+    self.ignoreNextClick = true;
+    self.freezeMarkerPosition = pos;
+    pos.x -= self.getRowGroupAreaWidth();
+    pos.y -= self.getColumnGroupAreaHeight();
+    if (
+      Math.abs(pos.x) > self.attributes.reorderDeadZone ||
+      Math.abs(pos.y) > self.attributes.reorderDeadZone
+    ) {
+      setTimeout(function () {
+        self.autoScrollZone(e, pos.x, pos.y, false);
+      }, 1);
+    }
+  };
+  self.stopFreezeMove = function (e) {
+    let pos = self.getLayerPos(e),
       bm = self.style.gridBorderCollapse === 'collapse' ? 1 : 2,
       columnHeaderCellBorder = self.style.columnHeaderCellBorderWidth * bm,
       columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
       rowHeaderCellWidth = self.getRowHeaderCellWidth();
-
-    self.ignoreNextClick = true;
-    self.freezeMarkerPosition = pos;
     pos.x -= self.getRowGroupAreaWidth();
     pos.y -= self.getColumnGroupAreaHeight();
+
     if (
       self.currentCell &&
       self.currentCell.rowIndex !== undefined &&
@@ -1294,15 +1401,20 @@ export default function (self) {
       self.currentCell.columnIndex !== undefined &&
       self.dragMode === 'frozen-column-marker'
     ) {
+      const dataWidth = self.refreshScrollCacheX();
       self.scrollBox.scrollLeft = 0;
-      self.frozenColumn = self.currentCell.columnIndex + 1;
+      let x =
+        self.currentCell.x -
+        self.style.frozenMarkerWidth -
+        self.style.frozenMarkerBorderWidth;
+      if (pos.x > x + self.currentCell.width / 2)
+        self.frozenColumn = self.currentCell.columnIndex + 1;
+      else if (self.currentCell.columnIndex >= 0)
+        self.frozenColumn = self.currentCell.columnIndex;
       self.scrollBox.bar.h.x =
-        rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn - 1];
-      self.scrollBox.box.h.x =
-        rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn - 1];
-      var dataWidth = self.scrollCache.x[self.scrollCache.x.length - 1];
+        rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn];
       self.scrollBox.widthBoxRatio =
-        (self.scrollBox.width - self.scrollCache.x[self.frozenColumn - 1]) /
+        (self.scrollBox.width - self.scrollCache.x[self.frozenColumn]) /
         dataWidth;
       self.scrollBox.scrollBoxWidth =
         self.scrollBox.width * self.scrollBox.widthBoxRatio -
@@ -1321,10 +1433,9 @@ export default function (self) {
         self.autoScrollZone(e, pos.x, pos.y, false);
       }, 1);
     }
-  };
-  self.stopFreezeMove = function (e) {
-    document.body.removeEventListener('mousemove', self.freezeMove, false);
-    document.body.removeEventListener('mouseup', self.stopFreezeMove, false);
+
+    window.removeEventListener('mousemove', self.freezeMove, false);
+    window.removeEventListener('mouseup', self.stopFreezeMove, false);
     self.freezeMarkerPosition = undefined;
     if (
       self.dispatchEvent('endfreezemove', {
@@ -1338,6 +1449,7 @@ export default function (self) {
       return;
     }
     self.draw(true);
+    self.resize();
   };
   self.mousedown = function (e, overridePos) {
     self.lastMouseDownTarget = e.target;
@@ -1358,7 +1470,9 @@ export default function (self) {
     var ctrl = e.ctrlKey || e.metaKey,
       move = /-move/.test(self.dragMode),
       freeze = /frozen-row-marker|frozen-column-marker/.test(self.dragMode),
-      resize = /-resize/.test(self.dragMode);
+      resize = /-resize/.test(self.dragMode),
+      selectionHandleMove = /selection-handle-br/.test(self.dragMode);
+    const onUnhideIndicator = self.hovers && self.hovers.unhideIndicator;
     self.dragStart = overridePos || self.getLayerPos(e);
     self.scrollStart = {
       left: self.scrollBox.scrollLeft,
@@ -1376,19 +1490,25 @@ export default function (self) {
       !self.currentCell.isColumnHeader &&
       !move &&
       !freeze &&
-      !resize
+      !resize &&
+      !selectionHandleMove
     ) {
       if (
         !(self.dragMode == 'row-reorder' && self.isMultiRowsSelected) &&
         !(self.currentCell.hovered && self.hovers.onFilterButton)
       ) {
         self.selections = [];
+        self.selectedRows = [];
+        self.selectedColumns = [];
       }
     }
     if (self.dragStartObject.isGrid) {
       return;
     }
-    if (self.scrollModes.indexOf(self.dragStartObject.context) !== -1) {
+    if (
+      self.scrollModes.indexOf(self.dragStartObject.context) !== -1 &&
+      !onUnhideIndicator
+    ) {
       self.scrollMode = self.dragStartObject.context;
       self.scrollStartMode = self.dragStartObject.context;
       self.scrollGrid(e);
@@ -1404,8 +1524,8 @@ export default function (self) {
         };
         self.canvas.requestPointerLock();
       }
-      document.addEventListener('mousemove', self.scrollGrid, false);
-      document.addEventListener('mouseup', self.stopScrollGrid, false);
+      window.addEventListener('mousemove', self.scrollGrid, false);
+      window.addEventListener('mouseup', self.stopScrollGrid, false);
       self.ignoreNextClick = true;
       return;
     }
@@ -1423,11 +1543,30 @@ export default function (self) {
         self.dragStartObject.columnIndex > -1
       ) {
         self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
-      } else if (self.attributes.selectionMode !== 'row') {
+        return;
+      }
+      if (self.attributes.selectionMode !== 'row') {
         self.mousemove(e);
       }
       return;
     }
+    if (selectionHandleMove) {
+      self.movingSelectionHandle = true;
+      self.fillOverlay = {
+        handle: {
+          x: self.dragStartObject.x + self.dragStartObject.width / 2,
+          y: self.dragStartObject.y + self.dragStartObject.height / 2,
+        },
+        snapTo: { x: -1, y: -1 },
+        selection: self.getSelectionBounds(),
+      };
+      if (self.dispatchEvent('beginselectionhandlemove', { NativeEvent: e })) {
+        return;
+      }
+      window.addEventListener('mousemove', self.selectionHandleMove, false);
+      window.addEventListener('mouseup', self.stopSelectionHandleMove, false);
+      return self.selectionHandleMove(e);
+    }
     if (move) {
       self.draggingItem = self.dragItem;
       self.movingSelection = self.selections.concat([]);
@@ -1440,8 +1579,8 @@ export default function (self) {
       ) {
         return;
       }
-      document.body.addEventListener('mousemove', self.dragMove, false);
-      document.body.addEventListener('mouseup', self.stopDragMove, false);
+      window.addEventListener('mousemove', self.dragMove, false);
+      window.addEventListener('mouseup', self.stopDragMove, false);
       return self.mousemove(e);
     }
     if (freeze) {
@@ -1453,11 +1592,15 @@ export default function (self) {
       if (self.dispatchEvent('beginfreezemove', { NativeEvent: e })) {
         return;
       }
-      document.body.addEventListener('mousemove', self.freezeMove, false);
-      document.body.addEventListener('mouseup', self.stopFreezeMove, false);
+
+      self.freezeMarkerPosition = self.getLayerPos(e);
+      self.freezeMarkerPosition.isGrab = true;
+
+      window.addEventListener('mousemove', self.freezeMove, false);
+      window.addEventListener('mouseup', self.stopFreezeMove, false);
       return self.mousemove(e);
     }
-    if (resize) {
+    if (resize && !onUnhideIndicator) {
       self.draggingItem = self.dragItem;
       if (self.draggingItem.rowOpen) {
         self.resizingStartingHeight =
@@ -1472,22 +1615,19 @@ export default function (self) {
             ? 'cornerCell'
             : self.draggingItem.sortColumnIndex
         ] || self.draggingItem.width;
-      document.body.addEventListener('mousemove', self.dragResizeColumn, false);
-      document.body.addEventListener('mouseup', self.stopDragResize, false);
+      window.addEventListener('mousemove', self.dragResizeColumn, false);
+      window.addEventListener('mouseup', self.stopDragResize, false);
       return;
     }
     if (['row-reorder', 'column-reorder'].indexOf(self.dragMode) !== -1) {
       self.draggingItem = self.dragStartObject;
-      if (
-        self.dragMode === 'column-reorder' &&
-        !self.isMultiColumnsSelected(self.currentCell.header.index)
-      ) {
+      if (self.dragMode === 'column-reorder' && !self.isMultiColumnsSelected) {
         self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
       } else if (self.dragMode === 'row-reorder' && !self.isMultiRowsSelected) {
         self.selectRow(self.dragStartObject.rowIndex, ctrl, null);
       }
-      document.body.addEventListener('mousemove', self.dragReorder, false);
-      document.body.addEventListener('mouseup', self.stopDragReorder, false);
+      window.addEventListener('mousemove', self.dragReorder, false);
+      window.addEventListener('mouseup', self.stopDragReorder, false);
       return;
     }
   };
@@ -1715,6 +1855,8 @@ export default function (self) {
       if (!e.shiftKey && self.attributes.selectionFollowsActiveCell) {
         if (!ctrl) {
           self.selections = [];
+          self.selectedRows = [];
+          self.selectedColumns = [];
         }
         self.selections[y] = self.selections[y] || [];
         self.selections[y].push(x);
@@ -1849,6 +1991,8 @@ export default function (self) {
     mimeType,
     startRowIndex,
     startColIndex,
+    minRowsLength = 0,
+    minColumnsLength = 0,
   ) {
     if (mimeType === 'text/html' && !isSupportedHtml(pasteValue)) {
       console.warn(
@@ -1860,61 +2004,49 @@ export default function (self) {
 
       return;
     }
-    var schema = self.getSchema();
-    var rows = parseData(pasteValue, mimeType);
+
+    self.selectedRows = [];
+    self.selectedColumns = [];
+
+    const rows = parseData(pasteValue, mimeType);
+    const columnsLength = rows[0].length;
 
     // selected cell. This mimics Excel's paste functionality, and works
     // as a poor-man's fill-down.
-    if (rows.length === 1 && rows[0].length === 1) {
+    if (
+      rows.length === 1 &&
+      columnsLength === 1 &&
+      minRowsLength <= 1 &&
+      minColumnsLength <= 1
+    ) {
       var cellData = rows[0][0].value.map((item) => item.value).join();
 
       self.forEachSelectedCell(function (data, rowIndex, colName) {
         data[rowIndex][colName] = cellData;
       });
     } else {
-      var selections = [];
-      for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-        // Rows may have been moved by user, so get the actual row index
-        // (instead of the row index at which the row is rendered):
-        var realRowIndex = self.orders.rows[startRowIndex + rowIndex];
-        var cells = rows[rowIndex];
-
-        var existingRowData = self.viewData[realRowIndex];
-        var newRowData = Object.assign({}, existingRowData);
-
-        selections[realRowIndex] = [];
-
-        for (var colIndex = 0; colIndex < cells.length; colIndex++) {
-          var column = schema[startColIndex + colIndex];
-
-          if (!column) {
-            console.warn('Paste data exceeded grid bounds. Skipping.');
-            continue;
-          }
-
-          var columnName = column.name;
-          var cellData = cells[colIndex].value
-            .map((item) => item.value)
-            .join('');
-
-          if (cellData === undefined || cellData === null) {
-            newRowData[columnName] = existingRowData[columnName];
-            continue;
-          }
-
-          selections[realRowIndex].push(startColIndex + colIndex);
-
-          newRowData[columnName] = cellData;
-        }
-
-        self.originalData[self.boundRowIndexMap.get(realRowIndex)] = newRowData;
-        // Update view date here to avoid a full refresh of `viewData`.
-        // To stay in line with Excel and Google Sheet behaviour,
-        // don't perform a full refresh (and filter/sort results)
-        // as this would make any pasted values disappear and/or suddenly change position.
-        self.viewData[realRowIndex] = newRowData;
+      let direction = null;
+
+      if (minRowsLength > rows.length && minColumnsLength > columnsLength) {
+        direction = 'both';
+      } else if (minRowsLength > rows.length) {
+        direction = 'vertical';
+      } else if (minColumnsLength > columnsLength) {
+        direction = 'horizontal';
       }
-      self.selections = selections;
+
+      self.insert({
+        rows: rows,
+        startRowIndex: startRowIndex,
+        startColumnIndex: startColIndex,
+        minRowsLength: minRowsLength,
+        minColumnsLength: minColumnsLength,
+        reverseRows: false,
+        reverseColumns: false,
+        clearSelections: true,
+        alwaysFilling: false,
+        direction: direction,
+      });
     }
 
     // selections is a sparse array, so we condense:
@@ -1939,6 +2071,165 @@ export default function (self) {
 
     return rows.length;
   };
+  self.insert = function ({
+    rows = [],
+    startRowIndex = 0,
+    startColumnIndex = 0,
+    minRowsLength = 0,
+    minColumnsLength = 0,
+    reverseRows = false,
+    reverseColumns = false,
+    clearSelections = false,
+    alwaysFilling = false,
+    direction = 'both',
+  }) {
+    var schema = self.getSchema();
+    const rowsLength = Math.max(rows.length, minRowsLength);
+    const fillCellCallback = self.fillCellCallback;
+    const selections = clearSelections ? [] : self.selections;
+    const filledCells = [];
+
+    for (
+      let rowPosReal = 0, rowDataPos = 0;
+      rowPosReal < rowsLength;
+      rowPosReal++, rowDataPos++
+    ) {
+      if (rowDataPos >= rows.length) {
+        rowDataPos = 0;
+      }
+
+      const fillingRow = rowPosReal >= rows.length;
+      const rowPosition = reverseRows
+        ? rowsLength - rowPosReal - 1
+        : rowPosReal;
+      // Rows may have been moved by user, so get the actual row index
+      // (instead of the row index at which the row is rendered):
+      var realRowIndex = self.orders.rows[startRowIndex + rowPosition];
+      var cells = rows[rowDataPos];
+      const cellsLength = Math.max(cells.length, minColumnsLength);
+
+      var existingRowData = self.viewData[realRowIndex];
+      var newRowData = Object.assign({}, existingRowData);
+      const fillArgs = fillCellCallback
+        ? {
+            rows: rows,
+            direction: direction,
+            rowData: newRowData,
+            existingRowData: existingRowData,
+            rowIndex: realRowIndex,
+            rowOffset: rowDataPos,
+            cells: cells,
+            reversed: direction === 'horizontal' ? reverseColumns : reverseRows,
+            isFillingRow: fillingRow || alwaysFilling,
+            fillingRowPosition: alwaysFilling
+              ? rowPosReal
+              : fillingRow
+              ? rowPosReal - rows.length
+              : -1,
+            fillingRowLength: alwaysFilling
+              ? rowsLength
+              : fillingRow
+              ? rowsLength - rows.length
+              : -1,
+          }
+        : undefined;
+
+      self.selectedRows.push(realRowIndex);
+
+      if (selections[realRowIndex] === undefined) {
+        selections[realRowIndex] = [];
+      }
+
+      for (
+        var colPosReal = 0, cellDataPos = 0;
+        colPosReal < cellsLength;
+        colPosReal++, cellDataPos++
+      ) {
+        if (cellDataPos >= cells.length) {
+          cellDataPos = 0;
+        }
+
+        const fillingColumn = colPosReal >= cells.length;
+        const colPosition = reverseColumns
+          ? cellsLength - colPosReal - 1
+          : colPosReal;
+        const columnIndex = startColumnIndex + colPosition;
+        var column = schema[columnIndex];
+
+        if (!column) {
+          console.warn('Paste data exceeded grid bounds. Skipping.');
+          continue;
+        }
+
+        var columnName = column.name;
+        var cellData = cells[cellDataPos];
+        if (cellData && cellData.value) {
+          cellData = cellData.value.map((item) => item.value).join('');
+        }
+
+        const existingCellData = existingRowData[columnName];
+
+        if (
+          fillCellCallback &&
+          (fillingColumn || fillingRow || alwaysFilling)
+        ) {
+          newRowData[columnName] = fillCellCallback({
+            ...fillArgs,
+            column: column,
+            columnIndex: columnIndex,
+            columnOffset: cellDataPos,
+            newCellData: cellData,
+            existingCellData: existingCellData,
+            isFillingColumn: fillingColumn || alwaysFilling,
+            fillingColumnPosition: alwaysFilling
+              ? colPosReal
+              : fillingColumn
+              ? colPosReal - cells.length
+              : -1,
+            fillingColumnLength: alwaysFilling
+              ? cellsLength
+              : fillingColumn
+              ? cellsLength - cells.length
+              : -1,
+          });
+        } else {
+          newRowData[columnName] =
+            cellData === undefined || cellData === null
+              ? existingCellData
+              : cellData;
+        }
+
+        selections[realRowIndex].push(columnIndex);
+
+        if (alwaysFilling || fillingRow || fillingColumn) {
+          filledCells.push([
+            realRowIndex,
+            columnIndex,
+            self.getBoundRowIndexFromViewRowIndex(realRowIndex),
+            self.getBoundColumnIndexFromViewColumnIndex(columnIndex),
+          ]);
+        }
+
+        if (self.selectedColumns.indexOf(columnIndex) === -1)
+          self.selectedColumns.push(columnIndex);
+      }
+
+      self.originalData[self.boundRowIndexMap.get(realRowIndex)] = newRowData;
+      // Update view date here to avoid a full refresh of `viewData`.
+      // To stay in line with Excel and Google Sheet behaviour,
+      // don't perform a full refresh (and filter/sort results)
+      // as this would make any pasted values disappear and/or suddenly change position.
+      self.viewData[realRowIndex] = newRowData;
+    }
+
+    self.selections = selections;
+
+    if (filledCells.length > 0 || alwaysFilling) {
+      self.dispatchEvent('afterfill', {
+        filledCells: filledCells,
+      });
+    }
+  };
   self.getNextVisibleColumnIndex = function (visibleColumnIndex) {
     var x,
       s = self.getVisibleSchema();
@@ -1959,6 +2250,27 @@ export default function (self) {
     }
     return -1;
   };
+  self.getSelectionIndex = function () {
+    for (
+      let rowIndex = 0, len = self.selections.length;
+      rowIndex < len;
+      rowIndex++
+    ) {
+      const row = self.selections[rowIndex];
+      if (row) {
+        if (row[0] === undefined) break;
+
+        return {
+          row: rowIndex,
+          column: row[0] < 0 ? row[1] : row[0],
+          rowLength: len - rowIndex,
+          columnLength: row.length - (row[0] < 0 ? 1 : 0),
+        };
+      }
+    }
+
+    return null;
+  };
   self.paste = function (event) {
     if (!self.attributes.editable) {
       return;
@@ -1995,28 +2307,24 @@ export default function (self) {
       return;
     }
 
-    var itemToPaste = pasteableItems[0];
+    const selectionIndex = self.getSelectionIndex();
+    if (!selectionIndex) return;
 
-    let startCell = [];
-    for (
-      let rowIndex = 0, len = self.selections.length;
-      rowIndex < len;
-      rowIndex++
-    ) {
-      const row = self.selections[rowIndex];
-      if (row) {
-        if (row[0] === undefined) return;
-        startCell = [rowIndex, row[0] < 0 ? row[1] : row[0]];
-        break;
-      }
-    }
+    var itemToPaste = pasteableItems[0];
 
     // itemToPaste is cleared once accessed (getData or getAsString),
     // so we need to store the type here, before reading its value:
     var pasteType = itemToPaste.type;
 
     itemToPaste.getAsString(function (pasteValue) {
-      self.pasteData(pasteValue, pasteType, startCell[0], startCell[1]);
+      self.pasteData(
+        pasteValue,
+        pasteType,
+        selectionIndex.row,
+        selectionIndex.column,
+        selectionIndex.rowLength,
+        selectionIndex.columnLength,
+      );
 
       self.draw();
     });
@@ -2056,5 +2364,186 @@ export default function (self) {
 
     event.preventDefault();
   };
+  self.selectionHandleMove = function (e) {
+    if (!self.movingSelectionHandle) {
+      return;
+    }
+
+    const clippingRect = self.getClippingRect(e);
+    const rowIndex = self.currentCell.rowIndex;
+    const columnIndex = self.currentCell.columnIndex;
+    const isInSelectionBounds =
+      rowIndex >= -1 &&
+      columnIndex >= -1 &&
+      self.fillOverlay.selection.left <= columnIndex &&
+      self.fillOverlay.selection.right >= columnIndex &&
+      self.fillOverlay.selection.top <= rowIndex &&
+      self.fillOverlay.selection.bottom >= rowIndex;
+
+    self.fillOverlay.minX = clippingRect.x;
+    self.fillOverlay.minY = clippingRect.y;
+    self.fillOverlay.x = Math.max(clippingRect.x, e.clientX);
+    self.fillOverlay.y = Math.max(clippingRect.y, e.clientY);
+
+    // If we are in the selection bounds, allow user to change directions.
+    if (isInSelectionBounds) {
+      self.fillOverlay.lastInBoundsLocation = {
+        x: e.clientX,
+        y: e.clientY,
+      };
+    } else if (
+      self.fillOverlay.lastInBoundsLocation ||
+      !self.fillOverlay.direction
+    ) {
+      const lastInBoundsLocation = self.fillOverlay.lastInBoundsLocation;
+      self.fillOverlay.lastInBoundsLocation = undefined;
+
+      const x = lastInBoundsLocation
+        ? lastInBoundsLocation.x
+        : self.fillOverlay.handle.x;
+      const y = lastInBoundsLocation
+        ? lastInBoundsLocation.y
+        : self.fillOverlay.handle.y;
+      const dx = Math.abs(e.clientX - x);
+      const dy = Math.abs(e.clientY - y);
+
+      if (dx > 5 || dy > 5) {
+        self.fillOverlay.direction = dx > dy ? 'x' : 'y';
+      }
+    }
+
+    if (rowIndex >= 0) {
+      self.fillOverlay.rowIndex = rowIndex;
+    }
+    if (columnIndex >= 0) {
+      self.fillOverlay.columnIndex = columnIndex;
+      if (rowIndex === -1 && self.visibleRows.length) {
+        self.fillOverlay.rowIndex = self.visibleRows[0];
+      }
+    }
+
+    if (rowIndex >= -1 && columnIndex >= -1) {
+      self.fillOverlay.snap = self.currentCell;
+    } else {
+      self.fillOverlay.snap = undefined;
+    }
+  };
+  self.stopSelectionHandleMove = function (e) {
+    if (!self.fillOverlay.handle) {
+      return false;
+    }
+
+    self.ignoreNextClick = true;
+
+    window.removeEventListener('mousemove', self.selectionHandleMove, false);
+    window.removeEventListener('mouseup', self.stopSelectionHandleMove, false);
+
+    const overlay = self.fillOverlay;
+    const selectionIndex = self.getSelectionIndex();
+    const bounds = overlay.selection;
+    if (!selectionIndex) return;
+
+    self.movingSelectionHandle = undefined;
+    self.fillOverlay = {};
+
+    if (overlay.rowIndex >= 0 && overlay.columnIndex >= 0) {
+      const boundsOld = { ...bounds };
+      const isVertical = overlay.direction === 'y';
+      const isHorizontal = overlay.direction === 'x';
+
+      let startRow,
+        rowLength,
+        startColumn,
+        columnLength,
+        reverseVertically = false,
+        reverseHorizontally = false;
+
+      if (isVertical) {
+        if (overlay.rowIndex < bounds.top) {
+          bounds.top = overlay.rowIndex;
+          reverseVertically = true;
+        } else if (overlay.rowIndex > bounds.bottom) {
+          bounds.bottom = overlay.rowIndex;
+        }
+
+        startRow =
+          bounds.top < boundsOld.top ? bounds.top : boundsOld.bottom + 1;
+        rowLength =
+          bounds.top < boundsOld.top
+            ? boundsOld.top - bounds.top
+            : bounds.bottom - boundsOld.bottom;
+        startColumn = selectionIndex.column;
+        columnLength = selectionIndex.columnLength;
+      } else if (isHorizontal) {
+        if (overlay.columnIndex < bounds.left) {
+          bounds.left = overlay.columnIndex;
+          reverseHorizontally = true;
+        } else if (overlay.columnIndex > bounds.right) {
+          bounds.right = overlay.columnIndex;
+        }
+
+        startColumn =
+          bounds.left < boundsOld.left ? bounds.left : boundsOld.right + 1;
+        columnLength =
+          bounds.left < boundsOld.left
+            ? boundsOld.left - bounds.left
+            : bounds.right - boundsOld.right;
+        startRow = selectionIndex.row;
+        rowLength = selectionIndex.rowLength;
+      }
+
+      if (
+        bounds.left <= bounds.right &&
+        bounds.top <= bounds.bottom &&
+        (bounds.left < boundsOld.left ||
+          bounds.top < boundsOld.top ||
+          bounds.right > boundsOld.right ||
+          bounds.bottom > boundsOld.bottom)
+      ) {
+        const schema = self.getSchema();
+        const rows = [];
+
+        for (
+          let rowIndex = 0;
+          rowIndex < Math.min(rowLength, selectionIndex.rowLength);
+          rowIndex++
+        ) {
+          const rowData = self.viewData[selectionIndex.row + rowIndex];
+
+          rows[rowIndex] = [];
+
+          for (
+            let columnIndex = 0;
+            columnIndex < Math.min(columnLength, selectionIndex.columnLength);
+            columnIndex++
+          ) {
+            const column = schema[selectionIndex.column + columnIndex];
+            if (!column) continue;
+
+            const cellData = rowData[column.name];
+
+            rows[rowIndex][columnIndex] = cellData;
+          }
+        }
+
+        self.insert({
+          rows: rows,
+          startRowIndex: startRow,
+          startColumnIndex: startColumn,
+          minRowsLength: rowLength,
+          minColumnsLength: columnLength,
+          reverseRows: reverseVertically,
+          reverseColumns: reverseHorizontally,
+          clearSelections: false,
+          alwaysFilling: true,
+          direction: isHorizontal ? 'horizontal' : 'vertical',
+        });
+
+        self.draw();
+      }
+    }
+
+    return true;
+  };
   return;
 }