fix(Grid): Add better handling for fraction numbers, as result of zoom. (#16427)

Author: MayaKirova

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -423,7 +423,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
     }
 
     public isScrollable() {
-        return this.scrollComponent.size > parseInt(this.igxForContainerSize, 10);
+        return this.scrollComponent.size > parseFloat(this.igxForContainerSize);
     }
 
     /**
@@ -556,8 +556,8 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         }
         const containerSize = 'igxForContainerSize';
         if (containerSize in changes && !changes[containerSize].firstChange && this.igxForOf) {
-            const prevSize = parseInt(changes[containerSize].previousValue, 10);
-            const newSize = parseInt(changes[containerSize].currentValue, 10);
+            const prevSize = parseFloat(changes[containerSize].previousValue);
+            const newSize = parseFloat(changes[containerSize].currentValue);
             this._recalcOnContainerChange({prevSize, newSize});
         }
     }
@@ -614,7 +614,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
             return false;
         }
         const originalVirtScrollTop = this._virtScrollPosition;
-        const containerSize = parseInt(this.igxForContainerSize, 10);
+        const containerSize = parseFloat(this.igxForContainerSize);
         const maxVirtScrollTop = this._virtSize - containerSize;
 
         this._bScrollInternal = true;
@@ -627,7 +627,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         if (Math.abs(add / this._virtRatio) < 1) {
             // Actual scroll delta that was added is smaller than 1 and onScroll handler doesn't trigger when scrolling < 1px
             const scrollOffset = this.fixedUpdateAllElements(this._virtScrollPosition);
-            // scrollOffset = scrollOffset !== parseInt(this.igxForItemSize, 10) ? scrollOffset : 0;
+            // scrollOffset = scrollOffset !== parseFloat(this.igxForItemSize, 10) ? scrollOffset : 0;
             this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px';
         }
 
@@ -659,7 +659,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         if (index < 0 || index > (this.isRemote ? this.totalItemCount : this.igxForOf.length) - 1) {
             return;
         }
-        const containerSize = parseInt(this.igxForContainerSize, 10);
+        const containerSize = parseFloat(this.igxForContainerSize);
         const isPrevItem = index < this.state.startIndex || this.scrollPosition > this.sizesCache[index];
         let nextScroll = isPrevItem ? this.sizesCache[index] : this.sizesCache[index + 1] - containerSize;
         if (nextScroll < 0) {
@@ -684,7 +684,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
      */
     public scrollNext() {
         const scr = Math.abs(Math.ceil(this.scrollPosition));
-        const endIndex = this.getIndexAt(scr + parseInt(this.igxForContainerSize, 10), this.sizesCache);
+        const endIndex = this.getIndexAt(scr + parseFloat(this.igxForContainerSize), this.sizesCache);
         this.scrollTo(endIndex);
     }
 
@@ -707,7 +707,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
      * ```
      */
     public scrollNextPage() {
-        this.addScroll(parseInt(this.igxForContainerSize, 10));
+        this.addScroll(parseFloat(this.igxForContainerSize));
     }
 
     /**
@@ -718,7 +718,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
      * ```
      */
     public scrollPrevPage() {
-        const containerSize = (parseInt(this.igxForContainerSize, 10));
+        const containerSize = (parseFloat(this.igxForContainerSize));
         this.addScroll(-containerSize);
     }
 
@@ -741,7 +741,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
             // fisrt item is not fully in view
             startIndex++;
         }
-        const endIndex = this.getIndexAt(this.scrollPosition + parseInt(this.igxForContainerSize, 10), this.sizesCache);
+        const endIndex = this.getIndexAt(this.scrollPosition + parseFloat(this.igxForContainerSize), this.sizesCache);
         return endIndex - startIndex;
     }
 
