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

package/es6/modules/CanvasModule.js

@@ -0,0 +1,98 @@
+export var CanvasModuleType;
+(function (CanvasModuleType) {
+    CanvasModuleType[CanvasModuleType["Tool"] = 0] = "Tool";
+    CanvasModuleType[CanvasModuleType["Layer"] = 1] = "Layer";
+})(CanvasModuleType || (CanvasModuleType = {}));
+export class CanvasModule {
+    constructor() {
+        this.canvasLayers = {};
+        this.store = null;
+        this.pdfApi = null;
+        this.pdfViewerCanvas = null;
+        this.options = null;
+        this.name = null;
+        this.containerElement = null;
+        this.createCanvasLayer = this.createCanvasLayer.bind(this);
+        this.removeCanvasLayer = this.removeCanvasLayer.bind(this);
+    }
+    register(containerElement, store, pdfApi, pdfViewerCanvas, options) {
+        this.containerElement = containerElement;
+        this.store = store;
+        this.pdfApi = pdfApi;
+        this.pdfViewerCanvas = pdfViewerCanvas;
+        this.options = options;
+        return this.onRegister();
+    }
+    render(timestamp, state) {
+        const keys = Object.keys(this.canvasLayers);
+        for (let i = 0; i < keys.length; i++) {
+            this.canvasLayers[keys[i]].render(timestamp, state);
+        }
+    }
+    deactivate() {
+        const keys = Object.keys(this.canvasLayers);
+        for (let i = 0; i < keys.length; i++) {
+            const name = keys[i];
+            this.canvasLayers[name].onRemove();
+            delete this.canvasLayers[name];
+        }
+    }
+    resize(width, height) {
+        const keys = Object.keys(this.canvasLayers);
+        for (let i = 0; i < keys.length; i++) {
+            this.canvasLayers[keys[i]].resize(width, height);
+        }
+    }
+    getCanvasSize() {
+        const rect = {
+            width: 0,
+            height: 0,
+        };
+        if (this.containerElement !== null) {
+            const clientRect = this.containerElement.getBoundingClientRect();
+            rect.width = clientRect.width;
+            rect.height = clientRect.height;
+        }
+        return rect;
+    }
+    onSave() {
+        const promise = new Promise((resolve, reject) => {
+            const keys = Object.keys(this.canvasLayers);
+            const promises = [];
+            for (let i = 0; i < keys.length; i++) {
+                promises.push(this.canvasLayers[keys[i]].onSave());
+            }
+            Promise.all(promises)
+                .then(() => {
+                resolve();
+            })
+                .catch((error) => {
+                reject('OnSave failed on a canvas layer: ' + error);
+            });
+        });
+        return promise;
+    }
+    createCanvasLayer(name, canvasLayer, args) {
+        if (this.containerElement &&
+            this.store &&
+            this.pdfApi &&
+            this.pdfViewerCanvas &&
+            this.options) {
+            if (this.canvasLayers[name]) {
+                throw new Error('duplicate canvas layer name');
+            }
+            const layer = new canvasLayer(this, name, this.containerElement, this.store, this.pdfApi, this.pdfViewerCanvas, this.options);
+            this.canvasLayers[name] = layer;
+            layer.onCreate(args);
+        }
+        else {
+            throw new Error('canvas layer is not registered');
+        }
+    }
+    removeCanvasLayer(name) {
+        if (this.canvasLayers[name]) {
+            this.canvasLayers[name].onRemove();
+            delete this.canvasLayers[name];
+        }
+    }
+}

package/es6/modules/eraser/EraserLayer.d.ts

@@ -0,0 +1,13 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+export declare class EraserLayer extends CanvasLayer {
+    private context;
+    private eraserRadius;
+    onCreate(args?: any): void;
+    onRemove(): void;
+    onSave(): Promise<void>;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private setEraserRadius;
+    private deleteFirstInkLineCloseToPoint;
+    private updateInkAnnotation;
+}

package/es6/modules/eraser/EraserLayer.js

