chore(*): Define indicidual containers for each row dimension with its own virtualization synched to the same external scrollbar.

MKirova · MKirova · commit dbf6c29d45b4 · 2022-01-05T16:36:15.000+02:00
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
@@ -414,7 +414,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
 
         if (this.igxForScrollOrientation === 'vertical') {
             this.dc.instance._viewContainer.element.nativeElement.style.top = '0px';
-            this.scrollComponent = vc.createComponent(VirtualHelperComponent).instance;
+            this.scrollComponent = this.syncScrollService.getScrollMaster(this.igxForScrollOrientation) || vc.createComponent(VirtualHelperComponent).instance;
             this._maxHeight = this._calcMaxBrowserHeight();
             this.scrollComponent.size = this.igxForOf ? this._calcHeight() : 0;
             this.syncScrollService.setScrollMaster(this.igxForScrollOrientation, this.scrollComponent);
@@ -1115,20 +1115,16 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     protected initSizesCache(items: any[]): number {
         let totalSize = 0;
         let size = 0;
-        const dimension = this.igxForScrollOrientation === 'horizontal' ?
-            this.igxForSizePropName : 'height';
+        const dimension = this.igxForSizePropName || 'height';
         let i = 0;
         this.sizesCache = [];
         this.heightCache = [];
         this.sizesCache.push(0);
         const count = this.isRemote ? this.totalItemCount : items.length;
         for (i; i < count; i++) {
+            size = this._getItemSize(items[i], dimension);
             if (dimension === 'height') {
-                // cols[i][dimension] = parseInt(this.igxForItemSize, 10) || 0;
-                size = parseInt(this.igxForItemSize, 10) || 0;
                 this.heightCache.push(size);
-            } else {
-                size = this._getItemSize(items[i], dimension);
             }
             totalSize += size;
             this.sizesCache.push(totalSize);
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -19,16 +19,17 @@
 </igx-pivot-header-row>
 
 <div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
-    <div #rowDimensionContainer role="rowgroup" class='igx-grid__tbody-pivot-dimension'>
+    <div *ngFor='let dim of rowDimensions' #rowDimensionContainer role="rowgroup" class='igx-grid__tbody-pivot-dimension'>
         <ng-template igxGridFor let-rowData [igxGridForOf]="dataView
-        | pivotGridMRL:pivotConfiguration:pivotKeys:pipeTrigger"
+        | pivotGridCellMerging:pivotConfiguration:pivotKeys:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'
-            [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
+            [igxForItemSize]="renderedRowHeight"
             #verticalRowDimScrollContainer>
         <igx-pivot-row-dimension-content  role='row' class="igx-grid-thead" [grid]="this"
+            [dimension]='dim'
             [rowIndex]='rowIndex' [rowData]='rowData'
-            [density]="displayDensity" [width]="pivotRowWidths">
+            [density]="displayDensity" [width]="resolveRowDimensionWidth(dim)">
         </igx-pivot-row-dimension-content>
         </ng-template>
     </div>
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -1034,13 +1034,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /**
  * @hidden @internal
  */
-    @ViewChild('verticalRowDimScrollContainer', { read: IgxGridForOfDirective, static: true })
-    public verticalRowDimScrollContainer: IgxGridForOfDirective<any>;
+    @ViewChildren('verticalRowDimScrollContainer', { read: IgxGridForOfDirective})
+    public verticalRowDimScrollContainers: QueryList<IgxGridForOfDirective<any>>;
 
     protected verticalScrollHandler(event) {
-        this.verticalRowDimScrollContainer.onScroll(event);
         super.verticalScrollHandler(event);
-
+        this.verticalRowDimScrollContainers.forEach(x => x.onScroll(event));
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.module.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.module.ts
@@ -3,7 +3,7 @@ import { IgxGridModule } from '../grid/grid.module';
 import { IgxPivotGridComponent } from './pivot-grid.component';
 import { IgxPivotRowComponent } from './pivot-row.component';
 import { IgxPivotRowPipe, IgxPivotColumnPipe, IgxPivotGridFilterPipe,
-   IgxPivotRowExpansionPipe, IgxPivotGridSortingPipe, IgxPivotGridColumnSortingPipe, IgxPivotRowMRLPipe } from './pivot-grid.pipes';
+   IgxPivotRowExpansionPipe, IgxPivotGridSortingPipe, IgxPivotGridColumnSortingPipe, IgxPivotCellMergingPipe } from './pivot-grid.pipes';
 import { IgxGridComponent } from '../grid/grid.component';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component';
@@ -25,7 +25,7 @@ import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-
     IgxPivotGridFilterPipe,
     IgxPivotGridSortingPipe,
     IgxPivotGridColumnSortingPipe,
-    IgxPivotRowMRLPipe
+    IgxPivotCellMergingPipe
   ],
   exports: [
     IgxGridModule,
@@ -40,7 +40,7 @@ import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-
     IgxPivotGridFilterPipe,
     IgxPivotGridSortingPipe,
     IgxPivotGridColumnSortingPipe,
-    IgxPivotRowMRLPipe
+    IgxPivotCellMergingPipe
   ],
   imports: [
     IgxGridModule,
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts
@@ -102,10 +102,10 @@ export class IgxPivotRowExpansionPipe implements PipeTransform {
  * @hidden
  */
 @Pipe({
-    name: 'pivotGridMRL',
+    name: 'pivotGridCellMerging',
     pure: true
 })
-export class IgxPivotRowMRLPipe implements PipeTransform {
+export class IgxPivotCellMergingPipe implements PipeTransform {
     constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
     public transform(
         collection: any[],
@@ -114,22 +114,30 @@ export class IgxPivotRowMRLPipe implements PipeTransform {
         _pipeTrigger?: number
     ): any[] {
         if (collection.length === 0 || config.rows.length === 0) return collection;
-        let data = [];
+        const data = collection ? cloneArray(collection, true) : [];
         let groupData = [];
         let prev;
-        const dim = config.rows[0];
-        for (let rec of collection) {
-            const dimData = PivotUtil.getDimensionLevel(dim, rec, pivotKeys);
-            const val = rec[dimData.dimension.memberName];
-            if (prev !== val && groupData.length > 0) {
-                groupData[0][dim.memberName + pivotKeys.rowDimensionSeparator + pivotKeys.children] = groupData;
-                if (data.indexOf(groupData[0]) === -1) {
-                    data.push(groupData[0]);
+        let prevDim;
+        let prevDimRoot;
+        const enabledRows = config.rows.filter(x => x.enabled);
+        for (let dim of enabledRows) {
+            for (let rec of data) {
+                const dimData = PivotUtil.getDimensionLevel(dim, rec, pivotKeys);
+                const val = rec[dimData.dimension.memberName];
+                if (prev !== val && groupData.length > 0) {
+                    groupData.forEach((gr, ind) => {
+                        if (ind === 0) {
+                            gr[prevDim.dimension.memberName + pivotKeys.rowDimensionSeparator + 'first'] = true;
+                        }
+                        gr[prevDim.dimension.memberName + pivotKeys.rowDimensionSeparator + 'rowSpan'] = groupData.length;
+                    });
+                    groupData = [];
                 }
-                groupData = [];
+                groupData.push(rec);
+                prev = val;
+                prevDim = dimData;
+                prevDimRoot = dim;
             }
-            groupData.push(rec);
-            prev = val;
         }
         return data;
     }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html
@@ -1,15 +1,13 @@
-<div role="rowgroup" class="igx-grid-thead__wrapper" [style.width.px]="width"
+<div  role="rowgroup" class="igx-grid-thead__wrapper" [style.width.px]="width"
     [class.igx-grid__tr--mrl]="hasMRL">
     <div class="igx-grid__tr" role="row" [style.width.px]="width">
-        <ng-template ngFor #headerVirtualContainer let-column
-            [ngForOf]="rowDimension">
-            <igx-pivot-row-dimension-header-group [ngClass]="column.headerGroupClasses"
-                [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
-                [style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                [style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                [rowIndex]="rowIndex">
+            <igx-pivot-row-dimension-header-group *ngIf='isFirst' [ngClass]="rowDimensionColumn.headerGroupClasses"
+                [ngStyle]="rowDimensionColumn.headerGroupStyles |igxHeaderGroupStyle:rowDimensionColumn:grid.pipeTrigger" [column]="rowDimensionColumn"
+                [style.min-width]="rowDimensionColumn.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
+                [style.flex-basis]="rowDimensionColumn.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
+                [rowIndex]="rowIndex"
+                [style.min-height.px]='headerHeight'>
             </igx-pivot-row-dimension-header-group>
-        </ng-template>
     </div>
 </div>
 
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.ts
@@ -41,6 +41,9 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
     @Input()
     public rowIndex: number;
 
+    @Input()
+    public dimension: IPivotDimension;
+
     @Input()
     public rowData: any;
 
@@ -65,10 +68,10 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
     ) {
         super(ref, cdr);
     }
-    protected rowDimensionData: IPivotDimensionData[] = [];
+    protected rowDimensionData: IPivotDimensionData;
 
-    public get rowDimension() {
-        return this.rowDimensionData?.filter(x => !x.isChild).map(x => x.column);
+    public get rowDimensionColumn() {
+        return this.rowDimensionData?.column;
     }
 
     /**
@@ -77,19 +80,17 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
     */
     public ngOnChanges(changes: SimpleChanges) {
         const rowDimConfig = this.grid.rowDimensions;
-        if (changes.data || rowDimConfig.length !== this.rowDimensionData.length) {
+        if (changes.rowData) {
             // generate new rowDimension on row data change
-            this.rowDimensionData = [];
+            this.rowDimensionData = null;
             this.viewRef.clear();
-            this.extractFromDimensions(rowDimConfig, 0);
+            this.extractFromDimensions();
             this.viewRef.clear();
         }
         if (changes.pivotRowWidths && this.rowDimensionData) {
-            for (const dim of rowDimConfig) {
-                const dimData = PivotUtil.getDimensionLevel(dim, this.rowData, this.grid.pivotKeys);
-                const data = this.rowDimensionData.find(x => x.dimension.memberName === dimData.dimension.memberName);
-                data.column.width = this.grid.resolveRowDimensionWidth(dim) + 'px';
-            }
+            const dimData = PivotUtil.getDimensionLevel(this.dimension, this.rowData, this.grid.pivotKeys);
+            const data = this.rowDimensionData;
+            data.column.width = this.grid.resolveRowDimensionWidth(this.dimension) + 'px';
         }
     }
 
@@ -99,7 +100,7 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
      * @internal
      */
     public getRowDimensionKey(col: IgxColumnComponent) {
-        const dimData = this.rowDimensionData.find(x => x.column.field === col.field);
+        const dimData = this.rowDimensionData;
         const key = PivotUtil.getRecordKey(this.rowData, dimData.dimension, dimData.prevDimensions, this.grid.pivotKeys);
         return key;
     }
@@ -112,6 +113,19 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
         return this.rowData[col.field + this.grid.pivotKeys.rowDimensionSeparator + this.grid.pivotKeys.level];
     }
 
+    get rowSpan() {
+        return this.rowData[this.rowDimensionData.dimension.memberName + this.grid.pivotKeys.rowDimensionSeparator + 'rowSpan'] || 1;
+    }
+
+    get headerHeight() {
+        return this.rowSpan * this.grid.renderedRowHeight;
+    }
+
+    get isFirst() {
+        const hasRowSpan = this.rowSpan && this.rowSpan > 1;
+        return !hasRowSpan || this.rowData[this.rowDimensionData.dimension.memberName + this.grid.pivotKeys.rowDimensionSeparator + 'first'];
+    }
+
 
     /**
      * @hidden @internal
@@ -129,91 +143,41 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
         }
     }
 
-    protected extractFromDimensions(rowDimConfig: IPivotDimension[], level: number) {
-        let dimIndex = 0;
-        let currentLvl = 0;
-        currentLvl += level;
-        const prev = [];
-        let prevDim;
-        for (const dim of rowDimConfig) {
-            const dimData = PivotUtil.getDimensionLevel(dim, this.rowData, this.grid.pivotKeys);
-            dimIndex += dimData.level;
-            currentLvl += dimData.level;
-            const prevChildren = prevDim ? this.rowData[prevDim.memberName + this.grid.pivotKeys.rowDimensionSeparator + this.grid.pivotKeys.children] : []; 
-            if (prevChildren && prevChildren.length > 0) {
-                const childrenCols = [];
-                const layoutCol = this.rowDimensionData.find(x => x.column.columnLayout).column;
-                prevChildren.forEach((childData, index) => {
-                    const dimData = PivotUtil.getDimensionLevel(dim, childData, this.grid.pivotKeys);
-                    dimIndex += dimData.level;
-                    currentLvl += dimData.level;
-                    const column = this.extractFromDimension(dimData.dimension, childData, [], dimIndex, currentLvl, dim, [...prev]);
-                    column.rowStart = index + 1;
-                    column.rowEnd = index + 2;
-                    column.colStart = 2;
-                    childrenCols.push(column);
-                    this.rowDimensionData.push({
-                        column,
-                        dimension: dimData.dimension,
-                        prevDimensions: [...prev],
-                        isChild: true
-                    });
-                });
-                const all_children = layoutCol.children.toArray().concat(childrenCols);
-                layoutCol.children.reset(all_children);
-                continue;
-            }
-            const children = this.rowData[dim.memberName + this.grid.pivotKeys.rowDimensionSeparator + this.grid.pivotKeys.children];
-            const column = this.extractFromDimension(dimData.dimension, this.rowData, children, dimIndex, currentLvl, dim, [...prev]);
-            this.rowDimensionData.push({
-                column,
-                dimension: dimData.dimension,
-                prevDimensions: [...prev]
-            });
-            prevDim = dim;
-            prev.push(dimData.dimension);
+    protected extractFromDimensions() {
+        const dimData = PivotUtil.getDimensionLevel(this.dimension, this.rowData, this.grid.pivotKeys);
+        const col = this.extractFromDimension(dimData, this.rowData);
+        const prevDims = this.getPrevDims(this.dimension);
+        this.rowDimensionData = {
+            column: col,
+            dimension: dimData.dimension,
+            prevDimensions: prevDims
+        };
+    }
+
+    protected getPrevDims(currDim) {
+        const ind = this.grid.rowDimensions.indexOf(currDim);
+        const prevDims = [];
+        for (let i = 0; i < ind - 1; i++) {
+            const prevDim = this.grid.rowDimensions[i];
+            const dimData = PivotUtil.getDimensionLevel(prevDim, this.rowData, this.grid.pivotKeys);
+            prevDims.push(dimData.dimension);
         }
+        return prevDims;
     }
 
-    protected extractFromDimension(dim: IPivotDimension, rowData: any[], children: any[], index: number = 0, lvl = 0, rootDim: IPivotDimension, prevDims) {
-        const field = dim.memberName;
+    protected extractFromDimension(dimData, rowData: any[]) {
+        const field = dimData.dimension.memberName;
         const header = rowData[field];
-        let col;
-        if (children && children.length > 0) {
-            const ref = this.viewRef.createComponent(IgxColumnLayoutComponent);
-            col = ref.instance;
-            ref.instance.field = 'group';
-            const childCol = this._createColComponent(field, header, children, index, dim, lvl, rootDim);
-            ref.instance.children.reset([childCol]);
-            this.rowDimensionData.push({
-                column: childCol,
-                dimension: dim,
-                prevDimensions: prevDims,
-                isChild: true
-            });
-        } else {
-            col = this._createColComponent(field, header, children, index, dim, lvl, rootDim);
-        }
+        const col = this._createColComponent(field, header, dimData.dimension, dimData.level);
         return col;
     }
 
-    protected _createColComponent(field: string, header: string, children: any[],
-        index: number = 0,
-        dim: IPivotDimension, lvl = 0, rootDim: IPivotDimension) {
+    protected _createColComponent(field: string, header: string, dim: IPivotDimension, lvl) {
         const ref = this.viewRef.createComponent(IgxColumnComponent);
-        if (children && children.length > 0) {
-            ref.instance.rowStart = 1;
-            ref.instance.rowEnd = children.length + 1;
-            ref.instance.colStart = 1;
-        } else {
-            ref.instance.colStart = 2;
-            ref.instance.rowStart = 1;
-            ref.instance.rowEnd = 2;
-        }
         ref.instance.field = field;
         ref.instance.header = header;
-        ref.instance.width = this.grid.resolveRowDimensionWidth(rootDim) + 'px';
-        (ref as any).instance._vIndex = this.grid.columns.length + index + this.rowIndex * this.grid.pivotConfiguration.rows.length;
+        ref.instance.width = this.grid.resolveRowDimensionWidth(this.dimension) + 'px';
+        (ref as any).instance._vIndex = this.grid.columns.length + this.rowIndex + this.rowIndex * this.grid.pivotConfiguration.rows.length;
         if (dim.childLevel && lvl >= PivotUtil.getTotalLvl(this.rowData, this.grid.pivotKeys)) {
             ref.instance.headerTemplate = this.headerTemplate;
         } else {
