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

package/es6/pdf-viewer-canvas/view-layers/views/AnnotationBorder.js

@@ -0,0 +1,377 @@
+import { DragMoveHandler } from '../../../common/DragMoveHandler';
+var ResizeDir;
+(function (ResizeDir) {
+    ResizeDir[ResizeDir["NW"] = 1] = "NW";
+    ResizeDir[ResizeDir["NE"] = 2] = "NE";
+    ResizeDir[ResizeDir["SW"] = 3] = "SW";
+    ResizeDir[ResizeDir["SE"] = 4] = "SE";
+})(ResizeDir || (ResizeDir = {}));
+/** internal */
+export const MIN_SIZE = 10;
+/** internal */
+export class AnnotationBorder {
+    constructor(element, onMoved, onResized, onDblClick, options, store, isViewOnly) {
+        this.annotationId = null;
+        this.movable = false;
+        this.resizable = false;
+        this.aspectRatio = null;
+        this.pageRect = null;
+        this.dragOffsetX = 0;
+        this.dragOffsetY = 0;
+        this.containerOffsetX = 0;
+        this.containerOffsetY = 0;
+        this.resizeDir = null;
+        this.minSize = MIN_SIZE;
+        this.startMove = this.startMove.bind(this);
+        this.moving = this.moving.bind(this);
+        this.endMove = this.endMove.bind(this);
+        this.click = this.click.bind(this);
+        this.dblClick = this.dblClick.bind(this);
+        this.setAnnotation = this.setAnnotation.bind(this);
+        this.deselectAnnotation = this.deselectAnnotation.bind(this);
+        this.startResize = this.startResize.bind(this);
+        this.resizing = this.resizing.bind(this);
+        this.resizeNoAspectRatio = this.resizeNoAspectRatio.bind(this);
+        this.resizeWithAspectRatio = this.resizeWithAspectRatio.bind(this);
+        this.endResize = this.endResize.bind(this);
+        this.dragElement = document.createElement('div');
+        this.border = document.createElement('div');
+        this.resizeElementNw = document.createElement('div');
+        this.resizeElementNe = document.createElement('div');
+        this.resizeElementSw = document.createElement('div');
+        this.resizeElementSe = document.createElement('div');
+        this.isViewOnly = isViewOnly;
+        this.onMoved = onMoved;
+        this.onResized = onResized;
+        this.onDblClick = onDblClick;
+        this.element = element;
+        this.options = options;
+        this.store = store;
+        this.element.appendChild(this.dragElement);
+        this.dragElement.classList.add('pwv-annotation-border-draghandle');
+        this.dragElement.style.display = 'none';
+        this.dragHandler = new DragMoveHandler(this.dragElement, this.startMove, this.moving, this.endMove, this.click, this.dblClick);
+        this.dragHandler.suspend();
+        this.element.appendChild(this.border);
+        this.border.classList.add('pwv-annotation-border');
+        this.element.appendChild(this.resizeElementNw);
+        this.resizeElementNw.classList.add('pwv-annotation-border-resizehandle-nw');
+        this.resizeElementNw.style.display = 'none';
+        this.resizeHandlerNw = new DragMoveHandler(this.resizeElementNw, this.startResize, this.resizing, this.endResize);
+        this.resizeHandlerNw.suspend();
+        this.element.appendChild(this.resizeElementNe);
+        this.resizeElementNe.classList.add('pwv-annotation-border-resizehandle-ne');
+        this.resizeElementNe.style.display = 'none';
+        this.resizeHandlerNe = new DragMoveHandler(this.resizeElementNe, this.startResize, this.resizing, this.endResize);
+        this.resizeHandlerNe.suspend();
+        this.element.appendChild(this.resizeElementSw);
+        this.resizeElementSw.classList.add('pwv-annotation-border-resizehandle-sw');
+        this.resizeElementSw.style.display = 'none';
+        this.resizeHandlerSw = new DragMoveHandler(this.resizeElementSw, this.startResize, this.resizing, this.endResize);
+        this.resizeHandlerSw.suspend();
+        this.element.appendChild(this.resizeElementSe);
+        this.resizeElementSe.classList.add('pwv-annotation-border-resizehandle-se');
+        this.resizeElementSe.style.display = 'none';
+        this.resizeHandlerSe = new DragMoveHandler(this.resizeElementSe, this.startResize, this.resizing, this.endResize);
+        this.resizeHandlerSe.suspend();
+    }
+    setAnnotation(annotation, pageRect) {
+        const { behaviors } = annotation;
+        const isReadOnly = annotation.isReadOnly();
+        const isLocked = annotation.isLocked() && !this.options.viewer.permissions.allowEditLockedAnnotations;
+        this.annotationId = annotation.id;
+        this.movable = behaviors.movable && !isLocked && !isReadOnly;
+        this.resizable = behaviors.resizable && !isLocked && !isReadOnly;
+        this.aspectRatio = behaviors.aspectRatioChangeable
+            ? null
+            : annotation.pdfRect.pdfW / annotation.pdfRect.pdfH;
+        this.pageRect = pageRect;
+        if (this.movable) {
+            this.dragElement.style.display = 'block';
+        }
+        if (this.resizable) {
+            this.resizeElementNw.style.display = 'block';
+            this.resizeElementNe.style.display = 'block';
+            this.resizeElementSw.style.display = 'block';
+            this.resizeElementSe.style.display = 'block';
+        }
+        window.setTimeout(() => {
+            if (this.movable) {
+                this.dragHandler.resume();
+            }
+            if (this.resizable) {
+                this.resizeHandlerNw.resume();
+                this.resizeHandlerNe.resume();
+                this.resizeHandlerSw.resume();
+                this.resizeHandlerSe.resume();
+            }
+        }, 100);
+    }
+    deselectAnnotation() {
+        this.annotationId = null;
+        this.movable = false;
+        this.resizable = false;
+        this.aspectRatio = 0;
+        this.pageRect = null;
+        this.dragHandler.suspend();
+        this.resizeHandlerNw.suspend();
+        this.resizeHandlerNe.suspend();
+        this.resizeHandlerSw.suspend();
+        this.resizeHandlerSe.suspend();
+        this.dragElement.style.display = 'none';
+        this.resizeElementNw.style.display = 'none';
+        this.resizeElementNe.style.display = 'none';
+        this.resizeElementSw.style.display = 'none';
+        this.resizeElementSe.style.display = 'none';
+    }
+    updatePageRect(pageRect) {
+        this.pageRect = pageRect;
+    }
+    click() { }
+    dblClick() {
+        if (this.annotationId) {
+            this.onDblClick(this.annotationId);
+        }
+    }
+    startResize(e) {
+        if (e.element.classList.contains('pwv-annotation-border-resizehandle-nw')) {
+            this.resizeDir = ResizeDir.NW;
+        }
+        else if (e.element.classList.contains('pwv-annotation-border-resizehandle-ne')) {
+            this.resizeDir = ResizeDir.NE;
+        }
+        else if (e.element.classList.contains('pwv-annotation-border-resizehandle-sw')) {
+            this.resizeDir = ResizeDir.SW;
+        }
+        else if (e.element.classList.contains('pwv-annotation-border-resizehandle-se')) {
+            this.resizeDir = ResizeDir.SE;
+        }
+        this.element.classList.add('pwv-annotation-resizing');
+    }
+    resizing(e) {
+        if (this.aspectRatio !== null) {
+            this.resizeWithAspectRatio(e.clientX, e.clientY);
+        }
+        else {
+            this.resizeNoAspectRatio(e.clientX, e.clientY);
+        }
+    }
+    updateMinSize() {
+        const { document } = this.store.getState();
+        this.minSize = MIN_SIZE;
+    }
+    resizeNoAspectRatio(clientX, clientY) {
+        if (this.element && this.element.offsetParent && this.pageRect) {
+            this.updateMinSize();
+            const offsetRect = this.element.offsetParent.getBoundingClientRect();
+            const elementRect = this.element.getBoundingClientRect();
+            const minLeft = this.pageRect.x / window.devicePixelRatio;
+            const maxLeft = minLeft + this.pageRect.w / window.devicePixelRatio;
+            const minTop = this.pageRect.y / window.devicePixelRatio;
+            const maxTop = minTop + this.pageRect.h / window.devicePixelRatio;
+            let pointerX = clientX - offsetRect.left;
+            if (pointerX < minLeft) {
+                pointerX = minLeft;
+            }
+            else if (pointerX > maxLeft) {
+                pointerX = maxLeft;
+            }
+            let pointerY = clientY - offsetRect.top;
+            if (pointerY < minTop) {
+                pointerY = minTop;
+            }
+            else if (pointerY > maxTop) {
+                pointerY = maxTop;
+            }
+            let topPos = elementRect.top - offsetRect.top;
+            let leftPos = elementRect.left - offsetRect.left;
+            let width = elementRect.width;
+            let height = elementRect.height;
+            // width ne se
+            if (this.resizeDir === ResizeDir.NE || this.resizeDir === ResizeDir.SE) {
+                width = pointerX - leftPos;
+                if (width < this.minSize) {
+                    width = this.minSize;
+                }
+            }
+            // width nw sw
+            if (this.resizeDir === ResizeDir.NW || this.resizeDir === ResizeDir.SW) {
+                width = leftPos + width - pointerX;
+                if (width < this.minSize) {
+                    width = this.minSize;
+                    leftPos = elementRect.left - offsetRect.left + elementRect.width - width;
+                }
+                else {
+                    leftPos = pointerX;
+                }
+            }
+            // height se sw
+            if (this.resizeDir === ResizeDir.SE || this.resizeDir === ResizeDir.SW) {
+                height = pointerY - topPos;
+                if (height < this.minSize) {
+                    height = this.minSize;
+                }
+            }
+            // height ne nw
+            if (this.resizeDir === ResizeDir.NE || this.resizeDir === ResizeDir.NW) {
+                height = topPos + height - pointerY;
+                if (height < this.minSize) {
+                    height = this.minSize;
+                    topPos = elementRect.top - offsetRect.top + elementRect.height - height;
+                }
+                else {
+                    topPos = pointerY;
+                }
+            }
+            this.element.style.top = topPos + 'px';
+            this.element.style.left = leftPos + 'px';
+            this.element.style.width = width + 'px';
+            this.element.style.height = height + 'px';
+        }
+    }
+    resizeWithAspectRatio(clientX, clientY) {
+        if (this.pageRect && this.aspectRatio !== null && this.element && this.element.offsetParent) {
+            this.updateMinSize();
+            const offsetRect = this.element.offsetParent.getBoundingClientRect();
+            const elementRect = this.element.getBoundingClientRect();
+            const minLeft = this.pageRect.x / window.devicePixelRatio;
+            const maxLeft = minLeft + this.pageRect.w / window.devicePixelRatio;
+            const minTop = this.pageRect.y / window.devicePixelRatio;
+            const maxTop = minTop + this.pageRect.h / window.devicePixelRatio;
+            let pointerX = clientX - offsetRect.left;
+            if (pointerX < minLeft) {
+                pointerX = minLeft;
+            }
+            else if (pointerX > maxLeft) {
+                pointerX = maxLeft;
+            }
+            let pointerY = clientY - offsetRect.top;
+            if (pointerY < minTop) {
+                pointerY = minTop;
+            }
+            else if (pointerY > maxTop) {
+                pointerY = maxTop;
+            }
+            let topPos = elementRect.top - offsetRect.top;
+            let leftPos = elementRect.left - offsetRect.left;
+            let width = elementRect.width;
+            let height = elementRect.height;
+            const calcSize = (w, h, r) => {
+                if (this.store.getState().document.rotation % 180 !== 0)
+                    r = 1 / r;
+                const size = { w, h };
+                if (w / h < r) {
+                    size.w = Math.max(w, this.minSize);
+                    size.h = size.w / r;
+                    if (size.h < this.minSize) {
+                        size.h = this.minSize;
+                        size.w = size.h * r;
+                    }
+                }
+                else {
+                    size.h = Math.max(h, this.minSize);
+                    size.w = size.h * r;
+                    if (size.w < this.minSize) {
+                        size.w = this.minSize;
+                        size.h = size.w * r;
+                    }
+                }
+                return size;
+            };
+            // resize nw (top left)
+            if (this.resizeDir === ResizeDir.NW) {
+                const w = leftPos + width - pointerX;
+                const h = topPos + height - pointerY;
+                const size = calcSize(w, h, this.aspectRatio);
+                leftPos = leftPos + width - size.w;
+                topPos = topPos + height - size.h;
+                width = size.w;
+                height = size.h;
+            }
+            // resize ne (top right)
+            if (this.resizeDir === ResizeDir.NE) {
+                const w = pointerX - leftPos;
+                const h = topPos + height - pointerY;
+                const size = calcSize(w, h, this.aspectRatio);
+                topPos = topPos + height - size.h;
+                width = size.w;
+                height = size.h;
+            }
+            // resize sw (bottom left)
+            if (this.resizeDir === ResizeDir.SW) {
+                const w = leftPos + width - pointerX;
+                const h = pointerY - topPos;
+                const size = calcSize(w, h, this.aspectRatio);
+                leftPos = leftPos + width - size.w;
+                width = size.w;
+                height = size.h;
+            }
+            // resize se (bottom right)
+            if (this.resizeDir === ResizeDir.SE) {
+                const w = pointerX - leftPos;
+                const h = pointerY - topPos;
+                const size = calcSize(w, h, this.aspectRatio);
+                width = size.w;
+                height = size.h;
+            }
+            this.element.style.top = topPos + 'px';
+            this.element.style.left = leftPos + 'px';
+            this.element.style.width = width + 'px';
+            this.element.style.height = height + 'px';
+        }
+    }
+    endResize(e) {
+        if (e.moved && this.annotationId) {
+            this.onResized(this.annotationId, {
+                x: this.element.offsetLeft,
+                y: this.element.offsetTop,
+                w: this.element.offsetWidth,
+                h: this.element.offsetHeight,
+            });
+        }
+        this.element.classList.remove('pwv-annotation-resizing');
+    }
+    startMove(e) {
+        const elementRect = this.element.getBoundingClientRect();
+        const offsetParent = this.element.offsetParent;
+        const offsetParentRect = offsetParent.getBoundingClientRect();
+        this.dragOffsetX = e.clientX - elementRect.left;
+        this.dragOffsetY = e.clientY - elementRect.top;
+        this.containerOffsetX = offsetParentRect.left;
+        this.containerOffsetY = offsetParentRect.top;
+        this.element.classList.add('pwv-annotation-moving');
+    }
+    moving(e) {
+        if (this.pageRect) {
+            const minLeft = this.pageRect.x / devicePixelRatio;
+            const maxLeft = minLeft + this.pageRect.w / devicePixelRatio - this.element.offsetWidth;
+            const minTop = this.pageRect.y / devicePixelRatio;
+            const maxTop = minTop + this.pageRect.h / devicePixelRatio - this.element.offsetHeight;
+            let topPos = e.clientY - this.containerOffsetY - this.dragOffsetY;
+            let leftPos = e.clientX - this.containerOffsetX - this.dragOffsetX;
+            if (topPos < minTop) {
+                topPos = minTop;
+            }
+            else if (topPos > maxTop) {
+                topPos = maxTop;
+            }
+            if (leftPos < minLeft) {
+                leftPos = minLeft;
+            }
+            else if (leftPos > maxLeft) {
+                leftPos = maxLeft;
+            }
+            this.element.style.top = topPos + 'px';
+            this.element.style.left = leftPos + 'px';
+        }
+    }
+    endMove(e) {
+        if (e.moved && this.annotationId) {
+            this.onMoved(this.annotationId, {
+                x: this.element.offsetLeft,
+                y: this.element.offsetTop + this.element.offsetHeight,
+            });
+        }
+        this.element.classList.remove('pwv-annotation-moving');
+    }
+}

