Set the dimensions of the various layers at their creation

- Use a unique helper function in display/display_utils.js;
- Move those dimensions in css' side.

src/display/annotation_layer.js

@@ -34,6 +34,7 @@ import {
   DOMSVGFactory,
   getFilenameFromUrl,
   PDFDateString,
+  setLayerDimensions,
 } from "./display_utils.js";
 import { AnnotationStorage } from "./annotation_storage.js";
 import { ColorConverters } from "../shared/scripting_utils.js";
@@ -2593,7 +2594,6 @@ class AnnotationLayer {
   static render(parameters) {
     const { annotations, div, viewport, accessibilityManager } = parameters;
 
-    this.#setDimensions(div, viewport);
     let zIndex = 0;
 
     for (const data of annotations) {
@@ -2660,6 +2660,7 @@ class AnnotationLayer {
     }
 
     this.#setAnnotationCanvasMap(div, parameters.annotationCanvasMap);
+    setLayerDimensions(div, viewport);
   }
 
   /**
@@ -2672,27 +2673,11 @@ class AnnotationLayer {
   static update(parameters) {
     const { annotationCanvasMap, div, viewport } = parameters;
 
-    this.#setDimensions(div, viewport);
     this.#setAnnotationCanvasMap(div, annotationCanvasMap);
+    setLayerDimensions(div, { rotation: viewport.rotation });
     div.hidden = false;
   }
 
-  /**
-   * @param {HTMLDivElement} div
-   * @param {PageViewport} viewport
-   */
-  static #setDimensions(div, { width, height, rotation }) {
-    const { style } = div;
-
-    const flipOrientation = rotation % 180 !== 0,
-      widthStr = Math.floor(width) + "px",
-      heightStr = Math.floor(height) + "px";
-
-    style.width = flipOrientation ? heightStr : widthStr;
-    style.height = flipOrientation ? widthStr : heightStr;
-    div.setAttribute("data-main-rotation", rotation);
-  }
-
   static #setAnnotationCanvasMap(div, annotationCanvasMap) {
     if (!annotationCanvasMap) {
       return;

src/display/display_utils.js

@@ -614,6 +614,48 @@ function getCurrentTransformInverse(ctx) {
   return [a, b, c, d, e, f];
 }
 
+/**
+ * @param {HTMLDivElement} div
+ * @param {PageViewport} viewport
+ * @param {boolean} mustFlip
+ * @param {boolean} mustRotate
+ */
+function setLayerDimensions(
+  div,
+  viewport,
+  mustFlip = false,
+  mustRotate = true
+) {
+  const { viewBox, rotation } = viewport;
+  if (viewBox) {
+    const [pageLLx, pageLLy, pageURx, pageURy] = viewBox;
+    const pageWidth = pageURx - pageLLx;
+    const pageHeight = pageURy - pageLLy;
+    const { style } = div;
+
+    // TODO: Investigate if it could be interesting to use the css round
+    // function (https://developer.mozilla.org/en-US/docs/Web/CSS/round):
+    // const widthStr =
+    //   `round(down, var(--scale-factor) * ${pageWidth}px, 1px)`;
+    // const heightStr =
+    //   `round(down, var(--scale-factor) * ${pageHeight}px, 1px)`;
+    const widthStr = `calc(var(--scale-factor) * ${pageWidth}px)`;
+    const heightStr = `calc(var(--scale-factor) * ${pageHeight}px)`;
+
+    if (!mustFlip || rotation % 180 === 0) {
+      style.width = widthStr;
+      style.height = heightStr;
+    } else {
+      style.width = heightStr;
+      style.height = widthStr;
+    }
+  }
+
+  if (mustRotate) {
+    div.setAttribute("data-main-rotation", rotation);
+  }
+}
+
 export {
   AnnotationPrefix,
   deprecated,
@@ -636,5 +678,6 @@ export {
   PDFDateString,
   PixelsPerInch,
   RenderingCancelledException,
+  setLayerDimensions,
   StatTimer,
 };

src/display/editor/annotation_editor_layer.js

@@ -16,6 +16,7 @@
 /** @typedef {import("./editor.js").AnnotationEditor} AnnotationEditor */
 // eslint-disable-next-line max-len
 /** @typedef {import("./tools.js").AnnotationEditorUIManager} AnnotationEditorUIManager */
+/** @typedef {import("../display_utils.js").PageViewport} PageViewport */
 // eslint-disable-next-line max-len
 /** @typedef {import("../../web/text_accessibility.js").TextAccessibilityManager} TextAccessibilityManager */
 /** @typedef {import("../../web/interfaces").IL10n} IL10n */
@@ -24,6 +25,7 @@ import { AnnotationEditorType, FeatureTest } from "../../shared/util.js";
 import { bindEvents } from "./tools.js";
 import { FreeTextEditor } from "./freetext.js";
 import { InkEditor } from "./ink.js";
+import { setLayerDimensions } from "../display_utils.js";
 
 /**
  * @typedef {Object} AnnotationEditorLayerOptions
@@ -36,6 +38,11 @@ import { InkEditor } from "./ink.js";
  * @property {IL10n} l10n
  */
 
+/**
+ * @typedef {Object} RenderEditorLayerOptions
+ * @property {PageViewport} viewport
+ */
+
 /**
  * Manage all the different editors on a page.
  */
@@ -529,12 +536,12 @@ class AnnotationEditorLayer {
 
   /**
    * Render the main editor.
-   * @param {Object} parameters
+   * @param {RenderEditorLayerOptions} parameters
    */
-  render(parameters) {
-    this.viewport = parameters.viewport;
+  render({ viewport }) {
+    this.viewport = viewport;
+    setLayerDimensions(this.div, viewport);
     bindEvents(this, this.div, ["dragover", "drop"]);
-    this.setDimensions();
     for (const editor of this.#uiManager.getEditors(this.pageIndex)) {
       this.add(editor);
     }
@@ -543,16 +550,16 @@ class AnnotationEditorLayer {
 
   /**
    * Update the main editor.
-   * @param {Object} parameters
+   * @param {RenderEditorLayerOptions} parameters
    */
-  update(parameters) {
+  update({ viewport }) {
     // Editors have their dimensions/positions in percent so to avoid any
     // issues (see #15582), we must commit the current one before changing
     // the viewport.
     this.#uiManager.commitOrRemove();
 
-    this.viewport = parameters.viewport;
-    this.setDimensions();
+    this.viewport = viewport;
+    setLayerDimensions(this.div, { rotation: viewport.rotation });
     this.updateMode();
   }
 
@@ -567,21 +574,6 @@ class AnnotationEditorLayer {
 
     return [width, height];
   }
-
-  /**
-   * Set the dimensions of the main div.
-   */
-  setDimensions() {
-    const { width, height, rotation } = this.viewport;
-
-    const flipOrientation = rotation % 180 !== 0,
-      widthStr = Math.floor(width) + "px",
-      heightStr = Math.floor(height) + "px";
-
-    this.div.style.width = flipOrientation ? heightStr : widthStr;
-    this.div.style.height = flipOrientation ? widthStr : heightStr;
-    this.div.setAttribute("data-main-rotation", rotation);
-  }
 }
 
 export { AnnotationEditorLayer };

src/display/text_layer.js

@@ -22,7 +22,7 @@ import {
   FeatureTest,
   Util,
 } from "../shared/util.js";
-import { deprecated } from "./display_utils.js";
+import { deprecated, setLayerDimensions } from "./display_utils.js";
 
 /**
  * Text layer render parameters.
@@ -330,7 +330,7 @@ class TextLayerRenderTask {
     this._pageWidth = pageURx - pageLLx;
     this._pageHeight = pageURy - pageLLy;
 
-    setTextLayerDimensions(container, viewport);
+    setLayerDimensions(container, viewport);
 
     // Always clean-up the temporary canvas once rendering is no longer pending.
     this._capability.promise
@@ -485,7 +485,7 @@ function updateTextLayer({
   mustRescale = true,
 }) {
   if (mustRotate) {
-    setTextLayerDimensions(container, { rotation: viewport.rotation });
+    setLayerDimensions(container, { rotation: viewport.rotation });
   }
 
   if (mustRescale) {
@@ -507,24 +507,4 @@ function updateTextLayer({
   }
 }
 
-/**
- * @param {HTMLDivElement} div
- * @param {import("./display_utils").PageViewport} viewport
- */
-function setTextLayerDimensions(div, viewport) {
-  if (!viewport.viewBox) {
-    div.setAttribute("data-main-rotation", viewport.rotation);
-    return;
-  }
-
-  const [pageLLx, pageLLy, pageURx, pageURy] = viewport.viewBox;
-  const pageWidth = pageURx - pageLLx;
-  const pageHeight = pageURy - pageLLy;
-  const { style } = div;
-
-  style.width = `calc(var(--scale-factor) * ${pageWidth}px)`;
-  style.height = `calc(var(--scale-factor) * ${pageHeight}px)`;
-  div.setAttribute("data-main-rotation", viewport.rotation);
-}
-
 export { renderTextLayer, TextLayerRenderTask, updateTextLayer };

src/pdf.js

@@ -60,6 +60,7 @@ import {
   PDFDateString,
   PixelsPerInch,
   RenderingCancelledException,
+  setLayerDimensions,
 } from "./display/display_utils.js";
 import { renderTextLayer, updateTextLayer } from "./display/text_layer.js";
 import { AnnotationEditorLayer } from "./display/editor/annotation_editor_layer.js";
@@ -141,6 +142,7 @@ export {
   PixelsPerInch,
   RenderingCancelledException,
   renderTextLayer,
+  setLayerDimensions,
   shadow,
   SVGGraphics,
   UnexpectedResponseException,