canvas-datagrid 0.3.22 → 0.4.0

package/lib/events/index.js

@@ -130,6 +130,8 @@ export default function (self) {
       l = (self.viewData || []).length,
       columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
       rowHeaderCellWidth = self.getRowHeaderCellWidth(),
+      topGroupAreaHeight = self.getColumnGroupAreaHeight(),
+      leftGroupAreaWidth = self.getRowGroupAreaWidth(),
       ch = self.style.cellHeight,
       s = self.getSchema();
     // sets actual DOM canvas element
@@ -148,8 +150,10 @@ export default function (self) {
       self.scrollBox.verticalBoxVisible = dataHeight > self.scrollBox.height;
     }
     function setScrollBoxSize() {
-      self.scrollBox.width = self.width - rowHeaderCellWidth;
-      self.scrollBox.height = self.height - columnHeaderCellHeight;
+      self.scrollBox.width =
+        self.width - rowHeaderCellWidth - leftGroupAreaWidth;
+      self.scrollBox.height =
+        self.height - columnHeaderCellHeight - topGroupAreaHeight;
     }
     function setCanvasSize() {
       if (self.isChildGrid) {
@@ -157,8 +161,13 @@ export default function (self) {
       }
       dims = {
         // HACK +1 ? maybe it's a magic cell border?  Required to line up properly in auto height mode.
-        height: columnHeaderCellHeight + dataHeight + cellBorder + 1,
-        width: dataWidth + rowHeaderCellWidth + cellBorder,
+        height:
+          columnHeaderCellHeight +
+          topGroupAreaHeight +
+          dataHeight +
+          cellBorder +
+          1,
+        width: dataWidth + rowHeaderCellWidth + cellBorder + leftGroupAreaWidth,
       };
       ['width', 'height'].forEach(function (dim) {
         //TODO: support inherit
@@ -190,18 +199,31 @@ export default function (self) {
     if (l > 1) {
       self.scrollCache.y[x] = dataHeight;
     }
+    const collapsedColumnGroups = self.getCollapsedColumnGroups();
+    const isColumnCollapsed = (columnIndex) =>
+      collapsedColumnGroups.findIndex(
+        (group) => columnIndex >= group.from && columnIndex <= group.to,
+      ) >= 0;
+    /** @type {number} it will be used in `reduceSchema` only  */
+    let frozenWidth = 0;
     dataWidth =
       s.reduce(function reduceSchema(accumulator, column, columnIndex) {
         // intentional redefintion of column.  This causes scrollCache to be in the correct order
-        column = s[self.orders.columns[columnIndex]];
-        if (column.hidden) {
+        const schemaIndex = self.orders.columns[columnIndex];
+        const columnWidth = self.getColumnWidth(schemaIndex);
+        column = s[schemaIndex];
+        if (!column.hidden && !isColumnCollapsed(columnIndex))
+          accumulator += columnWidth;
+        if (columnIndex < self.frozenColumn) {
           self.scrollCache.x[columnIndex] = accumulator;
-          return accumulator;
+          frozenWidth = accumulator;
+        } else {
+          self.scrollCache.x[columnIndex] = Math.max(
+            frozenWidth + columnWidth,
+            accumulator,
+          );
         }
-        var va =
-          accumulator + self.getColumnWidth(self.orders.columns[columnIndex]);
-        self.scrollCache.x[columnIndex] = va;
-        return va;
+        return accumulator;
       }, 0) || 0;
     if (self.attributes.showNewRow) {
       dataHeight += ch;
@@ -224,8 +246,9 @@ export default function (self) {
     }
     /// calculate scroll bar dimensions
     // non-controversial
-    self.scrollBox.top = columnHeaderCellHeight + columnHeaderCellBorder;
-    self.scrollBox.left = rowHeaderCellWidth;
+    self.scrollBox.top =
+      columnHeaderCellHeight + topGroupAreaHeight + columnHeaderCellBorder;
+    self.scrollBox.left = rowHeaderCellWidth + leftGroupAreaWidth;
     // width and height of scroll box
     setScrollBoxSize();
     // is the data larger than the scroll box
@@ -274,6 +297,7 @@ export default function (self) {
     self.scrollBox.heightBoxRatio =
       (self.scrollBox.height -
         columnHeaderCellHeight -
+        topGroupAreaHeight -
         self.scrollCache.y[self.frozenRow]) /
       dataHeight;
     self.scrollBox.scrollBoxHeight =
@@ -291,9 +315,14 @@ export default function (self) {
     );
     // horizontal
     n.x += rowHeaderCellWidth;
-    n.y += self.height - self.style.scrollBarWidth - d;
+    n.y += self.height - self.style.scrollBarWidth - d - topGroupAreaHeight;
     n.width =
-      self.width - self.style.scrollBarWidth - rowHeaderCellWidth - d - m;
+      self.width -
+      self.style.scrollBarWidth -
+      rowHeaderCellWidth -
+      leftGroupAreaWidth -
+      d -
+      m;
     n.height = self.style.scrollBarWidth + self.style.scrollBarBorderWidth + d;
     // horizontal box
     nb.y = n.y + self.style.scrollBarBoxMargin;
@@ -302,13 +331,19 @@ export default function (self) {
     // vertical
     v.x +=
       self.width -
+      leftGroupAreaWidth -
       self.style.scrollBarWidth -
       self.style.scrollBarBorderWidth -
       d;
     v.y += columnHeaderCellHeight + self.scrollCache.y[self.frozenRow];
     v.width = self.style.scrollBarWidth + self.style.scrollBarBorderWidth + d;
     v.height =
-      self.height - columnHeaderCellHeight - self.style.scrollBarWidth - d - m;
+      self.height -
+      columnHeaderCellHeight -
+      topGroupAreaHeight -
+      self.style.scrollBarWidth -
+      d -
+      m;
     // vertical box
     vb.x = v.x + self.style.scrollBarBoxMargin;
     vb.y += self.scrollCache.y[self.frozenRow];
@@ -469,6 +504,7 @@ export default function (self) {
           rowIndex: cell.rowIndex,
           columnIndex: cell.columnIndex,
           onFilterButton: false,
+          onCellTreeIcon: false,
         };
         if (
           cell.isFilterable &&
@@ -488,6 +524,26 @@ export default function (self) {
           self.hovers.onFilterButton = true;
           self.draw();
         }
+        if (cell.isRowTree || cell.isColumnTree) {
+          const pc = cell.isRowTree
+            ? self.cellTree.rows[cell.rowIndex].parentCount
+            : 0;
+          const rc = self.style.cellTreeIconWidth * self.scale,
+            rx =
+              cell.x +
+              cell.paddingLeft +
+              self.canvasOffsetLeft +
+              self.style.cellTreeIconMarginLeft +
+              pc * (rc + cell.paddingLeft),
+            ry =
+              cell.y +
+              self.canvasOffsetTop +
+              self.style.cellTreeIconMarginTop * self.scale;
+          if (x >= rx && x <= rx + rc && y >= ry && y < ry + rc) {
+            self.hovers.onCellTreeIcon = true;
+            self.draw();
+          }
+        }
       }
       if (self.selecting || self.reorderObject) {
         delta = {
@@ -549,12 +605,20 @@ export default function (self) {
               }
               self.draw();
               return;
+            } else if (
+              cell.hovered &&
+              self.hovers.onCellTreeIcon &&
+              e.type == 'mousedown'
+            ) {
+              self.toggleCollapseTree(cell.rowIndex, cell.columnIndex);
+              return;
             } else {
               self.selectedFilterButton = {
                 columnIndex: -1,
                 rowIndex: -1,
               };
               if (self.hovers.onFilterButton) return;
+              if (self.hovers.onCellTreeIcon) return;
               if (!self.dragAddToSelection && cell.rowIndex !== undefined) {
                 if (
                   self.selections[cell.rowIndex] &&
@@ -627,6 +691,12 @@ export default function (self) {
         }
       }
     }
+    const columnGroup = self.getColumnGroupAt(self.mouse.x, self.mouse.y);
+    if (columnGroup) self.cursor = 'pointer';
+
+    const rowGroup = self.getRowGroupAt(self.mouse.x, self.mouse.y);
+    if (rowGroup) self.cursor = 'pointer';
+
     self.cellBoundaryCrossed = false;
     self.rowBoundaryCrossed = false;
     self.columnBoundaryCrossed = false;
@@ -675,9 +745,25 @@ export default function (self) {
     ) {
       return;
     }
+
+    let group = self.getColumnGroupAt(pos.x, pos.y);
+    if (!group) group = self.getRowGroupAt(pos.x, pos.y);
+    if (group) {
+      if (self.toggleGroup(group)) {
+        self.setStorageData();
+        self.refresh();
+        return;
+      }
+    }
+
     if (!self.hasFocus) {
       return;
     }
+
+    const leftOffset = self.getRowGroupAreaWidth();
+    const topOffset = self.getColumnGroupAreaHeight();
+    const xInGrid = pos.x - leftOffset;
+    const yInGrid = pos.y - topOffset;
     if (
       ['rowHeaderCell', 'columnHeaderCell'].indexOf(self.currentCell.style) ===
         -1 &&
@@ -715,17 +801,17 @@ export default function (self) {
         if (
           self.currentCell.style === 'rowHeaderCell' &&
           self.attributes.tree &&
-          pos.x > 0 &&
-          pos.x - self.currentCell.x <
+          xInGrid > 0 &&
+          xInGrid - self.currentCell.x <
             self.style.treeArrowWidth +
               self.style.treeArrowMarginLeft +
               self.style.treeArrowMarginRight +
               self.style.treeArrowClickRadius &&
-          pos.y - self.currentCell.y <
+          yInGrid - self.currentCell.y <
             self.style.treeArrowHeight +
               self.style.treeArrowMarginTop +
               self.style.treeArrowClickRadius &&
-          pos.y > 0
+          yInGrid > 0
         ) {
           self.toggleTree(i.rowIndex);
           return;
@@ -765,7 +851,6 @@ export default function (self) {
       self.dragMode === 'ew-resize'
     ) {
       self.resize(true);
-      self.scrollBox.scrollLeft += x;
     }
     if (self.dragMode === 'ew-resize') {
       self.sizes.columns[
@@ -797,30 +882,24 @@ export default function (self) {
     }
     self.ellipsisCache = {};
   };
-  self.stopDragResize = function (e) {
-    const pos = self.getLayerPos(e);
-    const hasMoved = !!(pos.x - self.dragStart.x);
-    const width = self.resizingStartingWidth + pos.x - self.dragStart.x;
+  self.stopDragResize = function (event) {
+    const pos = self.getLayerPos(event);
 
     if (self.dragMode === 'ew-resize') {
-      const selectedColumns = self.selections[0];
+      const hasMoved = !!(pos.x - self.dragStart.x);
+      // Check that dragItem is selected or part of selection.
       const dragItemIsSelected = self.isColumnSelected(
         self.dragItem.columnIndex,
       );
 
-      if (dragItemIsSelected)
-        for (const selectedColumnIndex of selectedColumns) {
-          const boundColumnIndex = self.getBoundColumnIndexFromViewColumnIndex(
-            selectedColumnIndex,
-          );
-
-          if (
-            hasMoved &&
-            dragItemIsSelected &&
-            self.isColumnSelected(selectedColumnIndex)
-          )
-            self.sizes.columns[boundColumnIndex] = width;
-        }
+      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();
@@ -981,6 +1060,7 @@ export default function (self) {
           -1,
           self.activeCell.rowIndex,
         );
+      if (!self.reorderObject) return;
       self.reorderTarget = self.currentCell;
       self.reorderObject.dragOffset = {
         x: x,
@@ -1132,6 +1212,8 @@ export default function (self) {
 
     self.ignoreNextClick = true;
     self.freezeMarkerPosition = pos;
+    pos.x -= self.getRowGroupAreaWidth();
+    pos.y -= self.getColumnGroupAreaHeight();
     if (
       self.currentCell &&
       self.currentCell.rowIndex !== undefined &&
@@ -1652,9 +1734,21 @@ export default function (self) {
       self.autosize();
     } else if (
       ['cell', 'activeCell'].includes(self.currentCell.style) &&
-      !self.hovers.onFilterButton
+      !self.hovers.onFilterButton &&
+      !self.hovers.onCellTreeIcon
     ) {
-      self.beginEditAt(self.currentCell.columnIndex, self.currentCell.rowIndex);
+      if (self.currentCell.isRowTree || self.currentCell.isColumnTree) {
+        self.cellTreeExpandCollapse(
+          self.currentCell.rowIndex,
+          self.currentCell.columnIndex,
+        );
+        self.draw();
+      } else {
+        self.beginEditAt(
+          self.currentCell.columnIndex,
+          self.currentCell.rowIndex,
+        );
+      }
     }
   };
   self.scrollWheel = function (e) {
@@ -1876,17 +1970,17 @@ export default function (self) {
       self.draw();
     });
   };
-  self.cut = function (e) {
-    if (self.dispatchEvent('cut', { NativeEvent: e })) {
+  self.cut = function (event) {
+    if (self.dispatchEvent('cut', { NativeEvent: event })) {
       return;
     }
 
     // Expecting instance of `ClipboardEvent` with `clipboardData` attribute
-    if (!self.hasFocus || !e.clipboardData) {
+    if (!self.hasFocus || !event.clipboardData) {
       return;
     }
 
-    self.copySelectedCellsToClipboard(e.clipboardData);
+    self.copySelectedCellsToClipboard(event.clipboardData);
 
     const affectedCells = self.clearSelectedCells();
 
@@ -1895,20 +1989,21 @@ export default function (self) {
     });
 
     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;
     }
 
     // Expecting instance of `ClipboardEvent` with `clipboardData` attribute
-    if (!self.hasFocus || !e.clipboardData) {
+    if (!self.hasFocus || !event.clipboardData) {
       return;
     }
 
-    self.copySelectedCellsToClipboard(e.clipboardData);
+    self.copySelectedCellsToClipboard(event.clipboardData);
 
-    e.preventDefault();
+    event.preventDefault();
   };
   return;
 }

package/lib/events/util.js

@@ -86,12 +86,13 @@ const parseData = function (data, mimeType) {
   return parseText(data);
 };
 
-const htmlSafe = (value) => {
-  if (typeof value === 'number') return value;
+const htmlSafe = function (value) {
+  if (typeof value !== 'string') return value;
+
   return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
 };
 
-const createTextString = (selectedData, isNeat) => {
+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)
@@ -101,7 +102,7 @@ const createTextString = (selectedData, isNeat) => {
   return selectedData.map((row) => Object.values(row).join('\t')).join('\n');
 };
 
-const createHTMLString = (selectedData, isNeat) => {
+const createHTMLString = function (selectedData, isNeat) {
   if (!isNeat) return createTextString(selectedData, isNeat);
 
   // If isNeat, we can create a HTML table with the selected data.
@@ -111,7 +112,7 @@ const createHTMLString = (selectedData, isNeat) => {
       (row) =>
         '<tr>' +
         Object.values(row)
-          .map((value) => '<td>' + htmlSafe(value) + '</td>')
+          .map((value) => ['<td>', htmlSafe(value), '</td>'].join(''))
           .join('') +
         '</tr>',
     )