@pdftools/four-heights-pdf-web-viewer 4.3.6

package/es6/modules/print-service/PrintServiceDialog.js

@@ -0,0 +1,134 @@
+import { app, h } from '../../lib/hyperapp';
+import { icons } from '../../common/icons';
+import { Icon } from '../../common/Icon';
+import { Loader } from '../../common/Loader';
+import { translationManager } from '../../common/TranslationManager';
+export var PaperFormat;
+(function (PaperFormat) {
+    PaperFormat[PaperFormat["A4"] = 0] = "A4";
+    PaperFormat[PaperFormat["LETTER"] = 1] = "LETTER";
+})(PaperFormat || (PaperFormat = {}));
+export const createPrintServiceDialog = (props, element) => {
+    const state = {
+        pages: [],
+        selectedFormat: PaperFormat.A4,
+        radio_selection: 'all',
+        printPending: false,
+        includeAnnotations: true,
+    };
+    const actions = {
+        setFormat: (format) => ($state) => {
+            let selectedFormat = $state.selectedFormat;
+            if (format === 0) {
+                selectedFormat = PaperFormat.A4;
+            }
+            else if (format === 1) {
+                selectedFormat = PaperFormat.LETTER;
+            }
+            return Object.assign(Object.assign({}, $state), { selectedFormat });
+        },
+        setRadioSelection: (sel) => ($state) => {
+            return Object.assign(Object.assign({}, $state), { radio_selection: sel });
+        },
+        setPrintPending: (printPending) => ($state) => {
+            return Object.assign(Object.assign({}, $state), { printPending });
+        },
+        toggleIncludeAnnotations: () => ($state) => {
+            return Object.assign(Object.assign({}, $state), { includeAnnotations: !$state.includeAnnotations });
+        },
+    };
+    const App = () => (h(PrintServiceDialog, { print: props.print, cancel: props.cancel, pageCount: props.pageCount, currentPage: props.currentPage, parseRange: props.parseRange, validateRange: props.validateRange }));
+    const PrintServiceDialog = ({ print, cancel, parseRange, validateRange }) => ($state, $actions) => (h("div", { class: "pwv-print-body", id: "pwv-print-body" },
+        h("div", { class: "pwv-print-title" },
+            h(Icon, { className: "pwv-print-icon", icon: icons.print, fill: '#008BD2' }),
+            translationManager.getText('print.title')),
+        $state.printPending ? (h("div", null,
+            h(Loader, null),
+            h("div", { class: "pwv-print-bottom pwv-print-bottom-center" },
+                h("button", { class: "pwv-print-button-cancel", onclick: () => {
+                        cancel();
+                    } }, translationManager.getText('print.cancel'))))) : (h("div", null,
+            h("div", { class: "pwv-print-pages" },
+                h("div", { class: "pwv-print-option" },
+                    h("label", null,
+                        h("input", { type: "radio", id: "all", checked: $state.radio_selection === 'all' ? true : false, onclick: () => {
+                                $actions.setRadioSelection('all');
+                            } }),
+                        h("span", { class: "pwv-print-radio" }),
+                        translationManager.getText('print.all'))),
+                h("div", { class: "pwv-print-option" },
+                    h("label", null,
+                        h("input", { type: "radio", id: "current_page", checked: $state.radio_selection === 'current_page' ? true : false, onclick: () => {
+                                $actions.setRadioSelection('current_page');
+                            } }),
+                        h("span", { class: "pwv-print-radio" }),
+                        translationManager.getText('print.current'))),
+                h("div", { class: "pwv-print-option" },
+                    h("label", null,
+                        h("input", { type: "radio", id: "range", checked: $state.radio_selection === 'range' ? true : false, onclick: () => {
+                                $actions.setRadioSelection('range');
+                            } }),
+                        h("span", { class: "pwv-print-radio" }),
+                        translationManager.getText('print.range')),
+                    h("input", { class: "pwv-print-page-range", id: "pwv-print-input-range", type: "text", placeholder: "e.g. 1,3-5", onkeydown: (e) => {
+                            e.stopPropagation();
+                        }, onkeyup: (e) => {
+                            if (state.radio_selection !== 'range') {
+                                $actions.setRadioSelection('range');
+                            }
+                            const inputElement = document.getElementById('pwv-print-input-range');
+                            const errorMessage = document.getElementById('pwv-print-invalid-range-text');
+                            let bValidInput = false;
+                            if (validateRange(inputElement.value)) {
+                                const pages = parseRange(inputElement.value);
+                                bValidInput = !pages.some((page) => page > props.pageCount || page < 1);
+                            }
+                            if (bValidInput) {
+                                inputElement.classList.remove('pwv-print-invalid-input');
+                                errorMessage.style.display = 'none';
+                            }
+                            else {
+                                inputElement.classList.add('pwv-print-invalid-input');
+                                errorMessage.style.display = 'block';
+                            }
+                        } })),
+                h("div", { class: "pwv-print-invalid-range-text-container" },
+                    h("div", { class: "pwv-print-invalid-range-text", id: "pwv-print-invalid-range-text" }, translationManager.getText('print.invalid'))),
+                h("div", { class: "pwv-print-option" },
+                    h("div", { class: "pwv-checkbox-btn pwv-print-include-annotations", onclick: (e) => {
+                            $actions.toggleIncludeAnnotations();
+                        } },
+                        $state.includeAnnotations ? (h(Icon, { icon: icons.checkboxChecked })) : (h(Icon, { icon: icons.checkbox })),
+                        translationManager.getText('print.includeAnnotations')))),
+            h("div", { class: "pwv-print-bottom" },
+                h("button", { class: "pwv-print-button-cancel", onclick: () => {
+                        cancel();
+                    } }, translationManager.getText('print.cancel')),
+                h("button", { class: "pwv-print-button-print", onclick: () => {
+                        if ($state.radio_selection === 'all') {
+                            const pages = Array.from({ length: props.pageCount }, (x, i) => i + 1);
+                            print({
+                                pages,
+                                format: $state.selectedFormat,
+                                includeAnnotations: $state.includeAnnotations,
+                            });
+                        }
+                        if ($state.radio_selection === 'current_page') {
+                            print({
+                                pages: [props.currentPage],
+                                format: $state.selectedFormat,
+                                includeAnnotations: $state.includeAnnotations,
+                            });
+                        }
+                        if ($state.radio_selection === 'range') {
+                            const input = document.getElementById('pwv-print-input-range').value;
+                            const pages = parseRange(input);
+                            print({
+                                pages,
+                                format: $state.selectedFormat,
+                                includeAnnotations: $state.includeAnnotations,
+                            });
+                        }
+                    } }, translationManager.getText('print.print')))))));
+    return app(state, actions, App, element);
+};

