canvas-datagrid 0.4.4 → 0.4.5

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);
@@ -762,10 +764,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);
@@ -1445,7 +1470,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,7 +1490,8 @@ export default function (self) {
       !self.currentCell.isColumnHeader &&
       !move &&
       !freeze &&
-      !resize
+      !resize &&
+      !selectionHandleMove
     ) {
       if (
         !(self.dragMode == 'row-reorder' && self.isMultiRowsSelected) &&
@@ -1523,6 +1550,23 @@ 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([]);
@@ -1947,6 +1991,8 @@ export default function (self) {
     mimeType,
     startRowIndex,
     startColIndex,
+    minRowsLength = 0,
+    minColumnsLength = 0,
   ) {
     if (mimeType === 'text/html' && !isSupportedHtml(pasteValue)) {
       console.warn(
@@ -1958,66 +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 = [];
-      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:
@@ -2042,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();
@@ -2062,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;
@@ -2098,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();
     });
@@ -2159,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;
 }

package/lib/intf.js

@@ -92,6 +92,7 @@ export default function (self, ctor) {
   self.selections = [];
   self.selectedRows = [];
   self.selectedColumns = [];
+  self.fillOverlay = {};
   self.filterable = {
     rows: [],
     columns: [],
@@ -2057,6 +2058,14 @@ export default function (self, ctor) {
       self.cellGridAttributes = value;
     },
   });
+  Object.defineProperty(self.intf, 'fillCellCallback', {
+    get: function () {
+      return self.fillCellCallback;
+    },
+    set: function setFillCellCallback(value) {
+      self.fillCellCallback = value;
+    },
+  });
   Object.defineProperty(self.intf, 'ctx', {
     get: function () {
       return self.ctx;

package/lib/main.js

@@ -103,6 +103,7 @@ export default function canvasDatagrid(args) {
       'filters',
       'treeGridAttributes',
       'cellGridAttributes',
+      'fillCellCallback',
       'data',
       'schema',
     ];

package/lib/publicMethods.js

@@ -782,8 +782,8 @@ export default function (self) {
    * @memberof canvasDatagrid
    * @name hideColumns
    * @method
-   * @param {number} beginColumnOrderIndex
-   * @param {number} [endColumnOrderIndex]
+   * @param {number} beginColumnOrderIndex The begin column order index
+   * @param {number} [endColumnOrderIndex] The end column order index
    */
   self.hideColumns = function (beginColumnOrderIndex, endColumnOrderIndex) {
     const schema = self.getSchema();
@@ -823,8 +823,8 @@ export default function (self) {
    * @memberof canvasDatagrid
    * @name unhideColumns
    * @method
-   * @param {number} beginColumnOrderIndex
-   * @param {number} [endColumnOrderIndex]
+   * @param {number} beginColumnOrderIndex The begin column order index
+   * @param {number} [endColumnOrderIndex] The end column order index
    */
   self.unhideColumns = function (beginColumnOrderIndex, endColumnOrderIndex) {
     const orders = self.orders.columns;
@@ -849,8 +849,8 @@ export default function (self) {
    * @memberof canvasDatagrid
    * @name hideRows
    * @method
-   * @param {number} beginRowIndex
-   * @param {number} endRowIndex
+   * @param {number} beginRowIndex The begin row index
+   * @param {number} endRowIndex The end row index
    */
   self.hideRows = function (beginRowIndex, endRowIndex) {
     if (
@@ -863,8 +863,8 @@ export default function (self) {
    * @memberof canvasDatagrid
    * @name unhideRows
    * @method
-   * @param {number} beginRowIndex
-   * @param {number} endRowIndex
+   * @param {number} beginRowIndex The begin row index
+   * @param {number} endRowIndex The end row index
    */
   self.unhideRows = function (beginRowIndex, endRowIndex) {
     self.hiddenRowRanges = self.hiddenRowRanges.filter(