canvas-datagrid 0.4.5 → 0.4.7

package/lib/defaults.js

@@ -61,6 +61,7 @@ export default function (self) {
       ['persistantSelectionMode', false],
       ['removeFilterOptionText', 'Remove filter on %s'],
       ['reorderDeadZone', 3],
+      ['resizeAfterDragged', false],
       ['resizeScrollZone', 20],
       ['rowGrabZoneSize', 5],
       ['columnGrabZoneSize', 30],
@@ -336,6 +337,8 @@ export default function (self) {
       ['reorderMarkerBorderWidth', 1.25],
       ['reorderMarkerIndexBorderColor', 'rgba(66, 133, 244, 1)'],
       ['reorderMarkerIndexBorderWidth', 2.75],
+      ['resizeMarkerColor', 'rgba(0, 0, 0, 0.2)'],
+      ['resizeMarkerSize', 2],
       ['rowGroupColumnWidth', 25],
       ['rowHeaderCellBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['rowHeaderCellBorderColor', 'rgba(200, 200, 200, 1)'],

package/lib/docs.js

@@ -82,6 +82,7 @@
  * @param {string} [args.rowGroupIndicatorPosition='bottom'] - Ths position of the row group indicator(icon), available values: 'top' and 'bottom'.
  * @param {boolean} [args.showOrderByOption=true] - Show an option on the context menu sort rows.
  * @param {boolean} [args.showPaste=false] - Show the paste option in the context menu when applicable.
+ * @param {boolean} [args.resizeAfterDragged] - Resize after the handle is dropped, similar to Excel.
  * @param {array} [args.schema=[]] - Sets the schema. See {@link canvasDatagrid.schema}.
  * @param {array} [args.data=[]] - Sets the data. See {@link canvasDatagrid.data}.
  * @param {number} [args.touchReleaseAnimationDurationMs=2000] - How long the ease animation runs after touch release.
@@ -306,8 +307,8 @@
  * @property {string} [activeCellSelectedBackgroundColor=rgba(236, 243, 255, 1)] - Style of activeCellSelectedBackgroundColor.
  * @property {string} [activeCellSelectedColor=rgba(0, 0, 0, 1)] - Style of activeCellSelectedColor.
  * @property {string} [activeCellVerticalAlignment=center] - Style of activeCellVerticalAlignment.
- * @property {string} [activeHeaderCellBackgroundColor=rgba(225, 225, 225, 1)] - Style of activeHeaderCellBackgroundColor.
- * @property {string} [activeHeaderCellColor=rgba(0, 0, 0, 1)] - Style of activeHeaderCellColor.
+ * @property {string} [activeColumnHeaderCellBackgroundColor=rgba(225, 225, 225, 1)] - Style of activeColumnHeaderCellBackgroundColor.
+ * @property {string} [activeColumnHeaderCellColor=rgba(0, 0, 0, 1)] - Style of activeColumnHeaderCellColor.
  * @property {string} [activeRowHeaderCellBackgroundColor=rgba(225, 225, 225, 1)] - Style of activeRowHeaderCellBackgroundColor.
  * @property {string} [activeRowHeaderCellColor=rgba(0, 0, 0, 1)] - Style of activeRowHeaderCellColor.
  * @property {number} [autocompleteBottomMargin=60] - Style of autocompleteBottomMargin.
@@ -400,9 +401,12 @@
  * @property {number} [gridBorderWidth=1] - Style of gridBorderWidth.
  * @property {string} [groupIndicatorColor=rgba(155, 155, 155, 1)'] - Foreground color of the group indicator(icon).
  * @property {string} [groupIndicatorBackgroundColor=rgba(255, 255, 255, 1)'] - Background color of the group indicator(icon).
- * @property {string} [columnHeaderCellCapBackgroundColor=rgba(240, 240, 240, 1)] - Style of columnHeaderCellBackgroundColor.
- * @property {string} [columnHeaderCellCapBorderColor=rgba(172, 172, 172, 1)] - Style of columnHeaderCellBackgroundColor.
- * @property {number} [columnHeaderCellCapBorderWidth=1] - Style of columnHeaderCellBackgroundColor.
+ * @property {string} [columnHeaderCellBackgroundColor=rgba(240, 240, 240, 1)] - Style of columnHeaderCellBackgroundColor.
+ * @property {string} [columnHeaderCellBorderColor=rgba(172, 172, 172, 1)] - Style of columnHeaderCellBackgroundColor.
+ * @property {number} [columnHeaderCellBorderWidth=1] - Style of columnHeaderCellBackgroundColor.
+ * @property {string} [columnHeaderCellCapBackgroundColor=rgba(240, 240, 240, 1)] - Style of columnHeaderCellCapBackgroundColor.
+ * @property {string} [columnHeaderCellCapBorderColor=rgba(172, 172, 172, 1)] - Style of columnHeaderCellCapBackgroundColor.
+ * @property {number} [columnHeaderCellCapBorderWidth=1] - Style of columnHeaderCellCapBackgroundColor.
  * @property {string} [columnHeaderCellBorderColor=rgba(152, 152, 152, 1)] - Style of columnHeaderCellBorderColor.
  * @property {number} [columnHeaderCellBorderWidth=0.25] - Style of columnHeaderCellBorderWidth.
  * @property {string} [columnHeaderCellColor=rgba(50, 50, 50, 1)] - Style of columnHeaderCellColor.
@@ -426,6 +430,7 @@
  * @property {number} [columnHeaderOrderByArrowWidth=13] - Style of columnHeaderOrderByArrowWidth.
  * @property {number} [rowHeaderCellWidth=57] - Style of rowHeaderCellWidth.
  * @property {number} [minColumnWidth=45] - Style of minColumnWidth.
+ * @property {(number|string)} [height=auto] - Style of height.
  * @property {number} [minHeight=24] - Style of minHeight.
  * @property {number} [minRowHeight=24] - Style of minRowHeight.
  * @property {string} [name=default] - Style of name.
@@ -434,6 +439,8 @@
  * @property {number} [reorderMarkerBorderWidth=1.25] - Style of reorderMarkerBorderWidth.
  * @property {string} [reorderMarkerIndexBorderColor=rgba(66, 133, 244, 1)] - Style of reorderMarkerIndexBorderColor.
  * @property {number} [reorderMarkerIndexBorderWidth=2.75] - Style of reorderMarkerIndexBorderWidth.
+ * @property {string} [resizeMarkerColor=rgba(0, 0, 0, 0.2)] - Style of resizeMarkerColor.
+ * @property {number} [resizeMarkerSize=2] - Style of resizeMarkerSize.
  * @property {number} [rowGroupColumnWidth=25] - Style of rowGroupColumnWidth.
  * @property {string} [rowHeaderCellBackgroundColor=rgba(240, 240, 240, 1)] - Style of rowHeaderCellBackgroundColor.
  * @property {string} [rowHeaderCellBorderColor=rgba(152, 152, 152, 1)] - Style of rowHeaderCellBorderColor.
@@ -493,6 +500,7 @@
  * @property {number} [frozenMarkerWidth=1] - Style of frozenMarkerWidth.
  * @property {string} [overflowY=auto] - When set to hidden, vertical scroll bar will be hidden.  When set to auto vertical scroll bar will appear when data overflows the height.  When set to scroll the vertical scrollbar will always be visible.
  * @property {string} [overflowX=auto] - When set to hidden, horizontal scroll bar will be hidden.  When set to auto horizontal scroll bar will appear when data overflows the width.  When set to scroll the horizontal scrollbar will always be visible.
+ * @property {(number|string)} [width=auto] - Style of width.
 
  ['', 'normal'],
  */

package/lib/dom.js

@@ -755,6 +755,7 @@ export default function (self) {
       Object.keys(css[className]).map(function (prop) {
         el.style[prop] = css[className][prop];
       });
+      el.className = className;
     }
     return;
   };
@@ -803,7 +804,7 @@ export default function (self) {
     self.eventParent.addEventListener('mousedown', self.mousedown, false);
     self.eventParent.addEventListener('dblclick', self.dblclick, false);
     self.eventParent.addEventListener('click', self.click, false);
-    window.addEventListener('mouseup', self.mouseup, false);
+    self.eventParent.addEventListener('mouseup', self.mouseup, false);
     window.addEventListener('mousemove', self.mousemove);
     self[self.isChildGrid ? 'parentGrid' : 'eventParent'].addEventListener(
       'wheel',

package/lib/draw.js

@@ -2,6 +2,8 @@
 /*globals XMLSerializer: false, define: true, Blob: false, MutationObserver: false, requestAnimationFrame: false, performance: false, btoa: false*/
 'use strict';
 
+import { isCellSelected } from './selections/util';
+
 export default function (self) {
   var perfCounters = [],
     cachedImagesDrawn = false,
@@ -995,21 +997,23 @@ export default function (self) {
       propPrefix,
       offsetPoint,
     ) {
-      offsetPoint = offsetPoint || { x: 0, y: 0 };
       cell.selectionBorder = '';
-      if (
-        !cell.isRowHeader &&
-        self.selections[cell.rowIndex + -offsetPoint.y] &&
-        self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-          cell.columnIndex + -offsetPoint.x,
-        ) !== -1
-      ) {
+      // TODO: optimize it by `getSelectionStateFromCells`
+      const isSelected = offsetPoint
+        ? (row, col) =>
+            isCellSelected(
+              self.selections,
+              row - offsetPoint.y,
+              col - offsetPoint.x,
+            )
+        : (row, col) => isCellSelected(self.selections, row, col);
+      const lastColumnIndex = Math.max(schema.length - 1, 0);
+      const lastRowIndex = Math.max(viewData.length - 1, 0);
+      const { isRowHeader, rowIndex, columnIndex } = cell;
+
+      if (!isRowHeader && isSelected(rowIndex, columnIndex)) {
         if (
-          (!self.selections[cell.rowIndex - 1 + -offsetPoint.y] ||
-            self.selections[cell.rowIndex - 1 + -offsetPoint.y].indexOf(
-              cell.columnIndex + -offsetPoint.x,
-            ) === -1 ||
-            cell.rowIndex === 0) &&
+          (!isSelected(rowIndex - 1, columnIndex) || rowIndex === 0) &&
           !cell.isHeader
         ) {
           drawArray.push([cell, 't']);
@@ -1017,32 +1021,21 @@ export default function (self) {
           cell[propPrefix + 'Border'] += 't';
         }
         if (
-          !self.selections[cell.rowIndex + 1 + -offsetPoint.y] ||
-          self.selections[cell.rowIndex + 1 + -offsetPoint.y].indexOf(
-            cell.columnIndex + -offsetPoint.x,
-          ) === -1
+          rowIndex >= lastRowIndex ||
+          !isSelected(rowIndex + 1, columnIndex)
         ) {
           drawArray.push([cell, 'b']);
           cell[propPrefix + 'BorderBottom'] = true;
           cell[propPrefix + 'Border'] += 'b';
         }
-        if (
-          !self.selections[cell.rowIndex + -offsetPoint.y] ||
-          cell.columnIndex === 0 ||
-          self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-            cell.columnIndex - 1 + -offsetPoint.x,
-          ) === -1
-        ) {
+        if (columnIndex === 0 || !isSelected(rowIndex, columnIndex - 1)) {
           drawArray.push([cell, 'l']);
           cell[propPrefix + 'BorderLeft'] = true;
           cell[propPrefix + 'Border'] += 'l';
         }
         if (
-          !self.selections[cell.rowIndex + -offsetPoint.y] ||
-          cell.columnIndex === schema.length ||
-          self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-            cell.columnIndex + 1 + -offsetPoint.x,
-          ) === -1
+          columnIndex >= lastColumnIndex ||
+          !isSelected(rowIndex, columnIndex + 1)
         ) {
           drawArray.push([cell, 'r']);
           cell[propPrefix + 'BorderRight'] = true;
@@ -1051,6 +1044,10 @@ export default function (self) {
       }
     }
     function drawCell(rowData, rowOrderIndex, rowIndex) {
+      const isActiveRowHeader =
+        self.orders.rows[self.activeCell.rowIndex] === rowOrderIndex ||
+        self.isRowSelected(rowOrderIndex);
+
       return function drawEach(header, headerIndex, columnOrderIndex) {
         if (header.hidden) {
           return 0;
@@ -1066,9 +1063,12 @@ export default function (self) {
             self.filterable.rows.includes(rowIndex) &&
             self.filterable.columns.includes(headerIndex),
           wrap = self.style.cellWhiteSpace !== 'nowrap',
-          selected =
-            self.selections[rowOrderIndex] &&
-            self.selections[rowOrderIndex].indexOf(columnOrderIndex) !== -1,
+          // TODO: optimize it by `getSelectionStateFromCells`
+          selected = isCellSelected(
+            self.selections,
+            rowOrderIndex,
+            columnOrderIndex,
+          ),
           hovered =
             self.hovers.rowIndex === rowOrderIndex &&
             (self.attributes.hoverMode === 'row' ||
@@ -1082,17 +1082,6 @@ export default function (self) {
           isColumnHeaderCellCap = cellStyle === 'columnHeaderCellCap',
           rawValue = rowData ? rowData[header.name] : undefined,
           isGrid = header.type === 'canvas-datagrid',
-          activeHeader =
-            (self.orders.rows[self.activeCell.rowIndex] === rowOrderIndex ||
-              self.selectedRows.indexOf(rowOrderIndex) >= 0 ||
-              self.orders.columns[self.activeCell.columnIndex] ===
-                headerIndex ||
-              self.selectedColumns.indexOf(headerIndex) >= 0) &&
-            (columnOrderIndex === -1 || rowOrderIndex === -1)
-              ? isRowHeader
-                ? 'activeRowHeaderCell'
-                : 'activeColumnHeaderCell'
-              : false,
           val,
           f = self.formatters[header.type || 'string'],
           orderByArrowSize = 0,
@@ -1103,6 +1092,19 @@ export default function (self) {
             row: rowData,
             header: header,
           };
+
+        const isActiveColumnHeader =
+          self.orders.columns[self.activeCell.columnIndex] === headerIndex ||
+          self.isColumnSelected(self.activeCell.viewColumnIndex);
+        let activeHeader = false;
+        if (
+          (isActiveColumnHeader || isActiveRowHeader) &&
+          (columnOrderIndex === -1 || rowOrderIndex === -1)
+        )
+          activeHeader = isRowHeader
+            ? 'activeRowHeaderCell'
+            : 'activeColumnHeaderCell';
+
         if (isColumnHeaderCellCap) {
           cellWidth = w - x;
         }
@@ -2447,10 +2449,7 @@ export default function (self) {
       self.ctx.lineWidth = self.style.reorderMarkerBorderWidth;
       self.ctx.strokeStyle = self.style.reorderMarkerBorderColor;
       if (self.dragMode === 'row-reorder') {
-        for (var k = 0; k < self.selections.length; k++) {
-          if (!self.selections[k] || k == self.reorderObject.rowIndex) continue;
-          b.height += self.getRowHeight(k);
-        }
+        b.height = self.getSelectedRowsHeight();
         b.width = w;
         b.x = 0;
         m.width = w;
@@ -2461,7 +2460,7 @@ export default function (self) {
         self.ctx.lineWidth = self.style.reorderMarkerIndexBorderWidth;
         self.ctx.strokeStyle = self.style.reorderMarkerIndexBorderColor;
         if (
-          self.selectedRows.indexOf(self.reorderTarget.sortRowIndex) === -1 &&
+          !self.isRowSelected(self.reorderTarget.sortRowIndex) &&
           self.currentCell.rowIndex !== self.reorderObject.rowIndex &&
           self.currentCell.rowIndex > -1 &&
           self.currentCell.rowIndex < l
@@ -2474,14 +2473,7 @@ export default function (self) {
           );
         }
       } else if (self.dragMode === 'column-reorder' && self.reorderObject) {
-        var selectedColumns = self.selections[0];
-        if (selectedColumns) {
-          for (var k = 1; k < selectedColumns.length; k++) {
-            b.width += self.getColumnWidth(
-              self.orders.columns[selectedColumns[k]],
-            );
-          }
-        }
+        b.width = self.getSelectedColumnsWidth();
         b.height = h;
         b.y = 0;
         m.height = h;
@@ -2493,8 +2485,7 @@ export default function (self) {
         self.ctx.lineWidth = self.style.reorderMarkerIndexBorderWidth;
         self.ctx.strokeStyle = self.style.reorderMarkerIndexBorderColor;
         if (
-          self.selectedColumns.indexOf(self.reorderTarget.sortColumnIndex) ===
-            -1 &&
+          !self.isColumnSelected(self.reorderTarget.sortColumnIndex) &&
           self.currentCell.sortColumnIndex !==
             self.reorderObject.sortColumnIndex &&
           self.reorderTarget.columnIndex !== self.reorderObject.columnIndex &&
@@ -2510,6 +2501,31 @@ export default function (self) {
         }
       }
     }
+    function drawResizeMarkers() {
+      if (
+        !self.attributes.resizeAfterDragged ||
+        !self.draggingItem ||
+        !self.pendingDragResize ||
+        (self.dragMode != 'ew-resize' && self.dragMode != 'ns-resize')
+      ) {
+        return;
+      }
+
+      const resizingRow = self.dragMode == 'ns-resize';
+      const height = resizingRow ? self.style.resizeMarkerSize : self.height;
+      const width = resizingRow ? self.width : self.style.resizeMarkerSize;
+      const minX =
+        self.dragStart.x -
+        (self.resizingStartingWidth - self.style.minColumnWidth);
+      const minY =
+        self.dragStart.y -
+        (self.resizingStartingHeight - self.style.minRowHeight);
+      const x = resizingRow ? 0 : Math.max(self.pendingDragResize.x, minX);
+      const y = !resizingRow ? 0 : Math.max(self.pendingDragResize.y, minY);
+
+      self.ctx.fillStyle = self.style.resizeMarkerColor;
+      fillRect(x, y, width, height);
+    }
     function drawBorder() {
       self.ctx.lineWidth = self.style.gridBorderWidth;
       self.ctx.strokeStyle = self.style.gridBorderColor;
@@ -3064,6 +3080,7 @@ export default function (self) {
     drawSelectionHandles();
     drawReorderMarkers();
     drawMoveMarkers();
+    drawResizeMarkers();
     drawBorder();
     drawSelectionBorders();
     drawScrollBars();