@progress/kendo-pdfviewer-common 0.1.0

package/dist/es/utils.js

@@ -0,0 +1,315 @@
+import { saveAs } from '@progress/kendo-file-saver';
+import { getDocument, renderTextLayer } from 'pdfjs-dist';
+/**
+ * @hidden
+ */
+export const DEFAULT_ZOOM_LEVEL = 1.25;
+const parsePdfFromBase64String = (base64String) => {
+    return atob(base64String.replace(/^(data:application\/pdf;base64,)/gi, ''));
+};
+const getDocumentParameters = (options) => {
+    let params = {
+        verbosity: 0
+    };
+    if (typeof options.data === 'string') {
+        params.data = parsePdfFromBase64String(options.data);
+    }
+    else if (typeof options.url === 'string') {
+        params.url = options.url;
+    }
+    else if (options.arrayBuffer instanceof ArrayBuffer) {
+        params = options.arrayBuffer;
+    }
+    else if (options.typedArray) {
+        params = options.typedArray;
+    }
+    return params;
+};
+/**
+ * @hidden
+ */
+export const removeChildren = (dom) => {
+    while (dom.firstChild) {
+        dom.removeChild(dom.firstChild);
+    }
+};
+const appendPage = (dom, page, index) => {
+    if (index === 0) {
+        removeChildren(dom);
+    }
+    dom.appendChild(page);
+};
+/**
+ * @hidden
+ */
+export const download = (options, fileName = 'Document', saveOptions = {}, onDownload) => {
+    if (options.pdf) {
+        options.pdf
+            .getData()
+            .then((data) => new Blob([data], { type: 'application/pdf' }))
+            .then((blob) => {
+            if (!onDownload(blob, fileName, saveOptions)) {
+                saveAs(blob, fileName, saveOptions);
+            }
+        })
+            .catch((reason) => {
+            options.error.call(undefined, reason);
+        });
+    }
+};
+/**
+ * @hidden
+ */
+export const loadPDF = (options) => {
+    const params = getDocumentParameters(options);
+    const { dom, zoom, done, error } = options;
+    getDocument(params)
+        .promise.then((pdfDoc) => {
+        const pages = [];
+        for (let i = 1; i <= pdfDoc.numPages; i++) {
+            pages.push(pdfDoc.getPage(i));
+        }
+        return { pages, pdfDoc };
+    })
+        .then(({ pages, pdfDoc }) => {
+        Promise.all(pages)
+            .then((all) => all.map((page, i) => {
+            appendPage(dom, renderPage(page, zoom, error), i);
+            return page;
+        }))
+            .then((pdfPages) => {
+            done({ pdfPages, pdfDoc, zoom });
+        })
+            .catch((reason) => {
+            options.error(reason);
+        });
+    })
+        .catch((reason) => {
+        options.error(reason);
+    });
+};
+/**
+ * @hidden
+ */
+export const reloadDocument = (params) => {
+    const { pdfDoc, zoom, dom, done, error } = params;
+    const pages = [];
+    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);
+        return page;
+    }))
+        .then(done)
+        .catch(error);
+};
+/**
+ * @hidden
+ */
+export const print = (pages, done, error) => {
+    const dom = document.createElement('div');
+    let dones = pages.map(() => false);
+    pages.forEach((page, index) => {
+        const viewport = renderCanvas(page, (el) => {
+            dom.appendChild(el);
+            dones[index] = true;
+            if (dones.every(Boolean)) {
+                openPrintDialog(dom, viewport.width, viewport.height, done, error);
+            }
+        }, error);
+    });
+};
+const openPrintDialog = (dom, width, height, done, onError) => {
+    const printDialog = window.open('', '', 'innerWidth=' +
+        width +
+        ',innerHeight=' +
+        height +
+        'location=no,titlebar=no,toolbar=no');
+    if (!printDialog || !printDialog.document) {
+        onError();
+        return;
+    }
+    if (printDialog) {
+        printDialog.document.body.appendChild(dom);
+        printDialog.focus();
+        setTimeout(() => {
+            printDialog.print();
+            done();
+        });
+        const onAfterPrint = () => {
+            printDialog.removeEventListener('afterprint', onAfterPrint);
+            printDialog.close();
+        };
+        printDialog.addEventListener('afterprint', onAfterPrint);
+    }
+};
+const renderCanvas = (page, done, error) => {
+    const viewport = page.getViewport({ scale: DEFAULT_ZOOM_LEVEL });
+    const styles = {};
+    const pageElement = createElement('div', '', styles);
+    const canvas = createElement('canvas', '', {
+        width: '100%',
+        height: '100%'
+    });
+    const canvasContext = canvas.getContext('2d');
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    pageElement.appendChild(canvas);
+    page.render({ canvasContext, viewport })
+        .promise.then(() => {
+        const printContent = new Image();
+        printContent.src = canvas.toDataURL();
+        pageElement.removeChild(canvas);
+        pageElement.appendChild(printContent);
+        printContent.width = canvas.width;
+        printContent.height = canvas.height;
+        const onload = () => {
+            printContent.removeEventListener('load', onload);
+            done(pageElement);
+        };
+        printContent.addEventListener('load', onload);
+    })
+        .catch(error);
+    return viewport;
+};
+const createElement = function (name, className, styles) {
+    const element = document.createElement(name);
+    if (className) {
+        element.className = className;
+    }
+    Object.keys(styles).forEach((key) => (element.style[key] = styles[key]));
+    return element;
+};
+const renderPage = (page, zoom, error) => {
+    const viewport = page.getViewport({ scale: zoom });
+    const styles = {
+        width: viewport.width + 'px',
+        height: viewport.height + 'px'
+    };
+    const pageElement = createElement('div', 'k-page', styles);
+    const canvas = createElement('canvas', '', {
+        width: '100%',
+        height: '100%'
+    });
+    const canvasContext = canvas.getContext('2d');
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    pageElement.appendChild(canvas);
+    page.render({ canvasContext, viewport })
+        .promise.then(() => {
+        page.getTextContent().then((textContent) => {
+            const textLayer = createElement('div', 'k-text-layer', styles);
+            renderTextLayer({
+                textContentSource: textContent,
+                container: textLayer,
+                viewport: viewport,
+                textDivs: []
+            })
+                .promise.then(() => {
+                pageElement.appendChild(textLayer);
+            })
+                .catch(error);
+        });
+    })
+        .catch(error);
+    return pageElement;
+};
+const searchMatchScrollLeftOffset = 0;
+const searchMatchScrollTopOffset = -64;
+const scrollToSearchMatch = (matchElement, ref) => {
+    if (!matchElement) {
+        return;
+    }
+    const closestCharElement = matchElement.closest('.k-text-char');
+    const closestTextElement = closestCharElement
+        ? closestCharElement.closest('span[role="presentation"]')
+        : null;
+    if (!closestTextElement) {
+        return;
+    }
+    const closestPageElement = closestTextElement.closest('.k-page');
+    if (!closestPageElement) {
+        return;
+    }
+    const scrollLeft = closestPageElement.offsetLeft +
+        -1 * ref.scroller.element.offsetLeft +
+        closestTextElement.offsetLeft +
+        searchMatchScrollLeftOffset;
+    const scrollTop = closestPageElement.offsetTop +
+        -1 * ref.scroller.element.offsetTop +
+        closestTextElement.offsetTop +
+        searchMatchScrollTopOffset;
+    ref.scroller.scrollTo(scrollLeft, scrollTop, { trackScrollEvent: false });
+};
+/**
+ * @hidden
+ */
+export const goToNextSearchMatch = (ref) => {
+    ref.search.markNextMatch();
+    const matchElement = ref.search.getActiveMatchElement();
+    scrollToSearchMatch(matchElement, ref);
+};
+/**
+ * @hidden
+ */
+export const goToPreviousSearchMatch = (ref) => {
+    ref.search.markPreviousMatch();
+    const matchElement = ref.search.getActiveMatchElement();
+    scrollToSearchMatch(matchElement, ref);
+};
+/**
+ * @hidden
+ */
+export const calculateZoomLevel = (zoomLevel, zoomLevelType, currentZoom, dom) => {
+    const documentContainer = dom.closest('.k-pdf-viewer-canvas');
+    const page = dom.querySelector('.k-page');
+    const pageSize = { width: page.offsetWidth, height: page.offsetHeight };
+    let calculatedZoomLevel = zoomLevel;
+    if (zoomLevelType === 'ActualWidth') {
+        calculatedZoomLevel = 1;
+    }
+    else if (zoomLevelType === 'FitToWidth') {
+        calculatedZoomLevel =
+            documentContainer.offsetWidth / (pageSize.width / currentZoom);
+    }
+    else if (zoomLevelType === 'FitToPage') {
+        calculatedZoomLevel =
+            documentContainer.offsetHeight / (pageSize.height / currentZoom);
+    }
+    return calculatedZoomLevel;
+};
+/**
+ * Scrolls the PDFViewer document to the passed page number.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @param pageNumber The page number.
+ */
+export const scrollToPage = (rootElement, pageNumber) => {
+    const pages = rootElement.querySelectorAll('.k-page');
+    const page = pages[0];
+    if (page instanceof HTMLDivElement) {
+        const top = (page.offsetHeight + page.offsetTop) *
+            Math.max(0, Math.min(pageNumber, pages.length - 1));
+        const scrollElement = page.closest('.k-pdf-viewer-canvas');
+        if (scrollElement) {
+            scrollElement.scrollTo({ top, behavior: 'auto' });
+        }
+    }
+};
+/**
+ * A function which gives you the page number of the document according to the scroll position.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @returns The page number.
+ */
+export const currentPage = (rootElement) => {
+    const scrollElement = rootElement.querySelector('.k-pdf-viewer-canvas');
+    const page = rootElement.querySelector('.k-page');
+    return scrollElement && page
+        ? Math.floor(Math.round(scrollElement.scrollTop) /
+            (page.offsetHeight + page.offsetTop) +
+            0.01)
+        : 0;
+};