package/es6/pdf-viewer-canvas/view-layers/views/AnnotationContextBar.d.ts

@@ -0,0 +1,47 @@
+import { Annotation } from '../../../pdf-viewer-api';
+import { ContextBarItem } from '../../state/viewer';
+/** internal */
+export interface AnnotationContextBarProps {
+    allowCopyText: boolean;
+    allowLockAnnotations: boolean;
+    allowEditLockedAnnotations: boolean;
+    onDeleteAnnotation(id: number): void;
+    onRotateAnnotation(id: number): void;
+    onCopy(id: number): void;
+    onCreatePopup(id: number): void;
+    onOpenPopup(id: number): void;
+    onDeletePopup(id: number): void;
+    onToggleLock(id: number): void;
+}
+/** internal */
+export interface ContextBarState {
+    annotation: Annotation | null;
+    isReadOnly: boolean;
+    deletable: boolean;
+    canHavePopup: boolean;
+    canDeletePopup: boolean;
+    canRotate: boolean;
+    canCopy: boolean;
+    isLocked: boolean;
+    hasPopup: boolean;
+    showConfirmDelete: boolean;
+    commands: ContextBarItem[];
+}
+/** internal */
+export interface ContextBarActions {
+    setAnnotation(payload: {
+        annotation: Annotation;
+        commands: ContextBarItem[];
+    }): ContextBarState;
+    startDelete(): ContextBarState;
+    cancelDelete(): ContextBarState;
+    delete(): ContextBarState;
+    copyText(): ContextBarState;
+    rotate(): ContextBarState;
+    addPopup(): ContextBarState;
+    editPopup(): ContextBarState;
+    deletePopup(): ContextBarState;
+    toggleLock(): ContextBarState;
+}
+/** internal */
+export declare const createAnnotationContextBar: (props: AnnotationContextBarProps, element: HTMLElement) => ContextBarActions;

