/** * @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"); const MAX_CANVAS_PIXELS = _app_options.compatibilityParams.maxCanvasPixels || 16777216; class PDFPageView { #annotationMode = _pdf.AnnotationMode.ENABLE_FORMS; 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.eventBus = options.eventBus; this.renderingQueue = options.renderingQueue; this.textLayerFactory = options.textLayerFactory; this.annotationLayerFactory = options.annotationLayerFactory; this.xfaLayerFactory = options.xfaLayerFactory; this.textHighlighter = options.textHighlighterFactory?.createTextHighlighter(this.id - 1, 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.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?.appendChild(div); } 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) { error = ex; } finally { this.eventBus.dispatch("annotationlayerrendered", { 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) { 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, keepXfaLayer = false } = {}) { this.cancelRendering({ keepAnnotationLayer, 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, 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 xfaLayerNode: continue; } node.remove(); } div.removeAttribute("data-loaded"); if (annotationLayerNode) { this.annotationLayer.hide(); } 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.appendChild(this.loadingIconDiv); } update({ scale = 0, rotation = null, optionalContentConfigPromise = null }) { if (typeof arguments[0] !== "object") { console.error("PDFPageView.update called with separate parameters, please use an object instead."); this.update({ scale: arguments[0], rotation: arguments[1], optionalContentConfigPromise: arguments[2] }); return; } this.scale = scale || this.scale; if (typeof rotation === "number") { this.rotation = rotation; } if (optionalContentConfigPromise instanceof Promise) { this._optionalContentConfigPromise = optionalContentConfigPromise; } const totalRotation = (this.rotation + this.pdfPageRotate) % 360; const viewportScale = this.scale * _pdf.PixelsPerInch.PDF_TO_CSS_UNITS; this.viewport = this.viewport.clone({ scale: viewportScale, rotation: totalRotation }); if (this._isStandalone) { const { style } = document.documentElement; style.setProperty("--zoom-factor", this.scale); style.setProperty("--viewport-scale-factor", viewportScale); } if (this.svg) { this.cssTransform({ target: this.svg, redrawAnnotationLayer: 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, 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, keepXfaLayer: true }); } cancelRendering({ keepAnnotationLayer = 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.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, 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 (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"); if (this.annotationLayer?.div) { div.insertBefore(canvasWrapper, this.annotationLayer.div); } else { div.appendChild(canvasWrapper); } let textLayer = null; if (this.textLayerMode !== _ui_utils.TextLayerMode.DISABLE && this.textLayerFactory) { const textLayerDiv = document.createElement("div"); textLayerDiv.className = "textLayer"; textLayerDiv.style.width = canvasWrapper.style.width; textLayerDiv.style.height = canvasWrapper.style.height; if (this.annotationLayer?.div) { div.insertBefore(textLayerDiv, this.annotationLayer.div); } else { div.appendChild(textLayerDiv); } textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE, this.eventBus, this.textHighlighter); } this.textLayer = textLayer; if (this.#annotationMode !== _pdf.AnnotationMode.DISABLE && this.annotationLayerFactory) { this._annotationCanvasMap ||= new Map(); this.annotationLayer ||= this.annotationLayerFactory.createAnnotationLayerBuilder(div, pdfPage, null, this.imageResourcesPath, this.#annotationMode === _pdf.AnnotationMode.ENABLE_FORMS, this.l10n, null, null, null, null, this._annotationCanvasMap); } if (this.xfaLayer?.div) { div.appendChild(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.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(); } }); }, function (reason) { return finishPaintTask(reason); }); if (this.xfaLayerFactory) { if (!this.xfaLayer) { this.xfaLayer = this.xfaLayerFactory.createXfaLayerBuilder(div, pdfPage, null); } 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.appendChild(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(); } }; const viewport = this.viewport; const canvas = document.createElement("canvas"); canvas.hidden = true; let isCanvasHidden = true; const showCanvas = function () { if (isCanvasHidden) { canvas.hidden = false; isCanvasHidden = false; } }; canvasWrapper.appendChild(canvas); this.canvas = canvas; canvas.mozOpaque = true; 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 }; 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.appendChild(svg); }); }); return { promise, onRenderContinue(cont) { cont(); }, cancel() { cancelled = true; } }; } 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"); } } } exports.PDFPageView = PDFPageView;