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

package/dist/npm/text/text-layer-builder.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The text layer builder provides text selection functionality for the PDF.
+ * It does this by creating overlay divs over the PDF's text. These divs
+ * contain text that matches the PDF text they are overlaying.
+ */
+declare class TextLayerBuilder {
+    #private;
+    pdfPage: any;
+    div: any;
+    accessibilityManager: any;
+    constructor({ pdfPage, accessibilityManager, styles, onAppend, }: {
+        pdfPage: any;
+        accessibilityManager: any;
+        styles: any;
+        onAppend?: any;
+    });
+    /**
+     * Renders the text layer.
+     * @param {PageViewport} viewport
+     * @param {Object} [textContentParams]
+     */
+    render(viewport: any, textContentParams?: any): Promise<void>;
+    hide(): void;
+    show(): void;
+    /**
+     * Cancel rendering of the text layer.
+     */
+    cancel(): void;
+}
+export { TextLayerBuilder };

package/dist/npm/text/text-layer-builder.js

@@ -0,0 +1,291 @@
+"use strict";
+/* Copyright 2012 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.
+ */
+var _TextLayerBuilder_instances, _a, _TextLayerBuilder_onAppend, _TextLayerBuilder_textLayer, _TextLayerBuilder_textLayers, _TextLayerBuilder_selectionChangeAbortController, _TextLayerBuilder_bindMouse, _TextLayerBuilder_removeGlobalSelectionListener, _TextLayerBuilder_enableGlobalSelectionListener;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLayerBuilder = void 0;
+const tslib_1 = require("tslib");
+const pdf_mjs_1 = require("pdfjs-dist/legacy/build/pdf.mjs");
+const dom_1 = require("../common/dom");
+/**
+ * The text layer builder provides text selection functionality for the PDF.
+ * It does this by creating overlay divs over the PDF's text. These divs
+ * contain text that matches the PDF text they are overlaying.
+ */
+class TextLayerBuilder {
+    constructor({ pdfPage, 
+    // highlighter = null,
+    accessibilityManager, 
+    // enablePermissions = false,
+    // todo: fix styles
+    styles, onAppend = null, }) {
+        _TextLayerBuilder_instances.add(this);
+        // todo: props
+        this.pdfPage = null;
+        // highlighter = null;
+        this.div = null;
+        this.accessibilityManager = null;
+        // todo: props
+        // #enablePermissions = false;
+        _TextLayerBuilder_onAppend.set(this, null);
+        // #renderingDone = false;
+        _TextLayerBuilder_textLayer.set(this, null);
+        this.pdfPage = pdfPage;
+        // this.highlighter = highlighter;
+        this.accessibilityManager = accessibilityManager;
+        // this.#enablePermissions = enablePermissions === true;
+        tslib_1.__classPrivateFieldSet(this, _TextLayerBuilder_onAppend, onAppend, "f");
+        this.div = document.createElement("div");
+        this.div.tabIndex = 0;
+        // this.div.className = "textLayer";
+        // todo: fix classes
+        this.div.classList.add("k-text-layer");
+        // todo: fix styles
+        Object.keys(styles).forEach((key) => (this.div.style[key] = styles[key]));
+    }
+    /**
+     * Renders the text layer.
+     * @param {PageViewport} viewport
+     * @param {Object} [textContentParams]
+     */
+    render(viewport_1) {
+        return tslib_1.__awaiter(this, arguments, void 0, function* (viewport, textContentParams = null) {
+            var _a, _b, _c;
+            // if (this.#renderingDone && this.#textLayer) {
+            if (tslib_1.__classPrivateFieldGet(this, _TextLayerBuilder_textLayer, "f")) {
+                tslib_1.__classPrivateFieldGet(this, _TextLayerBuilder_textLayer, "f").update({
+                    viewport,
+                    onBefore: this.hide.bind(this),
+                });
+                this.show();
+                return;
+            }
+            this.cancel();
+            tslib_1.__classPrivateFieldSet(this, _TextLayerBuilder_textLayer, new pdf_mjs_1.TextLayer({
+                textContentSource: this.pdfPage.streamTextContent(textContentParams || {
+                    // includeMarkedContent: true,
+                    // setting this to false requires removing "await"
+                    // in page.ts when calling this.#renderTextLayer()
+                    includeMarkedContent: false,
+                    disableNormalization: true,
+                }),
+                container: this.div,
+                viewport,
+            }), "f");
+            // const { textDivs, textContentItemsStr } = this.#textLayer;
+            const { textDivs } = tslib_1.__classPrivateFieldGet(this, _TextLayerBuilder_textLayer, "f");
+            // this.highlighter?.setTextMapping(textDivs, textContentItemsStr);
+            (_a = this.accessibilityManager) === null || _a === void 0 ? void 0 : _a.setTextMapping(textDivs);
+            yield tslib_1.__classPrivateFieldGet(this, _TextLayerBuilder_textLayer, "f").render();
+            // this.#renderingDone = true;
+            // todo: manually add "k-marked-content" class
+            // as pdf.js text layer cannot render it
+            const markedContentElements = Array.from(this.div.querySelectorAll(".markedContent") || []) || [];
+            markedContentElements.forEach(x => (0, dom_1.addClass)("k-marked-content", x));
+            if (markedContentElements && markedContentElements.length > 0) {
+                const endOfContent = document.createElement("div");
+                endOfContent.className = "endOfContent";
+                this.div.append(endOfContent);
+                tslib_1.__classPrivateFieldGet(this, _TextLayerBuilder_instances, "m", _TextLayerBuilder_bindMouse).call(this, endOfContent);
+            }
+            // Ensure that the textLayer is appended to the DOM *before* handling
+            // e.g. a pending search operation.
+            (_b = tslib_1.__classPrivateFieldGet(this, _TextLayerBuilder_onAppend, "f")) === null || _b === void 0 ? void 0 : _b.call(this, this.div);
+            // this.highlighter?.enable();
+            (_c = this.accessibilityManager) === null || _c === void 0 ? void 0 : _c.enable();
+        });
+    }
+    hide() {
+        // if (!this.div.hidden && this.#renderingDone) {
+        if (!this.div.hidden) {
+            // We turn off the highlighter in order to avoid to scroll into view an
+            // element of the text layer which could be hidden.
+            // this.highlighter?.disable();
+            this.div.hidden = true;
+        }
+    }
+    show() {
+        // if (this.div.hidden && this.#renderingDone) {
+        if (this.div.hidden) {
+            this.div.hidden = false;
+            // this.highlighter?.enable();
+        }
+    }
+    /**
+     * Cancel rendering of the text layer.
+     */
+    cancel() {
+        var _b, _c;
+        (_b = tslib_1.__classPrivateFieldGet(this, _TextLayerBuilder_textLayer, "f")) === null || _b === void 0 ? void 0 : _b.cancel();
+        tslib_1.__classPrivateFieldSet(this, _TextLayerBuilder_textLayer, null, "f");
+        // this.highlighter?.disable();
+        (_c = this.accessibilityManager) === null || _c === void 0 ? void 0 : _c.disable();
+        tslib_1.__classPrivateFieldGet(_a, _a, "m", _TextLayerBuilder_removeGlobalSelectionListener).call(_a, this.div);
+    }
+}
+exports.TextLayerBuilder = TextLayerBuilder;
+_a = TextLayerBuilder, _TextLayerBuilder_onAppend = new WeakMap(), _TextLayerBuilder_textLayer = new WeakMap(), _TextLayerBuilder_instances = new WeakSet(), _TextLayerBuilder_bindMouse = function _TextLayerBuilder_bindMouse(end) {
+    const { div } = this;
+    // div.addEventListener("mousedown", () => {
+    //     div.classList.add("selecting");
+    // });
+    // div.addEventListener("copy", event => {
+    //     if (!this.#enablePermissions) {
+    //         const selection = document.getSelection();
+    //         event.clipboardData.setData(
+    //             "text/plain",
+    //             removeNullCharacters(normalizeUnicode(selection.toString()))
+    //         );
+    //     }
+    //     event.preventDefault();
+    //     event.stopPropagation();
+    // });
+    tslib_1.__classPrivateFieldGet(_a, _a, "f", _TextLayerBuilder_textLayers).set(div, end);
+    tslib_1.__classPrivateFieldGet(_a, _a, "m", _TextLayerBuilder_enableGlobalSelectionListener).call(_a);
+}, _TextLayerBuilder_removeGlobalSelectionListener = function _TextLayerBuilder_removeGlobalSelectionListener(textLayerDiv) {
+    var _b;
+    tslib_1.__classPrivateFieldGet(this, _a, "f", _TextLayerBuilder_textLayers).delete(textLayerDiv);
+    if (tslib_1.__classPrivateFieldGet(this, _a, "f", _TextLayerBuilder_textLayers).size === 0) {
+        (_b = tslib_1.__classPrivateFieldGet(this, _a, "f", _TextLayerBuilder_selectionChangeAbortController)) === null || _b === void 0 ? void 0 : _b.abort();
+        tslib_1.__classPrivateFieldSet(this, _a, null, "f", _TextLayerBuilder_selectionChangeAbortController);
+    }
+}, _TextLayerBuilder_enableGlobalSelectionListener = function _TextLayerBuilder_enableGlobalSelectionListener() {
+    // if (this.#selectionChangeAbortController) {
+    //     // document-level event listeners already installed
+    //     return;
+    // }
+    // this.#selectionChangeAbortController = new AbortController();
+    // const { signal } = this.#selectionChangeAbortController;
+    // const reset = (end, textLayer) => {
+    //     if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
+    //         textLayer.append(end);
+    //         end.style.width = "";
+    //         end.style.height = "";
+    //     }
+    //     textLayer.classList.remove("selecting");
+    // };
+    // let isPointerDown = false;
+    // document.addEventListener(
+    //     "pointerdown",
+    //     () => {
+    //         isPointerDown = true;
+    //     },
+    //     { signal }
+    // );
+    // document.addEventListener(
+    //     "pointerup",
+    //     () => {
+    //         isPointerDown = false;
+    //         this.#textLayers.forEach(reset);
+    //     },
+    //     { signal }
+    // );
+    // window.addEventListener(
+    //     "blur",
+    //     () => {
+    //         isPointerDown = false;
+    //         this.#textLayers.forEach(reset);
+    //     },
+    //     { signal }
+    // );
+    // document.addEventListener(
+    //     "keyup",
+    //     () => {
+    //         if (!isPointerDown) {
+    //             this.#textLayers.forEach(reset);
+    //         }
+    //     },
+    //     { signal }
+    // );
+    // if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
+    //     // eslint-disable-next-line no-var
+    //     var isFirefox, prevRange;
+    // }
+    // document.addEventListener(
+    //     "selectionchange",
+    //     () => {
+    //         const selection = document.getSelection();
+    //         if (selection.rangeCount === 0) {
+    //             this.#textLayers.forEach(reset);
+    //             return;
+    //         }
+    //         // Even though the spec says that .rangeCount should be 0 or 1, Firefox
+    //         // creates multiple ranges when selecting across multiple pages.
+    //         // Make sure to collect all the .textLayer elements where the selection
+    //         // is happening.
+    //         const activeTextLayers = new Set();
+    //         for (let i = 0; i < selection.rangeCount; i++) {
+    //             const range = selection.getRangeAt(i);
+    //             for (const textLayerDiv of this.#textLayers.keys()) {
+    //                 if (
+    //                     !activeTextLayers.has(textLayerDiv) &&
+    //                     range.intersectsNode(textLayerDiv)
+    //                 ) {
+    //                     activeTextLayers.add(textLayerDiv);
+    //                 }
+    //             }
+    //         }
+    //         for (const [textLayerDiv, endDiv] of this.#textLayers) {
+    //             if (activeTextLayers.has(textLayerDiv)) {
+    //                 textLayerDiv.classList.add("selecting");
+    //             } else {
+    //                 reset(endDiv, textLayerDiv);
+    //             }
+    //         }
+    //         if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
+    //             return;
+    //         }
+    //         if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("CHROME")) {
+    //             isFirefox ??=
+    //                 getComputedStyle(
+    //                     this.#textLayers.values().next().value
+    //                 ).getPropertyValue("-moz-user-select") === "none";
+    //             if (isFirefox) {
+    //                 return;
+    //             }
+    //         }
+    //         // In non-Firefox browsers, when hovering over an empty space (thus,
+    //         // on .endOfContent), the selection will expand to cover all the
+    //         // text between the current selection and .endOfContent. By moving
+    //         // .endOfContent to right after (or before, depending on which side
+    //         // of the selection the user is moving), we limit the selection jump
+    //         // to at most cover the enteirety of the <span> where the selection
+    //         // is being modified.
+    //         const range = selection.getRangeAt(0);
+    //         const modifyStart =
+    //             prevRange &&
+    //             (range.compareBoundaryPoints(Range.END_TO_END, prevRange) === 0 ||
+    //                 range.compareBoundaryPoints(Range.START_TO_END, prevRange) === 0);
+    //         let anchor = modifyStart ? range.startContainer : range.endContainer;
+    //         if (anchor.nodeType === Node.TEXT_NODE) {
+    //             anchor = anchor.parentNode;
+    //         }
+    //         const parentTextLayer = anchor.parentElement.closest(".textLayer");
+    //         const endDiv = this.#textLayers.get(parentTextLayer);
+    //         if (endDiv) {
+    //             endDiv.style.width = parentTextLayer.style.width;
+    //             endDiv.style.height = parentTextLayer.style.height;
+    //             anchor.parentElement.insertBefore(
+    //                 endDiv,
+    //                 modifyStart ? anchor : anchor.nextSibling
+    //             );
+    //         }
+    //         prevRange = range.cloneRange();
+    //     },
+    //     { signal }
+    // );
+};
+_TextLayerBuilder_textLayers = { value: new Map() };
+_TextLayerBuilder_selectionChangeAbortController = { value: null };