@@ -0,0 +1,141 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { PdfItemType } from '../../pdf-viewer-api/';
+import { CursorStyle } from '../../pdf-viewer-canvas/state/viewer';
+import { createEraserToolbar } from './EraserToolbar';
+const moduleLayerName = 'EraserTool';
+export class EraserLayer extends CanvasLayer {
+    constructor() {
+        super(...arguments);
+        this.context = null;
+        this.eraserRadius = this.options.annotation.eraserRadius;
+    }
+    onCreate(args) {
+        this.setEraserRadius = this.setEraserRadius.bind(this);
+        this.remove = this.remove.bind(this);
+        this.context = this.createCanvas();
+        const toolbarElement = this.module.toolbarElement;
+        createEraserToolbar({
+            radius: this.eraserRadius,
+            onRadiusChanged: this.setEraserRadius,
+            onCancel: this.remove,
+        }, toolbarElement);
+        this.store.viewer.beginModule(moduleLayerName);
+    }
+    onRemove() {
+        this.removeCanvasElements();
+        this.context = null;
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        toolbarElement.innerHTML = '';
+        this.store.viewer.endModule(moduleLayerName);
+    }
+    onSave() {
+        return new Promise((resolve) => {
+            return resolve();
+        });
+    }
+    render(timestamp, state) {
+        var _a;
+        if (state.viewer.modeChanged && state.viewer.selectedModuleName !== moduleLayerName) {
+            this.remove();
+            return;
+        }
+        const pointerPos = {
+            x: state.pointer.x.devicePixels,
+            y: state.pointer.y.devicePixels,
+        };
+        const pointerPdfPos = this.pdfApi.transformScreenPointToPdfPoint(pointerPos);
+        const cursorStyle = pointerPdfPos.isOnPage ? CursorStyle.NONE : CursorStyle.NOT_ALLOWED;
+        this.store.viewer.setCursorStyle(cursorStyle);
+        const ctx = this.context;
+        if (ctx) {
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            if (pointerPdfPos.isOnPage) {
+                ctx.save();
+                ctx.lineWidth = 1;
+                if (this.eraserRadius >= 8) {
+                    ctx.setLineDash([4 * devicePixelRatio, 4 * devicePixelRatio]);
+                }
+                ctx.beginPath();
+                ctx.arc(pointerPos.x, pointerPos.y, (this.eraserRadius * devicePixelRatio) / 2, 0, 2 * Math.PI);
+                ctx.stroke();
+                ctx.restore();
+            }
+        }
+        if (!pointerPdfPos.isOnPage || state.pointer.action !== 'click') {
+            return;
+        }
+        const inkAnnotations = (_a = this.pdfApi
+            .getAnnotationsOnPoint(pointerPos)) === null || _a === void 0 ? void 0 : _a.filter((a) => a.itemType === PdfItemType.INK);
+        if (!inkAnnotations) {
+            return;
+        }
+        const annot = this.deleteFirstInkLineCloseToPoint(inkAnnotations, pointerPdfPos.pdfPoint);
+        if (annot) {
+            this.updateInkAnnotation(annot);
+        }
+    }
+    setEraserRadius(radius) {
+        this.options.annotation.eraserRadius = radius;
+        this.eraserRadius = radius;
+    }
+    deleteFirstInkLineCloseToPoint(inkAnnotations, pdfPoint) {
+        if (!this.context) {
+            return null;
+        }
+        const ctx = this.context;
+        ctx.save();
+        for (let inkAnnotation of inkAnnotations) {
+            ctx.lineWidth = Math.max(inkAnnotation.border.width, this.eraserRadius * devicePixelRatio);
+            ctx.lineCap = 'round';
+            for (let inkLine of inkAnnotation.inkList) {
+                const path = new Path2D();
+                let isFirstPoint = true;
+                for (let point of inkLine) {
+                    if (isFirstPoint) {
+                        path.moveTo(point.x, point.y);
+                        isFirstPoint = false;
+                    }
+                    else {
+                        path.lineTo(point.x, point.y);
+                    }
+                }
+                const isPointInStroke = ctx.isPointInStroke(path, pdfPoint.pdfX, pdfPoint.pdfY);
+                if (isPointInStroke) {
+                    inkAnnotation.inkList.splice(inkAnnotation.inkList.indexOf(inkLine), 1);
+                    return inkAnnotation;
+                }
+            }
+        }
+        ctx.restore();
+        return null;
+    }
+    updateInkAnnotation(inkAnnotation) {
+        return new Promise((resolve, reject) => {
+            if (inkAnnotation.inkList.length) {
+                this.pdfApi
+                    .updateItem(inkAnnotation)
+                    .then((item) => {
+                    this.store.annotations.updateAnnotation(item);
+                    resolve();
+                })
+                    .catch((err) => {
+                    console.error(err);
+                    reject();
+                });
+            }
+            else {
+                const id = inkAnnotation.id;
+                this.pdfApi
+                    .deleteItem(inkAnnotation)
+                    .then(() => {
+                    resolve();
+                })
+                    .catch((err) => {
+                    console.error(err);
+                    reject();
+                });
+            }
+        });
+    }
+}

