@progress/kendo-react-pdf-viewer 5.10.0-dev.202211241147

package/dist/npm/scroller.js

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scroller = void 0;
+const kendo_draggable_1 = require("@telerik/kendo-draggable");
+const throttle = function (func, wait, options = {}) {
+    let timeout, context, args, result;
+    let previous = 0;
+    options = options || {};
+    const later = function () {
+        previous = options.leading === false ? 0 : new Date().getTime();
+        timeout = undefined;
+        result = func.apply(context, args);
+        if (!timeout) {
+            context = args = null;
+        }
+    };
+    const throttled = function () {
+        const now = new Date().getTime();
+        if (!previous && options.leading === false) {
+            previous = now;
+        }
+        const remaining = wait - (now - previous);
+        context = undefined; // this
+        args = arguments;
+        if (remaining <= 0 || remaining > wait) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = undefined;
+            }
+            previous = now;
+            result = func.apply(context, args);
+            if (!timeout) {
+                context = args = null;
+            }
+        }
+        else if (!timeout && options.trailing !== false) {
+            timeout = window.setTimeout(later, remaining);
+        }
+        return result;
+    };
+    return throttled;
+};
+const preventDefault = (e) => {
+    if (e.preventDefault) {
+        e.preventDefault();
+    }
+    if (e.originalEvent) {
+        e.originalEvent.preventDefault();
+    }
+};
+const matchesElementSelector = (element, selector) => {
+    if (!element || !selector) {
+        return false;
+    }
+    return element.closest(selector);
+};
+const FRAMES_PER_SECOND = 1000 / 60;
+const SCROLL = 'scroll';
+/**
+ * @hidden
+ */
+class Scroller {
+    constructor(element, options) {
+        this.options = {
+            // the drag directions are actually reversed, e.g.
+            // dragging to the right actually moves the document to the left
+            scrollDirectionModifier: -1,
+            // throttle the scroll events to get a more similar experience
+            // to the scrolling behavior in Adobe Acrobat Reader
+            // as well as allow a way to improve the scrolling performance for large files
+            panScrollThrottleDelay: FRAMES_PER_SECOND,
+            scrollThrottleDelay: FRAMES_PER_SECOND,
+            filter: '',
+            events: {
+                [SCROLL]: () => { }
+            }
+        };
+        this.onElementScroll = () => {
+            const element = this.element;
+            if (this.state.trackNextElementScroll) {
+                this.scrollTo(element.scrollLeft, element.scrollTop);
+            }
+            else {
+                // reset the state, so that consecutive scroll events can be handled
+                this.state.trackNextElementScroll = true;
+            }
+        };
+        this.OnDragStart = (e) => {
+            this.state.dragStarted = false;
+            if (!this.shouldTrackPanEvents()) {
+                return;
+            }
+            const target = e.target || (e.originalEvent || {}).target;
+            if (this.options.filter && !matchesElementSelector(target, this.options.filter)) {
+                return;
+            }
+            preventDefault(e);
+            this.setState({
+                dragStarted: true,
+                location: {
+                    pageX: e.pageX,
+                    pageY: e.pageY
+                },
+                locationDelta: {
+                    x: 0,
+                    y: 0
+                }
+            });
+        };
+        this.onDrag = (e) => {
+            if (!this.shouldTrackPanEvents() || !this.state.dragStarted) {
+                return;
+            }
+            this.calculateEventLocationDelta(e);
+            this.setState({
+                location: {
+                    pageX: e.pageX,
+                    pageY: e.pageY
+                }
+            });
+            const directionModifier = this.options.scrollDirectionModifier;
+            const scrollLeft = this.element.scrollLeft + (directionModifier * this.state.locationDelta.x);
+            const scrollTop = this.element.scrollTop + (directionModifier * this.state.locationDelta.y);
+            this.scrollTo(scrollLeft, scrollTop);
+        };
+        this.onDragEnd = () => {
+            if (!this.shouldTrackPanEvents()) {
+                return;
+            }
+        };
+        this.element = element;
+        this.options = Object.assign({}, this.options, options);
+        this.resetState();
+        this.bindEvents();
+    }
+    destroy() {
+        this.unbindEvents();
+    }
+    initDraggable() {
+        this.destroyDraggable();
+        if (this.options.panScrollThrottleDelay > 0) {
+            this.throttledOnDrag = throttle(this.onDrag, this.options.panScrollThrottleDelay);
+        }
+        else {
+            this.throttledOnDrag = this.onDrag;
+        }
+        this.draggable = new kendo_draggable_1.default({
+            mouseOnly: false,
+            press: this.OnDragStart,
+            drag: this.throttledOnDrag,
+            release: this.onDragEnd
+        });
+        this.draggable.bindTo(this.element);
+    }
+    destroyDraggable() {
+        if (this.draggable && this.draggable.destroy) {
+            this.draggable.destroy();
+            if (this.throttledOnDrag && this.throttledOnDrag.cancel) {
+                this.throttledOnDrag.cancel();
+                this.throttledOnDrag = null;
+            }
+        }
+    }
+    bindEvents() {
+        this.bindDraggableEvents();
+        this.bindElementScroll();
+    }
+    bindDraggableEvents() {
+        this.initDraggable();
+    }
+    bindElementScroll() {
+        if (this.options.scrollThrottleDelay > 0) {
+            this.throttledOnElementScroll = throttle(this.onElementScroll, this.options.scrollThrottleDelay);
+        }
+        else {
+            this.throttledOnElementScroll = this.onElementScroll;
+        }
+        this.element.addEventListener(SCROLL, this.throttledOnElementScroll);
+    }
+    unbindEvents() {
+        this.unbindElementScroll();
+        this.unbindDraggableEvents();
+    }
+    unbindDraggableEvents() {
+        this.destroyDraggable();
+    }
+    unbindElementScroll() {
+        if (this.throttledOnElementScroll && this.throttledOnElementScroll.cancel) {
+            this.throttledOnElementScroll.cancel();
+            this.throttledOnElementScroll = null;
+        }
+        this.element.removeEventListener(SCROLL, this.throttledOnElementScroll);
+    }
+    setState(newState) {
+        this.state = Object.assign({}, this.state || {}, newState);
+    }
+    resetState() {
+        this.setState({
+            trackPanEvents: false,
+            trackNextElementScroll: false,
+            location: { pageX: 0, pageY: 0 },
+            locationDelta: { x: 0, y: 0 }
+        });
+    }
+    enablePanEventsTracking() {
+        this.state.trackPanEvents = true;
+        this.bindDraggableEvents();
+    }
+    disablePanEventsTracking() {
+        this.unbindDraggableEvents();
+        this.state.trackPanEvents = false;
+    }
+    shouldTrackPanEvents() {
+        return this.state.trackPanEvents;
+    }
+    calculateEventLocationDelta(e) {
+        this.state.locationDelta = {
+            x: e.pageX - this.state.location.pageX,
+            y: e.pageY - this.state.location.pageY
+        };
+    }
+    scrollTo(x, y, options = { trackScrollEvent: true }) {
+        if (!options.trackScrollEvent) {
+            this.state.trackNextElementScroll = false;
+        }
+        this.element.scrollLeft = x;
+        this.element.scrollTop = y;
+    }
+}
+exports.Scroller = Scroller;

