@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/pdf/style/pdfTemplateCreator.scss

@@ -0,0 +1,118 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.pdf-creator {
+  margin: 2rem auto;
+  display: grid;
+  grid-template-columns: repeat(2, auto) minmax(min-content, 30rem);
+  align-items: start;
+  grid-row-gap: 1rem;
+  position: relative;
+  justify-content: center;
+
+  .right-col {
+    position: sticky;
+    top: 4rem;
+  }
+
+  .elements-container {
+    display: grid;
+    grid-template-columns: auto;
+    background-color: white;
+    grid-row-gap: 1rem;
+    padding: 1rem;
+    position: sticky;
+    top: 4rem;
+    border: 1px solid $color-gray-7;
+    border-radius: .5rem;
+
+    .element-button {
+      @include backgroundShadow;
+      border-radius: .5rem;
+      cursor: pointer;
+      transition: background-color .2s ease-in-out;
+      display: grid;
+      grid-template-columns: 2rem 1fr;
+      grid-column-gap: 1rem;
+      align-items: center;
+      color: $color-gray-5;
+      padding: .5rem;
+
+      .element-label {
+        white-space: nowrap;
+      }
+
+      .element-icon {
+        font-size: 2rem;
+      }
+
+      &:hover {
+        background-color: $color-gray-6;
+      }
+    }
+
+    .history {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-column-gap: 1rem;
+
+      .history-button {
+        @include backgroundShadow;
+        border-radius: .5rem;
+        cursor: pointer;
+        transition: background-color .2s ease-in-out;
+        padding: .5rem 1rem;
+        text-align: center;
+
+        &:hover {
+          background-color: $color-gray-7;
+        }
+
+        &.disabled {
+          cursor: not-allowed;
+          background-color: white !important;
+          box-shadow: none;
+          border: 1px solid $color-gray-4;
+
+          .history-icon {
+            color: $color-gray-4;
+          }
+        }
+      }
+    }
+
+    .history-reset {
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  .pdf-paper {
+    @include backgroundShadow;
+    border-radius: .5rem;
+    width: 595pt;
+    height: 842pt;
+    background-color: white;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  .footer-container {
+    @include backgroundShadow;
+    border-radius: .5rem;
+    grid-column: 2;
+    padding: 1rem;
+    background-color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .proceed-btn {
+      margin-left: 1rem;
+    }
+  }
+}

package/src/js/pdf/text/pdfText.tsx

@@ -0,0 +1,267 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/pdfText.scss';
+
+import React, {CSSProperties, MouseEventHandler} from 'react';
+import {
+    CustomAppEvent,
+    IndexedObject,
+    PDFDisplay,
+    PDFElementParams,
+    PDFElementPersist,
+    PDFElementType,
+    PdfFont,
+    PDFTextParams,
+    PDFTextVariables
+} from "../../util/interfaces";
+import {PDFDraggable, PdfElement} from "../element/pdfElement";
+import {debug, sanitizeHtml} from "../../util/miscUtil";
+import {merge} from 'lodash';
+import {PAGE_WIDTH, pxToPt, setPdfVariables, waitForFonts} from "../../util/pdfUtil";
+import {directTimeout} from "../../util/componentUtil";
+import {dispatchCustomEvent, showDialog} from "../../util/eventUtil";
+import {remToPx, WithEvents} from "../../../../";
+
+interface Props {
+    onDelete: MouseEventHandler;
+    onSaveHistory: VoidFunction;
+    values: IndexedObject<string>;
+    defaultSettings?: Partial<PDFTextParams>;
+    id?: string;
+    customVariables?: PDFTextVariables;
+    defaultPosition: { x: number; y: number };
+    draggable: boolean;
+    onFocusElement: (element: PdfElement) => void;
+    persistent?: PDFElementPersist;
+    mainFont: PdfFont;
+    linkedID?: string;
+}
+
+interface State {
+    settings: PDFTextParams;
+    dragging: boolean;
+    focused: boolean;
+}
+
+export default class PdfText extends PdfElement<Props, State> {
+    static defaultProps = {
+        defaultPosition: {x: 0, y: 0},
+    };
+    private lastKnownCursor: number = 0;
+    private field: HTMLTextAreaElement;
+    private initialWidth: number | null = null;
+    private currentText: string = '';
+    private readonly events: CustomAppEvent[];
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            settings: merge({}, {
+                text: 'Klik hier om deze tekst aan te passen.',
+                bold: false,
+                underline: false,
+                italic: false,
+                fontSize: remToPx(1),
+                alignment: undefined,
+                font: props.mainFont,
+                color: '#000',
+                persistent: PDFElementPersist.NOT_PERSISTENT,
+                display: PDFDisplay.ALL_PAGES,
+            }, props.defaultSettings),
+            dragging: false,
+            focused: false,
+        }
+        this.currentText = this.state.settings.text;
+        this.events = [this.event, {eventName: 'onLinkedElementMoved', handler: this.onLinkedElementMoved}]
+    }
+
+    private onBlur = (evt: React.FocusEvent<HTMLTextAreaElement>) => {
+        this.lastKnownCursor = evt.target.selectionEnd || 0;
+        this.setState({focused: false}, this.setWidth);
+        if (this.state.settings.text !== this.currentText) this.props.onSaveHistory();
+    };
+
+    private onFocus = (evt: React.FocusEvent) => {
+        evt.stopPropagation();
+        this.setState({focused: true}, this.setWidth);
+        this.currentText = this.state.settings.text;
+        this.onClick();
+    };
+
+    getTextValue = (): string => {
+        const {settings, focused} = this.state, {values} = this.props;
+        if (focused) return settings.text;
+        return setPdfVariables(settings.text, values);
+    }
+
+    public setSetting = (key: string, value: any, callback?: VoidFunction, save: boolean = true) => {
+        this.setState({settings: Object.assign({}, this.state.settings, {[key]: value})}, () => {
+            this.setWidth();
+            if (key !== 'text' && save)
+                this.props.onSaveHistory();
+            if (callback) callback();
+        });
+    };
+
+    public onClickDelete = (evt: React.MouseEvent) => {
+        const {persistent, onDelete} = this.props;
+        if (persistent === 'confirm')
+            showDialog('We raden aan om dit element wel te tonen op de factuur. Weet je zeker dat je dit ' +
+                'element wilt verwijderen?', 'Element verwijderen',
+                ['Nee', {label: 'Ja', onClick: onDelete}]);
+        else onDelete(evt);
+    };
+
+    onClickEdit = (evt: React.MouseEvent) => {
+        if (this.field) {
+            this.field.focus();
+            const {value} = this.field;
+            this.field.selectionStart = value.length;
+            this.field.selectionEnd = this.field.selectionStart;
+        }
+        this.onClick(evt);
+    };
+
+    onClick = (evt?: React.MouseEvent) => {
+        if (evt)
+            evt.stopPropagation();
+        this.props.onFocusElement(this);
+        if (this.draggable)
+            this.draggable.setFocus();
+    };
+
+    onChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const {target} = evt;
+        this.setSetting('text', target.value, this.setWidth);
+    }
+
+    onClickBar = (evt: React.MouseEvent) => {
+        this.onClick(evt);
+    };
+
+    onDrag = (position: { x: number; y: number }) => {
+        const {linkedID} = this.props;
+        if (linkedID)
+            dispatchCustomEvent('onLinkedElementMoved', {position, id: linkedID, elementId: this.id});
+    }
+
+    onLinkedElementMoved = (data: { position: { x: number; y: number }, id: string; elementId: string }) => {
+        const {linkedID} = this.props;
+        if (this.draggable && linkedID && data.id === linkedID && data.elementId !== this.id)
+            this.draggable.setPosition({x: data.position.x});
+    };
+
+    /**
+     * Externally insert text add last know cursor position
+     * @param newText
+     */
+    public insertText = (newText: string) => {
+        const {settings} = this.state;
+        let {text} = settings;
+        text = text.substr(0, this.lastKnownCursor) + newText + text.substr(this.lastKnownCursor, text.length);
+        this.setState({settings: Object.assign({}, settings, {text})}, () => {
+            this.setWidth();
+            if (this.field) {
+                this.field.selectionStart = this.field.selectionStart + newText.length;
+                this.field.selectionEnd = this.field.selectionStart;
+                this.field.focus();
+            }
+            this.props.onSaveHistory();
+        });
+    };
+
+    private setWidth = () => {
+        const position = this.draggable?.getPosition() || {x: 0},
+            maxWidth = PAGE_WIDTH - position.x, {linkedID} = this.props
+        if (this.field) {
+            this.field.style.width = '0px';
+            this.field.style.width = this.field.scrollWidth + 'px';
+            this.initialWidth = this.initialWidth ?? this.field.scrollWidth;
+            if (this.field.scrollWidth > maxWidth && this.draggable) {
+                this.draggable.setPosition({x: PAGE_WIDTH - this.field.scrollWidth}, () => {
+                    dispatchCustomEvent('onLinkedElementMoved',
+                        {position: this.draggable.getPosition(), id: linkedID, elementId: this.id});
+                });
+            }
+        }
+    };
+
+    getParams = (convertPixels: boolean = true): PDFElementParams<PDFElementType.TEXT, PDFTextParams> => {
+        const {settings} = this.state,
+            {bold, italic, text, underline, alignment, font, color, persistent, display} = settings,
+            fontSize = convertPixels ? pxToPt(settings.fontSize) : settings.fontSize, {linkedID} = this.props;
+        return {
+            dimensions: this.getDimensions(convertPixels),
+            key: this.id,
+            type: PDFElementType.TEXT,
+            options: {fontSize: fontSize, bold, italic, text, underline, alignment, font, color, persistent, display},
+            linkedID: linkedID,
+        };
+    }
+
+    private getTextStyle = (): CSSProperties => {
+        const {italic, underline, bold, fontSize, font, color} = this.state.settings,
+            styles: CSSProperties = {fontSize, fontFamily: font, color};
+        if (italic) styles.fontStyle = 'italic';
+        if (underline) styles.textDecoration = 'underline';
+        if (bold) styles.fontWeight = font === PdfFont.HELVETICA ? 600 : 500;
+        return styles;
+    };
+
+    private getRows = () => {
+        const {text} = this.state.settings;
+        return text.split('\n').length;
+    };
+
+    componentDidMount = () => {
+        directTimeout(this.setWidth);
+        if (this.props.linkedID) {
+            directTimeout(() => {
+                if (this.draggable) {
+                    debug('Dispatch event');
+                    dispatchCustomEvent('onLinkedElementMoved',
+                        {position: this.draggable.getPosition(), id: this.props.linkedID, elementId: this.id});
+                }
+            })
+        }
+        waitForFonts(this.setWidth);
+    };
+
+    componentDidUpdate = (prevProps: Props, prevState: State) => {
+        const {settings} = this.state, prevSettings = prevState.settings;
+        if (settings.font !== prevSettings.font) waitForFonts(this.setWidth);
+    }
+
+    render = () => {
+        const {settings, dragging} = this.state, {
+            draggable,
+            defaultPosition,
+            onSaveHistory,
+            persistent
+        } = this.props;
+        return (
+            <WithEvents events={this.events}>
+                <PDFDraggable onDrag={this.onDrag} onDragEnd={this.onDragEnd} position={defaultPosition}
+                              elementLabel='Tekst' alignment={settings.alignment} onDragStart={this.onDragStart}
+                              draggable={draggable} dragging={dragging} resizeable={false} onDragged={onSaveHistory}
+                              onResized={onSaveHistory} persistent={persistent} onDelete={this.onClickDelete}
+                              onEdit={this.onClickEdit} ref={(ref: PDFDraggable) => {
+                    this.draggable = ref
+                }} forwardRef={(ref: HTMLDivElement) => {
+                    this.element = ref
+                }} onClickBar={this.onClickBar}>
+                    <div className='pdf-text-container'>
+                    <textarea className='pdf-text-input' style={this.getTextStyle()}
+                              readOnly={settings.disabled === true}
+                              value={sanitizeHtml(this.getTextValue())} onChange={this.onChange}
+                              rows={this.getRows()} onFocus={this.onFocus} onBlur={this.onBlur} onClick={this.onClick}
+                              ref={(ref: HTMLTextAreaElement) => {
+                                  this.field = ref
+                              }}/>
+                    </div>
+                </PDFDraggable>
+            </WithEvents>
+        )
+    }
+}

