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

package/es6/modules/shape-annotations/AddShapeAnnotationLayer.js

@@ -0,0 +1,210 @@
+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 { createAddShapeAnnotationToolbar, } from './AddShapeAnnotationToolbar';
+import { Color } from '../../common/Color';
+const moduleLayerName = 'AddShapeAnnotation';
+export class AddShapeAnnotationLayer extends CanvasLayer {
+    constructor() {
+        super(...arguments);
+        this.context = null;
+        this.toolbar = null;
+        this.page = 0;
+        this.pointerDown = false;
+        this.startPoint = null;
+        this.itemType = null;
+        this.strokeColors = [];
+        this.fillColors = [];
+    }
+    onCreate(itemType) {
+        this.setStrokeColor = this.setStrokeColor.bind(this);
+        this.setStrokeWidth = this.setStrokeWidth.bind(this);
+        this.setStrokeStyle = this.setStrokeStyle.bind(this);
+        this.setFillColor = this.setFillColor.bind(this);
+        this.setShape = this.setShape.bind(this);
+        this.cancel = this.cancel.bind(this);
+        this.context = this.createCanvas();
+        this.itemType = itemType;
+        const annotationOptions = this.options.annotation;
+        this.strokeColors = annotationOptions.colors.foregroundColors;
+        this.fillColors = annotationOptions.colors.backgroundColors;
+        this.store.viewer.beginModule(moduleLayerName);
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        this.toolbar = createAddShapeAnnotationToolbar({
+            strokeColors: this.strokeColors,
+            strokeWidths: annotationOptions.strokeWidths,
+            fillColors: this.fillColors,
+            selectedStrokeColor: annotationOptions.colors.shapeColor,
+            selectedStrokeWidth: annotationOptions.shapeStrokeWidth,
+            selectedStrokeStyle: annotationOptions.shapeStrokeStyle,
+            selectedFillColor: annotationOptions.colors.shapeFillColor,
+            selectedShape: this.itemType,
+            onStrokeColorChanged: this.setStrokeColor,
+            onStrokeWidthChanged: this.setStrokeWidth,
+            onStrokeStyleChanged: this.setStrokeStyle,
+            onFillColorChanged: this.setFillColor,
+            onShapeChanged: this.setShape,
+            onCancel: this.cancel,
+        }, toolbarElement);
+    }
+    cancel() {
+        this.remove();
+    }
+    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);
+                        const annotationOptions = this.options.annotation;
+                        if (rect) {
+                            ctx.save();
+                            const strokeColor = new Color(annotationOptions.colors.shapeColor);
+                            ctx.strokeStyle = strokeColor.toRgb();
+                            const fillColor = new Color(annotationOptions.colors.shapeFillColor);
+                            ctx.fillStyle = fillColor.toRgb();
+                            const lineWidth = annotationOptions.shapeStrokeWidth * devicePixelRatio * state.document.zoom;
+                            ctx.lineWidth = lineWidth;
+                            if (lineWidth) {
+                                ctx.globalAlpha = strokeColor.a;
+                            }
+                            else {
+                                ctx.globalAlpha = fillColor.a;
+                            }
+                            if (this.options.annotation.shapeStrokeStyle === AnnotationBorderStyle.DASHED) {
+                                ctx.setLineDash([ctx.lineWidth]);
+                            }
+                            if (this.itemType === PdfItemType.CIRCLE) {
+                                const cX = rect.x + rect.w / 2;
+                                const cY = rect.y + rect.h / 2;
+                                ctx.beginPath();
+                                ctx.ellipse(cX, cY, Math.max(rect.w / 2 - ctx.lineWidth / 2, 0), Math.max(rect.h / 2 - ctx.lineWidth / 2, 0), 0, 0, Math.PI * 2);
+                                if (fillColor.a) {
+                                    ctx.fill();
+                                }
+                                if (annotationOptions.shapeStrokeWidth) {
+                                    ctx.stroke();
+                                }
+                            }
+                            else {
+                                if (fillColor.a) {
+                                    ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+                                }
+                                if (annotationOptions.shapeStrokeWidth) {
+                                    ctx.strokeRect(rect.x + ctx.lineWidth / 2, rect.y + ctx.lineWidth / 2, rect.w - ctx.lineWidth, rect.h - ctx.lineWidth);
+                                }
+                            }
+                            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.pointerDown = false;
+                        this.startPoint = null;
+                        this.createRectangleAnnotation(rect);
+                    }
+                }
+            }
+        }
+    }
+    setStrokeColor(color) {
+        this.options.annotation.colors.shapeColor = color;
+    }
+    setShape(shape) {
+        this.itemType = shape;
+    }
+    setStrokeWidth(width) {
+        this.options.annotation.shapeStrokeWidth = width;
+    }
+    setStrokeStyle(style) {
+        this.options.annotation.shapeStrokeStyle = style;
+    }
+    setFillColor(color) {
+        this.options.annotation.colors.shapeFillColor = color;
+    }
+    createRectangleAnnotation(rect) {
+        const pdfRect = this.pdfApi.transformScreenRectToPdfRect(rect, this.page);
+        const annotationOptions = this.options.annotation;
+        const annotation = {
+            itemType: this.itemType,
+            color: annotationOptions.colors.shapeColor,
+            pdfRect,
+            page: this.page,
+            author: this.options.viewer.general.user,
+            fillColor: annotationOptions.colors.shapeFillColor === 'transparent'
+                ? null
+                : annotationOptions.colors.shapeFillColor,
+            border: {
+                width: annotationOptions.shapeStrokeWidth,
+                style: this.options.annotation.shapeStrokeStyle,
+            },
+        };
+        this.pdfApi
+            .createItem(annotation)
+            .then(() => {
+            this.remove();
+        })
+            .catch((err) => {
+            console.error(err);
+        });
+    }
+}

