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

package/es6/modules/popup/Popup.js

@@ -0,0 +1,360 @@
+import { h, app } 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/Icon';
+import { ColorPicker } from '../../common/ColorPicker';
+import { classNames } from '../../common/classNames';
+import { DragMoveHandler } from '../../common/DragMoveHandler';
+import { PdfItemType } from '../../pdf-viewer-api';
+import { Color } from '../../common/Color';
+export const createPopupView = (props, element) => {
+    const state = {
+        selectedPopup: null,
+        openPopups: [],
+        maxPopupWidth: props.maxPopupWidth,
+        maxPopupHeight: props.maxPopupHeight,
+        minPopupWidth: 260,
+        minPopupHeight: 200,
+        currentUser: props.currentUser,
+        hideSubject: props.hideSubject,
+        activeContent: null,
+        activeSubject: null,
+        stateChanged: false,
+        clearFocus: false,
+    };
+    const actions = {
+        getState: () => ($state) => $state,
+        updateOpenPopups: (openPopups) => ($state) => {
+            openPopups.forEach((popup) => {
+                const oldPopup = $state.openPopups.find((op) => op.id === popup.id);
+                if (oldPopup) {
+                    popup.selected = oldPopup.selected;
+                    popup.positionCalculated = oldPopup.positionCalculated;
+                }
+            });
+            return Object.assign(Object.assign({}, $state), { openPopups });
+        },
+        stateChanged: (hasChanged) => ($state) => {
+            return Object.assign(Object.assign({}, $state), { stateChanged: hasChanged });
+        },
+        setPositionCalculated: (id) => ($state) => {
+            const popup = $state.openPopups.find((p) => p.id === id);
+            if (popup) {
+                popup.positionCalculated = true;
+            }
+            return Object.assign({}, $state);
+        },
+        selectPopup: (id) => ($state) => {
+            const openPopups = $state.openPopups.map((p) => (Object.assign(Object.assign({}, p), { selected: p.id === id })));
+            return Object.assign(Object.assign({}, $state), { openPopups, activeContent: id === $state.selectedPopup ? $state.activeContent : null, activeSubject: id === $state.selectedPopup ? $state.activeSubject : null, selectedPopup: id });
+        },
+        updateSubjectAndContent: (id) => ($state) => {
+            const subject = document.getElementById('pwv-popup-subject-' + id)
+                .value;
+            const content = document.getElementById('pwv-popup-content-' + id)
+                .value;
+            return Object.assign(Object.assign({}, $state), { activeContent: content, activeSubject: subject });
+        },
+        setFocus: (id) => ($state) => {
+            const textArea = document.getElementById('pwv-popup-content-' + id);
+            if (textArea) {
+                textArea.focus();
+            }
+            return Object.assign(Object.assign({}, $state), { clearFocus: document.activeElement === textArea });
+        },
+        deselectPopup: () => ($state) => {
+            return Object.assign(Object.assign({}, $state), { selectedPopup: null });
+        },
+    };
+    const App = () => h(OpenPopups, null);
+    const OpenPopups = ({}) => ($state, $actions) => {
+        return (h("div", null, $state.openPopups.map((popup) => (h(Popup, { popup: Object.assign(Object.assign({}, popup), { selected: popup.id === $state.selectedPopup }), colorPalette: popup.colorPalette, hideSubject: props.hideSubject, allowLockAnnotations: props.allowLockAnnotations, allowEditLockedAnnotations: props.allowEditLockedAnnotations, close: props.onClose, remove: props.onDelete, select: props.onSelect, toggleLock: props.onLock, updatePosition: (payload) => {
+                props.onUpdatePosition(payload.id, payload.x, payload.y);
+            }, updateSize: (payload) => {
+                props.onUpdateSize(payload.id, payload.w, payload.h);
+            }, updateColor: (payload) => {
+                props.onUpdateColor(payload.id, payload.color);
+            } })))));
+    };
+    return app(state, actions, App, element);
+};
+/* tslint:disable-next-line:max-line-length */
+const Popup = ({ popup, colorPalette, hideSubject, allowLockAnnotations, allowEditLockedAnnotations, updateColor, close, select, remove, toggleLock, updatePosition, updateSize, }) => ($state, $actions) => {
+    const styles = {
+        backgroundColor: popup.color,
+        width: popup.cssWidth < $state.minPopupWidth ? $state.minPopupWidth + 'px' : popup.cssWidth + 'px',
+        height: popup.cssHeight < $state.minPopupHeight
+            ? $state.minPopupHeight + 'px'
+            : popup.cssHeight + 'px',
+    };
+    let colorString;
+    if (popup.color != null) {
+        const color = new Color(popup.color);
+        styles.backgroundColor = color.toRgb();
+        // color.a
+        if (color.isDark()) {
+            colorString = 'rgba(255, 255, 255, 0.9)';
+        }
+        else {
+            colorString = 'rgba(0, 0, 0, 0.9)';
+        }
+    }
+    const headerStyles = {
+        color: colorString,
+    };
+    if (!popup.positionCalculated) {
+        styles.display = 'none';
+    }
+    const isReadOnly = popup.isReadOnly();
+    return (h("div", { class: classNames('pwv-popup', {
+            'pwv-popup-view-only': isReadOnly,
+            'pwv-popup-selected': popup.selected,
+        }), key: popup.id, style: styles, "data-id": popup.id },
+        h("div", { onclick: (e) => {
+                if (!e.openDropdown) {
+                    window.dispatchEvent(new Event('click', e));
+                }
+                if (!popup.selected) {
+                    select(popup.id);
+                }
+            }, onchange: (e) => {
+                $actions.stateChanged(true);
+            } },
+            h("div", { class: "pwv-popup-header" },
+                h("div", { class: "pwv-popup-header-info", style: headerStyles },
+                    h("div", { class: "pwv-popup-header-author" }, popup.author),
+                    h("div", { class: "pwv-popup-header-modified" }, popup.modificationDate)),
+                isReadOnly ? (h(Toolbar, null,
+                    h(ToolbarItemGroup, { pushRight: true },
+                        h(ToolbarButton, { onClick: (e) => {
+                                e.stopPropagation();
+                                if (!popup.selected) {
+                                    select(popup.id);
+                                }
+                                close();
+                            }, icon: icons.close })))) : (h(Toolbar, null,
+                    h(ToolbarItemGroup, null,
+                        h(ToolbarButton, { tooltip: translationManager.getText('annotPopup.delete'), icon: icons.delete, onClick: () => {
+                                remove(popup.id);
+                            }, disabled: popup.isLocked && !allowEditLockedAnnotations }),
+                        allowLockAnnotations && (h(ToolbarButton, { tooltip: translationManager.getText(popup.isLocked ? 'annotPopup.unlock' : 'annotPopup.lock'), onClick: (e) => {
+                                e.stopPropagation();
+                                if (!popup.selected) {
+                                    select(popup.id);
+                                }
+                                toggleLock(popup.id);
+                            }, icon: popup.isLocked ? icons.lock : icons.unlock })),
+                        popup.itemType !== PdfItemType.STAMP && (h(ColorPicker, { tooltip: translationManager.getText('annotPopup.color'), colors: colorPalette, icon: icons.fillColor, color: popup.color || 'transparent', onChange: (color) => {
+                                updateColor({
+                                    id: popup.id,
+                                    color,
+                                });
+                            }, disabled: popup.isLocked && !allowEditLockedAnnotations }))),
+                    h(ToolbarItemGroup, { pushRight: true },
+                        h(ToolbarButton, { onClick: (e) => {
+                                e.stopPropagation();
+                                if (!popup.selected) {
+                                    select(popup.id);
+                                }
+                                if (!popup.isLocked || allowEditLockedAnnotations) {
+                                    $actions.updateSubjectAndContent(popup.id);
+                                }
+                                close();
+                            }, icon: icons.close }))))),
+            isReadOnly ? (h("div", { class: "pwv-popup-view-only-content" },
+                !hideSubject && popup.subject && h("h4", null, popup.subject),
+                h("div", null, popup.content))) : (h("div", null,
+                hideSubject ? (h("input", { id: 'pwv-popup-subject-' + popup.id, type: "hidden", value: $state.selectedPopup === popup.id
+                        ? $state.activeSubject
+                            ? $state.activeSubject
+                            : popup.subject
+                        : popup.subject })) : (h("div", { class: "pwv-popup-subject" }, !popup.isLocked || allowEditLockedAnnotations ? (h("input", { id: 'pwv-popup-subject-' + popup.id, placeholder: translationManager.getText('annotPopup.subjectPlaceholder'), onchange: () => {
+                        $actions.updateSubjectAndContent(popup.id);
+                    }, value: $state.selectedPopup === popup.id
+                        ? $state.activeSubject
+                            ? $state.activeSubject
+                            : popup.subject
+                        : popup.subject })) : (h("div", { id: 'pwv-popup-subject-' + popup.id }, popup.subject)))),
+                h("div", { class: classNames('pwv-popup-content', {
+                        'pwv-popup-content-no-subject': hideSubject,
+                    }) }, !popup.isLocked || allowEditLockedAnnotations ? (h("textarea", { placeholder: translationManager.getText('annotPopup.contentPlaceholder'), id: 'pwv-popup-content-' + popup.id, onchange: () => {
+                        $actions.updateSubjectAndContent(popup.id);
+                    }, oninput: () => {
+                        $actions.updateSubjectAndContent(popup.id);
+                    } }, $state.selectedPopup === popup.id
+                    ? $state.activeContent
+                        ? $state.activeContent
+                        : popup.content
+                    : popup.content)) : (h("div", { id: 'pwv-popup-content-' + popup.id }, popup.content)))))),
+        h("div", null,
+            h("div", { class: "pwv-popup-draghandle" }),
+            h("div", { class: "pwv-popup-resizer", 
+                /* tslint:disable-next-line:max-line-length */
+                oncreate: (element) => {
+                    PopupComponent.create(popup.id, element, $state.minPopupWidth, $state.minPopupHeight, $state.maxPopupWidth, $state.maxPopupHeight, updatePosition, updateSize, select);
+                }, onremove: (element, done) => {
+                    PopupComponent.remove(element);
+                    done();
+                } }))));
+};
+class PopupComponent {
+    static create(id, resizeHandle, minPopupWidth, minPopupHeight, maxPopupWidth, maxPopupHeight, updatePosition, updateSize, select) {
+        /* tslint:disable-next-line:max-line-length */
+        ;
+        resizeHandle.parentElement.popup = new PopupComponent(id, resizeHandle, minPopupWidth, minPopupHeight, maxPopupWidth, maxPopupHeight, updatePosition, updateSize, select);
+    }
+    static remove(resizeHandle) {
+        ;
+        resizeHandle.parentElement.popup.unmount()(resizeHandle.parentElement).popup =
+            null;
+    }
+    constructor(id, resizeHandle, minPopupWidth, minPopupHeight, maxPopupWidth, maxPopupHeight, updatePosition, updateSize, select) {
+        this.cancelContentEvents = true;
+        this.dragOffsetX = 0;
+        this.dragOffsetY = 0;
+        this.containerOffsetX = 0;
+        this.containerOffsetY = 0;
+        this.id = id;
+        this.resizeHandle = resizeHandle;
+        const parent = resizeHandle.parentElement;
+        this.dragHandle = parent.children.item(0);
+        this.element = parent.parentElement;
+        this.minPopupWidth = 260;
+        this.minPopupHeight = 200;
+        this.maxPopupWidth = maxPopupWidth > this.minPopupWidth ? maxPopupWidth : this.minPopupWidth;
+        this.maxPopupHeight =
+            maxPopupHeight > this.minPopupHeight ? maxPopupHeight : this.minPopupHeight;
+        this.updatePosition = updatePosition;
+        this.updateSize = updateSize;
+        this.select = select;
+        this.cancelEvent = this.cancelEvent.bind(this);
+        this.startMove = this.startMove.bind(this);
+        this.moving = this.moving.bind(this);
+        this.endMove = this.endMove.bind(this);
+        this.onSelect = this.onSelect.bind(this);
+        this.startResize = this.startResize.bind(this);
+        this.resizing = this.resizing.bind(this);
+        this.endResize = this.endResize.bind(this);
+        this.handleMouseWheel = this.handleMouseWheel.bind(this);
+        new DragMoveHandler(this.dragHandle, this.startMove, this.moving, this.endMove, this.onSelect);
+        new DragMoveHandler(this.resizeHandle, this.startResize, this.resizing, this.endResize);
+        this.element.addEventListener('mousewheel', this.handleMouseWheel, { passive: true });
+        const contentElement = this.element.firstChild;
+        contentElement.addEventListener('onclick', this.cancelEvent, false);
+        contentElement.addEventListener('keydown', this.cancelEvent, false);
+        contentElement.addEventListener('mousedown', this.cancelEvent, false);
+        contentElement.addEventListener('mousemove', this.cancelEvent, false);
+        contentElement.addEventListener('mouseup', this.cancelEvent, false);
+        contentElement.addEventListener('touchstart', this.cancelEvent, { passive: true });
+        contentElement.addEventListener('touchmove', this.cancelEvent, { passive: true });
+        contentElement.addEventListener('touchend', this.cancelEvent, { passive: true });
+    }
+    unmount() {
+        this.element.removeEventListener('mousewheel', this.handleMouseWheel);
+    }
+    cancelEvent(e) {
+        if (this.cancelContentEvents) {
+            if (!(e.type === 'mousemove' && e.buttons === 0)) {
+                e.cancelBubble = true;
+                e.stopPropagation();
+            }
+        }
+    }
+    onSelect() {
+        this.select(this.id);
+    }
+    startResize(e) {
+        this.cancelContentEvents = false;
+        this.element.classList.add('pwv-popup-resizing');
+        this.onSelect();
+    }
+    resizing(e) {
+        const rect = this.element.getBoundingClientRect();
+        let width = e.clientX - rect.left;
+        let height = e.clientY - rect.top;
+        width =
+            width < this.minPopupWidth
+                ? this.minPopupWidth
+                : width > this.maxPopupWidth
+                    ? this.maxPopupWidth
+                    : width;
+        height =
+            height < this.minPopupHeight
+                ? this.minPopupHeight
+                : height > this.maxPopupHeight
+                    ? this.maxPopupHeight
+                    : height;
+        this.element.style.width = width + 'px';
+        this.element.style.height = height + 'px';
+        const popupRect = {
+            x: parseInt(this.element.style.left, undefined),
+            y: parseInt(this.element.style.top, undefined),
+            w: width,
+            h: height,
+        };
+        const evtDetail = {
+            annotationId: this.id,
+            popupRect,
+            color: this.element.style.backgroundColor,
+        };
+        window.dispatchEvent(new CustomEvent('pdfwebviewer.PopupMoved', { detail: evtDetail }));
+    }
+    endResize(e) {
+        if (e.moved) {
+            this.updateSize({
+                id: this.id,
+                w: this.element.clientWidth,
+                h: this.element.clientHeight,
+            });
+        }
+        this.cancelContentEvents = true;
+        this.element.classList.remove('pwv-popup-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.cancelContentEvents = false;
+        this.element.classList.add('pwv-popup-moving');
+        this.onSelect();
+    }
+    moving(e) {
+        const popupRect = {
+            x: e.clientX - this.containerOffsetX - this.dragOffsetX,
+            y: e.clientY - this.containerOffsetY - this.dragOffsetY,
+            w: parseInt(this.element.style.width, undefined),
+            h: parseInt(this.element.style.height, undefined),
+        };
+        this.element.style.top = popupRect.y + 'px';
+        this.element.style.left = popupRect.x + 'px';
+        const evtDetail = {
+            annotationId: this.id,
+            popupRect,
+            color: this.element.style.backgroundColor,
+        };
+        window.dispatchEvent(new CustomEvent('pdfwebviewer.PopupMoved', { detail: evtDetail }));
+    }
+    endMove(e) {
+        if (e.moved) {
+            this.updatePosition({
+                id: this.id,
+                x: this.element.offsetLeft,
+                y: this.element.offsetTop,
+            });
+        }
+        this.cancelContentEvents = true;
+        this.element.classList.remove('pwv-popup-moving');
+    }
+    handleMouseWheel(e) {
+        if (this.element.classList.contains('pwv-popup-selected')) {
+            // e.preventDefault()
+            e.stopPropagation();
+        }
+    }
+}

package/es6/modules/popup/PopupLayer.d.ts

@@ -0,0 +1,31 @@
+import { CanvasLayer } from '../CanvasLayer';
+import { ViewerCanvasState } from '../../pdf-viewer-canvas/state/store';
+export declare class PopupLayer extends CanvasLayer {
+    private popupViewElement;
+    private popupView;
+    private context;
+    private maxPopupWidth;
+    private maxPopupHeight;
+    private minPopupWidth;
+    private minPopupHeight;
+    private zoom;
+    private screenToPdfScale;
+    onCreate(): void;
+    onRemove(): void;
+    onSave(): Promise<void>;
+    render(timestamp: number, state: ViewerCanvasState): void;
+    private updateOpenPopupList;
+    private drawPopupRelation;
+    private popupMoved;
+    private createPopupView;
+    private selectPopup;
+    private deselectPopup;
+    private openPopup;
+    private closePopup;
+    private deletePopup;
+    private toggleAnnotationLock;
+    private updateSelectedPopupContent;
+    private updatePopupPosition;
+    private updatePopupSize;
+    private updatePopupColor;
+}