@dvrd/dvr-controls 1.0.4 → 1.0.7

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

@@ -1,315 +0,0 @@
-/*
- * 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

@@ -1,111 +0,0 @@
-/*!
- * 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

@@ -1,57 +0,0 @@
-/*
- * 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

@@ -1,175 +0,0 @@
-/*
- * 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

@@ -1,34 +0,0 @@
-/*!
- * 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;
-    }
-  }
-}