fixup! feat(masonry-layout): add new component

Author: Kiarokh

src/components/masonry-layout/masonry-layout.tsx

@@ -13,7 +13,7 @@ import { Component, Element, h, Host, Prop, State } from '@stencil/core';
  * browser support or produce poor results.
  *
  * The number of columns is determined automatically based on the
- * available width and the preferred column width.
+ * available width and the minimum column width.
  *
  * :::note
  * This component has `shadow: false`, so consumers can treat it as
@@ -106,11 +106,13 @@ export class MasonryLayout {
         );
     }
 
-    private pxToRem(px: number): number {
-        const rootFontSize = Number.parseFloat(
+    private getRootFontSize(): number {
+        return Number.parseFloat(
             getComputedStyle(document.documentElement).fontSize
         );
+    }
 
+    private pxToRem(px: number, rootFontSize: number): number {
         return px / rootFontSize;
     }
 
@@ -121,8 +123,13 @@ export class MasonryLayout {
      *
      * @param property - The CSS custom property name to read.
      * @param fallback - The fallback CSS value if the property is not set.
+     * @param rootFontSize - The root font size in pixels for rem conversion.
      */
-    private getCssPropertyInPx(property: string, fallback: string): number {
+    private getCssPropertyInPx(
+        property: string,
+        fallback: string,
+        rootFontSize: number,
+    ): number {
         const value =
             getComputedStyle(this.host).getPropertyValue(property).trim() ||
             fallback;
@@ -132,10 +139,6 @@ export class MasonryLayout {
             return number;
         }
 
-        const rootFontSize = Number.parseFloat(
-            getComputedStyle(document.documentElement).fontSize
-        );
-
         // Assume rem for any other unit (rem is the project standard)
         return number * rootFontSize;
     }
@@ -169,28 +172,53 @@ export class MasonryLayout {
             return;
         }
 
-        const gapPx = this.getCssPropertyInPx('--masonry-layout-gap', '1rem');
-        const columnWidthPx = this.calculateColumnWidth(hostWidth, gapPx);
-        const columnHeights = this.positionItems(items, columnWidthPx, gapPx);
+        const rootFontSize = this.getRootFontSize();
+        const gapPx = this.getCssPropertyInPx(
+            '--masonry-layout-gap',
+            '1rem',
+            rootFontSize,
+        );
+        const { columnCount, columnWidth } = this.calculateColumns(
+            hostWidth,
+            gapPx,
+            rootFontSize,
+        );
+        const columnHeights = this.positionItems(
+            items,
+            columnCount,
+            columnWidth,
+            gapPx,
+            rootFontSize,
+        );
 
-        const newHeight = this.pxToRem(Math.max(...columnHeights) - gapPx);
+        const newHeight = this.pxToRem(
+            Math.max(...columnHeights) - gapPx,
+            rootFontSize,
+        );
         if (Math.abs(newHeight - this.containerHeight) > 0.1) {
             this.containerHeight = newHeight;
         }
     }
 
-    private calculateColumnWidth(hostWidth: number, gapPx: number): number {
+    private calculateColumns(
+        hostWidth: number,
+        gapPx: number,
+        rootFontSize: number,
+    ): { columnCount: number; columnWidth: number } {
         const minColumnWidthPx = this.getCssPropertyInPx(
             '--masonry-layout-min-column-width',
-            '12rem'
+            '12rem',
+            rootFontSize,
         );
 
         const columnCount = Math.max(
             1,
-            Math.floor((hostWidth + gapPx) / (minColumnWidthPx + gapPx))
+            Math.floor((hostWidth + gapPx) / (minColumnWidthPx + gapPx)),
         );
+        const columnWidth =
+            (hostWidth - (columnCount - 1) * gapPx) / columnCount;
 
-        return (hostWidth - (columnCount - 1) * gapPx) / columnCount;
+        return { columnCount, columnWidth };
     }
 
     /**
@@ -202,12 +230,11 @@ export class MasonryLayout {
      */
     private positionItems(
         items: HTMLElement[],
+        columnCount: number,
         columnWidth: number,
-        gapPx: number
+        gapPx: number,
+        rootFontSize: number,
     ): number[] {
-        const columnCount = Math.round(
-            (this.host.offsetWidth + gapPx) / (columnWidth + gapPx)
-        );
         const columnHeights = Array.from({ length: columnCount }, () => 0);
 
         let index = 0;
@@ -220,10 +247,13 @@ export class MasonryLayout {
             const y = columnHeights[column];
 
             item.style.position = 'absolute';
-            item.style.left = `${this.pxToRem(x)}rem`;
-            item.style.top = `${this.pxToRem(y)}rem`;
-            item.style.width = `${this.pxToRem(columnWidth)}rem`;
-            item.style.animationDelay = `${index * 15}ms`;
+            item.style.left = `${this.pxToRem(x, rootFontSize)}rem`;
+            item.style.top = `${this.pxToRem(y, rootFontSize)}rem`;
+            item.style.width = `${this.pxToRem(columnWidth, rootFontSize)}rem`;
+
+            if (!this.hasRendered) {
+                item.style.animationDelay = `${index * 15}ms`;
+            }
 
             columnHeights[column] += item.offsetHeight + gapPx;
             index++;