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

package/es6/common/RangeSlider.d.ts

@@ -0,0 +1,17 @@
+import { Component } from '../lib/hyperapp';
+import { IconDefinition } from './Icon';
+export interface RangeSliderProps {
+    min: number;
+    max: number;
+    step: number;
+    value: number;
+    text?: string;
+    tooltip?: string;
+    icon?: IconDefinition;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    onChange(value: number): void;
+}
+/** internal */
+export declare const RangeSlider: Component<RangeSliderProps>;

package/es6/common/RangeSlider.js

@@ -0,0 +1,42 @@
+import { h } from '../lib/hyperapp';
+import { DropdownComponent } from './Dropdown';
+import { Icon, icons } from './Icon';
+import { classNames } from './classNames';
+import { tooltipManager } from './TooltipManager';
+/** internal */
+export const RangeSlider = ({ min, max, value, icon, className, text, tooltip, label, disabled, onChange, }) => {
+    const elmProps = {
+        title: tooltip,
+    };
+    if (disabled) {
+        return (h("div", Object.assign({}, tooltipManager.createTooltip(tooltip), { class: classNames('pwv-RangeSlider', 'pwv-ToolbarItem', 'pwv-Dropdown', 'pwv-disabled', className) }),
+            label ||
+                (icon && (h("span", { class: "pwv-Dropdown-label" },
+                    label,
+                    icon && h(Icon, { icon: icon })))),
+            h("span", { class: "pwv-Dropdown-text" }, text),
+            h("span", { class: "pwv-Dropdown-caret" },
+                h(Icon, { icon: icons.dropdownCaret }))));
+    }
+    else {
+        return (h("div", { class: classNames('pwv-RangeSlider', 'pwv-commandbar-item', 'pwv-Dropdown', className) },
+            h("button", Object.assign({}, tooltipManager.createTooltip(tooltip), { oncreate: DropdownComponent.create, onremove: DropdownComponent.remove }),
+                label ||
+                    (icon && (h("span", { class: "pwv-Dropdown-label" },
+                        label,
+                        icon && h(Icon, { icon: icon })))),
+                h("span", { class: "pwv-Dropdown-text" }, text),
+                h("span", { class: "pwv-Dropdown-caret" },
+                    h(Icon, { icon: icons.dropdownCaret }))),
+            h("div", { class: "pwv-DropdownPanel" },
+                h("input", { type: "range", min: min, max: max, value: value, oninput: (e) => {
+                        const input = e.currentTarget;
+                        const intVal = parseInt(input.value, undefined);
+                        onChange(intVal);
+                    }, onchange: (e) => {
+                        e.preventDefault();
+                        const input = e.currentTarget;
+                        window.dispatchEvent(new Event('click'));
+                    } }))));
+    }
+};

package/es6/common/StrokeStylePicker.d.ts

@@ -0,0 +1,11 @@
+import { Component } from '../lib/hyperapp';
+import { AnnotationBorderStyle } from '../pdf-viewer-api';
+/** internal */
+export interface StrokeStylePickerProps {
+    disabled?: boolean;
+    value: AnnotationBorderStyle;
+    tooltip?: string;
+    shapeType: 'line' | 'rectangle' | 'circle';
+    onChange?(strokeWidth: number): void;
+}
+export declare const StrokeStylePicker: Component<StrokeStylePickerProps>;

package/es6/common/StrokeStylePicker.js

