canvas-datagrid 0.4.5 → 0.4.7

package/lib/events/index.js

@@ -702,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);
               }
             }
           }
@@ -740,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;
           }
@@ -832,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();
@@ -914,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'
@@ -947,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;
@@ -958,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 &&
@@ -975,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;
     }
@@ -1006,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.
@@ -1021,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();
@@ -1194,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 (
@@ -1216,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,
@@ -1225,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();
@@ -1497,9 +1499,7 @@ export default function (self) {
         !(self.dragMode == 'row-reorder' && self.isMultiRowsSelected) &&
         !(self.currentCell.hovered && self.hovers.onFilterButton)
       ) {
-        self.selections = [];
-        self.selectedRows = [];
-        self.selectedColumns = [];
+        self.clearSelections();
       }
     }
     if (self.dragStartObject.isGrid) {
@@ -1569,7 +1569,7 @@ export default function (self) {
     }
     if (move) {
       self.draggingItem = self.dragItem;
-      self.movingSelection = self.selections.concat([]);
+      self.movingSelection = self.cloneSelections();
       self.dragging = self.dragStartObject;
       if (
         self.dispatchEvent('beginmove', {
@@ -1777,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',
@@ -1786,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) {
@@ -1853,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);
     }
@@ -1952,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;
@@ -2005,9 +1937,6 @@ export default function (self) {
       return;
     }
 
-    self.selectedRows = [];
-    self.selectedColumns = [];
-
     const rows = parseData(pasteValue, mimeType);
     const columnsLength = rows[0].length;
 
@@ -2050,19 +1979,14 @@ export default function (self) {
     }
 
     // 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', {
@@ -2086,9 +2010,10 @@ export default function (self) {
     var schema = self.getSchema();
     const rowsLength = Math.max(rows.length, minRowsLength);
     const fillCellCallback = self.fillCellCallback;
-    const selections = clearSelections ? [] : self.selections;
     const filledCells = [];
 
+    if (clearSelections) self.selections = [];
+
     for (
       let rowPosReal = 0, rowDataPos = 0;
       rowPosReal < rowsLength;
@@ -2134,12 +2059,6 @@ export default function (self) {
           }
         : undefined;
 
-      self.selectedRows.push(realRowIndex);
-
-      if (selections[realRowIndex] === undefined) {
-        selections[realRowIndex] = [];
-      }
-
       for (
         var colPosReal = 0, cellDataPos = 0;
         colPosReal < cellsLength;
@@ -2154,7 +2073,7 @@ export default function (self) {
           ? cellsLength - colPosReal - 1
           : colPosReal;
         const columnIndex = startColumnIndex + colPosition;
-        var column = schema[columnIndex];
+        var column = schema[self.orders.columns[columnIndex]];
 
         if (!column) {
           console.warn('Paste data exceeded grid bounds. Skipping.');
@@ -2199,7 +2118,10 @@ export default function (self) {
               : cellData;
         }
 
-        selections[realRowIndex].push(columnIndex);
+        self.selectCell(
+          { rowIndex: realRowIndex, viewColumnIndex: columnIndex },
+          true,
+        );
 
         if (alwaysFilling || fillingRow || fillingColumn) {
           filledCells.push([
@@ -2209,9 +2131,6 @@ export default function (self) {
             self.getBoundColumnIndexFromViewColumnIndex(columnIndex),
           ]);
         }
-
-        if (self.selectedColumns.indexOf(columnIndex) === -1)
-          self.selectedColumns.push(columnIndex);
       }
 
       self.originalData[self.boundRowIndexMap.get(realRowIndex)] = newRowData;
@@ -2222,8 +2141,6 @@ export default function (self) {
       self.viewData[realRowIndex] = newRowData;
     }
 
-    self.selections = selections;
-
     if (filledCells.length > 0 || alwaysFilling) {
       self.dispatchEvent('afterfill', {
         filledCells: filledCells,
@@ -2251,19 +2168,18 @@ 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];
+    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: len - rowIndex,
+          rowLength: bottom - rowIndex + 1,
           columnLength: row.length - (row[0] < 0 ? 1 : 0),
         };
       }
@@ -2342,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());