package/es6/pdf-viewer-canvas/view-layers/views/AnnotationContextBar.js

@@ -0,0 +1,102 @@
+import { h, app } 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 { Contextbar } from '../../../common/Contextbar';
+import { icons } from '../../../common/icons';
+import { annotationHasPopup } from '../../state/annotations';
+/** internal */
+export const createAnnotationContextBar = (props, element) => {
+    const state = {
+        annotation: null,
+        isReadOnly: false,
+        hasPopup: false,
+        canRotate: false,
+        deletable: false,
+        canCopy: false,
+        isLocked: false,
+        canHavePopup: false,
+        canDeletePopup: true,
+        showConfirmDelete: false,
+        commands: [],
+    };
+    const actions = {
+        setAnnotation: (payload) => ($state) => {
+            const { annotation, commands } = payload;
+            const { behaviors } = annotation;
+            const isReadOnly = annotation.isReadOnly();
+            return Object.assign(Object.assign({}, $state), { showConfirmDelete: false, commands, annotation: annotation, isReadOnly, hasPopup: annotationHasPopup(annotation), canRotate: behaviors.rotatable, deletable: behaviors.deletable, canCopy: behaviors.text && props.allowCopyText, isLocked: annotation.isLocked(), canHavePopup: behaviors.canHavePopup, canDeletePopup: annotationHasPopup(annotation) && annotation.itemType !== PdfItemType.TEXT });
+        },
+        startDelete: () => ($state) => {
+            return Object.assign(Object.assign({}, $state), { showConfirmDelete: true });
+        },
+        cancelDelete: () => ($state) => {
+            return Object.assign(Object.assign({}, $state), { showConfirmDelete: false });
+        },
+        delete: () => ($state) => {
+            props.onDeleteAnnotation($state.annotation ? $state.annotation.id : 0);
+            return Object.assign({}, $state);
+        },
+        rotate: () => ($state) => {
+            props.onRotateAnnotation($state.annotation ? $state.annotation.id : 0);
+            return Object.assign({}, $state);
+        },
+        copyText: () => ($state) => {
+            props.onCopy($state.annotation ? $state.annotation.id : 0);
+            return Object.assign({}, $state);
+        },
+        addPopup: () => ($state) => {
+            props.onCreatePopup($state.annotation ? $state.annotation.id : 0);
+            return Object.assign(Object.assign({}, $state), { hasPopup: true });
+        },
+        editPopup: () => ($state) => {
+            props.onOpenPopup($state.annotation ? $state.annotation.id : 0);
+            return Object.assign({}, $state);
+        },
+        deletePopup: () => ($state) => {
+            props.onDeletePopup($state.annotation ? $state.annotation.id : 0);
+            return Object.assign(Object.assign({}, $state), { hasPopup: false });
+        },
+        toggleLock: () => ($state) => {
+            props.onToggleLock($state.annotation ? $state.annotation.id : 0);
+            return Object.assign(Object.assign({}, $state), { isLocked: !$state.isLocked });
+        },
+    };
+    const App = () => h(ContextBar, null);
+    const ContextBar = ({}) => ($state, $actions) => {
+        if ($state.isReadOnly) {
+            if ($state.canCopy || ($state.canHavePopup && $state.hasPopup)) {
+                return (h(Contextbar, null,
+                    h(Toolbar, null,
+                        $state.canCopy && (h(ToolbarButton, { tooltip: translationManager.getText('contextbar.copyText'), icon: icons.copy, onClick: $actions.copyText })),
+                        $state.canHavePopup && $state.hasPopup && (h(ToolbarButton, { tooltip: translationManager.getText('contextbar.openPopup'), icon: icons.stickyNote, onClick: $actions.editPopup })))));
+            }
+            return null;
+        }
+        return (h(Contextbar, null,
+            h(Toolbar, null, $state.showConfirmDelete ? (h(ToolbarItemGroup, null,
+                h(ToolbarButton, { onClick: $actions.delete }, translationManager.getText('contextbar.confirmDelete')),
+                h(ToolbarButton, { onClick: $actions.cancelDelete }, translationManager.getText('contextbar.cancelDelete')))) : (h(ToolbarItemGroup, null,
+                !$state.isReadOnly &&
+                    $state.commands.map((cmd) => (h(ToolbarButton, { icon: cmd.icon, tooltip: cmd.tooltip, onClick: () => {
+                            cmd.onCmd($state.annotation ? $state.annotation.id : 0);
+                        }, disabled: ($state.isLocked && !props.allowEditLockedAnnotations) || $state.isReadOnly }))),
+                $state.canCopy && (h(ToolbarButton, { tooltip: translationManager.getText('contextbar.copyText'), icon: icons.copy, onClick: $actions.copyText })),
+                $state.canRotate && (h(ToolbarButton, { tooltip: translationManager.getText('contextbar.rotate'), icon: icons.rotate, onClick: $actions.rotate, disabled: ($state.isLocked && !props.allowEditLockedAnnotations) || $state.isReadOnly })),
+                $state.canHavePopup &&
+                    !$state.isReadOnly &&
+                    !($state.isLocked && !props.allowEditLockedAnnotations) &&
+                    !$state.hasPopup && (h(ToolbarButton, { tooltip: translationManager.getText('contextbar.addPopup'), icon: icons.stickyNoteAdd, onClick: $actions.addPopup, disabled: ($state.isLocked && !props.allowEditLockedAnnotations) || $state.isReadOnly })),
+                $state.canHavePopup && $state.hasPopup && (h(ToolbarButton, { tooltip: translationManager.getText(($state.isLocked && !props.allowEditLockedAnnotations) || $state.isReadOnly
+                        ? 'contextbar.openPopup'
+                        : 'contextbar.editPopup'), icon: ($state.isLocked && !props.allowEditLockedAnnotations) || $state.isReadOnly
+                        ? icons.stickyNote
+                        : icons.stickyNoteEdit, onClick: $actions.editPopup })),
+                $state.canDeletePopup && $state.hasPopup && (h(ToolbarButton, { tooltip: translationManager.getText('contextbar.deletePopup'), icon: icons.stickyNoteRemove, onClick: $actions.deletePopup, disabled: ($state.isLocked && !props.allowEditLockedAnnotations) || $state.isReadOnly })),
+                !$state.isReadOnly && props.allowLockAnnotations && (h(ToolbarButton, { tooltip: translationManager.getText($state.isLocked ? 'contextbar.unlock' : 'contextbar.lock'), icon: $state.isLocked ? icons.lock : icons.unlock, onClick: $actions.toggleLock, disabled: $state.isReadOnly })),
+                $state.deletable && (h(ToolbarButton, { tooltip: translationManager.getText('contextbar.delete'), icon: icons.delete, onClick: $actions.startDelete, disabled: ($state.isLocked && !props.allowEditLockedAnnotations) || $state.isReadOnly })))))));
+    };
+    return app(state, actions, App, element);
+};

