fix: create new rows when resizing beyond last row

Author: onlyexeption

src/components/tile-manager/tile-resize.spec.ts

@@ -11,7 +11,7 @@ import { spy } from 'sinon';
 import { range } from 'lit/directives/range.js';
 import { escapeKey } from '../common/controllers/key-bindings.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
-import { first } from '../common/util.js';
+import { first, last } from '../common/util.js';
 import {
   simulateKeyboard,
   simulateLostPointerCapture,
@@ -87,6 +87,29 @@ describe('Tile resize', () => {
       rowSize = Number.parseFloat(tileManager.minRowHeight!) + gap;
     });
 
+    it('should create new rows when resizing last row', async () => {
+      const lastTile = last(getTiles());
+      const DOM = getResizeContainerDOM(lastTile);
+
+      expect(getRows().length).to.eql(1);
+      expect(getComputedStyle(lastTile).gridRow).to.eql('auto / span 1');
+
+      simulatePointerDown(DOM.adorners.bottom);
+      await elementUpdated(DOM.resizeElement);
+
+      simulatePointerMove(DOM.adorners.bottom, {
+        clientY: rowSize * 4,
+      });
+      await elementUpdated(DOM.resizeElement);
+
+      simulateLostPointerCapture(DOM.adorners.bottom);
+      await elementUpdated(DOM.resizeElement);
+      await nextFrame();
+
+      expect(getRows().length).to.eql(4);
+      expect(getComputedStyle(lastTile).gridRow).to.eql('auto / span 4');
+    });
+
     it('should create a ghost element on resize start', async () => {
       const DOM = getResizeContainerDOM(firstTile);
       const eventSpy = spy(DOM.resizeElement, 'emitEvent');
@@ -169,7 +192,7 @@ describe('Tile resize', () => {
       expect(getRows().length).to.eql(1);
 
       simulatePointerMove(DOM.adorners.side, {
-        clientX: columnSize * 3,
+        clientX: columnSize * 4,
       });
 
       await elementUpdated(DOM.resizeElement);

src/components/tile-manager/tile-util.ts

@@ -262,10 +262,12 @@ class TileResizeState {
       this._position.column,
       this._columns.entries
     );
+
     this._position.row.span = this.calculateResizedSpan(
       rect.height,
       this._position.row,
-      this._rows.entries
+      this._rows.entries,
+      true
     );
 
     const cssColumn = `${column.start < 0 ? 'auto' : column.start} / span ${this._position.column.span}`;
@@ -274,6 +276,30 @@ class TileResizeState {
     return { column: cssColumn, row: cssRow };
   }
 
+  /**
+   * Checks and adjusts tile spans based on the column count of the tile manager.
+   */
+  // REVIEW once we decide how to handle empty columns.
+  public adjustTileGridPosition(tiles: IgcTileComponent[]): void {
+    const columnCount = this.columns.count;
+
+    for (const tile of tiles) {
+      const colStart = tile.colStart || 0;
+      const colSpan = tile.colSpan || 0;
+
+      if (colStart > columnCount) {
+        //Prioritize span over start?
+        tile.colSpan = 1;
+        tile.colStart = columnCount;
+        continue;
+      }
+
+      if (colStart + colSpan - 1 > columnCount) {
+        tile.colSpan = columnCount - colStart + 1;
+      }
+    }
+  }
+
   private calculatePosition(targetPosition: number, sizes: number[]): number {
     const gap = this._gap;
     let accumulatedSize = 0;
@@ -292,10 +318,11 @@ class TileResizeState {
   private calculateResizedSpan(
     targetSize: number,
     tilePosition: TilePosition,
-    sizes: number[]
+    sizes: number[],
+    isRows = false
   ): number {
     let accumulatedSize = 0;
-    let currentSpan = tilePosition.span;
+    let newSpan = tilePosition.span;
 
     const sizesAfterStart = sizes.slice(tilePosition.start - 1);
     const availableSize =
@@ -307,26 +334,34 @@ class TileResizeState {
     }
 
     if (targetSize > availableSize) {
+      if (isRows) {
+        const remainingSize = targetSize - availableSize;
+        const additionalSpan = Math.ceil(
+          remainingSize / (this._rows.minSize + this._gap)
+        );
+        return sizesAfterStart.length + additionalSpan;
+      }
+
       return sizesAfterStart.length;
     }
 
-    for (let i = tilePosition.start; i < sizes.length; i++) {
+    for (let i = tilePosition.start - 1; i < sizes.length; i++) {
       const currentSize = sizes[i];
       const nextSize = sizes[i + 1] ?? currentSize;
 
       const halfwayPoint =
         accumulatedSize + currentSize + this._gap + nextSize / 2;
 
       if (targetSize > halfwayPoint) {
-        currentSpan = i + 2 - tilePosition.start;
+        newSpan = i + 3 - tilePosition.start;
       } else {
         break;
       }
 
       accumulatedSize += currentSize + this._gap;
     }
 
-    return currentSpan;
+    return newSpan;
   }
 }