From 319d239f413e50633c303787a1bbc46557d883ef Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Wed, 12 Mar 2025 14:03:51 +0100 Subject: [PATCH] Add an `OutputScale` static method to get the `devicePixelRatio` Currently we lookup the `devicePixelRatio`, with fallback handling, in a number of spots in the code-base. Rather than duplicating code we can instead add a new static method in the `OutputScale` class, since that one is now exposed in the API. --- src/display/canvas.js | 3 ++- src/display/display_utils.js | 6 +++++- src/display/text_layer.js | 6 +++--- src/display/touch_manager.js | 4 ++-- test/driver.js | 3 ++- web/app.js | 3 ++- web/pdf_page_detail_view.js | 17 +++++++++-------- 7 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/display/canvas.js b/src/display/canvas.js index ff63e0da1..a76f68686 100644 --- a/src/display/canvas.js +++ b/src/display/canvas.js @@ -30,6 +30,7 @@ import { import { getCurrentTransform, getCurrentTransformInverse, + OutputScale, PixelsPerInch, } from "./display_utils.js"; import { @@ -811,7 +812,7 @@ function getImageSmoothingEnabled(transform, interpolate) { scale[0] = Math.fround(scale[0]); scale[1] = Math.fround(scale[1]); const actualScale = Math.fround( - (globalThis.devicePixelRatio || 1) * PixelsPerInch.PDF_TO_CSS_UNITS + OutputScale.pixelRatio * PixelsPerInch.PDF_TO_CSS_UNITS ); return scale[0] <= actualScale && scale[1] <= actualScale; } diff --git a/src/display/display_utils.js b/src/display/display_utils.js index 4ebe785dc..83ebbd87f 100644 --- a/src/display/display_utils.js +++ b/src/display/display_utils.js @@ -620,7 +620,7 @@ function setLayerDimensions( */ class OutputScale { constructor() { - const pixelRatio = window.devicePixelRatio || 1; + const { pixelRatio } = OutputScale; /** * @type {number} Horizontal scale. @@ -673,6 +673,10 @@ class OutputScale { } return false; } + + static get pixelRatio() { + return globalThis.devicePixelRatio || 1; + } } // See https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types diff --git a/src/display/text_layer.js b/src/display/text_layer.js index 1e3ba2d82..1f93cedd3 100644 --- a/src/display/text_layer.js +++ b/src/display/text_layer.js @@ -23,7 +23,7 @@ import { Util, warn, } from "../shared/util.js"; -import { setLayerDimensions } from "./display_utils.js"; +import { OutputScale, setLayerDimensions } from "./display_utils.js"; /** * @typedef {Object} TextLayerParameters @@ -115,7 +115,7 @@ class TextLayer { } this.#container = this.#rootContainer = container; - this.#scale = viewport.scale * (globalThis.devicePixelRatio || 1); + this.#scale = viewport.scale * OutputScale.pixelRatio; this.#rotation = viewport.rotation; this.#layoutTextParams = { div: null, @@ -205,7 +205,7 @@ class TextLayer { * @returns {undefined} */ update({ viewport, onBefore = null }) { - const scale = viewport.scale * (globalThis.devicePixelRatio || 1); + const scale = viewport.scale * OutputScale.pixelRatio; const rotation = viewport.rotation; if (rotation !== this.#rotation) { diff --git a/src/display/touch_manager.js b/src/display/touch_manager.js index c570195b5..421325b14 100644 --- a/src/display/touch_manager.js +++ b/src/display/touch_manager.js @@ -13,7 +13,7 @@ * limitations under the License. */ -import { stopEvent } from "./display_utils.js"; +import { OutputScale, stopEvent } from "./display_utils.js"; class TouchManager { #container; @@ -75,7 +75,7 @@ class TouchManager { // The properties TouchEvent::screenX/Y are in screen CSS pixels: // https://developer.mozilla.org/en-US/docs/Web/API/Touch/screenX#examples // MIN_TOUCH_DISTANCE_TO_PINCH is in CSS pixels. - return 35 / (window.devicePixelRatio || 1); + return 35 / OutputScale.pixelRatio; } #onTouchStart(evt) { diff --git a/test/driver.js b/test/driver.js index 3d55f5d10..56fc71891 100644 --- a/test/driver.js +++ b/test/driver.js @@ -20,6 +20,7 @@ const { DrawLayer, getDocument, GlobalWorkerOptions, + OutputScale, PixelsPerInch, shadow, TextLayer, @@ -876,7 +877,7 @@ class Driver { page => { // Default to creating the test images at the devices pixel ratio, // unless the test explicitly specifies an output scale. - const outputScale = task.outputScale || window.devicePixelRatio; + const outputScale = task.outputScale || OutputScale.pixelRatio; let viewport = page.getViewport({ scale: PixelsPerInch.PDF_TO_CSS_UNITS, }); diff --git a/web/app.js b/web/app.js index 29f3029bd..05cb832f3 100644 --- a/web/app.js +++ b/web/app.js @@ -50,6 +50,7 @@ import { InvalidPDFException, isDataScheme, isPdfFile, + OutputScale, PDFWorker, ResponseException, shadow, @@ -2091,7 +2092,7 @@ const PDFViewerApplication = { pdfViewer.refresh(); } const mediaQueryList = window.matchMedia( - `(resolution: ${window.devicePixelRatio || 1}dppx)` + `(resolution: ${OutputScale.pixelRatio}dppx)` ); mediaQueryList.addEventListener("change", addWindowResolutionChange, { once: true, diff --git a/web/pdf_page_detail_view.js b/web/pdf_page_detail_view.js index 72d3eba60..113a97dff 100644 --- a/web/pdf_page_detail_view.js +++ b/web/pdf_page_detail_view.js @@ -14,6 +14,7 @@ */ import { BasePDFPageView } from "./base_pdf_page_view.js"; +import { OutputScale } from "pdfjs-lib"; import { RenderingStates } from "./ui_utils.js"; /** @typedef {import("./interfaces").IRenderableView} IRenderableView */ @@ -153,7 +154,7 @@ class PDFPageDetailView extends BasePDFPageView { // but we can reduce it to make sure that we stay within the maxCanvasPixels // limit. const visiblePixels = - visibleWidth * visibleHeight * (window.devicePixelRatio || 1) ** 2; + visibleWidth * visibleHeight * OutputScale.pixelRatio ** 2; const maxDetailToVisibleLinearRatio = Math.sqrt( maxCanvasPixels / visiblePixels ); @@ -228,18 +229,18 @@ class PDFPageDetailView extends BasePDFPageView { const area = this.#detailArea; - const { devicePixelRatio = 1 } = window; + const { pixelRatio } = OutputScale; const transform = [ - devicePixelRatio, + pixelRatio, 0, 0, - devicePixelRatio, - -area.minX * devicePixelRatio, - -area.minY * devicePixelRatio, + pixelRatio, + -area.minX * pixelRatio, + -area.minY * pixelRatio, ]; - canvas.width = area.width * devicePixelRatio; - canvas.height = area.height * devicePixelRatio; + canvas.width = area.width * pixelRatio; + canvas.height = area.height * pixelRatio; const { style } = canvas; style.width = `${(area.width * 100) / width}%`; style.height = `${(area.height * 100) / height}%`;