package/dist/npm/search.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @hidden
+ */
+export declare class SearchService {
+    options: {
+        highlightClass: string;
+        highlightMarkClass: string;
+        charClass: string;
+        textContainers: never[];
+    };
+    state: any;
+    constructor(options: any);
+    destroy(): void;
+    extendOptions(options: any): void;
+    setState(newState: any): void;
+    resetState(): void;
+    search({ text, matchCase }: any): {
+        startOffset: number;
+        endOffset: number;
+    }[];
+    clearSearch(): void;
+    restoreOriginalText(): void;
+    shouldTransformText(): boolean;
+    transformTextForSearch(): void;
+    extractTextNodes(node: any): void;
+    transformTextNodesForSearch(textNodes: any): void;
+    transformTextNodeForSearch(node: any): void;
+    splitTextByChars(text: any): string;
+    forEachTextContainer(callback: any): void;
+    highlightAllMatches(): void;
+    addMatchHighlight(matchStartOffset: number, matchEndOffset: number, matchIndex: number): void;
+    removeMatchHighlights(): void;
+    addActiveMatchMark(): void;
+    removeActiveMatchMark(): void;
+    removeIndicators(): void;
+    markNextMatch(): void;
+    markPreviousMatch(): void;
+    markNextMatchIndex(): void;
+    markPreviousMatchIndex(): void;
+    moveActiveMatchIndex(delta: any): void;
+    getActiveMatchElement(): undefined;
+}