package/es6/modules/eraser/EraserModule.d.ts

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

package/es6/modules/eraser/EraserModule.js

@@ -0,0 +1,34 @@
+import { CanvasModule, CanvasModuleType } from '../CanvasModule';
+import { EraserLayer } from './EraserLayer';
+export class EraserModule extends CanvasModule {
+    constructor() {
+        super();
+        this.toolbarElement = null;
+        this.name = EraserModule.moduleInfo.name;
+        this.activate = this.activate.bind(this);
+    }
+    onRegister() {
+        this.toolbarElement = document.createElement('div');
+        return {
+            toolbar: this.toolbarElement,
+        };
+    }
+    activate() {
+        if (!this.canvasLayers['add']) {
+            this.createCanvasLayer('add', EraserLayer);
+        }
+        else {
+            this.removeCanvasLayer('add');
+        }
+    }
+}
+EraserModule.moduleInfo = {
+    name: 'EraserModule',
+    moduleType: CanvasModuleType.Tool,
+    requiredFeatures: {
+        annotate: true,
+        fillFormFields: false,
+    },
+    translationKey: 'eraser.begin',
+    icon: 'eraser',
+};

package/es6/modules/eraser/EraserToolbar.d.ts

@@ -0,0 +1,10 @@
+export interface EraserToolbarProps {
+    radius: number;
+    onRadiusChanged(width: number): void;
+    onCancel(): void;
+}
+export interface EraserToolbarActions {
+    setRadius(radius: number): void;
+    setCancel(): void;
+}
+export declare const createEraserToolbar: (props: EraserToolbarProps, element: HTMLElement) => EraserToolbarActions;

package/es6/modules/eraser/EraserToolbar.js

@@ -0,0 +1,30 @@
+import { app, h } from '../../lib/hyperapp';
+import { translationManager } from '../../common/TranslationManager';
+import { Toolbar } from '../../common/Toolbar';
+import { ToolbarItemGroup } from '../../common/ToolbarItemGroup';
+import { ToolbarButton } from '../../common/ToolbarButton';
+import { icons } from '../../common/icons';
+import { ToolbarSeparator } from '../../common/ToolbarSeparator';
+import { RangeSlider } from '../../common/RangeSlider';
+export const createEraserToolbar = (props, element) => {
+    const state = {
+        radius: props.radius,
+    };
+    const actions = {
+        setRadius: (radius) => ($state) => {
+            props.onRadiusChanged(radius);
+            return Object.assign(Object.assign({}, $state), { radius });
+        },
+        setCancel: () => ($state) => {
+            return Object.assign({}, $state);
+        },
+    };
+    const App = () => h(EraserToolbar, null);
+    const EraserToolbar = ({}) => ($state, $actions) => (h(Toolbar, { allowWrap: true, alignCenter: true },
+        h(ToolbarItemGroup, null,
+            h(RangeSlider, { tooltip: translationManager.getText('eraser.eraserWidth'), min: 2, max: 50, step: 1, value: $state.radius, text: `${$state.radius}px`, icon: icons.circleDashed, onChange: $actions.setRadius, className: "pwv-opacityslider" })),
+        h(ToolbarItemGroup, { pushRight: true },
+            h(ToolbarSeparator, null),
+            h(ToolbarButton, { icon: icons.close, onClick: props.onCancel }))));
+    return app(state, actions, App, element);
+};

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

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

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

