@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/pdf/element/pdfElement.tsx

@@ -0,0 +1,315 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/pdfElement.scss';
+
+import React, {MouseEventHandler, PropsWithChildren, PureComponent} from 'react';
+import {DraggableData, HandleClasses, HandleStyles, ResizeEnable, Rnd} from 'react-rnd';
+import {
+    CustomAppEvent, ElementPosition, IndexedObject, PDFElementDimensions, PDFElementParams, PDFElementPersist, PdfFont,
+    RNDDimensions
+} from "../../util/interfaces";
+import {generateComponentId} from "../../util/componentUtil";
+import {PAGE_WIDTH, pxToPt} from "../../util/pdfUtil";
+import classNames from 'classnames';
+import {AwesomeIcon, debug} from "../../../../index";
+
+interface State {
+    dragging: boolean;
+    settings: IndexedObject<any>;
+}
+
+interface SharedProps {
+    onFocusElement: (element: PdfElement) => void;
+    onDelete: MouseEventHandler;
+    onSaveHistory: VoidFunction;
+    persistent?: PDFElementPersist;
+}
+
+interface Props {
+    id?: string;
+}
+
+export abstract class PdfElement<P extends SharedProps = any, S extends State = any> extends PureComponent<P & Props, S> {
+    protected readonly id = generateComponentId(this.props.id);
+    protected element: HTMLDivElement;
+    protected readonly event: CustomAppEvent;
+    protected draggable: PDFDraggable;
+    abstract getParams: (convertPixels?: boolean) => PDFElementParams<any, any>;
+    abstract onClick: (evt: React.MouseEvent) => void;
+    abstract onClickDelete: (evt: React.MouseEvent) => void;
+
+    protected constructor(props: Props & P) {
+        super(props);
+        this.event = {eventName: 'pdfFontChanged', handler: this.setFont};
+    }
+
+    onDragStart = () => {
+        this.setState({dragging: true});
+    };
+
+    onDragEnd = () => {
+        this.setState({dragging: false});
+    };
+
+    setFont = (data: { previousFont: PdfFont, font: PdfFont }) => {
+        const {previousFont, font} = data, {settings} = this.state;
+        if (settings.hasOwnProperty('font')) {
+            if (settings['font'] === previousFont)
+                this.setState({settings: Object.assign({}, settings, {font})});
+        }
+    };
+
+    getDimensions = (convertPixels: boolean): PDFElementDimensions => {
+        if (this.element) {
+            const parent = this.element.parentElement?.parentElement, rect = this.element.getBoundingClientRect();
+            const width = convertPixels ? pxToPt(rect.width) : rect.width,
+                height = convertPixels ? pxToPt(rect.height) : rect.height;
+            if (parent) return {
+                left: this.getLeft(parent, convertPixels),
+                top: this.getTop(parent, convertPixels),
+                width,
+                height,
+            };
+        }
+        return {left: 0, top: 0, width: 0, height: 0};
+    };
+
+    public getSettings = () => this.state.settings;
+
+    public setSetting = (key: string, value: any, callback?: VoidFunction, save: boolean = true) => {
+        this.setState({settings: Object.assign({}, this.state.settings, {[key]: value})}, () => {
+            if (save)
+                this.props.onSaveHistory();
+            if (callback) callback();
+        });
+    };
+
+    public changeSetting = (key: string) => (value: any) => {
+        this.setSetting(key, value);
+    };
+
+    public isPersistent = (): PDFElementPersist => {
+        return this.props.persistent ?? PDFElementPersist.NOT_PERSISTENT;
+    }
+
+    private getLeft = (parent: HTMLElement, convertPixels: boolean) => {
+        const rect = this.element.getBoundingClientRect(), parentRect = parent.getBoundingClientRect(),
+            left = Math.abs(rect.left - parentRect.left);
+        if (convertPixels)
+            return pxToPt(left);
+        return left;
+    };
+
+    private getTop = (parent: HTMLElement, convertPixels: boolean) => {
+        const rect = this.element.getBoundingClientRect(), parentRect = parent.getBoundingClientRect(),
+            top = Math.abs(rect.top - parentRect.top);
+        if (convertPixels)
+            return pxToPt(top);
+        return top;
+    };
+}
+
+interface DraggableProps {
+    onDrag?: (position: { x: number; y: number; }) => void;
+    onDragStart: VoidFunction;
+    onDragEnd: (position: { x: number; y: number; }) => void;
+    onDragged: VoidFunction;
+    onResized: VoidFunction;
+    onDelete?: MouseEventHandler;
+    onEdit?: MouseEventHandler;
+    onClickBar: MouseEventHandler;
+    id?: string;
+    dragging: boolean;
+    forwardRef?: any;
+    elementLabel: string;
+    dimensions?: RNDDimensions;
+    draggable: boolean;
+    resizeable: boolean;
+    resizeHoriz: boolean;
+    resizeVert: boolean;
+    position?: { x: number; y: number };
+    lockAspect?: boolean;
+    maxWidth: number;
+    maxHeight: number;
+    width: number;
+    height: number;
+    matchParentSize: boolean;
+    alignment?: ElementPosition;
+    persistent?: PDFElementPersist;
+}
+
+interface DraggableState {
+    position: { x: number; y: number };
+    width: number | string;
+    height: number | string;
+}
+
+export class PDFDraggable extends PureComponent<PropsWithChildren<DraggableProps>, DraggableState> {
+    static defaultProps = {
+        resizeable: true,
+        resizeHoriz: true,
+        resizeVert: true,
+        maxWidth: Number.MAX_SAFE_INTEGER,
+        maxHeight: Number.MAX_SAFE_INTEGER,
+        lockAspect: false,
+        width: 'auto',
+        height: 'auto',
+        matchParentSize: false,
+    };
+    private readonly id = generateComponentId(this.props.id);
+    private draggable: Rnd;
+
+    constructor(props: DraggableProps) {
+        super(props);
+        this.state = {
+            position: this.props.position || {x: 0, y: 0},
+            width: props.width || 'auto',
+            height: props.height || 'auto',
+        };
+    }
+
+    public setSize = (width: number, height: number, callListener: boolean = true) => {
+        this.setState({width, height}, () => {
+            if (callListener)
+                this.props.onResized();
+        });
+    };
+
+    public setFocus = () => {
+        if (this.draggable) {
+            const div = this.draggable.resizableElement.current;
+            if (div) div.classList.add('focused');
+        }
+    };
+
+    public setPosition = (position: { x?: number; y?: number }, callback?: VoidFunction) => {
+        this.setState({position: Object.assign({}, this.state.position, position)}, callback);
+    };
+
+    public getPosition = (): { x: number; y: number } => this.state.position;
+
+    onDrag = (evt: any, data: DraggableData) => {
+        const {onDrag, alignment} = this.props, {position} = this.state,
+            nextPosition = {x: alignment ? position.x : data.x, y: data.y};
+        if (onDrag) {
+            onDrag(nextPosition);
+        }
+    };
+
+    onDragStop = (evt: any, data: any) => {
+        const {onDragEnd, alignment, onDragged} = this.props, {position} = this.state,
+            nextPosition = {x: alignment ? position.x : data.lastX, y: data.lastY};
+        debug('Stop drag at', {nextPosition});
+        this.setState({position: nextPosition});
+        onDragEnd(nextPosition);
+        onDragged();
+    };
+
+    onResizeStop = (evt: any, direction: any, ref: HTMLElement, delta: any, position: any) => {
+        this.setState({
+            width: ref.style.width,
+            height: ref.style.height,
+            position
+        }, this.props.onResized);
+    };
+
+    setInitialPosition = () => {
+        const {alignment} = this.props, {position} = this.state;
+        if (!alignment) return;
+        const div = document.getElementById(this.id);
+        if (div) {
+            const width = div.getBoundingClientRect().width;
+            if (alignment === ElementPosition.CENTER)
+                this.setState({position: {x: PAGE_WIDTH / 2 - width / 2, y: position.y}});
+            else if (alignment === ElementPosition.LEFT)
+                this.setState({position: {x: 75, y: position.y}});
+            else if (alignment === ElementPosition.RIGHT)
+                this.setState({position: {x: PAGE_WIDTH - 75 - width, y: position.y}});
+        }
+    }
+
+    getHandleClasses = (): HandleClasses => {
+        const cls = 'resize-handle';
+        return {
+            bottomLeft: `${cls} bottom left`,
+            bottomRight: `${cls} bottom right`,
+            topLeft: `${cls} top left`,
+            topRight: `${cls} top right`,
+        };
+    };
+
+    getHandleStyles = (): HandleStyles => {
+        const style: React.CSSProperties = {width: '10px', height: '10px'};
+        return {
+            topRight: {...style, top: '-5px', right: '-5px'},
+            topLeft: {...style, top: '-5px', left: '-5px'},
+            bottomRight: {...style, bottom: '-5px', right: '-5px'},
+            bottomLeft: {...style, bottom: '-5px', left: '-5px'},
+        }
+    };
+
+    getEnabledResize = (): ResizeEnable => {
+        const {resizeable, resizeHoriz, resizeVert} = this.props;
+        if (!resizeable) return false;
+        if (resizeHoriz && resizeVert) return true;
+        return {
+            bottom: resizeVert,
+            bottomLeft: resizeVert && resizeHoriz,
+            bottomRight: resizeHoriz && resizeVert,
+            left: resizeHoriz,
+            right: resizeHoriz,
+            top: resizeVert,
+            topLeft: resizeHoriz && resizeVert,
+            topRight: resizeHoriz && resizeVert,
+        };
+    };
+
+    componentDidMount = () => {
+        window.setTimeout(this.setInitialPosition, 20);
+    };
+
+    componentDidUpdate = (prevProps: DraggableProps) => {
+        if (prevProps.alignment !== this.props.alignment)
+            window.setTimeout(this.setInitialPosition, 20);
+    };
+
+    render = () => {
+        const {
+                children, forwardRef, onDragStart, dragging, draggable, persistent,
+                maxHeight, maxWidth, lockAspect, matchParentSize, onEdit, alignment
+            } = this.props, {width, height, position} = this.state,
+            axis = alignment ? 'y' : 'both',
+            onDelete = persistent === PDFElementPersist.PERSISTENT ? undefined : this.props.onDelete;
+        return (
+            <Rnd position={position} dragAxis={axis} onDragStart={onDragStart} onDragStop={this.onDragStop}
+                 bounds='parent' className={classNames('pdf-draggable', dragging && 'dragging')}
+                 disableDragging={!draggable} enableResizing={this.getEnabledResize()} lockAspectRatio={lockAspect}
+                 maxWidth={maxWidth} maxHeight={maxHeight} size={{width, height}} onDrag={this.onDrag}
+                 resizeHandleClasses={this.getHandleClasses()} resizeHandleStyles={this.getHandleStyles()}
+                 onResizeStop={this.onResizeStop} dragHandleClassName='drag-handle' dragGrid={[10, 10]}
+                 ref={(ref: Rnd) => {
+                     this.draggable = ref
+                 }}>
+                <div className='action-bar'>
+                    {draggable ? <AwesomeIcon name='arrows-alt' className='action drag-handle'/> : <div/>}
+                    <div className='options'>
+                        {onEdit !== undefined && <AwesomeIcon name='pen' onClick={onEdit} className='action'/>}
+                        {onDelete !== undefined &&
+                        <AwesomeIcon name='trash-alt' onClick={onDelete} className='action delete'/>}
+                    </div>
+                </div>
+                <div className={classNames('pdf-element', 'rnd', matchParentSize && 'match-size')} ref={forwardRef}
+                     id={this.id}>
+                    {dragging && <>
+                        <div className='guide vert'/>
+                        <div className='guide vert reverse'/>
+                        <div className='guide horiz'/>
+                        <div className='guide horiz reverse'/>
+                    </>}
+                    {children}
+                </div>
+            </Rnd>
+        )
+    }
+}

