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

package/es6/modules/freetext-annotation/AddFreetextAnnotationLayer.js

@@ -0,0 +1,181 @@
+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 { PdfItemType, AnnotationBorderStyle, } from '../../pdf-viewer-api';
+import { CursorStyle } from '../../pdf-viewer-canvas/state/viewer';
+import { getRectFromSelection } from '../../pdf-viewer-canvas/state/document';
+import { createAddFreetextAnnotationToolbar } from './AddFreetextAnnotationToolbar';
+const moduleLayerName = 'AddFreetextAnnotation';
+export class AddFreetextAnnotationLayer extends CanvasLayer {
+    constructor() {
+        super(...arguments);
+        this.context = null;
+        this.colors = [];
+        this.selectedColor = '';
+        this.borderWidths = [];
+        this.pointerDown = false;
+        this.startPoint = null;
+        this.page = 0;
+    }
+    onCreate() {
+        this.setColor = this.setColor.bind(this);
+        this.setBorderWidth = this.setBorderWidth.bind(this);
+        this.close = this.close.bind(this);
+        this.context = this.createCanvas();
+        this.colors = this.options.annotation.colors.backgroundColors;
+        this.selectedColor =
+            this.options.annotation.colors.freetextBackgroundColor ||
+                this.options.annotation.colors.defaultBackgroundColor;
+        // todo: get values from options
+        this.borderWidths = [0, 1, 2, 3, 4];
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        createAddFreetextAnnotationToolbar({
+            colors: this.colors,
+            selectedColor: this.selectedColor,
+            borderWidths: this.borderWidths,
+            selectedBorderWidth: this.options.annotation.freetextBorderWidth || this.options.annotation.defaultBorderWidth,
+            onColorChanged: this.setColor,
+            onBorderWidthChanged: this.setBorderWidth,
+            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.setCursorStyle(CursorStyle.DEFAULT);
+        this.store.viewer.endModule(moduleLayerName);
+    }
+    render(timestamp, state) {
+        if (state.viewer.modeChanged && state.viewer.selectedModuleName !== moduleLayerName) {
+            this.remove();
+            return;
+        }
+        if (this.context) {
+            const update = state.viewer.modeChanged ||
+                state.pointer.positionChanged ||
+                state.pointer.action ||
+                state.document.zoomChanged;
+            if (update) {
+                const ctx = this.context;
+                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+                const pointerPos = { x: state.pointer.x.devicePixels, y: state.pointer.y.devicePixels };
+                const pointerPdfPos = this.pdfApi.transformScreenPointToPdfPoint(pointerPos);
+                if (pointerPdfPos.isOnPage) {
+                    this.store.viewer.setCursorStyle(CursorStyle.CROSSHAIR);
+                }
+                else {
+                    this.store.viewer.setCursorStyle(CursorStyle.NOT_ALLOWED);
+                }
+                if (state.pointer.isDown) {
+                    if (!this.pointerDown) {
+                        this.startPoint = pointerPos;
+                        this.pointerDown = true;
+                        if (this.page === 0 && pointerPdfPos.isOnPage) {
+                            this.page = pointerPdfPos.pdfPoint.page;
+                        }
+                    }
+                    if (this.startPoint) {
+                        const rect = getRectFromSelection(state.document, {
+                            x: this.startPoint.x,
+                            y: this.startPoint.y,
+                        }, {
+                            x: pointerPos.x,
+                            y: pointerPos.y,
+                        }, this.page);
+                        if (rect) {
+                            const lineWidth = 2 * devicePixelRatio;
+                            ctx.save();
+                            ctx.strokeStyle = this.options.viewer.general.textSelectionColor;
+                            ctx.fillStyle = this.options.viewer.general.textSelectionColor;
+                            ctx.lineWidth = lineWidth;
+                            ctx.setLineDash([lineWidth, lineWidth]);
+                            ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
+                            ctx.globalAlpha = 0.33;
+                            ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+                            ctx.restore();
+                        }
+                    }
+                }
+                else if (this.pointerDown && this.startPoint) {
+                    const rect = getRectFromSelection(state.document, {
+                        x: this.startPoint.x,
+                        y: this.startPoint.y,
+                    }, {
+                        x: pointerPos.x,
+                        y: pointerPos.y,
+                    }, this.page);
+                    if (rect) {
+                        this.createFreeTextAnnotation(rect);
+                        this.pointerDown = false;
+                        this.startPoint = null;
+                        this.remove();
+                    }
+                }
+            }
+        }
+    }
+    setColor(color) {
+        this.selectedColor = color;
+        this.options.annotation.colors.freetextBackgroundColor = color;
+    }
+    setBorderWidth(borderWidth) {
+        this.options.annotation.freetextBorderWidth = borderWidth;
+    }
+    close() {
+        this.remove();
+    }
+    createFreeTextAnnotation(rect) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const pdfRect = this.pdfApi.transformScreenRectToPdfRect(rect, this.page);
+            const { pdfY, pdfH, pdfW, pdfX, page } = pdfRect;
+            const pageSize = yield this.pdfApi.getPagePdfSize(page);
+            const minWidth = 20;
+            const minHeight = 18;
+            const isRotated = this.pdfApi.getRotation() % 180 !== 0;
+            pdfRect.pdfW = isRotated ? Math.max(minHeight, pdfW) : Math.max(minWidth, pdfW);
+            pdfRect.pdfH = isRotated ? Math.max(minWidth, pdfH) : Math.max(minHeight, pdfH);
+            pdfRect.pdfX = Math.min(pdfX, pageSize.width - pdfRect.pdfW);
+            pdfRect.pdfY = Math.min(pdfY, pageSize.height - pdfRect.pdfH);
+            const annotation = {
+                itemType: PdfItemType.FREE_TEXT,
+                color: this.selectedColor === 'transparent' ? '#00000000' : this.selectedColor,
+                author: this.options.viewer.general.user,
+                page: pdfRect.page,
+                pdfRect,
+                border: {
+                    width: this.options.annotation.freetextBorderWidth || this.options.annotation.defaultBorderWidth,
+                    style: AnnotationBorderStyle.SOLID,
+                },
+                /* tslint:disable-next-line: max-line-length */
+                richtext: `<?xml version="1.0"?><body xmlns="http://www.w3.org/1999/xhtml" xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/" xfa:APIVersion="Acrobat:19.12.0" xfa:spec="2.0.2" style="color:${this.options.annotation.colors.freetextFontColor};"></body>`,
+                fontName: 'Arial',
+                fontColor: this.options.annotation.fonts.freetextFontColor,
+                fontSize: this.options.annotation.fonts.freetextFontSize,
+            };
+            this.pdfApi.createItem(annotation).then((item) => {
+                this.onAnnotationCreated(item).then((item) => {
+                    const module = this.module;
+                    module.onEdit(item.id);
+                });
+            });
+        });
+    }
+}

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