package/es6/modules/shape-annotations/AddShapeAnnotationToolbar.d.ts

@@ -0,0 +1,26 @@
+import { AnnotationBorderStyle, PdfItemType } from '../../pdf-viewer-api';
+export interface AddShapeAnnotationToolbarProps {
+    strokeColors: string[];
+    strokeWidths: number[];
+    fillColors: string[];
+    selectedShape: PdfItemType;
+    selectedStrokeColor: string;
+    selectedStrokeWidth: number;
+    selectedStrokeStyle: AnnotationBorderStyle;
+    selectedFillColor: string;
+    onShapeChanged(shape: PdfItemType): void;
+    onStrokeColorChanged(color: string): void;
+    onStrokeWidthChanged(width: number): void;
+    onStrokeStyleChanged(style: AnnotationBorderStyle): void;
+    onFillColorChanged(color: string): void;
+    onCancel(): void;
+}
+export interface AddShapeAnnotationToolbarActions {
+    setStrokeColor(color: string): void;
+    setStrokeWidth(width: number): void;
+    setStrokeStyle(style: AnnotationBorderStyle): void;
+    setFillColor(width: string): void;
+    setShape(shape: PdfItemType): void;
+    setCancel(): void;
+}
+export declare const createAddShapeAnnotationToolbar: (props: AddShapeAnnotationToolbarProps, element: HTMLElement) => AddShapeAnnotationToolbarActions;

package/es6/modules/shape-annotations/AddShapeAnnotationToolbar.js