@@ -0,0 +1,20 @@
+import { h } from '../lib/hyperapp';
+import { AnnotationBorderStyle } from '../pdf-viewer-api';
+import { Dropdown } from './Dropdown';
+const StrokeItem = ({ value }) => {
+    const strokeStyle = value === AnnotationBorderStyle.DASHED ? 'dashed' : 'solid';
+    return (h("div", { class: `pwv-stroke-style-picker-item pwv-stroke-style-${strokeStyle}` },
+        h("span", null)));
+};
+const StrokeButton = ({ value }) => {
+    const strokeStyle = value === AnnotationBorderStyle.DASHED ? 'dashed' : 'solid';
+    return (h("div", { class: `pwv-stroke-style-picker-button pwv-stroke-style-${strokeStyle}` },
+        h("span", null)));
+};
+export const StrokeStylePicker = ({ disabled, value, tooltip, shapeType, onChange, }) => {
+    const items = [AnnotationBorderStyle.SOLID, AnnotationBorderStyle.DASHED].map((item) => ({
+        value: item,
+        renderItem: (i) => h(StrokeItem, { value: item }),
+    }));
+    return (h(Dropdown, { className: `pwv-stroke-style-picker pwv-stroke-style-picker-${shapeType}`, align: "right", disabled: disabled, tooltip: tooltip, items: items, value: value, renderButton: (value) => h(StrokeButton, { value: value }), onChange: onChange }));
+};

package/es6/common/StrokeWidthPicker.d.ts

@@ -0,0 +1,11 @@
+import { Component } from '../lib/hyperapp';
+/** internal */
+export interface StrokeWidthPickerProps {
+    disabled?: boolean;
+    strokeWidths: number[];
+    value: number;
+    noneStrokeText: string;
+    tooltip?: string;
+    onChange?(strokeWidth: number): void;
+}
+export declare const StrokeWidthPicker: Component<StrokeWidthPickerProps>;

package/es6/common/StrokeWidthPicker.js

@@ -0,0 +1,20 @@
+import { h } from '../lib/hyperapp';
+import { Dropdown } from './Dropdown';
+const StrokeItem = ({ value, noneStrokeText }) => {
+    if (value === 0) {
+        return (h("div", { class: "pwv-stroke-width-picker-item" },
+            h("span", null, noneStrokeText)));
+    }
+    return (h("div", { class: "pwv-stroke-width-picker-item" },
+        h("span", null,
+            value,
+            "pt"),
+        h("span", { class: "pwv-stroke-width", style: { height: `${value}px` } })));
+};
+export const StrokeWidthPicker = ({ disabled, noneStrokeText, strokeWidths, value, tooltip, onChange, }) => {
+    const items = strokeWidths.map((item) => ({
+        value: item,
+        renderItem: (i) => h(StrokeItem, { value: i.value, noneStrokeText: noneStrokeText }),
+    }));
+    return (h(Dropdown, { className: "pwv-stroke-width-picker", align: "right", tooltip: tooltip, disabled: disabled, items: items, value: value, renderButton: (value) => h(StrokeItem, { value: value, noneStrokeText: noneStrokeText }), onChange: onChange }));
+};

package/es6/common/Toolbar.d.ts

@@ -0,0 +1,10 @@
+import { Component } from '../lib/hyperapp';
+/** internal */
+export interface ToolbarProps {
+    alignCenter?: boolean;
+    allowWrap?: boolean;
+    dense?: boolean;
+    className?: string;
+}
+/** internal */
+export declare const Toolbar: Component<ToolbarProps>;

package/es6/common/Toolbar.js

@@ -0,0 +1,6 @@
+import { h } from '../lib/hyperapp';
+import { classNames } from './classNames';
+/** internal */
+export const Toolbar = ({ className, dense, allowWrap, alignCenter }, children) => {
+    return (h("div", { class: classNames('pwv-Toolbar', { 'pwv-Toolbar--center': alignCenter }, { 'pwv-Toolbar--dense': dense }, { 'pwv-Toolbar--wrap': allowWrap }, className) }, children));
+};

package/es6/common/ToolbarButton.d.ts

@@ -0,0 +1,14 @@
+import { Component } from '../lib/hyperapp';
+import { IconDefinition } from './Icon';
+/** internal */
+export interface ToolbarButtonProps {
+    icon?: IconDefinition;
+    tooltip?: string;
+    name?: string;
+    disabled?: boolean;
+    active?: boolean;
+    className?: string;
+    onClick?(e: MouseEvent): void;
+}
+/** internal */
+export declare const ToolbarButton: Component<ToolbarButtonProps>;

package/es6/common/ToolbarButton.js

