canvas-datagrid 0.3.21 → 0.3.25

package/lib/dom.js

@@ -143,11 +143,16 @@ export default function (self) {
       s = e,
       h,
       w;
+    let calculatedTree = false;
     while (e.offsetParent && e.nodeName !== 'CANVAS-DATAGRID') {
-      x += e.offsetLeft;
-      y += e.offsetTop;
-      h = e.offsetHeight;
-      w = e.offsetWidth;
+      const isTree = e.nodeType === 'canvas-datagrid-tree';
+      if (!isTree || !calculatedTree) {
+        x += e.offsetLeft;
+        y += e.offsetTop;
+        h = e.offsetHeight;
+        w = e.offsetWidth;
+      }
+      if (isTree) calculatedTree = true;
       e = e.offsetParent;
     }
     if (ignoreScrollOffset) {

package/lib/events/index.js

@@ -797,7 +797,26 @@ export default function (self) {
     }
     self.ellipsisCache = {};
   };
-  self.stopDragResize = function () {
+  self.stopDragResize = function (event) {
+    const pos = self.getLayerPos(event);
+
+    if (self.dragMode === 'ew-resize') {
+      const hasMoved = !!(pos.x - self.dragStart.x);
+      // Check that dragItem is selected or part of selection.
+      const dragItemIsSelected = self.isColumnSelected(
+        self.dragItem.columnIndex,
+      );
+
+      if (hasMoved && dragItemIsSelected) {
+        const width = Math.max(
+          self.resizingStartingWidth + pos.x - self.dragStart.x,
+          self.style.minColumnWidth,
+        );
+        // If the column is selected, resize it to width plus any other selected columns.
+        self.fitSelectedColumns(width);
+      }
+    }
+
     self.resize();
     document.body.removeEventListener(
       'mousemove',
@@ -956,6 +975,7 @@ export default function (self) {
           -1,
           self.activeCell.rowIndex,
         );
+      if (!self.reorderObject) return;
       self.reorderTarget = self.currentCell;
       self.reorderObject.dragOffset = {
         x: x,
@@ -1609,7 +1629,17 @@ 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'
@@ -1841,107 +1871,40 @@ export default function (self) {
       self.draw();
     });
   };
-  self.cut = function (e) {
-    self.copy(e);
-    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,
-        ]);
-      }
+  self.cut = function (event) {
+    if (self.dispatchEvent('cut', { NativeEvent: event })) {
+      return;
     }
 
-    if (self.dispatchEvent('cut', { NativeEvent: e, cells: affectedCells })) {
+    // Expecting instance of `ClipboardEvent` with `clipboardData` attribute
+    if (!self.hasFocus || !event.clipboardData) {
       return;
     }
 
+    self.copySelectedCellsToClipboard(event.clipboardData);
+
+    const affectedCells = self.clearSelectedCells();
+
+    self.dispatchEvent('aftercut', {
+      cells: affectedCells,
+    });
+
     requestAnimationFrame(() => self.draw());
+    event.preventDefault();
   };
-  self.copy = function (e) {
-    if (self.dispatchEvent('copy', { NativeEvent: e })) {
+  self.copy = function (event) {
+    if (self.dispatchEvent('copy', { NativeEvent: event })) {
       return;
     }
-    if (!self.hasFocus || !e.clipboardData) {
+
+    // Expecting instance of `ClipboardEvent` with `clipboardData` attribute
+    if (!self.hasFocus || !event.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) {
-      if (typeof v === 'number') return 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(String(column.name)) < 0) {
-            if (firstRowKeys.indexOf(String(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(event.clipboardData);
+
+    event.preventDefault();
   };
   return;
 }

package/lib/events/util.js

@@ -86,11 +86,50 @@ const parseData = function (data, mimeType) {
   return parseText(data);
 };
 
+const htmlSafe = function (value) {
+  if (typeof value !== 'string') return value;
+
+  return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+};
+
+const createTextString = function (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 = function (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,
 };

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 = {
@@ -242,6 +244,57 @@ 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 = [];
@@ -261,7 +314,7 @@ export default function (self, ctor) {
         );
         const columnName = schema[boundColumnIndex].name;
 
-        self.viewData[boundRowIndex][columnName] = null;
+        self.viewData[boundRowIndex][columnName] = '';
 
         affectedCells.push([
           rowIndex,
@@ -343,6 +396,27 @@ export default function (self, ctor) {
   self.createRowOrders = function () {
     self.orders.rows = fillArray(0, self.originalData.length - 1);
   };
+  self.fitSelectedColumns = function (width) {
+    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)) {
+        if (isNaN(width)) {
+          const column = schema[self.orders.columns[selectedColumn]];
+          self.fitColumnToValues(column.name);
+        } else {
+          self.sizes.columns[selectedColumn] = width;
+          self.dispatchEvent('resizecolumn', {
+            x: width,
+            y: self.resizingStartingHeight,
+            draggingItem: self.currentCell,
+          });
+        }
+      }
+    }
+  };
   self.getVisibleSchema = function () {
     return self.getSchema().filter(function (col) {
       return !col.hidden;

package/lib/publicMethods.js

@@ -342,18 +342,25 @@ export default function (self) {
    * @param {number} [offsetY=0] Percentage offset the cell should be from the top edge (not including headers).  The default is 0, meaning the cell will appear at the top edge. Valid values are 0 through 1. 1 = Bottom, 0 = Top, 0.5 = Center.
    */
   self.scrollIntoView = function (x, y, offsetX, offsetY) {
-    if (
-      self.visibleCells.filter(function (cell) {
-        return (
-          (cell.rowIndex === y || y === undefined) &&
-          (cell.columnIndex === x || x === undefined) &&
-          cell.x > 0 &&
-          cell.y > 0 &&
-          cell.x + cell.width < self.width &&
-          cell.y + cell.height < self.height
-        );
-      }).length === 0
-    ) {
+    const matched = self.visibleCells.filter(function (cell) {
+      return (
+        (cell.rowIndex === y || y === undefined) &&
+        (cell.columnIndex === x || x === undefined) &&
+        cell.x > 0 &&
+        cell.y > 0 &&
+        cell.x + cell.width < self.width &&
+        cell.y + cell.height < self.height
+      );
+    });
+    if (matched.length === 1 && x !== undefined && y !== undefined) {
+      // goto specific cell and its part be hidden by header
+      if (
+        matched[0].x < self.getRowHeaderCellWidth() ||
+        matched[0].y < self.getColumnHeaderCellHeight()
+      )
+        matched.length = 0;
+    }
+    if (matched.length === 0) {
       self.gotoCell(x, y, offsetX, offsetY);
     }
   };

package/package.json

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