canvas-datagrid 0.4.4 → 0.4.6

package/lib/events/index.js

@@ -493,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);
@@ -700,32 +702,9 @@ export default function (self) {
               if (self.hovers.onFilterButton) return;
               if (self.hovers.onCellTreeIcon) return;
               if (!self.dragAddToSelection && cell.rowIndex !== undefined) {
-                if (
-                  self.selections[cell.rowIndex] &&
-                  self.selections[cell.rowIndex].indexOf(cell.columnIndex) !==
-                    -1
-                ) {
-                  self.selections[cell.rowIndex].splice(
-                    self.selections[cell.rowIndex].indexOf(cell.columnIndex),
-                    1,
-                  );
-                }
+                if (self.isCellSelected(cell)) self.unselectCell(cell);
               } else {
-                self.selections[cell.rowIndex] =
-                  self.selections[cell.rowIndex] || [];
-                if (
-                  self.selections[cell.rowIndex].indexOf(cell.columnIndex) ===
-                  -1
-                ) {
-                  self.selections[cell.rowIndex].push(cell.columnIndex);
-                  var event = {
-                    selections: self.selections,
-                    selectedData: self.getSelectedData(),
-                    selectedCells: self.getSelectedCells(),
-                    selectionBounds: self.getSelectionBounds(),
-                  };
-                  self.dispatchEvent('selectionchanged', event);
-                }
+                if (!self.isCellSelected(cell)) self.selectCell(cell);
               }
             }
           }
@@ -738,11 +717,8 @@ export default function (self) {
             dragBounds.right !== self.selectionBounds.right) &&
           !ctrl
         ) {
-          if (!(cell.hovered && self.hovers.onFilterButton)) {
-            self.selections = [];
-            self.selectedRows = [];
-            self.selectedColumns = [];
-          }
+          if (!(cell.hovered && self.hovers.onFilterButton))
+            self.clearSelections();
           if (dragBounds.top === -1) {
             dragBounds.top = 0;
           }
@@ -762,10 +738,33 @@ export default function (self) {
             }
           }
         }
+      } 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);
@@ -807,17 +806,7 @@ export default function (self) {
       if (startingBounds === JSON.stringify(sb)) {
         return;
       }
-      ev = {
-        selections: self.selections,
-        selectionBounds: self.getSelectionBounds(),
-        selectedCells: self.getSelectedCells(),
-      };
-      Object.defineProperty(ev, 'selectedData', {
-        get: function () {
-          return self.getSelectedData();
-        },
-      });
-      self.dispatchEvent('selectionchanged', ev);
+      self.dispatchEvent('selectionchanged', self.getContextOfSelectionEvent());
     }
     if (self.input) {
       self.endEdit();
@@ -889,7 +878,6 @@ export default function (self) {
           return;
         }
       }