@@ -0,0 +1,21 @@
+import { h } from '../lib/hyperapp';
+import { Icon } from './Icon';
+import { classNames } from './classNames';
+import { tooltipManager } from './TooltipManager';
+/** internal */
+export const ToolbarButton = ({ icon, disabled, active, name, onClick, tooltip, className }, children) => {
+    if (disabled) {
+        return (h("button", Object.assign({ name: name, disabled: disabled, oncreate: tooltipManager.bindCssTooltip }, tooltipManager.createTooltip(tooltip), { class: classNames('pwv-ToolbarButton', 'pwv-ToolbarButton--disabled', className) }),
+            icon && h(Icon, { icon: icon }),
+            children.length > 0 && h("span", { class: "pwv-ToolbarButton__Text" }, children)));
+    }
+    else {
+        return (h("button", Object.assign({ name: name, oncreate: tooltipManager.bindCssTooltip }, tooltipManager.createTooltip(tooltip), { class: classNames('pwv-ToolbarButton', className, {
+                'pwv-ToolbarButton--selected': active,
+            }), onclick: (e) => {
+                onClick && onClick(e);
+            } }),
+            icon && h(Icon, { icon: icon }),
+            children.length > 0 && h("span", { class: "pwv-ToolbarButton__Text" }, children)));
+    }
+};

package/es6/common/ToolbarFileButton.d.ts

@@ -0,0 +1,15 @@
+import { Component } from '../lib/hyperapp';
+import { IconDefinition } from './Icon';
+/** internal */
+export interface ToolbarFileButtonProps {
+    icon: IconDefinition;
+    tooltip?: string;
+    name?: string;
+    accept?: string;
+    disabled?: boolean;
+    className?: string;
+    active?: boolean;
+    onFileSelected?(file: File): void;
+}
+/** internal */
+export declare const ToolbarFileButton: Component<ToolbarFileButtonProps>;

package/es6/common/ToolbarFileButton.js

@@ -0,0 +1,27 @@
+import { h } from '../lib/hyperapp';
+import { Icon } from './Icon';
+import { classNames } from './classNames';
+import { tooltipManager } from './TooltipManager';
+/** internal */
+export const ToolbarFileButton = ({ icon, accept, className, tooltip, disabled, name, onFileSelected, }) => {
+    if (disabled) {
+        return (h("div", Object.assign({ oncreate: tooltipManager.bindCssTooltip }, tooltipManager.createTooltip(tooltip), { class: classNames('pwv-ToolbarButton', 'pwv-ToolbarButton--disabled', className) }),
+            h(Icon, { icon: icon })));
+    }
+    else {
+        return (h("label", Object.assign({ name: name, tabindex: "auto", oncreate: tooltipManager.bindCssTooltip }, tooltipManager.createTooltip(tooltip), { class: classNames('pwv-ToolbarButton', className) }),
+            h(Icon, { icon: icon }),
+            h("input", { style: { display: 'none' }, type: "file", accept: accept, onchange: (e) => {
+                    if (onFileSelected && e.currentTarget.files && e.currentTarget.files.length) {
+                        const file = e.currentTarget.files[0];
+                        onFileSelected(file);
+                        e.currentTarget.value = '';
+                    }
+                }, oncreate: (input) => {
+                    const id = 'fi_' + performance.now();
+                    input.id = id;
+                    const label = input.parentElement;
+                    label.setAttribute('for', id);
+                } })));
+    }
+};

package/es6/common/ToolbarItemGroup.d.ts

@@ -0,0 +1,8 @@
+import { Component } from '../lib/hyperapp';
+/** internal */
+export interface ToolbarProps {
+    pushRight?: boolean;
+    className?: string;
+}
+/** internal */
+export declare const ToolbarItemGroup: Component<ToolbarProps>;

package/es6/common/ToolbarItemGroup.js

