Merge pull request #641 from ghiscoding/feat/mousewheel-scroll-only-frozen-grid

feat(core): add enableMouseWheelScrollHandler grid option

Author: ghiscoding

package.json

@@ -99,7 +99,7 @@
     }
   },
   "dependencies": {
-    "dompurify": "^2.0.12",
+    "dompurify": "^2.2.2",
     "excel-builder-webpacker": "^1.0.6",
     "flatpickr": "^4.6.6",
     "font-awesome": "^4.7.0",
@@ -108,21 +108,21 @@
     "lodash.isequal": "^4.5.0",
     "moment-mini": "^2.24.0",
     "rxjs": "^6.3.3",
-    "slickgrid": "^2.4.31",
+    "slickgrid": "^2.4.32",
     "text-encoding-utf-8": "^1.0.2"
   },
   "peerDependencies": {
     "@ngx-translate/core": ">=11.0.1",
     "@ngx-translate/http-loader": ">=4.0.0"
   },
   "devDependencies": {
-    "@angular-builders/jest": "^7.4.2",
+    "@angular-builders/jest": "^7.4.4",
     "@angular-devkit/build-angular": "~0.803.29",
     "@angular/animations": "^8.2.14",
     "@angular/cli": "^8.3.29",
     "@angular/common": "^8.2.14",
-    "@angular/compiler": "8.2.14",
-    "@angular/compiler-cli": "8.2.14",
+    "@angular/compiler": "^8.2.14",
+    "@angular/compiler-cli": "^8.2.14",
     "@angular/core": "^8.2.14",
     "@angular/forms": "^8.2.14",
     "@angular/language-service": "^8.2.14",
@@ -141,14 +141,14 @@
     "@types/text-encoding-utf-8": "^1.0.1",
     "babel-jest": "^24.9.0",
     "bootstrap": "3.4.1",
-    "codecov": "^3.7.0",
+    "codecov": "^3.8.1",
     "codelyzer": "^5.0.1",
-    "conventional-changelog": "^3.1.23",
-    "copyfiles": "^2.3.0",
-    "core-js": "^2.6.11",
-    "cross-env": "^7.0.2",
+    "conventional-changelog": "^3.1.24",
+    "copyfiles": "^2.4.1",
+    "core-js": "^2.6.12",
+    "cross-env": "^7.0.3",
     "custom-event-polyfill": "^1.0.7",
-    "del": "^5.1.0",
+    "del": "^6.0.0",
     "del-cli": "^3.0.1",
     "gulp": "^4.0.2",
     "gulp-bump": "^3.2.0",
@@ -171,9 +171,9 @@
     "ts-node": "~3.3.0",
     "tsickle": "^0.37.0",
     "tslib": "^2.0.1",
-    "tslint": "^5.12.0",
+    "tslint": "^5.20.1",
     "typescript": "3.5.3",
-    "uglify-js": "^3.10.2",
+    "uglify-js": "^3.12.1",
     "vinyl-paths": "^2.1.0",
     "yargs": "^15.4.1",
     "zone.js": "~0.9.1"

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts

@@ -336,14 +336,14 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
     expect(onAfterGridDestroyedSpy).toHaveBeenCalled();
   });
 
