@slithy/react-tessera-gallery 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import { RefObject, ReactEventHandler, ReactNode } from 'react';
 
 type LayoutOptions = {
-    rowHeight: number;
-    gap?: number;
+    rowHeight: number | ((containerWidth: number) => number);
+    gap?: number | ((containerWidth: number) => number);
     lastRow?: 'justify' | 'left' | 'center' | 'right' | 'hide';
+    maxNumRows?: number;
     maxShrink?: number;
     maxStretch?: number;
     justifyThreshold?: number;
@@ -37,6 +38,7 @@ declare function computeTesseraLayout(items: {
 declare function useTesseraGallery<T>(items: GalleryItem<T>[], options: LayoutOptions): {
     containerRef: RefObject<HTMLDivElement | null>;
     rows: ResolvedRow<T>[];
+    gap: number;
     onLoad: (key: string | number, naturalWidth: number, naturalHeight: number) => void;
 };
 

package/dist/index.js

@@ -2,13 +2,16 @@
 var BADNESS_POWER = 3;
 function computeTesseraLayout(items, containerWidth, options) {
   const {
-    rowHeight: idealHeight,
-    gap = 0,
+    rowHeight: rowHeightOption,
+    gap: gapOption = 0,
     lastRow = "left",
+    maxNumRows = Infinity,
     maxShrink = 0.75,
     maxStretch = 1.5,
-    justifyThreshold = 1
+    justifyThreshold = 0.9
   } = options;
+  const idealHeight = typeof rowHeightOption === "function" ? rowHeightOption(containerWidth) : rowHeightOption;
+  const gap = typeof gapOption === "function" ? gapOption(containerWidth) : gapOption;
   const n = items.length;
   if (n === 0 || containerWidth <= 0) return [];
   const minHeight = idealHeight * maxShrink;
@@ -36,9 +39,14 @@ function computeTesseraLayout(items, containerWidth, options) {
   dp[0] = 0;
   for (let i = 0; i < n; i++) {
     if (dp[i] === Infinity) continue;
-    for (let j = i + 1; j <= n; j++) {
+    let lo = i + 1, hi = n;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (rowHeightFor(i, mid) > maxHeight) lo = mid + 1;
+      else hi = mid;
+    }
+    for (let j = lo; j <= n; j++) {
       const h = rowHeightFor(i, j);
-      if (h > maxHeight) continue;
       if (h < minHeight) break;
       const cost = dp[i] + badness(h);
       if (cost < dp[j]) {
@@ -66,9 +74,11 @@ function computeTesseraLayout(items, containerWidth, options) {
   }
   const rows = [];
   let start = 0;
-  for (let r = 0; r < breaks.length; r++) {
-    const end = breaks[r];
-    const isLastRow = r === breaks.length - 1;
+  let prevRowHeight = idealHeight;
+  const effectiveBreaks = breaks.slice(0, maxNumRows);
+  for (let r = 0; r < effectiveBreaks.length; r++) {
+    const end = effectiveBreaks[r];
+    const isLastRow = r === effectiveBreaks.length - 1;
     const numGaps = end - start - 1;
     const totalAR = prefixAR[end] - prefixAR[start];
     let actualHeight;
@@ -85,7 +95,7 @@ function computeTesseraLayout(items, containerWidth, options) {
         actualHeight = rowHeightFor(start, end);
         justify = true;
       } else {
-        actualHeight = idealHeight;
+        actualHeight = prevRowHeight;
         justify = false;
       }
     } else {
@@ -93,6 +103,7 @@ function computeTesseraLayout(items, containerWidth, options) {
       justify = true;
     }
     rows.push(buildRow(items, start, end, actualHeight, justify, containerWidth, gap));
+    prevRowHeight = actualHeight;
     start = end;
   }
   return rows;
@@ -184,7 +195,9 @@ function useTesseraGallery(items, options) {
     []
   );
   const resolvedItems = items.filter((item) => aspectRatioCache.current.has(item.key));
-  const optionsKey = `${options.rowHeight}|${options.gap ?? 0}|${options.maxShrink ?? 0.75}|${options.maxStretch ?? 1.5}`;
+  const resolvedRowHeight = typeof options.rowHeight === "function" ? options.rowHeight(containerWidth) : options.rowHeight;
+  const resolvedGap = typeof options.gap === "function" ? options.gap(containerWidth) : options.gap ?? 0;
+  const optionsKey = `${resolvedRowHeight}|${resolvedGap}|${options.maxShrink ?? 0.75}|${options.maxStretch ?? 1.5}`;
   if (containerWidth !== committedContainerWidthRef.current || optionsKey !== committedOptionsKeyRef.current || resolvedItems.length < committedItemCountRef.current) {
     committedRowsRef.current = [];
     committedItemCountRef.current = 0;
@@ -222,14 +235,14 @@ function useTesseraGallery(items, options) {
   if (lastFrontierRow) {
     rows.push(toResolvedRow(lastFrontierRow, loadedSet.current));
   }
-  return { containerRef, rows, onLoad };
+  return { containerRef, rows, gap: resolvedGap, onLoad };
 }
 
 // src/TesseraGallery.tsx
 import { jsx } from "react/jsx-runtime";
 function TesseraGallery({ items, renderItem, ...options }) {
-  const { containerRef, rows, onLoad } = useTesseraGallery(items, options);
-  const { gap = 0, lastRow = "left" } = options;
+  const { containerRef, rows, gap, onLoad } = useTesseraGallery(items, options);
+  const { lastRow = "left" } = options;
   return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { display: "flex", flexDirection: "column", gap: `${gap}px` }, children: rows.map((row, rowIndex) => {
     const isLastRow = rowIndex === rows.length - 1;
     const justifyContent = isLastRow && lastRow === "center" ? "center" : isLastRow && lastRow === "right" ? "flex-end" : "flex-start";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slithy/react-tessera-gallery",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React justified gallery with optimal line-breaking layout.",
   "type": "module",
   "exports": {
@@ -28,8 +28,8 @@
     "tsup": "^8",
     "typescript": "^5",
     "vitest": "^4.1.2",
-    "@slithy/tsconfig": "0.0.0",
-    "@slithy/eslint-config": "0.0.0"
+    "@slithy/eslint-config": "0.0.0",
+    "@slithy/tsconfig": "0.0.0"
   },
   "repository": {
     "type": "git",