/** * @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 _annotation_editor_layer_builder = require("./annotation_editor_layer_builder.js"); var _annotation_layer_builder = require("./annotation_layer_builder.js"); var _app_options = require("./app_options.js"); var _l10n_utils = require("./l10n_utils.js"); var _struct_tree_layer_builder = require("./struct_tree_layer_builder.js"); var _text_accessibility = require("./text_accessibility.js"); var _text_highlighter = require("./text_highlighter.js"); var _text_layer_builder = require("./text_layer_builder.js"); var _xfa_layer_builder = require("./xfa_layer_builder.js"); const MAX_CANVAS_PIXELS = _app_options.compatibilityParams.maxCanvasPixels || 16777216; const DEFAULT_LAYER_PROPERTIES = () => { return null; }; class PDFPageView { #annotationMode = _pdf.AnnotationMode.ENABLE_FORMS; #layerProperties = null; #previousRotation = null; #renderingState = _ui_utils.RenderingStates.INITIAL; #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.#layerProperties = options.layerProperties || DEFAULT_LAYER_PROPERTIES; 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.isOffscreenCanvasSupported = options.isOffscreenCanvasSupported ?? true; this.maxCanvasPixels = options.maxCanvasPixels || MAX_CANVAS_PIXELS; this.pageColors = options.pageColors || null; this.eventBus = options.eventBus; this.renderingQueue = options.renderingQueue; this.renderer = options.renderer || _ui_utils.RendererType.CANVAS; this.l10n = options.l10n || _l10n_utils.NullL10n; this.paintTask = null; this.paintedViewportMap = new WeakMap(); 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.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; this.#setDimensions(); container?.append(div); if (this._isStandalone) { _ui_utils.docStyle.setProperty("--scale-factor", this.scale * _pdf.PixelsPerInch.PDF_TO_CSS_UNITS); const { optionalContentConfigPromise } = options; if (optionalContentConfigPromise) { optionalContentConfigPromise.then(optionalContentConfig => { if (optionalContentConfigPromise !== this._optionalContentConfigPromise) { return; } this.#useThumbnailCanvas.initialOptionalContent = optionalContentConfig.hasInitialVisibility; }); } } } get renderingState() { return this.#renderingState; } set renderingState(state) { this.#renderingState = state; switch (state) { case _ui_utils.RenderingStates.INITIAL: case _ui_utils.RenderingStates.PAUSED: this.loadingIconDiv?.classList.add("notVisible"); break; case _ui_utils.RenderingStates.RUNNING: this.loadingIconDiv?.classList.remove("notVisible"); break; case _ui_utils.RenderingStates.FINISHED: if (this.loadingIconDiv) { this.loadingIconDiv.remove(); delete this.loadingIconDiv; } break; } } #setDimensions() { const { viewport } = this; if (this.pdfPage) { if (this.#previousRotation === viewport.rotation) { return; } this.#previousRotation = viewport.rotation; } (0, _pdf.setLayerDimensions)(this.div, viewport, true, false); } 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.#setDimensions(); this.reset(); } destroy() { this.reset(); this.pdfPage?.cleanup(); } get _textHighlighter() { return (0, _pdf.shadow)(this, "_textHighlighter", new _text_highlighter.TextHighlighter({ pageIndex: this.id - 1, eventBus: this.eventBus, findController: this.#layerProperties().findController })); } 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 (result?.textDivs && 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 #renderTextLayer() { const { pdfPage, textLayer, viewport } = this; if (!textLayer) { return; } let error = null; try { if (!textLayer.renderingDone) { const readableStream = pdfPage.streamTextContent({ includeMarkedContent: true }); textLayer.setTextContentSource(readableStream); } await textLayer.render(viewport); } catch (ex) { if (ex instanceof _pdf.AbortException) { return; } console.error(`#renderTextLayer: "${ex}".`); error = ex; } this.eventBus.dispatch("textlayerrendered", { source: this, pageNumber: this.id, numTextDivs: textLayer.numTextDivs, error }); this.#renderStructTreeLayer(); } async #renderStructTreeLayer() { if (!this.textLayer) { return; } this.structTreeLayer ||= new _struct_tree_layer_builder.StructTreeLayerBuilder(); const tree = await (!this.structTreeLayer.renderingDone ? this.pdfPage.getStructTree() : null); const treeDom = this.structTreeLayer?.render(tree); if (treeDom) { this.canvas?.append(treeDom); } } 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, keepTextLayer = false } = {}) { this.cancelRendering({ keepAnnotationLayer, keepAnnotationEditorLayer, keepXfaLayer, keepTextLayer }); this.renderingState = _ui_utils.RenderingStates.INITIAL; const div = this.div; 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, textLayerNode = keepTextLayer && this.textLayer?.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: case textLayerNode: case this.loadingIconDiv: continue; } node.remove(); } div.removeAttribute("data-loaded"); if (annotationLayerNode) { this.annotationLayer.hide(); } if (annotationEditorLayerNode) { this.annotationEditorLayer.hide(); } if (xfaLayerNode) { this.xfaLayer.hide(); } if (textLayerNode) { this.textLayer.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; } if (!this.loadingIconDiv) { this.loadingIconDiv = document.createElement("div"); this.loadingIconDiv.className = "loadingIcon notVisible"; 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, drawingDelay = -1 }) { 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 }); this.#setDimensions(); 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, redrawTextLayer: 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; } } const postponeDrawing = drawingDelay >= 0 && drawingDelay < 1000; if (this.canvas) { if (postponeDrawing || this.useOnlyCssZoom || this.hasRestrictedScaling && isScalingRestricted) { if (postponeDrawing && this.renderingState !== _ui_utils.RenderingStates.FINISHED) { this.cancelRendering({ keepZoomLayer: true, keepAnnotationLayer: true, keepAnnotationEditorLayer: true, keepXfaLayer: true, keepTextLayer: true, cancelExtraDelay: drawingDelay }); this.renderingState = _ui_utils.RenderingStates.FINISHED; } this.cssTransform({ target: this.canvas, redrawAnnotationLayer: true, redrawAnnotationEditorLayer: true, redrawXfaLayer: true, redrawTextLayer: !postponeDrawing, hideTextLayer: postponeDrawing }); 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, keepTextLayer: true }); } cancelRendering({ keepAnnotationLayer = false, keepAnnotationEditorLayer = false, keepXfaLayer = false, keepTextLayer = false, cancelExtraDelay = 0 } = {}) { if (this.paintTask) { this.paintTask.cancel(cancelExtraDelay); this.paintTask = null; } this.resume = null; if (this.textLayer && (!keepTextLayer || !this.textLayer.div)) { this.textLayer.cancel(); this.textLayer = null; } if (this.structTreeLayer && !this.textLayer) { this.structTreeLayer = 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(); } } cssTransform({ target, redrawAnnotationLayer = false, redrawAnnotationEditorLayer = false, redrawXfaLayer = false, redrawTextLayer = false, hideTextLayer = false }) { if (target instanceof HTMLCanvasElement) { if (!target.hasAttribute("zooming")) { target.setAttribute("zooming", true); const { style } = target; style.width = style.height = ""; } } else { const div = this.div; const { width, height } = this.viewport; 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 originalViewport = this.paintedViewportMap.get(target); if (this.viewport !== originalViewport) { const relativeRotation = this.viewport.rotation - originalViewport.rotation; const absRotation = Math.abs(relativeRotation); let scaleX = 1, scaleY = 1; if (absRotation === 90 || absRotation === 270) { const { width, height } = this.viewport; scaleX = height / width; scaleY = width / height; } if (absRotation !== 0) { target.style.transform = `rotate(${relativeRotation}deg) scale(${scaleX}, ${scaleY})`; } } if (redrawAnnotationLayer && this.annotationLayer) { this.#renderAnnotationLayer(); } if (redrawAnnotationEditorLayer && this.annotationEditorLayer) { this.#renderAnnotationEditorLayer(); } if (redrawXfaLayer && this.xfaLayer) { this.#renderXfaLayer(); } if (this.textLayer) { if (hideTextLayer) { this.textLayer.hide(); } else if (redrawTextLayer) { this.#renderTextLayer(); } } } get width() { return this.viewport.width; } get height() { return this.viewport.height; } getPagePoint(x, y) { return this.viewport.convertToPdfPoint(x, y); } 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; return Promise.reject(new Error("pdfPage is not loaded")); } this.renderingState = _ui_utils.RenderingStates.RUNNING; const canvasWrapper = document.createElement("div"); canvasWrapper.classList.add("canvasWrapper"); div.append(canvasWrapper); if (!this.textLayer && this.textLayerMode !== _ui_utils.TextLayerMode.DISABLE && !pdfPage.isPureXfa) { this._accessibilityManager ||= new _text_accessibility.TextAccessibilityManager(); this.textLayer = new _text_layer_builder.TextLayerBuilder({ highlighter: this._textHighlighter, accessibilityManager: this._accessibilityManager, isOffscreenCanvasSupported: this.isOffscreenCanvasSupported }); div.append(this.textLayer.div); } if (!this.annotationLayer && this.#annotationMode !== _pdf.AnnotationMode.DISABLE) { const { annotationStorage, downloadManager, enableScripting, fieldObjectsPromise, hasJSActionsPromise, linkService } = this.#layerProperties(); this._annotationCanvasMap ||= new Map(); this.annotationLayer = new _annotation_layer_builder.AnnotationLayerBuilder({ pageDiv: div, pdfPage, annotationStorage, imageResourcesPath: this.imageResourcesPath, renderForms: this.#annotationMode === _pdf.AnnotationMode.ENABLE_FORMS, linkService, downloadManager, l10n: this.l10n, enableScripting, hasJSActionsPromise, fieldObjectsPromise, 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; 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(async () => { this.#renderTextLayer(); if (this.annotationLayer) { await this.#renderAnnotationLayer(); } if (!this.annotationEditorLayer) { const { annotationEditorUIManager } = this.#layerProperties(); if (!annotationEditorUIManager) { return; } this.annotationEditorLayer = new _annotation_editor_layer_builder.AnnotationEditorLayerBuilder({ uiManager: annotationEditorUIManager, pageDiv: div, pdfPage, l10n: this.l10n, accessibilityManager: this._accessibilityManager }); } this.#renderAnnotationEditorLayer(); }); }, function (reason) { return finishPaintTask(reason); }); if (pdfPage.isPureXfa) { if (!this.xfaLayer) { const { annotationStorage, linkService } = this.#layerProperties(); this.xfaLayer = new _xfa_layer_builder.XfaLayerBuilder({ pageDiv: div, pdfPage, annotationStorage, linkService }); } this.#renderXfaLayer(); } 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(extraDelay = 0) { renderTask.cancel(extraDelay); }, get separateAnnots() { return renderTask.separateAnnots; } }; const viewport = this.viewport; const { width, height } = 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 / width; outputScale.sy *= actualSizeViewport.height / height; } if (this.maxCanvasPixels > 0) { const pixelsInViewport = width * 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]); const { style } = canvas; style.width = (0, _ui_utils.roundToDivide)(viewport.width, sfx[1]) + "px"; 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, 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;