-  it('should load jQuery mousewheel when using a frozen grid', () => {
-    const loadSpy = jest.spyOn(component, 'loadJqueryMousewheelDynamically');
+  it('should load enable jquery mousewheel scrolling when using a frozen grid', () => {
+    component.gridOptions.enableMouseWheelScrollHandler = undefined;
     component.gridOptions.frozenColumn = 3;
 
     component.ngOnInit();
     component.ngAfterViewInit();
 
-    expect(loadSpy).toHaveBeenCalled();
+    expect(component.gridOptions.enableMouseWheelScrollHandler).toBeTrue();
   });
 
   describe('initialization method', () => {

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -2,6 +2,7 @@
 // only import the necessary core lib, each will be imported on demand when enabled (via require)
 import 'jquery-ui-dist/jquery-ui';
 import 'slickgrid/lib/jquery.event.drag-2.3.0';
+import 'slickgrid/lib/jquery.mousewheel';
 import 'slickgrid/slick.core';
 import 'slickgrid/slick.grid';
 import 'slickgrid/slick.dataview';
@@ -272,10 +273,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   }
 
   ngOnInit(): void {
-    if (this.gridOptions && (this.gridOptions.frozenColumn !== undefined && this.gridOptions.frozenColumn >= 0) || (this.gridOptions.frozenRow !== undefined && this.gridOptions.frozenRow >= 0)) {
-      this.loadJqueryMousewheelDynamically();
-    }
-
     this.onBeforeGridCreate.emit(true);
     if (this.gridOptions && !this.gridOptions.enableAutoResize && (this._fixedHeight || this._fixedWidth)) {
       this.gridHeightString = `${this._fixedHeight}px`;
@@ -384,12 +381,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     }
   }
 
-  loadJqueryMousewheelDynamically() {
-    // load jQuery mousewheel only when using a frozen grid (this will make the mousewheel work on any side of the frozen container).
-    // DO NOT USE with Row Detail
-    require('slickgrid/lib/jquery.mousewheel');
-  }
-
   /**
    * On a Pagination changed, we will trigger a Grid State changed with the new pagination info
    * Also if we use Row Selection or the Checkbox Selector, we need to reset any selection
@@ -797,6 +788,11 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   }
 
   private initialization() {
+    // when detecting a frozen grid, we'll automatically enable the mousewheel scroll handler so that we can scroll from both left/right frozen containers
+    if (this.gridOptions && ((this.gridOptions.frozenRow !== undefined && this.gridOptions.frozenRow >= 0) || this.gridOptions.frozenColumn !== undefined && this.gridOptions.frozenColumn >= 0) && this.gridOptions.enableMouseWheelScrollHandler === undefined) {
+      this.gridOptions.enableMouseWheelScrollHandler = true;
+    }
+
     // make sure the dataset is initialized (if not it will throw an error that it cannot getLength of null)
     this._dataset = this._dataset || [];
     this.gridOptions = this.mergeGridOptions(this.gridOptions);

src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts

@@ -607,7 +607,7 @@ describe('gridMenuExtension', () => {
 
         expect(onCommandSpy).toHaveBeenCalled();
         expect(setColumnsSpy).toHaveBeenCalled();
-        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1 });
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1, enableMouseWheelScrollHandler: false });
       });
 
       it('should call "clearFilters" and dataview refresh when the command triggered is "clear-filter"', () => {

src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts

@@ -416,7 +416,7 @@ describe('headerMenuExtension', () => {
         instance.onCommand.notify({ column: columnsMock[0], grid: gridStub, command: 'freeze-columns' }, new Slick.EventData(), gridStub);
 
         expect(onCommandSpy).toHaveBeenCalled();
-        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: 0 });
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: 0, enableMouseWheelScrollHandler: true });
         expect(setColumnsSpy).toHaveBeenCalled();
       });
 
@@ -429,7 +429,7 @@ describe('headerMenuExtension', () => {
         instance.onCommand.notify({ column: columnsMock[1], grid: gridStub, command: 'freeze-columns' }, new Slick.EventData(), gridStub);
 
         expect(onCommandSpy).toHaveBeenCalled();
-        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1 });
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1, enableMouseWheelScrollHandler: true });
         expect(setColumnsSpy).toHaveBeenCalled();
       });
 

src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts

@@ -375,7 +375,7 @@ export class GridMenuExtension implements Extension {
       switch (args.command) {
         case 'clear-frozen-columns':
           const visibleColumns = [...this.sharedService.visibleColumns];
-          this.sharedService.grid.setOptions({ frozenColumn: -1 });
+          this.sharedService.grid.setOptions({ frozenColumn: -1, enableMouseWheelScrollHandler: false });
           if (Array.isArray(visibleColumns) && Array.isArray(this.sharedService.allColumns) && visibleColumns.length !== this.sharedService.allColumns.length) {
             this.sharedService.grid.setColumns(visibleColumns);
           }

src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts

@@ -331,7 +331,7 @@ export class HeaderMenuExtension implements Extension {
         case 'freeze-columns':
           const visibleColumns = [...this.sharedService.visibleColumns];
           const columnPosition = visibleColumns.findIndex((col) => col.id === args.column.id);
-          this.sharedService.grid.setOptions({ frozenColumn: columnPosition } as GridOption);
+          this.sharedService.grid.setOptions({ frozenColumn: columnPosition, enableMouseWheelScrollHandler: true } as GridOption);
 
           // to freeze columns, we need to take only the visible columns and we also need to use setColumns() when some of them are hidden
           // to make sure that we only use the visible columns, not doing this would show back some of the hidden columns

src/app/modules/angular-slickgrid/models/gridOption.interface.ts

@@ -249,6 +249,14 @@ export interface GridOption {
   /** Do we want to enable a styling effect when hovering any row from the grid? */
   enableMouseHoverHighlightRow?: boolean;
 
+  /**
+   * Do we want to always enable the mousewheel scroll handler?
+   * In other words, do we want the mouse scrolling would work from anywhere.
+   * Typically we should only enable it when using a Frozen/Pinned grid and if it does detect it to be a frozen grid,
+   * then it will automatically enable the scroll handler if this flag was originally set to undefined (which it is by default unless the user specifically disabled it).
+   */
+  enableMouseWheelScrollHandler?: boolean;
+
   /** Do we want to enable pagination? Currently only works with a Backend Service API */
   enablePagination?: boolean;
 

test/cypress/cypress.json

@@ -1,6 +1,7 @@
 {
   "baseUrl": "http://localhost:4300",
   "baseExampleUrl": "http://localhost:4300/#",
+  "runMode": 2,
   "video": false,
   "viewportWidth": 1200,
   "viewportHeight": 950,
@@ -11,4 +12,4 @@
   "screenshotsFolder": "screenshots",
   "supportFile": "support/index.js",
   "videosFolder": "videos"
-}
+}

test/cypress/package.json

@@ -10,7 +10,7 @@
   "author": "Ghislain B.",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^5.6.0",
+    "cypress": "^6.0.1",
     "mocha": "^8.2.0",
     "mochawesome": "^6.1.1"
   }