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

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

@@ -0,0 +1,503 @@
+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 { createAddInkAnnotationToolbar, } from './AddInkAnnotationToolbar';
+import { Color } from '../../common/Color';
+const moduleLayerName = 'AddInkAnnotation';
+export class AddInkAnnotationLayer extends CanvasLayer {
+    constructor() {
+        super(...arguments);
+        this.context = null;
+        this.drawing = false;
+        this.lines = [];
+        this.page = null;
+        this.zoom = null;
+        this.inkWidth = 1;
+        this.penColors = [];
+        this.penWidths = [];
+        this.penColor = '';
+        this.penOpacity = 1;
+        this.boundingBox = null;
+        this.toolbar = null;
+        this.currentAnnotation = null;
+        this.isUpdatingAnnotation = false;
+        this.pendingUpdate = false;
+        this.handlePointerMove = (e) => {
+            if (!e.isPrimary) {
+                this.handlePointerUp(e);
+                return;
+            }
+            const x = e.offsetX * devicePixelRatio;
+            const y = e.offsetY * devicePixelRatio;
+            const pdfPoint = this.pdfApi.getClosestPointOnPdfByScreenPoint({ x, y }, this.page);
+            this.lines[this.lines.length - 1].push(pdfPoint);
+            if (this.context) {
+                const screenPoint = this.pdfApi.transformPdfPointToScreenPoint(pdfPoint);
+                this.context.lineTo(screenPoint.x, screenPoint.y);
+                this.context.stroke();
+            }
+        };
+        this.handlePointerUp = (e) => {
+            if (this.context) {
+                const { canvas } = this.context;
+                canvas.removeEventListener('pointermove', this.handlePointerMove);
+                canvas.removeEventListener('pointerup', this.handlePointerUp);
+                canvas.removeEventListener('pointercancel', this.handlePointerUp);
+            }
+            this.endLine();
+        };
+    }
+    onCreate() {
+        this.setPenColor = this.setPenColor.bind(this);
+        this.setPenSize = this.setPenSize.bind(this);
+        this.setPenOpacity = this.setPenOpacity.bind(this);
+        this.add = this.add.bind(this);
+        this.undo = this.undo.bind(this);
+        this.save = this.save.bind(this);
+        const annotationOptions = this.options.annotation;
+        this.context = this.createCanvas();
+        this.penColors = annotationOptions.colors.foregroundColors;
+        this.penWidths = annotationOptions.strokeWidths;
+        this.inkWidth = annotationOptions.inkWidth;
+        this.setPenColor(annotationOptions.colors.inkColor);
+        this.setPenOpacity(annotationOptions.colors.inkOpacity);
+        this.currentAnnotation = null;
+        this.store.viewer.beginModule(moduleLayerName);
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        this.toolbar = createAddInkAnnotationToolbar({
+            penColors: this.penColors,
+            penWidths: this.penWidths,
+            selectedPenColor: annotationOptions.colors.inkColor,
+            selectedPenSize: annotationOptions.inkWidth,
+            penOpacity: annotationOptions.colors.inkOpacity,
+            onPenColorChanged: this.setPenColor,
+            onPenSizeChanged: this.setPenSize,
+            onPenOpacityChanged: this.setPenOpacity,
+            onSave: this.save,
+            onUndo: this.undo,
+            onAdd: this.add,
+            onCancel: this.remove,
+        }, toolbarElement);
+    }
+    onSave() {
+        const promise = new Promise((resolve) => {
+            this.remove();
+            resolve();
+        });
+        return promise;
+    }
+    onRemove() {
+        this.reset();
+        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) {
+        if (this.drawing) {
+            return;
+        }
+        if (state.viewer.modeChanged && state.viewer.selectedModuleName !== moduleLayerName) {
+            this.remove();
+            return;
+        }
+        if (this.zoom === null || state.document.zoomChanged) {
+            this.zoom = state.document.zoom;
+            this.drawLines();
+        }
+        if (state.scroll.leftPositionChanged || state.scroll.topPositionChanged) {
+            this.drawLines();
+        }
+        const pointerPos = {
+            x: state.pointer.x.devicePixels,
+            y: state.pointer.y.devicePixels,
+        };
+        const pdfPoint = this.pdfApi.transformScreenPointToPdfPoint(pointerPos);
+        if (state.pointer.stateChanged) {
+            if (state.pointer.isDown) {
+                const page = pdfPoint.isOnPage ? pdfPoint.pdfPoint.page : null;
+                if (this.page === null && page) {
+                    this.page = page;
+                }
+                if (typeof this.page === 'number' && this.page === page) {
+                    const pdfPointRes = this.pdfApi.getClosestPointOnPdfByScreenPoint(pointerPos, this.page);
+                    if (pdfPointRes) {
+                        this.startLine(pointerPos, pdfPointRes);
+                    }
+                }
+            }
+        }
+        if (state.pointer.positionChanged) {
+            if (pdfPoint.isOnPage && (this.page === null || pdfPoint.pdfPoint.page === this.page)) {
+                this.store.viewer.setCursorStyle(CursorStyle.CROSSHAIR);
+            }
+            else {
+                this.store.viewer.setCursorStyle(CursorStyle.NOT_ALLOWED);
+            }
+        }
+    }
+    startLine(point, pdfPoint) {
+        var _a;
+        this.lines.push([pdfPoint]);
+        this.pdfViewerCanvas.suspendCanvasEvents();
+        this.drawing = true;
+        if (this.context) {
+            const { canvas } = this.context;
+            canvas.addEventListener('pointermove', this.handlePointerMove);
+            canvas.addEventListener('pointerup', this.handlePointerUp);
+            canvas.addEventListener('pointercancel', this.handlePointerUp);
+            this.drawLines();
+            const ctx = this.context;
+            ctx.save();
+            ctx.strokeStyle = this.penColor;
+            ctx.lineWidth = this.inkWidth * devicePixelRatio * ((_a = this.zoom) !== null && _a !== void 0 ? _a : 1);
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            ctx.moveTo(point.x, point.y);
+        }
+    }
+    endLine() {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.drawing = false;
+            this.pdfViewerCanvas.resumeCanvasEvents();
+            (_a = this.context) === null || _a === void 0 ? void 0 : _a.restore();
+            this.drawBoundingBox();
+            (_b = this.toolbar) === null || _b === void 0 ? void 0 : _b.setLineCount(this.lines.length);
+            try {
+                yield this.debouncedRecreateInkAnnotation();
+            }
+            catch (error) {
+                console.warn(error);
+            }
+        });
+    }
+    drawLines() {
+        if (this.context) {
+            const ctx = this.context;
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            const annotationOptions = this.options.annotation;
+            ctx.save();
+            ctx.strokeStyle = this.penColor;
+            ctx.lineWidth = this.inkWidth * devicePixelRatio * this.zoom;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            this.lines.forEach((pointList) => {
+                ctx.beginPath();
+                const p1 = this.pdfApi.transformPdfPointToScreenPoint(pointList[0]);
+                ctx.moveTo(p1.x, p1.y);
+                for (let i = 0; i < pointList.length; i++) {
+                    const p = this.pdfApi.transformPdfPointToScreenPoint(pointList[i]);
+                    ctx.lineTo(p.x, p.y);
+                }
+                ctx.stroke();
+            });
+            ctx.restore();
+        }
+    }
+    drawBoundingBox() {
+        if (this.context && this.lines && this.lines.length > 0) {
+            const pdfRect = {
+                pdfX: 0,
+                pdfY: 0,
+                pdfW: 0,
+                pdfH: 0,
+                page: this.page ? this.page : 0,
+            };
+            let x1 = 1000000000;
+            let x2 = 0;
+            let y1 = 1000000000;
+            let y2 = 0;
+            this.lines.forEach((pointList) => {
+                const line = [];
+                for (let i = 0; i < pointList.length; i++) {
+                    const p = pointList[i];
+                    if (p.pdfX < x1) {
+                        x1 = p.pdfX;
+                    }
+                    if (p.pdfX > x2) {
+                        x2 = p.pdfX;
+                    }
+                    if (p.pdfY < y1) {
+                        y1 = p.pdfY;
+                    }
+                    if (p.pdfY > y2) {
+                        y2 = p.pdfY;
+                    }
+                }
+            });
+            pdfRect.pdfX = x1;
+            pdfRect.pdfY = y1;
+            pdfRect.pdfW = x2 - x1;
+            pdfRect.pdfH = y2 - y1;
+            const rect = this.pdfApi.transformPdfPageRectToScreenRect(pdfRect);
+            const ctx = this.context;
+            ctx.save();
+            ctx.strokeStyle = this.options.viewer.general.textSelectionColor;
+            ctx.lineWidth = 1 * devicePixelRatio;
+            ctx.setLineDash([2 * devicePixelRatio, 3 * devicePixelRatio]);
+            const p = this.inkWidth * devicePixelRatio;
+            const p2 = p * 2;
+            ctx.strokeRect(rect.x - p, rect.y - p, rect.w + p2, rect.h + p2);
+            ctx.restore();
+        }
+    }
+    setPenColor(color) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.options.annotation.colors.inkColor = color;
+            this.penColor = color;
+            this.drawLines();
+            this.drawBoundingBox();
+            if (this.lines.length > 0) {
+                yield this.debouncedRecreateInkAnnotation();
+            }
+        });
+    }
+    setPenOpacity(opacity) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.options.annotation.colors.inkOpacity = opacity;
+            this.penOpacity = opacity;
+            if (this.context) {
+                this.context.canvas.style.opacity = `${opacity / 100}`;
+            }
+            this.drawLines();
+            this.drawBoundingBox();
+            if (this.lines.length > 0) {
+                yield this.debouncedRecreateInkAnnotation();
+            }
+        });
+    }
+    setPenSize(size) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.inkWidth = size;
+            this.options.annotation.inkWidth = size;
+            this.drawLines();
+            this.drawBoundingBox();
+            if (this.lines.length > 0) {
+                yield this.debouncedRecreateInkAnnotation();
+            }
+        });
+    }
+    debouncedRecreateInkAnnotation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isUpdatingAnnotation) {
+                this.pendingUpdate = true;
+                return;
+            }
+            this.isUpdatingAnnotation = true;
+            this.pendingUpdate = false;
+            try {
+                yield this.recreateInkAnnotation();
+                if (this.pendingUpdate) {
+                    this.pendingUpdate = false;
+                    yield this.recreateInkAnnotation();
+                }
+            }
+            catch (error) {
+                console.warn(error);
+            }
+            finally {
+                this.isUpdatingAnnotation = false;
+            }
+        });
+    }
+    reset() {
+        this.lines = [];
+        this.page = null;
+        this.currentAnnotation = null;
+        this.boundingBox = null;
+        this.isUpdatingAnnotation = false;
+        this.pendingUpdate = false;
+        if (this.toolbar) {
+            this.toolbar.setLineCount(0);
+        }
+    }
+    save() {
+        this.reset();
+        this.remove();
+    }
+    add() {
+        this.reset();
+        this.drawLines();
+    }
+    undo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.lines && this.lines.length > 0) {
+                this.lines.pop();
+                if (this.lines.length === 0) {
+                    if (this.currentAnnotation) {
+                        try {
+                            yield this.pdfApi.deleteItem(this.currentAnnotation);
+                            this.currentAnnotation = null;
+                        }
+                        catch (error) {
+                            console.warn(error);
+                        }
+                    }
+                    this.page = null;
+                    this.boundingBox = null;
+                }
+                else {
+                    this.boundingBox = this.getBoundingBox();
+                    try {
+                        yield this.recreateInkAnnotation();
+                    }
+                    catch (error) {
+                        console.warn(error);
+                    }
+                }
+                if (this.toolbar) {
+                    this.toolbar.setLineCount(this.lines.length);
+                }
+                this.store.canvas.setCanvasInvalidated(true);
+                this.drawLines();
+                this.drawBoundingBox();
+            }
+        });
+    }
+    recreateInkAnnotation() {
+        const promise = new Promise((resolve, reject) => {
+            if (this.pdfApi && this.page && this.lines && this.lines.length > 0) {
+                const oldAnnotation = this.currentAnnotation;
+                this.createNewInkAnnotation()
+                    .then(() => {
+                    if (oldAnnotation) {
+                        this.pdfApi
+                            .deleteItem(oldAnnotation)
+                            .then(() => {
+                            resolve();
+                        })
+                            .catch((error) => {
+                            resolve();
+                        });
+                    }
+                    else {
+                        resolve();
+                    }
+                })
+                    .catch(reject);
+            }
+            else {
+                resolve();
+            }
+        });
+        return promise;
+    }
+    createNewInkAnnotation() {
+        const promise = new Promise((resolve, reject) => {
+            if (this.pdfApi && this.page && this.lines && this.lines.length > 0) {
+                const inkList = [];
+                let x1 = 1000000000;
+                let x2 = 0;
+                let y1 = 1000000000;
+                let y2 = 0;
+                this.lines.forEach((pointList) => {
+                    const line = [];
+                    for (let i = 0; i < pointList.length; i++) {
+                        const p = pointList[i];
+                        if (p.pdfX < x1) {
+                            x1 = p.pdfX;
+                        }
+                        if (p.pdfX > x2) {
+                            x2 = p.pdfX;
+                        }
+                        if (p.pdfY < y1) {
+                            y1 = p.pdfY;
+                        }
+                        if (p.pdfY > y2) {
+                            y2 = p.pdfY;
+                        }
+                        line.push(p.pdfX);
+                        line.push(p.pdfY);
+                    }
+                    inkList.push(line);
+                });
+                const rgbaColor = new Color(this.options.annotation.colors.inkColor);
+                rgbaColor.setOpacity(this.options.annotation.colors.inkOpacity / 100);
+                const inkAnnotation = {
+                    itemType: PdfItemType.INK,
+                    page: this.page,
+                    pdfRect: {
+                        pdfX: x1,
+                        pdfY: y1,
+                        pdfW: x2 - x1,
+                        pdfH: y2 - y1,
+                        page: this.page,
+                    },
+                    color: rgbaColor.toRgba(),
+                    author: this.options.viewer.general.user,
+                    border: {
+                        style: AnnotationBorderStyle.SOLID,
+                        width: this.options.annotation.inkWidth,
+                    },
+                    inkList,
+                };
+                this.pdfApi
+                    .createItem(inkAnnotation)
+                    .then((item) => {
+                    this.currentAnnotation = item;
+                    this.onAnnotationCreated(this.currentAnnotation);
+                    resolve();
+                })
+                    .catch((error) => {
+                    console.warn(error);
+                    reject(error);
+                });
+            }
+            else {
+                resolve();
+            }
+        });
+        return promise;
+    }
+    getBoundingBox() {
+        const pdfRect = {
+            pdfX: 0,
+            pdfY: 0,
+            pdfW: 0,
+            pdfH: 0,
+            page: this.page ? this.page : 0,
+        };
+        if (this.lines && this.lines.length > 0) {
+            let x1 = 1000000000;
+            let x2 = 0;
+            let y1 = 1000000000;
+            let y2 = 0;
+            this.lines.forEach((pointList) => {
+                const line = [];
+                for (let i = 0; i < pointList.length; i++) {
+                    const p = pointList[i];
+                    if (p.pdfX < x1) {
+                        x1 = p.pdfX;
+                    }
+                    if (p.pdfX > x2) {
+                        x2 = p.pdfX;
+                    }
+                    if (p.pdfY < y1) {
+                        y1 = p.pdfY;
+                    }
+                    if (p.pdfY > y2) {
+                        y2 = p.pdfY;
+                    }
+                }
+            });
+            pdfRect.pdfX = x1;
+            pdfRect.pdfY = y1;
+            pdfRect.pdfW = x2 - x1;
+            pdfRect.pdfH = y2 - y1;
+        }
+        return pdfRect;
+    }
+}

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