package/dist/npm/search.js

@@ -0,0 +1,253 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchService = void 0;
+const unwrapElement = (element) => {
+    const parentElement = element.parentElement;
+    if (!element || !parentElement) {
+        return;
+    }
+    parentElement.replaceWith(...Array.from(parentElement.childNodes));
+};
+const unwrapElements = (elements) => {
+    if (!elements || !elements.length || elements.length <= 0) {
+        return;
+    }
+    for (let i = 0; i < elements.length; i++) {
+        unwrapElement(elements[i]);
+    }
+};
+const wrapElement = (element, wrapper) => {
+    if (element.parentNode) {
+        element.parentNode.insertBefore(wrapper, element);
+        wrapper.appendChild(element);
+    }
+};
+const wrapInnerElement = (element, wrapper) => {
+    if (!element || !element.parentNode || !wrapper) {
+        return;
+    }
+    element.appendChild(wrapper);
+    while (element.firstChild && element.firstChild !== wrapper) {
+        wrapper.appendChild(element.firstChild);
+    }
+};
+const addClass = (className, element) => { element.classList.add(className); };
+const removeClass = (className, element) => { element.classList.remove(className); };
+const toClassSelector = (className) => `.${className}`;
+const CHAR_INDEX_DATA_ATTR = 'data-char-index';
+const MATCH_INDEX_DATA_ATTR = 'data-match-index';
+/**
+ * @hidden
+ */
+class SearchService {
+    constructor(options) {
+        this.options = {
+            highlightClass: 'k-search-highlight',
+            highlightMarkClass: 'k-search-highlight-mark',
+            charClass: 'k-text-char',
+            textContainers: []
+        };
+        this.extendOptions(options);
+        this.resetState();
+    }
+    destroy() {
+        this.clearSearch();
+    }
+    extendOptions(options) {
+        this.options = Object.assign({}, this.options, options);
+    }
+    setState(newState) {
+        this.state = Object.assign({}, this.state || {}, newState);
+    }
+    resetState() {
+        this.setState({
+            text: '',
+            textNodes: [],
+            charIndex: 0,
+            activeMatchIndex: 0,
+            matches: []
+        });
+    }
+    search({ text, matchCase }) {
+        let searchRegex = new RegExp(text, matchCase ? 'g' : 'ig');
+        let match;
+        if (this.shouldTransformText()) {
+            this.transformTextForSearch();
+        }
+        this.state.matches = [];
+        this.state.activeMatchIndex = 0;
+        this.removeIndicators();
+        if (text === '') {
+            return [];
+        }
+        match = searchRegex.exec(this.state.text);
+        while (match) {
+            this.state.matches.push({
+                startOffset: match.index,
+                endOffset: match.index + match[0].length
+            });
+            match = searchRegex.exec(this.state.text);
+        }
+        this.highlightAllMatches();
+        this.addActiveMatchMark();
+        return this.state.matches;
+    }
+    clearSearch() {
+        this.removeIndicators();
+        this.restoreOriginalText();
+    }
+    restoreOriginalText() {
+        this.forEachTextContainer((textContainer) => {
+            const nodes = Array.from(textContainer.querySelectorAll('span:not(.' + this.options.charClass + ')'));
+            nodes.forEach((node) => {
+                node.innerHTML = node.textContent;
+            });
+        });
+    }
+    shouldTransformText() {
+        return !this.state.text;
+    }
+    transformTextForSearch() {
+        this.state.textNodes = [];
+        this.state.charIndex = 0;
+        this.state.text = '';
+        this.forEachTextContainer((textContainer) => {
+            this.extractTextNodes(textContainer);
+        });
+        this.transformTextNodesForSearch(this.state.textNodes);
+    }
+    extractTextNodes(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            this.state.textNodes.push(node);
+        }
+        else {
+            for (let i = 0; i < node.childNodes.length; i++) {
+                this.extractTextNodes(node.childNodes[i]);
+            }
+        }
+    }
+    transformTextNodesForSearch(textNodes) {
+        for (let i = 0; i < textNodes.length; i++) {
+            this.transformTextNodeForSearch(textNodes[i]);
+        }
+    }
+    transformTextNodeForSearch(node) {
+        const text = node.textContent;
+        if (text.length <= 0) {
+            return;
+        }
+        this.state.text = this.state.text + text;
+        const span = document.createElement('span');
+        wrapElement(node, span);
+        const splittedHtml = this.splitTextByChars(text);
+        span.innerHTML = splittedHtml;
+        unwrapElement(span.childNodes[0]);
+    }
+    splitTextByChars(text) {
+        let splittedTextHtml = '';
+        for (let i = 0; i < text.length; i++) {
+            splittedTextHtml +=
+                '<span class=\'' + this.options.charClass + '\' ' + CHAR_INDEX_DATA_ATTR + '=' + this.state.charIndex + '>' +
+                    text[i] +
+                    '</span>';
+            this.state.charIndex++;
+        }
+        return splittedTextHtml;
+    }
+    forEachTextContainer(callback) {
+        for (let i = 0; i < this.options.textContainers.length; i++) {
+            const textContainer = this.options.textContainers[i];
+            callback(textContainer, i);
+        }
+    }
+    highlightAllMatches() {
+        this.state.matches.forEach((match, matchIndex) => {
+            this.addMatchHighlight(match.startOffset, match.endOffset, matchIndex);
+        });
+    }
+    addMatchHighlight(matchStartOffset, matchEndOffset, matchIndex) {
+        for (let i = matchStartOffset; i < matchEndOffset; i++) {
+            this.forEachTextContainer((textContainer) => {
+                const highlights = Array.from(textContainer.querySelectorAll(toClassSelector(this.options.charClass + '[' + CHAR_INDEX_DATA_ATTR + '=\'' + i + '\'' + ']')));
+                highlights.forEach((highlight) => {
+                    addClass(this.options.highlightClass, highlight);
+                    highlight.setAttribute(MATCH_INDEX_DATA_ATTR, matchIndex);
+                });
+            });
+        }
+    }
+    removeMatchHighlights() {
+        this.forEachTextContainer((textContainer) => {
+            const highlights = Array.from(textContainer.querySelectorAll(toClassSelector(this.options.highlightClass)));
+            highlights.forEach((highlight) => {
+                removeClass(this.options.highlightClass, highlight);
+                highlight.removeAttribute(MATCH_INDEX_DATA_ATTR);
+            });
+        });
+    }
+    addActiveMatchMark() {
+        if (!this.state.activeMatchIndex && this.state.activeMatchIndex !== 0) {
+            this.state.activeMatchIndex = 0;
+        }
+        else if (this.state.activeMatchIndex > this.state.matches.length) {
+            this.state.activeMatchIndex = this.state.matches.length;
+        }
+        else {
+            this.removeActiveMatchMark();
+        }
+        const mark = document.createElement('span');
+        mark.classList.add(this.options.highlightMarkClass);
+        this.forEachTextContainer((textContainer) => {
+            const matches = Array.from(textContainer.querySelectorAll(toClassSelector(this.options.charClass + '[' + MATCH_INDEX_DATA_ATTR + '=\'' + this.state.activeMatchIndex + '\']')));
+            matches.forEach((match) => {
+                wrapInnerElement(match, mark.cloneNode(true));
+            });
+        });
+    }
+    removeActiveMatchMark() {
+        this.forEachTextContainer((textContainer) => {
+            const marks = Array.from(textContainer.querySelectorAll(toClassSelector(this.options.highlightMarkClass)));
+            const childNodes = marks.flatMap((x) => Array.from(x.childNodes));
+            unwrapElements(childNodes);
+        });
+    }
+    removeIndicators() {
+        this.removeActiveMatchMark();
+        this.removeMatchHighlights();
+    }
+    markNextMatch() {
+        this.markNextMatchIndex();
+        this.addActiveMatchMark();
+    }
+    markPreviousMatch() {
+        this.markPreviousMatchIndex();
+        this.addActiveMatchMark();
+    }
+    markNextMatchIndex() {
+        this.moveActiveMatchIndex(1);
+    }
+    markPreviousMatchIndex() {
+        this.moveActiveMatchIndex(-1);
+    }
+    moveActiveMatchIndex(delta) {
+        this.state.activeMatchIndex += delta;
+        if (this.state.activeMatchIndex < 0) {
+            this.state.activeMatchIndex = Math.max(this.state.matches.length - 1, 0);
+        }
+        else if (this.state.activeMatchIndex > this.state.matches.length - 1) {
+            this.state.activeMatchIndex = 0;
+        }
+    }
+    getActiveMatchElement() {
+        let markedMatch;
+        this.forEachTextContainer((textContainer) => {
+            const mark = textContainer.querySelector(toClassSelector(this.options.highlightMarkClass));
+            if (mark) {
+                markedMatch = mark;
+                return;
+            }
+        });
+        return markedMatch;
+    }
+}
+exports.SearchService = SearchService;

