canvas-datagrid 0.3.20 → 0.3.21

package/dist/types.d.ts

@@ -505,6 +505,11 @@ declare class canvasDatagrid {
      * @param offsetY - The number of rows to offset the selection.
      */
     static moveSelection(offsetX: number, offsetY: number): void;
+    /**
+     * Deletes currently selected data.
+     * @param dontDraw - Suppress the draw method after the selection change.
+     */
+    static deleteSelectedData(dontDraw: boolean): void;
     /**
      * Moves data in the provided selection to another position in the grid.  Moving data off the edge of the schema (columns/x) will truncate data.
      * @param sel - 2D array representing selected rows and columns.  `canvasDatagrid.selections` is in this format and can be used here.

package/lib/button.js

@@ -150,6 +150,7 @@ export default function (self) {
         if (item.click) {
           menuItemContainer.addEventListener('click', function (ev) {
             item.click.apply(self, [ev]);
+            self.disposeButton();
           });
         }
       }

package/lib/docs.js

@@ -460,6 +460,14 @@
  * @param {object} e.boundRowIndexMap Mapping of view data row to bound data row index.
  * @param {object} e.boundColumnIndexMap Mapping of view column order to bound column order.
  */
+/**
+ * Fires when the selected is deleted by pressing backspace or delete key.
+ * @event
+ * @name canvasDatagrid#afterdelete
+ * @param {object} e Event object.
+ * @param {object} e.ctx Canvas context.
+ * @param {array} e.cells Cells affected by the delete action. Each item in the array is a tuple of [rowIndex, columnIndex, boundRowIndex, boundColumnIndex].
+ */
 /**
  * Fires when the user clicks on the "drill in" arrow.  When the arrow is clicked a new
  * grid is created and nested inside of the row.  The grid, the row data and row index are passed
@@ -552,7 +560,7 @@
  * @name canvasDatagrid#afterpaste
  * @param {object} e Event object
  * @param {object} e.ctx Canvas context.
- * @param {array} e.cells Cells affected by the paste action. Each item in the array is a tuple of [rowIndex, columnIndex].
+ * @param {array} e.cells Cells affected by the paste action. Each item in the array is a tuple of [rowIndex, columnIndex, boundRowIndex, boundColumnIndex].
  */
 /**
  * Fired just before a cell is drawn onto the canvas.  `e.preventDefault();` prevents the cell from being drawn.

package/lib/events/index.js

@@ -472,10 +472,18 @@ export default function (self) {
         };
         if (
           cell.isFilterable &&
-          x > cell.x + cell.width - self.style.filterButtonWidth &&
-          x < cell.x + cell.width &&
-          y > cell.y + cell.height - self.style.filterButtonHeight &&
-          y < cell.y + cell.height
+          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();
@@ -1420,6 +1428,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') {
@@ -1861,6 +1871,8 @@ export default function (self) {
     if (self.dispatchEvent('cut', { NativeEvent: e, cells: affectedCells })) {
       return;
     }
+
+    requestAnimationFrame(() => self.draw());
   };
   self.copy = function (e) {
     if (self.dispatchEvent('copy', { NativeEvent: e })) {

package/lib/intf.js

@@ -242,6 +242,38 @@ export default function (self, ctor) {
 
     return selectedCells;
   };
+  self.clearSelectedCells = function () {
+    const schema = self.getSchema();
+    const affectedCells = [];
+
+    for (const [rowIndex, row] of self.selections.entries()) {
+      // If no cells are selected for a particular rowIndex the selections array will contain an empty element for that rowIndex.
+      if (!row) continue;
+
+      const boundRowIndex = self.getBoundRowIndexFromViewRowIndex(rowIndex);
+
+      for (let columnIndex of row) {
+        // If the whole row is selected the columnIndex for the rowHeader is -1.
+        if (columnIndex < 0) continue;
+
+        const boundColumnIndex = self.getBoundColumnIndexFromViewColumnIndex(
+          columnIndex,
+        );
+        const columnName = schema[boundColumnIndex].name;
+
+        self.viewData[boundRowIndex][columnName] = null;
+
+        affectedCells.push([
+          rowIndex,
+          columnIndex,
+          boundRowIndex,
+          boundColumnIndex,
+        ]);
+      }
+    }
+
+    return affectedCells;
+  };
   self.getBoundRowIndexFromViewRowIndex = function (viewRowIndex) {
     if (self.boundRowIndexMap && self.boundRowIndexMap.has(viewRowIndex)) {
       return self.boundRowIndexMap.get(viewRowIndex);
@@ -557,6 +589,7 @@ export default function (self, ctor) {
     self.controlInput.removeEventListener('keypress', self.keypress, false);
     self.controlInput.removeEventListener('keyup', self.keyup, false);
     self.controlInput.removeEventListener('keydown', self.keydown, false);
+    document.body.removeEventListener('mousemove', self.mousemove);
     window.removeEventListener('resize', self.resize);
     if (self.observer && self.observer.disconnect) {
       self.observer.disconnect();
@@ -734,6 +767,7 @@ export default function (self, ctor) {
     self.pointerLockPosition = { x: 0, y: 0 };
     Object.keys(self.style).forEach(self.parseStyleValue);
     self.intf.moveSelection = self.moveSelection;
+    self.intf.deleteSelectedData = self.deleteSelectedData;
     self.intf.moveTo = self.moveTo;
     self.intf.addEventListener = self.addEventListener;
     self.intf.removeEventListener = self.removeEventListener;

package/lib/publicMethods.js

@@ -734,9 +734,23 @@ export default function (self) {
     if (!self.canvas) {
       return;
     }
-    self.sizes.columns[
-      name === 'cornerCell' ? -1 : self.getHeaderByName(name).index
-    ] = Math.max(self.findColumnMaxTextLength(name), self.style.minColumnWidth);
+
+    const columnIndex =
+      name === 'cornerCell' ? -1 : self.getHeaderByName(name).index;
+
+    const newSize = Math.max(
+      self.findColumnMaxTextLength(name),
+      self.style.minColumnWidth,
+    );
+
+    self.sizes.columns[columnIndex] = newSize;
+
+    self.dispatchEvent('resizecolumn', {
+      x: newSize,
+      y: self.resizingStartingHeight,
+      draggingItem: self.currentCell,
+    });
+
     if (!internal) {
       self.resize();
       self.draw(true);
@@ -856,6 +870,26 @@ export default function (self) {
     });
     self.selections = sel;
   };
+  /**
+   * Deletes currently selected data.
+   * @memberof canvasDatagrid
+   * @name deleteSelectedData
+   * @method
+   * @param {boolean} dontDraw Suppress the draw method after the selection change.
+   */
+  self.deleteSelectedData = function (dontDraw) {
+    const affectedCells = self.clearSelectedCells();
+
+    self.dispatchEvent('afterdelete', {
+      cells: affectedCells,
+    });
+
+    if (dontDraw) {
+      return;
+    }
+
+    requestAnimationFrame(() => self.draw());
+  };
   /**
    * Moves data in the provided selection to another position in the grid.  Moving data off the edge of the schema (columns/x) will truncate data.
    * @memberof canvasDatagrid

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "description": "Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.",
   "main": "./dist/canvas-datagrid.js",
   "module": "./dist/canvas-datagrid.module.js",