package/dist/npm/main.d.ts

@@ -0,0 +1,5 @@
+export * from './scroller';
+export * from './search';
+export * from './utils';
+export { PDFDocumentProxy } from 'pdfjs-dist';
+export { TypedArray } from 'pdfjs-dist/types/src/display/api';

package/dist/npm/main.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./scroller"), exports);
+tslib_1.__exportStar(require("./search"), exports);
+tslib_1.__exportStar(require("./utils"), exports);

package/dist/npm/scroller.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @hidden
+ */
+export declare class Scroller {
+    options: any;
+    state: any;
+    element: any;
+    throttledOnDrag: any;
+    draggable: any;
+    throttledOnElementScroll: any;
+    constructor(element: any, options: any);
+    destroy(): void;
+    initDraggable(): void;
+    destroyDraggable(): void;
+    bindEvents(): void;
+    bindDraggableEvents(): void;
+    bindElementScroll(): void;
+    unbindEvents(): void;
+    unbindDraggableEvents(): void;
+    unbindElementScroll(): void;
+    setState(newState: any): void;
+    resetState(): void;
+    enablePanEventsTracking(): void;
+    disablePanEventsTracking(): void;
+    shouldTrackPanEvents(): boolean;
+    onElementScroll: () => void;
+    onDragStart: (e: any) => void;
+    onDrag: (e: any) => void;
+    onDragEnd: () => void;
+    calculateEventLocationDelta(e: any): void;
+    scrollTo(x: any, y: any, options?: any): void;
+}

package/dist/npm/scroller.js

@@ -0,0 +1,232 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const kendo_draggable_1 = require("@progress/kendo-draggable");
+const throttle = function (func, wait, options = {}) {
+    let timeout, context, args, result;
+    let previous = 0;
+    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 = {
+            events: {
+                [SCROLL]: () => undefined
+            },
+            filter: '',
+            // 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,
+            // 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
+        };
+        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,37 @@
+/**
+ * @hidden
+ */
+export declare class SearchService {
+    options: any;
+    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(): any;
+}