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

package/es6/modules/highlight-annotation/AddHighlightAnnotationToolbar.js

@@ -0,0 +1,52 @@
+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 { ColorPicker } from '../../common/ColorPicker';
+import { HighlightTool } from './AddHighlightAnnotationLayer';
+export const createAddHighlightAnnotationToolbar = (props, element) => {
+    const state = {
+        colors: props.colors,
+        selectedTool: props.selectedTool,
+        selectedColor: props.selectedColor,
+    };
+    const actions = {
+        setColor: (color) => ($state) => {
+            props.onColorChanged(color);
+            return Object.assign(Object.assign({}, $state), { selectedColor: color });
+        },
+        setTool: (tool) => ($state) => {
+            props.onToolChanged(tool);
+            return Object.assign(Object.assign({}, $state), { selectedTool: tool });
+        },
+    };
+    const App = () => h(AddHighlightAnnotationToolbar, null);
+    /* tslint:disable-next-line:max-line-length */
+    const AddHighlightAnnotationToolbar = ({}) => ($state, $actions) => (h(Toolbar, { allowWrap: true, alignCenter: true },
+        h(ToolbarItemGroup, null,
+            h(ColorPicker, { colors: $state.colors, color: $state.selectedColor, icon: icons.fillColor, mode: "buttons", onChange: $actions.setColor }),
+            h(ToolbarSeparator, null)),
+        h(ToolbarItemGroup, null,
+            h(ToolbarButton, { tooltip: translationManager.getText('annotHighlight.highlight'), icon: icons.highlighter, active: $state.selectedTool === HighlightTool.HIGHLIGHT, onClick: () => {
+                    $actions.setTool(HighlightTool.HIGHLIGHT);
+                } }),
+            h(ToolbarButton, { tooltip: translationManager.getText('annotHighlight.underline'), icon: icons.underline, active: $state.selectedTool === HighlightTool.UNDERLINE, onClick: () => {
+                    $actions.setTool(HighlightTool.UNDERLINE);
+                } }),
+            h(ToolbarButton, { tooltip: translationManager.getText('annotHighlight.squiggly'), icon: icons.squiggly, active: $state.selectedTool === HighlightTool.SQUIGGLY, onClick: () => {
+                    $actions.setTool(HighlightTool.SQUIGGLY);
+                } }),
+            h(ToolbarButton, { tooltip: translationManager.getText('annotHighlight.strikeOut'), icon: icons.strikethrough, active: $state.selectedTool === HighlightTool.STRIKE_OUT, onClick: () => {
+                    $actions.setTool(HighlightTool.STRIKE_OUT);
+                } }),
+            h(ToolbarButton, { tooltip: translationManager.getText('annotHighlight.rectangularHighlight'), icon: icons.rectangularHighlighter, active: $state.selectedTool === HighlightTool.RECTANGULAR_HIGHLIGHT, onClick: () => {
+                    $actions.setTool(HighlightTool.RECTANGULAR_HIGHLIGHT);
+                } })),
+        h(ToolbarItemGroup, { pushRight: true },
+            h(ToolbarSeparator, null),
+            h(ToolbarButton, { icon: icons.close, onClick: props.onClose }))));
+    return app(state, actions, App, element);
+};

package/es6/modules/highlight-annotation/EditHighlightAnnotationLayer.d.ts

@@ -0,0 +1,15 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+export declare class EditHighlightAnnotationLayer extends CanvasLayer {
+    private highlightAnnotation;
+    private context;
+    private colors;
+    private selectedColor;
+    onCreate(annotationId: number): void;
+    onSave(): Promise<void>;
+    onRemove(): void;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private setColor;
+    private close;
+    private updateHighlightAnnotation;
+}

package/es6/modules/highlight-annotation/EditHighlightAnnotationLayer.js