package/src/js/pdf/text/style/pdfText.scss

@@ -0,0 +1,22 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../style/variables';
+
+.pdf-text-container {
+  .pdf-text-input {
+    border: none !important;
+    outline: none !important;
+    resize: none;
+    background-color: transparent;
+    padding: 0;
+    overflow: hidden;
+    line-height: 1.5;
+    white-space: pre;
+
+    &:disabled {
+      color: black;
+    }
+  }
+}

package/src/js/pdf/v2/pdfElement/pdfDraggableElement.tsx

@@ -0,0 +1,193 @@
+/*
+ * Copyright (c) Dave van Rijn Development 2022.
+ */
+
+import React, {
+    ForwardedRef,
+    forwardRef,
+    MouseEventHandler,
+    PropsWithChildren,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState
+} from 'react';
+import {ElementPosition, PDFElementPersist, RNDDimensions} from "../../../util/interfaces";
+import {generateComponentId} from "../../../util/componentUtil";
+import {DraggableData, HandleStyles, Position, ResizableDelta, ResizeEnable, Rnd, RndDragCallback} from 'react-rnd';
+import {defer, delay} from 'lodash';
+import {PDFDraggableType, ResizeDirection} from "../types/pdfTemplateTypes";
+import {PAGE_WIDTH} from "../../../util/pdfUtil";
+import classNames from 'classnames';
+import {AwesomeIcon} from "../../../../../index";
+
+type ElementDimensions = { width: number | string; height: number | string };
+
+interface Props {
+    onDragStart: RndDragCallback;
+    onDragEnd: (position: Position) => void
+    onDragged: VoidFunction;
+    onResized: VoidFunction;
+    onDrag?: (position: Position) => void;
+    onClickDelete?: MouseEventHandler;
+    onClickEdit?: MouseEventHandler;
+    onClickOptions?: MouseEventHandler;
+    onClickBar: MouseEventHandler;
+    id?: string;
+    dragging: boolean;
+    elementLabel: string;
+    dimensions?: RNDDimensions;
+    draggable: boolean;
+    resizeable?: boolean;
+    resizableHorizontal?: boolean;
+    resizableVertical?: boolean;
+    position?: Position;
+    lockAspect?: boolean;
+    maxWidth?: number;
+    maxHeight?: number;
+    width?: number;
+    height?: number;
+    matchParentSize?: boolean;
+    alignment?: ElementPosition;
+    persistent?: PDFElementPersist;
+}
+
+const resizeHandleClass = 'resize-handle';
+const resizeHandleClasses = {
+    bottomLeft: `${resizeHandleClass} bottom left`,
+    bottomRight: `${resizeHandleClass} bottom right`,
+    topLeft: `${resizeHandleClass} top left`,
+    topRight: `${resizeHandleClass} top right`,
+};
+const resizeHandleStyles: HandleStyles = {
+    topRight: {width: '10px', height: '10px', top: '-5px', right: '-5px'},
+    topLeft: {width: '10px', height: '10px', top: '-5px', left: '-5px'},
+    bottomRight: {width: '10px', height: '10px', bottom: '-5px', right: '-5px'},
+    bottomLeft: {width: '10px', height: '10px', bottom: '-5px', left: '-5px'},
+}
+
+function PDFDraggableElement(props: PropsWithChildren<Props>, ref: ForwardedRef<PDFDraggableType>) {
+    const [position, _setPosition] = useState<Position>(props.position ?? {x: 0, y: 0});
+    const id = useRef<string>(generateComponentId(props.id));
+    const [dimensions, setDimensions] = useState<ElementDimensions>({
+        width: props.width ?? 'auto',
+        height: props.height ?? 'auto'
+    });
+    const draggableRef = useRef<Rnd>(null);
+    const resizeEnable: ResizeEnable = useMemo(() => {
+        const {resizeable, resizableVertical, resizableHorizontal} = props;
+        if (!resizeable) return false;
+        if (resizableHorizontal && resizableVertical) return true;
+        return {
+            bottom: resizableVertical,
+            bottomLeft: resizableVertical && resizableHorizontal,
+            bottomRight: resizableVertical && resizableHorizontal,
+            left: resizableHorizontal,
+            right: resizableHorizontal,
+            top: resizableVertical,
+            topLeft: resizableVertical && resizableHorizontal,
+            topRight: resizableVertical && resizableHorizontal,
+        }
+    }, [props.resizableHorizontal, props.resizableVertical, props.resizeable])
+
+    function setSize(width: number, height: number, notifyResized: boolean = true) {
+        setDimensions({width, height});
+        if (notifyResized)
+            defer(props.onResized);
+    }
+
+    function setFocus() {
+        draggableRef.current?.resizableElement.current?.classList.add('focused');
+    }
+
+    function setPosition(_position: Position, callback?: VoidFunction) {
+        _setPosition(Object.assign({}, position, _position));
+        if (callback) defer(callback);
+    }
+
+    function getPosition(): Position {
+        return position;
+    }
+
+    function onDrag(evt: any, data: DraggableData) {
+        const {onDrag, alignment} = props;
+        if (!onDrag) return;
+        const nextPosition = {x: alignment ? position.x : data.x, y: data.y};
+        onDrag(nextPosition);
+    }
+
+    function onDragStop(evt: any, data: DraggableData) {
+        const {onDragEnd, alignment, onDragged} = props;
+        const nextPosition = {x: alignment ? position.x : data.lastX, y: data.lastY};
+        _setPosition(nextPosition);
+        onDragEnd(nextPosition);
+        onDragged();
+    }
+
+    function onResizeStop(evt: any, direction: ResizeDirection, ref: HTMLElement, delta: ResizableDelta, position: Position) {
+        setDimensions({width: ref.style.width, height: ref.style.height});
+        _setPosition(position);
+        defer(props.onResized);
+    }
+
+    function setInitialPosition() {
+        const {alignment} = props;
+        if (!alignment) return;
+        const div = document.getElementById(id.current);
+        if (!div) return;
+        const width = div.getBoundingClientRect().width;
+        let nextPosition: Position | null = null;
+        if (alignment === ElementPosition.CENTER)
+            nextPosition = {x: PAGE_WIDTH / 2 - width / 2, y: position.y}
+        else if (alignment === ElementPosition.LEFT)
+            nextPosition = {x: 75, y: position.y}
+        else if (alignment === ElementPosition.RIGHT)
+            nextPosition = {x: PAGE_WIDTH - 75 - width, y: position.y}
+        if (nextPosition) _setPosition(nextPosition);
+    }
+
+    useImperativeHandle(ref, () => ({
+        setPosition, getPosition, setFocus, setSize
+    }));
+
+    useEffect(() => {
+        delay(setInitialPosition, 20);
+    }, [props.alignment]);
+
+    const axis = props.alignment ? 'y' : 'both';
+    const {
+        onDragStart, dragging, draggable, lockAspect, maxWidth, maxHeight, onClickEdit, onClickDelete,
+        onClickOptions, matchParentSize, children
+    } = props;
+    return (
+        <Rnd position={position} dragAxis={axis} onDragStart={onDragStart} onDragStop={onDragStop} bounds='parent'
+             className={classNames('pdf-draggable', dragging && 'dragging')} disableDragging={!draggable}
+             enableResizing={resizeEnable} lockAspectRatio={lockAspect} maxWidth={maxWidth ?? Number.MAX_SAFE_INTEGER}
+             maxHeight={maxHeight ?? Number.MAX_SAFE_INTEGER} size={dimensions} onDrag={onDrag}
+             resizeHandleClasses={resizeHandleClasses} resizeHandleStyles={resizeHandleStyles}
+             onResizeStop={onResizeStop} dragHandleClassName='drag-handle' dragGrid={[10, 10]} ref={draggableRef}>
+            <div className='action-bar'>
+                {draggable ? <AwesomeIcon name='arrows-alt' className='action drag-handle'/> : <div/>}
+                <div className='options'>
+                    {!!onClickEdit && <AwesomeIcon name='pen' onClick={onClickEdit} className='action'/>}
+                    {!!onClickDelete &&
+                        <AwesomeIcon name='trash-alt' onClick={onClickDelete} className='action delete'/>}
+                    {!!onClickOptions && <AwesomeIcon name='ellipsis' className='action'/>}
+                </div>
+            </div>
+            <div className={classNames('pdf-element', 'rnd', matchParentSize && 'match-size')} id={id.current}>
+                {dragging && <>
+                    <div className='guide vert'/>
+                    <div className='guide vert reverse'/>
+                    <div className='guide horiz'/>
+                    <div className='guide horiz reverse'/>
+                </>}
+                {children}
+            </div>
+        </Rnd>
+
+    )
+}
+
+export default forwardRef<PDFDraggableType, Props>(PDFDraggableElement);

package/src/js/pdf/v2/types/pdfTemplateTypes.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Dave van Rijn Development 2022.
+ */
+
+import {Position} from "react-rnd";
+
+export type ResizeDirection =
+    'top'
+    | 'right'
+    | 'bottom'
+    | 'left'
+    | 'topRight'
+    | 'bottomRight'
+    | 'bottomLeft'
+    | 'topLeft';
+
+export interface PDFDraggableType {
+    setSize: (width: number, height: number, notifyResized?: boolean) => void;
+    setFocus: VoidFunction;
+    setPosition: (position: Position, callback?: VoidFunction) => void;
+    getPosition: () => Position;
+}
+
+export interface PDFElementType {
+    id: string;
+
+}

package/src/js/popup/style/withBackground.scss

@@ -0,0 +1,29 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.with-background {
+  @include popupContainer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: $z-index-dialog;
+
+  .content-container {
+    width: fit-content;
+    height: fit-content;
+
+    .header-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .header-title {
+        font-size: 1.2rem;
+        font-weight: 500;
+      }
+    }
+  }
+}