@@ -0,0 +1,69 @@
+import { app, h } from '../../lib/hyperapp';
+import { PdfItemType } from '../../pdf-viewer-api';
+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 { StrokeStylePicker } from '../../common/StrokeStylePicker';
+import { ColorPicker } from '../../common/ColorPicker';
+export const createAddShapeAnnotationToolbar = (props, element) => {
+    const state = {
+        strokeColors: props.strokeColors,
+        strokeWidths: props.strokeWidths,
+        fillColors: props.fillColors,
+        selectedShape: props.selectedShape,
+        selectedStrokeColor: props.selectedStrokeColor,
+        selectedStrokeWidth: props.selectedStrokeWidth,
+        selectedStrokeStyle: props.selectedStrokeStyle,
+        selectedFillColor: props.selectedFillColor,
+    };
+    const actions = {
+        setShape: (shape) => ($state) => {
+            props.onShapeChanged(shape);
+            return Object.assign(Object.assign({}, $state), { selectedShape: shape });
+        },
+        setStrokeColor: (color) => ($state) => {
+            props.onStrokeColorChanged(color);
+            return Object.assign(Object.assign({}, $state), { selectedStrokeColor: color });
+        },
+        setStrokeWidth: (width) => ($state) => {
+            props.onStrokeWidthChanged(width);
+            return Object.assign(Object.assign({}, $state), { selectedStrokeWidth: width });
+        },
+        setStrokeStyle: (style) => ($state) => {
+            props.onStrokeStyleChanged(style);
+            return Object.assign(Object.assign({}, $state), { selectedStrokeStyle: style });
+        },
+        setFillColor: (color) => ($state) => {
+            props.onFillColorChanged(color);
+            return Object.assign(Object.assign({}, $state), { selectedFillColor: color });
+        },
+        setCancel: () => ($state) => {
+            return Object.assign({}, $state);
+        },
+    };
+    const App = () => h(AddShapeAnnotationToolbar, null);
+    const AddShapeAnnotationToolbar = ({}) => ($state, $actions) => (h(Toolbar, { allowWrap: true, alignCenter: true },
+        h(ToolbarItemGroup, null,
+            h(ToolbarButton, { tooltip: translationManager.getText('annotShape.addRectangle'), icon: icons.rectangle, active: $state.selectedShape === PdfItemType.SQUARE, onClick: () => {
+                    $actions.setShape(PdfItemType.SQUARE);
+                } }),
+            h(ToolbarButton, { tooltip: translationManager.getText('annotShape.addEllipse'), icon: icons.circle, active: $state.selectedShape === PdfItemType.CIRCLE, onClick: () => {
+                    $actions.setShape(PdfItemType.CIRCLE);
+                } }),
+            h(ToolbarSeparator, null)),
+        h(ToolbarItemGroup, null,
+            h(StrokeWidthPicker, { tooltip: translationManager.getText('annotShape.strokeWidth'), noneStrokeText: translationManager.getText('border.none'), strokeWidths: $state.strokeWidths, value: $state.selectedStrokeWidth, onChange: $actions.setStrokeWidth }),
+            h(StrokeStylePicker, { tooltip: translationManager.getText('annotShape.strokeStyle'), value: $state.selectedStrokeStyle, disabled: $state.selectedStrokeWidth === 0, onChange: $actions.setStrokeStyle, shapeType: $state.selectedShape === PdfItemType.CIRCLE ? 'circle' : 'rectangle' }),
+            h(ColorPicker, { tooltip: translationManager.getText('annotShape.strokeColor'), colors: $state.strokeColors, color: $state.selectedStrokeColor, disabled: $state.selectedStrokeWidth === 0, icon: icons.pencil, onChange: $actions.setStrokeColor })),
+        h(ToolbarItemGroup, null,
+            h(ToolbarSeparator, null),
+            h(ColorPicker, { tooltip: translationManager.getText('annotShape.bgColor'), colors: $state.fillColors, color: $state.selectedFillColor, icon: icons.fillColor, onChange: $actions.setFillColor })),
+        h(ToolbarItemGroup, { pushRight: true },
+            h(ToolbarSeparator, null),
+            h(ToolbarButton, { icon: icons.close, onClick: props.onCancel }))));
+    return app(state, actions, App, element);
+};

package/es6/modules/shape-annotations/EditShapeAnnotationLayer.d.ts

@@ -0,0 +1,19 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+export declare class EditShapeAnnotationLayer extends CanvasLayer {
+    private shapeAnnotation;
+    private context;
+    private toolbar;
+    private strokeColors;
+    private fillColors;
+    onCreate(annotationId: number): void;
+    close(): void;
+    onSave(): Promise<void>;
+    onRemove(): void;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private setStrokeColor;
+    private setStrokeWidth;
+    private setStrokeStyle;
+    private setFillColor;
+    private updateShapeAnnotation;
+}

package/es6/modules/shape-annotations/EditShapeAnnotationLayer.js

