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

package/dist/es/annotations.js

@@ -0,0 +1,68 @@
+import { createElement, scrollToPage } from './utils';
+class Annotation {
+    constructor(container, viewport, annotation, pdfDoc, zoom, rootElement) {
+        this.container = container;
+        this.viewport = viewport;
+        this.zoom = zoom;
+        this.annotation = annotation;
+        this.pdfDoc = pdfDoc;
+        this.rootElement = rootElement;
+    }
+    destroy() {
+    }
+}
+export class LinkAnnotation extends Annotation {
+    constructor(container, viewport, annotation, pdfDoc, zoom, rootElement) {
+        super(container, viewport, annotation, pdfDoc, zoom, rootElement);
+        this.onLinkClick = (e) => {
+            const destination = e.target.getAttribute('href');
+            if (destination && destination.indexOf('#') === 0) {
+                this.navigateToDestination(destination);
+                e.preventDefault();
+            }
+        };
+        this.linkElement = null;
+        this.renderAnnotation();
+        this.bindEvents();
+    }
+    destroy() {
+        this.unbindEvents();
+    }
+    bindEvents() {
+        this.linkElement.addEventListener('click', this.onLinkClick);
+    }
+    unbindEvents() {
+        this.linkElement.removeEventListener('click', this.onLinkClick);
+    }
+    navigateToDestination(destination) {
+        const dest = destination.split('#')[1];
+        this.pdfDoc.getDestination(dest).then(r => {
+            this.pdfDoc.getPageIndex(r[0]).then(i => this.goToPage(i));
+        });
+    }
+    goToPage(pageNumber) {
+        scrollToPage(this.rootElement, pageNumber);
+    }
+    renderAnnotation() {
+        const annotation = this.annotation, viewport = this.viewport, rect = annotation.rect, boundingRect = [
+            [rect[0], rect[1]],
+            [rect[2], rect[3]]
+        ], rawHeight = viewport.rawDims.pageHeight;
+        const left = Math.min(boundingRect[0][0], boundingRect[1][0]) * this.zoom, top = (rawHeight - Math.max(boundingRect[0][1], boundingRect[1][1])) * this.zoom, width = (boundingRect[1][0] - boundingRect[0][0]) * this.zoom, height = (boundingRect[1][1] - boundingRect[0][1]) * this.zoom;
+        const url = annotation.url || (annotation.dest && `#${encodeURI(annotation.dest)}`);
+        const annotationElement = createElement('span', '', {
+            position: 'absolute',
+            left: left + 'pt',
+            top: top + 'pt'
+        });
+        const linkElement = this.linkElement = createElement('a', '', {
+            width: width + 'pt',
+            height: height + 'pt',
+            display: 'inline-block',
+            pointerEvents: 'auto'
+        });
+        linkElement.setAttribute('href', url);
+        annotationElement.append(linkElement);
+        this.container.append(annotationElement);
+    }
+}

package/dist/es/utils.js

@@ -1,6 +1,7 @@
 import { saveAs } from '@progress/kendo-file-saver';
 import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { getDocument, TextLayer } from 'pdfjs-dist/legacy/build/pdf.mjs';
+import { LinkAnnotation } from './annotations';
 const MAX_CANVAS_WIDTH_HEIGHT_CHROME = 65535;
 const MAX_CANVAS_AREA_CHROME_SAFARI = 268435456;
 const MAX_CANVAS_WIDTH_HEIGHT_FIREFOX = 32767;