@@ -0,0 +1,45 @@
+import { WidgetBase } from './WidgetBase';
+export class CheckBoxWidget extends WidgetBase {
+    createFormField() {
+        const formField = document.createElement('label');
+        formField.classList.add('pwv-formField__CheckBox');
+        formField.style.overflow = 'hidden';
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.checked = this.widget.selected;
+        checkbox.style.position = 'absolute';
+        checkbox.style.top = '-20px';
+        checkbox.style.left = '-20px';
+        formField.appendChild(checkbox);
+        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/ComboBoxWidget.d.ts

@@ -0,0 +1,22 @@
+import { WidgetBase } from './WidgetBase';
+export declare class ComboBoxWidget extends WidgetBase {
+    private input;
+    private dataList;
+    private btnClear;
+    private btnClearPressed;
+    private hasPendingChanges;
+    private saveThrottlingTimer;
+    createFormField(): HTMLDivElement;
+    onRemove(): void;
+    setFocus(): void;
+    private updateBtnVisibility;
+    private updateWidget;
+    private inputOnFocus;
+    private inputOnBlur;
+    private inputOnInput;
+    private inputOnChange;
+    private inputOnKeyDown;
+    private btnOnClick;
+    private btnOnMouseDown;
+    private btnOnMouseUp;
+}

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

@@ -0,0 +1,152 @@
+import { WidgetBase } from './WidgetBase';
+export class ComboBoxWidget extends WidgetBase {
+    constructor() {
+        super(...arguments);
+        this.btnClearPressed = false;
+        this.hasPendingChanges = false;
+        this.saveThrottlingTimer = undefined;
+    }
+    createFormField() {
+        // bind events
+        this.inputOnFocus = this.inputOnFocus.bind(this);
+        this.inputOnBlur = this.inputOnBlur.bind(this);
+        this.inputOnInput = this.inputOnInput.bind(this);
+        this.inputOnChange = this.inputOnChange.bind(this);
+        this.inputOnKeyDown = this.inputOnKeyDown.bind(this);
+        this.btnOnClick = this.btnOnClick.bind(this);
+        this.btnOnMouseDown = this.btnOnMouseDown.bind(this);
+        this.btnOnMouseUp = this.btnOnMouseUp.bind(this);
+        // form field
+        const formField = document.createElement('div');
+        formField.classList.add('pwv-formField__ComboBox');
+        // datalist
+        this.dataList = document.createElement('datalist');
+        this.dataList.id = Math.random().toString(36).substring(2, 8);
+        for (let i = 0; i < this.widget.options.size; i++) {
+            const value = this.widget.options.get(i);
+            const item = document.createElement('option');
+            item.value = value;
+            item.textContent = value;
+            this.dataList.appendChild(item);
+        }
+        // input
+        this.input = document.createElement('input');
+        this.input.setAttribute('list', this.dataList.id);
+        this.input.style.border = 'none';
+        this.input.style.boxSizing = 'border-box';
+        this.input.style.width = '100%';
+        this.input.style.maxWidth = '100%';
+        this.input.value =
+            this.widget.chosen !== null
+                ? this.widget.options.get(this.widget.chosen)
+                : this.widget.customEntry;
+        this.input.addEventListener('focus', this.inputOnFocus);
+        this.input.addEventListener('blur', this.inputOnBlur);
+        this.input.addEventListener('input', this.inputOnInput);
+        this.input.addEventListener('change', this.inputOnChange);
+        this.input.addEventListener('keydown', this.inputOnKeyDown);
+        // clear button
+        this.btnClear = document.createElement('button');
+        this.btnClear.tabIndex = -1;
+        const icon = document.createElement('span');
+        icon.classList.add('pwv-icon');
+        const iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        iconSvg.setAttribute('viewBox', '0 0 320 512');
+        const iconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        iconPath.setAttribute('d', 'M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z');
+        iconPath.setAttribute('stroke-width', '1px');
+        iconPath.setAttribute('shape-rendering', 'optimizeQuality');
+        iconSvg.appendChild(iconPath);
+        icon.appendChild(iconSvg);
+        this.btnClear.appendChild(icon);
+        this.btnClear.addEventListener('mousedown', this.btnOnMouseDown);
+        this.btnClear.addEventListener('mouseup', this.btnOnMouseUp);
+        this.btnClear.addEventListener('mouseleave', this.btnOnMouseUp);
+        this.btnClear.addEventListener('click', this.btnOnClick);
+        formField.appendChild(this.input);
+        formField.appendChild(this.dataList);
+        formField.appendChild(this.btnClear);
+        return formField;
+    }
+    onRemove() {
+        if (this.saveThrottlingTimer) {
+            window.clearTimeout(this.saveThrottlingTimer);
+        }
+        if (this.hasPendingChanges) {
+            this.saveWidget();
+        }
+        this.input.removeEventListener('focus', this.inputOnFocus);
+        this.input.removeEventListener('blur', this.inputOnBlur);
+        this.input.removeEventListener('input', this.inputOnInput);
+        this.input.removeEventListener('change', this.inputOnChange);
+        this.input.removeEventListener('keydown', this.inputOnKeyDown);
+        this.btnClear.removeEventListener('mousedown', this.btnOnMouseDown);
+        this.btnClear.removeEventListener('mouseup', this.btnOnMouseUp);
+        this.btnClear.removeEventListener('mouseleave', this.btnOnMouseUp);
+        this.btnClear.removeEventListener('click', this.btnOnClick);
+    }
+    setFocus() {
+        this.input.focus();
+    }
+    updateBtnVisibility() {
+        if (this.btnClear) {
+            this.btnClear.style.display = this.input.value === '' ? 'none' : 'flex';
+        }
+    }
+    updateWidget() {
+        const { value, list } = this.input;
+        const options = list.options;
+        const chosen = [...options].findIndex((i) => i.value === value);
+        if (chosen >= 0) {
+            this.widget.chosen = chosen;
+        }
+        else {
+            this.widget.customEntry = value;
+        }
+        if (this.saveThrottlingTimer) {
+            window.clearTimeout(this.saveThrottlingTimer);
+        }
+        this.saveThrottlingTimer = window.setTimeout(() => {
+            this.saveWidget();
+            this.hasPendingChanges = false;
+        }, 500);
+    }
+    inputOnFocus(e) {
+        this.updateBtnVisibility();
+    }
+    inputOnBlur(e) {
+        if (!this.btnClearPressed) {
+            this.saveWidget();
+            this.hasPendingChanges = false;
+            this.onBlur();
+        }
+    }
+    inputOnInput(e) {
+        this.updateBtnVisibility();
+        this.updateWidget();
+    }
+    inputOnChange(e) {
+        this.updateBtnVisibility();
+    }
+    inputOnKeyDown(e) {
+        if (e.code === 'Tab') {
+            this.onTab(e.shiftKey);
+        }
+        else if (e.code === 'Escape') {
+            this.input.blur();
+        }
+    }
+    btnOnClick(e) {
+        this.input.value = '';
+        this.updateWidget();
+        this.updateBtnVisibility();
+        this.input.focus();
+    }
+    btnOnMouseDown(e) {
+        this.btnClearPressed = true;
+    }
+    btnOnMouseUp(e) {
+        this.input.focus();
+        this.btnClearPressed = false;
+    }
+}

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

@@ -0,0 +1,17 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+export declare class EditFormFieldLayer extends CanvasLayer {
+    private widgetAnnotation;
+    private formFieldElement;
+    private hasFocus;
+    private widgetEditor;
+    onCreate(args: any): void;
+    cancel(): void;
+    onSave(): Promise<void>;
+    close(): void;
+    onRemove(): void;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private updateFormFieldElementPosition;
+    private selectNextFormField;
+    private blur;
+}