@@ -0,0 +1,148 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { CursorStyle } from '../../pdf-viewer-canvas/state/viewer';
+import { createEditShapeAnnotationToolbar, } from './EditShapeAnnotationToolbar';
+import { Color } from '../../common/Color';
+const moduleLayerName = 'EditShapeAnnotation';
+export class EditShapeAnnotationLayer extends CanvasLayer {
+    constructor() {
+        super(...arguments);
+        this.shapeAnnotation = null;
+        this.context = null;
+        this.toolbar = null;
+        this.strokeColors = [];
+        this.fillColors = [];
+    }
+    onCreate(annotationId) {
+        this.shapeAnnotation = this.pdfApi.getItem(annotationId);
+        this.setStrokeColor = this.setStrokeColor.bind(this);
+        this.setStrokeWidth = this.setStrokeWidth.bind(this);
+        this.setStrokeStyle = this.setStrokeStyle.bind(this);
+        this.setFillColor = this.setFillColor.bind(this);
+        this.close = this.close.bind(this);
+        const annotOptions = this.options.annotation;
+        this.strokeColors = annotOptions.colors.foregroundColors;
+        this.fillColors = annotOptions.colors.backgroundColors;
+        this.context = this.createCanvas();
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        this.toolbar = createEditShapeAnnotationToolbar({
+            strokeColors: this.strokeColors,
+            strokeWidths: annotOptions.strokeWidths,
+            fillColors: this.fillColors,
+            selectedStrokeColor: this.shapeAnnotation.color
+                ? this.shapeAnnotation.color
+                : annotOptions.colors.shapeColor,
+            selectedStrokeWidth: this.shapeAnnotation.border.width,
+            selectedStrokeStyle: this.shapeAnnotation.border.style,
+            selectedFillColor: this.shapeAnnotation.fillColor
+                ? this.shapeAnnotation.fillColor
+                : annotOptions.colors.shapeFillColor,
+            itemType: this.shapeAnnotation.itemType,
+            onStrokeColorChanged: this.setStrokeColor,
+            onStrokeWidthChanged: this.setStrokeWidth,
+            onStrokeStyleChanged: this.setStrokeStyle,
+            onFillColorChanged: this.setFillColor,
+            onCancel: this.close,
+        }, toolbarElement);
+        this.store.viewer.beginModule(moduleLayerName);
+    }
+    close() {
+        this.remove();
+    }
+    onSave() {
+        return new Promise((resolve, reject) => {
+            resolve();
+        });
+    }
+    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) {
+        var _a;
+        if (state.viewer.modeChanged && state.viewer.selectedModuleName !== moduleLayerName) {
+            this.remove();
+            return;
+        }
+        if (state.pointer.action === 'click' || state.pointer.action === 'dblclick') {
+            const shapeAnnotation = (_a = this.pdfApi
+                .getAnnotationsOnPoint({
+                x: state.pointer.x.devicePixels,
+                y: state.pointer.y.devicePixels,
+            })) === null || _a === void 0 ? void 0 : _a.find((a) => this.shapeAnnotation && a.id === this.shapeAnnotation.id);
+            if (!shapeAnnotation) {
+                this.close();
+                return;
+            }
+        }
+        if (this.context && this.shapeAnnotation) {
+            const ctx = this.context;
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            const rect = this.pdfApi.transformPdfPageRectToScreenRect(this.shapeAnnotation.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();
+        }
+    }
+    setStrokeColor(color) {
+        if (this.shapeAnnotation && this.shapeAnnotation.color) {
+            const newColor = new Color(color);
+            const currentColor = new Color(this.shapeAnnotation.color);
+            newColor.setOpacity(currentColor.a);
+            this.shapeAnnotation.color = newColor.toRgba();
+            this.updateShapeAnnotation();
+        }
+    }
+    setStrokeWidth(width) {
+        if (this.shapeAnnotation) {
+            this.shapeAnnotation.border = {
+                style: this.shapeAnnotation.border.style,
+                width: width,
+            };
+            this.updateShapeAnnotation();
+        }
+    }
+    setStrokeStyle(style) {
+        if (this.shapeAnnotation) {
+            this.shapeAnnotation.border = {
+                style: style,
+                width: this.shapeAnnotation.border.width,
+            };
+            this.updateShapeAnnotation();
+        }
+    }
+    setFillColor(color) {
+        if (this.shapeAnnotation) {
+            const newColor = new Color(color);
+            this.shapeAnnotation.fillColor = newColor.toRgba();
+            this.updateShapeAnnotation();
+        }
+    }
+    updateShapeAnnotation() {
+        const promise = new Promise((resolve, reject) => {
+            if (this.pdfApi && this.shapeAnnotation) {
+                this.pdfApi
+                    .updateItem(this.shapeAnnotation)
+                    .then((item) => {
+                    resolve();
+                })
+                    .catch((error) => {
+                    console.warn(error);
+                });
+            }
+            else {
+                reject();
+            }
+        });
+        return promise;
+    }
+}

package/es6/modules/shape-annotations/EditShapeAnnotationToolbar.d.ts

@@ -0,0 +1,24 @@
+import { AnnotationBorderStyle, PdfItemType } from '../../pdf-viewer-api';
+export interface EditShapeAnnotationToolbarProps {
+    strokeColors: string[];
+    strokeWidths: number[];
+    fillColors: string[];
+    selectedStrokeColor: string;
+    selectedStrokeWidth: number;
+    selectedStrokeStyle: AnnotationBorderStyle;
+    itemType: PdfItemType;
+    selectedFillColor: string;
+    onStrokeColorChanged(color: string): void;
+    onStrokeWidthChanged(width: number): void;
+    onStrokeStyleChanged(style: AnnotationBorderStyle): void;
+    onFillColorChanged(color: string): void;
+    onCancel(): void;
+}
+export interface EditShapeAnnotationToolbarActions {
+    setStrokeColor(color: string): void;
+    setStrokeWidth(width: number): void;
+    setStrokeStyle(style: AnnotationBorderStyle): void;
+    setFillColor(width: string): void;
+    setCancel(): void;
+}
+export declare const createEditShapeAnnotationToolbar: (props: EditShapeAnnotationToolbarProps, element: HTMLElement) => EditShapeAnnotationToolbarActions;

