canvas-datagrid 0.3.18 → 0.3.22

package/lib/events/index.js

@@ -254,7 +254,13 @@ export default function (self) {
     setScrollBoxSize();
     self.scrollBox.scrollWidth = dataWidth - self.scrollBox.width;
     self.scrollBox.scrollHeight = dataHeight - self.scrollBox.height;
-    self.scrollBox.widthBoxRatio = self.scrollBox.width / dataWidth;
+    if (self.frozenColumn > 0) {
+      self.scrollBox.widthBoxRatio =
+        (self.scrollBox.width - self.scrollCache.x[self.frozenColumn - 1]) /
+        dataWidth;
+    } else {
+      self.scrollBox.widthBoxRatio = self.scrollBox.width / dataWidth;
+    }
     self.scrollBox.scrollBoxWidth =
       self.scrollBox.width * self.scrollBox.widthBoxRatio -
       self.style.scrollBarWidth -
@@ -266,7 +272,10 @@ export default function (self) {
     // the dragged mouse.
     // https://github.com/TonyGermaneri/canvas-datagrid/issues/97
     self.scrollBox.heightBoxRatio =
-      (self.scrollBox.height - columnHeaderCellHeight) / dataHeight;
+      (self.scrollBox.height -
+        columnHeaderCellHeight -
+        self.scrollCache.y[self.frozenRow]) /
+      dataHeight;
     self.scrollBox.scrollBoxHeight =
       self.scrollBox.height * self.scrollBox.heightBoxRatio -
       self.style.scrollBarWidth -
@@ -296,12 +305,13 @@ export default function (self) {
       self.style.scrollBarWidth -
       self.style.scrollBarBorderWidth -
       d;
-    v.y += columnHeaderCellHeight;
+    v.y += columnHeaderCellHeight + self.scrollCache.y[self.frozenRow];
     v.width = self.style.scrollBarWidth + self.style.scrollBarBorderWidth + d;
     v.height =
       self.height - columnHeaderCellHeight - self.style.scrollBarWidth - d - m;
     // vertical box
     vb.x = v.x + self.style.scrollBarBoxMargin;
+    vb.y += self.scrollCache.y[self.frozenRow];
     vb.width = self.style.scrollBarBoxWidth;
     vb.height = self.scrollBox.scrollBoxHeight;
     // corner
@@ -458,7 +468,26 @@ export default function (self) {
         self.hovers = {
           rowIndex: cell.rowIndex,
           columnIndex: cell.columnIndex,
+          onFilterButton: false,
         };
+        if (
+          cell.isFilterable &&
+          x >
+            cell.x +
+              cell.width +
+              self.canvasOffsetLeft -
+              self.style.filterButtonWidth &&
+          x < cell.x + cell.width + self.canvasOffsetLeft &&
+          y >
+            cell.y +
+              cell.height +
+              self.canvasOffsetTop -
+              self.style.filterButtonHeight &&
+          y < cell.y + cell.height + self.canvasOffsetTop
+        ) {
+          self.hovers.onFilterButton = true;
+          self.draw();
+        }
       }
       if (self.selecting || self.reorderObject) {
         delta = {
@@ -502,30 +531,57 @@ export default function (self) {
           ) {
             self.selectRow(cell.rowIndex, ctrl, null, true);
           } else if (self.attributes.selectionMode !== 'row') {
-            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 (cell.hovered && self.hovers.onFilterButton) {
+              if (cell.openedFilter) {
+                cell.openedFilter = false;
+                self.selectedFilterButton = {
+                  columnIndex: -1,
+                  rowIndex: -1,
+                };
+              } else {
+                self.selectedFilterButton.rowIndex = cell.rowIndex;
+                self.selectedFilterButton.columnIndex = cell.columnIndex;
+                self.contextmenuEvent(e, {
+                  x: cell.x + cell.width - self.style.filterButtonWidth,
+                  y: cell.y + cell.height,
+                  rect: { left: 0, top: 0 },
+                });
               }
+              self.draw();
+              return;
             } 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);
-                const event = {
-                  selections: self.selections,
-                  selectedData: self.getSelectedData(),
-                  selectedCells: self.getSelectedCells(),
-                  selectionBounds: self.getSelectionBounds(),
-                };
-                self.dispatchEvent('selectionchanged', event);
+              self.selectedFilterButton = {
+                columnIndex: -1,
+                rowIndex: -1,
+              };
+              if (self.hovers.onFilterButton) 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,
+                  );
+                }
+              } 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);
+                }
               }
             }
           }
