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

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

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

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

@@ -0,0 +1,31 @@
+/** internal */
+export interface ExecCommandArgs {
+    cmd: string;
+    args?: any;
+}
+/** internal */
+export interface RichTextEditorContent {
+    richText: string;
+    content: string;
+    backgroundColor: string | null;
+    borderWidth: number;
+    fontName: string | null;
+    fontColor: string | null;
+    fontSizeCSS: string | null;
+}
+/** internal */
+export declare class RichTextEditor {
+    private element;
+    private editorElement;
+    private editorDocument;
+    private content;
+    private hasRangeSelection;
+    constructor(element: HTMLElement, content: RichTextEditorContent);
+    setZoom(zoom: number): void;
+    getEditorValues(): RichTextEditorContent;
+    executeCommand(cmd: ExecCommandArgs): void;
+    private cleanupRichText;
+    private getContent;
+    private handleOnPaste;
+    private handleSelectionChange;
+}

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

@@ -0,0 +1,223 @@
+import { Color } from '../../common/Color';
+import { convertPdfToCssPixel, roundToTwo } from '../../common/Tools';
+/** internal */
+export class RichTextEditor {
+    constructor(element, content) {
+        this.hasRangeSelection = false;
+        // bind events
+        this.executeCommand = this.executeCommand.bind(this);
+        this.handleOnPaste = this.handleOnPaste.bind(this);
+        this.handleSelectionChange = this.handleSelectionChange.bind(this);
+        this.content = content;
+        // create elements
+        this.element = element;
+        this.element.style.background = 'white';
+        this.element.classList.add('pwv-freetexteditor');
+        this.editorElement = document.createElement('iframe');
+        this.editorElement.width = '100%';
+        this.editorElement.height = '100%';
+        this.editorElement.frameBorder = '0';
+        this.editorElement.style.transformOrigin = '0 0';
+        this.element.appendChild(this.editorElement);
+        this.editorDocument = this.editorElement.contentDocument;
+        this.editorDocument.open();
+        this.editorDocument.close();
+        // set content
+        let text = content.richText;
+        text = text.replace(/\&#(10|13|x0A|x0D);/gi, '<br>');
+        text = text.replace(/<p\s*([^>]*)>/gi, '<div $1>');
+        text = text.replace(/<\/p>\s*<br\/*>/gi, '</div>');
+        text = text.replace(/<br\/*>\s*<\/p>\s*/gi, '</div>');
+        text = text.replace(/<\/p>/gi, '</div>');
+        text = text.replace(/\r?\n|\r/g, '');
+        const m = /.*(<body.*<\/body>).*/gi.exec(text);
+        /* tslint:disable:max-line-length */
+        this.editorDocument.body.outerHTML =
+            m && m.length > 1
+                ? m[1]
+                : '<?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"><p></p></body>';
+        if (this.editorDocument.body.children.length === 0) {
+            if (this.editorDocument.body.childNodes.length === 1 &&
+                this.editorDocument.body.childNodes[0].nodeType === Node.TEXT_NODE) {
+                this.editorDocument.body.innerHTML = `<p>${this.editorDocument.body.childNodes[0].textContent}</p>`;
+            }
+            else {
+                this.editorDocument.body.innerHTML = '<div><br/></div>';
+            }
+        }
+        else {
+            this.editorDocument.body.childNodes.forEach((node) => {
+                if (node.nodeName === 'DIV' && node.childNodes.length === 0) {
+                    const br = document.createElement('br');
+                    node.appendChild(br);
+                }
+            });
+        }
+        this.editorDocument.body.addEventListener('input', (e) => {
+            if (this.editorDocument.body.innerHTML === '' ||
+                this.editorDocument.body.innerHTML === '<br>') {
+                this.editorDocument.body.innerHTML = '<div><br/></div>';
+            }
+        });
+        this.editorDocument.body.addEventListener('keydown', (e) => {
+            if (e.key === 'Tab') {
+                e.preventDefault();
+            }
+            else if (e.key === 'Enter') {
+                this.editorDocument.execCommand('formatBlock', false, 'div');
+            }
+        });
+        this.editorDocument.head.insertAdjacentHTML('beforeend', `<style>
+        body  {
+          padding: 1px;
+          line-height: 1.2;
+          margin: 0;
+          height: 100%;
+          box-sizing: border-box;
+          white-space: pre-wrap:
+          overflow: hidden;
+        } 
+        p {
+          margin: 0;
+        }
+      </style>`);
+        this.editorDocument.body.style.fontFamily = content.fontName;
+        this.editorDocument.body.style.color = content.fontColor;
+        this.editorDocument.body.style.fontSize = content.fontSizeCSS;
+        this.editorDocument.body.style.backgroundColor = content.backgroundColor;
+        this.editorDocument.body.style.borderColor = '#000000';
+        this.editorDocument.body.style.borderStyle = 'solid';
+        this.editorDocument.body.style.borderWidth = `${content.borderWidth}px`;
+        this.editorDocument.designMode = 'on';
+        // this.editorDocument.execCommand('defaultParagraphSeparator', false, 'div')
+        // add event listeners
+        this.editorDocument.addEventListener('paste', this.handleOnPaste, false);
+        this.editorDocument.addEventListener('selectionchange', this.handleSelectionChange, false);
+        this.editorDocument.addEventListener('mousewheel', (e) => {
+            e.preventDefault();
+            e.cancelBubble = true;
+        }, { passive: false });
+        this.editorDocument.body.setAttribute('tabindex', '1');
+        window.setTimeout(() => {
+            var _a;
+            let range = this.editorDocument.createRange();
+            range.setStart(this.editorDocument.body, 0);
+            range.setEnd(this.editorDocument.body, this.editorDocument.body.children.length);
+            range.collapse();
+            (_a = this.editorDocument.getSelection()) === null || _a === void 0 ? void 0 : _a.addRange(range);
+            this.editorDocument.body.focus();
+        }, 1);
+    }
+    setZoom(zoom) {
+        this.editorElement.style.transform = `scale(${zoom})`;
+        this.editorElement.width = this.element.clientWidth / zoom + 'px';
+        this.editorElement.height = this.element.clientHeight / zoom + 'px';
+    }
+    getEditorValues() {
+        const richText = '<?xml version="1.0"?>' + this.cleanupRichText(this.editorDocument.body.outerHTML);
+        const pureContent = this.getContent(richText);
+        return Object.assign(Object.assign({}, this.content), { content: pureContent ? pureContent : '', backgroundColor: this.editorDocument.body.style.backgroundColor, fontColor: this.editorDocument.body.style.color, fontName: this.editorDocument.body.style.fontFamily, fontSizeCSS: this.editorDocument.body.style.fontSize, richText });
+    }
+    executeCommand(cmd) {
+        switch (cmd.cmd) {
+            case 'setFont': {
+                this.content.fontName = cmd.args;
+                this.editorDocument.body.style.fontFamily = cmd.args;
+                break;
+            }
+            case 'setFontColor': {
+                this.content.fontColor = cmd.args;
+                this.editorDocument.body.style.color = cmd.args;
+                break;
+            }
+            case 'setBorderWidth': {
+                this.content.borderWidth = cmd.args;
+                this.editorDocument.body.style.borderWidth = `${cmd.args}px`;
+                break;
+            }
+            case 'setFontSize': {
+                const size = convertPdfToCssPixel(cmd.args);
+                this.content.fontSizeCSS = size;
+                this.editorDocument.body.style.fontSize = size;
+                break;
+            }
+            case 'setFillColor': {
+                this.content.backgroundColor = cmd.args;
+                this.editorDocument.body.style.backgroundColor = cmd.args;
+                break;
+            }
+            default: {
+                this.editorDocument.execCommand(cmd.cmd, false, cmd.args);
+            }
+        }
+    }
+    cleanupRichText(richText) {
+        let text = richText;
+        text = text.replace(/<div><br><\/div>/gi, '&#13;');
+        text = text.replace(/<div\s*([^>]*)\>/gi, '<p $1>');
+        text = text.replace(/<\/div\>/gi, '</p>&#13;');
+        text = text.replace(/<p\s*>/gi, '<p>');
+        text = text.replace(/\<br\>/gi, '&#13;');
+        text = text.replace(/(\n|\r)/gi, '');
+        // const underline = /<u>/gi
+        // const found = text.match(underline) // find underline tags
+        // if (found && found.length > 0) {
+        //   // if they exist remove them
+        //   text = text.replace(/<\/?u>/gi, '')
+        //   text = text.replace(/style=\"/gi, 'style="text-decoration:underline') // set text-decoration instead
+        // }
+        text = text.replace(/<u>/gi, '<span style="text-decoration:underline;">');
+        text = text.replace(/<\/u>/gi, '</span>');
+        text = text.replace(/\&nbsp\;/gi, ' '); // remove non breaking space
+        text = text.replace(/overflow\:.*?\;/gi, ''); // remove: overflow:...;
+        text = text.replace(/background-color\:.*?\;/gi, ''); // remove background-color:...;
+        text = text.replace(/border\:.*?\;/gi, ''); // remove border:...;
+        text = text.replace(/border-color\:.*?\;/gi, ''); // remove border-color:...;
+        text = text.replace(/border-style\:.*?\;/gi, ''); // remove border-style:...;
+        text = text.replace(/border-width\:.*?\;/gi, ''); // remove border-width:...;
+        text = text.replace(/font-size\:\s*(\d*\.?\d+)px\s*\;/gi, (_, size) => {
+            size = parseFloat(size);
+            // calculate font size in pdf units
+            size = roundToTwo((size / 96) * 72);
+            return 'font-size:' + size + 'pt;';
+        });
+        text = text.replace(/rgb\((.+?)\)/gi, (rgb) => {
+            return new Color(rgb).toHexRgb();
+        });
+        // remove spaces within the styles tag
+        text = text.replace(/style="(.*?)"/gi, (styles) => {
+            return styles.replace(/\s*/gi, '');
+        });
+        return text;
+    }
+    getContent(richText) {
+        const parser = new DOMParser();
+        const node = parser.parseFromString(richText, 'text/html').documentElement;
+        let nodes = node ? node.querySelector('*') : null;
+        if (nodes) {
+            while (true) {
+                nodes = nodes.nextSibling;
+                if (nodes) {
+                    if (nodes.nodeName.toLocaleLowerCase() === 'body') {
+                        return nodes.innerText;
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+        }
+        return null;
+    }
+    handleOnPaste(e) {
+        e.preventDefault();
+        const text = e.clipboardData.getData('text/plain');
+        if (text) {
+            this.executeCommand({
+                cmd: 'insertText',
+                args: text,
+            });
+        }
+    }
+    handleSelectionChange(e) { }
+}

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

@@ -0,0 +1,31 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+export declare enum HighlightTool {
+    HIGHLIGHT = 0,
+    RECTANGULAR_HIGHLIGHT = 1,
+    UNDERLINE = 2,
+    SQUIGGLY = 3,
+    STRIKE_OUT = 4
+}
+export declare class AddHighlightAnnotationLayer extends CanvasLayer {
+    private context;
+    private colors;
+    private selectedColor;
+    private selectedTool;
+    private pdfStartPoint;
+    private screenStartPoint;
+    private pointerDown;
+    private page;
+    private selecting;
+    private selection;
+    onCreate(): void;
+    onSave(): Promise<void>;
+    onRemove(): void;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private setColor;
+    private setTool;
+    private close;
+    private getPdfItemTypeForTool;
+    private createRectangularHighlightAnnotation;
+    private createHighlightAnnotation;
+}

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

@@ -0,0 +1,289 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { PdfItemType, } from '../../pdf-viewer-api';
+import { CursorStyle } from '../../pdf-viewer-canvas/state/viewer';
+import { renderTextSelection } from '../../pdf-viewer-canvas/view-layers/canvasShapes';
+import { Color } from '../../common/Color';
+import { createAddHighlightAnnotationToolbar } from './AddHighlightAnnotationToolbar';
+import { getRectFromSelection } from '../../pdf-viewer-canvas/state/document';
+export var HighlightTool;
+(function (HighlightTool) {
+    HighlightTool[HighlightTool["HIGHLIGHT"] = 0] = "HIGHLIGHT";
+    HighlightTool[HighlightTool["RECTANGULAR_HIGHLIGHT"] = 1] = "RECTANGULAR_HIGHLIGHT";
+    HighlightTool[HighlightTool["UNDERLINE"] = 2] = "UNDERLINE";
+    HighlightTool[HighlightTool["SQUIGGLY"] = 3] = "SQUIGGLY";
+    HighlightTool[HighlightTool["STRIKE_OUT"] = 4] = "STRIKE_OUT";
+})(HighlightTool || (HighlightTool = {}));
+const moduleLayerName = 'AddHighlightAnnotation';
+export class AddHighlightAnnotationLayer extends CanvasLayer {
+    constructor() {
+        super(...arguments);
+        this.colors = [];
+        this.selectedColor = '';
+        this.selectedTool = HighlightTool.HIGHLIGHT;
+        this.pdfStartPoint = null;
+        this.screenStartPoint = null;
+        this.pointerDown = false;
+        this.page = 0;
+        this.selecting = false;
+        this.selection = null;
+    }
+    onCreate() {
+        this.setColor = this.setColor.bind(this);
+        this.close = this.close.bind(this);
+        this.setTool = this.setTool.bind(this);
+        this.context = this.createCanvas();
+        const annotationOptions = this.options.annotation;
+        this.colors = annotationOptions.colors.highlightColors;
+        this.selectedColor = annotationOptions.colors.highlightAnnotationColor;
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        createAddHighlightAnnotationToolbar({
+            colors: this.colors,
+            selectedColor: this.selectedColor,
+            selectedTool: this.selectedTool,
+            onColorChanged: this.setColor,
+            onToolChanged: this.setTool,
+            onClose: this.close,
+        }, toolbarElement);
+        this.store.viewer.beginModule(moduleLayerName);
+    }
+    onSave() {
+        const promise = new Promise((resolve, reject) => {
+            resolve();
+        });
+        return promise;
+    }
+    onRemove() {
+        this.removeCanvasElements();
+        this.context = null;
+        /* tslint:disable-next-line:align */
+        const toolbarElement = this.module.toolbarElement;
+        toolbarElement.innerHTML = '';
+        this.store.viewer.endModule(moduleLayerName);
+    }
+    render(timestamp, state) {
+        if (state.viewer.modeChanged && state.viewer.selectedModuleName !== moduleLayerName) {
+            this.remove();
+            return;
+        }
+        if (this.context) {
+            if (this.selectedTool === HighlightTool.RECTANGULAR_HIGHLIGHT) {
+                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.screenStartPoint = pointerPos;
+                        this.pointerDown = true;
+                        if (this.page === 0 && pointerPdfPos.isOnPage) {
+                            this.page = pointerPdfPos.pdfPoint.page;
+                        }
+                    }
+                    if (this.screenStartPoint) {
+                        const rect = getRectFromSelection(state.document, {
+                            x: this.screenStartPoint.x,
+                            y: this.screenStartPoint.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.screenStartPoint) {
+                    const rect = getRectFromSelection(state.document, {
+                        x: this.screenStartPoint.x,
+                        y: this.screenStartPoint.y,
+                    }, {
+                        x: pointerPos.x,
+                        y: pointerPos.y,
+                    }, this.page);
+                    if (rect) {
+                        this.createRectangularHighlightAnnotation(rect);
+                        this.pointerDown = false;
+                        this.screenStartPoint = null;
+                        this.page = 0;
+                    }
+                }
+            }
+            else {
+                let drawSelection = state.canvas.canvasInvalidated;
+                if (state.pointer.positionChanged) {
+                    const pointerPos = {
+                        x: state.pointer.x.devicePixels,
+                        y: state.pointer.y.devicePixels,
+                    };
+                    const pointerPdfPos = this.pdfApi.transformScreenPointToPdfPoint(pointerPos);
+                    let currentTextFragment = null;
+                    if (pointerPdfPos.isOnPage) {
+                        currentTextFragment = this.pdfApi.getTextFragmentOnPoint(pointerPos);
+                        if (currentTextFragment) {
+                            this.store.viewer.setCursorStyle(CursorStyle.TEXT);
+                        }
+                        else {
+                            this.store.viewer.setCursorStyle(CursorStyle.DEFAULT);
+                        }
+                    }
+                    else {
+                        this.store.viewer.setCursorStyle(CursorStyle.DEFAULT);
+                    }
+                    if (state.pointer.stateChanged) {
+                        if (state.pointer.isDown) {
+                            if (pointerPdfPos.isOnPage) {
+                                if (currentTextFragment) {
+                                    const startPdfPos = pointerPdfPos;
+                                    this.selecting = true;
+                                    this.selection = null;
+                                    this.pdfStartPoint = startPdfPos.pdfPoint;
+                                    drawSelection = true;
+                                }
+                            }
+                        }
+                        else {
+                            if (this.selecting) {
+                                const ctx = this.context;
+                                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+                                this.createHighlightAnnotation();
+                                this.selecting = false;
+                            }
+                        }
+                    }
+                    if (this.selecting &&
+                        this.pdfStartPoint &&
+                        this.pdfStartPoint !== pointerPdfPos.pdfPoint) {
+                        const endPoint = this.pdfApi.getClosestPointOnPdfByScreenPoint(pointerPos);
+                        this.selection = this.pdfApi.getTextSelection(this.pdfStartPoint, endPoint);
+                    }
+                    drawSelection = true;
+                }
+                if (drawSelection && this.selection) {
+                    const ctx = this.context;
+                    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+                    const screenSelection = [];
+                    for (let i = 0; i < this.selection.quadrilaterals.length; i++) {
+                        const path = this.pdfApi.transformQuadrilateralToViewport(this.selection.quadrilaterals[i]);
+                        screenSelection.push(path);
+                    }
+                    renderTextSelection(ctx, devicePixelRatio * state.document.zoom, this.options.viewer.general.textSelectionColor, screenSelection);
+                }
+            }
+        }
+    }
+    setColor(color) {
+        this.selectedColor = color;
+        this.options.annotation.colors.highlightAnnotationColor = color;
+    }
+    setTool(tool) {
+        this.selectedTool = tool;
+    }
+    close() {
+        this.remove();
+    }
+    getPdfItemTypeForTool() {
+        switch (this.selectedTool) {
+            case HighlightTool.HIGHLIGHT:
+                return PdfItemType.HIGHLIGHT;
+            case HighlightTool.RECTANGULAR_HIGHLIGHT:
+                return PdfItemType.HIGHLIGHT;
+            case HighlightTool.UNDERLINE:
+                return PdfItemType.UNDERLINE;
+            case HighlightTool.SQUIGGLY:
+                return PdfItemType.SQUIGGLY;
+            case HighlightTool.STRIKE_OUT:
+                return PdfItemType.STRIKE_OUT;
+            default:
+                throw new Error('unknown Highlight tool');
+        }
+    }
+    createRectangularHighlightAnnotation(rect) {
+        const pdfRect = this.pdfApi.transformScreenRectToPdfRect(rect, this.page);
+        const colorObj = new Color(this.selectedColor);
+        colorObj.setOpacity(this.options.annotation.highlightOpacity);
+        const color = colorObj.toRgba();
+        const quadrilaterals = [];
+        quadrilaterals.push({
+            pageNumber: this.page,
+            bottomLeft: { x: pdfRect.pdfX, y: pdfRect.pdfY },
+            bottomRight: { x: pdfRect.pdfX + pdfRect.pdfW, y: pdfRect.pdfY },
+            topLeft: { x: pdfRect.pdfX, y: pdfRect.pdfY + pdfRect.pdfH },
+            topRight: { x: pdfRect.pdfX + pdfRect.pdfW, y: pdfRect.pdfY + pdfRect.pdfH },
+        });
+        const args = {
+            itemType: PdfItemType.HIGHLIGHT,
+            page: this.page,
+            pdfRect,
+            color,
+            author: this.options.viewer.general.user,
+            quadrilaterals,
+        };
+        this.pdfApi.createItem(args).then((item) => {
+            this.onAnnotationCreated(item);
+        });
+    }
+    createHighlightAnnotation() {
+        if (this.pdfApi && this.store) {
+            const pdfItemType = this.getPdfItemTypeForTool();
+            const selection = this.selection;
+            this.selection = null;
+            if (selection) {
+                const selByPage = [];
+                for (let i = 0; i < selection.quadrilaterals.length; i++) {
+                    const quadrilateral = selection.quadrilaterals[i];
+                    if (!selByPage[quadrilateral.pageNumber]) {
+                        selByPage[quadrilateral.pageNumber] = [];
+                    }
+                    selByPage[quadrilateral.pageNumber].push(quadrilateral);
+                }
+                let color = this.selectedColor;
+                if (pdfItemType === PdfItemType.HIGHLIGHT) {
+                    const colorObj = new Color(color);
+                    colorObj.setOpacity(this.options.annotation.highlightOpacity);
+                    color = colorObj.toRgba();
+                }
+                for (let i = 0; i < selByPage.length; i++) {
+                    if (selByPage[i]) {
+                        const quadrilaterals = selByPage[i];
+                        const args = {
+                            itemType: pdfItemType,
+                            page: i,
+                            pdfRect: {
+                                pdfX: 0,
+                                pdfY: 0,
+                                pdfW: 0,
+                                pdfH: 0,
+                                page: i,
+                            },
+                            color,
+                            author: this.options.viewer.general.user,
+                            quadrilaterals,
+                        };
+                        this.pdfApi.createItem(args).then((item) => {
+                            this.onAnnotationCreated(item);
+                        });
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+import { HighlightTool } from './AddHighlightAnnotationLayer';
+export interface AddHighlightAnnotationToolbarProps {
+    colors: string[];
+    selectedColor: string;
+    selectedTool: HighlightTool;
+    onToolChanged(tool: HighlightTool): void;
+    onColorChanged(color: string): void;
+    onClose(): void;
+}
+interface AddHighlightAnnotationToolbarState {
+    colors: string[];
+    selectedTool: HighlightTool;
+    selectedColor: string;
+}
+export interface AddHighlightAnnotationToolbarActions {
+    setColor(color: string): AddHighlightAnnotationToolbarState;
+    setTool(tool: HighlightTool): AddHighlightAnnotationToolbarState;
+}
+export declare const createAddHighlightAnnotationToolbar: (props: AddHighlightAnnotationToolbarProps, element: HTMLElement) => AddHighlightAnnotationToolbarActions;
+export {};