@@ -0,0 +1,104 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { Color } from '../../common/Color';
+import { createEditHighlightAnnotationToolbar } from './EditHighlightAnnotationToolbar';
+const moduleLayerName = 'EditHighlightAnnotation';
+export class EditHighlightAnnotationLayer extends CanvasLayer {
+    constructor() {
+        super(...arguments);
+        this.highlightAnnotation = null;
+        this.colors = [];
+        this.selectedColor = '';
+    }
+    onCreate(annotationId) {
+        this.highlightAnnotation = this.pdfApi.getItem(annotationId);
+        this.setColor = this.setColor.bind(this);
+        this.close = this.close.bind(this);
+        this.context = this.createCanvas();
+        const annotationOptions = this.options.annotation;
+        this.colors = annotationOptions.colors.highlightColors;
+        this.selectedColor = annotationOptions.colors.highlightAnnotationColor;
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        createEditHighlightAnnotationToolbar({
+            colors: this.colors,
+            selectedColor: this.selectedColor,
+            onColorChanged: this.setColor,
+            onClose: this.close,
+        }, toolbarElement);
+        this.store.viewer.beginModule(moduleLayerName);
+    }
+    onSave() {
+        const promise = new Promise((resolve, reject) => {
+            resolve();
+        });
+        return promise;
+    }
+    onRemove() {
+        this.removeCanvasElements();
+        this.context = null;
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        toolbarElement.innerHTML = '';
+        this.store.viewer.endModule(moduleLayerName);
+    }
+    render(timestamp, state) {
+        var _a;
+        if (state.viewer.modeChanged && state.viewer.selectedModuleName !== moduleLayerName) {
+            this.close();
+            return;
+        }
+        if (state.pointer.action === 'click' || state.pointer.action === 'dblclick') {
+            const highlightAnnotation = (_a = this.pdfApi
+                .getAnnotationsOnPoint({
+                x: state.pointer.x.devicePixels,
+                y: state.pointer.y.devicePixels,
+            })) === null || _a === void 0 ? void 0 : _a.find((a) => this.highlightAnnotation && a.id === this.highlightAnnotation.id);
+            if (!highlightAnnotation) {
+                this.close();
+                return;
+            }
+        }
+        if (this.context && this.highlightAnnotation) {
+            const ctx = this.context;
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            const rect = this.pdfApi.transformPdfPageRectToScreenRect(this.highlightAnnotation.pdfRect);
+            const lineWidth = 2 * devicePixelRatio;
+            ctx.save();
+            ctx.strokeStyle = this.options.viewer.general.textSelectionColor;
+            ctx.lineWidth = lineWidth;
+            ctx.setLineDash([lineWidth, lineWidth]);
+            ctx.strokeRect(rect.x - lineWidth, rect.y - lineWidth, rect.w + 2 * lineWidth, rect.h + 2 * lineWidth);
+            ctx.restore();
+        }
+    }
+    setColor(color) {
+        if (this.highlightAnnotation && this.highlightAnnotation.color) {
+            const newColor = new Color(color);
+            const currentColor = new Color(this.highlightAnnotation.color);
+            newColor.setOpacity(currentColor.a);
+            this.highlightAnnotation.color = newColor.toRgba();
+            this.updateHighlightAnnotation();
+        }
+    }
+    close() {
+        this.remove();
+    }
+    updateHighlightAnnotation() {
+        const promise = new Promise((resolve, reject) => {
+            if (this.pdfApi && this.highlightAnnotation) {
+                this.pdfApi
+                    .updateItem(this.highlightAnnotation)
+                    .then((item) => {
+                    resolve();
+                })
+                    .catch((error) => {
+                    console.warn(error);
+                });
+            }
+            else {
+                reject();
+            }
+        });
+        return promise;
+    }
+}

package/es6/modules/highlight-annotation/EditHighlightAnnotationToolbar.d.ts

@@ -0,0 +1,15 @@
+export interface EditHighlightAnnotationToolbarProps {
+    colors: string[];
+    selectedColor: string;
+    onColorChanged(color: string): void;
+    onClose(): void;
+}
+interface EditHighlightAnnotationToolbarState {
+    colors: string[];
+    selectedColor: string;
+}
+export interface EditHighlightAnnotationToolbarActions {
+    setColor(color: string): EditHighlightAnnotationToolbarState;
+}
+export declare const createEditHighlightAnnotationToolbar: (props: EditHighlightAnnotationToolbarProps, element: HTMLElement) => EditHighlightAnnotationToolbarActions;
+export {};

package/es6/modules/highlight-annotation/EditHighlightAnnotationToolbar.js

@@ -0,0 +1,28 @@
+import { app, h } from '../../lib/hyperapp';
+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 { ColorPicker } from '../../common/ColorPicker';
+export const createEditHighlightAnnotationToolbar = (props, element) => {
+    const state = {
+        colors: props.colors,
+        selectedColor: props.selectedColor,
+    };
+    const actions = {
+        setColor: (color) => ($state) => {
+            props.onColorChanged(color);
+            return Object.assign(Object.assign({}, $state), { selectedColor: color });
+        },
+    };
+    const App = () => h(EditHighlightAnnotationToolbar, null);
+    /* tslint:disable-next-line:max-line-length */
+    const EditHighlightAnnotationToolbar = ({}) => ($state, $actions) => (h(Toolbar, { allowWrap: true, alignCenter: true },
+        h(ToolbarItemGroup, null,
+            h(ColorPicker, { colors: $state.colors, color: $state.selectedColor, icon: icons.fillColor, mode: "buttons", onChange: $actions.setColor })),
+        h(ToolbarItemGroup, { pushRight: true },
+            h(ToolbarSeparator, null),
+            h(ToolbarButton, { icon: icons.close, onClick: props.onClose }))));
+    return app(state, actions, App, element);
+};

