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

package/es6/modules/ink-annotation/EditInkAnnotationLayer.js

@@ -0,0 +1,137 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { AnnotationBorderStyle } from '../../pdf-viewer-api';
+import { createEditInkAnnotationToolbar, } from './EditInkAnnotationToolbar';
+import { Color } from '../../common/Color';
+const moduleLayerName = 'EditInkAnnotation';
+export class EditInkAnnotationLayer extends CanvasLayer {
+    constructor() {
+        super(...arguments);
+        this.inkAnnotation = null;
+        this.context = null;
+        this.penColors = [];
+        this.penWidths = [];
+        this.toolbar = null;
+        this.updatePending = false;
+        this.unsavedChanges = false;
+    }
+    onCreate(annotationId) {
+        var _a;
+        this.inkAnnotation = this.pdfApi.getItem(annotationId);
+        this.setPenColor = this.setPenColor.bind(this);
+        this.setPenSize = this.setPenSize.bind(this);
+        this.setPenOpacity = this.setPenOpacity.bind(this);
+        this.close = this.close.bind(this);
+        const annotationOptions = this.options.annotation;
+        this.penColors = annotationOptions.colors.foregroundColors;
+        this.penWidths = annotationOptions.strokeWidths;
+        this.context = this.createCanvas();
+        const color = new Color(this.inkAnnotation.color || annotationOptions.colors.inkColor);
+        const penSize = ((_a = this.inkAnnotation) === null || _a === void 0 ? void 0 : _a.border.width) || annotationOptions.inkWidth;
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        this.toolbar = createEditInkAnnotationToolbar({
+            penColors: this.penColors,
+            penWidths: this.penWidths,
+            selectedPenColor: color.toHexRgb(),
+            selectedPenSize: penSize,
+            penOpacity: color.a * 100,
+            onPenColorChanged: this.setPenColor,
+            onPenSizeChanged: this.setPenSize,
+            onPenOpacityChanged: this.setPenOpacity,
+            onCancel: this.remove,
+        }, toolbarElement);
+        this.store.viewer.beginModule(moduleLayerName);
+    }
+    onSave() {
+        return new Promise((resolve) => resolve);
+    }
+    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.remove();
+            return;
+        }
+        if (state.pointer.action === 'click' || state.pointer.action === 'dblclick') {
+            const inkAnnotation = (_a = this.pdfApi
+                .getAnnotationsOnPoint({
+                x: state.pointer.x.devicePixels,
+                y: state.pointer.y.devicePixels,
+            })) === null || _a === void 0 ? void 0 : _a.find((a) => this.inkAnnotation && a.id === this.inkAnnotation.id);
+            if (!inkAnnotation) {
+                this.close();
+                return;
+            }
+        }
+        if (this.context && this.inkAnnotation) {
+            const ctx = this.context;
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            const rect = this.pdfApi.transformPdfPageRectToScreenRect(this.inkAnnotation.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();
+        }
+    }
+    close() {
+        this.remove();
+    }
+    setPenColor(color) {
+        if (this.inkAnnotation && this.inkAnnotation.color) {
+            const newColor = new Color(color);
+            const currentColor = new Color(this.inkAnnotation.color);
+            newColor.setOpacity(currentColor.a);
+            this.inkAnnotation.color = newColor.toHexRgba();
+            this.updateInkAnnotation();
+        }
+    }
+    setPenSize(size) {
+        if (this.inkAnnotation) {
+            this.inkAnnotation.border = {
+                style: AnnotationBorderStyle.SOLID,
+                width: size,
+            };
+            this.updateInkAnnotation();
+        }
+    }
+    setPenOpacity(opacity) {
+        if (this.inkAnnotation && this.inkAnnotation.color) {
+            const rgbaColor = new Color(this.inkAnnotation.color);
+            rgbaColor.setOpacity(opacity / 100);
+            this.inkAnnotation.color = rgbaColor.toHexRgba();
+            this.updateInkAnnotation();
+        }
+    }
+    updateInkAnnotation() {
+        if (this.pdfApi && this.inkAnnotation) {
+            if (this.updatePending) {
+                this.unsavedChanges = true;
+            }
+            else {
+                this.updatePending = true;
+                this.pdfApi
+                    .updateItem(this.inkAnnotation)
+                    .then((item) => {
+                    this.updatePending = false;
+                    if (this.unsavedChanges) {
+                        this.unsavedChanges = false;
+                        this.updateInkAnnotation();
+                    }
+                })
+                    .catch((error) => {
+                    console.warn(error);
+                });
+            }
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+export interface EditInkAnnotationToolbarProps {
+    penColors: string[];
+    penWidths: number[];
+    selectedPenColor: string;
+    selectedPenSize: number;
+    penOpacity: number;
+    onPenColorChanged(color: string): void;
+    onPenSizeChanged(width: number): void;
+    onPenOpacityChanged(width: number): void;
+    onCancel(): void;
+}
+interface EditInkAnnotationToolbarState {
+    penColors: string[];
+    penWidths: number[];
+    selectedPenColor: string;
+    selectedPenSize: number;
+    penOpacity: number;
+}
+export interface EditInkAnnotationToolbarActions {
+    setPenColor(color: string): EditInkAnnotationToolbarState;
+    setPenSize(size: number): EditInkAnnotationToolbarState;
+    setPenOpacity(opacity: number): EditInkAnnotationToolbarState;
+}
+export declare const createEditInkAnnotationToolbar: (props: EditInkAnnotationToolbarProps, element: HTMLElement) => EditInkAnnotationToolbarActions;
+export {};

package/es6/modules/ink-annotation/EditInkAnnotationToolbar.js

@@ -0,0 +1,47 @@
+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 { StrokeWidthPicker } from '../../common/StrokeWidthPicker';
+import { RangeSlider } from '../../common/RangeSlider';
+import { ColorPicker } from '../../common/ColorPicker';
+export const createEditInkAnnotationToolbar = (props, element) => {
+    const state = {
+        penColors: props.penColors,
+        penWidths: props.penWidths,
+        selectedPenColor: props.selectedPenColor,
+        selectedPenSize: props.selectedPenSize,
+        penOpacity: props.penOpacity,
+    };
+    const actions = {
+        setPenColor: (color) => ($state) => {
+            props.onPenColorChanged(color);
+            return Object.assign(Object.assign({}, $state), { selectedPenColor: color });
+        },
+        setPenSize: (width) => ($state) => {
+            props.onPenSizeChanged(width);
+            return Object.assign(Object.assign({}, $state), { selectedPenSize: width });
+        },
+        setPenOpacity: (opacity) => ($state) => {
+            props.onPenOpacityChanged(opacity);
+            return Object.assign(Object.assign({}, $state), { penOpacity: opacity });
+        },
+    };
+    const App = () => h(EditInkAnnotationToolbar, null);
+    const EditInkAnnotationToolbar = ({}) => ($state, $actions) => {
+        const strokeWidths = $state.penWidths.filter((w) => w > 0);
+        return (h(Toolbar, { allowWrap: true, alignCenter: true },
+            h(ToolbarItemGroup, null,
+                h(ColorPicker, { colors: $state.penColors, color: $state.selectedPenColor, icon: icons.fillColor, allowRgba: false, mode: "buttons", onChange: $actions.setPenColor })),
+            h(ToolbarItemGroup, null,
+                h(RangeSlider, { tooltip: translationManager.getText('annotFreeDrawing.opacity'), min: 10, max: 100, step: 1, value: $state.penOpacity, text: `${Math.round($state.penOpacity)}%`, icon: icons.drop, onChange: $actions.setPenOpacity, className: "pwv-opacityslider" }),
+                h(StrokeWidthPicker, { tooltip: translationManager.getText('annotFreeDrawing.strokeWidth'), noneStrokeText: '', strokeWidths: strokeWidths, value: $state.selectedPenSize, onChange: $actions.setPenSize })),
+            h(ToolbarItemGroup, { pushRight: true },
+                h(ToolbarSeparator, null),
+                h(ToolbarButton, { icon: icons.close, onClick: props.onCancel }))));
+    };
+    return app(state, actions, App, element);
+};

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

@@ -0,0 +1,27 @@
+import { CanvasModule, CanvasModuleType } from '../CanvasModule';
+import { PdfItemType } from '../../pdf-viewer-api';
+export declare class InkAnnotationModule 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/ink-annotation/InkAnnotationModule.js

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

package/es6/modules/popup/Popup.d.ts

@@ -0,0 +1,64 @@
+import { AnnotationBehaviors, PdfItemType, PdfRect } from '../../pdf-viewer-api';
+/** internal */
+export interface PopupViewProps {
+    maxPopupWidth: number;
+    maxPopupHeight: number;
+    minPopupWidth: number;
+    minPopupHeight: number;
+    currentUser: string;
+    hideSubject: boolean;
+    allowLockAnnotations: boolean;
+    allowEditLockedAnnotations: boolean;
+    onSelect: (id: number) => void;
+    onClose: () => void;
+    onDelete: (id: number) => void;
+    onUpdatePosition: (id: number, top: number, left: number) => void;
+    onUpdateSize: (id: number, width: number, height: number) => void;
+    onUpdateColor: (id: number, color: string) => void;
+    onLock: (id: number) => void;
+}
+/** internal */
+export interface Popup {
+    id: number;
+    colorPalette: string[];
+    content: string;
+    subject: string | null;
+    color: string | null;
+    isLocked: boolean;
+    selected: boolean;
+    itemType: PdfItemType;
+    positionCalculated: boolean;
+    modificationDate: Date | null;
+    author: string;
+    pdfRect: PdfRect;
+    cssWidth: number;
+    cssHeight: number;
+    behaviors: AnnotationBehaviors;
+    isReadOnly: () => boolean;
+}
+interface PopupViewState {
+    selectedPopup: number | null;
+    openPopups: Popup[];
+    maxPopupWidth: number;
+    maxPopupHeight: number;
+    minPopupWidth: number;
+    minPopupHeight: number;
+    currentUser: string;
+    activeContent: string | null;
+    activeSubject: string | null;
+    clearFocus: boolean;
+    stateChanged: boolean;
+    hideSubject: boolean;
+}
+export interface PopupViewActions {
+    getState(): PopupViewState;
+    updateOpenPopups(openPopups: Popup[]): PopupViewState;
+    setPositionCalculated(id: number): PopupViewState;
+    selectPopup(id: number): PopupViewState;
+    setFocus(id: number): PopupViewState;
+    deselectPopup(): PopupViewState;
+    updateSubjectAndContent(id: number): PopupViewState;
+    stateChanged(hasChanged: boolean): PopupViewState;
+}
+export declare const createPopupView: (props: PopupViewProps, element: HTMLElement) => PopupViewActions;
+export {};