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

package/es6/modules/form-fields/EditFormFieldLayer.js

@@ -0,0 +1,238 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { PdfItemType, WidgetType } from '../../pdf-viewer-api';
+import { CheckBoxWidget } from './CheckBoxWidget';
+import { ComboBoxWidget } from './ComboBoxWidget';
+import { SelectListWidget } from './SelectListWidget';
+import { ListBoxWidget } from './ListBoxWidget';
+import { RadioButtonWidget } from './RadioButtonWidget';
+import { TextBoxWidget } from './TextBoxWidget';
+const moduleLayerName = 'EditFormField';
+const stopPropagation = (e) => {
+    e.stopPropagation();
+};
+export class EditFormFieldLayer extends CanvasLayer {
+    constructor() {
+        super(...arguments);
+        this.widgetAnnotation = null;
+        this.formFieldElement = null;
+        this.hasFocus = false;
+        this.widgetEditor = null;
+    }
+    onCreate(args) {
+        const { annotationId, action } = args;
+        this.store.viewer.beginModule(moduleLayerName);
+        this.widgetAnnotation = this.pdfApi.getItem(annotationId);
+        this.selectNextFormField = this.selectNextFormField.bind(this);
+        this.blur = this.blur.bind(this);
+        this.formFieldElement = this.createHtmlLayer();
+        this.formFieldElement.classList.add('pwv-formField');
+        this.formFieldElement.addEventListener('mousedown', stopPropagation, false);
+        this.formFieldElement.addEventListener('mousemove', stopPropagation, false);
+        this.formFieldElement.addEventListener('mouseup', stopPropagation, false);
+        this.formFieldElement.addEventListener('touchstart', stopPropagation, { passive: false });
+        this.formFieldElement.addEventListener('touchmove', stopPropagation, { passive: true });
+        this.formFieldElement.addEventListener('touchend', stopPropagation, { passive: true });
+        this.updateFormFieldElementPosition();
+        const widget = this.widgetAnnotation.widget;
+        const widgetType = this.widgetAnnotation.widgetType;
+        if (action === 'click' &&
+            (widgetType === WidgetType.CHECK_BOX || widgetType === WidgetType.RADIO_BUTTON)) {
+            widget.push();
+            this.widgetAnnotation.pdfDocument.editAnnotation(widget);
+        }
+        const bb = widget.boundingBox;
+        const paddingX = 4;
+        const paddingY = 6;
+        this.pdfApi.goToRectangle({
+            page: bb.pageNumber,
+            pdfX: bb.x - paddingX,
+            pdfY: bb.y - paddingY,
+            pdfW: bb.width + 2 * paddingX,
+            pdfH: bb.height + 2 * paddingY,
+        });
+        const options = {
+            widget: widget,
+            widgetType: widgetType,
+            pdfDocument: this.widgetAnnotation.pdfDocument,
+            onTab: (shiftKey) => {
+                this.selectNextFormField(shiftKey);
+            },
+            onBlur: () => {
+                if (this.hasFocus) {
+                    this.blur();
+                }
+            },
+        };
+        switch (options.widgetType) {
+            case WidgetType.CHECK_BOX:
+                this.widgetEditor = new CheckBoxWidget(this.formFieldElement, options);
+                break;
+            case WidgetType.RADIO_BUTTON:
+                this.widgetEditor = new RadioButtonWidget(this.formFieldElement, options);
+                break;
+            case WidgetType.TEXT_BOX:
+                this.widgetEditor = new TextBoxWidget(this.formFieldElement, options);
+                break;
+            case WidgetType.COMBO_BOX:
+                {
+                    if (widget.customEntryAllowed) {
+                        this.widgetEditor = new ComboBoxWidget(this.formFieldElement, options);
+                    }
+                    else {
+                        this.widgetEditor = new SelectListWidget(this.formFieldElement, options);
+                    }
+                }
+                break;
+            case WidgetType.LIST_BOX:
+                this.widgetEditor = new ListBoxWidget(this.formFieldElement, options);
+                break;
+        }
+        this.hasFocus = true;
+    }
+    cancel() {
+        this.remove();
+    }
+    onSave() {
+        const promise = new Promise((resolve, reject) => {
+            resolve();
+        });
+        return promise;
+    }
+    close() {
+        this.remove();
+    }
+    onRemove() {
+        var _a;
+        this.hasFocus = false;
+        (_a = this.widgetEditor) === null || _a === void 0 ? void 0 : _a.onRemove();
+        this.removeHtmlElements();
+        this.formFieldElement = null;
+        this.store.viewer.endModule(moduleLayerName);
+    }
+    render(timestamp, state) {
+        var _a;
+        if (state.viewer.modeChanged && state.viewer.selectedModuleName !== moduleLayerName) {
+            this.remove();
+            return;
+        }
+        if (this.formFieldElement) {
+            // update position
+            if (state.canvas.canvasInvalidated || state.viewer.modeChanged) {
+                this.updateFormFieldElementPosition();
+            }
+            // handle click events
+            if (state.pointer.action === 'click') {
+                const pointerCssPos = {
+                    x: state.pointer.x.cssPixels,
+                    y: state.pointer.y.cssPixels,
+                };
+                const insideHorizontal = pointerCssPos.x > this.formFieldElement.offsetLeft &&
+                    pointerCssPos.x < this.formFieldElement.offsetLeft + this.formFieldElement.offsetWidth;
+                const insideVertical = pointerCssPos.y > this.formFieldElement.offsetTop &&
+                    pointerCssPos.y < this.formFieldElement.offsetTop + this.formFieldElement.offsetHeight;
+                if (!insideHorizontal || !insideVertical) {
+                    this.blur();
+                    const annotationsOnPoint = this.pdfApi.getAnnotationsOnPoint({
+                        x: state.pointer.x.devicePixels,
+                        y: state.pointer.y.devicePixels,
+                    });
+                    if (annotationsOnPoint && annotationsOnPoint.length) {
+                        for (let i = 0; i < annotationsOnPoint.length; i++) {
+                            const annotationOnPoint = annotationsOnPoint[i];
+                            if (annotationOnPoint.itemType === PdfItemType.WIDGET &&
+                                !annotationOnPoint.widget.readOnly) {
+                                this.pdfViewerCanvas.activateModule('FormFieldModule', {
+                                    annotationId: annotationOnPoint.id,
+                                    action: 'click',
+                                });
+                            }
+                        }
+                    }
+                    return;
+                }
+            }
+        }
+        if (state.document.zoomChanged || state.viewer.modeChanged) {
+            (_a = this.widgetEditor) === null || _a === void 0 ? void 0 : _a.setZoom(state.document.zoom);
+        }
+    }
+    updateFormFieldElementPosition() {
+        if (this.widgetAnnotation && this.formFieldElement) {
+            const screenRect = this.pdfApi.transformPdfPageRectToScreenRect(this.widgetAnnotation.pdfRect);
+            this.formFieldElement.style.left = `${screenRect.x / devicePixelRatio - 2}px`;
+            this.formFieldElement.style.top = `${screenRect.y / devicePixelRatio - 2}px`;
+            this.formFieldElement.style.width = `${screenRect.w / devicePixelRatio + 1}px`;
+            this.formFieldElement.style.height = `${screenRect.h / devicePixelRatio + 1}px`;
+        }
+    }
+    selectNextFormField(reverse) {
+        if (this.widgetAnnotation) {
+            const { annotations, document } = this.store.getState();
+            const pageCount = this.pdfApi.getPageCount();
+            const getNextFormFieldOnPage = (pageNumber, index) => {
+                const list = annotations.byPage[pageNumber];
+                for (let i = index; i < list.length; i++) {
+                    const annotId = list[i];
+                    const annotation = annotations.all[annotId];
+                    if (annotation.itemType === PdfItemType.WIDGET &&
+                        !annotation.widget.readOnly) {
+                        return annotation;
+                    }
+                }
+                if (pageCount === 1 && index === 0) {
+                    return null;
+                }
+                const nextPage = pageCount > pageNumber ? pageNumber + 1 : 1;
+                return getNextFormFieldOnPage(nextPage, 0);
+            };
+            const getPreviewsFormFieldOnPage = (pageNumber, index) => {
+                const list = annotations.byPage[pageNumber];
+                const start = index < 0 ? list.length - 1 : index;
+                for (let i = start; i >= 0; i--) {
+                    const annotId = list[i];
+                    const annotation = annotations.all[annotId];
+                    if (annotation.itemType === PdfItemType.WIDGET &&
+                        !annotation.widget.readOnly) {
+                        return annotation;
+                    }
+                }
+                if (pageNumber === 1) {
+                    return null;
+                }
+                return getPreviewsFormFieldOnPage(pageNumber - 1, -1);
+            };
+            const currentWidgetIndex = annotations.byPage[this.widgetAnnotation.page].findIndex((a) => { var _a; return a === ((_a = this.widgetAnnotation) === null || _a === void 0 ? void 0 : _a.id); });
+            let currentPage = this.widgetAnnotation.page;
+            let nextFormField = null;
+            if (reverse) {
+                if (currentWidgetIndex === 0) {
+                    if (currentPage === 1) {
+                        nextFormField = this.widgetAnnotation;
+                    }
+                    else {
+                        nextFormField = getPreviewsFormFieldOnPage(this.widgetAnnotation.page - 1, -1);
+                    }
+                }
+                else {
+                    nextFormField = getPreviewsFormFieldOnPage(this.widgetAnnotation.page, currentWidgetIndex - 1);
+                }
+            }
+            else {
+                nextFormField = getNextFormFieldOnPage(this.widgetAnnotation.page, currentWidgetIndex + 1);
+            }
+            if (nextFormField) {
+                this.blur();
+                this.pdfViewerCanvas.activateModule('FormFieldModule', {
+                    annotationId: nextFormField.id,
+                    action: 'select',
+                });
+            }
+        }
+    }
+    blur() {
+        if (this.hasFocus) {
+            this.hasFocus = false;
+            this.remove();
+        }
+    }
+}

