[api-minor] Add a new PageViewport-getter to access the original, u…

…n-scaled, viewport dimensions

While reviewing recent patches, I couldn't help but noticing that we now have a lot of call-sites that manually access the `PageViewport.viewBox`-property.
Rather than repeating that verbatim all over the code-base, this patch adds a lazily computed and cached getter for this data instead.

src/display/annotation_layer.js

@@ -195,18 +195,14 @@ class AnnotationElement {
    * @returns {HTMLElement} A section element.
    */
   _createContainer(ignoreBorder = false) {
-    const data = this.data,
-      page = this.page,
-      viewport = this.viewport;
-    const container = document.createElement("section");
-    const { width, height } = getRectDims(data.rect);
-
-    const [pageLLx, pageLLy, pageURx, pageURy] = viewport.viewBox;
-    const pageWidth = pageURx - pageLLx;
-    const pageHeight = pageURy - pageLLy;
+    const { data, page, viewport } = this;
 
+    const container = document.createElement("section");
     container.setAttribute("data-annotation-id", data.id);
 
+    const { pageWidth, pageHeight, pageX, pageY } = viewport.rawDims;
+    const { width, height } = getRectDims(data.rect);
+
     // Do *not* modify `data.rect`, since that will corrupt the annotation
     // position on subsequent calls to `_createContainer` (see issue 6804).
     const rect = Util.normalizeRect([
@@ -267,8 +263,8 @@ class AnnotationElement {
       }
     }
 
-    container.style.left = `${(100 * (rect[0] - pageLLx)) / pageWidth}%`;
-    container.style.top = `${(100 * (rect[1] - pageLLy)) / pageHeight}%`;
+    container.style.left = `${(100 * (rect[0] - pageX)) / pageWidth}%`;
+    container.style.top = `${(100 * (rect[1] - pageY)) / pageHeight}%`;
 
     const { rotation } = data;
     if (data.hasOwnCanvas || rotation === 0) {
@@ -282,9 +278,7 @@ class AnnotationElement {
   }
 
   setRotation(angle, container = this.container) {
-    const [pageLLx, pageLLy, pageURx, pageURy] = this.viewport.viewBox;
-    const pageWidth = pageURx - pageLLx;
-    const pageHeight = pageURy - pageLLy;
+    const { pageWidth, pageHeight } = this.viewport.rawDims;
     const { width, height } = getRectDims(this.data.rect);
 
     let elementWidth, elementHeight;
@@ -1837,12 +1831,10 @@ class PopupAnnotationElement extends AnnotationElement {
       rect[0] + this.data.parentRect[2] - this.data.parentRect[0];
     const popupTop = rect[1];
 
-    const [pageLLx, pageLLy, pageURx, pageURy] = this.viewport.viewBox;
-    const pageWidth = pageURx - pageLLx;
-    const pageHeight = pageURy - pageLLy;
+    const { pageWidth, pageHeight, pageX, pageY } = this.viewport.rawDims;
 
-    this.container.style.left = `${(100 * (popupLeft - pageLLx)) / pageWidth}%`;
-    this.container.style.top = `${(100 * (popupTop - pageLLy)) / pageHeight}%`;
+    this.container.style.left = `${(100 * (popupLeft - pageX)) / pageWidth}%`;
+    this.container.style.top = `${(100 * (popupTop - pageY)) / pageHeight}%`;
 
     this.container.append(popup.render());
     return this.container;

src/display/display_utils.js

@@ -19,7 +19,13 @@ import {
   BaseStandardFontDataFactory,
   BaseSVGFactory,
 } from "./base_factory.js";
-import { BaseException, stringToBytes, Util, warn } from "../shared/util.js";
+import {
+  BaseException,
+  shadow,
+  stringToBytes,
+  Util,
+  warn,
+} from "../shared/util.js";
 
 const SVG_NS = "http://www.w3.org/2000/svg";
 
@@ -248,6 +254,20 @@ class PageViewport {
     this.height = height;
   }
 
+  /**
+   * The original, un-scaled, viewport dimensions.
+   * @type {Object}
+   */
+  get rawDims() {
+    const { viewBox } = this;
+    return shadow(this, "rawDims", {
+      pageWidth: viewBox[2] - viewBox[0],
+      pageHeight: viewBox[3] - viewBox[1],
+      pageX: viewBox[0],
+      pageY: viewBox[1],
+    });
+  }
+
   /**
    * Clones viewport, with optional additional properties.
    * @param {PageViewportCloneParameters} [params]

src/display/editor/annotation_editor_layer.js

@@ -584,11 +584,8 @@ class AnnotationEditorLayer {
    * @returns {Object} dimensions.
    */
   get pageDimensions() {
-    const [pageLLx, pageLLy, pageURx, pageURy] = this.viewport.viewBox;
-    const width = pageURx - pageLLx;
-    const height = pageURy - pageLLy;
-
-    return [width, height];
+    const { pageWidth, pageHeight } = this.viewport.rawDims;
+    return [pageWidth, pageHeight];
   }
 
   get viewportBaseDimensions() {

src/display/text_layer.js

@@ -325,10 +325,10 @@ class TextLayerRenderTask {
       properties: null,
       ctx: getCtx(0, isOffscreenCanvasSupported),
     };
-    const [pageLLx, pageLLy, pageURx, pageURy] = viewport.viewBox;
-    this._transform = [1, 0, 0, -1, -pageLLx, pageURy];
-    this._pageWidth = pageURx - pageLLx;
-    this._pageHeight = pageURy - pageLLy;
+    const { pageWidth, pageHeight, pageX, pageY } = viewport.rawDims;
+    this._transform = [1, 0, 0, -1, -pageX, pageY + pageHeight];
+    this._pageWidth = pageWidth;
+    this._pageHeight = pageHeight;
 
     setTextLayerDimensions(container, viewport);
 
@@ -517,9 +517,7 @@ function setTextLayerDimensions(div, viewport) {
     return;
   }
 
-  const [pageLLx, pageLLy, pageURx, pageURy] = viewport.viewBox;
-  const pageWidth = pageURx - pageLLx;
-  const pageHeight = pageURy - pageLLy;
+  const { pageWidth, pageHeight } = viewport.rawDims;
   const { style } = div;
 
   style.width = `calc(var(--scale-factor) * ${pageWidth}px)`;