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

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

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

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 { 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;
@@ -23,8 +24,8 @@ const isFirefox = (userAgent) => {
  * @hidden
  */
 export const DEFAULT_ZOOM_LEVEL = 1.25;
-const scale = () => (isIOS() ? devicePixelRatio : devicePixelRatio * 3);
-const parsePdfFromBase64String = (base64String) => {
+export const scale = () => (isIOS() ? devicePixelRatio : devicePixelRatio * 3);
+export const parsePdfFromBase64String = (base64String) => {
     return atob(base64String.replace(/^(data:application\/pdf;base64,)/gi, ''));
 };
 const getDocumentParameters = (options) => {
@@ -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;
@@ -243,14 +248,14 @@ const createElement = function (name, className, styles) {
     Object.keys(styles).forEach((key) => (element.style[key] = styles[key]));
     return element;
 };
-const transforms = {
+export const transforms = {
     '0': '',
     '90': 'rotate(90deg) translateY(-100%)',
     '180': 'rotate(180deg) translate(-100%, -100%)',
     '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;
@@ -389,7 +417,7 @@ export const currentPage = (rootElement) => {
  * if initial size after scaling is greater than browser limits,
  * we are limiting it to the limits, then halving it for performance.
  */
-const adjustCanvasSize = (targetWidth, targetHeight) => {
+export const adjustCanvasSize = (targetWidth, targetHeight) => {
     const { maxWidth, maxHeight, maxArea } = isFirefox(navigator.userAgent) ?
         { maxWidth: MAX_CANVAS_WIDTH_HEIGHT_FIREFOX, maxHeight: MAX_CANVAS_WIDTH_HEIGHT_FIREFOX, maxArea: MAX_CANVAS_AREA_FIREFOX } :
         isSafari(navigator.userAgent) ?