package/es6/modules/form-fields/FormFieldModule.d.ts

@@ -0,0 +1,15 @@
+import { CanvasModule, CanvasModuleType } from '../CanvasModule';
+export declare class FormFieldModule extends CanvasModule {
+    static moduleInfo: {
+        name: string;
+        moduleType: CanvasModuleType;
+        requiredFeatures: {
+            annotate: boolean;
+            fillFormFields: boolean;
+        };
+    };
+    constructor();
+    onRegister(): {};
+    activate(args: any): void;
+    onEdit(args: any): void;
+}

package/es6/modules/form-fields/FormFieldModule.js

@@ -0,0 +1,27 @@
+import { CanvasModule, CanvasModuleType } from '../CanvasModule';
+import { EditFormFieldLayer } from './EditFormFieldLayer';
+export class FormFieldModule extends CanvasModule {
+    constructor() {
+        super();
+        this.name = FormFieldModule.moduleInfo.name;
+    }
+    onRegister() {
+        return {};
+    }
+    activate(args) {
+        if (!this.canvasLayers['edit']) {
+            this.onEdit(args);
+        }
+    }
+    onEdit(args) {
+        this.createCanvasLayer('edit', EditFormFieldLayer, args);
+    }
+}
+FormFieldModule.moduleInfo = {
+    name: 'FormFieldModule',
+    moduleType: CanvasModuleType.Layer,
+    requiredFeatures: {
+        annotate: false,
+        fillFormFields: true,
+    },
+};