@@ -0,0 +1,12 @@
+import { h } from '../lib/hyperapp';
+import { classNames } from './classNames';
+/** internal */
+export const ToolbarItemGroup = ({ className, pushRight }, children) => {
+    return (h("div", { class: classNames('pwv-ToolbarItemGroup', className, {
+            'pwv-ToolbarItemGroup--pushRight': pushRight,
+        }), oncreate: (element) => {
+            if (pushRight) {
+                element.parentNode.classList.add('pwv-Toolbar--paddingRight');
+            }
+        } }, children));
+};

package/es6/common/ToolbarSeparator.d.ts

@@ -0,0 +1,3 @@
+import { Component } from '../lib/hyperapp';
+/** internal */
+export declare const ToolbarSeparator: Component<{}>;

package/es6/common/ToolbarSeparator.js

@@ -0,0 +1,6 @@
+import { h } from '../lib/hyperapp';
+/** internal */
+export const ToolbarSeparator = ({}) => {
+    return (h("div", { class: "pwv-ToolbarSeparator" },
+        h("span", null)));
+};

package/es6/common/Tools.d.ts

@@ -0,0 +1,10 @@
+import { WebViewerOptions } from '../pdf-web-viewer/WebViewerOptions';
+import { PdfItemType } from '../pdf-viewer-api/enums';
+export declare function convertPdfToCssPixel(pdfPixel: string): string;
+export declare function convertCssToPdfPixel(cssPixel: string): string;
+export declare function roundToTwo(num: number): number;
+export declare function getColorPalette(type: PdfItemType, options: WebViewerOptions): string[];
+export declare function createPdfTime(): string;
+export declare const formatDate: (dateStr: string) => string;
+export declare function padString(s: string, paddingSize: number, fill: string): string;
+export declare function imageDataUrlToUint8Array(dataUrl: string): Uint8Array;

package/es6/common/Tools.js

@@ -0,0 +1,89 @@
+import { PdfItemType } from '../pdf-viewer-api/enums';
+export function convertPdfToCssPixel(pdfPixel) {
+    const regex = /(\d*\.?\d+)/.exec(pdfPixel);
+    const size = regex && regex.length > 1 ? parseFloat(regex[1]) : 12;
+    return roundToTwo((size / 72) * 96) + 'px';
+}
+export function convertCssToPdfPixel(cssPixel) {
+    const regex = /(\d*\.?\d+)/.exec(cssPixel);
+    const size = regex && regex.length > 1 ? parseFloat(regex[1]) : 12;
+    return roundToTwo((size / 96) * 72) + 'pt';
+}
+export function roundToTwo(num) {
+    return Math.round(num * 100) / 100;
+}
+export function getColorPalette(type, options) {
+    if (type === PdfItemType.INK) {
+        return options.annotation.colors.foregroundColors;
+    }
+    else {
+        return options.annotation.colors.highlightColors;
+    }
+}
+export function createPdfTime() {
+    const time = new Date();
+    const year = time.getFullYear();
+    let month = `${time.getMonth() + 1}`;
+    month = padString(month, 2, '0');
+    let day = `${time.getDate()}`;
+    day = padString(day, 2, '0');
+    let hour = `${time.getHours()}`;
+    hour = padString(hour, 2, '0');
+    let minutes = `${time.getMinutes()}`;
+    minutes = padString(minutes, 2, '0');
+    let seconds = `${time.getSeconds()}`;
+    seconds = padString(seconds, 2, '0');
+    let offsetString = time.getTimezoneOffset() < 0 ? '+' : '';
+    const hourOffset = -1 * Math.floor(time.getTimezoneOffset() / 60);
+    offsetString += padString(hourOffset.toString(), 2, '0') + `'`;
+    const minuteOffset = -1 * Math.floor(time.getTimezoneOffset() % 60);
+    offsetString += padString(minuteOffset.toString(), 2, '0') + `'`;
+    const dateString = `(D:${year}${month}${day}${hour}${minutes}${seconds}${offsetString})`;
+    return dateString;
+}
+export const formatDate = (dateStr) => {
+    if (dateStr.indexOf('(D:') === 0) {
+        // todo: convert to local time
+        return `${dateStr.substring(9, 11)}.${dateStr.substring(7, 11)}.${dateStr.substring(3, 7)} ${dateStr.substring(11, 13)}:${dateStr.substring(13, 15)}`;
+    }
+    return `${dateStr.substring(8, 10)}.${dateStr.substring(6, 8)}.${dateStr.substring(2, 6)} ${dateStr.substring(10, 12)}:${dateStr.substring(12, 14)}`;
+};
+export function padString(s, paddingSize, fill) {
+    if (s.length < paddingSize) {
+        s = `${fill.repeat(paddingSize - s.length)}${s}`;
+    }
+    return s;
+}
+export function imageDataUrlToUint8Array(dataUrl) {
+    const base64 = dataUrl.replace(/^data:[a-z]+\/[a-z]+;base64,/i, '');
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+    const lookup = new Uint8Array(256);
+    for (let i = 0; i < chars.length; i++) {
+        lookup[chars.charCodeAt(i)] = i;
+    }
+    let bufferLength = base64.length * 0.75;
+    if (base64[base64.length - 1] === '=') {
+        bufferLength--;
+        if (base64[base64.length - 2] === '=') {
+            bufferLength--;
+        }
+    }
+    const arraybuffer = new ArrayBuffer(bufferLength);
+    const bytes = new Uint8Array(arraybuffer);
+    let p = 0;
+    let encoded1 = 0;
+    let encoded2 = 0;
+    let encoded3 = 0;
+    let encoded4 = 0;
+    for (let i = 0; i < base64.length; i += 4) {
+        encoded1 = lookup[base64.charCodeAt(i)];
+        encoded2 = lookup[base64.charCodeAt(i + 1)];
+        encoded3 = lookup[base64.charCodeAt(i + 2)];
+        encoded4 = lookup[base64.charCodeAt(i + 3)];
+        // tslint:disable: no-bitwise
+        bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
+        bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
+        bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
+    }
+    return bytes;
+}