@@ -0,0 +1,30 @@
+export interface AddInkAnnotationToolbarProps {
+    penColors: string[];
+    penWidths: number[];
+    selectedPenColor: string;
+    selectedPenSize: number;
+    penOpacity: number;
+    onPenColorChanged(color: string): void;
+    onPenSizeChanged(width: number): void;
+    onPenOpacityChanged(width: number): void;
+    onUndo(): void;
+    onCancel(): void;
+    onSave(): void;
+    onAdd(): void;
+}
+interface AddInkAnnotationToolbarState {
+    penColors: string[];
+    penWidths: number[];
+    selectedPenColor: string;
+    selectedPenSize: number;
+    penOpacity: number;
+    lineCount: number;
+}
+export interface AddInkAnnotationToolbarActions {
+    setPenColor(color: string): AddInkAnnotationToolbarState;
+    setPenSize(size: number): AddInkAnnotationToolbarState;
+    setPenOpacity(opacity: number): AddInkAnnotationToolbarState;
+    setLineCount(lineCount: number): AddInkAnnotationToolbarState;
+}
+export declare const createAddInkAnnotationToolbar: (props: AddInkAnnotationToolbarProps, element: HTMLElement) => AddInkAnnotationToolbarActions;
+export {};

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

@@ -0,0 +1,53 @@
+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 createAddInkAnnotationToolbar = (props, element) => {
+    const state = {
+        penColors: props.penColors,
+        penWidths: props.penWidths,
+        selectedPenColor: props.selectedPenColor,
+        selectedPenSize: props.selectedPenSize,
+        penOpacity: props.penOpacity,
+        lineCount: 0,
+    };
+    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 });
+        },
+        setLineCount: (lineCount) => ($state) => (Object.assign(Object.assign({}, $state), { lineCount })),
+    };
+    const App = () => h(AddInkAnnotationToolbar, null);
+    const AddInkAnnotationToolbar = ({}) => ($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: `${$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, null,
+                h(ToolbarSeparator, null),
+                h(ToolbarButton, { tooltip: translationManager.getText('annotFreeDrawing.undo'), icon: icons.eraser, onClick: props.onUndo, disabled: $state.lineCount < 1 }),
+                h(ToolbarButton, { tooltip: translationManager.getText('annotFreeDrawing.addNew'), icon: icons.addLayer, onClick: props.onAdd, disabled: $state.lineCount < 1 })),
+            h(ToolbarItemGroup, { pushRight: true },
+                h(ToolbarSeparator, null),
+                $state.lineCount < 1 ? (h(ToolbarButton, { icon: icons.close, onClick: props.onCancel })) : (h(ToolbarButton, { icon: icons.ok, onClick: props.onSave })))));
+    };
+    return app(state, actions, App, element);
+};

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

@@ -0,0 +1,20 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+export declare class EditInkAnnotationLayer extends CanvasLayer {
+    private inkAnnotation;
+    private context;
+    private penColors;
+    private penWidths;
+    private toolbar;
+    private updatePending;
+    private unsavedChanges;
+    onCreate(annotationId: number): void;
+    onSave(): Promise<void>;
+    onRemove(): void;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private close;
+    private setPenColor;
+    private setPenSize;
+    private setPenOpacity;
+    private updateInkAnnotation;
+}