package/src/js/pdf/element/style/pdfElement.scss

@@ -0,0 +1,111 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../style/variables';
+
+.pdf-draggable {
+  outline: 2px solid transparent;
+  transition: outline-color .2s ease-in-out;
+
+  .action-bar {
+    position: absolute;
+    top: 0;
+    left: -2px;
+    width: calc(100% + 4px);
+    transform: translateY(-100%);
+    background-color: $color-gray-5;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+
+    .action {
+      color: white;
+      padding: .5rem;
+      cursor: pointer;
+      font-size: .9rem;
+      transition: color .2s ease-in-out;
+
+      &.drag-handle {
+        cursor: move;
+      }
+
+      &:hover {
+        color: $color-gray-4;
+
+        &.delete {
+          color: red;
+        }
+      }
+    }
+
+    .options {
+      display: flex;
+      align-items: center;
+
+      .action {
+        border-right: 1px solid $color-gray-5;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  .pdf-element {
+    position: relative;
+    cursor: pointer;
+
+    .guide {
+      position: absolute;
+      background-color: $color-gray-4;
+      top: 0;
+      left: 0;
+
+      &.horiz {
+        height: 1px;
+        width: 100vw;
+
+        &.reverse {
+          transform: translateX(-100%);
+        }
+      }
+
+      &.vert {
+        width: 1px;
+        height: 100vh;
+
+        &.reverse {
+          transform: translateY(-100%);
+        }
+      }
+    }
+
+    &.match-size {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &:hover, &.focused {
+    outline-color: $color-gray-5;
+    z-index: $z-index-high;
+    background-color: white;
+
+    .action-bar {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &.dragging {
+    .action-bar {
+      opacity: .3;
+    }
+    background-color: unset;
+  }
+}

package/src/js/pdf/history/pdfHistory.ts

@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import {PDFElementParams, PdfFont} from "../../util/interfaces";
+
+let HISTORY: string[] = [];
+let currentIdx: number = -1;
+
+export const addToHistory = (items: PDFElementParams<any, any>[], mainFont: PdfFont) => {
+    clearFrom(currentIdx);
+    const history: string = JSON.stringify({items, mainFont});
+    if (history !== HISTORY[currentIdx]) {
+        HISTORY.push(history);
+        currentIdx++;
+        console.debug('Current history', HISTORY.map((hist: string) => JSON.parse(hist)));
+    }
+};
+
+export const replaceHistory = (items: PDFElementParams<any, any>[], mainFont: PdfFont) => {
+    if(currentIdx > -1) {
+        HISTORY[currentIdx] = JSON.stringify({items, mainFont});
+    }
+}
+
+export const undo = (): { items: PDFElementParams<any, any>[], mainFont: PdfFont } => {
+    if (currentIdx <= 0) throw new Error('Current index is already at first position.');
+    const prevHistory = HISTORY[--currentIdx]
+    if (prevHistory)
+        return JSON.parse(prevHistory);
+    return {items: [], mainFont: PdfFont.LATO};
+};
+
+export const redo = (): { items: PDFElementParams<any, any>[], mainFont: PdfFont } => {
+    if (currentIdx >= HISTORY.length - 1) throw new Error('Current index is already at the end of HISTORY.');
+    const nextHistory = HISTORY[++currentIdx]
+    if (nextHistory)
+        return JSON.parse(nextHistory);
+    return {items: [], mainFont: PdfFont.LATO};
+};
+
+export const clearHistory = () => {
+    HISTORY = [];
+    currentIdx = -1;
+}
+
+export const canUndo = (): boolean => currentIdx > 0;
+export const canRedo = (): boolean => currentIdx < HISTORY.length - 1;
+
+const clearFrom = (index: number) => {
+    const newHistory: string[] = [];
+    for (let i = 0; i < HISTORY.length; i++) {
+        newHistory.push(HISTORY[i]);
+        if (i === index) break;
+    }
+    HISTORY = newHistory;
+};

package/src/js/pdf/image/pdfImage.tsx

@@ -0,0 +1,175 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/pdfImage.scss';
+
+import React, {MouseEventHandler} from 'react';
+import {
+    ElementPosition, IndexedObject, PDFDisplay, PDFElementParams, PDFElementPersist, PDFElementType, PDFImageParams
+} from "../../util/interfaces";
+import {PDFDraggable, PdfElement} from "../element/pdfElement";
+import {nullify} from "../../util/miscUtil";
+import {merge} from 'lodash';
+import {AwesomeIcon, directTimeout, PAGE_HEIGHT, PAGE_WIDTH} from "../../../../index";
+
+interface Props {
+    onDelete: MouseEventHandler;
+    onSaveHistory: VoidFunction;
+    values: IndexedObject<string>;
+    defaultSettings?: Partial<PDFImageParams>;
+    id?: string;
+    defaultPosition: { x: number; y: number };
+    draggable: boolean;
+    onFocusElement: (element: PdfElement) => void;
+    width?: number;
+    height?: number;
+    persistent?: PDFElementPersist;
+}
+
+interface State {
+    dragging: boolean;
+    settings: { img: string; persistent: PDFElementPersist; alignment?: ElementPosition;  display?: PDFDisplay };
+}
+
+export default class PdfImage extends PdfElement<Props, State> {
+    static defaultProps = {
+        defaultPosition: {x: 0, y: 0},
+    };
+
+    private input: HTMLInputElement;
+    private image: File | null = null;
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            settings: merge({}, {
+                img: props.values?.default_image || '',
+                persistent: PDFElementPersist.NOT_PERSISTENT,
+                alignment: undefined,
+                display: PDFDisplay.ALL_PAGES,
+            }, props.defaultSettings),
+            dragging: false,
+        };
+    };
+
+    public onChooseFile = () => {
+        if (this.input)
+            this.input.click();
+    };
+
+    onChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+        const {files} = evt.target;
+        if (files?.length) this.setWidth(files[0]);
+    };
+
+    onClick = (evt: React.MouseEvent): void => {
+        evt.stopPropagation();
+        this.props.onFocusElement(this);
+        if (this.draggable)
+            this.draggable.setFocus();
+    }
+
+    onClickDelete = (evt: React.MouseEvent): void => {
+        evt.stopPropagation();
+        const {onDelete} = this.props;
+        onDelete(evt);
+    };
+
+    onClickBar = (evt: React.MouseEvent) => {
+        this.onClick(evt);
+    };
+
+    setWidth = (file: File | string, setDirect: boolean = false) => {
+        const img: HTMLImageElement = new Image;
+        img.onload = () => {
+            const MAX_WIDTH = PAGE_WIDTH, MAX_HEIGHT = PAGE_HEIGHT, {width, height} = img;
+            let calcWidth = this.props.width ?? width, calcHeight = this.props.height ?? height;
+            const widthDiff = calcWidth - MAX_WIDTH, heightDiff = calcHeight - MAX_HEIGHT,
+                imgRatio = height / width, calcRatio = calcHeight / calcWidth;
+            if (calcRatio != imgRatio) calcHeight = calcHeight / calcRatio * imgRatio;
+            let finalWidth: number = calcWidth, finalHeight: number = calcHeight;
+            if (widthDiff > 0 || heightDiff > 0) {
+                if (widthDiff > heightDiff) {
+                    finalWidth = MAX_WIDTH;
+                    finalHeight = Math.round(finalWidth * imgRatio);
+                } else {
+                    finalHeight = MAX_HEIGHT;
+                    finalWidth = Math.round(finalHeight / imgRatio);
+                }
+            }
+            if (this.draggable)
+                this.draggable.setSize(finalWidth, finalHeight, !setDirect);
+        };
+        let imageSource: string;
+        if (typeof file === 'string') {
+            imageSource = file;
+            img.src = file;
+        } else {
+            imageSource = URL.createObjectURL(file);
+            if (!setDirect)
+                img.src = imageSource
+            this.image = file;
+        }
+        if (setDirect) {
+            this.setState({settings: Object.assign({}, this.state.settings, {img: imageSource})});
+        } else this.setSetting('img', img.src);
+    };
+
+    getParams = (convertPixels: boolean = true): PDFElementParams<PDFElementType.IMAGE, PDFImageParams> => {
+        const {settings} = this.state;
+        return {
+            key: this.id,
+            dimensions: this.getDimensions(convertPixels),
+            type: PDFElementType.IMAGE,
+            options: {
+                img: this.image ?? nullify(settings.img),
+                persistent: settings.persistent,
+                alignment: settings.alignment,
+                display: settings.display,
+            },
+        };
+    };
+
+    isDraggable = (): boolean => this.state.settings.alignment === undefined && this.props.draggable;
+
+    renderImg = () => {
+        const {img} = this.state.settings;
+        if (img) return <img src={img} alt='Afbeelding niet gevonden' className='image'/>;
+        return (
+            <div className='img-selector'>
+                <AwesomeIcon name='image' className='img-icon'/>
+                <span className='img-selector-label'>Kies afbeelding</span>
+            </div>
+        )
+    };
+
+    componentDidMount = () => {
+        const {settings} = this.state;
+        directTimeout(() => {
+            this.setWidth(settings.img, true);
+        });
+    };
+
+    render = () => {
+        const {settings, dragging} = this.state, {defaultPosition, width, height, onSaveHistory, onDelete, persistent} = this.props;
+        return (
+            <PDFDraggable onDragEnd={this.onDragEnd} elementLabel='Afbeelding' onDragStart={this.onDragStart}
+                          draggable={this.isDraggable()} dragging={dragging} position={defaultPosition}
+                          maxWidth={PAGE_WIDTH} maxHeight={PAGE_HEIGHT} width={width} height={height} lockAspect
+                          onDelete={onDelete} onEdit={this.onClick} onClickBar={this.onClickBar} persistent={persistent}
+                          ref={(ref: PDFDraggable) => {
+                              this.draggable = ref
+                          }} matchParentSize forwardRef={(ref: HTMLDivElement) => {
+                this.element = ref
+            }} onDragged={onSaveHistory} onResized={onSaveHistory} alignment={settings.alignment}>
+                <div className='pdf-image' onClick={this.onClick}>
+                    {this.renderImg()}
+                    <input type='file' accept='image/png, image/jpeg' onChange={this.onChange}
+                           style={{display: 'none'}} ref={(ref: HTMLInputElement) => {
+                        this.input = ref
+                    }}/>
+                </div>
+            </PDFDraggable>
+        )
+    };
+}

package/src/js/pdf/image/style/pdfImage.scss

@@ -0,0 +1,34 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../style/variables';
+
+.pdf-image {
+  width: 100%;
+  height: 100%;
+  .image {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .img-selector {
+    padding: 2rem;
+    border: 2px dashed $color-gray-3;
+    color: $color-gray-3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .img-icon {
+      font-size: 3rem;
+    }
+
+    .img-selector-label {
+      font-weight: 500;
+      font-size: .9rem;
+      white-space: nowrap;
+    }
+  }
+}