@internetarchive/bookreader 5.0.0-58 → 5.0.0-59

package/src/BookReader/BookModel.js

@@ -23,6 +23,8 @@ export class BookModel {
     this.br = br;
     this.reduceSet = br.reduceSet;
     this.ppi = br.options?.ppi ?? DEFAULT_OPTIONS.ppi;
+    /** @type {'lr' | 'rl'} Page progression */
+    this.pageProgression = br.options?.pageProgression ?? DEFAULT_OPTIONS.pageProgression;
 
     /** @type {{width: number, height: number}} memoize storage */
     this._medianPageSize = null;
@@ -197,7 +199,7 @@ export class BookModel {
    * @return {[PageIndex, PageIndex]} eg [0, 1]
    */
   getSpreadIndices(pindex) {
-    if (this.br.pageProgression == 'rl') {
+    if (this.pageProgression == 'rl') {
       return this.getPageSide(pindex) == 'R' ? [pindex + 1, pindex] : [pindex, pindex - 1];
     } else {
       return this.getPageSide(pindex) == 'L' ? [pindex, pindex + 1] : [pindex - 1, pindex];
@@ -408,6 +410,42 @@ export class PageModel {
     return this.findNext();
   }
 
+  /** @type {PageModel | null} */
+  get left() {
+    return this.book.pageProgression === 'lr' ? this.prev : this.next;
+  }
+
+  /** @type {PageModel | null} */
+  get right() {
+    return this.book.pageProgression === 'lr' ? this.next : this.prev;
+  }
+
+  /**
+   * @type {{left: PageModel | null, right: PageModel | null}}
+   */
+  get spread() {
+    return {
+      left: this.pageSide === 'L' ? this : this.left,
+      right: this.pageSide === 'R' ? this : this.right,
+    };
+  }
+
+  /**
+   * @param {number} pages
+   */
+  goLeft(pages) {
+    const newIndex = this.book.pageProgression === 'lr' ? this.index - pages : this.index + pages;
+    return this.book.getPage(newIndex);
+  }
+
+  /**
+   * @param {number} pages
+   */
+  goRight(pages) {
+    const newIndex = this.book.pageProgression === 'lr' ? this.index + pages : this.index - pages;
+    return this.book.getPage(newIndex);
+  }
+
   /**
    * @param {number} reduce
    * @param {number} rotate
@@ -469,6 +507,26 @@ export class PageModel {
       return new PageModel(this.book, this.index - 1);
     }
   }
+
+  /**
+   * @param {object} [arg0]
+   * @param {boolean} [arg0.combineConsecutiveUnviewables] Whether to only yield the first page
+   * of a series of unviewable pages instead of each page
+   * @return {PageModel|void}
+   */
+  findLeft({ combineConsecutiveUnviewables = false } = {}) {
+    return this.book.pageProgression === 'lr' ? this.findPrev({ combineConsecutiveUnviewables }) : this.findNext({ combineConsecutiveUnviewables });
+  }
+
+  /**
+   * @param {object} [arg0]
+   * @param {boolean} [arg0.combineConsecutiveUnviewables] Whether to only yield the first page
+   * of a series of unviewable pages instead of each page
+   * @return {PageModel|void}
+   */
+  findRight({ combineConsecutiveUnviewables = false } = {}) {
+    return this.book.pageProgression === 'lr' ? this.findNext({ combineConsecutiveUnviewables }) : this.findPrev({ combineConsecutiveUnviewables });
+  }
 }
 
 // There are a few main ways we can reference a specific page in a book:

package/src/BookReader/Mode1UpLit.js

@@ -3,9 +3,10 @@ import { customElement, property, query } from 'lit/decorators.js';
 import {LitElement, html} from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { ModeSmoothZoom } from './ModeSmoothZoom';
-import { arrChanged, calcScreenDPI, genToArray, sum, throttle } from './utils';
+import { arrChanged, genToArray, sum, throttle } from './utils';
 import { HTMLDimensionsCacher } from "./utils/HTMLDimensionsCacher";
 import { ScrollClassAdder } from './utils/ScrollClassAdder';
+import { ModeCoordinateSpace } from './ModeCoordinateSpace';
 /** @typedef {import('./BookModel').BookModel} BookModel */
 /** @typedef {import('./BookModel').PageIndex} PageIndex */
 /** @typedef {import('./BookModel').PageModel} PageModel */
@@ -41,17 +42,8 @@ export class Mode1UpLit extends LitElement {
 
   /************** SCALE-RELATED PROPERTIES **************/
 
-  /** @private */
-  screenDPI = calcScreenDPI();
-
-  /**
-   * How much smaller the rendered pages are than the real-world item
-   *
-   * Mode1Up doesn't use the br.reduce because it is DPI aware. The reduction factor
-   * of a given leaf can change (since leaves can have different DPIs), but the real-world
-   * reduction is constant throughout.
-   */
-  realWorldReduce = 1;
+  /** @type {ModeCoordinateSpace} Manage conversion between coordinates */
+  coordSpace = new ModeCoordinateSpace(this);
 
   @property({ type: Number })
   scale = 1;
@@ -95,7 +87,7 @@ export class Mode1UpLit extends LitElement {
   worldDimensions = { width: 100, height: 100 };
 
   get worldStyle() {
-    const wToR = this.worldUnitsToRenderedPixels;
+    const wToR = this.coordSpace.worldUnitsToRenderedPixels;
     return {
       width: wToR(this.worldDimensions.width) + "px",
       height: wToR(this.worldDimensions.height) + "px",
@@ -139,7 +131,7 @@ export class Mode1UpLit extends LitElement {
     if (smooth) {
       this.style.scrollBehavior = 'smooth';
     }
-    this.scrollTop = this.worldUnitsToVisiblePixels(this.pageTops[index] - this.SPACING_IN / 2);
+    this.scrollTop = this.coordSpace.worldUnitsToVisiblePixels(this.pageTops[index] - this.SPACING_IN / 2);
     // TODO: Also h center?
     if (smooth) {
       setTimeout(() => this.style.scrollBehavior = '', 100);
@@ -214,7 +206,8 @@ export class Mode1UpLit extends LitElement {
       const oldVal = changedProps.get('scale');
       // Need to set this scale to actually scale the pages
       this.$visibleWorld.style.transform = `scale(${this.scale})`;
-      this.updateViewportOnZoom(this.scale, oldVal);
+      this.smoothZoomer.updateViewportOnZoom(this.scale, oldVal);
+      this.updateVisibleRegion();
       // Need to set this scale to update the world size, so the scrollbar gets the correct size
       this.$world.style.transform = `scale(${this.scale})`;
     }
@@ -244,25 +237,6 @@ export class Mode1UpLit extends LitElement {
     return this;
   }
 
-  /************** COORDINATE SPACE CONVERTERS **************/
-  /**
-   * There are a few different "coordinate spaces" at play in BR:
-   * (1) World units: i.e. inches. Unless otherwise stated, all computations
-   *     are done in world units.
-   * (2) Rendered Pixels: i.e. img.width = '300'. Note this does _not_ take
-   *     into account zoom scaling.
-   * (3) Visible Pixels: Just rendered pixels, but taking into account scaling.
-   */
-
-  worldUnitsToRenderedPixels = (/** @type {number} */inches) => inches * this.screenDPI / this.realWorldReduce;
-  renderedPixelsToWorldUnits = (/** @type {number} */px) => px * this.realWorldReduce / this.screenDPI;
-
-  renderedPixelsToVisiblePixels = (/** @type {number} */px) => px * this.scale;
-  visiblePixelsToRenderedPixels = (/** @type {number} */px) => px / this.scale;
-
-  worldUnitsToVisiblePixels = (/** @type {number} */px) => this.renderedPixelsToVisiblePixels(this.worldUnitsToRenderedPixels(px));
-  visiblePixelsToWorldUnits = (/** @type {number} */px) => this.renderedPixelsToWorldUnits(this.visiblePixelsToRenderedPixels(px));
-
   /************** RENDERING **************/
 
   /** @override */
@@ -286,9 +260,9 @@ export class Mode1UpLit extends LitElement {
 
   /** @param {PageModel} page */
   renderPage = (page) => {
-    const wToR = this.worldUnitsToRenderedPixels;
-    const wToV = this.worldUnitsToVisiblePixels;
-    const containerWidth = this.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth);
+    const wToR = this.coordSpace.worldUnitsToRenderedPixels;
+    const wToV = this.coordSpace.worldUnitsToVisiblePixels;
+    const containerWidth = this.coordSpace.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth);
 
     const width = wToR(page.widthInches);
     const height = wToR(page.heightInches);
@@ -323,7 +297,7 @@ export class Mode1UpLit extends LitElement {
     // Note: scrollTop, and clientWidth all are in visible space;
     // i.e. they are affects by the CSS transforms.
 
-    const vToW = this.visiblePixelsToWorldUnits;
+    const vToW = this.coordSpace.visiblePixelsToWorldUnits;
     this.visibleRegion = {
       top: vToW(scrollTop),
       height: vToW(clientHeight),
@@ -375,7 +349,7 @@ export class Mode1UpLit extends LitElement {
    */
   computeDefaultScale(page) {
     // Default to real size if it fits, otherwise default to full width
-    const containerWidthIn = this.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth);
+    const containerWidthIn = this.coordSpace.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth);
     return Math.min(1, containerWidthIn / (page.widthInches + 2 * this.SPACING_IN)) || 1;
   }
 
@@ -399,37 +373,6 @@ export class Mode1UpLit extends LitElement {
     });
   }
 
-  /************** ZOOMING LOGIC **************/
-
-  /**
-   * @param {number} newScale
-   * @param {number} oldScale
-   */
-  updateViewportOnZoom(newScale, oldScale) {
-    const container = this;
-    const { scrollTop: T, scrollLeft: L } = container;
-    const W = this.htmlDimensionsCacher.clientWidth;
-    const H = this.htmlDimensionsCacher.clientHeight;
-
-    // Scale factor change
-    const F = newScale / oldScale;
-
-    // Where in the viewport the zoom is centered on
-    const XPOS = this.scaleCenter.x;
-    const YPOS = this.scaleCenter.y;
-    const oldCenter = {
-      x: L + XPOS * W,
-      y: T + YPOS * H,
-    };
-    const newCenter = {
-      x: F * oldCenter.x,
-      y: F * oldCenter.y,
-    };
-    container.scrollTop = newCenter.y - YPOS * H;
-    container.scrollLeft = newCenter.x - XPOS * W;
-    this.updateVisibleRegion();
-  }
-
   /************** INPUT HANDLERS **************/
 
   attachScrollListeners = () => {