package/es6/modules/shape-annotations/EditShapeAnnotationToolbar.js

@@ -0,0 +1,57 @@
+import { app, h } from '../../lib/hyperapp';
+import { PdfItemType } from '../../pdf-viewer-api';
+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 { StrokeStylePicker } from '../../common/StrokeStylePicker';
+import { ColorPicker } from '../../common/ColorPicker';
+export const createEditShapeAnnotationToolbar = (props, element) => {
+    const state = {
+        strokeColors: props.strokeColors,
+        strokeWidths: props.strokeWidths,
+        fillColors: props.fillColors,
+        selectedStrokeColor: props.selectedStrokeColor,
+        selectedStrokeWidth: props.selectedStrokeWidth,
+        selectedStrokeStyle: props.selectedStrokeStyle,
+        selectedFillColor: props.selectedFillColor,
+        itemType: props.itemType,
+    };
+    const actions = {
+        setStrokeColor: (color) => ($state) => {
+            props.onStrokeColorChanged(color);
+            return Object.assign(Object.assign({}, $state), { selectedStrokeColor: color });
+        },
+        setStrokeWidth: (width) => ($state) => {
+            props.onStrokeWidthChanged(width);
+            return Object.assign(Object.assign({}, $state), { selectedStrokeWidth: width });
+        },
+        setStrokeStyle: (style) => ($state) => {
+            props.onStrokeStyleChanged(style);
+            return Object.assign(Object.assign({}, $state), { selectedStrokeStyle: style });
+        },
+        setFillColor: (color) => ($state) => {
+            props.onFillColorChanged(color);
+            return Object.assign(Object.assign({}, $state), { selectedFillColor: color });
+        },
+        setCancel: () => ($state) => {
+            return Object.assign({}, $state);
+        },
+    };
+    const App = () => h(EditShapeAnnotationToolbar, null);
+    const EditShapeAnnotationToolbar = ({}) => ($state, $actions) => (h(Toolbar, { allowWrap: true, alignCenter: true },
+        h(ToolbarItemGroup, null,
+            h(StrokeWidthPicker, { tooltip: translationManager.getText('annotShape.strokeWidth'), noneStrokeText: translationManager.getText('border.none'), strokeWidths: $state.strokeWidths, value: $state.selectedStrokeWidth, onChange: $actions.setStrokeWidth }),
+            h(StrokeStylePicker, { tooltip: translationManager.getText('annotShape.strokeStyle'), value: $state.selectedStrokeStyle, disabled: $state.selectedStrokeWidth === 0, onChange: $actions.setStrokeStyle, shapeType: $state.itemType === PdfItemType.CIRCLE ? 'circle' : 'rectangle' }),
+            h(ColorPicker, { tooltip: translationManager.getText('annotShape.strokeColor'), colors: $state.strokeColors, color: $state.selectedStrokeColor, disabled: $state.selectedStrokeWidth === 0, icon: icons.pencil, onChange: $actions.setStrokeColor })),
+        h(ToolbarItemGroup, null,
+            h(ToolbarSeparator, null),
+            h(ColorPicker, { tooltip: translationManager.getText('annotShape.bgColor'), colors: $state.fillColors, color: $state.selectedFillColor, icon: icons.fillColor, onChange: $actions.setFillColor })),
+        h(ToolbarItemGroup, { pushRight: true },
+            h(ToolbarSeparator, null),
+            h(ToolbarButton, { icon: icons.close, onClick: props.onCancel }))));
+    return app(state, actions, App, element);
+};

package/es6/modules/shape-annotations/ShapeAnnotationModule.d.ts

@@ -0,0 +1,28 @@
+import { CanvasModule, CanvasModuleType } from '../CanvasModule';
+import { PdfItemType } from '../../pdf-viewer-api';
+export declare class ShapeAnnotationModule 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(): void;
+    onEdit(annotationId: number): void;
+}

package/es6/modules/shape-annotations/ShapeAnnotationModule.js

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

package/es6/modules/stamp-annotation/AddStampAnnotationLayer.d.ts

@@ -0,0 +1,19 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+export declare class AddStampAnnotationLayer extends CanvasLayer {
+    private context;
+    private pointerDown;
+    private startPoint;
+    private stampRect;
+    private page;
+    private screenPageRect;
+    private aspectRatio;
+    private stamps;
+    onCreate(): void;
+    onSave(): Promise<void>;
+    onRemove(): void;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private close;
+    private setStamp;
+    private createStampAnnotation;
+}