package/es6/modules/form-fields/ListBoxWidget.d.ts

@@ -0,0 +1,9 @@
+import { WidgetBase } from './WidgetBase';
+export declare class ListBoxWidget extends WidgetBase {
+    createFormField(): HTMLSelectElement;
+    onRemove(): void;
+    setFocus(): void;
+    private handleOnKeyDown;
+    private handleOnBlur;
+    private handleOnChange;
+}

package/es6/modules/form-fields/ListBoxWidget.js

@@ -0,0 +1,73 @@
+import { WidgetBase } from './WidgetBase';
+export class ListBoxWidget extends WidgetBase {
+    createFormField() {
+        const formField = document.createElement('select');
+        formField.setAttribute('required', 'true');
+        if (this.widget.multiSelectAllowed) {
+            formField.setAttribute('multiple', 'true');
+        }
+        else {
+            formField.setAttribute('size', `${this.widget.options.size}`);
+        }
+        formField.classList.add('pwv-formField__ListBox');
+        const values = Array.from(this.widget.chosen.values());
+        for (let i = 0; i < this.widget.options.size; i++) {
+            const value = this.widget.options.get(i);
+            const item = document.createElement('option');
+            item.value = i.toString();
+            item.textContent = value;
+            formField.appendChild(item);
+            item.selected = values.includes(i);
+        }
+        this.handleOnChange = this.handleOnChange.bind(this);
+        this.handleOnKeyDown = this.handleOnKeyDown.bind(this);
+        this.handleOnBlur = this.handleOnBlur.bind(this);
+        formField.addEventListener('change', this.handleOnChange);
+        formField.addEventListener('keydown', this.handleOnKeyDown);
+        formField.addEventListener('blur', this.handleOnBlur);
+        formField.addEventListener('wheel', (e) => {
+            e.stopPropagation();
+        });
+        return formField;
+    }
+    onRemove() {
+        this.editorElement.removeEventListener('change', this.handleOnChange);
+        this.editorElement.removeEventListener('keydown', this.handleOnKeyDown);
+        this.editorElement.removeEventListener('blur', this.handleOnBlur);
+    }
+    setFocus() {
+        this.editorElement.focus();
+    }
+    handleOnKeyDown(e) {
+        if (e.code === 'Tab') {
+            this.onTab(e.shiftKey);
+        }
+        else if (e.code === 'Escape') {
+            this.onBlur();
+        }
+    }
+    handleOnBlur(e) {
+        this.onBlur();
+    }
+    handleOnChange(e) {
+        let selectedOptions = [];
+        if (!e.target.value) {
+            const value = Array.from(this.widget.chosen.values()).shift();
+            selectedOptions = [value];
+            e.target.value = value;
+        }
+        else {
+            selectedOptions = [...e.target.options]
+                .filter((o) => o.selected)
+                .map((o) => parseInt(o.value));
+            if (!this.widget.multiSelectAllowed) {
+                const value = selectedOptions[0];
+                selectedOptions = [value];
+                e.target.value = value;
+            }
+        }
+        this.widget.chosen.clear();
+        selectedOptions.forEach((o) => this.widget.chosen.add(o));
+        this.saveWidget();
+    }
+}