package/es6/modules/highlight-annotation/HighlightAnnotationModule.d.ts

@@ -0,0 +1,27 @@
+import { CanvasModule, CanvasModuleType } from '../CanvasModule';
+import { PdfItemType } from '../../pdf-viewer-api';
+export declare class HighlightAnnotationModule extends CanvasModule {
+    toolbarElement: HTMLElement | null;
+    static moduleInfo: {
+        name: string;
+        moduleType: CanvasModuleType;
+        requiredFeatures: {
+            annotate: boolean;
+            fillFormFields: boolean;
+        };
+        translationKey: string;
+        icon: string;
+    };
+    constructor();
+    onRegister(): {
+        toolbar: HTMLElement;
+        contextbar: {
+            itemTypes: PdfItemType[];
+            icon: import("../../common/icons").IconDefinition;
+            tooltip: string;
+            onCmd: (annotationId: number) => void;
+        };
+    };
+    activate(): void;
+    onEdit(annotationId: number): void;
+}

package/es6/modules/highlight-annotation/HighlightAnnotationModule.js

@@ -0,0 +1,54 @@
+import { CanvasModule, CanvasModuleType } from '../CanvasModule';
+import { AddHighlightAnnotationLayer } from './AddHighlightAnnotationLayer';
+import { PdfItemType } from '../../pdf-viewer-api';
+import { icons } from '../../common/Icon';
+import { translationManager } from '../../common/TranslationManager';
+import { EditHighlightAnnotationLayer } from './EditHighlightAnnotationLayer';
+export class HighlightAnnotationModule extends CanvasModule {
+    constructor() {
+        super();
+        this.toolbarElement = null;
+        this.name = HighlightAnnotationModule.moduleInfo.name;
+        this.activate = this.activate.bind(this);
+    }
+    onRegister() {
+        this.toolbarElement = document.createElement('div');
+        return {
+            toolbar: this.toolbarElement,
+            contextbar: {
+                itemTypes: [
+                    PdfItemType.HIGHLIGHT,
+                    PdfItemType.UNDERLINE,
+                    PdfItemType.SQUIGGLY,
+                    PdfItemType.STRIKE_OUT,
+                ],
+                icon: icons.edit,
+                tooltip: translationManager.getText('annotHighlight.edit'),
+                onCmd: (annotationId) => {
+                    this.onEdit(annotationId);
+                },
+            },
+        };
+    }
+    activate() {
+        if (!this.canvasLayers['add']) {
+            this.createCanvasLayer('add', AddHighlightAnnotationLayer);
+        }
+        else {
+            this.removeCanvasLayer('add');
+        }
+    }
+    onEdit(annotationId) {
+        this.createCanvasLayer('edit', EditHighlightAnnotationLayer, annotationId);
+    }
+}
+HighlightAnnotationModule.moduleInfo = {
+    name: 'HighlightAnnotationModule',
+    moduleType: CanvasModuleType.Tool,
+    requiredFeatures: {
+        annotate: true,
+        fillFormFields: false,
+    },
+    translationKey: 'annotHighlight.add',
+    icon: 'highlighter',
+};

package/es6/modules/image-annotations/ImageAnnotationModule.d.ts

@@ -0,0 +1,23 @@
+import { CanvasModule, CanvasModuleType } from '../CanvasModule';
+export declare class ImageAnnotationModule extends CanvasModule {
+    toolbarElement: HTMLElement | null;
+    private fileInput;
+    static moduleInfo: {
+        name: string;
+        moduleType: CanvasModuleType;
+        requiredFeatures: {
+            annotate: boolean;
+            fillFormFields: boolean;
+        };
+        translationKey: string;
+        icon: string;
+    };
+    constructor();
+    onRegister(): {
+        toolbar: HTMLElement;
+    };
+    activate(file?: File): void;
+    private createImage;
+    private onFileSelected;
+    private createImageStampAnnotation;
+}

package/es6/modules/image-annotations/ImageAnnotationModule.js

