[api-minor] Add a new PageViewport-getter to access the original, un-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

@@ -196,18 +196,14 @@ class AnnotationElement {
    * @returns {HTMLElement} A section element.
    */
   _createContainer(ignoreBorder = false) {
-    const data = this.data,
-      page = this.page,
-      viewport = this.viewport;
+    const { data, page, viewport } = this;
+
     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;
-
     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([
@@ -268,8 +264,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) {
@@ -283,9 +279,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;
@@ -1838,12 +1832,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]
@@ -626,11 +646,8 @@ function setLayerDimensions(
   mustFlip = false,
   mustRotate = true
 ) {
-  const { viewBox, rotation } = viewport;
-  if (viewBox) {
-    const [pageLLx, pageLLy, pageURx, pageURy] = viewBox;
-    const pageWidth = pageURx - pageLLx;
-    const pageHeight = pageURy - pageLLy;
+  if (viewport instanceof PageViewport) {
+    const { pageWidth, pageHeight } = viewport.rawDims;
     const { style } = div;
 
     // TODO: Investigate if it could be interesting to use the css round
@@ -642,7 +659,7 @@ function setLayerDimensions(
     const widthStr = `calc(var(--scale-factor) * ${pageWidth}px)`;
     const heightStr = `calc(var(--scale-factor) * ${pageHeight}px)`;
 
-    if (!mustFlip || rotation % 180 === 0) {
+    if (!mustFlip || viewport.rotation % 180 === 0) {
       style.width = widthStr;
       style.height = heightStr;
     } else {
@@ -652,7 +669,7 @@ function setLayerDimensions(
   }
 
   if (mustRotate) {
-    div.setAttribute("data-main-rotation", rotation);
+    div.setAttribute("data-main-rotation", viewport.rotation);
   }
 }
 

src/display/editor/annotation_editor_layer.js

@@ -568,11 +568,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];
   }
 }
 

src/display/editor/editor.js

@@ -70,14 +70,12 @@ class AnnotationEditor {
 
     const {
       rotation,
-      viewBox: [pageLLx, pageLLy, pageURx, pageURy],
+      rawDims: { pageWidth, pageHeight, pageX, pageY },
     } = this.parent.viewport;
-    this.rotation = rotation;
-    const pageWidth = pageURx - pageLLx;
-    const pageHeight = pageURy - pageLLy;
 
+    this.rotation = rotation;
     this.pageDimensions = [pageWidth, pageHeight];
-    this.pageTranslation = [pageLLx, pageLLy];
+    this.pageTranslation = [pageX, pageY];
 
     const [width, height] = this.parentDimensions;
     this.x = parameters.x / width;

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;
 
     setLayerDimensions(container, viewport);