package/es6/modules/form-fields/RadioButtonWidget.d.ts

@@ -0,0 +1,9 @@
+import { WidgetBase } from './WidgetBase';
+export declare class RadioButtonWidget extends WidgetBase {
+    createFormField(): HTMLLabelElement;
+    onRemove(): void;
+    setFocus(): void;
+    private handleOnKeyDown;
+    private handleOnBlur;
+    private handleOnChange;
+}

package/es6/modules/form-fields/RadioButtonWidget.js

@@ -0,0 +1,45 @@
+import { WidgetBase } from './WidgetBase';
+export class RadioButtonWidget extends WidgetBase {
+    createFormField() {
+        const formField = document.createElement('label');
+        formField.classList.add('pwv-formField__RadioButton');
+        formField.style.overflow = 'hidden';
+        const radio = document.createElement('input');
+        radio.type = 'radio';
+        radio.checked = this.widget.selected;
+        radio.style.position = 'absolute';
+        radio.style.top = '-20px';
+        radio.style.left = '-20px';
+        formField.appendChild(radio);
+        this.handleOnChange = this.handleOnChange.bind(this);
+        this.handleOnKeyDown = this.handleOnKeyDown.bind(this);
+        this.handleOnBlur = this.handleOnBlur.bind(this);
+        formField.addEventListener('change', this.handleOnChange);
+        formField.addEventListener('keydown', this.handleOnKeyDown);
+        formField.addEventListener('blur', this.handleOnBlur);
+        return formField;
+    }
+    onRemove() {
+        this.editorElement.removeEventListener('change', this.handleOnChange);
+        this.editorElement.removeEventListener('keydown', this.handleOnKeyDown);
+        this.editorElement.removeEventListener('blur', this.handleOnBlur);
+    }
+    setFocus() {
+        this.editorElement.focus();
+    }
+    handleOnKeyDown(e) {
+        if (e.code === 'Tab') {
+            this.onTab(e.shiftKey);
+        }
+        else if (e.code === 'Escape') {
+            this.onBlur();
+        }
+    }
+    handleOnBlur(e) {
+        this.onBlur();
+    }
+    handleOnChange(e) {
+        this.widget.push();
+        this.saveWidget();
+    }
+}

