feat(core): add enableMouseWheelScrollHandler grid option

- this enables the use of the mousewheel scrolling event handler and that makes the mousewheel scroll to work from anywhere in the grid

Author: Ghislain Beaulac

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

@@ -221,6 +221,15 @@ export class HeaderMenuExtension implements Extension {
     if (this.sharedService.grid && this.sharedService.grid.getColumns && this.sharedService.grid.setColumns && this.sharedService.grid.getColumnIndex) {
       const columnIndex = this.sharedService.grid.getColumnIndex(column.id);
       const currentColumns = this.sharedService.grid.getColumns() as Column[];
+
+      // if we're using frozen columns, we need to readjust pinning when the new hidden column is on the left pinning container
+      // we need to do this because SlickGrid freezes by index and has no knowledge of the columns themselves
+      const frozenColumnIndex = this.sharedService.gridOptions.frozenColumn || -1;
+      if (frozenColumnIndex >= 0 && frozenColumnIndex >= columnIndex) {
+        this.sharedService.grid.setOptions({ frozenColumn: frozenColumnIndex - 1 });
+      }
+
+      // then proceed with hiding the column in SlickGrid & trigger an event when done
       const visibleColumns = arrayRemoveItemByIndex(currentColumns, columnIndex);
       this.sharedService.visibleColumns = visibleColumns;
       this.sharedService.grid.setColumns(visibleColumns);
@@ -331,7 +340,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;