Latest resizing changes (#1517)

* tile resizing enhancment
* fix: improve ghost snapping for rows

---------

Co-authored-by: onlyexeption <[email protected]>

Author: gedinakova

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

@@ -0,0 +1,95 @@
+export class ResizeUtil {
+  public static calculateSnappedHeight(
+    deltaY: number,
+    startingY: number,
+    rowHeights: number[],
+    rowGap: number,
+    initialTop: number,
+    initialHeight: number
+  ): number {
+    const snappedHeight = startingY + deltaY;
+    const rowsAbove =
+      ResizeUtil.calculate(initialTop, rowHeights, rowGap).targetIndex || 0;
+    const res = ResizeUtil.calculate(snappedHeight, rowHeights, rowGap)!;
+    const accumulatedHeight = res.accumulatedHeight;
+    const startRowIndex = res.targetIndex;
+    const aboveRowsHeight = ResizeUtil.accumulateHeight(
+      rowsAbove,
+      rowHeights,
+      rowGap
+    );
+
+    let result = initialHeight;
+    let previousRowsHeight = ResizeUtil.accumulateHeight(
+      startRowIndex,
+      rowHeights,
+      rowGap
+    );
+
+    if (deltaY > 0) {
+      const rowHeight = rowHeights[startRowIndex];
+      const halfwayThreshold = previousRowsHeight + rowGap + rowHeight / 2;
+
+      if (snappedHeight >= halfwayThreshold) {
+        result = accumulatedHeight - aboveRowsHeight;
+      } else {
+        result = initialHeight + deltaY;
+      }
+
+      result = result <= 0 ? rowHeights[startRowIndex - 1] : result;
+    } else if (deltaY < 0) {
+      previousRowsHeight =
+        previousRowsHeight === 0 ? rowHeights[0] : previousRowsHeight;
+      const currentRowHeight = rowHeights[startRowIndex];
+      const halfwayThreshold =
+        accumulatedHeight - currentRowHeight / 2 - rowGap;
+
+      if (startRowIndex !== 0 && startRowIndex >= startRowIndex - 1) {
+        if (snappedHeight <= halfwayThreshold) {
+          result =
+            accumulatedHeight - currentRowHeight - rowGap - aboveRowsHeight;
+        } else {
+          result = rowHeights
+            .slice(rowsAbove, startRowIndex)
+            .reduce((sum, height) => sum + height, 0);
+        }
+      } else {
+        result = snappedHeight - aboveRowsHeight;
+      }
+    }
+
+    return result;
+  }
+
+  private static calculate(
+    initialTop: number,
+    rowHeights: number[],
+    rowGap: number
+  ): any {
+    let targetIndex = 0;
+    let accumulatedHeight = 0;
+
+    for (let i = 0; i < rowHeights.length; i++) {
+      accumulatedHeight += rowHeights[i] + (i > 0 ? rowGap : 0);
+      if (initialTop <= accumulatedHeight) {
+        targetIndex = i;
+        break;
+      }
+    }
+
+    return { targetIndex, accumulatedHeight };
+  }
+
+  private static accumulateHeight(
+    rowIndex: number,
+    rowHeights: number[],
+    rowGap: number
+  ): number {
+    let accumulatedHeight = 0;
+    for (let i = 0; i < rowIndex; i++) {
+      accumulatedHeight += rowHeights[i] + rowGap;
+    }
+
+    return accumulatedHeight;
+  }
+}

src/components/tile-manager/tile.ts

@@ -21,6 +21,7 @@ import { styles as shared } from './themes/shared/tile/tile.common.css.js';
 import { styles } from './themes/tile.base.css.js';
 import { all } from './themes/tile.js';
 import IgcTileHeaderComponent from './tile-header.js';
+import { ResizeUtil } from './tile-util.js';
 
 type IgcTileChangeState = {
   tile: IgcTileComponent;
@@ -101,6 +102,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
     background?: string;
     border?: string;
     borderRadius?: string;
+    rowHeights?: number[];
+    initialTop?: number;
   } = {};
 
   // Tile manager context properties and helpers
@@ -371,6 +374,12 @@ export default class IgcTileComponent extends EventEmitterMixin<
   private cacheStyles() {
     //use util
     const computedStyle = getComputedStyle(this);
+    const parentWrapper =
+      this.parentElement!.shadowRoot!.querySelector('[part="base"]')!;
+
+    const rowHeights = getComputedStyle(parentWrapper)
+      .gridTemplateRows.split(' ')
+      .map((height) => Number.parseFloat(height.trim()));
 
     this._cachedStyles = {
       columnCount: Number.parseFloat(
@@ -385,6 +394,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
       minHeight: Number.parseFloat(
         computedStyle.getPropertyValue('--ig-min-row-height')
       ),
+      rowHeights,
+      initialTop: parentWrapper.getBoundingClientRect().top,
     };
   }
 
@@ -403,6 +414,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
     this._isResizing = true;
 
     const ghostElement = event.detail.state.current;
+    const rowHeights = this._cachedStyles.rowHeights!;
 
     if (ghostElement) {
       const deltaX = event.detail.event.clientX - this._initialPointerX!;
@@ -414,10 +426,20 @@ export default class IgcTileComponent extends EventEmitterMixin<
         event.detail.state.initial.width,
         columnGap
       );
-      const snappedHeight = this._calculateSnappedHeight(
+
+      const actualTop = this._cachedStyles.initialTop! + window.scrollY;
+      const initialTop = event.detail.state.initial.top + window.scrollY;
+      const actualBottom = event.detail.state.initial.bottom + window.scrollY;
+
+      const startingY = actualBottom - actualTop;
+
+      const snappedHeight = ResizeUtil.calculateSnappedHeight(
         deltaY,
-        event.detail.state.initial.height,
-        columnGap
+        startingY,
+        rowHeights,
+        columnGap,
+        initialTop,
+        event.detail.state.initial.height
       );
 
       ghostElement.width = snappedWidth;
@@ -446,33 +468,6 @@ export default class IgcTileComponent extends EventEmitterMixin<
     return snappedWidth < colWidth ? colWidth : snappedWidth;
   }
 
-  private _calculateSnappedHeight(
-    deltaY: number,
-    initialHeight: number,
-    rowGap: number
-  ): number {
-    const minHeight = this._cachedStyles.minHeight!;
-    let snappedHeight = initialHeight;
-
-    if (deltaY > 0) {
-      // For resizing down, add the gaps and the rows multiplied by min height to the initial tile height
-      const additionalHeight = initialHeight + deltaY;
-      const wholeRows = Math.floor(additionalHeight / (minHeight + rowGap));
-      const totalHeight = wholeRows * (minHeight + rowGap) - rowGap;
-
-      snappedHeight = Math.max(totalHeight, minHeight); // Ensure it at least snaps to minHeight
-    } else if (deltaY < 0 && initialHeight > minHeight) {
-      // For resizing up, subtract the gaps and the rows multiplied by min height from the initial tile height
-      const reducedHeight = initialHeight + deltaY;
-      const wholeRows = Math.floor(reducedHeight / (minHeight + rowGap));
-      const totalHeight = wholeRows * (minHeight + rowGap) - rowGap;
-
-      snappedHeight = Math.max(totalHeight, minHeight);
-    }
-
-    return snappedHeight;
-  }
-
   private _handleResizeEnd(event: CustomEvent<ResizeCallbackParams>) {
     const state = event.detail.state;
     const width = state.current.width; // - state.current.x;