package/es6/common/TooltipManager.d.ts

@@ -0,0 +1,12 @@
+/** internal */
+export declare const tooltipManager: {
+    setType: (type: 'none' | 'title' | 'css') => void;
+    bindCssTooltip: (element: HTMLElement, text?: string) => void;
+    createTooltip: (text?: string) => {
+        title: string;
+        'data-pwv-tooltip'?: undefined;
+    } | {
+        'data-pwv-tooltip': string;
+        title?: undefined;
+    } | undefined;
+};

package/es6/common/TooltipManager.js

@@ -0,0 +1,54 @@
+let tooltipType;
+/** internal */
+export const tooltipManager = {
+    setType: (type) => {
+        tooltipType = type;
+    },
+    bindCssTooltip: (element, text) => {
+        if (tooltipType !== 'css') {
+            return;
+        }
+        element.onmouseover = (e) => {
+            const elm = e.currentTarget;
+            let viewerElm = elm.closest('.pwv-ViewerCanvas');
+            if (!viewerElm) {
+                viewerElm = elm.closest('.pwv-WebViewer');
+            }
+            if (viewerElm) {
+                elm.classList.remove('pwv-tooltip-top', 'pwv-tooltip-left', 'pwv-tooltip-right', 'pwv-tooltip-bottom');
+                const elmRect = elm.getBoundingClientRect();
+                const viewerRect = viewerElm.getBoundingClientRect();
+                const top = elmRect.top - viewerRect.top;
+                const left = elmRect.left - viewerRect.left;
+                const right = viewerRect.right - elmRect.right;
+                const bottom = viewerRect.bottom - elmRect.bottom;
+                top < 45
+                    ? element.classList.add('pwv-tooltip-bottom')
+                    : element.classList.add('pwv-tooltip-top');
+                if (left < 45) {
+                    element.classList.add('pwv-tooltip-right');
+                }
+                else if (right < 45) {
+                    element.classList.add('pwv-tooltip-left');
+                }
+            }
+        };
+    },
+    createTooltip: (text) => {
+        if (!text) {
+            return undefined;
+        }
+        switch (tooltipType) {
+            case 'title':
+                return {
+                    title: text,
+                };
+            case 'css':
+                return {
+                    'data-pwv-tooltip': text,
+                };
+            default:
+                return undefined;
+        }
+    },
+};

