/** * @licstart The following is the entire license notice for the * JavaScript code in this page * * Copyright 2022 Mozilla Foundation * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * * @licend The above is the entire license notice for the * JavaScript code in this page */ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.PDFPageView = void 0; var _pdf = require("../pdf"); var _ui_utils = require("./ui_utils.js"); var _app_options = require("./app_options.js"); var _l10n_utils = require("./l10n_utils.js"); var _text_accessibility = require("./text_accessibility.js"); const MAX_CANVAS_PIXELS = _app_options.compatibilityParams.maxCanvasPixels || 16777216; class PDFPageView { #annotationMode = _pdf.AnnotationMode.ENABLE_FORMS; #useThumbnailCanvas = { initialOptionalContent: true, regularAnnotations: true }; constructor(options) { const container = options.container; const defaultViewport = options.defaultViewport; this.id = options.id; this.renderingId = "page" + this.id; this.pdfPage = null; this.pageLabel = null; this.rotation = 0; this.scale = options.scale || _ui_utils.DEFAULT_SCALE; this.viewport = defaultViewport; this.pdfPageRotate = defaultViewport.rotation; this._optionalContentConfigPromise = options.optionalContentConfigPromise || null; this.hasRestrictedScaling = false; this.textLayerMode = options.textLayerMode ?? _ui_utils.TextLayerMode.ENABLE; this.#annotationMode = options.annotationMode ?? _pdf.AnnotationMode.ENABLE_FORMS; this.imageResourcesPath = options.imageResourcesPath || ""; this.useOnlyCssZoom = options.useOnlyCssZoom || false; this.maxCanvasPixels = options.maxCanvasPixels || MAX_CANVAS_PIXELS; this.pageColors = options.pageColors || null; this.eventBus = options.eventBus; this.renderingQueue = options.renderingQueue; this.textLayerFactory = options.textLayerFactory; this.annotationLayerFactory = options.annotationLayerFactory; this.annotationEditorLayerFactory = options.annotationEditorLayerFactory; this.xfaLayerFactory = options.xfaLayerFactory; this.textHighlighter = options.textHighlighterFactory?.createTextHighlighter({ pageIndex: this.id - 1, eventBus: this.eventBus }); this.structTreeLayerFactory = options.structTreeLayerFactory; this.renderer = options.renderer || _ui_utils.RendererType.CANVAS; this.l10n = options.l10n || _l10n_utils.NullL10n; this.paintTask = null; this.paintedViewportMap = new WeakMap(); this.renderingState = _ui_utils.RenderingStates.INITIAL; this.resume = null; this._renderError = null; this._isStandalone = !this.renderingQueue?.hasViewer(); this._annotationCanvasMap = null; this.annotationLayer = null; this.annotationEditorLayer = null; this.textLayer = null; this.zoomLayer = null; this.xfaLayer = null; this.structTreeLayer = null; const div = document.createElement("div"); div.className = "page"; div.style.width = Math.floor(this.viewport.width) + "px"; div.style.height = Math.floor(this.viewport.height) + "px"; div.setAttribute("data-page-number", this.id); div.setAttribute("role", "region"); this.l10n.get("page_landmark", { page: this.id }).then(msg => { div.setAttribute("aria-label", msg); }); this.div = div; container?.append(div); if (this._isStandalone) { const { optionalContentConfigPromise } = options; if (optionalContentConfigPromise) { optionalContentConfigPromise.then(optionalContentConfig => { if (optionalContentConfigPromise !== this._optionalContentConfigPromise) { return; } this.#useThumbnailCanvas.initialOptionalContent = optionalContentConfig.hasInitialVisibility; }); } } } setPdfPage(pdfPage) { this.pdfPage = pdfPage; this.pdfPageRotate = pdfPage.rotate; const totalRotation = (this.rotation + this.pdfPageRotate) % 360; this.viewport = pdfPage.getViewport({ scale: this.scale * _pdf.PixelsPerInch.PDF_TO_CSS_UNITS, rotation: totalRotation }); this.reset(); } destroy() { this.reset(); if (this.pdfPage) { this.pdfPage.cleanup(); } } async _renderAnnotationLayer() { let error = null; try { await this.annotationLayer.render(this.viewport, "display"); } catch (ex) { console.error(`_renderAnnotationLayer: "${ex}".`); error = ex; } finally { this.eventBus.dispatch("annotationlayerrendered", { source: this, pageNumber: this.id, error }); } } async _renderAnnotationEditorLayer() { let error = null; try { await this.annotationEditorLayer.render(this.viewport, "display"); } catch (ex) { console.error(`_renderAnnotationEditorLayer: "${ex}".`); error = ex; } finally { this.eventBus.dispatch("annotationeditorlayerrendered", { source: this, pageNumber: this.id, error }); } } async _renderXfaLayer() { let error = null; try { const result = await this.xfaLayer.render(this.viewport, "display"); if (this.textHighlighter) { this._buildXfaTextContentItems(result.textDivs); } } catch (ex) { console.error(`_renderXfaLayer: "${ex}".`); error = ex; } finally { this.eventBus.dispatch("xfalayerrendered", { source: this, pageNumber: this.id, error }); } } async _buildXfaTextContentItems(textDivs) { const text = await this.pdfPage.getTextContent(); const items = []; for (const item of text.items) { items.push(item.str); } this.textHighlighter.setTextMapping(textDivs, items); this.textHighlighter.enable(); } _resetZoomLayer(removeFromDOM = false) { if (!this.zoomLayer) { return; } const zoomLayerCanvas = this.zoomLayer.firstChild; this.paintedViewportMap.delete(zoomLayerCanvas); zoomLayerCanvas.width = 0; zoomLayerCanvas.height = 0; if (removeFromDOM) { this.zoomLayer.remove(); } this.zoomLayer = null; } reset({ keepZoomLayer = false, keepAnnotationLayer = false, keepAnnotationEditorLayer = false, keepXfaLayer = false } = {}) { this.cancelRendering({ keepAnnotationLayer, keepAnnotationEditorLayer, keepXfaLayer }); this.renderingState = _ui_utils.RenderingStates.INITIAL; const div = this.div; div.style.width = Math.floor(this.viewport.width) + "px"; div.style.height = Math.floor(this.viewport.height) + "px"; const childNodes = div.childNodes, zoomLayerNode = keepZoomLayer && this.zoomLayer || null, annotationLayerNode = keepAnnotationLayer && this.annotationLayer?.div || null, annotationEditorLayerNode = keepAnnotationEditorLayer && this.annotationEditorLayer?.div || null, xfaLayerNode = keepXfaLayer && this.xfaLayer?.div || null; for (let i = childNodes.length - 1; i >= 0; i--) { const node = childNodes[i]; switch (node) { case zoomLayerNode: case annotationLayerNode: case annotationEditorLayerNode: case xfaLayerNode: continue; } node.remove(); } div.removeAttribute("data-loaded"); if (annotationLayerNode) { this.annotationLayer.hide(); } if (annotationEditorLayerNode) { this.annotationEditorLayer.hide(); } else { this.annotationEditorLayer?.destroy(); } if (xfaLayerNode) { this.xfaLayer.hide(); } if (!zoomLayerNode) { if (this.canvas) { this.paintedViewportMap.delete(this.canvas); this.canvas.width = 0; this.canvas.height = 0; delete this.canvas; } this._resetZoomLayer(); } if (this.svg) { this.paintedViewportMap.delete(this.svg); delete this.svg; } this.loadingIconDiv = document.createElement("div"); this.loadingIconDiv.className = "loadingIcon notVisible"; if (this._isStandalone) { this.toggleLoadingIconSpinner(true); } this.loadingIconDiv.setAttribute("role", "img"); this.l10n.get("loading").then(msg => { this.loadingIconDiv?.setAttribute("aria-label", msg); }); div.append(this.loadingIconDiv); } update({ scale = 0, rotation = null, optionalContentConfigPromise = null }) { this.scale = scale || this.scale; if (typeof rotation === "number") { this.rotation = rotation; } if (optionalContentConfigPromise instanceof Promise) { this._optionalContentConfigPromise = optionalContentConfigPromise; optionalContentConfigPromise.then(optionalContentConfig => { if (optionalContentConfigPromise !== this._optionalContentConfigPromise) { return; } this.#useThumbnailCanvas.initialOptionalContent = optionalContentConfig.hasInitialVisibility; }); } const totalRotation = (this.rotation + this.pdfPageRotate) % 360; this.viewport = this.viewport.clone({ scale: this.scale * _pdf.PixelsPerInch.PDF_TO_CSS_UNITS, rotation: totalRotation }); if (this._isStandalone) { _ui_utils.docStyle.setProperty("--scale-factor", this.viewport.scale); } if (this.svg) { this.cssTransform({ target: this.svg, redrawAnnotationLayer: true, redrawAnnotationEditorLayer: true, redrawXfaLayer: true }); this.eventBus.dispatch("pagerendered", { source: this, pageNumber: this.id, cssTransform: true, timestamp: performance.now(), error: this._renderError }); return; } let isScalingRestricted = false; if (this.canvas && this.maxCanvasPixels > 0) { const outputScale = this.outputScale; if ((Math.floor(this.viewport.width) * outputScale.sx | 0) * (Math.floor(this.viewport.height) * outputScale.sy | 0) > this.maxCanvasPixels) { isScalingRestricted = true; } } if (this.canvas) { if (this.useOnlyCssZoom || this.hasRestrictedScaling && isScalingRestricted) { this.cssTransform({ target: this.canvas, redrawAnnotationLayer: true, redrawAnnotationEditorLayer: true, redrawXfaLayer: true }); this.eventBus.dispatch("pagerendered", { source: this, pageNumber: this.id, cssTransform: true, timestamp: performance.now(), error: this._renderError }); return; } if (!this.zoomLayer && !this.canvas.hidden) { this.zoomLayer = this.canvas.parentNode; this.zoomLayer.style.position = "absolute"; } } if (this.zoomLayer) { this.cssTransform({ target: this.zoomLayer.firstChild }); } this.reset({ keepZoomLayer: true, keepAnnotationLayer: true, keepAnnotationEditorLayer: true, keepXfaLayer: true }); } cancelRendering({ keepAnnotationLayer = false, keepAnnotationEditorLayer = false, keepXfaLayer = false } = {}) { if (this.paintTask) { this.paintTask.cancel(); this.paintTask = null; } this.resume = null; if (this.textLayer) { this.textLayer.cancel(); this.textLayer = null; } if (this.annotationLayer && (!keepAnnotationLayer || !this.annotationLayer.div)) { this.annotationLayer.cancel(); this.annotationLayer = null; this._annotationCanvasMap = null; } if (this.annotationEditorLayer && (!keepAnnotationEditorLayer || !this.annotationEditorLayer.div)) { this.annotationEditorLayer.cancel(); this.annotationEditorLayer = null; } if (this.xfaLayer && (!keepXfaLayer || !this.xfaLayer.div)) { this.xfaLayer.cancel(); this.xfaLayer = null; this.textHighlighter?.disable(); } if (this._onTextLayerRendered) { this.eventBus._off("textlayerrendered", this._onTextLayerRendered); this._onTextLayerRendered = null; } } cssTransform({ target, redrawAnnotationLayer = false, redrawAnnotationEditorLayer = false, redrawXfaLayer = false }) { const width = this.viewport.width; const height = this.viewport.height; const div = this.div; target.style.width = target.parentNode.style.width = div.style.width = Math.floor(width) + "px"; target.style.height = target.parentNode.style.height = div.style.height = Math.floor(height) + "px"; const relativeRotation = this.viewport.rotation - this.paintedViewportMap.get(target).rotation; const absRotation = Math.abs(relativeRotation); let scaleX = 1, scaleY = 1; if (absRotation === 90 || absRotation === 270) { scaleX = height / width; scaleY = width / height; } target.style.transform = `rotate(${relativeRotation}deg) scale(${scaleX}, ${scaleY})`; if (this.textLayer) { const textLayerViewport = this.textLayer.viewport; const textRelativeRotation = this.viewport.rotation - textLayerViewport.rotation; const textAbsRotation = Math.abs(textRelativeRotation); let scale = width / textLayerViewport.width; if (textAbsRotation === 90 || textAbsRotation === 270) { scale = width / textLayerViewport.height; } const textLayerDiv = this.textLayer.textLayerDiv; let transX, transY; switch (textAbsRotation) { case 0: transX = transY = 0; break; case 90: transX = 0; transY = "-" + textLayerDiv.style.height; break; case 180: transX = "-" + textLayerDiv.style.width; transY = "-" + textLayerDiv.style.height; break; case 270: transX = "-" + textLayerDiv.style.width; transY = 0; break; default: console.error("Bad rotation value."); break; } textLayerDiv.style.transform = `rotate(${textAbsRotation}deg) ` + `scale(${scale}) ` + `translate(${transX}, ${transY})`; textLayerDiv.style.transformOrigin = "0% 0%"; } if (redrawAnnotationLayer && this.annotationLayer) { this._renderAnnotationLayer(); } if (redrawAnnotationEditorLayer && this.annotationEditorLayer) { this._renderAnnotationEditorLayer(); } if (redrawXfaLayer && this.xfaLayer) { this._renderXfaLayer(); } } get width() { return this.viewport.width; } get height() { return this.viewport.height; } getPagePoint(x, y) { return this.viewport.convertToPdfPoint(x, y); } toggleLoadingIconSpinner(viewVisible = false) { this.loadingIconDiv?.classList.toggle("notVisible", !viewVisible); } draw() { if (this.renderingState !== _ui_utils.RenderingStates.INITIAL) { console.error("Must be in new state before drawing"); this.reset(); } const { div, pdfPage } = this; if (!pdfPage) { this.renderingState = _ui_utils.RenderingStates.FINISHED; if (this.loadingIconDiv) { this.loadingIconDiv.remove(); delete this.loadingIconDiv; } return Promise.reject(new Error("pdfPage is not loaded")); } this.renderingState = _ui_utils.RenderingStates.RUNNING; const canvasWrapper = document.createElement("div"); canvasWrapper.style.width = div.style.width; canvasWrapper.style.height = div.style.height; canvasWrapper.classList.add("canvasWrapper"); const lastDivBeforeTextDiv = this.annotationLayer?.div || this.annotationEditorLayer?.div; if (lastDivBeforeTextDiv) { lastDivBeforeTextDiv.before(canvasWrapper); } else { div.append(canvasWrapper); } let textLayer = null; if (this.textLayerMode !== _ui_utils.TextLayerMode.DISABLE && this.textLayerFactory) { this._accessibilityManager ||= new _text_accessibility.TextAccessibilityManager(); const textLayerDiv = document.createElement("div"); textLayerDiv.className = "textLayer"; textLayerDiv.style.width = canvasWrapper.style.width; textLayerDiv.style.height = canvasWrapper.style.height; if (lastDivBeforeTextDiv) { lastDivBeforeTextDiv.before(textLayerDiv); } else { div.append(textLayerDiv); } textLayer = this.textLayerFactory.createTextLayerBuilder({ textLayerDiv, pageIndex: this.id - 1, viewport: this.viewport, enhanceTextSelection: this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE, eventBus: this.eventBus, highlighter: this.textHighlighter, accessibilityManager: this._accessibilityManager }); } this.textLayer = textLayer; if (this.#annotationMode !== _pdf.AnnotationMode.DISABLE && this.annotationLayerFactory) { this._annotationCanvasMap ||= new Map(); this.annotationLayer ||= this.annotationLayerFactory.createAnnotationLayerBuilder({ pageDiv: div, pdfPage, imageResourcesPath: this.imageResourcesPath, renderForms: this.#annotationMode === _pdf.AnnotationMode.ENABLE_FORMS, l10n: this.l10n, annotationCanvasMap: this._annotationCanvasMap, accessibilityManager: this._accessibilityManager }); } if (this.xfaLayer?.div) { div.append(this.xfaLayer.div); } let renderContinueCallback = null; if (this.renderingQueue) { renderContinueCallback = cont => { if (!this.renderingQueue.isHighestPriority(this)) { this.renderingState = _ui_utils.RenderingStates.PAUSED; this.resume = () => { this.renderingState = _ui_utils.RenderingStates.RUNNING; cont(); }; return; } cont(); }; } const finishPaintTask = async (error = null) => { if (paintTask === this.paintTask) { this.paintTask = null; } if (error instanceof _pdf.RenderingCancelledException) { this._renderError = null; return; } this._renderError = error; this.renderingState = _ui_utils.RenderingStates.FINISHED; if (this.loadingIconDiv) { this.loadingIconDiv.remove(); delete this.loadingIconDiv; } this._resetZoomLayer(true); this.#useThumbnailCanvas.regularAnnotations = !paintTask.separateAnnots; this.eventBus.dispatch("pagerendered", { source: this, pageNumber: this.id, cssTransform: false, timestamp: performance.now(), error: this._renderError }); if (error) { throw error; } }; const paintTask = this.renderer === _ui_utils.RendererType.SVG ? this.paintOnSvg(canvasWrapper) : this.paintOnCanvas(canvasWrapper); paintTask.onRenderContinue = renderContinueCallback; this.paintTask = paintTask; const resultPromise = paintTask.promise.then(() => { return finishPaintTask(null).then(() => { if (textLayer) { const readableStream = pdfPage.streamTextContent({ includeMarkedContent: true }); textLayer.setTextContentStream(readableStream); textLayer.render(); } if (this.annotationLayer) { this._renderAnnotationLayer().then(() => { if (this.annotationEditorLayerFactory) { this.annotationEditorLayer ||= this.annotationEditorLayerFactory.createAnnotationEditorLayerBuilder({ pageDiv: div, pdfPage, l10n: this.l10n, accessibilityManager: this._accessibilityManager }); this._renderAnnotationEditorLayer(); } }); } }); }, function (reason) { return finishPaintTask(reason); }); if (this.xfaLayerFactory) { this.xfaLayer ||= this.xfaLayerFactory.createXfaLayerBuilder({ pageDiv: div, pdfPage }); this._renderXfaLayer(); } if (this.structTreeLayerFactory && this.textLayer && this.canvas) { this._onTextLayerRendered = event => { if (event.pageNumber !== this.id) { return; } this.eventBus._off("textlayerrendered", this._onTextLayerRendered); this._onTextLayerRendered = null; if (!this.canvas) { return; } this.pdfPage.getStructTree().then(tree => { if (!tree) { return; } if (!this.canvas) { return; } const treeDom = this.structTreeLayer.render(tree); treeDom.classList.add("structTree"); this.canvas.append(treeDom); }); }; this.eventBus._on("textlayerrendered", this._onTextLayerRendered); this.structTreeLayer = this.structTreeLayerFactory.createStructTreeLayerBuilder({ pdfPage }); } div.setAttribute("data-loaded", true); this.eventBus.dispatch("pagerender", { source: this, pageNumber: this.id }); return resultPromise; } paintOnCanvas(canvasWrapper) { const renderCapability = (0, _pdf.createPromiseCapability)(); const result = { promise: renderCapability.promise, onRenderContinue(cont) { cont(); }, cancel() { renderTask.cancel(); }, get separateAnnots() { return renderTask.separateAnnots; } }; const viewport = this.viewport; const canvas = document.createElement("canvas"); canvas.setAttribute("role", "presentation"); canvas.hidden = true; let isCanvasHidden = true; const showCanvas = function () { if (isCanvasHidden) { canvas.hidden = false; isCanvasHidden = false; } }; canvasWrapper.append(canvas); this.canvas = canvas; const ctx = canvas.getContext("2d", { alpha: false }); const outputScale = this.outputScale = new _ui_utils.OutputScale(); if (this.useOnlyCssZoom) { const actualSizeViewport = viewport.clone({ scale: _pdf.PixelsPerInch.PDF_TO_CSS_UNITS }); outputScale.sx *= actualSizeViewport.width / viewport.width; outputScale.sy *= actualSizeViewport.height / viewport.height; } if (this.maxCanvasPixels > 0) { const pixelsInViewport = viewport.width * viewport.height; const maxScale = Math.sqrt(this.maxCanvasPixels / pixelsInViewport); if (outputScale.sx > maxScale || outputScale.sy > maxScale) { outputScale.sx = maxScale; outputScale.sy = maxScale; this.hasRestrictedScaling = true; } else { this.hasRestrictedScaling = false; } } const sfx = (0, _ui_utils.approximateFraction)(outputScale.sx); const sfy = (0, _ui_utils.approximateFraction)(outputScale.sy); canvas.width = (0, _ui_utils.roundToDivide)(viewport.width * outputScale.sx, sfx[0]); canvas.height = (0, _ui_utils.roundToDivide)(viewport.height * outputScale.sy, sfy[0]); canvas.style.width = (0, _ui_utils.roundToDivide)(viewport.width, sfx[1]) + "px"; canvas.style.height = (0, _ui_utils.roundToDivide)(viewport.height, sfy[1]) + "px"; this.paintedViewportMap.set(canvas, viewport); const transform = outputScale.scaled ? [outputScale.sx, 0, 0, outputScale.sy, 0, 0] : null; const renderContext = { canvasContext: ctx, transform, viewport: this.viewport, annotationMode: this.#annotationMode, optionalContentConfigPromise: this._optionalContentConfigPromise, annotationCanvasMap: this._annotationCanvasMap, pageColors: this.pageColors }; const renderTask = this.pdfPage.render(renderContext); renderTask.onContinue = function (cont) { showCanvas(); if (result.onRenderContinue) { result.onRenderContinue(cont); } else { cont(); } }; renderTask.promise.then(function () { showCanvas(); renderCapability.resolve(); }, function (error) { showCanvas(); renderCapability.reject(error); }); return result; } paintOnSvg(wrapper) { let cancelled = false; const ensureNotCancelled = () => { if (cancelled) { throw new _pdf.RenderingCancelledException(`Rendering cancelled, page ${this.id}`, "svg"); } }; const pdfPage = this.pdfPage; const actualSizeViewport = this.viewport.clone({ scale: _pdf.PixelsPerInch.PDF_TO_CSS_UNITS }); const promise = pdfPage.getOperatorList({ annotationMode: this.#annotationMode }).then(opList => { ensureNotCancelled(); const svgGfx = new _pdf.SVGGraphics(pdfPage.commonObjs, pdfPage.objs); return svgGfx.getSVG(opList, actualSizeViewport).then(svg => { ensureNotCancelled(); this.svg = svg; this.paintedViewportMap.set(svg, actualSizeViewport); svg.style.width = wrapper.style.width; svg.style.height = wrapper.style.height; this.renderingState = _ui_utils.RenderingStates.FINISHED; wrapper.append(svg); }); }); return { promise, onRenderContinue(cont) { cont(); }, cancel() { cancelled = true; }, get separateAnnots() { return false; } }; } setPageLabel(label) { this.pageLabel = typeof label === "string" ? label : null; if (this.pageLabel !== null) { this.div.setAttribute("data-page-label", this.pageLabel); } else { this.div.removeAttribute("data-page-label"); } } get thumbnailCanvas() { const { initialOptionalContent, regularAnnotations } = this.#useThumbnailCanvas; return initialOptionalContent && regularAnnotations ? this.canvas : null; } } exports.PDFPageView = PDFPageView;