@@ -0,0 +1,21 @@
+export interface AddFreetextAnnotationToolbarProps {
+    colors: string[];
+    selectedColor: string;
+    borderWidths: number[];
+    selectedBorderWidth: number;
+    onColorChanged(color: string): void;
+    onBorderWidthChanged(borderWidth: number): void;
+    onClose(): void;
+}
+interface AddFreetextAnnotationToolbarState {
+    colors: string[];
+    selectedColor: string;
+    borderWidths: number[];
+    selectedBorderWidth: number;
+}
+export interface AddFreetextAnnotationToolbarActions {
+    setColor(color: string): AddFreetextAnnotationToolbarState;
+    setBorderWith(borderWidth: number): AddFreetextAnnotationToolbarState;
+}
+export declare const createAddFreetextAnnotationToolbar: (props: AddFreetextAnnotationToolbarProps, element: HTMLElement) => AddFreetextAnnotationToolbarActions;
+export {};

package/es6/modules/freetext-annotation/AddFreetextAnnotationToolbar.js

@@ -0,0 +1,37 @@
+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 { StrokeWidthPicker } from '../../common/StrokeWidthPicker';
+export const createAddFreetextAnnotationToolbar = (props, element) => {
+    const state = {
+        colors: props.colors,
+        selectedColor: props.selectedColor,
+        borderWidths: props.borderWidths,
+        selectedBorderWidth: props.selectedBorderWidth,
+    };
+    const actions = {
+        setColor: (color) => ($state) => {
+            props.onColorChanged(color);
+            return Object.assign(Object.assign({}, $state), { selectedColor: color });
+        },
+        setBorderWith: (borderWidth) => ($state) => {
+            props.onBorderWidthChanged(borderWidth);
+            return Object.assign(Object.assign({}, $state), { selectedBorderWidth: borderWidth });
+        },
+    };
+    const App = () => h(AddFreetextAnnotationToolbar, null);
+    /* tslint:disable-next-line:max-line-length */
+    const AddFreetextAnnotationToolbar = ({}) => ($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(StrokeWidthPicker, { tooltip: translationManager.getText('annotFreeText.borderWidth'), noneStrokeText: translationManager.getText('border.none'), strokeWidths: $state.borderWidths, value: $state.selectedBorderWidth, onChange: $actions.setBorderWith })),
+        h(ToolbarItemGroup, { pushRight: true },
+            h(ToolbarSeparator, null),
+            h(ToolbarButton, { icon: icons.close, onClick: props.onClose }))));
+    return app(state, actions, App, element);
+};

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