@@ -538,14 +594,21 @@ export default function (self) {
             dragBounds.right !== self.selectionBounds.right) &&
           !ctrl
         ) {
-          self.selections = [];
+          if (!(cell.hovered && self.hovers.onFilterButton)) {
+            self.selections = [];
+          }
+          if (dragBounds.top === -1) {
+            dragBounds.top = 0;
+          }
           sBounds = dragBounds;
           if (self.attributes.selectionMode === 'row') {
             for (i = sBounds.top; i <= sBounds.bottom; i += 1) {
               self.selectRow(i, true, null, true);
             }
-          } else if (dragBounds.top !== -1) {
+          } else {
             self.selectArea(sBounds, true);
+            if (sBounds.left == -1 && sBounds.top !== sBounds.bottom)
+              self.isMultiRowsSelected = true;
           }
         }
 
@@ -620,7 +683,9 @@ export default function (self) {
         -1 &&
       !ctrl
     ) {
-      self.setActiveCell(i.columnIndex, i.rowIndex);
+      if (!self.hovers.onFilterButton) {
+        self.setActiveCell(i.columnIndex, i.rowIndex);
+      }
     }
     if (self.currentCell.context === 'cell') {
       if (self.currentCell.style === 'cornerCell') {
@@ -641,11 +706,6 @@ export default function (self) {
           checkSelectionChange();
           return;
         }
-        if (self.attributes.columnHeaderClickBehavior === 'select') {
-          self.selectColumn(i.header.index, ctrl, e.shiftKey);
-          self.draw();
-          return;
-        }
       }
       self.selections[i.rowIndex] = self.selections[i.rowIndex] || [];
       if (
@@ -737,7 +797,32 @@ export default function (self) {
     }
     self.ellipsisCache = {};
   };
-  self.stopDragResize = function () {
+  self.stopDragResize = function (e) {
+    const pos = self.getLayerPos(e);
+    const hasMoved = !!(pos.x - self.dragStart.x);
+    const width = self.resizingStartingWidth + pos.x - self.dragStart.x;
+
+    if (self.dragMode === 'ew-resize') {
+      const selectedColumns = self.selections[0];
+      const dragItemIsSelected = self.isColumnSelected(
+        self.dragItem.columnIndex,
+      );
+
+      if (dragItemIsSelected)
+        for (const selectedColumnIndex of selectedColumns) {
+          const boundColumnIndex = self.getBoundColumnIndexFromViewColumnIndex(
+            selectedColumnIndex,
+          );
+
+          if (
+            hasMoved &&
+            dragItemIsSelected &&
+            self.isColumnSelected(selectedColumnIndex)
+          )
+            self.sizes.columns[boundColumnIndex] = width;
+        }
+    }
+
     self.resize();
     document.body.removeEventListener(
       'mousemove',
@@ -868,6 +953,14 @@ export default function (self) {
     if (!self.attributes.allowRowReordering && rowReorder) {
       return;
     }
+    if ((e.ctrlKey || e.metaKey || e.shiftKey) && self.reorderObject) {
+      if (
+        self.dragMode === 'column-reorder' &&
+        !self.isMultiColumnsSelected(self.draggingItem.header.index)
+      ) {
+        self.selectColumn(self.draggingItem.header.index, false, false);
+      }
+    }
     if (
       self.dispatchEvent('reordering', {
         NativeEvent: e,
@@ -883,6 +976,11 @@ export default function (self) {
       Math.abs(y) > self.attributes.reorderDeadZone
     ) {
       self.reorderObject = self.draggingItem;
+      if (self.isMultiRowsSelected)
+        self.reorderObject = self.getVisibleCellByIndex(
+          -1,
+          self.activeCell.rowIndex,
+        );
       self.reorderTarget = self.currentCell;
       self.reorderObject.dragOffset = {
         x: x,
@@ -899,7 +997,7 @@ export default function (self) {
   self.stopDragReorder = function (e) {
     var oIndex,
       tIndex,
-      odata,
+      odata = [],
       cr = {
         'row-reorder': self.orders.rows,
         'column-reorder': self.orders.columns,
@@ -931,14 +1029,40 @@ export default function (self) {
       oIndex = cr[self.dragMode].indexOf(self.reorderObject[i]);
       tIndex = cr[self.dragMode].indexOf(self.reorderTarget[i]);
       if (self.dragMode === 'column-reorder') {
-        cr[self.dragMode].splice(oIndex, 1);
-        cr[self.dragMode].splice(tIndex, 0, self.reorderObject[i]);
+        var sortColumnIndices = [];
+        var seletedColumnIndices = [];
+        if (self.selections[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]);
+        }
         self.orders.columns = cr[self.dragMode];
+        self.viewData.forEach(function (row, rowIndex) {
+          self.selections[rowIndex] = seletedColumnIndices;
+        });
       } else {
-        // self.orders.rows = cr[self.dragMode];
-        odata = self.viewData[oIndex];
-        self.viewData[oIndex] = self.viewData[tIndex];
-        self.viewData[tIndex] = odata;
+        var selectedRows = [];
+        self.selections.forEach(function (row, rowIndex) {
+          if (row) {
+            selectedRows.push(row);
+            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];
+        }
       }
       self.resize();
       self.setStorageData();
@@ -1000,7 +1124,12 @@ export default function (self) {
     ) {
       return;
     }
-    var pos = self.getLayerPos(e);
+    var 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;
     if (
@@ -1010,6 +1139,28 @@ export default function (self) {
     ) {
       self.scrollBox.scrollTop = 0;
       self.frozenRow = self.currentCell.rowIndex + 1;
+      self.scrollBox.bar.v.y =
+        columnHeaderCellHeight +
+        columnHeaderCellBorder +
+        self.scrollCache.y[self.frozenRow];
+      self.scrollBox.box.v.y =
+        columnHeaderCellHeight +
+        columnHeaderCellBorder +
+        self.scrollCache.y[self.frozenRow];
+      var dataHeight = self.scrollCache.y[self.scrollCache.y.length - 1];
+      self.scrollBox.heightBoxRatio =
+        (self.scrollBox.height -
+          columnHeaderCellHeight -
+          self.scrollCache.y[self.frozenRow]) /
+        dataHeight;
+      self.scrollBox.scrollBoxHeight =
+        self.scrollBox.height * self.scrollBox.heightBoxRatio -
+        self.style.scrollBarWidth;
+      self.scrollBox.scrollBoxHeight = Math.max(
+        self.scrollBox.scrollBoxHeight,
+        self.style.scrollBarBoxMinSize,
+      );
+      self.scrollBox.box.v.height = self.scrollBox.scrollBoxHeight;
     }
     if (
       self.currentCell &&
@@ -1018,6 +1169,22 @@ export default function (self) {
     ) {
       self.scrollBox.scrollLeft = 0;
       self.frozenColumn = self.currentCell.columnIndex + 1;
+      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];
+      self.scrollBox.widthBoxRatio =
+        (self.scrollBox.width - self.scrollCache.x[self.frozenColumn - 1]) /
+        dataWidth;
+      self.scrollBox.scrollBoxWidth =
+        self.scrollBox.width * self.scrollBox.widthBoxRatio -
+        self.style.scrollBarWidth;
+      self.scrollBox.scrollBoxWidth = Math.max(
+        self.scrollBox.scrollBoxWidth,
+        self.style.scrollBarBoxMinSize,
+      );
+      self.scrollBox.box.h.width = self.scrollBox.scrollBoxWidth;
     }
     if (
       Math.abs(pos.x) > self.attributes.reorderDeadZone ||
@@ -1084,7 +1251,12 @@ export default function (self) {
       !freeze &&
       !resize
     ) {
-      self.selections = [];
+      if (
+        !(self.dragMode == 'row-reorder' && self.isMultiRowsSelected) &&
+        !(self.currentCell.hovered && self.hovers.onFilterButton)
+      ) {
+        self.selections = [];
+      }
     }
     if (self.dragStartObject.isGrid) {
       return;
@@ -1175,10 +1347,11 @@ export default function (self) {
       self.draggingItem = self.dragStartObject;
       if (
         self.dragMode === 'column-reorder' &&
-        self.attributes.columnHeaderClickBehavior === 'select'
+        !self.isMultiColumnsSelected(self.currentCell.header.index)
       ) {
         self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
-        self.draw();
+      } 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);
@@ -1187,14 +1360,9 @@ export default function (self) {
   };
   self.mouseup = function (e) {
     clearTimeout(self.scrollTimer);
-    var ctrl = e.ctrlKey || e.metaKey;
     self.cellBoundaryCrossed = true;
     self.rowBoundaryCrossed = true;
     self.columnBoundaryCrossed = true;
-    if (self.draggingItem) {
-      self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
-      self.draw();
-    }
     self.selecting = undefined;
     self.draggingItem = undefined;
     self.dragStartObject = undefined;
@@ -1285,6 +1453,8 @@ export default function (self) {
       self.selectNone();
     } else if (ctrl && e.key === 'a') {
       self.selectAll();
+    } else if (['Backspace', 'Delete'].includes(e.key)) {
+      self.deleteSelectedData();
     } else if (e.key === 'ArrowDown') {
       y += 1;
     } else if (e.key === 'ArrowUp') {
@@ -1464,13 +1634,26 @@ export default function (self) {
       self.currentCell.context === 'ew-resize' &&
       self.currentCell.style === 'columnHeaderCell'
     ) {
-      self.fitColumnToValues(self.currentCell.header.name);
+      // Check that double-clicked cell is selected or part of selection.
+      const currentCellIsSelected = self.isColumnSelected(
+        self.currentCell.columnIndex,
+      );
+
+      if (currentCellIsSelected) {
+        // There might be more
+        self.fitSelectedColumns();
+      } else {
+        self.fitColumnToValues(self.currentCell.header.name);
+      }
     } else if (
       self.currentCell.context === 'ew-resize' &&
       self.currentCell.style === 'cornerCell'
     ) {
       self.autosize();
-    } else if (['cell', 'activeCell'].indexOf(self.currentCell.style) !== -1) {
+    } else if (
+      ['cell', 'activeCell'].includes(self.currentCell.style) &&
+      !self.hovers.onFilterButton
+    ) {
       self.beginEditAt(self.currentCell.columnIndex, self.currentCell.rowIndex);
     }
   };
@@ -1694,103 +1877,38 @@ export default function (self) {
     });
   };
   self.cut = function (e) {
-    self.copy(e);
-    const schema = self.getSchema();
-
-    var affectedCells = [];
-    for (const [rowIndex, row] of self.selections.entries()) {
-      if (!row) continue;
+    if (self.dispatchEvent('cut', { NativeEvent: e })) {
+      return;
+    }
 
-      const boundRowIndex = self.getBoundRowIndexFromViewRowIndex(rowIndex);
+    // Expecting instance of `ClipboardEvent` with `clipboardData` attribute
+    if (!self.hasFocus || !e.clipboardData) {
+      return;
+    }
 
-      for (const columnIndex of row) {
-        const boundColumnIndex = self.getBoundColumnIndexFromViewColumnIndex(
-          columnIndex,
-        );
-        const colName = schema[boundColumnIndex].name;
+    self.copySelectedCellsToClipboard(e.clipboardData);
 
-        self.viewData[rowIndex][colName] = '';
+    const affectedCells = self.clearSelectedCells();
 
-        affectedCells.push([
-          rowIndex,
-          columnIndex,
-          boundRowIndex,
-          boundColumnIndex,
-        ]);
-      }
-    }
+    self.dispatchEvent('aftercut', {
+      cells: affectedCells,
+    });
 
-    if (self.dispatchEvent('cut', { NativeEvent: e, cells: affectedCells })) {
-      return;
-    }
+    requestAnimationFrame(() => self.draw());
   };
   self.copy = function (e) {
     if (self.dispatchEvent('copy', { NativeEvent: e })) {
       return;
     }
+
+    // Expecting instance of `ClipboardEvent` with `clipboardData` attribute
     if (!self.hasFocus || !e.clipboardData) {
       return;
     }
-    var t = '',
-      d = '',
-      textRows = [],
-      sData = self.getSelectedData(),
-      s = self.getSchema(),
-      sSorted = [],
-      firstRowKeys,
-      isNeat = true; // Selected like [[0, 1], [0, 1]] of [[0, 3]] is neat; Selected like [[0, 1], [1, 2]] is untidy
-    function htmlSafe(v) {
-      return v.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    }
-    s.forEach(function (column, columnIndex) {
-      sSorted.push(s[self.orders.columns[columnIndex]]);
-    });
-    if (sData.length > 0) {
-      sData.forEach((row) => {
-        if (!row) return;
-        var rowKeys = Object.keys(row);
-        var textRow = [];
-        if (!firstRowKeys) firstRowKeys = Object.keys(row);
-        if (isNeat && rowKeys.length !== firstRowKeys.length) isNeat = false;
-        sSorted.forEach(function (column, columnIndex) {
-          if (rowKeys.indexOf(column.name) < 0) {
-            if (firstRowKeys.indexOf(column.name) < 0) {
-              return;
-            } else if (isNeat) {
-              isNeat = false;
-            }
-          }
-          textRow.push(row[column.name] || '');
-        });
-        textRows.push(textRow);
-      });
-      if (isNeat) {
-        t = textRows.map((row) => row.join('\t')).join('\n');
-        /**
-         * The html content copied by Excel has not header
-         */
-        d += '<table>';
-        d += textRows
-          .map(
-            (row) =>
-              '<tr>' +
-              row.map((value) => '<td>' + htmlSafe(value) + '</td>').join('') +
-              '</tr>',
-          )
-          .join('');
-        d += '</table>';
-      } else {
-        t = textRows.map((row) => row.join('')).join('');
-        d = t;
-      }
-      if (t) {
-        e.clipboardData.setData('text/html', d);
-        e.clipboardData.setData('text/plain', t);
-        e.clipboardData.setData('text/csv', t);
-        e.clipboardData.setData('application/json', JSON.stringify(sData));
-      }
-      e.preventDefault();
-    }
+
+    self.copySelectedCellsToClipboard(e.clipboardData);
+
+    e.preventDefault();
   };
   return;
 }

package/lib/events/util.js

@@ -86,11 +86,49 @@ const parseData = function (data, mimeType) {
   return parseText(data);
 };
 
+const htmlSafe = (value) => {
+  if (typeof value === 'number') return value;
+  return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+};
+
+const createTextString = (selectedData, isNeat) => {
+  // Selected like [[0, 1], [0, 1]] of [[0, 3]] is neat; Selected like [[0, 1], [1, 2]] is untidy.
+  // If not isNeat we just return a simple string of concatenated values.
+  if (!isNeat)
+    return selectedData.map((row) => Object.values(row).join('')).join('');
+
+  // If isNeat, we can create tab separated mutti-line text.
+  return selectedData.map((row) => Object.values(row).join('\t')).join('\n');
+};
+
+const createHTMLString = (selectedData, isNeat) => {
+  if (!isNeat) return createTextString(selectedData, isNeat);
+
+  // If isNeat, we can create a HTML table with the selected data.
+  let htmlString = '<table>';
+  htmlString += selectedData
+    .map(
+      (row) =>
+        '<tr>' +
+        Object.values(row)
+          .map((value) => '<td>' + htmlSafe(value) + '</td>')
+          .join('') +
+        '</tr>',
+    )
+    .join('');
+  htmlString += '</table>';
+
+  return htmlString;
+};
+
 export {
+  createTextString,
+  createHTMLString,
   isSupportedHtml,
-  sanitizeElementData,
+  htmlSafe,
   parseData,
   parseHtmlTable,
   parseHtmlText,
   parseText,
+  sanitizeElementData,
 };