@@ -83,7 +84,7 @@ export const download = (options, fileName = 'Document', saveOptions = {}, onDow
  */
 export 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;
     getDocument(params)
         .promise.then((pdfDoc) => {
@@ -95,7 +96,7 @@ export 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.
@@ -134,7 +135,7 @@ export const loadPDF = (options) => {
  * @hidden
  */
 export 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.
@@ -148,7 +149,7 @@ export 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) {
@@ -211,13 +212,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) => {
@@ -235,7 +240,7 @@ const renderCanvas = (page, done, error) => {
         .catch(error);
     return viewport;
 };
-const createElement = function (name, className, styles) {
+export const createElement = function (name, className, styles) {
     const element = document.createElement(name);
     if (className) {
         element.className = className;
@@ -250,7 +255,7 @@ const transforms = {
     '270': 'rotate(270deg) translateX(-100%)'
 };
 export 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(() => {
@@ -273,9 +278,32 @@ export 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 = 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 LinkAnnotation(annotationLayer, viewport, annotation, pdfDoc, zoom, rootElement);
+                            break;
+                        default:
+                            null;
+                    }
+                }
+            });
+        }
     })
         .then(() => {
         page._pageInfo.rendered = true;

package/dist/es2015/annotations.js

@@ -0,0 +1,68 @@
+import { createElement, scrollToPage } from './utils';
+class Annotation {
+    constructor(container, viewport, annotation, pdfDoc, zoom, rootElement) {
+        this.container = container;
+        this.viewport = viewport;
+        this.zoom = zoom;
+        this.annotation = annotation;
+        this.pdfDoc = pdfDoc;
+        this.rootElement = rootElement;
+    }
+    destroy() {
+    }
+}
+export class LinkAnnotation extends Annotation {
+    constructor(container, viewport, annotation, pdfDoc, zoom, rootElement) {
+        super(container, viewport, annotation, pdfDoc, zoom, rootElement);
+        this.onLinkClick = (e) => {
+            const destination = e.target.getAttribute('href');
+            if (destination && destination.indexOf('#') === 0) {
+                this.navigateToDestination(destination);
+                e.preventDefault();
+            }
+        };
+        this.linkElement = null;
+        this.renderAnnotation();
+        this.bindEvents();
+    }
+    destroy() {
+        this.unbindEvents();
+    }
+    bindEvents() {
+        this.linkElement.addEventListener('click', this.onLinkClick);
+    }
+    unbindEvents() {
+        this.linkElement.removeEventListener('click', this.onLinkClick);
+    }
+    navigateToDestination(destination) {
+        const dest = destination.split('#')[1];
+        this.pdfDoc.getDestination(dest).then(r => {
+            this.pdfDoc.getPageIndex(r[0]).then(i => this.goToPage(i));
+        });
+    }
+    goToPage(pageNumber) {
+        scrollToPage(this.rootElement, pageNumber);
+    }
+    renderAnnotation() {
+        const annotation = this.annotation, viewport = this.viewport, rect = annotation.rect, boundingRect = [
+            [rect[0], rect[1]],
+            [rect[2], rect[3]]
+        ], rawHeight = viewport.rawDims.pageHeight;
+        const left = Math.min(boundingRect[0][0], boundingRect[1][0]) * this.zoom, top = (rawHeight - Math.max(boundingRect[0][1], boundingRect[1][1])) * this.zoom, width = (boundingRect[1][0] - boundingRect[0][0]) * this.zoom, height = (boundingRect[1][1] - boundingRect[0][1]) * this.zoom;
+        const url = annotation.url || (annotation.dest && `#${encodeURI(annotation.dest)}`);
+        const annotationElement = createElement('span', '', {
+            position: 'absolute',
+            left: left + 'pt',
+            top: top + 'pt'
+        });
+        const linkElement = this.linkElement = createElement('a', '', {
+            width: width + 'pt',
+            height: height + 'pt',
+            display: 'inline-block',
+            pointerEvents: 'auto'
+        });
+        linkElement.setAttribute('href', url);
+        annotationElement.append(linkElement);
+        this.container.append(annotationElement);
+    }
+}

package/dist/es2015/utils.js

@@ -1,6 +1,7 @@
 import { saveAs } from '@progress/kendo-file-saver';
 import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { getDocument, TextLayer } from 'pdfjs-dist/legacy/build/pdf.mjs';
+import { LinkAnnotation } from './annotations';
 const MAX_CANVAS_WIDTH_HEIGHT_CHROME = 65535;
 const MAX_CANVAS_AREA_CHROME_SAFARI = 268435456;
 const MAX_CANVAS_WIDTH_HEIGHT_FIREFOX = 32767;
@@ -83,7 +84,7 @@ export const download = (options, fileName = 'Document', saveOptions = {}, onDow
  */
 export 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;
     getDocument(params)
         .promise.then((pdfDoc) => {
@@ -95,7 +96,7 @@ export 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.
@@ -134,7 +135,7 @@ export const loadPDF = (options) => {
  * @hidden
  */
 export 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.
@@ -148,7 +149,7 @@ export 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) {
@@ -211,13 +212,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) => {
@@ -235,7 +240,7 @@ const renderCanvas = (page, done, error) => {
         .catch(error);
     return viewport;
 };
-const createElement = function (name, className, styles) {
+export const createElement = function (name, className, styles) {
     const element = document.createElement(name);
     if (className) {
         element.className = className;
@@ -250,7 +255,7 @@ const transforms = {
     '270': 'rotate(270deg) translateX(-100%)'
 };
 export 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(() => {
@@ -273,9 +278,32 @@ export 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 = 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 LinkAnnotation(annotationLayer, viewport, annotation, pdfDoc, zoom, rootElement);
+                            break;
+                        default:
+                            null;
+                    }
+                }
+            });
+        }
     })
         .then(() => {
         page._pageInfo.rendered = true;

package/dist/npm/annotations.d.ts

@@ -0,0 +1,23 @@
+import { PageViewport, PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
+declare class Annotation {
+    rootElement: HTMLElement;
+    container: HTMLElement;
+    viewport: PageViewport;
+    zoom: number;
+    annotation: any;
+    pdfDoc: PDFDocumentProxy;
+    constructor(container: any, viewport: any, annotation: any, pdfDoc: any, zoom: any, rootElement: any);
+    destroy(): any;
+}
+export declare class LinkAnnotation extends Annotation {
+    linkElement: HTMLAnchorElement;
+    constructor(container: any, viewport: any, annotation: any, pdfDoc: any, zoom: any, rootElement: any);
+    onLinkClick: (e: any) => void;
+    destroy(): any;
+    bindEvents(): any;
+    unbindEvents(): any;
+    navigateToDestination(destination: any): void;
+    goToPage(pageNumber: any): void;
+    renderAnnotation(): void;
+}
+export {};

package/dist/npm/annotations.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkAnnotation = void 0;
+const utils_1 = require("./utils");
+class Annotation {
+    constructor(container, viewport, annotation, pdfDoc, zoom, rootElement) {
+        this.container = container;
+        this.viewport = viewport;
+        this.zoom = zoom;
+        this.annotation = annotation;
+        this.pdfDoc = pdfDoc;
+        this.rootElement = rootElement;
+    }
+    destroy() {
+    }
+}
+class LinkAnnotation extends Annotation {
+    constructor(container, viewport, annotation, pdfDoc, zoom, rootElement) {
+        super(container, viewport, annotation, pdfDoc, zoom, rootElement);
+        this.onLinkClick = (e) => {
+            const destination = e.target.getAttribute('href');
+            if (destination && destination.indexOf('#') === 0) {
+                this.navigateToDestination(destination);
+                e.preventDefault();
+            }
+        };
+        this.linkElement = null;
+        this.renderAnnotation();
+        this.bindEvents();
+    }
+    destroy() {
+        this.unbindEvents();
+    }
+    bindEvents() {
+        this.linkElement.addEventListener('click', this.onLinkClick);
+    }
+    unbindEvents() {
+        this.linkElement.removeEventListener('click', this.onLinkClick);
+    }
+    navigateToDestination(destination) {
+        const dest = destination.split('#')[1];
+        this.pdfDoc.getDestination(dest).then(r => {
+            this.pdfDoc.getPageIndex(r[0]).then(i => this.goToPage(i));
+        });
+    }
+    goToPage(pageNumber) {
+        (0, utils_1.scrollToPage)(this.rootElement, pageNumber);
+    }
+    renderAnnotation() {
+        const annotation = this.annotation, viewport = this.viewport, rect = annotation.rect, boundingRect = [
+            [rect[0], rect[1]],
+            [rect[2], rect[3]]
+        ], rawHeight = viewport.rawDims.pageHeight;
+        const left = Math.min(boundingRect[0][0], boundingRect[1][0]) * this.zoom, top = (rawHeight - Math.max(boundingRect[0][1], boundingRect[1][1])) * this.zoom, width = (boundingRect[1][0] - boundingRect[0][0]) * this.zoom, height = (boundingRect[1][1] - boundingRect[0][1]) * this.zoom;
+        const url = annotation.url || (annotation.dest && `#${encodeURI(annotation.dest)}`);
+        const annotationElement = (0, utils_1.createElement)('span', '', {
+            position: 'absolute',
+            left: left + 'pt',
+            top: top + 'pt'
+        });
+        const linkElement = this.linkElement = (0, utils_1.createElement)('a', '', {
+            width: width + 'pt',
+            height: height + 'pt',
+            display: 'inline-block',
+            pointerEvents: 'auto'
+        });
+        linkElement.setAttribute('href', url);
+        annotationElement.append(linkElement);
+        this.container.append(annotationElement);
+    }
+}
+exports.LinkAnnotation = LinkAnnotation;

package/dist/npm/utils.d.ts

@@ -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,10 +42,11 @@ 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
@@ -72,6 +75,9 @@ 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 renderPage: (page: PDFPageProxy, emptyPage: any, error: ErrorFn) => any;
 /**
  * @hidden

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.currentPage = exports.scrollToPage = exports.calculateZoomLevel = exports.goToPreviousSearchMatch = exports.goToNextSearchMatch = exports.renderPage = exports.createElement = exports.print = exports.reloadDocument = exports.loadPDF = exports.download = exports.removeChildren = 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;
@@ -88,7 +89,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 +101,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 +141,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 +155,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) {
@@ -219,13 +220,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,6 +256,7 @@ const createElement = function (name, className, styles) {
     Object.keys(styles).forEach((key) => (element.style[key] = styles[key]));
     return element;
 };
+exports.createElement = createElement;
 const transforms = {
     '0': '',
     '90': 'rotate(90deg) translateY(-100%)',
@@ -258,12 +264,12 @@ const transforms = {
     '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,
@@ -281,9 +287,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;
@@ -449,8 +478,8 @@ const createCanvas = (page, zoom = 1, cssClass = '') => {
         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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-pdfviewer-common",
   "description": "Kendo UI TypeScript package exporting functions for PDFViewer component",
-  "version": "0.3.0-dev.202409251137",
+  "version": "0.3.0-dev.202409251459",
   "keywords": [
     "Kendo UI"
   ],