@@ -780,7 +780,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
      * ```
      */
     public getScrollForIndex(index: number, bottom?: boolean) {
-        const containerSize = parseInt(this.igxForContainerSize, 10);
+        const containerSize = parseFloat(this.igxForContainerSize);
         const scroll = bottom ? Math.max(0, this.sizesCache[index + 1] - containerSize) : this.sizesCache[index];
         return scroll;
     }
@@ -805,7 +805,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
             this._embeddedViews.map(view =>
                 view.rootNodes.find(node => node.nodeType === Node.ELEMENT_NODE) || view.rootNodes[0].nextElementSibling)[index - this.state.startIndex] : null;
         const rowHeight = this.getSizeAt(index);
-        const containerSize = parseInt(this.igxForContainerSize, 10);
+        const containerSize = parseFloat(this.igxForContainerSize);
         const containerOffset = -(this.scrollPosition - this.sizesCache[this.state.startIndex]);
         const endTopOffset = targetNode ? targetNode.offsetTop + rowHeight + containerOffset : containerSize + rowHeight;
         return !targetNode || targetNode.offsetTop < Math.abs(containerOffset)
@@ -828,7 +828,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
             const rNode = rNodes[i];
             if (rNode) {
                 const height = window.getComputedStyle(rNode).getPropertyValue('height');
-                const h = parseFloat(height) || parseInt(this.igxForItemSize, 10);
+                const h = parseFloat(height) || parseFloat(this.igxForItemSize);
                 const index = this.state.startIndex + i;
                 if (!this.isRemote && !this.igxForOf[index]) {
                     continue;
@@ -863,7 +863,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
             }
             const scrToBottom = this._isScrolledToBottom && !this.dc.instance.notVirtual;
             if (scrToBottom && !this._isAtBottomIndex) {
-                const containerSize = parseInt(this.igxForContainerSize, 10);
+                const containerSize = parseFloat(this.igxForContainerSize);
                 const maxVirtScrollTop = this._virtSize - containerSize;
                 this._bScrollInternal = true;
                 this._virtScrollPosition = maxVirtScrollTop;
@@ -912,7 +912,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
      */
     protected onScroll(event) {
         /* in certain situations this may be called when no scrollbar is visible */
-        if (!parseInt(this.scrollComponent.nativeElement.style.height, 10)) {
+        if (!parseFloat(this.scrollComponent.nativeElement.style.height)) {
             return;
         }
         if (!this._bScrollInternal) {
@@ -1100,7 +1100,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
     protected onHScroll(event) {
         /* in certain situations this may be called when no scrollbar is visible */
         const firstScrollChild = this.scrollComponent.nativeElement.children.item(0) as HTMLElement;
-        if (!parseInt(firstScrollChild.style.width, 10)) {
+        if (!parseFloat(firstScrollChild.style.width)) {
             return;
         }
         if (!this._bScrollInternal) {
@@ -1272,7 +1272,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         let maxLength = 0;
         const arr = [];
         let sum = 0;
-        const availableSize = parseInt(this.igxForContainerSize, 10);
+        const availableSize = parseFloat(this.igxForContainerSize);
         if (!availableSize) {
             return 0;
         }
@@ -1302,7 +1302,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
                         const prevItem = this.igxForOf[prevIndex];
                         const prevSize = dimension === 'height' ?
                             this.individualSizeCache[prevIndex] :
-                            parseInt(prevItem[dimension], 10);
+                            parseFloat(prevItem[dimension]);
                         sum = arr.reduce(reducer, prevSize);
                         arr.unshift(prevItem);
                         length = arr.length;
@@ -1349,19 +1349,19 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
         const scrollable = containerSizeInfo ? this.scrollComponent.size > containerSizeInfo.prevSize : this.isScrollable();
         if (this.igxForScrollOrientation === 'horizontal') {
-            const totalWidth = parseInt(this.igxForContainerSize, 10) > 0 ? this._calcSize() : 0;
-            if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
+            const totalWidth = parseFloat(this.igxForContainerSize) > 0 ? this._calcSize() : 0;
+            if (totalWidth <= parseFloat(this.igxForContainerSize)) {
                 this.resetScrollPosition();
             }
             this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
             this.scrollComponent.size = totalWidth;
         }
         if (this.igxForScrollOrientation === 'vertical') {
             const totalHeight = this._calcSize();
-            if (totalHeight <= parseInt(this.igxForContainerSize, 10)) {
+            if (totalHeight <= parseFloat(this.igxForContainerSize)) {
                 this.resetScrollPosition();
             }
-            this.scrollComponent.nativeElement.style.height = parseInt(this.igxForContainerSize, 10) + 'px';
+            this.scrollComponent.nativeElement.style.height = parseFloat(this.igxForContainerSize) + 'px';
             this.scrollComponent.size = totalHeight;
         }
         if (scrollable !== this.isScrollable()) {
@@ -1453,7 +1453,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
     }
 
     protected _calcVirtualScrollPosition(scrollPosition: number) {
-        const containerSize = parseInt(this.igxForContainerSize, 10);
+        const containerSize = parseFloat(this.igxForContainerSize);
         const maxRealScrollPosition = this.scrollComponent.size - containerSize;
         const realPercentScrolled = maxRealScrollPosition !== 0 ? scrollPosition / maxRealScrollPosition : 0;
         const maxVirtScroll = this._virtSize - containerSize;
@@ -1462,7 +1462,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
 
     protected _getItemSize(item, dimension: string): number {
         const dim = item ? item[dimension] : null;
-        return typeof dim === 'number' ? dim : parseInt(this.igxForItemSize, 10) || 0;
+        return typeof dim === 'number' ? dim : parseFloat(this.igxForItemSize) || 0;
     }
 
     protected _updateScrollOffset() {
@@ -1485,8 +1485,8 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         if (Math.abs(sizeDiff) > 0 && this.scrollPosition > 0) {
             this.recalcUpdateSizes();
             const offset = this.igxForScrollOrientation === 'horizontal' ?
-                parseInt(this.dc.instance._viewContainer.element.nativeElement.style.left, 10) :
-                parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
+                parseFloat(this.dc.instance._viewContainer.element.nativeElement.style.left) :
+                parseFloat(this.dc.instance._viewContainer.element.nativeElement.style.top);
             const newSize = this.sizesCache[this.state.startIndex] - offset;
             this.scrollPosition = newSize;
             if (this.scrollPosition !== newSize) {
@@ -1651,8 +1651,8 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
         }
         const containerSize = 'igxForContainerSize';
         if (containerSize in changes && !changes[containerSize].firstChange && this.igxForOf) {
-            const prevSize = parseInt(changes[containerSize].previousValue, 10);
-            const newSize = parseInt(changes[containerSize].currentValue, 10);
+            const prevSize = parseFloat(changes[containerSize].previousValue);
+            const newSize = parseFloat(changes[containerSize].currentValue);
             this._recalcOnContainerChange({prevSize, newSize});
         }
     }
@@ -1700,7 +1700,7 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
     }
 
     public override onScroll(event) {
-        if (!parseInt(this.scrollComponent.nativeElement.style.height, 10)) {
+        if (!parseFloat(this.scrollComponent.nativeElement.style.height)) {
             return;
         }
         if (!this._bScrollInternal) {
@@ -1719,7 +1719,7 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
     public override onHScroll(scrollAmount) {
         /* in certain situations this may be called when no scrollbar is visible */
         const firstScrollChild = this.scrollComponent.nativeElement.children.item(0) as HTMLElement;
-        if (!this.scrollComponent || !parseInt(firstScrollChild.style.width, 10)) {
+        if (!this.scrollComponent || !parseFloat(firstScrollChild.style.width)) {
             return;
         }
         // Updating horizontal chunks
@@ -1744,7 +1744,7 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
                 size = item.height;
             }
         } else {
-            size = parseInt(item[dimension], 10) || 0;
+            size = parseFloat(item[dimension]) || 0;
         }
         return size;
     }

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3364,6 +3364,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     private _sortDescendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
     private _gridSize: Size = Size.Large;
     private _defaultRowHeight = 50;
+    private _borderSize = 1;
     private _rowCount: number;
     private _cellMergeMode: GridCellMergeMode = GridCellMergeMode.onSort;
     private _columnsToMerge: IgxColumnComponent[] = [];
@@ -5634,7 +5635,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         if (this.hasCellsToMerge) {
             return this.rowHeight;
         }
-        return this.rowHeight + 1;
+        return this.rowHeight + this._borderSize;
     }
 
     /**
@@ -7864,12 +7865,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     }
 
     protected get renderedActualRowHeight() {
-        let border = 1;
-        if (this.rowList.toArray().length > 0) {
-            const rowStyles = this.document.defaultView.getComputedStyle(this.rowList.first.nativeElement);
-            border = rowStyles.borderBottomWidth ? Math.ceil(parseFloat(rowStyles.borderBottomWidth)) : border;
-        }
-        return this.rowHeight + border;
+        return this.rowHeight + this._borderSize;
     }
 
     private executeCallback(rowIndex, visibleColIndex = -1, cb: (args: any) => void = null) {
@@ -8148,6 +8144,13 @@ export abstract class IgxGridBaseDirective implements GridType,
             } else {
                 this._shouldRecalcRowHeight = true;
             }
+
+            const rowStyles = this.document.defaultView.getComputedStyle(this.dataRowList.first.nativeElement);
+
+            const border = rowStyles.borderBottomWidth ? parseFloat(rowStyles.borderBottomWidth) : 1;
+            if (border) {
+                this._borderSize = border;
+            }
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts

@@ -940,7 +940,7 @@ describe('IgxGrid - multi-row-layout #grid', () => {
 
         // check group size is correct
         expect(horizontalVirtualization.getSizeAt(0)).toBe(700);
-        expect(horizontalVirtualization.getSizeAt(1)).toBe(300);
+        expect(horizontalVirtualization.getSizeAt(1)).toBe(grid.calcWidth * 0.5);
 
         // check DOM
         gridFirstRow = grid.rowList.first;
@@ -968,7 +968,7 @@ describe('IgxGrid - multi-row-layout #grid', () => {
 
         // check group size is correct
         expect(horizontalVirtualization.getSizeAt(0)).toBe(700);
-        expect(horizontalVirtualization.getSizeAt(1)).toBe(300);
+        expect(horizontalVirtualization.getSizeAt(1)).toBe(grid.calcWidth * 0.5);
         expect(horizontalVirtualization.getSizeAt(2)).toBe(136 * 4);
 
         // check DOM

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html

@@ -42,7 +42,7 @@
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
             [igxForContainerSize]="calcHeight"
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
-            [igxGridForOfVariableSizes]="false"
+
             #verticalScrollContainer (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
             <ng-template
                 [igxTemplateOutlet]="recordTemplate"