@internetarchive/bookreader 5.0.0-57 → 5.0.0-59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-57",
+  "version": "5.0.0-59",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -42,12 +42,12 @@
   },
   "devDependencies": {
     "@babel/core": "7.17.9",
-    "@babel/eslint-parser": "7.17.0",
+    "@babel/eslint-parser": "7.21.3",
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/plugin-proposal-decorators": "7.17.9",
     "@babel/preset-env": "7.16.11",
-    "@open-wc/testing-helpers": "^2.1.4",
-    "@types/jest": "^29.4.0",
+    "@open-wc/testing-helpers": "^2.2.0",
+    "@types/jest": "^29.5.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "babel-loader": "8.2.5",
     "codecov": "^3.8.3",
@@ -60,7 +60,7 @@
     "hammerjs": "^2.0.8",
     "http-server": "14.1.1",
     "iso-language-codes": "1.1.0",
-    "jest": "^29.4.3",
+    "jest": "29.5.0",
     "jest-environment-jsdom": "^29.4.3",
     "jquery": "3.6.1",
     "jquery-colorbox": "1.6.4",
@@ -72,10 +72,10 @@
     "node-fetch": "3.2.10",
     "regenerator-runtime": "0.13.9",
     "sass": "1.52.1",
-    "sinon": "^15.0.1",
+    "sinon": "15.0.3",
     "soundmanager2": "2.97.20170602",
     "svgo": "2.8.0",
-    "testcafe": "^2.0.1",
+    "testcafe": "2.4.0",
     "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",
     "webpack": "5.51.1",
     "webpack-cli": "4.9.2"
@@ -89,7 +89,8 @@
       "^@/(.*)$": "<rootDir>/$1"
     },
     "setupFiles": [
-      "./src/jquery-wrapper.js"
+      "./src/jquery-wrapper.js",
+      "./tests/jest/setup.js"
     ],
     "roots": [
       "<rootDir>/src/",
@@ -118,7 +119,7 @@
     "test:e2e": "npm run build && npx testcafe",
     "test:e2e:dev": "npx testcafe --live --dev",
     "DOCS:update:test-deps": "If CI succeeds, these should be good to update",
-    "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing-helpers@latest @types/jest@latest codecov@latest eslint@latest eslint-plugin-testcafe@latest jest@latest sinon@latest testcafe@latest",
+    "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing-helpers@latest @types/jest@latest codecov@latest eslint@7 eslint-plugin-testcafe@latest jest@latest sinon@latest testcafe@latest",
     "DOCS:update:build-deps": "These can cause strange changes, so do an npm run build + check file size (git diff --stat), and check the site is as expected",
     "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest babel-loader@latest core-js@latest regenerator-runtime@latest sass@latest svgo@latest webpack@latest webpack-cli@latest",
     "codecov": "npx codecov"

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/Mode1Up.js

@@ -58,6 +58,11 @@ export class Mode1Up {
         });
       }
       this.mode1UpLit.jumpToIndex(startLeaf);
+      setTimeout(() => {
+        // Must explicitly call updateVisibleRegion, since no
+        // scroll event seems to fire.
+        this.mode1UpLit.updateVisibleRegion();
+      });
     });
     this.br.updateBrClasses();
   }

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);
@@ -203,15 +195,19 @@ export class Mode1UpLit extends LitElement {
     }
     if (changedProps.has('visiblePages')) {
       this.throttledUpdateRenderedPages();
-      this.br.displayedIndices = this.visiblePages.map(p => p.index);
-      this.br.updateFirstIndex(this.br.displayedIndices[0]);
-      this.br._components.navbar.updateNavIndexThrottled();
+      if (this.visiblePages.length) {
+        // unclear why this is ever really happening
+        this.br.displayedIndices = this.visiblePages.map(p => p.index);
+        this.br.updateFirstIndex(this.br.displayedIndices[0]);
+        this.br._components.navbar.updateNavIndexThrottled();
+      }
     }
     if (changedProps.has('scale')) {
       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})`;
     }
@@ -241,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 */
@@ -283,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);
@@ -320,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),
@@ -372,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;
   }
 
@@ -396,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 = () => {