@internetarchive/bookreader 5.0.0-88-alpha.8 → 5.0.0-88-alpha.10

package/dist/esm/BookReader/ModeCoordinateSpace.js

@@ -0,0 +1,28 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { calcScreenDPI } from './utils';
+
+/**
+ * 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.
+ */
+export class ModeCoordinateSpace {
+  /**
+   * @param {{ scale: number }} mode
+   */
+  constructor(mode) {
+    _defineProperty(this, "screenDPI", calcScreenDPI());
+    _defineProperty(this, "worldUnitsToRenderedPixels", (/** @type {number} */inches) => inches * this.screenDPI);
+    _defineProperty(this, "renderedPixelsToWorldUnits", (/** @type {number} */px) => px / this.screenDPI);
+    _defineProperty(this, "renderedPixelsToVisiblePixels", (/** @type {number} */px) => px * this.mode.scale);
+    _defineProperty(this, "visiblePixelsToRenderedPixels", (/** @type {number} */px) => px / this.mode.scale);
+    _defineProperty(this, "worldUnitsToVisiblePixels", (/** @type {number} */px) => this.renderedPixelsToVisiblePixels(this.worldUnitsToRenderedPixels(px)));
+    _defineProperty(this, "visiblePixelsToWorldUnits", (/** @type {number} */px) => this.renderedPixelsToWorldUnits(this.visiblePixelsToRenderedPixels(px)));
+    this.mode = mode;
+  }
+}

package/dist/esm/BookReader/ModeSmoothZoom.js

