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

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

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

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

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

package/dist/npm/utils.d.ts

@@ -1,6 +1,6 @@
 import { SaveOptions } from '@progress/kendo-file-saver';
-import { PDFPageProxy, PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
-import { TypedArray } from 'pdfjs-dist/types/src/display/api';
+import { PDFPageProxy, PDFDocumentProxy } from "pdfjs-dist/legacy/build/pdf.mjs";
+import { TypedArray } from "pdfjs-dist/types/src/display/api";
 /**
  * @hidden
  */
@@ -52,6 +52,8 @@ export interface PDFReloadParameters {
  * @hidden
  */
 export declare const DEFAULT_ZOOM_LEVEL = 1.25;
+export declare const scale: () => number;
+export declare const parsePdfFromBase64String: (base64String: string) => string;
 /**
  * @hidden
  */
@@ -78,6 +80,9 @@ export declare const print: (pages: PDFPageProxy[], done: () => void, error: Err
 export declare const createElement: <T>(name: string, className: string, styles: {
     [key: string]: string;
 }) => T;
+export declare const transforms: {
+    [rotation: string]: string;
+};
 export declare const renderPage: (page: PDFPageProxy, emptyPage: any, error: ErrorFn) => any;
 /**
  * @hidden
@@ -105,3 +110,16 @@ export declare const scrollToPage: (rootElement: HTMLElement, pageNumber: number
  * @returns The page number.
  */
 export declare const currentPage: (rootElement: HTMLElement) => number;
+/**
+ * @hidden
+ *
+ * related to https://github.com/telerik/kendo-pdfviewer-common/issues/6
+ * the bigger the canvas size, the worse the performance;
+ * if initial size after scaling is greater than browser limits,
+ * we are limiting it to the limits, then halving it for performance.
+ */
+export declare const adjustCanvasSize: (targetWidth: number, targetHeight: number) => {
+    adjustedWidth: number;
+    adjustedHeight: number;
+    adjustRatio: number;
+};

package/dist/npm/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.adjustCanvasSize = exports.currentPage = exports.scrollToPage = exports.calculateZoomLevel = exports.goToPreviousSearchMatch = exports.goToNextSearchMatch = exports.renderPage = exports.transforms = exports.createElement = exports.print = exports.reloadDocument = exports.loadPDF = exports.download = exports.removeChildren = exports.parsePdfFromBase64String = exports.scale = exports.DEFAULT_ZOOM_LEVEL = void 0;
 const kendo_file_saver_1 = require("@progress/kendo-file-saver");
 const kendo_common_1 = require("@progress/kendo-common");
 const pdf_mjs_1 = require("pdfjs-dist/legacy/build/pdf.mjs");
@@ -28,16 +28,18 @@ const isFirefox = (userAgent) => {
  */
 exports.DEFAULT_ZOOM_LEVEL = 1.25;
 const scale = () => (isIOS() ? devicePixelRatio : devicePixelRatio * 3);
+exports.scale = scale;
 const parsePdfFromBase64String = (base64String) => {
     return atob(base64String.replace(/^(data:application\/pdf;base64,)/gi, ''));
 };
+exports.parsePdfFromBase64String = parsePdfFromBase64String;
 const getDocumentParameters = (options) => {
     let params = {
         verbosity: 0,
         isEvalSupported: false
     };
     if (typeof options.data === 'string') {
-        params.data = parsePdfFromBase64String(options.data);
+        params.data = (0, exports.parsePdfFromBase64String)(options.data);
     }
     else if (typeof options.url === 'string') {
         params.url = options.url;
@@ -183,7 +185,7 @@ exports.reloadDocument = reloadDocument;
 const print = (pages, done, error) => {
     const dom = document.createElement('div');
     const allDone = pages.map(() => false);
-    const scaleNum = scale();
+    const scaleNum = (0, exports.scale)();
     pages.forEach((page, index) => {
         const viewport = renderCanvas(page, (el) => {
             dom.appendChild(el);
@@ -257,7 +259,7 @@ const createElement = function (name, className, styles) {
     return element;
 };
 exports.createElement = createElement;
-const transforms = {
+exports.transforms = {
     '0': '',
     '90': 'rotate(90deg) translateY(-100%)',
     '180': 'rotate(180deg) translate(-100%, -100%)',
@@ -278,8 +280,8 @@ const renderPage = (page, emptyPage, error) => {
                 textLayer.style.width = textLayer.style.width.replace(/px/g, 'pt');
                 textLayer.style.height = textLayer.style.height.replace(/px/g, 'pt');
                 const rotation = textLayer.getAttribute('data-main-rotation') || '0';
-                if (transforms[rotation]) {
-                    textLayer.style.transform = transforms[rotation];
+                if (exports.transforms[rotation]) {
+                    textLayer.style.transform = exports.transforms[rotation];
                     textLayer.style.transformOrigin = 'top left';
                 }
                 textLayer.querySelectorAll('span').forEach((el) => {
@@ -470,10 +472,11 @@ const adjustCanvasSize = (targetWidth, targetHeight) => {
         adjustRatio: adjustRatio !== 1 ? adjustRatio / 2 : 1
     };
 };
+exports.adjustCanvasSize = adjustCanvasSize;
 const createCanvas = (page, zoom = 1, cssClass = '') => {
-    const scaleNum = scale();
+    const scaleNum = (0, exports.scale)();
     const viewport = page.getViewport({ scale: scaleNum });
-    const { adjustedWidth, adjustedHeight, adjustRatio } = adjustCanvasSize(viewport.width, viewport.height);
+    const { adjustedWidth, adjustedHeight, adjustRatio } = (0, exports.adjustCanvasSize)(viewport.width, viewport.height);
     const styles = {
         width: Math.floor(viewport.width / scaleNum) * zoom + 'pt',
         height: Math.floor(viewport.height / scaleNum) * zoom + 'pt'

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

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