@@ -0,0 +1,20 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+export declare class EditFreetextAnnotationLayer extends CanvasLayer {
+    private freetextAnnotation;
+    private editorElement;
+    private richTextEditor;
+    private toolbarView;
+    private color;
+    private fontSize;
+    private borderWidth;
+    private fontSizeCSS;
+    private fontName;
+    onCreate(annotationId: number): void;
+    onSave(): Promise<void>;
+    close(): void;
+    onRemove(): void;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private executeCommand;
+    private updateFreeTextAnnotation;
+}

package/es6/modules/freetext-annotation/EditFreetextAnnotationLayer.js

@@ -0,0 +1,211 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { Color } from '../../common/Color';
+import { createEditFreetextAnnotationToolbar, } from './EditFreetextAnnotationToolbar';
+import { RichTextEditor } from './RichTextEditor';
+import { convertPdfToCssPixel, convertCssToPdfPixel } from '../../common/Tools';
+import { addHistoryEntry } from '../../custom/history';
+const moduleLayerName = 'EditFreetextAnnotation';
+export class EditFreetextAnnotationLayer extends CanvasLayer {
+    constructor() {
+        super(...arguments);
+        this.freetextAnnotation = null;
+        this.editorElement = null;
+        this.richTextEditor = null;
+        this.toolbarView = null;
+        this.color = this.options.annotation.fonts.freetextFontColor;
+        this.fontSize = `${this.options.annotation.fonts.defaultFontSize}pt`;
+        this.borderWidth = 1;
+        this.fontSizeCSS = convertPdfToCssPixel(`${this.options.annotation.fonts.defaultFontSize}`);
+        this.fontName = this.options.annotation.fonts.freetextFontFamily;
+    }
+    onCreate(annotationId) {
+        this.store.viewer.beginModule(moduleLayerName);
+        this.freetextAnnotation = this.pdfApi.getItem(annotationId);
+        this.updateFreeTextAnnotation = this.updateFreeTextAnnotation.bind(this);
+        this.close = this.close.bind(this);
+        this.executeCommand = this.executeCommand.bind(this);
+        this.editorElement = this.createHtmlLayer();
+        this.editorElement.style.position = 'absolute';
+        this.editorElement.style.zIndex = '4';
+        const annotationOptions = this.options.annotation;
+        this.color = annotationOptions.colors.freetextFontColor;
+        this.borderWidth = this.freetextAnnotation.border.width;
+        this.fontName = annotationOptions.fonts.freetextFontFamily;
+        this.fontSize = `${annotationOptions.fonts.freetextFontSize}`;
+        this.fontSizeCSS = convertPdfToCssPixel(`${annotationOptions.fonts.freetextFontSize}`);
+        if (this.freetextAnnotation.richText) {
+            const colorRes = /.*color:(.*?);/.exec(this.freetextAnnotation.richText);
+            const fontNameRes = /.*font-family:(.*?);/.exec(this.freetextAnnotation.richText);
+            const fontSizeRes = /.*font-size:(.*?)[;|\"]/.exec(this.freetextAnnotation.richText);
+            if (colorRes && colorRes.length > 1) {
+                this.color = colorRes[1];
+            }
+            if (fontNameRes && fontNameRes.length > 1) {
+                this.fontName = fontNameRes[1];
+            }
+            if (fontSizeRes && fontSizeRes.length > 1) {
+                this.fontSize = fontSizeRes[1];
+                this.fontSizeCSS = convertPdfToCssPixel(this.fontSize);
+            }
+        }
+        else {
+            this.color = this.freetextAnnotation.color;
+            this.fontName = this.freetextAnnotation.fontName;
+            this.fontSizeCSS = convertPdfToCssPixel(this.freetextAnnotation.fontSize);
+        }
+        this.richTextEditor = new RichTextEditor(this.editorElement, {
+            content: this.freetextAnnotation.content,
+            richText: this.freetextAnnotation.richText,
+            backgroundColor: this.freetextAnnotation.color,
+            borderWidth: this.freetextAnnotation.border.width,
+            fontName: this.fontName,
+            fontColor: this.color,
+            fontSizeCSS: this.fontSizeCSS,
+        });
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        this.toolbarView = createEditFreetextAnnotationToolbar({
+            annotation: this.freetextAnnotation,
+            backgroundColors: [...annotationOptions.colors.backgroundColors],
+            borderWidths: [0, 1, 2, 3, 4],
+            fontColors: [...annotationOptions.colors.foregroundColors],
+            fontFamilies: annotationOptions.fonts.fontFamilies,
+            fontSizes: annotationOptions.fonts.fontSizes,
+            selectedFont: this.fontName,
+            selectedBackgroundColor: this.freetextAnnotation.color,
+            selectedFontColor: this.color,
+            selectedFontSize: this.fontSize,
+            selectedBorderWidth: this.borderWidth,
+            allowLockAnnotations: this.options.viewer.permissions.allowLockAnnotations,
+            hideAnnotationSubject: this.options.annotation.hideAnnotationSubject || false,
+            onCmd: this.executeCommand,
+            onClose: this.close,
+        }, toolbarElement);
+    }
+    onSave() {
+        return new Promise((resolve, reject) => {
+            this.updateFreeTextAnnotation().then(() => {
+                this.remove();
+                resolve();
+            });
+        });
+    }
+    close() {
+        this.updateFreeTextAnnotation().then(() => {
+            this.remove();
+        });
+    }
+    onRemove() {
+        this.removeHtmlElements();
+        this.editorElement = null;
+        this.freetextAnnotation = null;
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        toolbarElement.innerHTML = '';
+        this.store.viewer.endModule(moduleLayerName);
+    }
+    render(timestamp, state) {
+        if (state.viewer.modeChanged && state.viewer.selectedModuleName !== moduleLayerName) {
+            this.remove();
+            return;
+        }
+        if (this.editorElement && state.pointer.action === 'click') {
+            const insideHorizontal = state.pointer.x.cssPixels > this.editorElement.offsetLeft &&
+                state.pointer.x.cssPixels < this.editorElement.offsetLeft + this.editorElement.offsetWidth;
+            const insideVertical = state.pointer.y.cssPixels > this.editorElement.offsetTop &&
+                state.pointer.y.cssPixels < this.editorElement.offsetTop + this.editorElement.offsetHeight;
+            if (!insideHorizontal || !insideVertical) {
+                this.updateFreeTextAnnotation();
+                this.remove();
+                return;
+            }
+        }
+        if (this.editorElement && this.freetextAnnotation && this.richTextEditor) {
+            const updatePosition = state.canvas.canvasInvalidated || state.viewer.modeChanged;
+            if (updatePosition) {
+                const screenRect = this.pdfApi.transformPdfPageRectToScreenRect(this.freetextAnnotation.pdfRect);
+                this.editorElement.style.left = `${screenRect.x / devicePixelRatio}px`;
+                this.editorElement.style.top = `${screenRect.y / devicePixelRatio}px`;
+                const width = screenRect.w / devicePixelRatio;
+                const height = screenRect.h / devicePixelRatio;
+                const rotation = (this.freetextAnnotation.rotation + state.document.rotation) % 360;
+                this.editorElement.style.transform = `rotate(${rotation}deg)`;
+                if (rotation == 90) {
+                    this.editorElement.style.width = `${height}px`;
+                    this.editorElement.style.height = `${width}px`;
+                    this.editorElement.style.transformOrigin = `${width / 2}px ${width / 2}px`;
+                }
+                else if (rotation == 180) {
+                    this.editorElement.style.width = `${width}px`;
+                    this.editorElement.style.height = `${height}px`;
+                    this.editorElement.style.transformOrigin = `${width / 2}px ${height / 2}px`;
+                }
+                else if (rotation == 270) {
+                    this.editorElement.style.width = `${height}px`;
+                    this.editorElement.style.height = `${width}px`;
+                    this.editorElement.style.transformOrigin = `${height / 2}px ${height / 2}px`;
+                }
+                else {
+                    this.editorElement.style.width = `${width}px`;
+                    this.editorElement.style.height = `${height}px`;
+                }
+            }
+            if (state.document.zoomChanged || state.viewer.modeChanged) {
+                this.richTextEditor.setZoom(state.document.zoom);
+            }
+        }
+    }
+    executeCommand(cmd) {
+        var _a;
+        switch (cmd.cmd) {
+            case 'setFont': {
+                this.options.annotation.fonts.freetextFontFamily = cmd.args;
+                break;
+            }
+            case 'setFontSize': {
+                this.options.annotation.fonts.freetextFontSize = cmd.args;
+                break;
+            }
+        }
+        (_a = this.richTextEditor) === null || _a === void 0 ? void 0 : _a.executeCommand(cmd);
+    }
+    updateFreeTextAnnotation() {
+        const promise = new Promise((resolve, reject) => {
+            if (this.richTextEditor && this.freetextAnnotation) {
+                const richTextObj = this.richTextEditor.getEditorValues();
+                const subject = this.toolbarView
+                    ? this.toolbarView.getState().updatedSubject
+                    : this.freetextAnnotation.subject;
+                if (this.options.annotation.trackHistory) {
+                    addHistoryEntry(this.freetextAnnotation, 'edit', this.options.viewer.general.user, richTextObj.content, subject);
+                }
+                const fontColor = new Color(richTextObj.fontColor);
+                const backgroundColor = richTextObj.backgroundColor === ''
+                    ? null
+                    : new Color(richTextObj.backgroundColor);
+                this.freetextAnnotation.content = richTextObj.content;
+                this.freetextAnnotation.subject = subject;
+                this.freetextAnnotation.richText = richTextObj.richText;
+                this.freetextAnnotation.fontColor = fontColor.toHexRgb();
+                this.freetextAnnotation.fontName =
+                    richTextObj.fontName !== null ? richTextObj.fontName : 'Helvetica';
+                this.freetextAnnotation.fontSize = richTextObj.fontSizeCSS
+                    ? convertCssToPdfPixel(richTextObj.fontSizeCSS)
+                    : this.freetextAnnotation.fontSize;
+                this.freetextAnnotation.color = backgroundColor !== null ? backgroundColor.toRgba() : null;
+                this.freetextAnnotation.border.width = richTextObj.borderWidth;
+                this.pdfApi
+                    .updateItem(this.freetextAnnotation)
+                    .then((item) => {
+                    this.store.annotations.updateAnnotation(item);
+                    resolve();
+                })
+                    .catch((err) => {
+                    console.error(err);
+                    reject();
+                });
+            }
+        });
+        return promise;
+    }
+}

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

@@ -0,0 +1,50 @@
+import { ExecCommandArgs } from './RichTextEditor';
+import { Annotation } from '../../pdf-viewer-api';
+/** internal */
+export interface EditFreetextAnnotationToolbarProps {
+    annotation: Annotation;
+    backgroundColors: string[];
+    borderWidths: number[];
+    selectedBorderWidth: number;
+    fontColors: string[];
+    fontFamilies: string[];
+    fontSizes: number[];
+    selectedFont: string;
+    selectedBackgroundColor: string;
+    selectedFontColor: string;
+    selectedFontSize: string;
+    allowLockAnnotations: boolean;
+    hideAnnotationSubject: boolean;
+    onCmd(cmd: ExecCommandArgs): void;
+    onClose(): void;
+}
+/** internal */
+export interface EditFreetextAnnotationToolbarState {
+    annotation: Annotation;
+    updatedSubject: string | null;
+    backgroundColors: string[];
+    borderWidths: number[];
+    selectedBorderWidth: number;
+    fontColors: string[];
+    fontFamilies: string[];
+    fontSizes: number[];
+    selectedFont: string;
+    selectedBackgroundColor: string;
+    selectedFontColor: string;
+    selectedFontSize: string;
+    hasRangeSelection: boolean;
+}
+export interface EditFreetextAnnotationToolbarActions {
+    getState(): EditFreetextAnnotationToolbarState;
+    executeCommand(cmd: ExecCommandArgs): EditFreetextAnnotationToolbarState;
+    setBorderWith(borderWidth: number): EditFreetextAnnotationToolbarState;
+    setFontFamily(fontName: string): EditFreetextAnnotationToolbarState;
+    setFontSize(fontSize: number): EditFreetextAnnotationToolbarState;
+    setFontColor(color: string): EditFreetextAnnotationToolbarState;
+    setBackgroundColor(color: string): EditFreetextAnnotationToolbarState;
+    hasRangeSelectionChanged(hasRangeSelection: boolean): EditFreetextAnnotationToolbarState;
+    setSubject(subject: string | null): EditFreetextAnnotationToolbarState;
+    close(): EditFreetextAnnotationToolbarState;
+}
+/** internal */
+export declare const createEditFreetextAnnotationToolbar: (props: EditFreetextAnnotationToolbarProps, element: HTMLElement) => EditFreetextAnnotationToolbarActions;

package/es6/modules/freetext-annotation/EditFreetextAnnotationToolbar.js

@@ -0,0 +1,118 @@
+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 { Dropdown } from '../../common/Dropdown';
+import { ColorPicker } from '../../common/ColorPicker';
+import { icons } from '../../common/icons';
+import { ToolbarSeparator } from '../../common/ToolbarSeparator';
+import { StrokeWidthPicker } from '../../common/StrokeWidthPicker';
+/** internal */
+export const createEditFreetextAnnotationToolbar = (props, element) => {
+    const state = {
+        annotation: props.annotation,
+        updatedSubject: props.annotation.subject,
+        backgroundColors: props.backgroundColors,
+        borderWidths: props.borderWidths,
+        selectedBorderWidth: props.selectedBorderWidth,
+        fontColors: props.fontColors,
+        fontFamilies: props.fontFamilies,
+        fontSizes: props.fontSizes,
+        selectedFont: props.selectedFont,
+        selectedBackgroundColor: props.selectedBackgroundColor,
+        selectedFontColor: props.selectedFontColor,
+        selectedFontSize: props.selectedFontSize,
+        hasRangeSelection: false,
+    };
+    const actions = {
+        getState: () => ($state) => $state,
+        setBorderWith: (borderWidth) => ($state) => {
+            // props.onBorderWidthChanged(borderWidth)
+            props.onCmd({ cmd: 'setBorderWidth', args: borderWidth });
+            return Object.assign(Object.assign({}, $state), { selectedBorderWidth: borderWidth });
+        },
+        executeCommand: (cmd) => ($state) => {
+            props.onCmd(cmd);
+            return $state;
+        },
+        setFontFamily: (fontName) => ($state) => {
+            props.onCmd({ cmd: 'setFont', args: fontName });
+            return Object.assign(Object.assign({}, $state), { selectedFont: fontName });
+        },
+        setFontSize: (fontSize) => ($state) => {
+            props.onCmd({ cmd: 'setFontSize', args: fontSize });
+            return Object.assign(Object.assign({}, $state), { selectedFontSize: `${fontSize}pt` });
+        },
+        setFontColor: (color) => ($state) => {
+            props.onCmd({ cmd: 'setFontColor', args: color });
+            return Object.assign(Object.assign({}, $state), { selectedFontColor: color });
+        },
+        setBackgroundColor: (color) => ($state) => {
+            props.onCmd({ cmd: 'setFillColor', args: color });
+            return Object.assign(Object.assign({}, $state), { selectedBackgroundColor: color });
+        },
+        setSubject: (subject) => ($state) => {
+            return Object.assign(Object.assign({}, $state), { annotation: $state.annotation, updatedSubject: subject });
+        },
+        hasRangeSelectionChanged: (hasRangeSelection) => ($state) => (Object.assign(Object.assign({}, $state), { hasRangeSelection })),
+        close: () => ($state) => {
+            props.onClose();
+            return $state;
+        },
+    };
+    const App = () => (h(EditFreetextAnnotationToolbar, { hideAnnotationSubject: props.hideAnnotationSubject }));
+    /* tslint:disable-next-line:max-line-length */
+    const EditFreetextAnnotationToolbar = ({ hideAnnotationSubject }) => ($state, $actions) => (h(Toolbar, { allowWrap: true, alignCenter: true },
+        h(ToolbarItemGroup, null,
+            h(Dropdown, { tooltip: translationManager.getText('annotFreeText.fontFamily'), text: $state.selectedFont, value: $state.selectedFont, width: 150, items: $state.fontFamilies.map((font) => ({
+                    text: font,
+                    value: font,
+                })), onChange: $actions.setFontFamily }),
+            h(Dropdown, { tooltip: translationManager.getText('annotFreeText.fontSize'), text: $state.selectedFontSize, value: $state.selectedFontSize, width: 85, align: "right", items: $state.fontSizes.map((size, index) => ({
+                    text: `${size}pt`,
+                    value: size,
+                })), onChange: $actions.setFontSize }),
+            h(ToolbarSeparator, null)),
+        h(ToolbarItemGroup, null,
+            h(ColorPicker, { tooltip: translationManager.getText('annotFreeText.fontColor'), colors: $state.fontColors, icon: icons.fontColor, color: $state.selectedFontColor, onChange: $actions.setFontColor }),
+            h(ColorPicker, { tooltip: translationManager.getText('annotFreeText.bgColor'), colors: $state.backgroundColors, icon: icons.fillColor, color: $state.selectedBackgroundColor, onChange: $actions.setBackgroundColor }),
+            h(StrokeWidthPicker, { tooltip: translationManager.getText('annotFreeText.borderWidth'), noneStrokeText: translationManager.getText('border.none'), strokeWidths: $state.borderWidths, value: $state.selectedBorderWidth, onChange: $actions.setBorderWith }),
+            h(ToolbarSeparator, null)),
+        h(ToolbarItemGroup, null,
+            h(ToolbarButton, { tooltip: translationManager.getText('annotFreeText.alignLeft'), icon: icons.alignLeft, onClick: () => {
+                    $actions.executeCommand({ cmd: 'justifyLeft' });
+                } }),
+            h(ToolbarButton, { tooltip: translationManager.getText('annotFreeText.alignCenter'), icon: icons.alignCenter, onClick: () => {
+                    $actions.executeCommand({ cmd: 'justifyCenter' });
+                } }),
+            h(ToolbarButton, { tooltip: translationManager.getText('annotFreeText.alignRight'), icon: icons.alignRight, onClick: () => {
+                    $actions.executeCommand({ cmd: 'justifyRight' });
+                } }),
+            h(ToolbarSeparator, null)),
+        h(ToolbarItemGroup, null,
+            h(ToolbarButton, { tooltip: translationManager.getText('annotFreeText.bold'), icon: icons.bold, onClick: () => {
+                    $actions.executeCommand({ cmd: 'bold' });
+                } }),
+            h(ToolbarButton, { tooltip: translationManager.getText('annotFreeText.italic'), icon: icons.italic, onClick: () => {
+                    $actions.executeCommand({ cmd: 'italic' });
+                } }),
+            h(ToolbarButton, { tooltip: translationManager.getText('annotFreeText.underline'), icon: icons.underline, onClick: () => {
+                    $actions.executeCommand({ cmd: 'underline' });
+                } }),
+            h(ToolbarSeparator, null)),
+        props.allowLockAnnotations && (h(ToolbarItemGroup, null,
+            h(ToolbarButton, { tooltip: translationManager.getText($state.annotation.isLocked() ? 'annotFreeText.unlock' : 'annotFreeText.lock'), icon: $state.annotation.isLocked() ? icons.lock : icons.unlock, onClick: () => {
+                    $state.annotation.setLock(!$state.annotation.isLocked());
+                    $actions.close();
+                } }),
+            h(ToolbarSeparator, null))),
+        !hideAnnotationSubject && (h(ToolbarItemGroup, null,
+            h("div", { class: 'pwv-freetext-subject' },
+                h("input", { id: 'pwv-freetext-subject-' + $state.annotation.id, placeholder: translationManager.getText('annotFreeText.subjectPlaceholder'), onchange: (e) => {
+                        $actions.setSubject(e.currentTarget.value);
+                    }, value: $state.updatedSubject })))),
+        h(ToolbarItemGroup, { pushRight: true },
+            h(ToolbarButton, { icon: icons.ok, onClick: $actions.close }))));
+    return app(state, actions, App, element);
+};

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

@@ -0,0 +1,28 @@
+import { CanvasModule, CanvasModuleType } from '../CanvasModule';
+import { PdfItemType } from '../../pdf-viewer-api';
+export declare class FreetextAnnotationModule 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(): {
+        toolbar: HTMLElement;
+        contextbar: {
+            itemTypes: PdfItemType[];
+            icon: import("../../common/icons").IconDefinition;
+            tooltip: string;
+            onCmd: (annotationId: number) => void;
+        };
+    };
+    activate(annotationId: number): void;
+    onEdit(annotationId: number): void;
+}