@@ -0,0 +1,318 @@
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// @ts-check
+import interact from 'interactjs';
+import { isIOS, isSamsungInternet } from '../util/browserSniffing.js';
+import { sleep } from './utils.js';
+/** @typedef {import('./utils/HTMLDimensionsCacher.js').HTMLDimensionsCacher} HTMLDimensionsCacher */
+
+/**
+ * @typedef {object} SmoothZoomable
+ * @property {HTMLElement} $container
+ * @property {HTMLElement} $visibleWorld
+ * @property {import("./options.js").AutoFitValues} autoFit
+ * @property {number} scale
+ * @property {HTMLDimensionsCacher} htmlDimensionsCacher
+ * @property {function(): void} [attachScrollListeners]
+ * @property {function(): void} [detachScrollListeners]
+ */
+
+/** Manages pinch-zoom, ctrl-wheel, and trackpad pinch smooth zooming. */
+export class ModeSmoothZoom {
+  /** @param {SmoothZoomable} mode */
+  constructor(mode) {
+    var _this = this;
+    /** Position (in unit-less, [0, 1] coordinates) in client to scale around */
+    _defineProperty(this, "scaleCenter", {
+      x: 0.5,
+      y: 0.5
+    });
+    /** @param {Event} ev */
+    _defineProperty(this, "_preventEvent", ev => {
+      ev.preventDefault();
+      return false;
+    });
+    _defineProperty(this, "_pinchStart", /*#__PURE__*/_asyncToGenerator(function* () {
+      var _this$mode$detachScro, _this$mode;
+      // Safari calls gesturestart twice!
+      if (_this.pinching) return;
+      if (isIOS()) {
+        // Safari sometimes causes a pinch to trigger when there's only one touch!
+        yield sleep(0); // touches monitor can receive the touch event late
+        if (_this.touchesMonitor.touches < 2) return;
+      }
+      _this.pinching = true;
+
+      // Do this in case the pinchend hasn't fired yet.
+      _this.oldScale = 1;
+      _this.mode.$visibleWorld.classList.add("BRsmooth-zooming");
+      _this.mode.$visibleWorld.style.willChange = "transform";
+      _this.mode.autoFit = "none";
+      _this.detachCtrlZoom();
+      (_this$mode$detachScro = (_this$mode = _this.mode).detachScrollListeners) === null || _this$mode$detachScro === void 0 || _this$mode$detachScro.call(_this$mode);
+      _this.interact.gesturable({
+        listeners: {
+          start: _this._pinchStart,
+          move: _this._pinchMove,
+          end: _this._pinchEnd
+        }
+      });
+    }));
+    /** @param {{ scale: number, clientX: number, clientY: number }}} e */
+    _defineProperty(this, "_pinchMove", /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(function* (e) {
+        if (!_this.pinching) return;
+        _this.lastEvent = {
+          scale: e.scale,
+          clientX: e.clientX,
+          clientY: e.clientY
+        };
+        if (!_this.pinchMoveFrame) {
+          // Buffer these events; only update the scale when request animation fires
+          _this.pinchMoveFrame = _this.bufferFn(_this._drawPinchZoomFrame);
+        }
+      });
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+    _defineProperty(this, "_pinchEnd", /*#__PURE__*/_asyncToGenerator(function* () {
+      var _this$mode$attachScro, _this$mode2;
+      if (!_this.pinching) return;
+      _this.pinching = false;
+      _this.interact.gesturable({
+        listeners: {
+          start: _this._pinchStart,
+          end: _this._pinchEnd
+        }
+      });
+      // Want this to happen after the pinchMoveFrame,
+      // if one is in progress; otherwise setting oldScale
+      // messes up the transform.
+      yield _this.pinchMoveFramePromise;
+      _this.scaleCenter = {
+        x: 0.5,
+        y: 0.5
+      };
+      _this.oldScale = 1;
+      _this.mode.$visibleWorld.classList.remove("BRsmooth-zooming");
+      _this.mode.$visibleWorld.style.willChange = "auto";
+      _this.attachCtrlZoom();
+      (_this$mode$attachScro = (_this$mode2 = _this.mode).attachScrollListeners) === null || _this$mode$attachScro === void 0 || _this$mode$attachScro.call(_this$mode2);
+    }));
+    _defineProperty(this, "_drawPinchZoomFrame", /*#__PURE__*/_asyncToGenerator(function* () {
+      // Because of the buffering/various timing locks,
+      // this can be called after the pinch has ended, which
+      // results in a janky zoom after the pinch.
+      if (!_this.pinching) {
+        _this.pinchMoveFrame = null;
+        return;
+      }
+      _this.mode.$container.style.overflow = "hidden";
+      _this.pinchMoveFramePromiseRes = null;
+      _this.pinchMoveFramePromise = new Promise(res => _this.pinchMoveFramePromiseRes = res);
+      _this.updateScaleCenter({
+        clientX: _this.lastEvent.clientX,
+        clientY: _this.lastEvent.clientY
+      });
+      var curScale = _this.mode.scale;
+      var newScale = curScale * _this.lastEvent.scale / _this.oldScale;
+      if (curScale != newScale) {
+        _this.mode.scale = newScale;
+        yield _this.pinchMoveFramePromise;
+      }
+      _this.mode.$container.style.overflow = "auto";
+      _this.oldScale = _this.lastEvent.scale;
+      _this.pinchMoveFrame = null;
+    }));
+    _defineProperty(this, "_dragMove", /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator(function* (e) {
+        if (_this.pinching) {
+          yield _this._pinchEnd();
+        }
+        _this.mode.$container.scrollTop -= e.dy;
+        _this.mode.$container.scrollLeft -= e.dx;
+      });
+      return function (_x2) {
+        return _ref5.apply(this, arguments);
+      };
+    }());
+    /** @param {WheelEvent} ev **/
+    _defineProperty(this, "_handleCtrlWheel", ev => {
+      if (!ev.ctrlKey) return;
+      ev.preventDefault();
+      var zoomMultiplier =
+      // Zooming on macs was painfully slow; likely due to their better
+      // trackpads. Give them a higher zoom rate.
+      /Mac/i.test(navigator.platform) ? 0.045 :
+      // This worked well for me on Windows
+      0.03;
+
+      // Zoom around the cursor
+      this.updateScaleCenter(ev);
+      this.mode.autoFit = "none";
+      this.mode.scale *= 1 - Math.sign(ev.deltaY) * zoomMultiplier;
+    });
+    /** @type {SmoothZoomable} */
+    this.mode = mode;
+
+    /** Whether a pinch is currently happening */
+    this.pinching = false;
+    /** Non-null when a scale has been enqueued/is being processed by the buffer function */
+    this.pinchMoveFrame = null;
+    /** Promise for the current/enqueued pinch move frame. Resolves when it is complete. */
+    this.pinchMoveFramePromise = Promise.resolve();
+    this.oldScale = 1;
+    /** @type {{ scale: number, clientX: number, clientY: number }}} */
+    this.lastEvent = null;
+    this.attached = false;
+
+    /** @type {function(function(): void): any} */
+    this.bufferFn = window.requestAnimationFrame.bind(window);
+  }
+  attach() {
+    if (this.attached) return;
+    this.attachCtrlZoom();
+
+    // GestureEvents work only on Safari; they're too glitchy to use
+    // fully, but they can sometimes help error correct when interact
+    // misses an end/start event on Safari due to Safari bugs.
+    this.mode.$container.addEventListener('gesturestart', this._pinchStart);
+    this.mode.$container.addEventListener('gesturechange', this._preventEvent);
+    this.mode.$container.addEventListener('gestureend', this._pinchEnd);
+    if (isIOS()) {
+      this.touchesMonitor = new TouchesMonitor(this.mode.$container);
+      this.touchesMonitor.attach();
+    }
+    this.mode.$container.style.touchAction = "pan-x pan-y";
+
+    // The pinch listeners
+    this.interact = interact(this.mode.$container);
+    this.interact.gesturable({
+      listeners: {
+        start: this._pinchStart,
+        end: this._pinchEnd
+      }
+    });
+    if (isSamsungInternet()) {
+      // Samsung internet pinch-zoom will not work unless we disable
+      // all touch actions. So use interact.js' built-in drag support
+      // to handle moving on that browser.
+      this.mode.$container.style.touchAction = "none";
+      this.interact.draggable({
+        inertia: {
+          resistance: 2,
+          minSpeed: 100,
+          allowResume: true
+        },
+        listeners: {
+          move: this._dragMove
+        }
+      });
+    }
+    this.attached = true;
+  }
+  detach() {
+    var _this$touchesMonitor, _this$touchesMonitor$;
+    this.detachCtrlZoom();
+
+    // GestureEvents work only on Safari; they interfere with Hammer,
+    // so block them.
+    this.mode.$container.removeEventListener('gesturestart', this._pinchStart);
+    this.mode.$container.removeEventListener('gesturechange', this._preventEvent);
+    this.mode.$container.removeEventListener('gestureend', this._pinchEnd);
+    (_this$touchesMonitor = this.touchesMonitor) === null || _this$touchesMonitor === void 0 || (_this$touchesMonitor$ = _this$touchesMonitor.detach) === null || _this$touchesMonitor$ === void 0 || _this$touchesMonitor$.call(_this$touchesMonitor);
+
+    // The pinch listeners
+    this.interact.unset();
+    interact.removeDocument(document);
+    this.attached = false;
+  }
+  /** @private */
+  attachCtrlZoom() {
+    window.addEventListener("wheel", this._handleCtrlWheel, {
+      passive: false
+    });
+  }
+
+  /** @private */
+  detachCtrlZoom() {
+    window.removeEventListener("wheel", this._handleCtrlWheel);
+  }
+  /**
+   * @param {object} param0
+   * @param {number} param0.clientX
+   * @param {number} param0.clientY
+   */
+  updateScaleCenter(_ref6) {
+    var {
+      clientX,
+      clientY
+    } = _ref6;
+    var bc = this.mode.htmlDimensionsCacher.boundingClientRect;
+    this.scaleCenter = {
+      x: (clientX - bc.left) / this.mode.htmlDimensionsCacher.clientWidth,
+      y: (clientY - bc.top) / this.mode.htmlDimensionsCacher.clientHeight
+    };
+  }
+
+  /**
+   * @param {number} newScale
+   * @param {number} oldScale
+   */
+  updateViewportOnZoom(newScale, oldScale) {
+    var _this$pinchMoveFrameP;
+    var container = this.mode.$container;
+    var {
+      scrollTop: T,
+      scrollLeft: L
+    } = container;
+    var W = this.mode.htmlDimensionsCacher.clientWidth;
+    var H = this.mode.htmlDimensionsCacher.clientHeight;
+
+    // Scale factor change
+    var F = newScale / oldScale;
+
+    // Where in the viewport the zoom is centered on
+    var XPOS = this.scaleCenter.x;
+    var YPOS = this.scaleCenter.y;
+    var oldCenter = {
+      x: L + XPOS * W,
+      y: T + YPOS * H
+    };
+    var newCenter = {
+      x: F * oldCenter.x,
+      y: F * oldCenter.y
+    };
+    container.scrollTop = newCenter.y - YPOS * H;
+    container.scrollLeft = newCenter.x - XPOS * W;
+    (_this$pinchMoveFrameP = this.pinchMoveFramePromiseRes) === null || _this$pinchMoveFrameP === void 0 || _this$pinchMoveFrameP.call(this);
+  }
+}
+export class TouchesMonitor {
+  /**
+   * @param {HTMLElement} container
+   */
+  constructor(container) {
+    /**
+     * @param {TouchEvent} ev
+     */
+    _defineProperty(this, "_updateTouchCount", ev => {
+      this.touches = ev.touches.length;
+    });
+    /** @type {HTMLElement} */
+    this.container = container;
+    this.touches = 0;
+  }
+  attach() {
+    this.container.addEventListener("touchstart", this._updateTouchCount);
+    this.container.addEventListener("touchend", this._updateTouchCount);
+  }
+  detach() {
+    this.container.removeEventListener("touchstart", this._updateTouchCount);
+    this.container.removeEventListener("touchend", this._updateTouchCount);
+  }
+}