fix(grid): fix mat-grid-tile position (#12980)

refresh gapStartIndex and gapEndIndex after move to a new row. Otherwise, they become out of sync and causes wrong calculation.

Author: vivian-hu-zz

src/demo-app/grid-list/grid-list-demo.html

@@ -11,6 +11,46 @@
     </mat-card-content>
   </mat-card>
 
+  <mat-card>
+    <mat-card-title>Grid with 1 cell at the beginning of a new row</mat-card-title>
+    <mat-card-content class="demo-basic-list">
+      <mat-grid-list [cols]="6" gutterSize="20px" rowHeight="20px">
+        <mat-grid-tile [colspan]="3" [rowspan]="4"
+                       class="mat-elevation-z15">
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="3" [rowspan]="4"
+                       class="mat-elevation-z15">
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="1" [rowspan]="2"
+                       class="mat-elevation-z15">
+        </mat-grid-tile>
+      </mat-grid-list>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card>
+    <mat-card-title>Grid with col-span</mat-card-title>
+    <mat-card-content class="demo-basic-list">
+      <mat-grid-list [cols]="10" gutterSize="20px" rowHeight="20px">
+        <mat-grid-tile [colspan]="4" [rowspan]="4"
+                       class="mat-elevation-z15">
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="2" [rowspan]="2"
+                       class="mat-elevation-z15">
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="4" [rowspan]="4"
+                       class="mat-elevation-z15">
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="4" [rowspan]="4"
+                       class="mat-elevation-z15">
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="4" [rowspan]="4"
+                       class="mat-elevation-z15">
+        </mat-grid-tile>
+      </mat-grid-list>
+    </mat-card-content>
+  </mat-card>
+
   <mat-card>
     <mat-card-title>Fixed-height grid list</mat-card-title>
     <mat-card-content>

src/lib/grid-list/grid-list.spec.ts

@@ -246,6 +246,65 @@ describe('MatGridList', () => {
     expect(getStyle(tiles[3], 'top')).toBe('101px');
   });
 
+  it('should lay out tiles correctly', () => {
+    const fixture = createComponent(GridListWithLayout);
+
+    fixture.detectChanges();
+    const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile'));
+
+    expect(getStyle(tiles[0], 'width')).toBe('40px');
+    expect(getStyle(tiles[0], 'height')).toBe('40px');
+    expect(getComputedLeft(tiles[0])).toBe(0);
+    expect(getStyle(tiles[0], 'top')).toBe('0px');
+
+    expect(getStyle(tiles[1], 'width')).toBe('20px');
+    expect(getStyle(tiles[1], 'height')).toBe('20px');
+    expect(getComputedLeft(tiles[1])).toBe(40);
+    expect(getStyle(tiles[1], 'top')).toBe('0px');
+
+    expect(getStyle(tiles[2], 'width')).toBe('40px');
+    expect(getStyle(tiles[2], 'height')).toBe('40px');
+    expect(getComputedLeft(tiles[2])).toBe(60);
+    expect(getStyle(tiles[2], 'top')).toBe('0px');
+
+    expect(getStyle(tiles[3], 'width')).toBe('40px');
+    expect(getStyle(tiles[3], 'height')).toBe('40px');
+    expect(getComputedLeft(tiles[3])).toBe(0);
+    expect(getStyle(tiles[3], 'top')).toBe('40px');
+
+    expect(getStyle(tiles[4], 'width')).toBe('40px');
+    expect(getStyle(tiles[4], 'height')).toBe('40px');
+    expect(getComputedLeft(tiles[4])).toBe(40);
+    expect(getStyle(tiles[4], 'top')).toBe('40px');
+  });
+
+  it('should lay out tiles correctly when single cell to be placed at the beginning',
+        () => {
+    const fixture = createComponent(GridListWithSingleCellAtBeginning);
+
+    fixture.detectChanges();
+    const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile'));
+
+    expect(getStyle(tiles[0], 'width')).toBe('40px');
+    expect(getStyle(tiles[0], 'height')).toBe('40px');
+    expect(getComputedLeft(tiles[0])).toBe(0);
+    expect(getStyle(tiles[0], 'top')).toBe('0px');
+
+    expect(getStyle(tiles[1], 'width')).toBe('20px');
+    expect(getStyle(tiles[1], 'height')).toBe('40px');
+    expect(getComputedLeft(tiles[1])).toBe(40);
+    expect(getStyle(tiles[1], 'top')).toBe('0px');
+
+    expect(getStyle(tiles[2], 'width')).toBe('40px');
+    expect(getStyle(tiles[2], 'height')).toBe('40px');
+    expect(getComputedLeft(tiles[2])).toBe(60);
+    expect(getStyle(tiles[2], 'top')).toBe('0px');
+
+    expect(getStyle(tiles[3], 'height')).toBe('20px');
+    expect(getComputedLeft(tiles[3])).toBe(0);
+    expect(getStyle(tiles[3], 'top')).toBe('40px');
+  });
+
   it('should add not add any classes to footers without lines', () => {
     const fixture = createComponent(GridListWithFootersWithoutLines);
     fixture.detectChanges();
@@ -486,6 +545,29 @@ class GridListWithComplexLayout {
   tiles: any[];
 }
 
+@Component({template: `
+  <div style="width:100px">
+    <mat-grid-list [cols]="10" gutterSize="0px" rowHeight="10px">
+      <mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
+      <mat-grid-tile [colspan]="2" [rowspan]="2"></mat-grid-tile>
+      <mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
+      <mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
+      <mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
+    </mat-grid-list>
+  </div>`})
+class GridListWithLayout {}
+
+@Component({template: `
+  <div style="width:100px">
+    <mat-grid-list [cols]="10" gutterSize="0px" rowHeight="10px">
+      <mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
+      <mat-grid-tile [colspan]="2" [rowspan]="4"></mat-grid-tile>
+      <mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
+      <mat-grid-tile [colspan]="1" [rowspan]="2"></mat-grid-tile>
+    </mat-grid-list>
+  </div>`})
+class GridListWithSingleCellAtBeginning {}
+
 @Component({template: `
     <mat-grid-list cols="1">
       <mat-grid-tile>

src/lib/grid-list/tile-coordinator.ts

@@ -91,6 +91,8 @@ export class TileCoordinator {
       // If we've reached the end of the row, go to the next row.
       if (this.columnIndex + tileCols > this.tracker.length) {
         this._nextRow();
+        gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
+        gapEndIndex = this._findGapEndIndex(gapStartIndex);
         continue;
       }
 
@@ -99,6 +101,8 @@ export class TileCoordinator {
       // If there are no more empty spaces in this row at all, move on to the next row.
       if (gapStartIndex == -1) {
         this._nextRow();
+        gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
+        gapEndIndex = this._findGapEndIndex(gapStartIndex);
         continue;
       }
 
@@ -108,8 +112,9 @@ export class TileCoordinator {
       // gap on the next iteration.
       this.columnIndex = gapStartIndex + 1;
 
-      // Continue iterating until we find a gap wide enough for this tile.
-    } while (gapEndIndex - gapStartIndex < tileCols);
+      // Continue iterating until we find a gap wide enough for this tile. Since gapEndIndex is
+      // exclusive, gapEndIndex is 0 means we didn't find a gap and should continue.
+    } while ((gapEndIndex - gapStartIndex < tileCols) || (gapEndIndex == 0));
 
     // If we still didn't manage to find a gap, ensure that the index is
     // at least zero so the tile doesn't get pulled out of the grid.