canvas-datagrid 0.3.11 → 0.3.15

package/dist/types.d.ts

@@ -66,6 +66,8 @@
  * @param [args.autoScrollMargin = 5] - Number of pixels of mouse movement to trigger auto scroll.
  * @param [args.allowFreezingRows = false] - When true, the UI provides a drag-able cutter to freeze rows.
  * @param [args.allowFreezingColumns = false] - When true, the UI provides a drag-able cutter to freeze columns.
+ * @param [args.filterFrozenRows = true] - When false, rows on and above {@link canvasDatagrid#property:frozenRow}` will be ignored by filters when {@link canvasDatagrid#param:allowFreezingRows} is true.
+ * @param [args.sortFrozenRows = true] - When false, rows on and above {@link canvasDatagrid#property:frozenRow}` will be ignored by sorters when {@link canvasDatagrid#param:allowSorting} is true.
  * @param [args.allowColumnReordering = true] - When true columns can be reordered.
  * @param [args.allowMovingSelection = false] - When true selected data can be moved by clicking and dragging on the border of the selection.
  * @param [args.allowRowReordering = false] - When true rows can be reordered.
@@ -76,6 +78,7 @@
  * @param [args.pageUpDownOverlap = 1] - Amount of rows to overlap when pageup/pagedown is used.
  * @param [args.persistantSelectionMode = false] - When true, selections will behave as if the command/control key is held down at all times. Conflicts with singleSelectionMode.
  * @param [args.singleSelectionMode = false] - When true, selections will ignore the command/control key. Conflicts with persistantSelectionMode.
+ * @param [args.keepFocusOnMouseOut = false] - When true, grid will continue to handle keydown events when mouse is outside of the grid.
  * @param [args.selectionMode = 'cell'] - Can be 'cell', or 'row'.  This setting dictates what will be selected when the user clicks a cell.  The cell, or the entire row respectively.
  * @param [args.hoverMode = 'cell'] - Can be 'cell', or 'row'. This setting dictates whether to highlight either the individual cell, or the entire row when hovering over a cell.
  * @param [args.autoResizeColumns = false] - When true, all columns will be automatically resized to fit the data in them. Warning! Expensive for large (>100k ~2 seconds) datasets.
@@ -152,6 +155,8 @@ declare class canvasDatagrid {
         autoScrollMargin?: number;
         allowFreezingRows?: boolean;
         allowFreezingColumns?: boolean;
+        filterFrozenRows?: boolean;
+        sortFrozenRows?: boolean;
         allowColumnReordering?: boolean;
         allowMovingSelection?: boolean;
         allowRowReordering?: boolean;
@@ -162,6 +167,7 @@ declare class canvasDatagrid {
         pageUpDownOverlap?: number;
         persistantSelectionMode?: boolean;
         singleSelectionMode?: boolean;
+        keepFocusOnMouseOut?: boolean;
         selectionMode?: string;
         hoverMode?: string;
         autoResizeColumns?: boolean;

package/lib/defaults.js

@@ -38,9 +38,11 @@ export default function (self) {
       ['ellipsisText', '...'],
       ['filterOptionText', 'Filter %s'],
       ['filterTextPrefix', '(filtered) '],
+      ['filterFrozenRows', true],
       ['globalRowResize', false],
       ['hideColumnText', 'Hide %s'],
       ['hoverMode', 'cell'],
+      ['keepFocusOnMouseOut', false],
       ['maxAutoCompleteItems', 200],
       ['multiLine', false],
       ['name', ''],
@@ -76,6 +78,7 @@ export default function (self) {
       ['showRowNumberGaps', true],
       ['singleSelectionMode', false],
       ['snapToRow', false],
+      ['sortFrozenRows', true],
       ['touchContextMenuTimeMs', 800],
       ['touchDeadZone', 3],
       ['touchEasingMethod', 'easeOutQuad'],

package/lib/docs.js

@@ -29,6 +29,8 @@
  * @param {number} [args.autoScrollMargin=5] - Number of pixels of mouse movement to trigger auto scroll.
  * @param {boolean} [args.allowFreezingRows=false] - When true, the UI provides a drag-able cutter to freeze rows.
  * @param {boolean} [args.allowFreezingColumns=false] - When true, the UI provides a drag-able cutter to freeze columns.
+ * @param {boolean} [args.filterFrozenRows=true] - When false, rows on and above {@link canvasDatagrid#property:frozenRow}` will be ignored by filters when {@link canvasDatagrid#param:allowFreezingRows} is true.
+ * @param {boolean} [args.sortFrozenRows=true] - When false, rows on and above {@link canvasDatagrid#property:frozenRow}` will be ignored by sorters when {@link canvasDatagrid#param:allowSorting} is true.
  * @param {boolean} [args.allowColumnReordering=true] - When true columns can be reordered.
  * @param {boolean} [args.allowMovingSelection=false] - When true selected data can be moved by clicking and dragging on the border of the selection.
  * @param {boolean} [args.allowRowReordering=false] - When true rows can be reordered.
@@ -39,6 +41,7 @@
  * @param {number} [args.pageUpDownOverlap=1] - Amount of rows to overlap when pageup/pagedown is used.
  * @param {boolean} [args.persistantSelectionMode=false] - When true, selections will behave as if the command/control key is held down at all times. Conflicts with singleSelectionMode.
  * @param {boolean} [args.singleSelectionMode=false] - When true, selections will ignore the command/control key. Conflicts with persistantSelectionMode.
+ * @param {boolean} [args.keepFocusOnMouseOut=false] - When true, grid will continue to handle keydown events when mouse is outside of the grid.
  * @param {string} [args.selectionMode='cell'] - Can be 'cell', or 'row'.  This setting dictates what will be selected when the user clicks a cell.  The cell, or the entire row respectively.
  * @param {string} [args.hoverMode='cell'] - Can be 'cell', or 'row'. This setting dictates whether to highlight either the individual cell, or the entire row when hovering over a cell.
  * @param {boolean} [args.autoResizeColumns=false] - When true, all columns will be automatically resized to fit the data in them. Warning! Expensive for large (>100k ~2 seconds) datasets.
@@ -454,6 +457,8 @@
  * @param {object} e.selectedData Selected data.
  * @param {array} e.selections Selections object. 2D matrix of selections.
  * @param {rectangle} e.selectionBounds rectangle object describing the selection bounds.
+ * @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 user clicks on the "drill in" arrow.  When the arrow is clicked a new

package/lib/draw.js

@@ -122,15 +122,15 @@ export default function (self) {
     x = x + ml;
     y = y + mt;
     if (self.orderDirection === 'asc') {
-      self.ctx.moveTo(x, y);
-      self.ctx.lineTo(x + aw, y);
-      self.ctx.lineTo(x + aw * 0.5, y + ah);
-      self.ctx.moveTo(x, y);
-    } else {
       self.ctx.lineTo(x, y + ah);
       self.ctx.lineTo(x + aw, y + ah);
       self.ctx.lineTo(x + aw * 0.5, y);
       self.ctx.lineTo(x, y + ah);
+    } else {
+      self.ctx.moveTo(x, y);
+      self.ctx.lineTo(x + aw, y);
+      self.ctx.lineTo(x + aw * 0.5, y + ah);
+      self.ctx.moveTo(x, y);
     }
     self.ctx.stroke();
     self.ctx.fill();
@@ -911,7 +911,9 @@ export default function (self) {
           viewColumnIndex: columnOrderIndex,
 
           boundRowIndex: self.getBoundRowIndexFromViewRowIndex(rowOrderIndex),
-          boundColumnIndex: columnOrderIndex,
+          boundColumnIndex: self.getBoundColumnIndexFromViewColumnIndex(
+            columnOrderIndex,
+          ),
 
           sortColumnIndex: headerIndex,
           sortRowIndex: rowIndex,

package/lib/{events.js → events/index.js}

@@ -3,6 +3,7 @@
 'use strict';
 
 import isPrintableKeyEvent from 'is-printable-key-event';
+import { isSupportedHtml, parseData } from './util';
 
 export default function (self) {
   var wheeling;
@@ -518,13 +519,12 @@ export default function (self) {
                 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);
               }
             }
@@ -583,12 +583,14 @@ export default function (self) {
     function checkSelectionChange() {
       var ev,
         sb = self.getSelectionBounds();
+
       if (startingBounds === JSON.stringify(sb)) {
         return;
       }
       ev = {
         selections: self.selections,
         selectionBounds: self.getSelectionBounds(),
+        selectedCells: self.getSelectedCells(),
       };
       Object.defineProperty(ev, 'selectedData', {
         get: function () {
@@ -897,6 +899,7 @@ export default function (self) {
   self.stopDragReorder = function (e) {
     var oIndex,
       tIndex,
+      odata,
       cr = {
         'row-reorder': self.orders.rows,
         'column-reorder': self.orders.columns,
@@ -927,12 +930,15 @@ export default function (self) {
       self.ignoreNextClick = true;
       oIndex = cr[self.dragMode].indexOf(self.reorderObject[i]);
       tIndex = cr[self.dragMode].indexOf(self.reorderTarget[i]);
-      cr[self.dragMode].splice(oIndex, 1);
-      cr[self.dragMode].splice(tIndex, 0, self.reorderObject[i]);
       if (self.dragMode === 'column-reorder') {
+        cr[self.dragMode].splice(oIndex, 1);
+        cr[self.dragMode].splice(tIndex, 0, self.reorderObject[i]);
         self.orders.columns = cr[self.dragMode];
       } else {
-        self.orders.rows = cr[self.dragMode];
+        // self.orders.rows = cr[self.dragMode];
+        odata = self.viewData[oIndex];
+        self.viewData[oIndex] = self.viewData[tIndex];
+        self.viewData[tIndex] = odata;
       }
       self.resize();
       self.setStorageData();
@@ -1167,6 +1173,13 @@ export default function (self) {
     }
     if (['row-reorder', 'column-reorder'].indexOf(self.dragMode) !== -1) {
       self.draggingItem = self.dragStartObject;
+      if (
+        self.dragMode === 'column-reorder' &&
+        self.attributes.columnHeaderClickBehavior === 'select'
+      ) {
+        self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
+        self.draw();
+      }
       document.body.addEventListener('mousemove', self.dragReorder, false);
       document.body.addEventListener('mouseup', self.stopDragReorder, false);
       return;
@@ -1174,9 +1187,14 @@ 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;
@@ -1246,7 +1264,7 @@ export default function (self) {
       return;
     }
 
-    if (!self.hasFocus) {
+    if (!self.attributes.keepFocusOnMouseOut && !self.hasFocus) {
       return;
     }
 
@@ -1401,6 +1419,7 @@ export default function (self) {
           selectedData: self.getSelectedData(),
           selections: self.selections,
           selectionBounds: self.getSelectionBounds(),
+          selectedCells: self.getSelectedCells(),
         };
         Object.defineProperty(ev, 'selectedData', {
           get: function () {
@@ -1497,24 +1516,13 @@ export default function (self) {
       }, 1);
     }
   };
-
   self.pasteData = function (
     pasteValue,
     mimeType,
     startRowIndex,
     startColIndex,
   ) {
-    var schema = self.getSchema();
-    const isSupportedHtmlTable = (htmlString) =>
-      /(?:^(<meta[^>]+>)?<table.*?>)|(?:<!--StartFragment-->\s*<table.*?>)/.test(
-        htmlString,
-      );
-
-    // TODO: support pasting tables from Excel
-    if (
-      mimeType === 'text/html' &&
-      isSupportedHtmlTable(pasteValue) === false
-    ) {
+    if (mimeType === 'text/html' && !isSupportedHtml(pasteValue)) {
       console.warn(
         'Unrecognized HTML format. HTML must be a simple table, e.g.: <table><tr><td>data</td></tr></table>.',
       );
@@ -1524,48 +1532,12 @@ export default function (self) {
 
       return;
     }
-
-    function parseData(data, mimeType) {
-      // TODO: use DOMParser
-      if (mimeType === 'text/html') {
-        const doc = new DOMParser().parseFromString(data, 'text/html');
-        const trs = doc.querySelectorAll('table tr');
-        const rows = [];
-        trs.forEach((tr) => {
-          const row = [];
-          tr.childNodes.forEach((td) => {
-            if (td.nodeName === '#text') return;
-            const col = {
-              // style: {}, // keep style if need
-              value: [],
-            };
-            td.childNodes.forEach((ele) => {
-              col.value.push({
-                // style: {}, // keep style if need
-                value: ele.nodeType === 1 ? ele.innerText : ele.data,
-              });
-            });
-            row.push(col);
-          });
-          rows.push(row);
-        });
-        return rows;
-      }
-
-      // Default data format is string, so split on new line,
-      // and then enclose in an array (a row with one cell):
-      return data
-        .split('\n')
-        .map((item) =>
-          item.split('\t').map((value) => ({ value: [{ value }] })),
-        );
-    }
-
+    var schema = self.getSchema();
     var rows = parseData(pasteValue, mimeType);
 
     // selected cell. This mimics Excel's paste functionality, and works
     // as a poor-man's fill-down.
-    if (rows.length === 1) {
+    if (rows.length === 1 && rows[0].length === 1) {
       var cellData = rows[0][0].value.map((item) => item.value).join();
 
       self.forEachSelectedCell(function (data, rowIndex, colName) {
@@ -1627,7 +1599,8 @@ export default function (self) {
         affectedCells.push([
           rowIndex,
           columnIndex,
-          self.getVisibleCellByIndex(columnIndex, rowIndex),
+          self.getBoundRowIndexFromViewRowIndex(rowIndex),
+          self.getBoundColumnIndexFromViewColumnIndex(columnIndex),
         ]);
       });
     });
@@ -1722,9 +1695,34 @@ export default function (self) {
   };
   self.cut = function (e) {
     self.copy(e);
-    self.forEachSelectedCell(function (data, index, colName) {
-      data[index][colName] = '';
-    });
+    const schema = self.getSchema();
+
+    var affectedCells = [];
+    for (const [rowIndex, row] of self.selections.entries()) {
+      if (!row) continue;
+
+      const boundRowIndex = self.getBoundRowIndexFromViewRowIndex(rowIndex);
+
+      for (const columnIndex of row) {
+        const boundColumnIndex = self.getBoundColumnIndexFromViewColumnIndex(
+          columnIndex,
+        );
+        const colName = schema[boundColumnIndex].name;
+
+        self.viewData[rowIndex][colName] = '';
+
+        affectedCells.push([
+          rowIndex,
+          columnIndex,
+          boundRowIndex,
+          boundColumnIndex,
+        ]);
+      }
+    }
+
+    if (self.dispatchEvent('cut', { NativeEvent: e, cells: affectedCells })) {
+      return;
+    }
   };
   self.copy = function (e) {
     if (self.dispatchEvent('copy', { NativeEvent: e })) {

package/lib/events/util.js

@@ -0,0 +1,96 @@
+'use strict';
+
+const isSupportedHtml = function (pasteValue) {
+  // We need to match new lines in the HTML, .* won't match new line characters.
+  // `s` regex modifier can't be used with `ecmaVersion === 2017`.
+  // As a workaround using [\s\S]*. Fix when we upgrade `ecmaVersion`.
+  const genericDiv = /(?:^(<meta[^>]*>)?[\s\S]*<div[^>]*>)/;
+  const genericSpan = /(?:^(<meta[^>]*>)?[\s\S]*<span[^>]*>)/;
+  const genericTable = /(?:^(<meta[^>]*>)?[\s\S]*<table[^>]*>)/; // Matches Google Sheets format clipboard data format too.
+  const excelTable = /(?:<!--StartFragment-->[\s\S]*<tr[^>]*>)/;
+  const excelTableRow = /(?:<!--StartFragment-->[\s\S]*<td[^>]*>)/;
+
+  return [
+    genericDiv,
+    genericTable,
+    genericSpan,
+    excelTable,
+    excelTableRow,
+  ].some((expression) => expression.test(pasteValue));
+};
+
+// Explanation of nodeType here: https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+const IGNORE_NODETYPES = [8, 3]; // '#text' and '#comment'
+
+const isHtmlTable = function (pasteValue) {
+  return /(?:<table[^>]*>)|(?:<tr[^]*>)/.test(pasteValue);
+};
+
+const sanitizeElementData = function (element) {
+  // It is not entirely clear if this check on nodeType is required.
+  let elementData = element.nodeType === 1 ? element.innerText : element.data;
+
+  return String(elementData).replace(/\s+/g, ' ').trim();
+};
+
+const parseHtmlText = function (data) {
+  const doc = new DOMParser().parseFromString(data, 'text/html');
+  const element = doc.querySelector('div') || doc.querySelector('span');
+  const elementData = sanitizeElementData(element);
+
+  return elementData
+    .split('\n')
+    .map((item) => item.split('\t').map((value) => ({ value: [{ value }] })));
+};
+
+const parseHtmlTable = function (data) {
+  const doc = new DOMParser().parseFromString(data, 'text/html');
+  const trs = doc.querySelectorAll('table tr');
+  const rows = [];
+
+  for (const tr of trs) {
+    const row = [];
+
+    for (const childNode of tr.childNodes) {
+      if (IGNORE_NODETYPES.includes(childNode.nodeType)) continue;
+
+      const col = { value: [] };
+      const value = sanitizeElementData(childNode);
+
+      if (value) col.value.push({ value });
+
+      row.push(col);
+    }
+
+    rows.push(row);
+  }
+
+  return rows;
+};
+
+const parseText = function (data) {
+  return data
+    .split('\n')
+    .map((item) => item.split('\t').map((value) => ({ value: [{ value }] })));
+};
+
+const parseData = function (data, mimeType) {
+  if (mimeType === 'text/html' && isHtmlTable(data)) {
+    return parseHtmlTable(data);
+  } else if (mimeType === 'text/html') {
+    return parseHtmlText(data);
+  }
+
+  // Default data format is string, so split on new line,
+  // and then enclose in an array (a row with one cell):
+  return parseText(data);
+};
+
+export {
+  isSupportedHtml,
+  sanitizeElementData,
+  parseData,
+  parseHtmlTable,
+  parseHtmlText,
+  parseText,
+};

package/lib/intf.js

@@ -184,6 +184,54 @@ export default function (self, ctor) {
 
     return selectedData;
   };
+  self.getSelectedCells = function (expandToRow) {
+    const selectedCells = [];
+    const schema = self.getSchema();
+    const viewDataLength = self.viewData.length;
+
+    if (viewDataLength === 0) {
+      return [];
+    }
+
+    for (const [viewRowIndex, row] of self.selections.entries()) {
+      if (!row || row.length === 0) continue;
+
+      for (const [, viewColumnIndex] of row.entries()) {
+        if (viewColumnIndex === -1 || !schema[viewColumnIndex]) {
+          continue;
+        }
+
+        const boundColumnIndex = self.getBoundColumnIndexFromViewColumnIndex(
+          viewColumnIndex,
+        );
+
+        if (!expandToRow && schema[boundColumnIndex].hidden) {
+          continue;
+        }
+
+        if (self.viewData[viewRowIndex]) {
+          const header = schema[boundColumnIndex];
+          const value = self.viewData[viewRowIndex][header.name];
+          const boundRowIndex = self.getBoundRowIndexFromViewRowIndex(
+            viewRowIndex,
+          );
+
+          const cell = {
+            value,
+            header,
+            boundRowIndex,
+            boundColumnIndex,
+            viewRowIndex,
+            viewColumnIndex,
+          };
+
+          selectedCells.push(cell);
+        }
+      }
+    }
+
+    return selectedCells;
+  };
   self.getBoundRowIndexFromViewRowIndex = function (viewRowIndex) {
     if (self.boundRowIndexMap && self.boundRowIndexMap.has(viewRowIndex)) {
       return self.boundRowIndexMap.get(viewRowIndex);
@@ -191,6 +239,9 @@ export default function (self, ctor) {
 
     return undefined;
   };
+  self.getBoundColumnIndexFromViewColumnIndex = function (viewColumnIndex) {
+    return self.orders.columns[viewColumnIndex];
+  };
   self.getColumnHeaderCellHeight = function () {
     if (!self.attributes.showColumnHeaders) {
       return 0;
@@ -320,11 +371,15 @@ export default function (self, ctor) {
       const currentFilterFunction =
         header.filter || self.filter(header.type || 'string');
 
-      newViewData = newViewData.filter(function ([row]) {
-        const cellValue = row[headerName];
-        const shouldIncludeRow = currentFilterFunction(cellValue, filterText);
+      newViewData = newViewData.filter(function ([row, originalRowIndex]) {
+        if (
+          self.attributes.allowFreezingRows &&
+          !self.attributes.filterFrozenRows &&
+          originalRowIndex < self.frozenRow
+        )
+          return true;
 
-        return shouldIncludeRow;
+        return currentFilterFunction(row[headerName], filterText);
       });
     }
 
@@ -332,7 +387,15 @@ export default function (self, ctor) {
     for (const column of self.orderings.columns) {
       const sortFn = column.sortFunction(column.orderBy, column.orderDirection);
 
-      newViewData.sort(([rowA], [rowB]) => sortFn(rowA, rowB));
+      newViewData.sort(([rowA], [rowB, rowIndexB]) => {
+        if (
+          self.attributes.allowFreezingRows &&
+          !self.attributes.sortFrozenRows &&
+          rowIndexB < self.frozenRow
+        )
+          return 0;
+        return sortFn(rowA, rowB);
+      });
     }
 
     return {
@@ -738,6 +801,7 @@ export default function (self, ctor) {
     self.intf.clearPxColorAssertions = self.clearPxColorAssertions;
     self.intf.integerToAlpha = self.integerToAlpha;
     self.intf.copy = self.copy;
+    self.intf.cut = self.cut;
     self.intf.paste = self.paste;
     self.intf.setStyleProperty = self.setStyleProperty;
     Object.defineProperty(self.intf, 'defaults', {

package/lib/publicMethods.js

@@ -353,6 +353,7 @@ export default function (self) {
       selectedData: self.getSelectedData(),
       selections: self.selections,
       selectionBounds: self.selectionBounds,
+      selectedCells: self.getSelectedCells(),
     });
     if (dontDraw) {
       return;
@@ -485,6 +486,7 @@ export default function (self) {
       selectedData: self.getSelectedData(),
       selections: self.selections,
       selectionBounds: self.getSelectionBounds(),
+      selectedCells: self.getSelectedCells(),
     });
   };
   /**
@@ -510,6 +512,7 @@ export default function (self) {
         selectedData: self.getSelectedData(),
         selections: self.selections,
         selectionBounds: self.selectionBounds,
+        selectedCells: self.getSelectedCells(),
       });
     }
     function addRow(ri) {
@@ -1252,6 +1255,7 @@ export default function (self) {
     ev = {
       selections: self.selections,
       selectionBounds: self.selectionBounds,
+      selectedCells: self.getSelectedCells(),
     };
     Object.defineProperty(ev, 'selectedData', {
       get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.3.11",
+  "version": "0.3.15",
   "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",