Merge pull request #16123 from IgniteUI/aahmedov/fix-resizer-incorrect-position-in-shadow-dom-#16119

Fix column resizer position - 20.0.x

Author: kacheshmarova

projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts

@@ -11,7 +11,7 @@ import { MultiColumnHeadersComponent } from '../../test-utils/grid-samples.spec'
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective } from '../columns/templates.directive';
 import { IgxAvatarComponent } from '../../avatar/avatar.component';
-import { IColumnResizeEventArgs, IgxColumnComponent } from '../public_api';
+import { IColumnResizeEventArgs, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent } from '../public_api';
 import { Size } from "../common/enums";
 import { setElementSize } from '../../test-utils/helper-utils.spec';
 import { IgxColumnResizerDirective } from '../resizing/resizer.directive';
@@ -903,6 +903,65 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             expect(firstRowCells.length).toEqual(11);
         }));
     });
+
+    describe('Resizer tests: ', () => {
+        let fixture: ComponentFixture<any>;
+        let grid: IgxGridComponent;
+
+        beforeEach(fakeAsync(() => {
+            fixture = TestBed.createComponent(ResizableColumnsWithToolbarComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+        }));
+
+        it('should align the resizer top with the grid header top', fakeAsync(() => {
+            grid.nativeElement.style.marginTop = '40px';
+            fixture.detectChanges();
+            const headers = GridFunctions.getColumnHeaders(fixture);
+            const headerResArea = GridFunctions.getHeaderResizeArea(headers[0]).nativeElement;
+
+            const headerRectTop = headerResArea.getBoundingClientRect().top;
+
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, 100, 15);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture).nativeElement;
+            expect(resizer).toBeDefined();
+
+            const resizerRectTop = resizer.getBoundingClientRect().top;
+            UIInteractions.simulateMouseEvent('mousemove', resizer, 250, 15);
+            UIInteractions.simulateMouseEvent('mouseup', resizer, 250, 15);
+            fixture.detectChanges();
+
+
+            expect(Math.abs(resizerRectTop - headerRectTop)).toBeLessThanOrEqual(1);
+        }));
+
+        it('should align the resizer top with the grid header top when grid is scaled', fakeAsync(() => {
+            grid.nativeElement.style.transform = 'scale(0.6)';
+            fixture.detectChanges();
+
+            const headers = GridFunctions.getColumnHeaders(fixture);
+            const headerResArea = GridFunctions.getHeaderResizeArea(headers[1]).nativeElement;
+            const headerRectTop = headerResArea.getBoundingClientRect().top;
+
+            // Trigger resize to show resizer
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, 153, 0);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture).nativeElement;
+            expect(resizer).toBeDefined();
+
+            const resizerRectTop = resizer.getBoundingClientRect().top;
+
+            UIInteractions.simulateMouseEvent('mouseup', resizer, 200, 5);
+            fixture.detectChanges();
+
+            expect(Math.abs(resizerRectTop - headerRectTop)).toBeLessThanOrEqual(1);
+        }));
+    });
 });
 
 @Component({
@@ -915,6 +974,18 @@ export class ResizableColumnsComponent {
     public data = SampleTestData.personIDNameRegionData();
 }
 
+@Component({
+    template: GridTemplateStrings.declareGrid(`width="500px" height="300px"`, ``,
+        '<igx-grid-toolbar><igx-grid-toolbar-title>Grid Toolbar</igx-grid-toolbar-title></igx-grid-toolbar>' +
+        ColumnDefinitions.resizableThreeOfFour),
+    imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent]
+})
+export class ResizableColumnsWithToolbarComponent {
+    @ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent;
+
+    public data = SampleTestData.personIDNameRegionData();
+}
+
 @Component({
     template: GridTemplateStrings.declareGrid(`width="618px" height="600px"`, ``, `<igx-column [field]="'Released'" [pinned]="true" width="100px" dataType="boolean" [resizable]="true"></igx-column>
         <igx-column [field]="'ReleaseDate'" [pinned]="true" width="100px" dataType="date" [resizable]="true"

projects/igniteui-angular/src/lib/grids/resizing/resize-handle.directive.ts

@@ -8,7 +8,7 @@ import {
     OnDestroy
 } from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
+import { debounceTime, map, takeUntil } from 'rxjs/operators';
 import { ColumnType } from '../common/grid.interface';
 import { IgxColumnResizingService } from './resizing.service';
 
@@ -69,19 +69,23 @@ export class IgxResizeHandleDirective implements AfterViewInit, OnDestroy {
     public ngAfterViewInit() {
         if (!this.column.columnGroup && this.column.resizable) {
             this.zone.runOutsideAngular(() => {
-                fromEvent(this.element.nativeElement, 'mousedown').pipe(
+                fromEvent<MouseEvent>(this.element.nativeElement, 'mousedown').pipe(
+                    map((event) => ({
+                        event,
+                        // Preserves the original 'event.target' in a shadow DOM context.
+                        target: event.target as HTMLElement
+                    })),
                     debounceTime(this.DEBOUNCE_TIME),
                     takeUntil(this.destroy$)
-                ).subscribe((event: MouseEvent) => {
-
+                ).subscribe(({ event, target }: { event: MouseEvent; target: HTMLElement }) => {
                     if (this._dblClick) {
                         this._dblClick = false;
                         return;
                     }
 
                     if (event.button === 0) {
                         this._onResizeAreaMouseDown(event);
-                        this.column.grid.resizeLine.resizer.onMousedown(event);
+                        this.column.grid.resizeLine.resizer.onMousedown(event, target);
                     }
                 });
             });

projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts

@@ -115,7 +115,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
         this.resizeEnd.complete();
     }
 
-    public onMousedown(event: MouseEvent) {
+    public onMousedown(event: MouseEvent, resizeHandleTarget: HTMLElement) {
         event.preventDefault();
         const parent = this.element.nativeElement.parentElement.parentElement;
         const parentRectWidth = parent.getBoundingClientRect().width;
@@ -124,7 +124,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
             this._ratio = parentRectWidth / parentComputedWidth;
         }
         this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio;
-        this.top = (event.target as HTMLElement).getBoundingClientRect().top - parent.getBoundingClientRect().top;
+        this.top = (resizeHandleTarget.getBoundingClientRect().top - parent.getBoundingClientRect().top) / this._ratio;
 
         this.resizeStart.next(event);
     }