package/es6/modules/form-fields/SelectListWidget.d.ts

@@ -0,0 +1,9 @@
+import { WidgetBase } from './WidgetBase';
+export declare class SelectListWidget extends WidgetBase {
+    createFormField(): HTMLSelectElement;
+    onRemove(): void;
+    setFocus(): void;
+    private handleOnKeyDown;
+    private handleOnBlur;
+    private handleOnChange;
+}

package/es6/modules/form-fields/SelectListWidget.js

@@ -0,0 +1,45 @@
+import { WidgetBase } from './WidgetBase';
+export class SelectListWidget extends WidgetBase {
+    createFormField() {
+        const formField = document.createElement('select');
+        formField.classList.add('pwv-formField__SelectList');
+        for (let i = 0; i < this.widget.options.size; i++) {
+            const value = this.widget.options.get(i);
+            const item = document.createElement('option');
+            item.value = i.toString();
+            item.textContent = value;
+            formField.appendChild(item);
+        }
+        formField.value = this.widget.chosen;
+        this.handleOnChange = this.handleOnChange.bind(this);
+        this.handleOnKeyDown = this.handleOnKeyDown.bind(this);
+        this.handleOnBlur = this.handleOnBlur.bind(this);
+        formField.addEventListener('change', this.handleOnChange);
+        formField.addEventListener('keydown', this.handleOnKeyDown);
+        formField.addEventListener('blur', this.handleOnBlur);
+        return formField;
+    }
+    onRemove() {
+        // this.editorElement.removeEventListener('change', this.handleOnChange)
+        // this.editorElement.removeEventListener('keydown', this.handleOnKeyDown)
+        // this.editorElement.removeEventListener('blur', this.handleOnBlur)
+    }
+    setFocus() {
+        this.editorElement.focus();
+    }
+    handleOnKeyDown(e) {
+        if (e.code === 'Tab') {
+            this.onTab(e.shiftKey);
+        }
+        else if (e.code === 'Escape') {
+            this.onBlur();
+        }
+    }
+    handleOnBlur(e) {
+        this.onBlur();
+    }
+    handleOnChange(e) {
+        this.widget.chosen = parseInt(e.target.value);
+        this.saveWidget();
+    }
+}

package/es6/modules/form-fields/TextBoxWidget.d.ts

@@ -0,0 +1,9 @@
+import { WidgetBase } from './WidgetBase';
+export declare class TextBoxWidget extends WidgetBase {
+    createFormField(): HTMLInputElement | HTMLTextAreaElement;
+    onRemove(): void;
+    setFocus(): void;
+    private handleOnKeyDown;
+    private handleOnBlur;
+    private handleOnChange;
+}

package/es6/modules/form-fields/TextBoxWidget.js

