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

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

@@ -84,6 +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 loadOnDemandPageSize = options.loadOnDemandPageSize || 2;
     getDocument(params)
         .promise.then((pdfDoc) => {
         const pages = [];
@@ -94,7 +95,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);
+            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 +134,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 } = 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);
+        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 +211,15 @@ const openPrintDialog = (dom, width, height, done, onError) => {
         printDialog.addEventListener('afterprint', onAfterPrint);
     }
 };
+const createEmptyPage = (page, zoom) => {
+    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
+    return {
+        canvasContext,
+        viewport,
+        pageElement,
+        styles
+    };
+};
 const renderCanvas = (page, done, error) => {
     const { canvasContext, viewport, scaleNum, canvas, pageElement } = createCanvas(page);
     page.render({ canvasContext, viewport })
@@ -206,8 +249,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 } = emptyPage;
+    page._pageInfo.renderInProgress = true;
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         page.getTextContent().then((textContent) => {
@@ -232,6 +276,10 @@ const renderPage = (page, zoom, error) => {
                 pageElement.appendChild(textLayer);
             }).catch(error);
         });
+    })
+        .then(() => {
+        page._pageInfo.rendered = true;
+        page._pageInfo.renderInProgress = false;
     })
         .catch(error);
     return pageElement;

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

@@ -84,6 +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 loadOnDemandPageSize = options.loadOnDemandPageSize || 2;
     getDocument(params)
         .promise.then((pdfDoc) => {
         const pages = [];
@@ -94,7 +95,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);
+            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 +134,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 } = 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);
+        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 +211,15 @@ const openPrintDialog = (dom, width, height, done, onError) => {
         printDialog.addEventListener('afterprint', onAfterPrint);
     }
 };
+const createEmptyPage = (page, zoom) => {
+    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
+    return {
+        canvasContext,
+        viewport,
+        pageElement,
+        styles
+    };
+};
 const renderCanvas = (page, done, error) => {
     const { canvasContext, viewport, scaleNum, canvas, pageElement } = createCanvas(page);
     page.render({ canvasContext, viewport })
@@ -206,8 +249,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 } = emptyPage;
+    page._pageInfo.renderInProgress = true;
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         page.getTextContent().then((textContent) => {
@@ -232,6 +276,10 @@ const renderPage = (page, zoom, error) => {
                 pageElement.appendChild(textLayer);
             }).catch(error);
         });
+    })
+        .then(() => {
+        page._pageInfo.rendered = true;
+        page._pageInfo.renderInProgress = false;
     })
         .catch(error);
     return pageElement;

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,6 +21,8 @@ export interface PDFReadParameters {
     data?: string;
     arrayBuffer?: ArrayBuffer;
     typedArray?: TypedArray;
+    loadOnDemand?: boolean;
+    loadOnDemandPageSize?: number;
     error: ErrorFn;
 }
 /**
@@ -38,6 +40,8 @@ export interface PDFReloadParameters {
     pdfDoc: PDFDocumentProxy;
     zoom: number;
     dom: HTMLElement;
+    rootElement?: HTMLElement;
+    loadOnDemand?: boolean;
     done: (pdfPages: PDFPageProxy[]) => void;
     error: ErrorFn;
 }
@@ -68,6 +72,7 @@ export declare const reloadDocument: (params: PDFReloadParameters) => void;
  * @hidden
  */
 export declare const print: (pages: PDFPageProxy[], done: () => void, error: ErrorFn) => void;
+export declare const renderPage: (page: PDFPageProxy, emptyPage: any, error: ErrorFn) => any;
 /**
  * @hidden
  */

package/dist/npm/utils.js

@@ -1,6 +1,6 @@
 "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.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");
@@ -89,6 +89,7 @@ exports.download = download;
 const loadPDF = (options) => {
     const params = getDocumentParameters(options);
     const { dom, zoom, done, error } = options;
+    const loadOnDemandPageSize = options.loadOnDemandPageSize || 2;
     (0, pdf_mjs_1.getDocument)(params)
         .promise.then((pdfDoc) => {
         const pages = [];
@@ -99,7 +100,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);
+            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 +140,39 @@ exports.loadPDF = loadPDF;
  * @hidden
  */
 const reloadDocument = (params) => {
-    const { pdfDoc, zoom, dom, done, error } = params;
+    const { pdfDoc, zoom, dom, done, error, loadOnDemand, rootElement } = 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);
+        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 +219,15 @@ const openPrintDialog = (dom, width, height, done, onError) => {
         printDialog.addEventListener('afterprint', onAfterPrint);
     }
 };
+const createEmptyPage = (page, zoom) => {
+    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
+    return {
+        canvasContext,
+        viewport,
+        pageElement,
+        styles
+    };
+};
 const renderCanvas = (page, done, error) => {
     const { canvasContext, viewport, scaleNum, canvas, pageElement } = createCanvas(page);
     page.render({ canvasContext, viewport })
@@ -214,8 +257,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');
+const renderPage = (page, emptyPage, error) => {
+    const { canvasContext, viewport, pageElement, styles } = emptyPage;
+    page._pageInfo.renderInProgress = true;
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         page.getTextContent().then((textContent) => {
@@ -240,10 +284,15 @@ const renderPage = (page, zoom, error) => {
                 pageElement.appendChild(textLayer);
             }).catch(error);
         });
+    })
+        .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) => {

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.202409251137",
   "keywords": [
     "Kendo UI"
   ],