canvas-datagrid 0.4.3 → 0.4.4

package/dist/types.d.ts

@@ -463,16 +463,16 @@ declare class canvasDatagrid {
      * @param dontDraw - Suppress the draw method after the selection change.
      */
     static selectAll(dontDraw: boolean): void;
-    /**
-     * Returns true if indices of columns next to the selected columnIndex is selected on every row.
-     * @param columnIndex - The column index to check.
-     */
-    static isMultiColumnsSelected(columnIndex: number): void;
     /**
      * Returns true if the selected columnIndex is selected on every row.
      * @param columnIndex - The column index to check.
      */
     static isColumnSelected(columnIndex: number): void;
+    /**
+     * Returns true if the selected rowIndex is selected on every column.
+     * @param rowIndex - The row index to check.
+     */
+    static isRowSelected(rowIndex: number): void;
     /**
      * Runs the defined method on each selected cell.
      * @param fn - The function to execute.  The signature of the function is: (data, rowIndex, columnName).
@@ -519,15 +519,19 @@ declare class canvasDatagrid {
     /**
      * Hide column/columns
      */
-    static hideColumns: any;
+    static hideColumns(beginColumnOrderIndex: number, endColumnOrderIndex?: number): void;
+    /**
+     * Unihde column/columns
+     */
+    static unhideColumns(beginColumnOrderIndex: number, endColumnOrderIndex?: number): void;
     /**
      * Hide rows
      */
-    static hideRows: any;
+    static hideRows(beginRowIndex: number, endRowIndex: number): void;
     /**
      * Unhide rows
      */
-    static unhideRows: any;
+    static unhideRows(beginRowIndex: number, endRowIndex: number): void;
     /**
      * Resizes a column to fit the longest value in the column. Call without a value to resize all columns.
      * Warning, can be slow on very large record sets (1m records ~3-5 seconds on an i7).

package/lib/contextMenu.js

@@ -1128,7 +1128,7 @@ export default function (self) {
     function createDisposeEvent() {
       requestAnimationFrame(function () {
         document.addEventListener('click', self.disposeContextMenu);
-        document.removeEventListener('mouseup', createDisposeEvent);
+        window.removeEventListener('mouseup', createDisposeEvent);
       });
     }
     var contextPosition,
@@ -1176,7 +1176,7 @@ export default function (self) {
       }
       self.contextMenu = createContextMenu(ev, contextPosition, items);
       if (e.type == 'mousedown') {
-        document.addEventListener('mouseup', createDisposeEvent);
+        window.addEventListener('mouseup', createDisposeEvent);
       } else {
         createDisposeEvent();
       }

package/lib/defaults.js

@@ -295,14 +295,16 @@ export default function (self) {
       ['filterButtonHoverBackgroundColor', 'rgba(235, 235, 235, 1)'],
       ['filterButtonMenuOffsetTop', 10],
       ['filterButtonWidth', 20],
-      ['frozenMarkerHoverColor', 'rgba(236, 243, 255, 1)'],
-      ['frozenMarkerHoverBorderColor', 'rgba(110, 168, 255, 1)'],
-      ['frozenMarkerActiveColor', 'rgba(236, 243, 255, 1)'],
-      ['frozenMarkerActiveBorderColor', 'rgba(110, 168, 255, 1)'],
-      ['frozenMarkerColor', 'rgba(222, 222, 222, 1)'],
-      ['frozenMarkerBorderColor', 'rgba(168, 168, 168, 1)'],
+      ['frozenMarkerHoverColor', 'rgba(165, 198, 254, 1)'],
+      ['frozenMarkerHoverBorderColor', 'rgba(165, 198, 254, 1)'],
+      ['frozenMarkerActiveColor', 'rgba(165, 198, 254, 0.2)'],
+      ['frozenMarkerActiveBorderColor', 'rgba(165, 198, 254, 0.5)'],
+      ['frozenMarkerActiveHeaderColor', 'rgba(165, 198, 254, 1)'],
+      ['frozenMarkerColor', 'rgba(221, 221, 221, 1)'],
+      ['frozenMarkerBorderColor', 'rgba(221, 221, 221, 1)'],
       ['frozenMarkerBorderWidth', 1],
-      ['frozenMarkerWidth', 2],
+      ['frozenMarkerHeaderColor', 'rgba(188, 188, 188, 1)'],
+      ['frozenMarkerWidth', 4],
       ['groupingAreaBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['gridBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['gridBorderCollapse', 'collapse'],

package/lib/docs.js

@@ -973,6 +973,22 @@
  * @param {object} e.ctx Canvas context.
  * @param {canvasDatagrid.cell} e.cell The cell being moved out of.
  */
+/**
+ * Fires column(s) are being hidden
+ * @event
+ * @name canvasDatagrid#columnhide
+ * @param {object} e Event object.
+ * @param {object} e.ctx Canvas context.
+ * @param {columnIndex} e.columnIndex Index of column being hidden.
+ */
+/**
+ * Fires column(s) are being unhidden
+ * @event
+ * @name canvasDatagrid#columnunhide
+ * @param {object} e Event object.
+ * @param {object} e.ctx Canvas context.
+ * @param {columnIndex} e.columnIndex Index of column being unhidden.
+ */
 /**
  * Fires when the mouse enters a row.
  * @event

package/lib/dom.js

@@ -370,6 +370,19 @@ export default function (self) {
     var shouldClearCellValue = cellValueIsEmpty || inEnterMode;
 
     self.input.value = shouldClearCellValue ? '' : cell.value;
+    let width = Math.round(
+      self.input.value.length *
+        parseInt(self.style.editCellFontSize, 10) *
+        0.7 *
+        self.scale,
+    );
+    if (width + self.style.cellPaddingLeft < cell.width) {
+      width = cell.width - self.style.cellPaddingLeft;
+    } else if (width > self.width - cell.x - self.style.scrollBarWidth) {
+      width = self.width - cell.x - self.style.scrollBarWidth;
+      self.input.style.height = 'auto';
+    }
+    self.input.style.width = width + 'px';
     self.input.focus();
     self.input.addEventListener('click', self.stopPropagation);
     self.input.addEventListener('dblclick', self.stopPropagation);
@@ -450,6 +463,20 @@ export default function (self) {
         }
         self.scrollIntoView(nx, ny);
         self.beginEditAt(nx, ny, e);
+      } else {
+        let width = Math.round(
+          self.input.value.length *
+            parseInt(self.style.editCellFontSize, 10) *
+            0.7 *
+            self.scale,
+        );
+        if (width + self.style.cellPaddingLeft < cell.width) {
+          width = cell.width - self.style.cellPaddingLeft;
+        } else if (width > self.width - cell.x - self.style.scrollBarWidth) {
+          width = self.width - cell.x - self.style.scrollBarWidth;
+          self.input.style.height = 'auto';
+        }
+        self.input.style.width = width + 'px';
       }
     });
 
@@ -773,11 +800,11 @@ export default function (self) {
     });
     self.eventParent.addEventListener('scroll', self.resize, false);
     self.eventParent.addEventListener('touchstart', self.touchstart, false);
-    self.eventParent.addEventListener('mouseup', self.mouseup, false);
     self.eventParent.addEventListener('mousedown', self.mousedown, false);
     self.eventParent.addEventListener('dblclick', self.dblclick, false);
     self.eventParent.addEventListener('click', self.click, false);
-    document.body.addEventListener('mousemove', self.mousemove);
+    window.addEventListener('mouseup', self.mouseup, false);
+    window.addEventListener('mousemove', self.mousemove);
     self[self.isChildGrid ? 'parentGrid' : 'eventParent'].addEventListener(
       'wheel',
       self.scrollWheel,

package/lib/draw.js

@@ -1064,8 +1064,10 @@ export default function (self) {
           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) &&
+                headerIndex ||
+              self.selectedColumns.indexOf(headerIndex) >= 0) &&
             (columnOrderIndex === -1 || rowOrderIndex === -1)
               ? isRowHeader
                 ? 'activeRowHeaderCell'
@@ -1818,7 +1820,7 @@ export default function (self) {
         }
       }
       //draw frozen columns
-      x = 0;
+      x = 1;
       if (self.attributes.showRowHeaders) {
         x += rowHeaderCellWidth;
       }
@@ -2311,10 +2313,8 @@ export default function (self) {
       if (self.attributes.allowFreezingRows) {
         // HACK great, another stupid magic number.
         // Background will appear as a 0.5px artifact behind the row freeze bar without this hack
-        y +=
-          self.style.frozenMarkerBorderWidth +
-          self.style.frozenMarkerWidth -
-          0.4999999999;
+        if (y > columnHeaderCellHeight) y += self.style.frozenMarkerWidth;
+        y += self.style.frozenMarkerBorderWidth - 0.4999999999;
       }
       self.lastFrozenRowPixel = y;
     }
@@ -2441,6 +2441,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.currentCell.rowIndex !== self.reorderObject.rowIndex &&
           self.currentCell.rowIndex > -1 &&
           self.currentCell.rowIndex < l
@@ -2454,10 +2455,12 @@ export default function (self) {
         }
       } else if (self.dragMode === 'column-reorder' && self.reorderObject) {
         var selectedColumns = self.selections[0];
-        for (var k = 1; k < selectedColumns.length; k++) {
-          b.width += self.getColumnWidth(
-            self.orders.columns[selectedColumns[k]],
-          );
+        if (selectedColumns) {
+          for (var k = 1; k < selectedColumns.length; k++) {
+            b.width += self.getColumnWidth(
+              self.orders.columns[selectedColumns[k]],
+            );
+          }
         }
         b.height = h;
         b.y = 0;
@@ -2470,8 +2473,11 @@ 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.currentCell.sortColumnIndex !==
             self.reorderObject.sortColumnIndex &&
+          self.reorderTarget.columnIndex !== self.reorderObject.columnIndex &&
           self.currentCell.sortColumnIndex > -1 &&
           self.currentCell.sortColumnIndex < schema.length
         ) {
@@ -2592,81 +2598,172 @@ export default function (self) {
       self.ctx.restore();
     }
     function drawFrozenMarkers() {
-      if (self.dragStartObject !== undefined) return;
       var my = self.lastFrozenRowPixel - self.style.frozenMarkerWidth,
-        mx = self.lastFrozenColumnPixel - self.style.frozenMarkerBorderWidth,
+        mx = self.lastFrozenColumnPixel - self.style.frozenMarkerWidth,
         xHover =
           self.currentCell && self.currentCell.style === 'frozen-row-marker',
         yHover =
           self.currentCell && self.currentCell.style === 'frozen-column-marker';
+      let rowHeaderCellWidth = self.getRowHeaderCellWidth();
       self.ctx.lineWidth = self.style.frozenMarkerBorderWidth;
       if (self.attributes.allowFreezingColumns) {
-        self.ctx.fillStyle = yHover
-          ? self.style.frozenMarkerHoverColor
-          : self.style.frozenMarkerColor;
-        self.ctx.strokeStyle = yHover
-          ? self.style.frozenMarkerHoverBorderColor
-          : self.style.frozenMarkerBorderColor;
-        fillRect(mx, 0, self.style.frozenMarkerWidth, self.height);
-        strokeRect(mx, 0, self.style.frozenMarkerWidth, self.height);
-        self.visibleCells.unshift({
-          x: mx,
-          y: 0,
-          height: self.height,
-          width:
-            self.style.frozenMarkerWidth + self.style.frozenMarkerBorderWidth,
-          style: 'frozen-column-marker',
-        });
+        if (
+          !self.freezeMarkerPosition ||
+          (self.freezeMarkerPosition && self.dragMode === 'frozen-row-marker')
+        ) {
+          if (mx > self.style.rowHeaderCellWidth) {
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(mx, 0, self.style.frozenMarkerWidth, self.height);
+            strokeRect(mx, 0, self.style.frozenMarkerWidth, self.height);
+          }
+          self.ctx.fillStyle = yHover
+            ? self.style.frozenMarkerHoverColor
+            : self.style.frozenMarkerHeaderColor;
+          self.ctx.strokeStyle = yHover
+            ? self.style.frozenMarkerHoverBorderColor
+            : self.style.frozenMarkerHeaderColor;
+          fillRect(
+            mx,
+            0,
+            self.style.frozenMarkerWidth,
+            self.style.columnHeaderCellHeight,
+          );
+          strokeRect(
+            mx,
+            0,
+            self.style.frozenMarkerWidth,
+            self.style.columnHeaderCellHeight,
+          );
+        }
+
+        if (
+          !self.dragStartObject ||
+          (self.dragStartObject &&
+            self.dragStartObject.style !== 'rowHeaderCell')
+        ) {
+          self.visibleCells.unshift({
+            x: mx,
+            y: 0,
+            height: self.height,
+            width: self.style.frozenMarkerWidth, // + self.style.frozenMarkerBorderWidth,
+            style: 'frozen-column-marker',
+          });
+        }
       }
       if (self.attributes.allowFreezingRows) {
-        self.ctx.fillStyle = xHover
-          ? self.style.frozenMarkerHoverColor
-          : self.style.frozenMarkerColor;
-        self.ctx.strokeStyle = xHover
-          ? self.style.frozenMarkerHoverBorderColor
-          : self.style.frozenMarkerBorderColor;
-        fillRect(0, my, self.width, self.style.frozenMarkerWidth);
-        strokeRect(0, my, self.width, self.style.frozenMarkerWidth);
-        const height =
+        if (
+          !self.freezeMarkerPosition ||
+          (self.freezeMarkerPosition &&
+            self.dragMode === 'frozen-column-marker')
+        ) {
+          if (my > rowHeaderCellWidth) {
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(0, my, self.width, self.style.frozenMarkerWidth);
+            strokeRect(0, my, self.width, self.style.frozenMarkerWidth);
+          }
+          self.ctx.fillStyle = xHover
+            ? self.style.frozenMarkerHoverColor
+            : self.style.frozenMarkerHeaderColor;
+          self.ctx.strokeStyle = xHover
+            ? self.style.frozenMarkerHoverBorderColor
+            : self.style.frozenMarkerHeaderColor;
+          fillRect(0, my, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          strokeRect(0, my, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+        }
+        var height =
           self.style.frozenMarkerWidth + self.style.frozenMarkerBorderWidth;
-        self.visibleCells.unshift({
-          x: 0,
-          y: my,
-          height,
-          width: self.width,
-          style: 'frozen-row-marker',
-        });
+        if (
+          !self.dragStartObject ||
+          (self.dragStartObject &&
+            self.dragStartObject.style !== 'columnHeaderCell')
+        ) {
+          self.visibleCells.unshift({
+            x: 0,
+            y: my,
+            height: height,
+            width: self.width,
+            style: 'frozen-row-marker',
+          });
+        }
         rowGroupsFrozenInfo = { y: my, h: height };
       }
       if (self.freezeMarkerPosition) {
         self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
         self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
         if (self.dragMode === 'frozen-column-marker') {
+          let posX = self.freezeMarkerPosition.x;
+          let nearCell = self.getCellAt(posX, 0);
+          if (self.freezeMarkerPosition.isGrab) posX = mx;
+          if (posX > rowHeaderCellWidth) {
+            let x =
+              nearCell.x -
+              self.style.frozenMarkerWidth -
+              self.style.frozenMarkerBorderWidth;
+            if (posX > x + nearCell.width / 2) x = x + nearCell.width;
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(x, 0, self.style.frozenMarkerWidth, self.height);
+            strokeRect(x, 0, self.style.frozenMarkerWidth, self.height);
+            self.ctx.fillStyle = self.style.frozenMarkerHeaderColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerHeaderColor;
+            fillRect(
+              x,
+              0,
+              self.style.frozenMarkerWidth,
+              self.style.columnHeaderCellHeight,
+            );
+            strokeRect(
+              x,
+              0,
+              self.style.frozenMarkerWidth,
+              self.style.columnHeaderCellHeight,
+            );
+          }
+          self.ctx.fillStyle = self.style.frozenMarkerActiveHeaderColor;
+          self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
           fillRect(
-            self.freezeMarkerPosition.x,
+            posX,
             0,
             self.style.frozenMarkerWidth,
-            self.height,
+            self.style.columnHeaderCellHeight,
           );
           strokeRect(
-            self.freezeMarkerPosition.x,
+            posX,
             0,
             self.style.frozenMarkerWidth,
-            self.height,
+            self.style.columnHeaderCellHeight,
           );
+          self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
+          fillRect(posX, 0, self.style.frozenMarkerWidth, self.height);
+          strokeRect(posX, 0, self.style.frozenMarkerWidth, self.height);
         } else {
-          fillRect(
-            0,
-            self.freezeMarkerPosition.y,
-            self.width,
-            self.style.frozenMarkerWidth,
-          );
-          strokeRect(
-            0,
-            self.freezeMarkerPosition.y,
-            self.width,
-            self.style.frozenMarkerWidth,
-          );
+          let posY = self.freezeMarkerPosition.y;
+          let nearCell = self.getCellAt(0, posY);
+          if (self.freezeMarkerPosition.isGrab) posY = my;
+          if (posY > self.style.columnHeaderCellHeight) {
+            let y =
+              nearCell.y -
+              self.style.frozenMarkerWidth -
+              self.style.frozenMarkerBorderWidth;
+            if (posY > y + nearCell.height / 2) y = y + nearCell.height;
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(0, y, self.width, self.style.frozenMarkerWidth);
+            strokeRect(0, y, self.width, self.style.frozenMarkerWidth);
+            self.ctx.fillStyle = self.style.frozenMarkerHeaderColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerHeaderColor;
+            fillRect(0, y, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+            strokeRect(0, y, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          }
+          self.ctx.fillStyle = self.style.frozenMarkerActiveHeaderColor;
+          self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
+          fillRect(0, posY, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          strokeRect(0, posY, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
+          fillRect(0, posY, self.width, self.style.frozenMarkerWidth);
+          strokeRect(0, posY, self.width, self.style.frozenMarkerWidth);
         }
       }
     }