@@ -0,0 +1,53 @@
+import { WidgetBase } from './WidgetBase';
+export class TextBoxWidget extends WidgetBase {
+    createFormField() {
+        const formField = this.widget.multilineAllowed
+            ? document.createElement('textarea')
+            : document.createElement('input');
+        formField.classList.add('pwv-formField__TextBox');
+        if (this.widget.text) {
+            formField.value = this.widget.text;
+        }
+        if (this.widget.maxLength && this.widget.maxLength >= 0) {
+            formField.maxLength = this.widget.maxLength;
+        }
+        if (this.widget.comb) {
+            formField.style.letterSpacing = '1em';
+        }
+        this.handleOnChange = this.handleOnChange.bind(this);
+        this.handleOnKeyDown = this.handleOnKeyDown.bind(this);
+        this.handleOnBlur = this.handleOnBlur.bind(this);
+        formField.addEventListener('input', this.handleOnChange);
+        formField.addEventListener('keydown', this.handleOnKeyDown);
+        formField.addEventListener('blur', this.handleOnBlur);
+        return formField;
+    }
+    onRemove() {
+        // this.editorElement.removeEventListener('change', this.handleOnChange)
+        // this.editorElement.removeEventListener('keydown', this.handleOnKeyDown)
+        // this.editorElement.removeEventListener('blur', this.handleOnBlur)
+    }
+    setFocus() {
+        this.editorElement.focus();
+    }
+    handleOnKeyDown(e) {
+        if (e.code === 'Tab') {
+            this.onTab(e.shiftKey);
+        }
+        else if (e.code === 'Escape') {
+            this.onBlur();
+        }
+    }
+    handleOnBlur(e) {
+        this.onBlur();
+    }
+    handleOnChange(e) {
+        try {
+            this.widget.text = e.target.value;
+        }
+        catch (err) {
+            console.warn(err);
+        }
+        this.saveWidget();
+    }
+}

package/es6/modules/form-fields/WidgetBase.d.ts

@@ -0,0 +1,23 @@
+import { WidgetType } from '../../pdf-viewer-api/enums';
+export interface WidgetBaseOptions {
+    widgetType: WidgetType;
+    widget: any;
+    pdfDocument: any;
+    onTab: (shiftKey: boolean) => void;
+    onBlur: () => void;
+}
+export declare abstract class WidgetBase {
+    protected element: HTMLElement;
+    protected widgetType: WidgetType;
+    protected widget: any;
+    protected pdfDocument: any;
+    protected editorElement: HTMLElement;
+    protected onTab: (shiftKey: boolean) => void;
+    protected onBlur: () => void;
+    constructor(element: HTMLElement, options: WidgetBaseOptions);
+    protected abstract createFormField(): HTMLElement;
+    protected saveWidget(): void;
+    abstract setFocus(): void;
+    abstract onRemove(): void;
+    setZoom(zoom: number): void;
+}

package/es6/modules/form-fields/WidgetBase.js

@@ -0,0 +1,29 @@
+export class WidgetBase {
+    constructor(element, options) {
+        this.element = element;
+        this.widgetType = options.widgetType;
+        this.widget = options.widget;
+        this.pdfDocument = options.pdfDocument;
+        this.onTab = options.onTab;
+        this.onBlur = options.onBlur;
+        this.editorElement = this.createFormField();
+        this.editorElement.classList.add('pwv-formField__Element');
+        this.element.appendChild(this.editorElement);
+        window.setTimeout(() => {
+            this.setFocus();
+        }, 1);
+    }
+    saveWidget() {
+        this.pdfDocument
+            .editAnnotation(this.widget)
+            .then(() => { })
+            .catch((err) => {
+            console.warn(err);
+        });
+    }
+    setZoom(zoom) {
+        this.editorElement.style.transform = `scale(${zoom})`;
+        this.editorElement.style.width = this.element.clientWidth / zoom + 'px';
+        this.editorElement.style.height = this.element.clientHeight / zoom + 'px';
+    }
+}

package/es6/modules/freetext-annotation/AddFreetextAnnotationLayer.d.ts

@@ -0,0 +1,19 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+export declare class AddFreetextAnnotationLayer extends CanvasLayer {
+    private context;
+    private colors;
+    private selectedColor;
+    private borderWidths;
+    private pointerDown;
+    private startPoint;
+    private page;
+    onCreate(): void;
+    onSave(): Promise<void>;
+    onRemove(): void;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private setColor;
+    private setBorderWidth;
+    private close;
+    private createFreeTextAnnotation;
+}