Merge pull request #8813 from IgniteUI/ddincheva/shiftWheel

ShiftKey + mouse wheel for horizontal scroll -- 11.1.x
IgniteUI · Jan 21, 2021 · 466f296 · 466f296
2 parents 0921a1b + 15932bb
commit 466f296
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 4 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts
@@ -129,6 +129,55 @@ describe('Scroll Inertia Directive - Scrolling', () => {
         expect (() => scrollInertiaDir.onWheel(evt)).not.toThrow();
     });
 
+
+    it('should change scroll left when shift + wheel is triggered' , () => {
+        scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal';
+        const evt =  {shiftKey: true, wheelDeltaY: -240, preventDefault: () => {}};
+        scrollInertiaDir.onWheel(evt);
+
+        expect(scrollContainerMock.scrollTop).toEqual(0);
+        expect(scrollContainerMock.scrollLeft).toEqual(2 * scrollInertiaDir.wheelStep);
+    });
+
+    it('should be able to scroll to left/right when shift + wheel is triggered' , () => {
+        scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal';
+        let evt =  {shiftKey: true, wheelDeltaY: -240, preventDefault: () => {}};
+        scrollInertiaDir.onWheel(evt);
+
+        expect(scrollContainerMock.scrollTop).toEqual(0);
+        expect(scrollContainerMock.scrollLeft).toEqual(2 * scrollInertiaDir.wheelStep);
+
+        evt =  {shiftKey: true, wheelDeltaY: 120, preventDefault: () => {}};
+        scrollInertiaDir.onWheel(evt);
+
+        expect(scrollContainerMock.scrollTop).toEqual(0);
+        expect(scrollContainerMock.scrollLeft).toEqual(scrollInertiaDir.wheelStep);
+    });
+
+    it('should change scroll left when shift + wheel is called with with deltaY' , () => {
+        scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal';
+        const evt =  {shiftKey: true, deltaY: 1, preventDefault: () => {}};
+        scrollInertiaDir.onWheel(evt);
+
+        expect(scrollContainerMock.scrollTop).toEqual(0);
+        expect(scrollContainerMock.scrollLeft).toEqual(scrollInertiaDir.wheelStep);
+    });
+
+    it('should be able to scroll to left/right when shift + wheel is called with with deltaY' , () => {
+        scrollInertiaDir.IgxScrollInertiaDirection = 'horizontal';
+        let evt =  {shiftKey: true, deltaY: 1, preventDefault: () => {}};
+        scrollInertiaDir.onWheel(evt);
+
+        expect(scrollContainerMock.scrollTop).toEqual(0);
+        expect(scrollContainerMock.scrollLeft).toEqual(scrollInertiaDir.wheelStep);
+
+        evt =  {shiftKey: true, deltaY: -1, preventDefault: () => {}};
+        scrollInertiaDir.onWheel(evt);
+
+        expect(scrollContainerMock.scrollTop).toEqual(0);
+        expect(scrollContainerMock.scrollLeft).toEqual(0);
+    });
+
     // Unit tests for touch events with inertia - Chrome, FireFox, Safari.
     it('should change scroll top for related scrollbar on touch start/move/end', fakeAsync(() => {
         let evt = {

diff --git a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts
@@ -1,5 +1,6 @@
 import { Directive, Input, ElementRef, NgZone, OnInit, NgModule, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { isIE } from '../../core/utils';
 
 /**
  * @hidden
@@ -104,6 +105,9 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
         if (evt.ctrlKey) {
             return;
         }
+        if (evt.shiftKey && isIE()) {
+            evt.preventDefault();
+        }
         let scrollDeltaX;
         let scrollDeltaY;
         const scrollStep = this.wheelStep;
@@ -150,7 +154,10 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
                 // Prevent navigating through pages when scrolling on Mac
                 evt.preventDefault();
             }
-        } else if (scrollDeltaY && this.IgxScrollInertiaDirection === 'vertical') {
+        } else if (evt.shiftKey && scrollDeltaY && this.IgxScrollInertiaDirection === 'horizontal') {
+            const step = this._startX + scrollDeltaY * scrollStep;
+            this._scrollToX(step);
+        } else if (!evt.shiftKey && scrollDeltaY && this.IgxScrollInertiaDirection === 'vertical') {
             this._scrollToY(
                 this._startY + scrollDeltaY * scrollStep
             );

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -16,7 +16,7 @@ import { DataType } from '../../data-operations/data-util';
 import { GridTemplateStrings } from '../../test-utils/template-strings.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { BasicGridComponent } from '../../test-utils/grid-base-components.spec';
-import { wait } from '../../test-utils/ui-interactions.spec';
+import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
 import { IgxStringFilteringOperand, IgxNumberFilteringOperand } from '../../data-operations/filtering-condition';
 import { SortingDirection, ISortingExpression } from '../../data-operations/sorting-expression.interface';
 import { configureTestSuite } from '../../test-utils/configure-suite';
@@ -657,6 +657,75 @@ describe('IgxGrid Component Tests #grid', () => {
                 expect(row.cells.length).toEqual(4);
             }
         });
+
+        it('Should scroll horizontally when press shift + mouse wheel over grid headers', (async () => {
+            const fix = TestBed.createComponent(IgxGridTestComponent);
+            for (let i = 2; i < 100; i++) {
+                fix.componentInstance.data.push({ index: i, value: i, desc: i, detail: i });
+            }
+            fix.componentInstance.columns[0].width = '400px';
+            fix.componentInstance.columns[1].width = '400px';
+            fix.componentInstance.columns.push(
+                { field: 'desc', header: 'desc', dataType: 'number', width: '400px', hasSummary: false },
+                { field: 'detail', header: 'detail', dataType: 'number', width: '400px', hasSummary: false }
+            );
+            fix.detectChanges();
+            const grid = fix.componentInstance.grid;
+            const initialScroll = grid.verticalScrollContainer.getScroll().scrollTop;
+            const initialHorScroll = grid.headerContainer.getScroll().scrollLeft;
+
+            const displayContainer = grid.headerContainer.dc.instance._viewContainer.element.nativeElement;
+            await UIInteractions.simulateWheelEvent(displayContainer, 0, -240, true);
+            fix.detectChanges();
+            await wait(16);
+
+            expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(initialScroll);
+            expect(grid.headerContainer.getScroll().scrollLeft).toBeGreaterThan(initialHorScroll + 50);
+
+            await UIInteractions.simulateWheelEvent(displayContainer, 0, 240, true);
+            fix.detectChanges();
+            await wait(16);
+
+            expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(initialScroll);
+            expect(grid.headerContainer.getScroll().scrollLeft).toEqual(initialHorScroll);
+        }));
+
+
+        it('Should scroll horizontally when press shift + mouse wheel over grid data row', (async () => {
+            const fix = TestBed.createComponent(IgxGridTestComponent);
+            for (let i = 2; i < 100; i++) {
+                fix.componentInstance.data.push({ index: i, value: i, desc: i, detail: i });
+            }
+            fix.componentInstance.columns[0].width = '400px';
+            fix.componentInstance.columns[1].width = '400px';
+            fix.componentInstance.columns.push(
+                { field: 'desc', header: 'desc', dataType: 'number', width: '400px', hasSummary: false },
+                { field: 'detail', header: 'detail', dataType: 'number', width: '400px', hasSummary: false }
+            );
+            fix.detectChanges();
+            const grid = fix.componentInstance.grid;
+            const initialScroll = grid.verticalScrollContainer.getScroll().scrollTop;
+            const initialHorScroll = grid.rowList.first.virtDirRow.getScroll().scrollLeft;
+
+            const cell = grid.getCellByColumn(3, 'value');
+            UIInteractions.simulateClickAndSelectEvent(cell);
+            fix.detectChanges();
+
+            const displayContainer = grid.rowList.first.virtDirRow.dc.instance._viewContainer.element.nativeElement;
+            await UIInteractions.simulateWheelEvent(displayContainer, 0, -240, true);
+            fix.detectChanges();
+            await wait(16);
+
+            expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(initialScroll);
+            expect(grid.headerContainer.getScroll().scrollLeft).toBeGreaterThan(initialHorScroll + 50);
+
+            await UIInteractions.simulateWheelEvent(displayContainer, 0, -240, true);
+            fix.detectChanges();
+            await wait(16);
+
+            expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(initialScroll);
+            expect(grid.headerContainer.getScroll().scrollLeft).toBeGreaterThanOrEqual(2 * (initialHorScroll + 50));
+        }));
     });
 
     describe('IgxGrid - default rendering for rows and columns', () => {

diff --git a/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts
@@ -332,8 +332,8 @@ export class UIInteractions {
         nativeElement.dispatchEvent(new DragEvent('drop', { dataTransfer: dataTransfer }));
     }
 
-    public static simulateWheelEvent(element, deltaX, deltaY) {
-        const event = new WheelEvent('wheel', { deltaX: deltaX, deltaY: deltaY });
+    public static simulateWheelEvent(element, deltaX, deltaY, shiftKey = false) {
+        const event = new WheelEvent('wheel', { deltaX: deltaX, deltaY: deltaY, shiftKey: shiftKey });
         Object.defineProperty(event, 'wheelDeltaX', { value: deltaX });
         Object.defineProperty(event, 'wheelDeltaY', { value: deltaY });