package/dist/npm/utils.d.ts

@@ -0,0 +1,78 @@
+import { SaveOptions } from '@progress/kendo-file-saver';
+import { PDFPageProxy, PDFDocumentProxy } from 'pdfjs-dist';
+import { TypedArray } from 'pdfjs-dist/types/src/display/api';
+/**
+ * @hidden
+ */
+export declare type DoneFn = (result: {
+    pdfPages: PDFPageProxy[];
+    pdfDoc: PDFDocumentProxy;
+}) => void;
+/**
+ * @hidden
+ */
+export declare type ErrorFn = (e?: any) => void;
+/**
+ * @hidden
+ */
+export interface PDFReadParameters {
+    url?: string;
+    data?: string;
+    arrayBuffer?: ArrayBuffer;
+    typedArray?: TypedArray;
+    error: ErrorFn;
+}
+/**
+ * @hidden
+ */
+export interface PDFReadOptions extends PDFReadParameters {
+    dom: HTMLDivElement;
+    zoom: number;
+    done: DoneFn;
+}
+/**
+ * @hidden
+ */
+export interface PDFReloadParameters {
+    pdfDoc: PDFDocumentProxy;
+    zoom: number;
+    dom: HTMLElement;
+    done: (pdfPages: PDFPageProxy[]) => void;
+    error: ErrorFn;
+}
+/**
+ * @hidden
+ */
+export declare const DEFAULT_ZOOM_LEVEL = 1.25;
+/**
+ * @hidden
+ */
+export declare const download: (options: PDFReadParameters, fileName: string | undefined, saveOptions: SaveOptions | undefined, onDownload: (blob: Blob, fileName: string, saveOptions: SaveOptions) => boolean) => void;
+/**
+ * @hidden
+ */
+export declare const loadPDF: (options: PDFReadOptions) => void;
+/**
+ * @hidden
+ */
+export declare const reloadDocument: (params: PDFReloadParameters) => void;
+/**
+ * @hidden
+ */
+export declare const print: (pages: PDFPageProxy[], done: () => void, error: ErrorFn) => void;
+/**
+ * @hidden
+ */
+export declare const goToNextSearchMatch: (ref: any) => void;
+/**
+ * @hidden
+ */
+export declare const goToPreviousSearchMatch: (ref: any) => void;
+/**
+ * @hidden
+ */
+export declare const calculateZoomLevel: (zoomLevel: number, zoomLevelType: string, currentZoom: number, dom: HTMLDivElement) => number;
+/**
+ * @hidden
+ */
+export declare const removeChildren: (dom: HTMLElement) => void;