@progress/kendo-pdfviewer-common 0.2.11 → 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/scroller.js

@@ -1,4 +1,5 @@
 import Draggable from '@progress/kendo-draggable';
+import { renderPage, currentPage } from './utils';
 const throttle = function (func, wait, options = {}) {
     let timeout, context, args, result;
     let previous = 0;
@@ -81,6 +82,21 @@ export class Scroller {
                 this.state.trackNextElementScroll = true;
             }
         };
+        this.onDemandScroll = () => {
+            const pages = this.options.pages, currentPageIndex = currentPage(this.element.parentElement), page = pages[currentPageIndex], nextPage = pages[currentPageIndex + 1], previousPage = pages[currentPageIndex - 1], pageInfo = page === null || page === void 0 ? void 0 : page._pageInfo, nextPageInfo = nextPage === null || nextPage === void 0 ? void 0 : nextPage._pageInfo, previousPageInfo = previousPage === null || previousPage === void 0 ? void 0 : previousPage._pageInfo, error = (e) => {
+                throw new Error(e);
+            };
+            // Render the current and surrounding pages if they have not been rendered already.
+            if (page && !pageInfo.rendered && !pageInfo.renderInProgress) {
+                renderPage(page, pageInfo.emptyPage, error);
+            }
+            if (nextPage && !nextPageInfo.rendered && !nextPageInfo.renderInProgress) {
+                renderPage(nextPage, nextPageInfo.emptyPage, error);
+            }
+            if (previousPage && !previousPageInfo.rendered && !previousPageInfo.renderInProgress) {
+                renderPage(previousPage, previousPageInfo.emptyPage, error);
+            }
+        };
         this.onDragStart = (e) => {
             this.state.dragStarted = false;
             if (!this.shouldTrackPanEvents()) {
@@ -175,6 +191,9 @@ export class Scroller {
             this.throttledOnElementScroll = this.onElementScroll;
         }
         this.element.addEventListener(SCROLL, this.throttledOnElementScroll);
+        if (this.options.loadOnDemand) {
+            this.element.addEventListener(SCROLL, this.onDemandScroll);
+        }
     }
     unbindEvents() {
         this.unbindElementScroll();
@@ -189,6 +208,9 @@ export class Scroller {
             this.throttledOnElementScroll.cancel();
             this.throttledOnElementScroll = null;
         }
+        if (this.options.loadOnDemand) {
+            this.element.removeEventListener(SCROLL, this.onDemandScroll);
+        }
         this.element.removeEventListener(SCROLL, this.throttledOnElementScroll);
     }
     setState(newState) {

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,8 @@ 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) => {
         const pages = [];
@@ -94,7 +96,18 @@ export const loadPDF = (options) => {
     }).then(({ pages, pdfDoc }) => {
         Promise.all(pages)
             .then((all) => all.map((page, i) => {
-            appendPage(dom, renderPage(page, zoom, error), i);
+            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.
+                if (i < loadOnDemandPageSize) {
+                    renderPage(page, emptyPage, error);
+                }
+            }
+            else {
+                renderPage(page, emptyPage, error);
+            }
+            page._pageInfo.emptyPage = emptyPage;
             return page;
         })).then((pdfPages) => {
             // required by new PDFJS version
@@ -122,17 +135,39 @@ export const loadPDF = (options) => {
  * @hidden
  */
 export const reloadDocument = (params) => {
-    const { pdfDoc, zoom, dom, done, error } = 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.
+    if (loadOnDemand && rootElement) {
+        currentPageIndex = currentPage(rootElement);
+    }
     for (let i = 1; i <= pdfDoc.numPages; i++) {
         pages.push(pdfDoc.getPage(i));
     }
     Promise.all(pages)
         .then((all) => all.map((page, i) => {
-        appendPage(dom, renderPage(page, zoom, error), 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, pdfDoc, enableAnnotations, rootElement);
+        appendPage(dom, emptyPage.pageElement, i);
+        // If on demand is not enabled, proceed as usual.
+        if (!loadOnDemand) {
+            renderPage(page, emptyPage, error);
+        }
+        page._pageInfo.emptyPage = emptyPage;
         return page;
     }))
-        .then(done)
+        .then((pdfPages) => {
+        /* If on demand is enabled, render the page that was previously in view.
+           Then scroll to that page. */
+        if (loadOnDemand) {
+            const page = pdfPages[currentPageIndex];
+            renderPage(page, page._pageInfo.emptyPage, error);
+            scrollToPage(rootElement, currentPageIndex);
+        }
+        done(pdfPages);
+    })
         .catch(error);
 };
 /**
@@ -177,6 +212,19 @@ const openPrintDialog = (dom, width, height, done, onError) => {
         printDialog.addEventListener('afterprint', onAfterPrint);
     }
 };
+const createEmptyPage = (page, zoom, pdfDoc, enableAnnotations, rootElement) => {
+    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
+    return {
+        canvasContext,
+        viewport,
+        pageElement,
+        styles,
+        zoom,
+        pdfDoc,
+        enableAnnotations,
+        rootElement
+    };
+};
 const renderCanvas = (page, done, error) => {
     const { canvasContext, viewport, scaleNum, canvas, pageElement } = createCanvas(page);
     page.render({ canvasContext, viewport })
@@ -192,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;
@@ -206,8 +254,9 @@ const transforms = {
     '180': 'rotate(180deg) translate(-100%, -100%)',
     '270': 'rotate(270deg) translateX(-100%)'
 };
-const renderPage = (page, zoom, error) => {
-    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
+export const renderPage = (page, emptyPage, error) => {
+    const { canvasContext, viewport, pageElement, styles, zoom, pdfDoc, enableAnnotations, rootElement } = emptyPage;
+    page._pageInfo.renderInProgress = true;
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         page.getTextContent().then((textContent) => {
@@ -229,9 +278,36 @@ const renderPage = (page, zoom, 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;
+        page._pageInfo.renderInProgress = false;
     })
         .catch(error);
     return pageElement;

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/scroller.js

@@ -1,4 +1,5 @@
 import Draggable from '@progress/kendo-draggable';
+import { renderPage, currentPage } from './utils';
 const throttle = function (func, wait, options = {}) {
     let timeout, context, args, result;
     let previous = 0;
@@ -81,6 +82,21 @@ export class Scroller {
                 this.state.trackNextElementScroll = true;
             }
         };
+        this.onDemandScroll = () => {
+            const pages = this.options.pages, currentPageIndex = currentPage(this.element.parentElement), page = pages[currentPageIndex], nextPage = pages[currentPageIndex + 1], previousPage = pages[currentPageIndex - 1], pageInfo = page === null || page === void 0 ? void 0 : page._pageInfo, nextPageInfo = nextPage === null || nextPage === void 0 ? void 0 : nextPage._pageInfo, previousPageInfo = previousPage === null || previousPage === void 0 ? void 0 : previousPage._pageInfo, error = (e) => {
+                throw new Error(e);
+            };
+            // Render the current and surrounding pages if they have not been rendered already.
+            if (page && !pageInfo.rendered && !pageInfo.renderInProgress) {
+                renderPage(page, pageInfo.emptyPage, error);
+            }
+            if (nextPage && !nextPageInfo.rendered && !nextPageInfo.renderInProgress) {
+                renderPage(nextPage, nextPageInfo.emptyPage, error);
+            }
+            if (previousPage && !previousPageInfo.rendered && !previousPageInfo.renderInProgress) {
+                renderPage(previousPage, previousPageInfo.emptyPage, error);
+            }
+        };
         this.onDragStart = (e) => {
             this.state.dragStarted = false;
             if (!this.shouldTrackPanEvents()) {
@@ -175,6 +191,9 @@ export class Scroller {
             this.throttledOnElementScroll = this.onElementScroll;
         }
         this.element.addEventListener(SCROLL, this.throttledOnElementScroll);
+        if (this.options.loadOnDemand) {
+            this.element.addEventListener(SCROLL, this.onDemandScroll);
+        }
     }
     unbindEvents() {
         this.unbindElementScroll();
@@ -189,6 +208,9 @@ export class Scroller {
             this.throttledOnElementScroll.cancel();
             this.throttledOnElementScroll = null;
         }
+        if (this.options.loadOnDemand) {
+            this.element.removeEventListener(SCROLL, this.onDemandScroll);
+        }
         this.element.removeEventListener(SCROLL, this.throttledOnElementScroll);
     }
     setState(newState) {

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,8 @@ 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) => {
         const pages = [];
@@ -94,7 +96,18 @@ export const loadPDF = (options) => {
     }).then(({ pages, pdfDoc }) => {
         Promise.all(pages)
             .then((all) => all.map((page, i) => {
-            appendPage(dom, renderPage(page, zoom, error), i);
+            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.
+                if (i < loadOnDemandPageSize) {
+                    renderPage(page, emptyPage, error);
+                }
+            }
+            else {
+                renderPage(page, emptyPage, error);
+            }
+            page._pageInfo.emptyPage = emptyPage;
             return page;
         })).then((pdfPages) => {
             // required by new PDFJS version
@@ -122,17 +135,39 @@ export const loadPDF = (options) => {
  * @hidden
  */
 export const reloadDocument = (params) => {
-    const { pdfDoc, zoom, dom, done, error } = 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.
+    if (loadOnDemand && rootElement) {
+        currentPageIndex = currentPage(rootElement);
+    }
     for (let i = 1; i <= pdfDoc.numPages; i++) {
         pages.push(pdfDoc.getPage(i));
     }
     Promise.all(pages)
         .then((all) => all.map((page, i) => {
-        appendPage(dom, renderPage(page, zoom, error), 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, pdfDoc, enableAnnotations, rootElement);
+        appendPage(dom, emptyPage.pageElement, i);
+        // If on demand is not enabled, proceed as usual.
+        if (!loadOnDemand) {
+            renderPage(page, emptyPage, error);
+        }
+        page._pageInfo.emptyPage = emptyPage;
         return page;
     }))
-        .then(done)
+        .then((pdfPages) => {
+        /* If on demand is enabled, render the page that was previously in view.
+           Then scroll to that page. */
+        if (loadOnDemand) {
+            const page = pdfPages[currentPageIndex];
+            renderPage(page, page._pageInfo.emptyPage, error);
+            scrollToPage(rootElement, currentPageIndex);
+        }
+        done(pdfPages);
+    })
         .catch(error);
 };
 /**
@@ -177,6 +212,19 @@ const openPrintDialog = (dom, width, height, done, onError) => {
         printDialog.addEventListener('afterprint', onAfterPrint);
     }
 };
+const createEmptyPage = (page, zoom, pdfDoc, enableAnnotations, rootElement) => {
+    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
+    return {
+        canvasContext,
+        viewport,
+        pageElement,
+        styles,
+        zoom,
+        pdfDoc,
+        enableAnnotations,
+        rootElement
+    };
+};
 const renderCanvas = (page, done, error) => {
     const { canvasContext, viewport, scaleNum, canvas, pageElement } = createCanvas(page);
     page.render({ canvasContext, viewport })
@@ -192,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;
@@ -206,8 +254,9 @@ const transforms = {
     '180': 'rotate(180deg) translate(-100%, -100%)',
     '270': 'rotate(270deg) translateX(-100%)'
 };
-const renderPage = (page, zoom, error) => {
-    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
+export const renderPage = (page, emptyPage, error) => {
+    const { canvasContext, viewport, pageElement, styles, zoom, pdfDoc, enableAnnotations, rootElement } = emptyPage;
+    page._pageInfo.renderInProgress = true;
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         page.getTextContent().then((textContent) => {
@@ -229,9 +278,36 @@ const renderPage = (page, zoom, 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;
+        page._pageInfo.renderInProgress = false;
     })
         .catch(error);
     return pageElement;

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/scroller.d.ts

@@ -24,6 +24,7 @@ export declare class Scroller {
     disablePanEventsTracking(): void;
     shouldTrackPanEvents(): boolean;
     onElementScroll: () => void;
+    onDemandScroll: () => void;
     onDragStart: (e: any) => void;
     onDrag: (e: any) => void;
     onDragEnd: () => void;

package/dist/npm/scroller.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Scroller = void 0;
 const kendo_draggable_1 = require("@progress/kendo-draggable");
+const utils_1 = require("./utils");
 const throttle = function (func, wait, options = {}) {
     let timeout, context, args, result;
     let previous = 0;
@@ -84,6 +85,21 @@ class Scroller {
                 this.state.trackNextElementScroll = true;
             }
         };
+        this.onDemandScroll = () => {
+            const pages = this.options.pages, currentPageIndex = (0, utils_1.currentPage)(this.element.parentElement), page = pages[currentPageIndex], nextPage = pages[currentPageIndex + 1], previousPage = pages[currentPageIndex - 1], pageInfo = page === null || page === void 0 ? void 0 : page._pageInfo, nextPageInfo = nextPage === null || nextPage === void 0 ? void 0 : nextPage._pageInfo, previousPageInfo = previousPage === null || previousPage === void 0 ? void 0 : previousPage._pageInfo, error = (e) => {
+                throw new Error(e);
+            };
+            // Render the current and surrounding pages if they have not been rendered already.
+            if (page && !pageInfo.rendered && !pageInfo.renderInProgress) {
+                (0, utils_1.renderPage)(page, pageInfo.emptyPage, error);
+            }
+            if (nextPage && !nextPageInfo.rendered && !nextPageInfo.renderInProgress) {
+                (0, utils_1.renderPage)(nextPage, nextPageInfo.emptyPage, error);
+            }
+            if (previousPage && !previousPageInfo.rendered && !previousPageInfo.renderInProgress) {
+                (0, utils_1.renderPage)(previousPage, previousPageInfo.emptyPage, error);
+            }
+        };
         this.onDragStart = (e) => {
             this.state.dragStarted = false;
             if (!this.shouldTrackPanEvents()) {
@@ -178,6 +194,9 @@ class Scroller {
             this.throttledOnElementScroll = this.onElementScroll;
         }
         this.element.addEventListener(SCROLL, this.throttledOnElementScroll);
+        if (this.options.loadOnDemand) {
+            this.element.addEventListener(SCROLL, this.onDemandScroll);
+        }
     }
     unbindEvents() {
         this.unbindElementScroll();
@@ -192,6 +211,9 @@ class Scroller {
             this.throttledOnElementScroll.cancel();
             this.throttledOnElementScroll = null;
         }
+        if (this.options.loadOnDemand) {
+            this.element.removeEventListener(SCROLL, this.onDemandScroll);
+        }
         this.element.removeEventListener(SCROLL, this.throttledOnElementScroll);
     }
     setState(newState) {

package/dist/npm/utils.d.ts

@@ -21,14 +21,18 @@ export interface PDFReadParameters {
     data?: string;
     arrayBuffer?: ArrayBuffer;
     typedArray?: TypedArray;
+    loadOnDemand?: boolean;
+    loadOnDemandPageSize?: number;
     error: ErrorFn;
 }
 /**
  * @hidden
  */
 export interface PDFReadOptions extends PDFReadParameters {
+    rootElement?: HTMLElement | null;
     dom: HTMLDivElement;
     zoom: number;
+    enableAnnotations: boolean;
     done: DoneFn;
 }
 /**
@@ -38,8 +42,11 @@ export interface PDFReloadParameters {
     pdfDoc: PDFDocumentProxy;
     zoom: number;
     dom: HTMLElement;
+    rootElement?: HTMLElement | null;
+    loadOnDemand?: boolean;
     done: (pdfPages: PDFPageProxy[]) => void;
     error: ErrorFn;
+    enableAnnotations: boolean;
 }
 /**
  * @hidden
@@ -68,6 +75,10 @@ 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.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,8 @@ 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) => {
         const pages = [];
@@ -99,7 +101,18 @@ const loadPDF = (options) => {
     }).then(({ pages, pdfDoc }) => {
         Promise.all(pages)
             .then((all) => all.map((page, i) => {
-            appendPage(dom, renderPage(page, zoom, error), i);
+            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.
+                if (i < loadOnDemandPageSize) {
+                    (0, exports.renderPage)(page, emptyPage, error);
+                }
+            }
+            else {
+                (0, exports.renderPage)(page, emptyPage, error);
+            }
+            page._pageInfo.emptyPage = emptyPage;
             return page;
         })).then((pdfPages) => {
             // required by new PDFJS version
@@ -128,17 +141,39 @@ exports.loadPDF = loadPDF;
  * @hidden
  */
 const reloadDocument = (params) => {
-    const { pdfDoc, zoom, dom, done, error } = 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.
+    if (loadOnDemand && rootElement) {
+        currentPageIndex = (0, exports.currentPage)(rootElement);
+    }
     for (let i = 1; i <= pdfDoc.numPages; i++) {
         pages.push(pdfDoc.getPage(i));
     }
     Promise.all(pages)
         .then((all) => all.map((page, i) => {
-        appendPage(dom, renderPage(page, zoom, error), 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, pdfDoc, enableAnnotations, rootElement);
+        appendPage(dom, emptyPage.pageElement, i);
+        // If on demand is not enabled, proceed as usual.
+        if (!loadOnDemand) {
+            (0, exports.renderPage)(page, emptyPage, error);
+        }
+        page._pageInfo.emptyPage = emptyPage;
         return page;
     }))
-        .then(done)
+        .then((pdfPages) => {
+        /* If on demand is enabled, render the page that was previously in view.
+           Then scroll to that page. */
+        if (loadOnDemand) {
+            const page = pdfPages[currentPageIndex];
+            (0, exports.renderPage)(page, page._pageInfo.emptyPage, error);
+            (0, exports.scrollToPage)(rootElement, currentPageIndex);
+        }
+        done(pdfPages);
+    })
         .catch(error);
 };
 exports.reloadDocument = reloadDocument;
@@ -185,6 +220,19 @@ const openPrintDialog = (dom, width, height, done, onError) => {
         printDialog.addEventListener('afterprint', onAfterPrint);
     }
 };
+const createEmptyPage = (page, zoom, pdfDoc, enableAnnotations, rootElement) => {
+    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
+    return {
+        canvasContext,
+        viewport,
+        pageElement,
+        styles,
+        zoom,
+        pdfDoc,
+        enableAnnotations,
+        rootElement
+    };
+};
 const renderCanvas = (page, done, error) => {
     const { canvasContext, viewport, scaleNum, canvas, pageElement } = createCanvas(page);
     page.render({ canvasContext, viewport })
@@ -208,18 +256,20 @@ 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%)',
     '180': 'rotate(180deg) translate(-100%, -100%)',
     '270': 'rotate(270deg) translateX(-100%)'
 };
-const renderPage = (page, zoom, error) => {
-    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
+const renderPage = (page, emptyPage, error) => {
+    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,
@@ -237,13 +287,41 @@ const renderPage = (page, zoom, 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;
+        page._pageInfo.renderInProgress = false;
     })
         .catch(error);
     return pageElement;
 };
+exports.renderPage = renderPage;
 const searchMatchScrollLeftOffset = 0;
 const searchMatchScrollTopOffset = -64;
 const scrollToSearchMatch = (matchElement, ref) => {
@@ -400,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.2.11",
+  "version": "0.3.0-dev.202409251459",
   "keywords": [
     "Kendo UI"
   ],