package/dist/npm/utils.d.ts

@@ -1,6 +1,6 @@
 import { SaveOptions } from '@progress/kendo-file-saver';
-import { PDFPageProxy, PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
-import { TypedArray } from 'pdfjs-dist/types/src/display/api';
+import { PDFPageProxy, PDFDocumentProxy } from "pdfjs-dist/legacy/build/pdf.mjs";
+import { TypedArray } from "pdfjs-dist/types/src/display/api";
 /**
  * @hidden
  */
@@ -29,8 +29,10 @@ export interface PDFReadParameters {
  * @hidden
  */
 export interface PDFReadOptions extends PDFReadParameters {
+    rootElement?: HTMLElement | null;
     dom: HTMLDivElement;
     zoom: number;
+    enableAnnotations: boolean;
     done: DoneFn;
 }
 /**
@@ -40,15 +42,18 @@ export interface PDFReloadParameters {
     pdfDoc: PDFDocumentProxy;
     zoom: number;
     dom: HTMLElement;
-    rootElement?: HTMLElement;
+    rootElement?: HTMLElement | null;
     loadOnDemand?: boolean;
     done: (pdfPages: PDFPageProxy[]) => void;
     error: ErrorFn;
+    enableAnnotations: boolean;
 }
 /**
  * @hidden
  */
 export declare const DEFAULT_ZOOM_LEVEL = 1.25;
+export declare const scale: () => number;
+export declare const parsePdfFromBase64String: (base64String: string) => string;
 /**
  * @hidden
  */
@@ -72,6 +77,12 @@ export declare const reloadDocument: (params: PDFReloadParameters) => void;
  * @hidden
  */
 export declare const print: (pages: PDFPageProxy[], done: () => void, error: ErrorFn) => void;
+export declare const createElement: <T>(name: string, className: string, styles: {
+    [key: string]: string;
+}) => T;
+export declare const transforms: {
+    [rotation: string]: string;
+};
 export declare const renderPage: (page: PDFPageProxy, emptyPage: any, error: ErrorFn) => any;
 /**
  * @hidden
@@ -99,3 +110,16 @@ export declare const scrollToPage: (rootElement: HTMLElement, pageNumber: number
  * @returns The page number.
  */
 export declare const currentPage: (rootElement: HTMLElement) => number;
+/**
+ * @hidden
+ *
+ * related to https://github.com/telerik/kendo-pdfviewer-common/issues/6
+ * the bigger the canvas size, the worse the performance;
+ * if initial size after scaling is greater than browser limits,
+ * we are limiting it to the limits, then halving it for performance.
+ */
+export declare const adjustCanvasSize: (targetWidth: number, targetHeight: number) => {
+    adjustedWidth: number;
+    adjustedHeight: number;
+    adjustRatio: number;
+};

package/dist/npm/utils.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.currentPage = exports.scrollToPage = exports.calculateZoomLevel = exports.goToPreviousSearchMatch = exports.goToNextSearchMatch = exports.renderPage = exports.print = exports.reloadDocument = exports.loadPDF = exports.download = exports.removeChildren = exports.DEFAULT_ZOOM_LEVEL = void 0;
+exports.adjustCanvasSize = exports.currentPage = exports.scrollToPage = exports.calculateZoomLevel = exports.goToPreviousSearchMatch = exports.goToNextSearchMatch = exports.renderPage = exports.transforms = exports.createElement = exports.print = exports.reloadDocument = exports.loadPDF = exports.download = exports.removeChildren = exports.parsePdfFromBase64String = exports.scale = exports.DEFAULT_ZOOM_LEVEL = void 0;
 const kendo_file_saver_1 = require("@progress/kendo-file-saver");
 const kendo_common_1 = require("@progress/kendo-common");
 const pdf_mjs_1 = require("pdfjs-dist/legacy/build/pdf.mjs");
+const annotations_1 = require("./annotations");
 const MAX_CANVAS_WIDTH_HEIGHT_CHROME = 65535;
 const MAX_CANVAS_AREA_CHROME_SAFARI = 268435456;
 const MAX_CANVAS_WIDTH_HEIGHT_FIREFOX = 32767;
@@ -27,16 +28,18 @@ const isFirefox = (userAgent) => {
  */
 exports.DEFAULT_ZOOM_LEVEL = 1.25;
 const scale = () => (isIOS() ? devicePixelRatio : devicePixelRatio * 3);
+exports.scale = scale;
 const parsePdfFromBase64String = (base64String) => {
     return atob(base64String.replace(/^(data:application\/pdf;base64,)/gi, ''));
 };
+exports.parsePdfFromBase64String = parsePdfFromBase64String;
 const getDocumentParameters = (options) => {
     let params = {
         verbosity: 0,
         isEvalSupported: false
     };
     if (typeof options.data === 'string') {
-        params.data = parsePdfFromBase64String(options.data);
+        params.data = (0, exports.parsePdfFromBase64String)(options.data);
     }
     else if (typeof options.url === 'string') {
         params.url = options.url;
@@ -88,7 +91,7 @@ exports.download = download;
  */
 const loadPDF = (options) => {
     const params = getDocumentParameters(options);
-    const { dom, zoom, done, error } = options;
+    const { dom, zoom, done, error, rootElement, enableAnnotations } = options;
     const loadOnDemandPageSize = options.loadOnDemandPageSize || 2;
     (0, pdf_mjs_1.getDocument)(params)
         .promise.then((pdfDoc) => {
@@ -100,7 +103,7 @@ const loadPDF = (options) => {
     }).then(({ pages, pdfDoc }) => {
         Promise.all(pages)
             .then((all) => all.map((page, i) => {
-            const emptyPage = createEmptyPage(page, zoom);
+            const emptyPage = createEmptyPage(page, zoom, pdfDoc, enableAnnotations, rootElement);
             appendPage(dom, emptyPage.pageElement, i);
             if (options.loadOnDemand) {
                 // If LOD is enabled, render the first two(default) or X pages initially.
@@ -140,7 +143,7 @@ exports.loadPDF = loadPDF;
  * @hidden
  */
 const reloadDocument = (params) => {
-    const { pdfDoc, zoom, dom, done, error, loadOnDemand, rootElement } = params;
+    const { pdfDoc, zoom, dom, done, error, loadOnDemand, rootElement, enableAnnotations } = params;
     const pages = [];
     let currentPageIndex = 0;
     // Save the index of the current page in view before we reload the document.
@@ -154,7 +157,7 @@ const reloadDocument = (params) => {
         .then((all) => all.map((page, i) => {
         // Set 'rendered' back to false so that the pages can be re-rendered when scrolling.
         page._pageInfo.rendered = false;
-        const emptyPage = createEmptyPage(page, zoom);
+        const emptyPage = createEmptyPage(page, zoom, pdfDoc, enableAnnotations, rootElement);
         appendPage(dom, emptyPage.pageElement, i);
         // If on demand is not enabled, proceed as usual.
         if (!loadOnDemand) {
@@ -182,7 +185,7 @@ exports.reloadDocument = reloadDocument;
 const print = (pages, done, error) => {
     const dom = document.createElement('div');
     const allDone = pages.map(() => false);
-    const scaleNum = scale();
+    const scaleNum = (0, exports.scale)();
     pages.forEach((page, index) => {
         const viewport = renderCanvas(page, (el) => {
             dom.appendChild(el);
@@ -219,13 +222,17 @@ const openPrintDialog = (dom, width, height, done, onError) => {
         printDialog.addEventListener('afterprint', onAfterPrint);
     }
 };
-const createEmptyPage = (page, zoom) => {
+const createEmptyPage = (page, zoom, pdfDoc, enableAnnotations, rootElement) => {
     const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
     return {
         canvasContext,
         viewport,
         pageElement,
-        styles
+        styles,
+        zoom,
+        pdfDoc,
+        enableAnnotations,
+        rootElement
     };
 };
 const renderCanvas = (page, done, error) => {
@@ -251,19 +258,20 @@ const createElement = function (name, className, styles) {
     Object.keys(styles).forEach((key) => (element.style[key] = styles[key]));
     return element;
 };
-const transforms = {
+exports.createElement = createElement;
+exports.transforms = {
     '0': '',
     '90': 'rotate(90deg) translateY(-100%)',
     '180': 'rotate(180deg) translate(-100%, -100%)',
     '270': 'rotate(270deg) translateX(-100%)'
 };
 const renderPage = (page, emptyPage, error) => {
-    const { canvasContext, viewport, pageElement, styles } = emptyPage;
+    const { canvasContext, viewport, pageElement, styles, zoom, pdfDoc, enableAnnotations, rootElement } = emptyPage;
     page._pageInfo.renderInProgress = true;
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         page.getTextContent().then((textContent) => {
-            const textLayer = createElement('div', 'k-text-layer', styles);
+            const textLayer = (0, exports.createElement)('div', 'k-text-layer', styles);
             new pdf_mjs_1.TextLayer({
                 textContentSource: textContent,
                 container: textLayer,
@@ -272,8 +280,8 @@ const renderPage = (page, emptyPage, error) => {
                 textLayer.style.width = textLayer.style.width.replace(/px/g, 'pt');
                 textLayer.style.height = textLayer.style.height.replace(/px/g, 'pt');
                 const rotation = textLayer.getAttribute('data-main-rotation') || '0';
-                if (transforms[rotation]) {
-                    textLayer.style.transform = transforms[rotation];
+                if (exports.transforms[rotation]) {
+                    textLayer.style.transform = exports.transforms[rotation];
                     textLayer.style.transformOrigin = 'top left';
                 }
                 textLayer.querySelectorAll('span').forEach((el) => {
@@ -281,9 +289,32 @@ const renderPage = (page, emptyPage, error) => {
                         el.style.fontSize = el.style.fontSize.replace(/px/g, 'pt');
                     }
                 });
-                pageElement.appendChild(textLayer);
+                pageElement.prepend(textLayer); // Use prepend to ensure the element is always inserted before the annotation layer.
             }).catch(error);
         });
+        if (enableAnnotations) {
+            page.getAnnotations({ intent: 'display' }).then((annotations) => {
+                const annotationLayer = (0, exports.createElement)('div', 'k-annotations-layer', {
+                    position: 'absolute',
+                    top: '0',
+                    left: '0',
+                    overflow: 'hidden',
+                    height: styles.height,
+                    width: styles.width,
+                    pointerEvents: 'none'
+                });
+                pageElement.appendChild(annotationLayer);
+                for (const annotation of annotations) {
+                    switch (annotation.subtype) {
+                        case 'Link':
+                            new annotations_1.LinkAnnotation(annotationLayer, viewport, annotation, pdfDoc, zoom, rootElement);
+                            break;
+                        default:
+                            null;
+                    }
+                }
+            });
+        }
     })
         .then(() => {
         page._pageInfo.rendered = true;
@@ -441,16 +472,17 @@ const adjustCanvasSize = (targetWidth, targetHeight) => {
         adjustRatio: adjustRatio !== 1 ? adjustRatio / 2 : 1
     };
 };
+exports.adjustCanvasSize = adjustCanvasSize;
 const createCanvas = (page, zoom = 1, cssClass = '') => {
-    const scaleNum = scale();
+    const scaleNum = (0, exports.scale)();
     const viewport = page.getViewport({ scale: scaleNum });
-    const { adjustedWidth, adjustedHeight, adjustRatio } = adjustCanvasSize(viewport.width, viewport.height);
+    const { adjustedWidth, adjustedHeight, adjustRatio } = (0, exports.adjustCanvasSize)(viewport.width, viewport.height);
     const styles = {
         width: Math.floor(viewport.width / scaleNum) * zoom + 'pt',
         height: Math.floor(viewport.height / scaleNum) * zoom + 'pt'
     };
-    const pageElement = createElement('div', cssClass, styles);
-    const canvas = createElement('canvas', '', {
+    const pageElement = (0, exports.createElement)('div', cssClass, styles);
+    const canvas = (0, exports.createElement)('canvas', '', {
         width: '100%',
         height: '100%'
     });

package/dist/npm/widget/page.d.ts

@@ -0,0 +1,75 @@
+import { PDFPageProxy } from "pdfjs-dist/legacy/build/pdf.mjs";
+import { TextAccessibilityManager } from "../annotations/helpers/text-accessibility-manager";
+import { Component } from "../common/component";
+import { TextLayerBuilder } from "../text/text-layer-builder";
+import { AnnotationLayerBuilder } from "../annotations/annotation-layer-builder";
+import { DrawLayerBuilder } from "../annotations/draw-layer-builder";
+import { AnnotationEditorLayerBuilder } from "../annotations/annotation-editor-layer-builder";
+import { PdfViewer } from "./pdfviewer";
+import { EventBus } from "../annotations/shared/event_utils";
+export declare class Page extends Component {
+    #private;
+    eventBus: EventBus;
+    zoomLayer: any;
+    div: any;
+    viewport: any;
+    id: any;
+    _accessibilityManager: TextAccessibilityManager;
+    _annotationCanvasMap: any;
+    renderTask: any;
+    pdfPageRotate: any;
+    rotation: any;
+    scale: number;
+    pdfViewer: PdfViewer;
+    xfaLayer: any;
+    element: HTMLDivElement;
+    canvas: any;
+    canvasForPrint: any;
+    textLayer: TextLayerBuilder;
+    textLayerBuilder: TextLayerBuilder;
+    textAccessibilityManager: TextAccessibilityManager;
+    annotationLayer: AnnotationLayerBuilder;
+    drawLayer: DrawLayerBuilder;
+    annotationEditorLayer: AnnotationEditorLayerBuilder;
+    options: any;
+    state: any;
+    pdfPage: PDFPageProxy;
+    constructor(element: any, options: any);
+    destroy(): void;
+    get isEditing(): boolean;
+    get rawWidth(): any;
+    get rawHeight(): any;
+    setState(newState: any): void;
+    resetState(): void;
+    initScale(): void;
+    createPromise(): Promise<any>;
+    getViewport(options?: {
+        scale: number;
+    }): import("pdfjs-dist/types/src/display/display_utils").PageViewport | {
+        width: number;
+        height: number;
+    };
+    destroyTextLayer(): void;
+    removeTextLayer(): void;
+    getPrintContentAsync(): Promise<any>;
+    loadForPrintAsync({ zoomLevel, force }: {
+        zoomLevel?: number;
+        force?: boolean;
+    }): any;
+    renderForPrintAsync(): Promise<void>;
+    isBlank(): string;
+    setBlank(isBlank: any): void;
+    get renderingState(): number;
+    setPdfPage(pdfPage: any): void;
+    hasEditableAnnotations(): boolean;
+    _resetZoomLayer(removeFromDOM?: boolean): void;
+    reset({ keepZoomLayer, keepAnnotationLayer, keepAnnotationEditorLayer, keepXfaLayer, keepTextLayer, }?: {
+        keepZoomLayer?: boolean;
+        keepAnnotationLayer?: boolean;
+        keepAnnotationEditorLayer?: boolean;
+        keepXfaLayer?: boolean;
+        keepTextLayer?: boolean;
+    }): void;
+    toggleEditingMode(isEditing: any): void;
+    draw(): Promise<void>;
+}