leafthrough 0.1.0 → 0.1.1

package/README.md

@@ -166,7 +166,7 @@ The magazine fills the element you give it and keeps its proportions, centred.
 | `motion`          | `MotionOptions`                  |                                                   | See below.                                                                                                 |
 | `interaction`     | `InteractionOptions`             |                                                   | See below.                                                                                                 |
 | `maxPixelRatio`   | `number`                         | `2`                                               | The canvas is also capped at about 15 megapixels.                                                          |
-| `preload`         | `number`                         | `6`                                               | Pages either side of the visible ones to load ahead. Pages twice as far away unload. `Infinity` keeps all. |
+| `preload`         | `number`                         | `6`                                               | Pages either side of the visible ones (mid-turn and rolled-up ones included) to load ahead. Pages twice as far away unload. `Infinity` keeps all. |
 | `plain`           | `boolean`                        | `false`                                           | Flat pages without 3D. Used by itself when the browser can't run WebGL.                                    |
 | `label`           | `string`                         | `'Magazine'`                                      | Accessible name.                                                                                           |
 | `formatPageLabel` | `(detail) => string`             | `"Pages 14–15 of 28"`                             | What screen readers hear when pages change.                                                                |
@@ -274,6 +274,8 @@ pages: [
   the reader as they turn or jump. Pages that haven't arrived show blank paper.
 - **Memory.** Pages within `preload` of the visible ones load; pages more than twice that
   far away unload, freeing their GPU memory, and load again when the reader comes back.
+  Visible means anything on screen: pages still turning in a quick riffle, and in `single`
+  the read pages rolled up behind the magazine, until they settle under the pile.
   A texture you pass in yourself stays loaded, since it's yours.
 - **Failures.** A page that fails stays blank paper and is reported through `onError`.
   `retry()` loads failed pages again, and so does the browser coming back online.

package/dist/LeafThrough.d.ts

@@ -98,6 +98,8 @@ export declare class LeafThrough extends EventTarget {
     private pagesKey;
     private preloadRadius;
     private loadPages;
+    private inView;
+    private followReader;
     private resetReady;
     private pageLoaded;
     private fail;

package/dist/{chunk-U2OBPSZN.js → chunk-DQL4R32K.js}

@@ -580,6 +580,9 @@ var PlainEngine = class {
   get turning() {
     return false;
   }
+  pagesInView() {
+    return this.spread ? { from: Math.max(2 * this.current - 1, 0), to: 2 * this.current } : { from: this.current, to: this.current };
+  }
   // closed, only the cover side can be clicked
   get activeSide() {
     if (!this.spread) return "both";
@@ -893,6 +896,8 @@ var SingleEngine = class {
   fallDuration;
   abort = new AbortController();
   current;
+  turned = 0;
+  // sum of every sheet's progress, as of the last update
   flights = [];
   drag = null;
   // the pointer that started the gesture; other pointers are ignored until it lifts
@@ -964,6 +969,22 @@ var SingleEngine = class {
     return this.flights.length > 0 || this.drag !== null;
   }
   activeSide = "both";
+  pagesInView() {
+    const settled = Math.floor(this.paced(this.turned) - 1 - this.fallDelay - this.fallDuration);
+    let from = clamp(settled + 1, 0, Math.max(this.current - 1, 0));
+    let to = Math.max(Math.min(this.current, this.count - 1), this.pileTop()?.index ?? 0);
+    const turning = this.flights.map((flight) => flight.sheet);
+    if (this.drag) turning.push(this.drag.sheet);
+    for (const sheet of turning) {
+      from = Math.min(from, sheet.index);
+      to = Math.max(to, sheet.index);
+    }
+    return { from, to: Math.max(from, to) };
+  }
+  // the page on top of the pile, the one a turning page reveals
+  pileTop() {
+    return this.sheets.find((sheet) => sheet.index >= this.current && !this.busy(sheet));
+  }
   setPageTexture(page, texture) {
     const sheet = this.sheets[page];
     if (!sheet) return;
@@ -1313,16 +1334,18 @@ var SingleEngine = class {
     if (!moving && !this.dirty) return false;
     let turned = 0;
     for (const sheet of this.sheets) turned += sheet.progress;
+    this.turned = turned;
     const edge = this.pileEdge(turned);
-    const top = this.sheets.find((sheet) => sheet.index >= this.current && !this.busy(sheet));
+    const top = this.pileTop();
     for (const sheet of this.sheets) {
       this.applyUniforms(sheet, turned, edge);
       sheet.uniforms.uTrim.value.set(sheet === top || this.busy(sheet) ? 0 : 1, edge.bottom, edge.top);
     }
     const closing = this.closing(turned) > 0;
+    const pileFrom = Math.max(this.current, top?.index ?? this.current);
     for (const sheet of this.sheets) {
       const i = sheet.index;
-      sheet.mesh.visible = closing || i <= this.current + PILE.renderDepth || this.busy(sheet);
+      sheet.mesh.visible = closing || i <= pileFrom + PILE.renderDepth || this.busy(sheet);
       layerSheet(sheet.mesh, i < this.current ? this.current - 1 - i : i - this.current, this.count, this.busy(sheet));
     }
     const read = smooth(this.count > 1 ? this.paced(turned) / (this.count - 1) : 0) * (1 - this.shutting(turned));
@@ -1671,6 +1694,16 @@ var SpreadEngine = class {
   get turning() {
     return this.flights.length > 0 || this.drag !== null;
   }
+  pagesInView() {
+    let from = Math.max(2 * this.current - 1, 0);
+    let to = 2 * this.current;
+    for (const sheet of this.sheets) {
+      if (sheet.progress <= 0 || sheet.progress >= 1) continue;
+      from = Math.min(from, 2 * sheet.index);
+      to = Math.max(to, 2 * sheet.index + 1);
+    }
+    return { from, to };
+  }
   // closed, only the cover side can be grabbed
   get activeSide() {
     const busy = this.flights.length > 0 || this.drag !== null || this.hold !== null;
@@ -2099,9 +2132,10 @@ var PageLoader = class {
   failed = /* @__PURE__ */ new Set();
   // `first` pages load before the rest; the rest go nearest first
   first = [];
-  // the visible pages
+  // the pages in view, and the one being read, which loads first among them
   from = 0;
   to = 0;
+  around = 0;
   // whether the magazine loops, putting the cover right after the last page
   wrap = false;
   waiting = /* @__PURE__ */ new Set();
@@ -2122,11 +2156,15 @@ var PageLoader = class {
     if (!this.waiting.size) this.settleFirst();
     return ready;
   }
-  /** Follows the reader: loads around the visible pages and unloads pages left far behind. */
-  focus(from, to = from) {
+  /**
+   * Follows the reader: loads around the pages in view (`from`–`to`), the page being read
+   * (`around`) first, and unloads pages left far behind.
+   */
+  focus(from, to = from, around = from) {
     if (this.disposed) return;
     this.from = from;
     this.to = to;
+    this.around = around;
     const keep = 2 * this.radius;
     for (const [i, request] of this.inFlight) {
       if (this.distance(i) <= keep) continue;
@@ -2145,11 +2183,11 @@ var PageLoader = class {
   setWrap(wrap) {
     if (wrap === this.wrap) return;
     this.wrap = wrap;
-    this.focus(this.from, this.to);
+    this.focus(this.from, this.to, this.around);
   }
   setRadius(radius) {
     this.radius = radius;
-    this.focus(this.from, this.to);
+    this.focus(this.from, this.to, this.around);
   }
   /** Loads the pages that failed again. */
   retry() {
@@ -2175,7 +2213,7 @@ var PageLoader = class {
     const wanted = (i) => !this.textures[i] && !this.inFlight.has(i) && !this.failed.has(i) && this.distance(i) <= this.radius;
     const queue = [
       ...this.first.filter((i) => this.waiting.has(i)),
-      ...this.sources.map((_, i) => i).sort((a, b) => this.distance(a) - this.distance(b))
+      ...this.sources.map((_, i) => i).sort((a, b) => this.distance(a) - this.distance(b) || Math.abs(a - this.around) - Math.abs(b - this.around))
     ];
     for (const page of queue) {
       if (this.inFlight.size >= CONCURRENCY) return;
@@ -2707,6 +2745,7 @@ var LeafThrough = class extends EventTarget {
       onError: (page, error) => this.fail(error, page)
     });
     this.loader = loader;
+    this.inView = "";
     this.resetReady();
     const first = [around - 1, around, around + 1, around + 2];
     const visible = this.pagesAt(this.pageToPosition(around, layout), layout);
@@ -2716,6 +2755,17 @@ var LeafThrough = class extends EventTarget {
       this.needsRender = true;
     });
   }
+  // loads around what's on screen, pages mid-turn included, the page being read first
+  inView = "";
+  followReader(engine, layout) {
+    if (!this.loader) return;
+    const { from, to } = engine.pagesInView();
+    const around = this.pagesAt(engine.position, layout)[0] ?? to;
+    const key = `${from}:${to}:${around}`;
+    if (key === this.inView) return;
+    this.inView = key;
+    this.loader.focus(from, to, around);
+  }
   resetReady() {
     this.ready = false;
     this.element.dataset.state = "loading";
@@ -2759,8 +2809,6 @@ var LeafThrough = class extends EventTarget {
     const first = !this.lastDetailKey;
     this.lastDetailKey = key;
     this.live.textContent = (this.options.formatPageLabel ?? defaultPageLabel)(detail);
-    const { visiblePages: visible } = detail;
-    this.loader?.focus(visible[0] ?? detail.page, visible[visible.length - 1] ?? detail.page);
     if (first) return;
     this.options.onPageChange?.(detail);
     this.dispatchEvent(new CustomEvent("pagechange", { detail }));
@@ -2867,6 +2915,7 @@ var LeafThrough = class extends EventTarget {
     if (!view) return;
     this.stepRiffle(now, view.engine);
     const moved = view.engine.update(now);
+    this.followReader(view.engine, view.settings.layout);
     if (view.engine.activeSide !== this.hitSide) this.placeHitArea();
     if (moved || this.needsRender) {
       if (this.renderer && view.scene && view.camera) {
@@ -2926,4 +2975,4 @@ export {
   defaultPageLabel,
   LeafThrough
 };
-//# sourceMappingURL=chunk-U2OBPSZN.js.map
+//# sourceMappingURL=chunk-DQL4R32K.js.map