canvas-datagrid 0.4.0 → 0.4.1

package/dist/types.d.ts

@@ -621,11 +621,13 @@ declare class canvasDatagrid {
      */
     static getVisibleCellByIndex(x: number, y: number): cell;
     /**
+     * Get a column group at grid pixel coordinate x and y.
      * @param x - Number of pixels from the left.
      * @param y - Number of pixels from the top.
      */
     static getColumnGroupAt(x: number, y: number): void;
     /**
+     * Get a row group at grid pixel coordinate x and y.
      * @param x - Number of pixels from the left.
      * @param y - Number of pixels from the top.
      */

package/lib/contextMenu.js

@@ -609,13 +609,18 @@ export default function (self) {
         },
       });
       if (e.cell && e.cell.header && e.cell.columnIndex > -1) {
+        // This variable represents the order index because of the following codes from `draw.js`:
+        //     columnIndex: columnOrderIndex,
+        const columnOrderIndex = e.cell.columnIndex;
+        const columnIndex = self.orders.columns[columnOrderIndex];
+
         e.items.push({
           title: self.attributes.hideColumnText.replace(
             /%s/gi,
             e.cell.header.title || e.cell.header.name,
           ),
           click: function (ev) {
-            self.getSchema()[e.cell.columnIndex].hidden = true;
+            self.getSchema()[columnIndex].hidden = true;
             ev.preventDefault();
             self.stopPropagation(ev);
             self.disposeContextMenu();

package/lib/defaults.js

@@ -57,6 +57,7 @@ export default function (self) {
       ['reorderDeadZone', 3],
       ['resizeScrollZone', 20],
       ['rowGrabZoneSize', 5],
+      ['columnGrabZoneSize', 30],
       ['saveAppearance', true],
       ['scrollAnimationPPSThreshold', 0.75],
       ['scrollPointerLock', false],

package/lib/draw.js

@@ -2359,6 +2359,7 @@ 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,
         xHover =

package/lib/events/index.js

@@ -568,7 +568,24 @@ export default function (self) {
           dragBounds.right = s.length - 1;
           dragBounds.top = Math.min(sBounds.top, cell.rowIndex);
           dragBounds.bottom = Math.max(sBounds.bottom, cell.rowIndex);
+          if (dragBounds.top < 0) dragBounds.top = 0;
         }
+
+        if (self.dragStartObject.rowIndex === -1) {
+          sBounds = self.getSelectionBounds();
+          dragBounds.left =
+            cell.columnIndex === undefined
+              ? sBounds.left
+              : Math.min(sBounds.left, cell.columnIndex);
+          dragBounds.right =
+            cell.columnIndex === undefined
+              ? sBounds.right
+              : Math.max(sBounds.right, cell.columnIndex);
+          dragBounds.top = -1;
+          dragBounds.bottom = self.viewData.length - 1;
+          if (dragBounds.left < 0) dragBounds.left = 0;
+        }
+
         if (
           self.dragStartObject.rowIndex !== cell.rowIndex ||
           self.dragStartObject.columnIndex !== cell.columnIndex
@@ -581,11 +598,31 @@ export default function (self) {
           self.attributes.selectionMode === 'row'
         ) {
           if (
+            cell.rowIndex !== undefined &&
             (self.attributes.selectionMode === 'row' ||
               self.dragStartObject.columnIndex === -1) &&
             self.rowBoundaryCrossed
           ) {
-            self.selectRow(cell.rowIndex, ctrl, null, true);
+            if (self.dragStartObject.rowIndex < cell.rowIndex) {
+              dragBounds.top = self.dragStartObject.rowIndex;
+              dragBounds.bottom = cell.rowIndex;
+            } else {
+              dragBounds.top = cell.rowIndex;
+              dragBounds.bottom = self.dragStartObject.rowIndex;
+            }
+          } else if (
+            cell.rowIndex !== undefined &&
+            (self.attributes.selectionMode === 'column' ||
+              self.dragStartObject.rowIndex === -1) &&
+            self.columnBoundaryCrossed
+          ) {
+            if (self.dragStartObject.columnIndex < cell.columnIndex) {
+              dragBounds.left = self.dragStartObject.columnIndex;
+              dragBounds.right = cell.columnIndex;
+            } else {
+              dragBounds.left = cell.columnIndex;
+              dragBounds.right = self.dragStartObject.columnIndex;
+            }
           } else if (self.attributes.selectionMode !== 'row') {
             if (cell.hovered && self.hovers.onFilterButton) {
               if (cell.openedFilter) {
@@ -1372,6 +1409,12 @@ export default function (self) {
         self.dragStartObject.rowIndex > -1
       ) {
         self.selectRow(self.dragStartObject.rowIndex, ctrl, null);
+      } else if (
+        (self.attributes.selectionMode === 'column' ||
+          self.dragStartObject.rowIndex === -1) &&
+        self.dragStartObject.columnIndex > -1
+      ) {
+        self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
       } else if (self.attributes.selectionMode !== 'row') {
         self.mousemove(e);
       }

package/lib/publicMethods.js

@@ -1337,6 +1337,7 @@ export default function (self) {
     })[0];
   };
   /**
+   * Get a column group at grid pixel coordinate x and y.
    * @memberof canvasDatagrid
    * @name getColumnGroupAt
    * @method
@@ -1355,6 +1356,7 @@ export default function (self) {
     }
   };
   /**
+   * Get a row group at grid pixel coordinate x and y.
    * @memberof canvasDatagrid
    * @name getRowGroupAt
    * @method
@@ -1563,8 +1565,20 @@ export default function (self) {
           }
         }
         if (cell.style === 'columnHeaderCell') {
-          cell.context = 'cell';
-          cell.dragContext = 'column-reorder';
+          if (
+            cell.x +
+              cell.width -
+              self.attributes.columnGrabZoneSize -
+              self.style.cellBorderWidth >
+              x ||
+            !self.attributes.allowRowReordering
+          ) {
+            cell.dragContext = 'cell';
+            cell.context = 'cell';
+          } else {
+            cell.context = self.cursorGrab;
+            cell.dragContext = 'column-reorder';
+          }
           return cell;
         }
         if (cell.style === 'rowHeaderCell') {

package/package.json

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