package/es6/modules/print-service/PrintServiceLayer.d.ts

@@ -0,0 +1,24 @@
+import { ViewerCanvasState } from 'pdf-viewer-canvas/state/store';
+import { CanvasLayer } from '../CanvasLayer';
+import { PaperFormat } from './PrintServiceDialog';
+export declare class PrintServiceLayer extends CanvasLayer {
+    private printDialog;
+    private printElement;
+    private printIFrame;
+    private pageStyle;
+    private printPending;
+    onCreate(): void;
+    startPrint({ pages, format, includeAnnotations, }: {
+        pages: number[];
+        format?: PaperFormat;
+        includeAnnotations: boolean;
+    }): void;
+    cancelPrint(): void;
+    private stopTouchEventPropagation;
+    private validateRange;
+    private parseRange;
+    close(): void;
+    onRemove(): void;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    onSave(): Promise<void>;
+}

package/es6/modules/print-service/PrintServiceLayer.js

@@ -0,0 +1,310 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { CanvasLayer } from '../CanvasLayer';
+import { createPrintServiceDialog } from './PrintServiceDialog';
+const moduleLayerName = 'PrintServiceLayer';
+export class PrintServiceLayer extends CanvasLayer {
+    constructor() {
+        super(...arguments);
+        this.printDialog = null;
+        this.printElement = null;
+        this.printIFrame = null;
+        this.pageStyle = null;
+        this.printPending = false;
+    }
+    onCreate() {
+        this.startPrint = this.startPrint.bind(this);
+        this.cancelPrint = this.cancelPrint.bind(this);
+        this.validateRange = this.validateRange.bind(this);
+        this.parseRange = this.parseRange.bind(this);
+        this.stopTouchEventPropagation = this.stopTouchEventPropagation.bind(this);
+        this.printElement = this.createHtmlLayer();
+        this.printElement.className = 'pwv-print-dialog';
+        this.printDialog = createPrintServiceDialog({
+            pageCount: this.pdfApi.getPageCount(),
+            currentPage: this.store.getState().document.firstVisiblePage,
+            print: this.startPrint,
+            cancel: this.cancelPrint,
+            validateRange: this.validateRange,
+            parseRange: this.parseRange,
+        }, this.printElement);
+        this.store.viewer.beginModule(moduleLayerName);
+        this.printElement.addEventListener('touchstart', this.stopTouchEventPropagation);
+        this.printElement.addEventListener('touchend', this.stopTouchEventPropagation);
+    }
+    startPrint({ pages, format, includeAnnotations, }) {
+        var _a;
+        this.printPending = true;
+        if (this.printDialog) {
+            this.printDialog.setPrintPending(true);
+        }
+        if (!this.printIFrame) {
+            this.printIFrame = document.createElement('iframe');
+            this.printIFrame.style.display = 'none';
+            document.body.appendChild(this.printIFrame);
+            const doc = this.printIFrame.contentDocument;
+            doc.open();
+            doc.close();
+            if (doc.head) {
+                const styleElm = doc.createElement('style');
+                styleElm.textContent = `
+        @media print {
+          @page {size:A4;margin:0;padding:0}
+          body {margin:0;padding:0;background-color:white;height:100%;}
+          .page {
+            width: 210mm;
+            height: 297mm;
+            overflow: hidden;
+            page-break-after: always;
+            break-after: always;
+            -webkit-region-break-after: always;
+            -webkit-column-break-after: always;
+            -webkit-page-break-after: always;
+          }
+          .page:last-child {
+            page-break-after: auto;
+            break-after: auto;
+            -webkit-page-break-after: auto;
+          }
+          .page img {
+            width: 100%;
+            height: auto;
+            display: block;
+            page-break-inside: avoid;
+            break-inside: avoid;
+            -webkit-region-break-inside: avoid;
+            -webkit-column-break-inside: avoid;
+            -webkit-page-break-inside: avoid;
+          }
+          body.is-safari .page {
+            width: 100% !important;
+            height: 100% !important;
+          }
+        }
+      `;
+                doc.head.append(styleElm);
+            }
+            // Safari detection
+            if (/Safari\//.test(navigator.userAgent) && !/Chrome\//.test(navigator.userAgent)) {
+                doc.body.classList.add('is-safari');
+            }
+            // Close print modal when OS print dialog is closed
+            (_a = this.printIFrame.contentWindow) === null || _a === void 0 ? void 0 : _a.addEventListener('afterprint', () => {
+                this.close();
+            });
+        }
+        const printDocument = this.printIFrame.contentDocument;
+        printDocument.body.innerHTML = '';
+        const pageList = printDocument.createElement('div');
+        printDocument.body.append(pageList);
+        const pdfApi = this.pdfApi;
+        const dpi = 150;
+        // paper sizes
+        const paperSizes = {
+            a4: {
+                width: 595,
+                height: 842,
+            },
+        };
+        const printerPaperSize = paperSizes.a4;
+        // papersize in pixels for a4
+        const paperSize = {
+            width: (printerPaperSize.width / 72) * dpi,
+            height: (printerPaperSize.height / 72) * dpi,
+        };
+        // canvas for image creation
+        const canvas = printDocument.createElement('canvas');
+        canvas.width = paperSize.width;
+        canvas.height = paperSize.height;
+        const ctx = canvas.getContext('2d');
+        const renderNextPage = () => __awaiter(this, void 0, void 0, function* () {
+            if (!this.printPending) {
+                return;
+            }
+            const page = pages.shift();
+            if (page) {
+                const pageSize = yield pdfApi.getPagePdfSize(page);
+                let pageWidth = (pageSize.width / 72) * dpi;
+                let pageHeight = (pageSize.height / 72) * dpi;
+                const isLandscape = pageWidth > pageHeight;
+                //shrink page if the page is larger then lager then paper size
+                let scale = 1;
+                if (isLandscape) {
+                    scale = Math.min(paperSize.height / pageWidth, paperSize.width / pageHeight);
+                }
+                else {
+                    scale = Math.min(paperSize.width / pageWidth, paperSize.height / pageHeight);
+                }
+                if (scale < 1) {
+                    pageWidth = pageWidth * scale;
+                    pageHeight = pageHeight * scale;
+                }
+                let annotationFilter = includeAnnotations ? undefined : () => false;
+                const img = yield pdfApi.renderPage(page, pageWidth, pageHeight, annotationFilter);
+                if (ctx) {
+                    ctx.clearRect(0, 0, paperSize.width, paperSize.height);
+                    ctx.save();
+                    if (isLandscape) {
+                        // putImageData is not affected by the transformation matrix
+                        // need to draw draw to a tmp camvas
+                        const tmpCanvas = printDocument.createElement('canvas');
+                        tmpCanvas.width = img.imageData.width;
+                        tmpCanvas.height = img.imageData.height;
+                        const tmpCtx = tmpCanvas.getContext('2d');
+                        if (tmpCtx) {
+                            tmpCtx.putImageData(img.imageData, 0, 0);
+                        }
+                        const imgPosX = (paperSize.height - img.imageData.width) / 2;
+                        const imgPosY = (paperSize.width - img.imageData.height) / 2;
+                        ctx.translate(canvas.width, 0);
+                        ctx.rotate((90 * Math.PI) / 180);
+                        ctx.drawImage(tmpCanvas, imgPosX, imgPosY);
+                        // draw page rectangle for debugging
+                        // ctx.strokeStyle = 'blue'
+                        // ctx.lineWidth = 4
+                        // ctx.strokeRect(
+                        //   imgPosX + 2,
+                        //   imgPosY + 2,
+                        //   img.imageData.width - 4,
+                        //   img.imageData.height - 4
+                        // )
+                    }
+                    else {
+                        const imgPosX = (paperSize.width - pageWidth) / 2;
+                        const imgPosY = (paperSize.height - pageHeight) / 2;
+                        ctx.putImageData(img.imageData, imgPosX, imgPosY);
+                        // draw page rectangle for debugging
+                        // ctx.strokeStyle = 'red'
+                        // ctx.lineWidth = 4
+                        // ctx.strokeRect(
+                        //   imgPosX + 2,
+                        //   imgPosY + 2,
+                        //   pageWidth - 4,
+                        //   pageHeight - 4
+                        // )
+                    }
+                    ctx.restore();
+                    // create and append html elements to page list
+                    const pageElm = printDocument.createElement('div');
+                    pageElm.classList.add('page');
+                    pageList.append(pageElm);
+                    const imgSrc = canvas.toDataURL('image/png');
+                    const imgElm = printDocument.createElement('img');
+                    imgElm.src = imgSrc;
+                    pageElm.append(imgElm);
+                }
+                renderNextPage();
+            }
+            else {
+                window.setTimeout(() => {
+                    this.printPending = false;
+                    if (this.printDialog) {
+                        this.printDialog.setPrintPending(false);
+                    }
+                    if (this.printIFrame && this.printIFrame.contentWindow) {
+                        this.printIFrame.contentWindow.print();
+                    }
+                }, 100);
+            }
+        });
+        renderNextPage();
+    }
+    cancelPrint() {
+        this.printPending = false;
+        this.remove();
+    }
+    stopTouchEventPropagation(e) {
+        e.stopImmediatePropagation();
+    }
+    // Validate the provided page range
+    validateRange(range) {
+        // Only numbers, commas and dashes are allowed
+        let regex = range.match(/^[\d\,\-]*$/g);
+        if (!regex || (regex && regex.length === 0)) {
+            return false;
+        }
+        // Only single dashes and commas are allowed
+        regex = range.match(/-{2,}|,{2,}/g);
+        if (regex && regex.length > 0) {
+            return false;
+        }
+        return true;
+    }
+    // Transform a range string into a list of pages
+    // The range string should be validated first
+    parseRange(range) {
+        let pages = [];
+        if (!this.validateRange(range)) {
+            return [];
+        }
+        const splitInput = range.split(',');
+        splitInput.forEach((input) => {
+            const nDashes = (input.match(/-/g) || []).length;
+            if (nDashes === 0) {
+                // No dash, parse string as int and push
+                // number to the list
+                pages.push(parseInt(input, 10));
+            }
+            if (nDashes === 1) {
+                const numbers = input.split('-');
+                let firstPage = parseInt(numbers[0], 10);
+                let lastPage = parseInt(numbers[1], 10);
+                // this.printDialog.
+                if (lastPage < firstPage) {
+                    const temp = firstPage;
+                    firstPage = lastPage;
+                    lastPage = temp;
+                }
+                const pageRange = Array.from({ length: lastPage - firstPage + 1 }, (v, k) => k + firstPage);
+                pages = pages.concat(pageRange);
+            }
+        });
+        return pages;
+    }
+    close() {
+        this.remove();
+    }
+    onRemove() {
+        var _a, _b;
+        (_a = this.printElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', this.stopTouchEventPropagation);
+        (_b = this.printElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchend', this.stopTouchEventPropagation);
+        this.removeHtmlElements();
+        this.printPending = false;
+        this.printElement = null;
+        if (this.pageStyle) {
+            this.pageStyle.remove();
+        }
+        if (this.printIFrame) {
+            document.body.removeChild(this.printIFrame);
+        }
+        this.store.viewer.endModule(moduleLayerName);
+    }
+    render(timestamp, state) {
+        if (state.viewer.modeChanged && state.viewer.selectedModuleName !== moduleLayerName) {
+            this.remove();
+            return;
+        }
+        if (this.printElement && state.pointer.action === 'click') {
+            const insideHorizontal = state.pointer.x.cssPixels > this.printElement.offsetLeft &&
+                state.pointer.x.cssPixels < this.printElement.offsetLeft + this.printElement.offsetWidth;
+            const insideVertical = state.pointer.y.cssPixels > this.printElement.offsetTop &&
+                state.pointer.y.cssPixels < this.printElement.offsetTop + this.printElement.offsetHeight;
+            if (!insideHorizontal || !insideVertical) {
+                this.remove();
+                return;
+            }
+        }
+    }
+    onSave() {
+        return new Promise((resolve, rejct) => {
+            return;
+        });
+    }
+}

package/es6/modules/print-service/PrintServiceModule.d.ts

@@ -0,0 +1,18 @@
+import { CanvasModule, CanvasModuleType } from '../CanvasModule';
+export declare class PrintServiceModule extends CanvasModule {
+    annotationbarElement: HTMLElement | null;
+    toolbarElement: HTMLElement | null;
+    static moduleInfo: {
+        name: string;
+        moduleType: CanvasModuleType;
+        requiredFeatures: {
+            annotate: boolean;
+            fillFormFields: boolean;
+        };
+        translationKey: string;
+        icon: string;
+    };
+    constructor();
+    onRegister(): {};
+    activate(): void;
+}

package/es6/modules/print-service/PrintServiceModule.js

@@ -0,0 +1,30 @@
+import { CanvasModule, CanvasModuleType } from '../CanvasModule';
+import { PrintServiceLayer } from './PrintServiceLayer';
+export class PrintServiceModule extends CanvasModule {
+    constructor() {
+        super();
+        this.annotationbarElement = null;
+        this.toolbarElement = null;
+        this.name = PrintServiceModule.moduleInfo.name;
+        this.activate = this.activate.bind(this);
+    }
+    onRegister() {
+        return {};
+    }
+    activate() {
+        /* tslint:disable-next-line:no-string-literal */
+        if (!this.canvasLayers['add']) {
+            this.createCanvasLayer('add', PrintServiceLayer);
+        }
+    }
+}
+PrintServiceModule.moduleInfo = {
+    name: 'PrintServiceModule',
+    moduleType: CanvasModuleType.Layer,
+    requiredFeatures: {
+        annotate: false,
+        fillFormFields: false,
+    },
+    translationKey: 'a',
+    icon: 'a',
+};

package/es6/modules/shape-annotations/AddShapeAnnotationLayer.d.ts

@@ -0,0 +1,24 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+import { PdfItemType } from '../../pdf-viewer-api';
+export declare class AddShapeAnnotationLayer extends CanvasLayer {
+    private context;
+    private toolbar;
+    private page;
+    private pointerDown;
+    private startPoint;
+    private itemType;
+    private strokeColors;
+    private fillColors;
+    onCreate(itemType: PdfItemType): void;
+    cancel(): void;
+    onSave(): Promise<void>;
+    onRemove(): void;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private setStrokeColor;
+    private setShape;
+    private setStrokeWidth;
+    private setStrokeStyle;
+    private setFillColor;
+    private createRectangleAnnotation;
+}