canvas-datagrid 0.3.12 → 0.3.16

package/dist/types.d.ts

@@ -78,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.
@@ -166,6 +167,7 @@ declare class canvasDatagrid {
         pageUpDownOverlap?: number;
         persistantSelectionMode?: boolean;
         singleSelectionMode?: boolean;
+        keepFocusOnMouseOut?: boolean;
         selectionMode?: string;
         hoverMode?: string;
         autoResizeColumns?: boolean;

package/lib/defaults.js

@@ -42,6 +42,7 @@ export default function (self) {
       ['globalRowResize', false],
       ['hideColumnText', 'Hide %s'],
       ['hoverMode', 'cell'],
+      ['keepFocusOnMouseOut', false],
       ['maxAutoCompleteItems', 200],
       ['multiLine', false],
       ['name', ''],

package/lib/docs.js

@@ -41,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.
@@ -456,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;
@@ -750,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 () {
@@ -1363,22 +1367,18 @@ export default function (self) {
   self.sorters.string = function (columnName, direction) {
     var asc = direction === 'asc';
     return function (a, b) {
-      if (a[columnName] === undefined || a[columnName] === null) {
-        return 1;
-      }
-      if (b[columnName] === undefined || b[columnName] === null) {
-        return 0;
-      }
+      const aValue = a[columnName] || '';
+      const bValue = b[columnName] || '';
       if (asc) {
-        if (!a[columnName].localeCompare) {
+        if (!aValue.localeCompare) {
           return 1;
         }
-        return a[columnName].localeCompare(b[columnName]);
+        return aValue.localeCompare(bValue);
       }
-      if (!b[columnName].localeCompare) {
+      if (!bValue.localeCompare) {
         return 1;
       }
-      return b[columnName].localeCompare(a[columnName]);
+      return bValue.localeCompare(aValue);
     };
   };
   self.sorters.number = function (columnName, direction) {

package/package.json

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