canvas-datagrid 0.3.18 → 0.3.22

package/lib/intf.js

@@ -2,6 +2,8 @@
 /*globals HTMLElement: false, Reflect: false, define: true, MutationObserver: false, requestAnimationFrame: false, performance: false, btoa: false*/
 'use strict';
 
+import { createHTMLString, createTextString } from './events/util';
+
 export default function (self, ctor) {
   self.scale = 1;
   self.orders = {
@@ -61,6 +63,14 @@ export default function (self, ctor) {
     trees: {},
   };
   self.selections = [];
+  self.filterable = {
+    rows: [],
+    columns: [],
+  };
+  self.selectedFilterButton = {
+    columnIndex: -1,
+    rowIndex: -1,
+  };
   self.hovers = {};
   self.attributes = {};
   self.style = {};
@@ -88,6 +98,7 @@ export default function (self, ctor) {
   self.eventNames = [
     'afterdraw',
     'afterrendercell',
+    'afterrenderfilterbutton',
     'attributechanged',
     'beforebeginedit',
     'beforecreatecellgrid',
@@ -95,6 +106,7 @@ export default function (self, ctor) {
     'beforeendedit',
     'beforerendercell',
     'beforerendercellgrid',
+    'beforerenderfilterbutton',
     'beginedit',
     'cellmouseout',
     'cellmouseover',
@@ -232,6 +244,89 @@ export default function (self, ctor) {
 
     return selectedCells;
   };
+  self.copySelectedCellsToClipboard = function (clipboardData) {
+    const selectedData = [];
+    const schema = self.getSchema();
+    let firstRowAsString;
+    let isNeat = true; // Selected like [[0, 1], [0, 1]] of [[0, 3]] is neat; Selected like [[0, 1], [1, 2]] is untidy
+
+    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;
+
+      // Convert to string for easy comparison to the first row.
+      const rowAsString = row.join(',').toString();
+      const rowDict = {};
+
+      if (!firstRowAsString) firstRowAsString = row.join(',').toString();
+      if (isNeat && rowAsString !== firstRowAsString) isNeat = false;
+
+      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;
+
+        const value = self.originalData[boundRowIndex][columnName];
+
+        rowDict[columnName] = value;
+      }
+      selectedData.push(rowDict);
+    }
+
+    if (selectedData.length > 0) {
+      const textString = createTextString(selectedData, isNeat);
+      const htmlString = createHTMLString(selectedData, isNeat);
+
+      const copiedData = {
+        'text/plain': textString,
+        'text/html': htmlString,
+        'text/csv': textString,
+        'application/json': JSON.stringify(selectedData),
+      };
+
+      for (const [mimeType, data] of Object.entries(copiedData)) {
+        clipboardData.setData(mimeType, data);
+      }
+    }
+  };
+  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] = '';
+
+        affectedCells.push([
+          rowIndex,
+          columnIndex,
+          boundRowIndex,
+          boundColumnIndex,
+        ]);
+      }
+    }
+
+    return affectedCells;
+  };
   self.getBoundRowIndexFromViewRowIndex = function (viewRowIndex) {
     if (self.boundRowIndexMap && self.boundRowIndexMap.has(viewRowIndex)) {
       return self.boundRowIndexMap.get(viewRowIndex);
@@ -301,6 +396,18 @@ export default function (self, ctor) {
   self.createRowOrders = function () {
     self.orders.rows = fillArray(0, self.originalData.length - 1);
   };
+  self.fitSelectedColumns = function () {
+    const selectedColumns = self.selections[0];
+    const schema = self.getSchema();
+
+    for (const selectedColumn of selectedColumns) {
+      // Make sure the column is not the row header and that the whole column has in fact been selected.
+      if (selectedColumn >= 0 && self.isColumnSelected(selectedColumn)) {
+        const column = schema[self.orders.columns[selectedColumn]];
+        self.fitColumnToValues(column.name);
+      }
+    }
+  };
   self.getVisibleSchema = function () {
     return self.getSchema().filter(function (col) {
       return !col.hidden;
@@ -547,6 +654,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();
@@ -724,6 +832,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;
@@ -755,6 +864,7 @@ export default function (self, ctor) {
     self.intf.clearChangeLog = self.clearChangeLog;
     self.intf.gotoCell = self.gotoCell;
     self.intf.gotoRow = self.gotoRow;
+    self.intf.addButton = self.addButton;
     self.intf.getHeaderByName = self.getHeaderByName;
     self.intf.findColumnScrollLeft = self.findColumnScrollLeft;
     self.intf.findRowScrollTop = self.findRowScrollTop;
@@ -1534,6 +1644,9 @@ export default function (self, ctor) {
       if (!preventScrollEvent) {
         self.scroll();
       }
+      if (self.button) {
+        self.moveButtonPos();
+      }
     }
     function setScrollLeft(value, preventScrollEvent) {
       if (isNaN(value)) {
@@ -1552,6 +1665,9 @@ export default function (self, ctor) {
       if (!preventScrollEvent) {
         self.scroll();
       }
+      if (self.button) {
+        self.moveButtonPos();
+      }
     }
     self.scrollBox.toString = function () {
       return (

package/lib/main.js

@@ -9,6 +9,7 @@ import events from './events';
 import touch from './touch';
 import intf from './intf';
 import contextMenu from './contextMenu';
+import button from './button';
 import dom from './dom';
 import publicMethods from './publicMethods';
 
@@ -21,6 +22,7 @@ var modules = [
   touch,
   intf,
   contextMenu,
+  button,
   dom,
   publicMethods,
 ];

package/lib/publicMethods.js

@@ -206,6 +206,18 @@ export default function (self) {
       delete self.columnFilters[column];
     } else {
       self.columnFilters[column] = value;
+      if (self.attributes.showFilterInCell) {
+        self.filterable.rows.push(0);
+        self.orders.columns.forEach(function (value, index) {
+          self.filterable.columns.push(index);
+        });
+      }
+    }
+    if (!Object.keys(self.columnFilters).length) {
+      self.filterable = {
+        rows: [],
+        columns: [],
+      };
     }
     self.refresh();
   };
@@ -294,6 +306,31 @@ export default function (self) {
   self.gotoRow = function (y) {
     self.gotoCell(0, y);
   };
+  /**
+   * Add a button into the cell.
+   * @memberof canvasDatagrid
+   * @name addButton
+   * @method
+   * @param {number} columnIndex The column index of the cell to to add a button.
+   * @param {number} rowIndex The row index of the cell to to add a button.
+   * @param {object} offset Offset how far go away from cell.
+   * @param {object} items a list of items to add into button menu.
+   * @param {string} imgSrc icon path to add into button.
+   */
+  self.addButton = function (columnIndex, rowIndex, offset, items, imgSrc) {
+    var cells = self.visibleCells.filter(function (c) {
+      return c.sortColumnIndex === columnIndex && c.sortRowIndex === rowIndex;
+    });
+
+    self.attachButton(
+      {
+        top: cells[0].y + cells[0].height + offset.y,
+        left: cells[0].x + cells[0].width + offset.x,
+      },
+      items,
+      imgSrc,
+    );
+  };
   /**
    * Scrolls the cell at cell x, row y into view if it is not already.
    * @memberof canvasDatagrid
@@ -379,6 +416,37 @@ export default function (self) {
     }
     self.draw();
   };
+  /**
+   * Returns true if indices of columns next to the selected columnIndex is selected on every row.
+   * @memberof canvasDatagrid
+   * @name isMultiColumnsSelected
+   * @method
+   * @param {number} columnIndex The column index to check.
+   */
+  self.isMultiColumnsSelected = function (columnIndex) {
+    var multiColIsSelected = true;
+    self.viewData.forEach(function (row, rowIndex) {
+      var columnIndices = self.selections[rowIndex];
+      if (
+        !columnIndices ||
+        columnIndices.length <= 1 ||
+        columnIndices.indexOf(columnIndex) === -1
+      ) {
+        multiColIsSelected = false;
+      } else if (columnIndices.length > 1) {
+        if (columnIndices[0] != columnIndex) multiColIsSelected = false;
+        else {
+          for (var i = 0; i < columnIndices.length - 1; i++) {
+            if (columnIndices[i] + 1 != columnIndices[i + 1]) {
+              multiColIsSelected = false;
+              break;
+            }
+          }
+        }
+      }
+    });
+    return multiColIsSelected;
+  };
   /**
    * Returns true if the selected columnIndex is selected on every row.
    * @memberof canvasDatagrid
@@ -391,8 +459,7 @@ export default function (self) {
     self.viewData.forEach(function (row, rowIndex) {
       if (
         !self.selections[rowIndex] ||
-        self.selections[rowIndex].indexOf(self.orders.columns[columnIndex]) ===
-          -1
+        self.selections[rowIndex].indexOf(columnIndex) === -1
       ) {
         colIsSelected = false;
       }
@@ -504,6 +571,7 @@ export default function (self) {
       st,
       en,
       s = self.getVisibleSchema();
+    self.isMultiRowsSelected = false;
     function de() {
       if (supressEvent) {
         return;
@@ -666,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);
@@ -788,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.18",
+  "version": "0.3.22",
   "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",