package/es6/pdf-viewer-canvas/view-layers/views/TextSelectionContextBar.d.ts

@@ -0,0 +1,14 @@
+import { PdfItemType } from '../../../pdf-viewer-api';
+/** internal */
+export interface TextSelectionContextBarProps {
+    highlightColors: string[];
+    isViewOnly: boolean;
+    allowCopyText: boolean;
+    onCreateAnnotation(type: PdfItemType, color: string): void;
+    onCopyText(): void;
+}
+interface ContextBarActions {
+}
+/** internal */
+export declare const createTextSelectionContextBar: (props: TextSelectionContextBarProps, element: HTMLElement) => ContextBarActions;
+export {};

package/es6/pdf-viewer-canvas/view-layers/views/TextSelectionContextBar.js

@@ -0,0 +1,36 @@
+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 { ColorPicker } from '../../../common/ColorPicker';
+import { Contextbar } from '../../../common/Contextbar';
+import { icons } from '../../../common/icons';
+/** internal */
+export const createTextSelectionContextBar = (props, element) => {
+    const state = {
+        highlightColors: props.highlightColors,
+    };
+    const actions = {};
+    const App = () => h(ContextBar, null);
+    const ContextBar = ({}) => ($state) => {
+        return (h(Contextbar, null,
+            h(Toolbar, null, props.isViewOnly ? (h(ToolbarItemGroup, null,
+                h(ToolbarButton, { tooltip: translationManager.getText('contextbar.copyText'), icon: icons.copy, onClick: props.onCopyText }))) : (h(ToolbarItemGroup, null,
+                props.allowCopyText && (h(ToolbarButton, { tooltip: translationManager.getText('contextbar.copyText'), icon: icons.copy, onClick: props.onCopyText })),
+                h(ColorPicker, { tooltip: translationManager.getText('contextbar.highlightText'), colors: $state.highlightColors, icon: icons.highlighter, color: "#000000ff", onChange: (color) => {
+                        props.onCreateAnnotation(PdfItemType.HIGHLIGHT, color);
+                    } }),
+                h(ColorPicker, { tooltip: translationManager.getText('contextbar.underlineText'), colors: $state.highlightColors, icon: icons.underline, color: "#000000ff", onChange: (color) => {
+                        props.onCreateAnnotation(PdfItemType.UNDERLINE, color);
+                    } }),
+                h(ColorPicker, { tooltip: translationManager.getText('contextbar.squigglyText'), colors: $state.highlightColors, icon: icons.squiggly, color: "#000000ff", onChange: (color) => {
+                        props.onCreateAnnotation(PdfItemType.SQUIGGLY, color);
+                    } }),
+                h(ColorPicker, { tooltip: translationManager.getText('contextbar.strikeOutText'), colors: $state.highlightColors, icon: icons.strikethrough, color: "#000000ff", onChange: (color) => {
+                        props.onCreateAnnotation(PdfItemType.STRIKE_OUT, color);
+                    } }))))));
+    };
+    return app(state, actions, App, element);
+};