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

package/dist/es2015/scroller.js

@@ -1,6 +1,7 @@
 import Draggable from '@progress/kendo-draggable';
-import { renderPage, currentPage } from './utils';
-const throttle = function (func, wait, options = {}) {
+import { Component } from './common/component';
+import { noop } from './common/core';
+export const throttle = function (func, wait, options = {}) {
     let timeout, context, args, result;
     let previous = 0;
     const later = function () {
@@ -52,15 +53,16 @@ const matchesElementSelector = (element, selector) => {
     return element.closest(selector);
 };
 const FRAMES_PER_SECOND = 1000 / 60;
-const SCROLL = 'scroll';
+const SCROLL = "scroll";
 /**
  * @hidden
  */
-export class Scroller {
+export class Scroller extends Component {
     constructor(element, options) {
+        super(element, options);
         this.options = {
             events: {
-                [SCROLL]: () => undefined
+                [SCROLL]: noop,
             },
             filter: '',
             // throttle the scroll events to get a more similar experience
@@ -70,10 +72,13 @@ export class Scroller {
             // the drag directions are actually reversed, e.g.
             // dragging to the right actually moves the document to the left
             scrollDirectionModifier: -1,
-            scrollThrottleDelay: FRAMES_PER_SECOND
+            scrollThrottleDelay: FRAMES_PER_SECOND,
         };
-        this.onElementScroll = () => {
+        this.onElementScroll = (e) => {
             const element = this.element;
+            if (!this.shouldTrackScrollEvents()) {
+                return;
+            }
             if (this.state.trackNextElementScroll) {
                 this.scrollTo(element.scrollLeft, element.scrollTop);
             }
@@ -81,21 +86,9 @@ export class Scroller {
                 // reset the state, so that consecutive scroll events can be handled
                 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.trigger(SCROLL, {
+                originalEvent: e
+            });
         };
         this.onDragStart = (e) => {
             this.state.dragStarted = false;
@@ -143,8 +136,7 @@ export class Scroller {
                 return;
             }
         };
-        this.element = element;
-        this.options = Object.assign({}, this.options, options);
+        this.extendOptions(options);
         this.resetState();
         this.bindEvents();
     }
@@ -191,9 +183,6 @@ 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();
@@ -208,9 +197,6 @@ 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) {
@@ -219,6 +205,7 @@ export class Scroller {
     resetState() {
         this.setState({
             trackPanEvents: false,
+            trackScrollEvents: false,
             trackNextElementScroll: false,
             location: { pageX: 0, pageY: 0 },
             locationDelta: { x: 0, y: 0 }
@@ -235,6 +222,18 @@ export class Scroller {
     shouldTrackPanEvents() {
         return this.state.trackPanEvents;
     }
+    enableScrollEventsTracking() {
+        this.state.trackScrollEvents = true;
+        this.unbindElementScroll();
+        this.bindElementScroll();
+    }
+    disableScrollEventsTracking() {
+        this.unbindElementScroll();
+        this.state.trackScrollEvents = false;
+    }
+    shouldTrackScrollEvents() {
+        return this.state.trackScrollEvents;
+    }
     calculateEventLocationDelta(e) {
         this.state.locationDelta = {
             x: e.pageX - this.state.location.pageX,

package/dist/es2015/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/es2015/utils.js

@@ -1,6 +1,6 @@
 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;
@@ -24,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) => {
@@ -248,7 +248,7 @@ export 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%)',
@@ -417,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) ?