WIP - Support for variable height rows

src/controllers/virtualized_controller.js

@@ -11,6 +11,7 @@ export default class extends Controller {
     renderAhead: { type: Number, default: 10 },
     debug: { type: Boolean, default: false },
     virtualizedId: { type: String, default: "virtualized" },
+    heightMode: { type: String, default: "fixed" },
   };
 
   static targets = ["content", "placeholder", "preloaded"];
@@ -24,6 +25,11 @@ export default class extends Controller {
     this.currentFetches = 0;
     this.rendering = false;
 
+    // Variable heights
+    this.variableTotal = 0;
+    this.variableRowHeights = new Map();
+    this.variableCumulativeHeights = [];
+
     this.prepareDOM();
 
     this.boundEvents = [];
@@ -33,6 +39,7 @@ export default class extends Controller {
     this.throttledLoadMissing = throttle(this.loadMissing, 200, this);
 
     this.parsePreloaded();
+    if (this.heightModeValue === "variable") this.initVariableHeights();
     this.restoreScrollPosition();
     this.requestRender();
   }
@@ -94,9 +101,12 @@ export default class extends Controller {
   }
 
   updateViewportHeight() {
-    this.viewport.style.height = `${
-      this.rowIds.length * this.rowHeightValue
-    }px`;
+    if (this.heightModeValue === "variable") {
+      this.viewport.style.height = `${this.variableTotalHeight}px`;
+    } else {
+      const fixedTotalHeight = this.rowIds.length * this.rowHeightValue;
+      this.viewport.style.height = `${fixedTotalHeight}px`;
+    }
   }
 
   onScroll() {
@@ -107,6 +117,48 @@ export default class extends Controller {
     return this.contentParentNode.clientHeight;
   }
 
+  initVariableHeights() {
+    // todo: when init
+    // request load of all missing rows
+
+    this.rowIds.forEach((rowId) => {
+      let elementHeight = 0;
+      const element = this.rowCache.get(rowId);
+
+      if (element) {
+        const dupe = element.cloneNode(true);
+        this.contentTarget.appendChild(dupe);
+        elementHeight = dupe.clientHeight;
+        dupe.remove();
+      }
+
+      this.variableRowHeights.set(rowId, elementHeight);
+    });
+    this.updateCumulativeHeights();
+  }
+
+  updateCumulativeHeights() {
+    let totalHeight = 0;
+    const cumulativeHeights = [];
+
+    this.rowIds.forEach((rowId) => {
+      cumulativeHeights.push(totalHeight);
+      const rowHeight = this.variableRowHeights.get(rowId) || 0;
+      totalHeight += rowHeight;
+    });
+
+    this.variableTotalHeight = totalHeight;
+    this.variableCumulativeHeights = cumulativeHeights;
+
+    if (this.debugValue) {
+      console.log("updateCumulativeHeights", {
+        totalHeight: this.variableTotalHeight,
+        rowHeights: [...this.variableRowHeights],
+        cumulativeHeights: [...this.variableCumulativeHeights],
+      });
+    }
+  }
+
   requestRender() {
     this.requireRender = true;
     if (this.rendering) return;
@@ -126,9 +178,7 @@ export default class extends Controller {
 
   render() {
     const scrollTop = this.container.scrollTop;
-    let startNode =
-      Math.floor(scrollTop / this.rowHeightValue) - this.renderAheadValue;
-    startNode = Math.max(0, startNode);
+    const startNode = this.calcStartNode(scrollTop);
 
     let visibleNodeCount =
       Math.ceil(this.height / this.rowHeightValue) + 2 * this.renderAheadValue;
@@ -146,6 +196,21 @@ export default class extends Controller {
     this.storeScrollPosition(scrollTop);
   }
 
+  calcStartNode(scrollTop) {
+    let index;
+
+    if (this.heightModeValue === "variable") {
+      // todo: binary search to limit number of iterations
+      index = this.variableCumulativeHeights.findIndex(
+        (height) => height >= scrollTop
+      );
+    } else {
+      index = Math.floor(scrollTop / this.rowHeightValue);
+    }
+
+    return Math.max(0, index - this.renderAheadValue);
+  }
+
   updateContent() {
     const { rows, missingIds } = this.fetchRows(this.startNode, this.stopNode);
     this.applyDrift(rows);
@@ -385,6 +450,10 @@ export default class extends Controller {
       this.rowCache.set(rowId, element);
     }
 
+    if (this.heightModeValue === "variable") {
+      this.updateVariableHeight(newRowId || rowId, element);
+    }
+
     this.requestRender();
   }
 
@@ -421,9 +490,28 @@ export default class extends Controller {
 
     if (element) {
       this.rowCache.set(rowId, element);
+      if (this.heightModeValue === "variable") {
+        this.updateVariableHeight(rowId, element);
+      }
     }
 
     this.updateViewportHeight();
     this.requestRender();
   }
+
+  updateVariableHeight(rowId, element) {
+    if (!element) return;
+
+    const index = this.rowIds.indexOf(rowId);
+    if (index < 0) return;
+
+    // temporarily add it to DOM to get its height
+    const dupe = element.cloneNode(true);
+    this.contentTarget.appendChild(dupe);
+    const elementHeight = dupe.clientHeight;
+    dupe.remove();
+
+    this.variableRowHeights[index] = elementHeight;
+    this.updateCumulativeHeights();
+  }
 }

src/tests/fixtures/item.html

@@ -1,6 +1,6 @@
 <turbo-stream action="v-replace" target="{id}" virtualized-id="{virtualizedId}">
   <template>
-    <li>
+    <li style="height: 50px">
       <div class="flex">
         <span>ID {id} {virtualizedId}</span>
         <form action="/items/{id}?_method=delete" method="post">

src/tests/fixtures/root.html

@@ -15,6 +15,9 @@
       <li>
         <a href="/multiple">Multiple</a>
       </li>
+      <li>
+        <a href="/variable">Variable Heights</a>
+      </li>
     </ul>
   </body>
 </html>

src/tests/fixtures/variable.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Variable Heights Items</title>
+    <script
+      src="/dist/tests/fixtures/test.global.js"
+      data-turbo-track="reload"
+    ></script>
+    <link rel="stylesheet" href="/src/tests/fixtures/styles.css" />
+  </head>
+  <body>
+    <div
+      data-controller="virtualized"
+      data-virtualized-row-height-value="50"
+      data-virtualized-url-value="/variable-load-items"
+      data-virtualized-ids-value="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]"
+      data-virtualized-height-mode-value="variable"
+      data-virtualized-debug-value="true"
+    >
+      <template data-virtualized-target="placeholder">
+        <li><div>Loading...</div></li>
+      </template>
+
+      <template data-virtualized-target="preloaded" data-preloaded-id="1">
+        <li><div>Preloaded 1</div></li>
+      </template>
+
+      <template data-virtualized-target="preloaded" data-preloaded-id="2">
+        <li><div>Preloaded 2</div></li>
+      </template>
+
+      <template data-virtualized-target="preloaded" data-preloaded-id="3">
+        <li><div>Preloaded 3</div></li>
+      </template>
+
+      <div style="height: 300px">
+        <ul data-virtualized-target="content"></ul>
+      </div>
+    </div>
+  </body>
+</html>

src/tests/server.mjs

@@ -55,6 +55,14 @@ router.get("/multiple", (_request, response) => {
   response.type("html").status(200).send(template);
 });
 
+router.get("/variable", (_request, response) => {
+  const template = fs.readFileSync(
+    path.join(__dirname, "fixtures", "variable.html"),
+    "utf8"
+  );
+  response.type("html").status(200).send(template);
+});
+
 router.delete("/items/:id", (request, response) => {
   const { id } = request.params;
   response
@@ -104,6 +112,27 @@ router.get("/multiple-load-items", (request, response) => {
     .send(html);
 });
 
+router.get("/variable-load-items", (request, response) => {
+  const {
+    q: { id_in: ids },
+  } = request.query;
+
+  const html = ids
+    .map((id) => {
+      return fs
+        .readFileSync(path.join(__dirname, "fixtures", "item.html"), "utf8")
+        .replace(/\{id\}/g, id)
+        .replace(/50px/, `${Math.floor(Math.random() * 200) + 25}px`)
+        .replace(/\{virtualizedId\}/g, "");
+    })
+    .join("\n");
+
+  response
+    .type("text/vnd.turbo-stream.html; charset=utf-8")
+    .status(200)
+    .send(html);
+});
+
 function acceptsStreams(request) {
   return !!request.accepts("text/vnd.turbo-stream.html");
 }