@@ -0,0 +1,169 @@
+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 { CanvasModule, CanvasModuleType } from '../CanvasModule';
+import { PdfItemType } from '../../pdf-viewer-api';
+import { imageDataUrlToUint8Array } from '../../common/Tools';
+import { MIN_SIZE } from '../../pdf-viewer-canvas/view-layers/views/AnnotationBorder';
+export class ImageAnnotationModule extends CanvasModule {
+    constructor() {
+        super();
+        this.toolbarElement = null;
+        this.fileInput = null;
+        this.name = ImageAnnotationModule.moduleInfo.name;
+        this.createImage = this.createImage.bind(this);
+        this.onFileSelected = this.onFileSelected.bind(this);
+        this.createImageStampAnnotation = this.createImageStampAnnotation.bind(this);
+    }
+    onRegister() {
+        this.toolbarElement = document.createElement('div');
+        this.fileInput = document.createElement('input');
+        this.fileInput.setAttribute('type', 'file');
+        this.fileInput.setAttribute('accept', '.jpg, .jpeg, .jpe, .jif, .jfif, .jfi, .jp2, .j2k, .jpf, .jpm, .jpg2, .j2c, .jpc, .jpx, .mj2 .tif, tiff, .png, .gif, .bmp');
+        this.fileInput.style.position = 'absolute';
+        this.fileInput.style.left = '-5000px';
+        this.fileInput.onchange = (e) => {
+            if (e.currentTarget.files && e.currentTarget.files.length) {
+                const file = e.currentTarget.files[0];
+                this.onFileSelected(file);
+                e.currentTarget.value = '';
+            }
+        };
+        this.toolbarElement.append(this.fileInput);
+        return {
+            toolbar: this.toolbarElement,
+        };
+    }
+    activate(file) {
+        if (file) {
+            this.onFileSelected(file);
+        }
+        else if (this.fileInput) {
+            this.fileInput.click();
+        }
+    }
+    createImage(dataUrl) {
+        const image = new Image();
+        image.onload = () => {
+            // image needs to be over min since the moment it is added
+            const anyUnderMinSize = image.width < MIN_SIZE || image.width < MIN_SIZE;
+            let width = image.width;
+            let height = image.height;
+            // set the smallest to MIN_SIZE
+            // and scale keeping aspect ratio
+            if (anyUnderMinSize && width <= height) {
+                height = (MIN_SIZE * height) / width;
+                width = MIN_SIZE;
+            }
+            else if (anyUnderMinSize && height < width) {
+                width = (MIN_SIZE * width) / height;
+                height = MIN_SIZE;
+            }
+            const imageInfo = {
+                width: width,
+                height: height,
+                stampImage: imageDataUrlToUint8Array(image.src),
+            };
+            this.createImageStampAnnotation(imageInfo);
+        };
+        image.src = dataUrl;
+    }
+    onFileSelected(file) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const reader = new FileReader();
+            const _this = this;
+            reader.onload = function (e) {
+                _this.createImage(e.target.result);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+    createImageStampAnnotation(imageInfo) {
+        if (this.pdfApi !== null && this.store !== null && this.options !== null) {
+            const state = this.store.getState();
+            const document = state.document;
+            const canvasRect = this.getCanvasSize();
+            const screenCenter = {
+                x: canvasRect.width / 2,
+                y: canvasRect.height / 2,
+            };
+            // get page to insert image
+            let page = this.pdfApi.getPageNumber();
+            const screenRect = {
+                x: 0,
+                y: 0,
+                w: canvasRect.width,
+                h: canvasRect.height,
+            };
+            const pageScreenRect = this.pdfApi.getPageScreenRect(page);
+            const x1 = Math.max(screenRect.x, pageScreenRect.x);
+            const y1 = Math.max(screenRect.y, pageScreenRect.y);
+            const x2 = Math.min(screenRect.w, pageScreenRect.x + pageScreenRect.w);
+            const y2 = Math.min(screenRect.h, pageScreenRect.y + pageScreenRect.h);
+            const boundingRect = {
+                x: x1,
+                y: y1,
+                w: x2 - x1,
+                h: y2 - y1,
+            };
+            const pageBoundingBox = this.pdfApi.transformScreenRectToPdfRect(boundingRect, page);
+            const imagepPdfRect = {
+                pdfX: 0,
+                pdfY: 0,
+                pdfW: imageInfo.width * 0.24,
+                pdfH: imageInfo.height * 0.24,
+                page,
+            };
+            if (imagepPdfRect.pdfW > pageBoundingBox.pdfW) {
+                const f = (pageBoundingBox.pdfW / imagepPdfRect.pdfW) * 0.97;
+                imagepPdfRect.pdfW = imagepPdfRect.pdfW * f;
+                imagepPdfRect.pdfH = imagepPdfRect.pdfH * f;
+            }
+            if (imagepPdfRect.pdfH > pageBoundingBox.pdfH) {
+                const f = (pageBoundingBox.pdfH / imagepPdfRect.pdfH) * 0.97;
+                imagepPdfRect.pdfW = imagepPdfRect.pdfW * f;
+                imagepPdfRect.pdfH = imagepPdfRect.pdfH * f;
+            }
+            imagepPdfRect.pdfX = (pageBoundingBox.pdfW - imagepPdfRect.pdfW) / 2 + pageBoundingBox.pdfX;
+            imagepPdfRect.pdfY = (pageBoundingBox.pdfH - imagepPdfRect.pdfH) / 2 + pageBoundingBox.pdfY;
+            this.pdfApi.registerStampImage(imageInfo.stampImage).then((imageId) => {
+                if (this.pdfApi !== null && this.options !== null) {
+                    const annotation = {
+                        itemType: PdfItemType.STAMP,
+                        imageId,
+                        page,
+                        color: this.options.annotation.colors.defaultHighlightColor,
+                        pdfRect: imagepPdfRect,
+                        author: this.options.viewer.general.user,
+                    };
+                    this.pdfApi
+                        .createItem(annotation)
+                        .then((annot) => {
+                        // select new annotation
+                        const pdfViewerCanvasApi = this.pdfViewerCanvas;
+                        pdfViewerCanvasApi.dispatchEvent('itemSelected', annot);
+                    })
+                        .catch((err) => {
+                        console.error(err);
+                    });
+                }
+            });
+        }
+    }
+}
+ImageAnnotationModule.moduleInfo = {
+    name: 'ImageAnnotationModule',
+    moduleType: CanvasModuleType.Tool,
+    requiredFeatures: {
+        annotate: true,
+        fillFormFields: false,
+    },
+    translationKey: 'annotImage.add',
+    icon: 'image',
+};

package/es6/modules/index.d.ts

@@ -0,0 +1,13 @@
+export * from './freetext-annotation/FreetextAnnotationModule';
+export * from './highlight-annotation/HighlightAnnotationModule';
+export * from './ink-annotation/InkAnnotationModule';
+export * from './popup/PopupModule';
+export * from './stamp-annotation/StampAnnotationModule';
+export * from './text-annotation/TextAnnotationModule';
+export * from './image-annotations/ImageAnnotationModule';
+export * from './shape-annotations/ShapeAnnotationModule';
+export * from './eraser/EraserModule';
+export * from './print-service/PrintServiceModule';
+export * from './form-fields/FormFieldModule';
+export * from './CanvasLayer';
+export * from './CanvasModule';

package/es6/modules/index.js

@@ -0,0 +1,13 @@
+export * from './freetext-annotation/FreetextAnnotationModule';
+export * from './highlight-annotation/HighlightAnnotationModule';
+export * from './ink-annotation/InkAnnotationModule';
+export * from './popup/PopupModule';
+export * from './stamp-annotation/StampAnnotationModule';
+export * from './text-annotation/TextAnnotationModule';
+export * from './image-annotations/ImageAnnotationModule';
+export * from './shape-annotations/ShapeAnnotationModule';
+export * from './eraser/EraserModule';
+export * from './print-service/PrintServiceModule';
+export * from './form-fields/FormFieldModule';
+export * from './CanvasLayer';
+export * from './CanvasModule';

package/es6/modules/ink-annotation/AddInkAnnotationLayer.d.ts

@@ -0,0 +1,40 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+export declare class AddInkAnnotationLayer extends CanvasLayer {
+    private context;
+    private drawing;
+    private lines;
+    private page;
+    private zoom;
+    private inkWidth;
+    private penColors;
+    private penWidths;
+    private penColor;
+    private penOpacity;
+    private boundingBox;
+    private toolbar;
+    private currentAnnotation;
+    private isUpdatingAnnotation;
+    private pendingUpdate;
+    onCreate(): void;
+    onSave(): Promise<void>;
+    onRemove(): void;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private startLine;
+    private endLine;
+    handlePointerMove: (e: PointerEvent) => void;
+    handlePointerUp: (e: PointerEvent) => void;
+    private drawLines;
+    private drawBoundingBox;
+    private setPenColor;
+    private setPenOpacity;
+    private setPenSize;
+    private debouncedRecreateInkAnnotation;
+    private reset;
+    private save;
+    private add;
+    private undo;
+    private recreateInkAnnotation;
+    private createNewInkAnnotation;
+    private getBoundingBox;
+}