-      self.selections[i.rowIndex] = self.selections[i.rowIndex] || [];
       if (
         self.attributes.selectionMode === 'row' ||
         self.currentCell.style === 'rowHeaderCell'
@@ -922,6 +910,7 @@ export default function (self) {
     self.draw(true);
   };
   self.dragResizeColumn = function (e) {
+    const resizingColumn = self.dragMode === 'ew-resize';
     var pos, x, y;
     pos = self.getLayerPos(e);
     x = self.resizingStartingWidth + pos.x - self.dragStart.x;
@@ -933,14 +922,31 @@ export default function (self) {
       y = self.style.minRowHeight;
     }
     if (
-      self.dispatchEvent('resizecolumn', {
+      self.dispatchEvent(resizingColumn ? 'resizecolumn' : 'resizerow', {
         x: x,
         y: y,
+        width: x,
+        height: y,
+        columnIndex: resizingColumn ? self.draggingItem.columnIndex : undefined,
+        rowIndex: resizingColumn ? undefined : self.draggingItem.rowIndex,
         draggingItem: self.draggingItem,
       })
     ) {
       return false;
     }
+    if (self.attributes.resizeAfterDragged) {
+      self.pendingDragResize = {
+        item: self.draggingItem,
+        width: x,
+        height: y,
+        x: e.clientX,
+        y: e.clientY,
+      };
+    } else {
+      self.dragResizeApply(self.draggingItem, x, y);
+    }
+  };
+  self.dragResizeApply = function (draggingItem, width, height) {
     if (
       self.scrollBox.scrollLeft >
         self.scrollBox.scrollWidth - self.attributes.resizeScrollZone &&
@@ -950,29 +956,27 @@ export default function (self) {
     }
     if (self.dragMode === 'ew-resize') {
       self.sizes.columns[
-        self.draggingItem.header.style === 'rowHeaderCell'
+        draggingItem.header.style === 'rowHeaderCell'
           ? 'cornerCell'
-          : self.draggingItem.sortColumnIndex
-      ] = x;
+          : draggingItem.sortColumnIndex
+      ] = width;
       if (
-        ['rowHeaderCell', 'cornerCell'].indexOf(
-          self.draggingItem.header.style,
-        ) !== -1
+        ['rowHeaderCell', 'cornerCell'].indexOf(draggingItem.header.style) !==
+        -1
       ) {
         self.resize(true);
       }
       self.resizeChildGrids();
       return;
-    }
-    if (self.dragMode === 'ns-resize') {
-      if (self.draggingItem.rowOpen) {
-        self.sizes.trees[self.draggingItem.rowIndex] = y;
+    } else if (self.dragMode === 'ns-resize') {
+      if (draggingItem.rowOpen) {
+        self.sizes.trees[draggingItem.rowIndex] = height;
       } else if (self.attributes.globalRowResize) {
-        self.style.cellHeight = y;
+        self.style.cellHeight = height;
       } else {
-        self.sizes.rows[self.draggingItem.rowIndex] = y;
+        self.sizes.rows[draggingItem.rowIndex] = height;
       }
-      self.dispatchEvent('resizerow', { row: y });
+      self.dispatchEvent('resizerow', { row: height });
       self.resizeChildGrids();
       return;
     }
@@ -981,6 +985,15 @@ export default function (self) {
   self.stopDragResize = function (event) {
     const pos = self.getLayerPos(event);
 
+    if (self.attributes.resizeAfterDragged) {
+      self.dragResizeApply(
+        self.pendingDragResize.item,
+        self.pendingDragResize.width,
+        self.pendingDragResize.height,
+      );
+      self.pendingDragResize = undefined;
+    }
+
     if (self.dragMode === 'ew-resize') {
       const hasMoved = !!(pos.x - self.dragStart.x);
       // Check that dragItem is selected or part of selection.
@@ -996,6 +1009,18 @@ export default function (self) {
         // If the column is selected, resize it to width plus any other selected columns.
         self.fitSelectedColumns(width);
       }
+    } else if (self.dragMode === 'ns-resize') {
+      // Do the above for rows.
+      const hasMoved = !!(pos.y - self.dragStart.y);
+      const dragItemIsSelected = self.isRowSelected(self.dragItem.rowIndex);
+
+      if (hasMoved && dragItemIsSelected) {
+        const height = Math.max(
+          self.resizingStartingHeight + pos.y - self.dragStart.y,
+          self.style.minRowHeight,
+        );
+        self.fitSelectedRows(height);
+      }
     }
 
     self.resize();
@@ -1169,17 +1194,16 @@ export default function (self) {
     }
   };
   self.stopDragReorder = function (e) {
-    var oIndex,
-      tIndex,
-      odata = [],
-      cr = {
-        'row-reorder': self.orders.rows,
-        'column-reorder': self.orders.columns,
-      },
-      i = {
-        'row-reorder': 'rowIndex',
-        'column-reorder': 'sortColumnIndex',
-      }[self.dragMode];
+    let originalIndex;
+    let targetIndex;
+    const orderLists = {
+      'row-reorder': self.orders.rows,
+      'column-reorder': self.orders.columns,
+    };
+    const indexName = {
+      'row-reorder': 'rowIndex',
+      'column-reorder': 'sortColumnIndex',
+    }[self.dragMode];
     window.removeEventListener('mousemove', self.dragReorder, false);
     window.removeEventListener('mouseup', self.stopDragReorder, false);
     if (
@@ -1191,7 +1215,7 @@ export default function (self) {
         (self.dragMode === 'row-reorder' &&
           self.reorderTarget.rowIndex > -1 &&
           self.reorderTarget.rowIndex < self.viewData.length)) &&
-      self.reorderObject[i] !== self.reorderTarget[i] &&
+      self.reorderObject[indexName] !== self.reorderTarget[indexName] &&
       !self.dispatchEvent('reorder', {
         NativeEvent: e,
         source: self.reorderObject,
@@ -1200,61 +1224,64 @@ export default function (self) {
       })
     ) {
       self.ignoreNextClick = true;
-      oIndex = cr[self.dragMode].indexOf(self.reorderObject[i]);
-      tIndex = cr[self.dragMode].indexOf(self.reorderTarget[i]);
+      originalIndex = orderLists[self.dragMode].indexOf(
+        self.reorderObject[indexName],
+      );
+      targetIndex = orderLists[self.dragMode].indexOf(
+        self.reorderTarget[indexName],
+      );
       if (self.dragMode === 'column-reorder') {
-        var sortColumnIndices = [];
-        var selectedColumnIndices = [];
-        if (self.selections[0]) {
-          oIndex = self.selections[0][0];
-          self.selections[0].forEach(function (value) {
+        /** Select column view indexes in the first row */
+        const selectedIndexes = self.getRowSelectionStates(0);
+        const sortColumnIndices = [];
+        const selectedColumnIndices = [];
+        if (selectedIndexes) {
+          originalIndex = selectedIndexes[0];
+          selectedIndexes.forEach(function (value) {
             sortColumnIndices.push(self.orders.columns[value]);
           });
         }
-        var deleteCount = sortColumnIndices.length;
+        const deleteCount = sortColumnIndices.length;
         if (
-          tIndex < oIndex ||
-          (tIndex > oIndex && Math.abs(tIndex - oIndex) >= deleteCount)
+          targetIndex < originalIndex ||
+          (targetIndex > originalIndex &&
+            Math.abs(targetIndex - originalIndex) >= 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]);
+          orderLists[self.dragMode].splice(originalIndex, deleteCount);
+          if (targetIndex > originalIndex)
+            targetIndex = targetIndex - (deleteCount - 1);
+
+          for (let i = 0; i < sortColumnIndices.length; i++) {
+            if (i === 0) self.activeCell.columnIndex = targetIndex;
+            selectedColumnIndices.push(targetIndex + i);
+            orderLists[self.dragMode].splice(
+              targetIndex + i,
+              0,
+              sortColumnIndices[i],
+            );
           }
 
-          self.orders.columns = cr[self.dragMode];
-          self.viewData.forEach(function (row, rowIndex) {
-            self.selections[rowIndex] = selectedColumnIndices;
-          });
+          self.orders.columns = orderLists[self.dragMode];
+          self.selectColumnViewIndexes(selectedColumnIndices);
         }
       } else {
-        var selectedRows = [];
-        self.selections.forEach(function (row, rowIndex) {
-          if (row) {
-            selectedRows.push(row);
-            odata.push(self.viewData[rowIndex]);
-          }
-        });
+        /** The original name of this variable is  `odata` */
+        const rowIndexes = self.getRowViewIndexesFromSelection();
+        const originalData = rowIndexes.map(
+          (rowIndex) => self.viewData[rowIndex],
+        );
         if (
-          tIndex < oIndex ||
-          (tIndex > oIndex && Math.abs(tIndex - oIndex) >= odata.length)
+          targetIndex < originalIndex ||
+          (targetIndex > originalIndex &&
+            Math.abs(targetIndex - originalIndex) >= originalData.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.viewData.splice(originalIndex, originalData.length);
+          if (targetIndex > originalIndex)
+            targetIndex = targetIndex - (originalData.length - 1);
+          self.activeCell.rowIndex = targetIndex;
+          for (let i = 0; i < originalData.length; i++)
+            self.viewData.splice(targetIndex + i, 0, originalData[i]);
+          self.moveSelection(0, targetIndex);
         }
       }
       self.resize();
@@ -1445,7 +1472,8 @@ 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 = {
@@ -1464,15 +1492,14 @@ 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 = [];
+        self.clearSelections();
       }
     }
     if (self.dragStartObject.isGrid) {
@@ -1523,9 +1550,26 @@ export default function (self) {
       }
       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([]);
+      self.movingSelection = self.cloneSelections();
       self.dragging = self.dragStartObject;
       if (
         self.dispatchEvent('beginmove', {
@@ -1733,7 +1777,7 @@ export default function (self) {
 
     // TODO - most likely some column order related bugs in key based selection
     // Arrows
-    var isArrowKey = [
+    const isArrowKey = [
       'ArrowLeft',
       'ArrowUp',
       'ArrowRight',
@@ -1742,63 +1786,12 @@ export default function (self) {
 
     // Shrinking and expanding selection using shift and arrow keys
     if (e.shiftKey && isArrowKey) {
-      const firstSelectedRowIndex = self.selections.findIndex((el) => !!el);
-      const firstSelectedRow = self.selections[firstSelectedRowIndex];
-      const firstSelectedColumnIndex = firstSelectedRow[0];
-      const lastSelectedColumn = firstSelectedRow[firstSelectedRow.length - 1];
-      const yAtTop = y === 0;
-      const yAtBottom = y === last;
-      const xAtLeft = x === 0;
-      const xAtRight = x === cols;
-
-      if (e.key === 'ArrowUp') {
-        if (y + 1 > firstSelectedRowIndex && !yAtTop) {
-          self.selections.pop();
-        } else if (y < firstSelectedRowIndex) {
-          self.selections[y] = self.selections[y] || [];
-          self.selections[y].push(x);
-        } else if (yAtTop && self.activeCell.rowIndex !== 0) {
-          self.selections.pop();
-        }
-      }
-
-      if (e.key === 'ArrowDown') {
-        if (y > firstSelectedRowIndex && y === self.selections.length) {
-          self.selections[y] = self.selections[y] || [];
-          self.selections[y].push(x);
-        } else if (y >= firstSelectedRowIndex && !yAtBottom) {
-          delete self.selections[y - 1];
-        } else if (yAtBottom && self.activeCell.rowIndex !== last) {
-          delete self.selections[y - 1];
-        }
-      }
-
-      for (const selection of self.selections) {
-        if (e.key === 'ArrowRight' && selection) {
-          if (x > lastSelectedColumn) {
-            selection.push(x);
-          } else if (x <= lastSelectedColumn && !xAtRight) {
-            selection.shift();
-          } else if (xAtRight && self.activeCell.columnIndex !== cols) {
-            selection.shift();
-          }
-        }
-
-        if (e.key === 'ArrowLeft' && selection) {
-          if (x < firstSelectedColumnIndex) {
-            selection.unshift(x);
-          } else if (x >= firstSelectedColumnIndex && !xAtLeft) {
-            selection.pop();
-          } else if (xAtLeft && self.activeCell.columnIndex !== 0) {
-            selection.pop();
-          }
-        }
-      }
-
-      self.selectionBounds = self.getSelectionBounds();
-      self.selectArea(undefined, ctrl);
-
-      self.draw(true);
+      const changed = self.shrinkOrExpandSelections(
+        { rowIndex: y, columnIndex: x },
+        e,
+        true,
+      );
+      if (changed) self.draw(true);
     }
 
     if (x !== self.activeCell.columnIndex || y !== self.activeCell.rowIndex) {
@@ -1809,25 +1802,8 @@ export default function (self) {
 
       self.setActiveCell(x, y);
       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);
-        ev = {
-          selectedData: self.getSelectedData(),
-          selections: self.selections,
-          selectionBounds: self.getSelectionBounds(),
-          selectedCells: self.getSelectedCells(),
-        };
-        Object.defineProperty(ev, 'selectedData', {
-          get: function () {
-            return self.getSelectedData();
-          },
-        });
-        self.dispatchEvent('selectionchanged', ev);
+        if (!ctrl) self.clearSelections();
+        self.selectCell({ rowIndex: y, viewColumnIndex: x });
       }
       self.draw(true);
     }
@@ -1908,7 +1884,7 @@ export default function (self) {
       deltaY = e.deltaY === undefined ? e.NativeEvent.deltaY : e.deltaY,
       deltaMode =
         e.deltaMode === undefined ? e.NativeEvent.deltaMode : e.deltaMode;
-    var e = e.NativeEvent || e;
+    if (e.NativeEvent) e = e.NativeEvent;
     if (wheeling) {
       ev.preventDefault(e);
       return;
@@ -1947,6 +1923,8 @@ export default function (self) {
     mimeType,
     startRowIndex,
     startColIndex,
+    minRowsLength = 0,
+    minColumnsLength = 0,
   ) {
     if (mimeType === 'text/html' && !isSupportedHtml(pasteValue)) {
       console.warn(
@@ -1958,82 +1936,57 @@ export default function (self) {
 
       return;
     }
-    var schema = self.getSchema();
-    var rows = parseData(pasteValue, mimeType);
+
+    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 = [];
-      self.selectedRows = [];
-      self.selectedColumns = [];
-      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] = [];
-        self.selectedRows.push(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;
-          if (self.selectedColumns.indexOf(startColIndex + colIndex) === -1)
-            self.selectedColumns.push(startColIndex + colIndex);
-        }
-
-        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:
-    var affectedCells = [];
-
-    self.selections.forEach(function (row, rowIndex) {
-      if (rowIndex === undefined) return;
-
-      row.forEach(function (columnIndex) {
-        affectedCells.push([
-          rowIndex,
-          columnIndex,
-          self.getBoundRowIndexFromViewRowIndex(rowIndex),
-          self.getBoundColumnIndexFromViewColumnIndex(columnIndex),
-        ]);
-      });
+    const affectedCells = [];
+    self.forEachSelectedCell((viewData, viewRowIndex, columnName, cell) => {
+      affectedCells.push([
+        viewRowIndex,
+        cell.viewColumnIndex,
+        cell.boundRowIndex,
+        cell.boundColumnIndex,
+      ]);
     });
 
     self.dispatchEvent('afterpaste', {
@@ -2042,6 +1995,158 @@ 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 filledCells = [];
+
+    if (clearSelections) self.selections = [];
+
+    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;
+
+      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;
+        }
+
+        self.selectCell(
+          { rowIndex: realRowIndex, viewColumnIndex: columnIndex },
+          true,
+        );
+
+        if (alwaysFilling || fillingRow || fillingColumn) {
+          filledCells.push([
+            realRowIndex,
+            columnIndex,
+            self.getBoundRowIndexFromViewRowIndex(realRowIndex),
+            self.getBoundColumnIndexFromViewColumnIndex(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;
+    }
+
+    if (filledCells.length > 0 || alwaysFilling) {
+      self.dispatchEvent('afterfill', {
+        filledCells: filledCells,
+      });
+    }
+  };
   self.getNextVisibleColumnIndex = function (visibleColumnIndex) {
     var x,
       s = self.getVisibleSchema();
@@ -2062,6 +2167,26 @@ export default function (self) {
     }
     return -1;
   };
+  self.getSelectionIndex = function () {
+    const bounds = self.getSelectionBounds(true);
+    if (!bounds) return;
+    const { top, bottom } = bounds;
+    for (let rowIndex = top; rowIndex <= bottom; rowIndex++) {
+      const row = self.getRowSelectionStates(rowIndex);
+      if (row) {
+        if (row[0] === undefined) break;
+
+        return {
+          row: rowIndex,
+          column: row[0] < 0 ? row[1] : row[0],
+          rowLength: bottom - rowIndex + 1,
+          columnLength: row.length - (row[0] < 0 ? 1 : 0),
+        };
+      }
+    }
+
+    return null;
+  };
   self.paste = function (event) {
     if (!self.attributes.editable) {
       return;
@@ -2098,28 +2223,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();
     });
@@ -2137,9 +2258,17 @@ export default function (self) {
     self.copySelectedCellsToClipboard(event.clipboardData);
 
     const affectedCells = self.clearSelectedCells();
+    const apiCompatibleCells = affectedCells.map((cell) => {
+      return [
+        cell.viewRowIndex,
+        cell.viewColumnIndex,
+        cell.boundRowIndex,
+        cell.boundColumnIndex,
+      ];
+    });
 
     self.dispatchEvent('aftercut', {
-      cells: affectedCells,
+      cells: apiCompatibleCells,
     });
 
     requestAnimationFrame(() => self.draw());
@@ -2159,5 +2288,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;
 }