diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js index 24507f906e936..35248dced8f44 100644 --- a/src/display/annotation_layer.js +++ b/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 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([ @@ -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; diff --git a/src/display/display_utils.js b/src/display/display_utils.js index 814f277c5fe37..ed7bea552ea76 100644 --- a/src/display/display_utils.js +++ b/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); } } diff --git a/src/display/editor/annotation_editor_layer.js b/src/display/editor/annotation_editor_layer.js index c73ba7a5d4b51..4850038483e34 100644 --- a/src/display/editor/annotation_editor_layer.js +++ b/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]; } } diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js index 5c9feff64c3e3..187c3526c5332 100644 --- a/src/display/editor/editor.js +++ b/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; diff --git a/src/display/text_layer.js b/src/display/text_layer.js index 0160be39684e5..9d596f6459728 100644 --- a/src/display/text_layer.js +++ b/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);