package/es6/common/TranslationManager.d.ts

@@ -0,0 +1,11 @@
+/** internal */
+export interface TextResources {
+    [key: string]: string;
+}
+/** internal */
+export declare const translationManager: {
+    language: string;
+    addTranslations: (res: TextResources) => void;
+    getText: (key: string) => string;
+    loadTranslations: (language: string) => Promise<void>;
+};

package/es6/common/TranslationManager.js

@@ -0,0 +1,61 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+let translations = {};
+let translationRequested = false;
+/** internal */
+export const translationManager = {
+    language: '',
+    addTranslations: (res) => {
+        translations = Object.assign(Object.assign({}, translations), res);
+    },
+    getText: (key) => {
+        const res = translations[key];
+        if (!res) {
+            switch (key) {
+                case 'applicationError.title':
+                    return 'Error';
+                case 'applicationError.defaultMessage':
+                    return 'Configuration Error';
+                case 'applicationError.reload':
+                    return '';
+            }
+            console.warn(`key not found ${key}`);
+            return key;
+        }
+        return res;
+    },
+    loadTranslations: (language) => __awaiter(void 0, void 0, void 0, function* () {
+        if (language !== translationManager.language ||
+            (!translationRequested && Object.keys(translations).length === 0)) {
+            translationManager.language = language;
+            translationRequested = true;
+            const translationFileUrl = window.Module.locateFile(`translations.${language}.json`);
+            try {
+                const res = yield fetch(translationFileUrl);
+                if (res.ok) {
+                    translations = yield res.json();
+                }
+                else {
+                    throw new Error(`failed to load translation file '${translationFileUrl}`);
+                }
+            }
+            catch (err) {
+                // console.error(err)
+                console.error(`**************************************
+Failed to load translations.${language}.js
+
+%cThe PDF Web Viewer failed to load a required script resource. Either the "Base URL" (PDFTOOLS_FOURHEIGHTS_PDFVIEWING_BASEURL) is not configured correctly or the static assets have not been copied to the configured location. For more information please consult the documentation.
+
+%cwindow.PDFTOOLS_FOURHEIGHTS_PDFVIEWING_BASEURL=${window.PDFTOOLS_FOURHEIGHTS_PDFVIEWING_BASEURL}
+%c**************************************`, 'color: orange', 'color: gray', 'color: red');
+            }
+        }
+    }),
+};

package/es6/common/classNames.d.ts

@@ -0,0 +1,2 @@
+/** internal */
+export declare const classNames: (...args: any[]) => string;

package/es6/common/classNames.js

@@ -0,0 +1,18 @@
+/** internal */
+export const classNames = (...args) => {
+    const classes = [];
+    args.forEach((arg) => {
+        if (typeof arg === 'string') {
+            classes.push(arg);
+        }
+        else if (typeof arg === 'object') {
+            const keys = Object.keys(arg);
+            keys.forEach((k) => {
+                if (arg[k]) {
+                    classes.push(k);
+                }
+            });
+        }
+    });
+    return classes.join(' ');
+};

package/es6/common/formatDate.d.ts

@@ -0,0 +1 @@
+export declare const formatDate: (dateStr: string) => string;

package/es6/common/formatDate.js

@@ -0,0 +1 @@
+export const formatDate = (dateStr) => `${dateStr.substring(8, 10)}.${dateStr.substring(6, 8)}.${dateStr.substring(2, 6)} ${dateStr.substring(10, 12)}:${dateStr.substring(12, 14)}`;

package/es6/common/icons.d.ts

@@ -0,0 +1,13 @@
+/** internal */
+export interface IconDefinition {
+    width: number;
+    height: number;
+    path: string;
+    bg?: string;
+}
+/** internal */
+export interface Icons {
+    [key: string]: IconDefinition;
+}
+/** internal */
+export declare const icons: Icons;