From 4b6ad356329526d9739b4ee1de2575479083f3b4 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Fri, 8 Nov 2024 10:41:35 +0200 Subject: [PATCH 1/7] fix(grid): column resizing line positioned correctly --- .../src/lib/grids/resizing/resizer.component.html | 2 +- .../src/lib/grids/resizing/resizer.directive.ts | 15 ++++++++++++--- .../src/lib/grids/resizing/resizing.service.ts | 4 ++-- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html b/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html index 807f9b505ad..7da534bda24 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html @@ -4,5 +4,5 @@ [restrictHResizeMax]="colResizingService.restrictResizeMax" [restrictHResizeMin]="colResizingService.restrictResizeMin" [restrictResizerTop]="restrictResizerTop" - (resizeEnd)="colResizingService.resizeColumn($event)"> + (resizeEnd)="colResizingService.resizeColumn($event, resizer.ratio)"> diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts index 83b51c07298..bca00b4e6ca 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts @@ -41,8 +41,13 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy { @Output() public resize = new Subject(); private _left: number; + private _ratio: number = 1; private _destroy = new Subject(); + public get ratio(): number { + return this._ratio; + } + constructor( public element: ElementRef, @Inject(DOCUMENT) public document, @@ -56,7 +61,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy { .pipe( takeUntil(this._destroy), takeUntil(this.resizeEnd), - map((event) => event.clientX - offset), + map((event) => (event.clientX - offset) / (this._ratio)), )) ) .subscribe((pos) => { @@ -113,8 +118,12 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy { public onMousedown(event: MouseEvent) { event.preventDefault(); const parent = this.element.nativeElement.parentElement.parentElement; - - this.left = this._left = event.clientX - parent.getBoundingClientRect().left; + const parentRectWidth = parent.getBoundingClientRect().width; + const parentComputedWidth = parseFloat(window.getComputedStyle(parent).width); + if (parentRectWidth && parentComputedWidth && parentRectWidth / parentComputedWidth !== 1) { + 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.resizeStart.next(event); diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts index 2b6beae7418..dbbeb536f39 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -101,9 +101,9 @@ export class IgxColumnResizingService { /** * Resizes the column regaridng to the column minWidth and maxWidth. */ - public resizeColumn(event: MouseEvent) { + public resizeColumn(event: MouseEvent, ratio: number = 1) { this.showResizer = false; - const diff = event.clientX - this.startResizePos; + const diff = (event.clientX - this.startResizePos) / ratio; const colWidth = this.column.width; const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; From a3e5b3e5eb5857cde8c5c8733919a42704662c17 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Tue, 12 Nov 2024 11:44:19 +0200 Subject: [PATCH 2/7] fix(resizing): calculating the position of the resizing line --- .../src/lib/grids/resizing/resizer.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts index bca00b4e6ca..eaab146adf5 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts @@ -123,7 +123,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy { if (parentRectWidth && parentComputedWidth && parentRectWidth / parentComputedWidth !== 1) { this._ratio = parentRectWidth / parentComputedWidth; } - this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / (this._ratio); + this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio; this.top = (event.target as HTMLElement).getBoundingClientRect().top - parent.getBoundingClientRect().top; this.resizeStart.next(event); From f344b87ee7eb01481825a5551ece238b5a346dc1 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Tue, 12 Nov 2024 15:25:40 +0200 Subject: [PATCH 3/7] fix(grid): using computed style for restrict resize --- .../src/lib/grids/resizing/resizing.service.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts index dbbeb536f39..c59ae1c7e0e 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -61,7 +61,7 @@ export class IgxColumnResizingService { * Returns the minimal possible width to which the column can be resized. */ public get restrictResizeMin(): number { - const actualWidth = this.getColumnHeaderRenderedWidth(); + const actualWidth = parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width); const minWidth = this.column.minWidthPx < actualWidth ? this.column.minWidthPx : actualWidth; return actualWidth - minWidth; @@ -71,7 +71,7 @@ export class IgxColumnResizingService { * Returns the maximal possible width to which the column can be resized. */ public get restrictResizeMax(): number { - const actualWidth = this.getColumnHeaderRenderedWidth(); + const actualWidth = parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width); const maxWidth = this.column.maxWidthPx; if (this.column.maxWidth) { return maxWidth - actualWidth; From 0eabbcc75a8533311cb629e97a4ea13042aa4658 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 13 Nov 2024 16:36:11 +0200 Subject: [PATCH 4/7] fix(grid): test to check for correct calculations when grid is scaled --- .../lib/grids/grid/column-resizing.spec.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 6059ab22da9..fa7a44525ba 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -16,6 +16,7 @@ import { IgxAvatarComponent } from '../../avatar/avatar.component'; import { IColumnResizeEventArgs, IgxColumnComponent } from '../public_api'; import { Size } from "../common/enums"; import { setElementSize } from '../../test-utils/helper-utils.spec'; +import { IgxColumnResizerDirective } from '../resizing/resizer.directive'; describe('IgxGrid - Deferred Column Resizing #grid', () => { @@ -133,6 +134,27 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { expect(grid.columnList.get(1).width).toEqual('70px'); })); + it('should calculate correct resizer position and column width when grid is scaled and zoomed', fakeAsync(() => { + grid.nativeElement.style.transform = 'scale(1.2)'; + grid.nativeElement.style.setProperty('zoom', '1.05'); + fixture.detectChanges(); + headerResArea = GridFunctions.getHeaderResizeArea(headers[1]).nativeElement; + UIInteractions.simulateMouseEvent('mousedown', headerResArea, 153, 0); + tick(200); + fixture.detectChanges(); + + const resizer = GridFunctions.getResizer(fixture); + const resizerDirective = resizer.componentInstance.resizer as IgxColumnResizerDirective; + const leftSetterSpy = spyOnProperty(resizerDirective, 'left', 'set').and.callThrough(); + UIInteractions.simulateMouseEvent('mousemove', resizer.nativeElement, 200, 5); + UIInteractions.simulateMouseEvent('mouseup', resizer.nativeElement, 200, 5); + fixture.detectChanges(); + + expect(leftSetterSpy).toHaveBeenCalled(); + expect(parseInt(leftSetterSpy.calls.mostRecent().args[0].toFixed(0))).toEqual(200); + expect(parseInt(grid.columnList.get(1).headerCell.nativeElement.getBoundingClientRect().width.toFixed(0))).toEqual(173); + })); + it('should be able to resize column to the minWidth < defaultMinWidth', fakeAsync(() => { const column = grid.getColumnByName('ID'); column.minWidth = 'a'; From f1f5a9ff5fc217a13247c59efffb35907c55399e Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 13 Nov 2024 16:50:50 +0200 Subject: [PATCH 5/7] fix(grid): test appropriate naming --- .../igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index fa7a44525ba..b58b5f02b41 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -134,7 +134,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { expect(grid.columnList.get(1).width).toEqual('70px'); })); - it('should calculate correct resizer position and column width when grid is scaled and zoomed', fakeAsync(() => { + it('should calculate correctly resizer position and column width when grid is scaled and zoomed', fakeAsync(() => { grid.nativeElement.style.transform = 'scale(1.2)'; grid.nativeElement.style.setProperty('zoom', '1.05'); fixture.detectChanges(); From ca37ac7736d98ff54238acf72b5709d268a3a7d7 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 13 Nov 2024 17:02:59 +0200 Subject: [PATCH 6/7] fix(resizing): update the getter to use width from the computed styles --- .../src/lib/grids/resizing/resizing.service.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts index c59ae1c7e0e..b4106c80ede 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -35,7 +35,7 @@ export class IgxColumnResizingService { * @hidden */ public getColumnHeaderRenderedWidth() { - return this.column.headerCell.nativeElement.getBoundingClientRect().width; + return parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width); } /** @@ -61,7 +61,7 @@ export class IgxColumnResizingService { * Returns the minimal possible width to which the column can be resized. */ public get restrictResizeMin(): number { - const actualWidth = parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width); + const actualWidth = this.getColumnHeaderRenderedWidth(); const minWidth = this.column.minWidthPx < actualWidth ? this.column.minWidthPx : actualWidth; return actualWidth - minWidth; @@ -71,7 +71,7 @@ export class IgxColumnResizingService { * Returns the maximal possible width to which the column can be resized. */ public get restrictResizeMax(): number { - const actualWidth = parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width); + const actualWidth = this.getColumnHeaderRenderedWidth(); const maxWidth = this.column.maxWidthPx; if (this.column.maxWidth) { return maxWidth - actualWidth; From a055b310bcda72c72b4ccbb64cbfbc960ee152df Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 Nov 2024 10:37:28 +0200 Subject: [PATCH 7/7] fix(resizing): no taking into account bellow a pixel --- .../src/lib/grids/resizing/resizer.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts index eaab146adf5..9bf213f801e 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts @@ -120,7 +120,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy { const parent = this.element.nativeElement.parentElement.parentElement; const parentRectWidth = parent.getBoundingClientRect().width; const parentComputedWidth = parseFloat(window.getComputedStyle(parent).width); - if (parentRectWidth && parentComputedWidth && parentRectWidth / parentComputedWidth !== 1) { + if (Math.abs(parentRectWidth - parentComputedWidth) > 1) { this._ratio = parentRectWidth / parentComputedWidth; } this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio;