@progress/kendo-pdfviewer-common 0.3.0-dev.202409251459 → 0.3.0-dev.202410100645

package/dist/npm/widget/page.js

@@ -0,0 +1,763 @@
+"use strict";
+var _Page_instances, _Page_annotationMode, _Page_isEditing, _Page_layerProperties, _Page_previousRotation, _Page_renderingState, _Page_textLayerMode, _Page_viewportMap, _Page_layers, _Page_addLayer, _Page_setDimensions, _Page_dispatchLayerRendered, _Page_renderAnnotationLayer, _Page_renderAnnotationEditorLayer, _Page_renderDrawLayer, _Page_renderTextLayer, _Page_finishRenderTask;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Page = void 0;
+const tslib_1 = require("tslib");
+const pdf_mjs_1 = require("pdfjs-dist/legacy/build/pdf.mjs");
+const text_accessibility_manager_1 = require("../annotations/helpers/text-accessibility-manager");
+const component_1 = require("../common/component");
+const core_1 = require("../common/core");
+const text_layer_builder_1 = require("../text/text-layer-builder");
+const ui_utils_1 = require("../annotations/shared/ui_utils");
+const annotation_layer_builder_1 = require("../annotations/annotation-layer-builder");
+const draw_layer_builder_1 = require("../annotations/draw-layer-builder");
+const annotation_editor_layer_builder_1 = require("../annotations/annotation-editor-layer-builder");
+const DEFAULT_ZOOM_LEVEL = 1.25;
+const DEFAULT_LAYER_PROPERTIES = {
+    annotationEditorUIManager: null,
+    annotationStorage: null,
+    downloadManager: null,
+    enableScripting: false,
+    fieldObjectsPromise: null,
+    findController: null,
+    hasJSActionsPromise: null,
+    get linkService() {
+        // return new SimpleLinkService();
+        return null;
+    },
+};
+const LAYERS_ORDER = new Map([
+    ["canvasWrapper", 0],
+    ["textLayer", 1],
+    ["annotationLayer", 2],
+    ["annotationEditorLayer", 3],
+    ["xfaLayer", 3],
+]);
+class Page extends component_1.Component {
+    constructor(element, options) {
+        super(element, options);
+        _Page_instances.add(this);
+        // todo: props
+        this.eventBus = null;
+        this.zoomLayer = null;
+        this.div = null;
+        this.viewport = null;
+        this.id = 1;
+        this._accessibilityManager = null;
+        this._annotationCanvasMap = new Map();
+        this.renderTask = null;
+        this.pdfPageRotate = null;
+        this.rotation = null;
+        this.scale = null;
+        this.pdfViewer = null;
+        // todo: props
+        // todo: props ported from pdf.js
+        this.xfaLayer = null;
+        _Page_annotationMode.set(this, pdf_mjs_1.AnnotationMode.ENABLE_FORMS);
+        // #enableHWA = false;
+        // #hasRestrictedScaling = false;
+        // // @ts-expect-error(TS)
+        _Page_isEditing.set(this, false);
+        _Page_layerProperties.set(this, null);
+        // #loadingId = null;
+        _Page_previousRotation.set(this, null);
+        // #renderError = null;
+        _Page_renderingState.set(this, ui_utils_1.RenderingStates.INITIAL);
+        _Page_textLayerMode.set(this, ui_utils_1.TextLayerMode.ENABLE);
+        // #useThumbnailCanvas = {
+        //   directDrawing: true,
+        //   initialOptionalContent: true,
+        //   regularAnnotations: true,
+        // };
+        _Page_viewportMap.set(this, new WeakMap());
+        _Page_layers.set(this, [null, null, null, null]);
+        // textLayer: HTMLDivElement;
+        this.textLayer = null;
+        this.textLayerBuilder = null;
+        this.textAccessibilityManager = null;
+        this.annotationLayer = null;
+        this.drawLayer = null;
+        this.annotationEditorLayer = null;
+        this.options = {};
+        this.state = {};
+        this.pdfPage = null;
+        this.extendOptions(options);
+        // todo: ported from pdf.js
+        this.div = element;
+        this.viewport = this.options.viewport;
+        this.id = this.options.id || this.options.number || 1;
+        tslib_1.__classPrivateFieldSet(this, _Page_layerProperties, options.layerProperties || DEFAULT_LAYER_PROPERTIES, "f");
+        this.eventBus = options.eventBus;
+        this.initScale();
+        // todo: ported from pdf.js
+        this.pdfViewer = options.pdfViewer;
+        this.pdfPage = options.pdfPage;
+        this.resetState();
+    }
+    destroy() {
+        this.destroyTextLayer();
+    }
+    get isEditing() {
+        return tslib_1.__classPrivateFieldGet(this, _Page_isEditing, "f");
+    }
+    get rawWidth() {
+        var _a, _b;
+        return (_b = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.rawDims) === null || _b === void 0 ? void 0 : _b.pageWidth;
+    }
+    get rawHeight() {
+        var _a, _b;
+        return (_b = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.rawDims) === null || _b === void 0 ? void 0 : _b.pageWidth;
+    }
+    setState(newState) {
+        this.state = (0, core_1.deepExtend)(this.state || {}, newState);
+    }
+    resetState() {
+        this.setState({});
+    }
+    initScale() {
+        this.scale = this.options.zoomLevel || this.options.scale || ui_utils_1.DEFAULT_SCALE;
+    }
+    createPromise() {
+        return (0, core_1.createPromise)();
+    }
+    getViewport(options = { scale: 1 }) {
+        const viewport = this.pdfPage ? this.pdfPage.getViewport(options) : { width: 0, height: 0 };
+        return viewport;
+    }
+    destroyTextLayer() {
+        this.removeTextLayer();
+    }
+    removeTextLayer() {
+        var _a, _b;
+        if (this.textLayer && ((_a = this.textLayer.div) === null || _a === void 0 ? void 0 : _a.parentNode)) {
+            (_b = this.textLayer.div) === null || _b === void 0 ? void 0 : _b.parentNode.removeChild(this.textLayer.div);
+        }
+    }
+    getPrintContentAsync() {
+        const canvas = this.canvasForPrint;
+        const printContentLoadPromise = this.createPromise();
+        const printContent = new Image();
+        const viewportRawDimensions = this.viewport.rawDims;
+        const pageWidth = viewportRawDimensions.pageWidth;
+        const pageHeight = viewportRawDimensions.pageHeight;
+        // const pageWidth = this.viewport.width;
+        // const pageHeight = this.viewport.height;
+        printContent.src = canvas.toDataURL();
+        printContent.width = pageWidth;
+        printContent.height = pageHeight;
+        printContent.onload = () => {
+            // @ts-expect-error TS(2339):
+            printContentLoadPromise.resolve(printContent);
+        };
+        return printContentLoadPromise;
+    }
+    loadForPrintAsync({ zoomLevel = DEFAULT_ZOOM_LEVEL, force = false }) {
+        const that = this;
+        const pageLoadPromise = this.createPromise();
+        const pageZoomLevel = this.pdfViewer.state.zoomLevel;
+        if (this.pdfPage && pageZoomLevel === zoomLevel && !force) {
+            // @ts-expect-error TS(2339): Property 'resolve' does not exist on type 'Promise... Remove this comment to see the full error message
+            return pageLoadPromise.resolve(that);
+        }
+        else if (this.pdfPage && pageZoomLevel && (pageZoomLevel !== zoomLevel || force)) {
+            this.renderForPrintAsync()
+                .then(() => {
+                this.setState({
+                    isPrintingInProgress: false
+                });
+                // @ts-expect-error TS(2339): Property 'resolve' does not exist on type 'Promise... Remove this comment to see the full error message
+                pageLoadPromise.resolve(that);
+            });
+            return pageLoadPromise;
+        }
+        const pageIndex = Math.max(0, this.pdfPage._pageIndex);
+        const pagePromise = this.pdfViewer.state.pdfDocument.getPage(pageIndex + 1);
+        pagePromise.then(() => {
+            this.renderForPrintAsync()
+                .then(() => {
+                this.setState({
+                    isPrintingInProgress: false
+                });
+                // @ts-expect-error TS(2339): Property 'resolve' does not exist on type 'Promise... Remove this comment to see the full error message
+                pageLoadPromise.resolve(that);
+            });
+        });
+        return pageLoadPromise;
+    }
+    renderForPrintAsync() {
+        var _a, _b;
+        const { canvasContext, canvas,
+        // canvasWrapper,
+        // viewport,
+        // pageElement,
+        // _styles
+         } = this.pdfViewer.createPageElements({
+            pdfPage: this.pdfPage,
+            zoom: this.pdfViewer.options.zoomLevel || 1,
+        });
+        this.canvasForPrint = canvas;
+        // canvasWrapper.appendChild(canvas);
+        // pageElement.appendChild(canvasWrapper);
+        this.setState({
+            isPrintingInProgress: true
+        });
+        const printUnits = this.pdfViewer.options.printResolution / pdf_mjs_1.PixelsPerInch.PDF;
+        const optionalContentConfigPromise = this.pdfViewer.state.pdfDocument.getOptionalContentConfig({
+            intent: "print",
+        });
+        const renderContext = {
+            canvasContext: canvasContext,
+            transform: [printUnits, 0, 0, printUnits, 0, 0],
+            // viewport: this.pdfPage.getViewport({ scale: 1, rotation: size.rotation }),
+            viewport: this.pdfPage.getViewport({ scale: 1, rotation: this.viewport.rotation }),
+            intent: "print",
+            annotationMode: pdf_mjs_1.AnnotationMode.ENABLE_STORAGE,
+            optionalContentConfigPromise,
+            printAnnotationStorage: (_b = (_a = this.pdfViewer) === null || _a === void 0 ? void 0 : _a.annotationStorage) === null || _b === void 0 ? void 0 : _b.print
+        };
+        const renderTask = this.pdfPage.render(renderContext);
+        const resultPromise = renderTask.promise;
+        return resultPromise;
+    }
+    isBlank() {
+        return this.element && this.element.getAttribute("data-blank");
+    }
+    setBlank(isBlank) {
+        if (!this.element) {
+            return;
+        }
+        if (isBlank) {
+            this.element.setAttribute("data-blank", true.toString());
+        }
+        else {
+            this.element.removeAttribute("data-blank");
+        }
+    }
+    get renderingState() {
+        return tslib_1.__classPrivateFieldGet(this, _Page_renderingState, "f");
+    }
+    setPdfPage(pdfPage) {
+        // if (
+        //     (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) &&
+        //     this._isStandalone &&
+        //     (this.pageColors?.foreground === "CanvasText" ||
+        //         this.pageColors?.background === "Canvas")
+        // ) {
+        //     this._container?.style.setProperty(
+        //         "--hcm-highlight-filter",
+        //         pdfPage.filterFactory.addHighlightHCMFilter(
+        //             "highlight",
+        //             "CanvasText",
+        //             "Canvas",
+        //             "HighlightText",
+        //             "Highlight"
+        //         )
+        //     );
+        //     this._container?.style.setProperty(
+        //         "--hcm-highlight-selected-filter",
+        //         pdfPage.filterFactory.addHighlightHCMFilter(
+        //             "highlight_selected",
+        //             "CanvasText",
+        //             "Canvas",
+        //             "HighlightText",
+        //             "Highlight"
+        //         )
+        //     );
+        // }
+        this.pdfPage = pdfPage;
+        this.pdfPageRotate = pdfPage.rotate;
+        const totalRotation = (this.rotation + this.pdfPageRotate) % 360;
+        this.viewport = pdfPage.getViewport({
+            scale: this.scale * pdf_mjs_1.PixelsPerInch.PDF_TO_CSS_UNITS,
+            rotation: totalRotation,
+        });
+        tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_setDimensions).call(this);
+        this.reset();
+    }
+    hasEditableAnnotations() {
+        var _a;
+        return !!((_a = this.annotationLayer) === null || _a === void 0 ? void 0 : _a.hasEditableAnnotations());
+    }
+    // /**
+    //  * The structure tree is currently only supported when the text layer is
+    //  * enabled and a canvas is used for rendering.
+    //  *
+    //  * The structure tree must be generated after the text layer for the
+    //  * aria-owns to work.
+    //  */
+    // async #renderStructTreeLayer() {
+    //     if (!this.textLayer) {
+    //         return;
+    //     }
+    //     this.structTreeLayer ||= new StructTreeLayerBuilder();
+    //     const tree = await (!this.structTreeLayer.renderingDone
+    //         ? this.pdfPage.getStructTree()
+    //         : null);
+    //     const treeDom = this.structTreeLayer?.render(tree);
+    //     if (treeDom) {
+    //         // Pause translation when inserting the structTree in the DOM.
+    //         this.l10n.pause();
+    //         this.canvas?.append(treeDom);
+    //         this.l10n.resume();
+    //     }
+    //     this.structTreeLayer?.show();
+    // }
+    // 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;
+        tslib_1.__classPrivateFieldGet(this, _Page_viewportMap, "f").delete(zoomLayerCanvas);
+        // Zeroing the width and height causes Firefox to release graphics
+        // resources immediately, which can greatly reduce memory consumption.
+        zoomLayerCanvas.width = 0;
+        zoomLayerCanvas.height = 0;
+        if (removeFromDOM) {
+            // Note: `ChildNode.remove` doesn't throw if the parent node is undefined.
+            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 = RenderingStates.INITIAL;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const div = this.div;
+        if (!div) {
+            return;
+        }
+        const childNodes = div.childNodes, zoomLayerNode = (keepZoomLayer && this.zoomLayer) || null, annotationLayerNode = (keepAnnotationLayer && ((_a = this.annotationLayer) === null || _a === void 0 ? void 0 : _a.div)) || null, annotationEditorLayerNode = (keepAnnotationEditorLayer && ((_b = this.annotationEditorLayer) === null || _b === void 0 ? void 0 : _b.div)) || null, xfaLayerNode = (keepXfaLayer && ((_c = this.xfaLayer) === null || _c === void 0 ? void 0 : _c.div)) || null, textLayerNode = (keepTextLayer && ((_d = this.textLayer) === null || _d === void 0 ? void 0 : _d.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:
+                    continue;
+                default: break;
+            }
+            node.remove();
+            const layerIndex = tslib_1.__classPrivateFieldGet(this, _Page_layers, "f").indexOf(node);
+            if (layerIndex >= 0) {
+                tslib_1.__classPrivateFieldGet(this, _Page_layers, "f")[layerIndex] = null;
+            }
+        }
+        div.removeAttribute("data-loaded");
+        if (annotationLayerNode) {
+            // Hide the annotation layer until all elements are resized
+            // so they are not displayed on the already resized page.
+            (_e = this.annotationLayer) === null || _e === void 0 ? void 0 : _e.hide();
+        }
+        if (annotationEditorLayerNode) {
+            (_f = this.annotationEditorLayer) === null || _f === void 0 ? void 0 : _f.hide();
+        }
+        if (xfaLayerNode) {
+            // Hide the XFA layer until all elements are resized
+            // so they are not displayed on the already resized page.
+            (_g = this.xfaLayer) === null || _g === void 0 ? void 0 : _g.hide();
+        }
+        if (textLayerNode) {
+            (_h = this.textLayer) === null || _h === void 0 ? void 0 : _h.hide();
+        }
+        // this.structTreeLayer?.hide();
+        if (!zoomLayerNode) {
+            if (this.canvas) {
+                tslib_1.__classPrivateFieldGet(this, _Page_viewportMap, "f").delete(this.canvas);
+                // Zeroing the width and height causes Firefox to release graphics
+                // resources immediately, which can greatly reduce memory consumption.
+                this.canvas.width = 0;
+                this.canvas.height = 0;
+                delete this.canvas;
+            }
+            this._resetZoomLayer();
+        }
+    }
+    toggleEditingMode(isEditing) {
+        if (!this.hasEditableAnnotations()) {
+            return;
+        }
+        tslib_1.__classPrivateFieldSet(this, _Page_isEditing, isEditing, "f");
+        this.reset({
+            keepZoomLayer: true,
+            keepAnnotationLayer: true,
+            keepAnnotationEditorLayer: true,
+            keepXfaLayer: true,
+            keepTextLayer: true,
+        });
+    }
+    draw() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            // if (this.renderingState !== RenderingStates.INITIAL) {
+            //     console.error("Must be in new state before drawing");
+            //     this.reset(); // Ensure that we reset all state to prevent issues.
+            // }
+            // const { div, l10n, pageColors, pdfPage: pdfPage, viewport } = this;
+            // if (!pdfPage) {
+            //     this.renderingState = RenderingStates.FINISHED;
+            //     throw new Error("pdfPage is not loaded");
+            // }
+            // this.renderingState = RenderingStates.RUNNING;
+            const { canvasContext, canvas, canvasWrapper, viewport, pageElement, styles } = this.pdfViewer.createPageElements({
+                pdfPage: this.pdfPage,
+                zoom: this.pdfViewer.options.zoomLevel || 1,
+            });
+            if (this.isBlank()) {
+                this.element.replaceWith(pageElement);
+                this.element = this.div = pageElement;
+                this.canvas = canvas;
+            }
+            else {
+                this.element = this.div = this.element || this.div || pageElement;
+                this.canvas = this.canvas || canvas;
+            }
+            this.options.styles = styles;
+            // Wrap the canvas so that if it has a CSS transform for high DPI the
+            // overflow will be hidden in Firefox.
+            // const canvasWrapper = document.createElement("div");
+            // canvasWrapper.classList.add("canvasWrapper");
+            canvasWrapper.appendChild(canvas);
+            this.element.appendChild(canvasWrapper);
+            tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_addLayer).call(this, canvasWrapper, "canvasWrapper");
+            const { div, 
+            // l10n,
+            // pageColors,
+            pdfPage,
+            // viewport
+             } = this;
+            if (!this.textLayer && tslib_1.__classPrivateFieldGet(this, _Page_textLayerMode, "f") !== ui_utils_1.TextLayerMode.DISABLE && !pdfPage.isPureXfa) {
+                this._accessibilityManager || (this._accessibilityManager = new text_accessibility_manager_1.TextAccessibilityManager());
+                this.textLayer = new text_layer_builder_1.TextLayerBuilder({
+                    // todo: not part of pdf.js
+                    styles: this.options.styles,
+                    pdfPage,
+                    // highlighter: this._textHighlighter,
+                    accessibilityManager: this._accessibilityManager,
+                    // enablePermissions: this.#textLayerMode === TextLayerMode.ENABLE_PERMISSIONS,
+                    onAppend: textLayerDiv => {
+                        // Pause translation when inserting the textLayer in the DOM.
+                        // this.l10n.pause();
+                        tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_addLayer).call(this, textLayerDiv, "textLayer");
+                        // this.l10n.resume();
+                    },
+                });
+            }
+            if (!this.annotationLayer && tslib_1.__classPrivateFieldGet(this, _Page_annotationMode, "f") !== pdf_mjs_1.AnnotationMode.DISABLE) {
+                const { annotationStorage, annotationEditorUIManager, 
+                // downloadManager,
+                // enableScripting,
+                // fieldObjectsPromise,
+                // hasJSActionsPromise,
+                linkService, } = tslib_1.__classPrivateFieldGet(this, _Page_layerProperties, "f");
+                this._annotationCanvasMap || (this._annotationCanvasMap = new Map());
+                this.annotationLayer = new annotation_layer_builder_1.AnnotationLayerBuilder({
+                    pdfPage,
+                    eventBus: this.eventBus || this.pdfViewer.eventBus,
+                    annotationStorage,
+                    // imageResourcesPath: this.imageResourcesPath,
+                    // renderForms: this.#annotationMode === AnnotationMode.ENABLE_FORMS,
+                    linkService,
+                    // downloadManager,
+                    // enableScripting,
+                    // hasJSActionsPromise,
+                    // fieldObjectsPromise,
+                    annotationCanvasMap: this._annotationCanvasMap,
+                    accessibilityManager: this._accessibilityManager,
+                    annotationEditorUIManager,
+                    onAppend: annotationLayerDiv => {
+                        tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_addLayer).call(this, annotationLayerDiv, "annotationLayer");
+                    },
+                });
+            }
+            // const renderContinueCallback = cont => {
+            //     showCanvas?.(false);
+            //     if (this.renderingQueue && !this.renderingQueue.isHighestPriority(this)) {
+            //         this.renderingState = RenderingStates.PAUSED;
+            //         this.resume = () => {
+            //             this.renderingState = RenderingStates.RUNNING;
+            //             cont();
+            //         };
+            //         return;
+            //     }
+            //     cont();
+            // };
+            // const { width, height } = viewport;
+            // const canvas = document.createElement("canvas");
+            // canvas.setAttribute("role", "presentation");
+            // // Keep the canvas hidden until the first draw callback, or until drawing
+            // // is complete when `!this.renderingQueue`, to prevent black flickering.
+            // canvas.hidden = true;
+            // const hasHCM = !!(pageColors?.background && pageColors?.foreground);
+            // let showCanvas = isLastShow => {
+            //     // In HCM, a final filter is applied on the canvas which means that
+            //     // before it's applied we've normal colors. Consequently, to avoid to have
+            //     // a final flash we just display it once all the drawing is done.
+            //     if (!hasHCM || isLastShow) {
+            //         canvas.hidden = false;
+            //         showCanvas = null; // Only invoke the function once.
+            //     }
+            // };
+            // canvasWrapper.append(canvas);
+            // this.canvas = canvas;
+            // const ctx = canvas.getContext("2d", {
+            //     alpha: false,
+            //     willReadFrequently: !this.#enableHWA,
+            // });
+            // const ctx = canvas.getContext("2d");
+            // const outputScale = (this.outputScale = new OutputScale());
+            // if (
+            //     (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) &&
+            //     this.maxCanvasPixels === 0
+            // ) {
+            //     const invScale = 1 / this.scale;
+            //     // Use a scale that makes the canvas have the originally intended size
+            //     // of the page.
+            //     outputScale.sx *= invScale;
+            //     outputScale.sy *= invScale;
+            //     this.#hasRestrictedScaling = true;
+            // } else 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 = approximateFraction(outputScale.sx);
+            // const sfy = approximateFraction(outputScale.sy);
+            // canvas.width = floorToDivide(width * outputScale.sx, sfx[0]);
+            // canvas.height = floorToDivide(height * outputScale.sy, sfy[0]);
+            // const { style } = canvas;
+            // style.width = floorToDivide(width, sfx[1]) + "px";
+            // style.height = floorToDivide(height, sfy[1]) + "px";
+            // Add the viewport so it's known what it was originally drawn with.
+            tslib_1.__classPrivateFieldGet(this, _Page_viewportMap, "f").set(canvas, viewport);
+            // // Rendering area
+            // const transform = outputScale.scaled
+            //     ? [outputScale.sx, 0, 0, outputScale.sy, 0, 0]
+            //     : null;
+            const renderContext = {
+                canvasContext: canvasContext,
+                // transform,
+                viewport,
+                annotationMode: tslib_1.__classPrivateFieldGet(this, _Page_annotationMode, "f"),
+                // optionalContentConfigPromise: this._optionalContentConfigPromise,
+                annotationCanvasMap: this._annotationCanvasMap,
+                // pageColors,
+                isEditing: tslib_1.__classPrivateFieldGet(this, _Page_isEditing, "f"),
+            };
+            // pdfPage.render(renderContext)
+            const renderTask = (this.renderTask = pdfPage.render(renderContext));
+            // renderTask.onContinue = renderContinueCallback;
+            const resultPromise = renderTask.promise.then(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                var _a;
+                // showCanvas?.(true);
+                yield tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_finishRenderTask).call(this, renderTask);
+                // todo: awaiting this breaks text nodes positioning after zoom
+                // if "includeMarkedContent": true is set in TextLayerBuilder
+                // await this.#renderTextLayer();
+                tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_renderTextLayer).call(this);
+                if (this.annotationLayer) {
+                    yield tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_renderAnnotationLayer).call(this);
+                }
+                const { annotationEditorUIManager } = tslib_1.__classPrivateFieldGet(this, _Page_layerProperties, "f");
+                if (!annotationEditorUIManager) {
+                    return;
+                }
+                this.drawLayer || (this.drawLayer = new draw_layer_builder_1.DrawLayerBuilder({
+                    pageIndex: this.id,
+                }));
+                yield tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_renderDrawLayer).call(this);
+                this.drawLayer.setParent(canvasWrapper);
+                if (!this.annotationEditorLayer) {
+                    this.annotationEditorLayer = new annotation_editor_layer_builder_1.AnnotationEditorLayerBuilder({
+                        uiManager: annotationEditorUIManager,
+                        pdfPage,
+                        // l10n,
+                        accessibilityManager: this._accessibilityManager,
+                        annotationLayer: (_a = this.annotationLayer) === null || _a === void 0 ? void 0 : _a.annotationLayer,
+                        textLayer: this.textLayer,
+                        drawLayer: this.drawLayer.getDrawLayer(),
+                        onAppend: annotationEditorLayerDiv => {
+                            tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_addLayer).call(this, annotationEditorLayerDiv, "annotationEditorLayer");
+                        },
+                    });
+                }
+                // todo: this is not awaited in pdf.js
+                tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_renderAnnotationEditorLayer).call(this);
+                // await this.#renderAnnotationEditorLayer();
+            }), error => {
+                // When zooming with a `drawingDelay` set, avoid temporarily showing
+                // a black canvas if rendering was cancelled before the `onContinue`-
+                // callback had been invoked at least once.
+                // if (!(error instanceof RenderingCancelledException)) {
+                //     showCanvas?.(true);
+                // }
+                // return this.#finishRenderTask(renderTask, error);
+                if (!error) {
+                    return;
+                }
+            });
+            if (pdfPage.isPureXfa) {
+                // if (!this.xfaLayer) {
+                //     const { annotationStorage, linkService } = this.#layerProperties;
+                //     this.xfaLayer = new XfaLayerBuilder({
+                //         pdfPage,
+                //         annotationStorage,
+                //         linkService,
+                //     });
+                // }
+                // this.#renderXfaLayer();
+            }
+            div.setAttribute("data-loaded", true);
+            this.eventBus.dispatch("pagerender", {
+                source: this,
+                pageNumber: this.id,
+            });
+            return resultPromise;
+        });
+    }
+}
+exports.Page = Page;
+_Page_annotationMode = new WeakMap(), _Page_isEditing = new WeakMap(), _Page_layerProperties = new WeakMap(), _Page_previousRotation = new WeakMap(), _Page_renderingState = new WeakMap(), _Page_textLayerMode = new WeakMap(), _Page_viewportMap = new WeakMap(), _Page_layers = new WeakMap(), _Page_instances = new WeakSet(), _Page_addLayer = function _Page_addLayer(div, name) {
+    const pos = LAYERS_ORDER.get(name);
+    const oldDiv = tslib_1.__classPrivateFieldGet(this, _Page_layers, "f")[pos];
+    tslib_1.__classPrivateFieldGet(this, _Page_layers, "f")[pos] = div;
+    if (oldDiv) {
+        oldDiv.replaceWith(div);
+        return;
+    }
+    for (let i = pos - 1; i >= 0; i--) {
+        const layer = tslib_1.__classPrivateFieldGet(this, _Page_layers, "f")[i];
+        if (layer) {
+            layer.after(div);
+            return;
+        }
+    }
+    this.div.prepend(div);
+}, _Page_setDimensions = function _Page_setDimensions() {
+    const { viewport } = this;
+    if (this.pdfPage) {
+        if (tslib_1.__classPrivateFieldGet(this, _Page_previousRotation, "f") === viewport.rotation) {
+            return;
+        }
+        tslib_1.__classPrivateFieldSet(this, _Page_previousRotation, viewport.rotation, "f");
+    }
+    if (!this.div || !viewport) {
+        return;
+    }
+    (0, pdf_mjs_1.setLayerDimensions)(this.div, viewport, 
+    /* mustFlip = */ true, 
+    /* mustRotate = */ false);
+}, _Page_dispatchLayerRendered = function _Page_dispatchLayerRendered(name, error) {
+    this.eventBus.dispatch(name, {
+        source: this,
+        pageNumber: this.id,
+        error,
+    });
+}, _Page_renderAnnotationLayer = function _Page_renderAnnotationLayer() {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        let error = null;
+        try {
+            yield this.annotationLayer.render(this.viewport, "display");
+        }
+        catch (ex) {
+            console.error(`#renderAnnotationLayer: "${ex}".`);
+            error = ex;
+        }
+        finally {
+            tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_dispatchLayerRendered).call(this, "annotationlayerrendered", error);
+        }
+    });
+}, _Page_renderAnnotationEditorLayer = function _Page_renderAnnotationEditorLayer() {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        let error = null;
+        try {
+            // await this.annotationEditorLayer.render(this.viewport, "display");
+            yield this.annotationEditorLayer.render(this.viewport);
+        }
+        catch (ex) {
+            // console.error(`#renderAnnotationEditorLayer: "${ex}".`);
+            error = ex;
+        }
+        finally {
+            tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_dispatchLayerRendered).call(this, "annotationeditorlayerrendered", error);
+        }
+    });
+}, _Page_renderDrawLayer = function _Page_renderDrawLayer() {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        try {
+            yield this.drawLayer.render("display");
+        }
+        catch (ex) {
+            // console.error(`#renderDrawLayer: "${ex}".`);
+        }
+    });
+}, _Page_renderTextLayer = function _Page_renderTextLayer() {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        if (!this.textLayer) {
+            return;
+        }
+        let error = null;
+        try {
+            yield this.textLayer.render(this.viewport);
+        }
+        catch (ex) {
+            if (ex instanceof pdf_mjs_1.AbortException) {
+                return;
+            }
+            // console.error(`#renderTextLayer: "${ex}".`);
+            error = ex;
+        }
+        tslib_1.__classPrivateFieldGet(this, _Page_instances, "m", _Page_dispatchLayerRendered).call(this, "textlayerrendered", error);
+        // this.#renderStructTreeLayer();
+    });
+}, _Page_finishRenderTask = function _Page_finishRenderTask(renderTask) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        // The renderTask may have been replaced by a new one, so only remove
+        // the reference to the renderTask if it matches the one that is
+        // triggering this callback.
+        if (renderTask === this.renderTask) {
+            this.renderTask = null;
+        }
+        //     if (error instanceof RenderingCancelledException) {
+        //         this.#renderError = null;
+        //         return;
+        //     }
+        //     this.#renderError = error;
+        //     this.renderingState = RenderingStates.FINISHED;
+        this._resetZoomLayer(/* removeFromDOM = */ true);
+        //     // Ensure that the thumbnails won't become partially (or fully) blank,
+        //     // for documents that contain interactive form elements.
+        //     this.#useThumbnailCanvas.regularAnnotations = !renderTask.separateAnnots;
+        this.eventBus.dispatch("pagerendered", {
+            source: this,
+            pageNumber: this.id,
+            cssTransform: false,
+            timestamp: performance.now(),
+            // error: this.#renderError,
+            error: "page render error",
+        });
+        //     if (error) {
+        //         throw error;
+        //     }
+    });
+};