@dvrd/dvr-controls 1.0.6 → 1.0.9

package/src/js/pdf/invoiceTable/pdfInvoiceTable.tsx

@@ -1,176 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/pdfInvoiceTable.scss';
-
-import React, {MouseEventHandler} from 'react';
-import {
-    ElementPosition,
-    PDFElementParams, PDFElementPersist, PDFElementType, PdfFont, PDFInvoiceTableParams
-} from "../../util/interfaces";
-import {PDFDraggable, PdfElement} from "../element/pdfElement";
-import {merge} from 'lodash';
-import {parsePrice, pxToPt} from "../../util/pdfUtil";
-import {WithEvents} from "../../../../index";
-
-interface Props {
-    onSaveHistory: VoidFunction;
-    onDelete: MouseEventHandler;
-    defaultSettings?: Partial<PDFInvoiceTableParams>;
-    id?: string;
-    defaultPosition: { x: number; y: number; };
-    draggable: boolean;
-    onFocusElement: (element: PdfElement) => void;
-    width?: number;
-    height?: number;
-    persistent?: PDFElementPersist;
-    mainFont: PdfFont;
-}
-
-interface State {
-    settings: PDFInvoiceTableParams;
-    dragging: boolean;
-}
-
-export default class PdfInvoiceTable extends PdfElement<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            settings: merge({}, {
-                widths: [40, 20, 20, 20],
-                fontSize: 12,
-                font: props.mainFont,
-                color: '#000',
-                alignment: ElementPosition.CENTER,
-                persistent: PDFElementPersist.NOT_PERSISTENT,
-            }, props.defaultSettings),
-            dragging: false,
-        };
-    }
-
-    getParams = (convertPixels: boolean = true): PDFElementParams<PDFElementType.INVOICE_TABLE, PDFInvoiceTableParams> => {
-        const {settings} = this.state, fontSize = convertPixels ? pxToPt(settings.fontSize) : settings.fontSize;
-        return {
-            dimensions: this.getDimensions(convertPixels),
-            type: PDFElementType.INVOICE_TABLE,
-            key: this.id,
-            options: {
-                widths: settings.widths,
-                fontSize,
-                font: settings.font,
-                color: settings.color,
-                alignment: settings.alignment,
-                persistent: settings.persistent,
-            },
-        };
-    }
-
-    onClick = (evt: React.MouseEvent): void => {
-        evt.stopPropagation();
-        this.props.onFocusElement(this);
-        if (this.draggable)
-            this.draggable.setFocus();
-    };
-
-    onClickDelete = (): void => {
-        // Deleting invoice table is not allowed
-        return;
-    };
-
-    onClickBar = (evt: React.MouseEvent) => {
-        this.onClick(evt);
-    };
-
-    private getRowStyle = (isHeadRow: boolean = false): React.CSSProperties => {
-        const {widths, fontSize, font, color} = this.state.settings,
-            style: React.CSSProperties = {fontSize, fontFamily: font, color};
-        if (isHeadRow) {
-            style.fontWeight = font === PdfFont.HELVETICA ? 600 : 500;
-            style.borderBottom = '2px solid #d8d8d8';
-        }
-        style.gridTemplateColumns = widths.join('% ') + '%';
-        return style;
-    }
-
-    renderInvoiceLine = (index: number) => {
-        const amount = index === 1 ? 2 : 14, piecePrice = index === 1 ? 120 : 175, price = index === 1 ? 240 : 2450;
-        return (
-            <div className='invoice-line' key={index} style={this.getRowStyle()}>
-                <span>Productnaam {index}</span>
-                <span>{amount}</span>
-                <span>&euro; {parsePrice(piecePrice)}</span>
-                <span>21%</span>
-                <span className='end'>&euro; {parsePrice(price)}</span>
-            </div>
-        )
-    };
-
-    renderTotals = () => {
-        const {font} = this.state.settings;
-        return (
-            <>
-                <div className='invoice-line mt bt' style={this.getRowStyle()}>
-                    <span/>
-                    <span/>
-                    <span className='light fl'>Totaal excl. BTW</span>
-                    <span/>
-                    <span className='end fl'>&euro; {'{subtotaal}'}</span>
-                </div>
-                <div className='invoice-line' style={this.getRowStyle()}>
-                    <span/>
-                    <span/>
-                    <span className='light fl'>BTW (21%)</span>
-                    <span/>
-                    <span className='end fl'>&euro; {'{btw_totaal}'}</span>
-                </div>
-                <div className='invoice-line' style={this.getRowStyle()}>
-                    <span/>
-                    <span/>
-                    <span className='underline light fl'>BTW (9%)</span>
-                    <span/>
-                    <span className='underline end fl'>&euro; {'{btw_totaal}'}</span>
-                </div>
-                <div className='invoice-line' style={this.getRowStyle()}>
-                    <span/>
-                    <span/>
-                    <span className='total-label fl'
-                          style={{fontWeight: font === PdfFont.HELVETICA ? 600 : 500}}>Totaalbedrag incl. BTW</span>
-                    <span/>
-                    <span className='end fl' style={{
-                        fontWeight: font === PdfFont.HELVETICA ? 600 : 500
-                    }}>&euro; {'{factuurtotaal}'}</span>
-                </div>
-            </>
-        )
-    };
-
-    render = () => {
-        const {dragging, settings} = this.state, {draggable, defaultPosition, width, height, onSaveHistory} = this.props;
-        return (
-            <WithEvents events={this.event}>
-                <PDFDraggable dragging={dragging} draggable={draggable} onDragStart={this.onDragStart}
-                              alignment={settings.alignment} elementLabel='Factuurregels' onDragEnd={this.onDragEnd}
-                              position={defaultPosition} width={width} height={height} onEdit={this.onClick}
-                              onClickBar={this.onClickBar} matchParentSize
-                              forwardRef={(ref: HTMLDivElement) => {
-                                  this.element = ref
-                              }} ref={(ref: PDFDraggable) => {
-                    this.draggable = ref
-                }}
-                              onResized={onSaveHistory} onDragged={onSaveHistory}>
-                    <div className='pdf-invoice-table' onClick={this.onClick}>
-                        <div className='invoice-line' style={this.getRowStyle(true)}>
-                            <span>Productnaam</span>
-                            <span>Aantal</span>
-                            <span>Bedrag</span>
-                            <span>BTW</span>
-                            <span className='end'>Subtotaal incl. BTW</span>
-                        </div>
-                        {[1, 2].map(this.renderInvoiceLine)}
-                        {this.renderTotals()}
-                    </div>
-                </PDFDraggable>
-            </WithEvents>
-        )
-    }
-}

package/src/js/pdf/invoiceTable/style/pdfInvoiceTable.scss

@@ -1,32 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../../style/variables';
-
-.pdf-invoice-table {
-  .invoice-line {
-    padding: .75rem 0;
-    display: grid;
-
-    .amount {
-      justify-self: center;
-    }
-
-    .end {
-      justify-self: end;
-    }
-
-    .light {
-      color: $color-gray-3;
-    }
-
-    .fl {
-      white-space: nowrap;
-    }
-
-    &.bt {
-      border-top: 2px solid #d8d8d8;
-    }
-  }
-}

package/src/js/pdf/pdfTemplateCreator.tsx

@@ -1,278 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/pdfTemplateCreator.scss';
-
-import React, {Fragment, PureComponent} from 'react';
-import {
-    AwesomeIcon, Button, DefaultPDFElementParams, directTimeout, dispatchCustomEvent, generateComponentId,
-    IndexedObject, PDFElementParams, PDFElementPersist, PDFElementType, PdfFont, PDFSubmitHandler, PDFTextVariables,
-    ptToPx, setElementSettings, voidFunction, generateUUID
-} from "../../../";
-import PdfText from "./text/pdfText";
-import classNames from 'classnames';
-import {PdfElement} from "./element/pdfElement";
-import PdfElementSettings from "./settings/pdfElementSettings";
-import PdfImage from "./image/pdfImage";
-import PdfInvoiceTable from "./invoiceTable/pdfInvoiceTable";
-import {addToHistory, canRedo, canUndo, clearHistory, redo, undo} from "./history/pdfHistory";
-
-interface Props {
-    onClickProceed?: PDFSubmitHandler;
-    onPreview?: PDFSubmitHandler;
-    onSubmit: PDFSubmitHandler;
-    onChangeFont: (font: PdfFont, callback?: VoidFunction) => void;
-    values: IndexedObject<string>;
-    defaultItems?: DefaultPDFElementParams<any, any>[];
-    resetItems: DefaultPDFElementParams<any, any>[];
-    customVariables?: PDFTextVariables;
-    id?: string;
-    mainFont: PdfFont;
-    disableElements: ('text' | 'image' | 'invoiceTable')[];
-    maxWidth?: string;
-    supportMultiPage: boolean;
-}
-
-interface State {
-    elements: IndexedObject<React.ReactElement>;
-    focusedElement: PdfElement | null;
-    canUndo: boolean;
-    canRedo: boolean;
-}
-
-export default class PDFTemplateCreator extends PureComponent<Props, State> {
-    static defaultProps = {
-        values: {},
-        disableElements: [],
-        supportMultiPage: false,
-    };
-
-    private readonly id: string = generateComponentId(this.props.id, true);
-    private refObjects: IndexedObject<PdfElement>;
-
-    state: State = {
-        elements: {}, focusedElement: null, canRedo: false, canUndo: false,
-    };
-
-    constructor(props: Props) {
-        super(props);
-        this.refObjects = {};
-        const elements: IndexedObject<React.ReactElement> = this.processItems(props.defaultItems);
-        this.state = {elements, focusedElement: null, canRedo: false, canUndo: false};
-    }
-
-    processItems = (items?: DefaultPDFElementParams<any, any>[],
-                    convertUnits: boolean = true): IndexedObject<React.ReactElement> => {
-        const elements: IndexedObject<React.ReactElement> = {};
-        if (items?.length) {
-            items = JSON.parse(JSON.stringify(items));
-            if (items) {
-                this.refObjects = {};
-                for (const item of items) {
-                    setElementSettings(item, convertUnits);
-                    const id = item.key || generateUUID();
-                    elements[id] = this.getElement(id, item, convertUnits)
-                }
-            }
-        }
-        return elements;
-    };
-
-    onUndo = () => {
-        if (canUndo()) {
-            const {items, mainFont} = undo();
-            if (items.length)
-                this.props.onChangeFont(mainFont, () => {
-                    this.setState(
-                        {elements: this.processItems(items, false), canRedo: canRedo(), canUndo: canUndo()});
-                });
-        }
-    };
-
-    onRedo = () => {
-        if (canRedo()) {
-            const {items, mainFont} = redo();
-            if (items.length)
-                this.props.onChangeFont(mainFont, () => {
-                    this.setState(
-                        {elements: this.processItems(items, false), canRedo: canRedo(), canUndo: canUndo()});
-                });
-        }
-    };
-
-    onReset = () => {
-        const {resetItems} = this.props;
-        clearHistory();
-        this.setState({elements: this.processItems(resetItems), canRedo: false, canUndo: false}, this.onSaveHistory);
-    };
-
-    onSaveHistory = () => {
-        const {mainFont} = this.props, items: PDFElementParams<any, any>[] = [] =
-            Object.values(this.refObjects).filter((element: PdfElement | null) => element !== null)
-                .map((element: PdfElement) => element.getParams(false));
-        addToHistory(items, mainFont);
-        this.setState({canUndo: canUndo(), canRedo: canRedo()});
-    };
-
-    onFocusElement = (element: PdfElement) => {
-        this.onResetElement();
-        this.setState({focusedElement: null}, () => {
-            this.setState({focusedElement: element});
-        });
-    };
-
-    onResetElement = () => {
-        this.setState({focusedElement: null});
-        const focusedElements = document.querySelectorAll('div.pdf-draggable.focused');
-        for (const element of focusedElements)
-            element.classList.remove('focused');
-    };
-
-    onDeleteElement = (id: string) => () => {
-        const {elements} = this.state;
-        delete this.refObjects[id];
-        delete elements[id];
-        this.setState({elements: Object.assign({}, elements), focusedElement: null});
-    };
-
-    onAddElement = (type: PDFElementType) => (evt: React.MouseEvent) => {
-        evt.stopPropagation();
-        const id = generateUUID(), scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) + 50,
-            {elements} = this.state;
-
-        elements[id] = this.getElement(id,
-            {dimensions: {width: 150, height: 100, left: 50, top: scrollTop}, type});
-        this.setState({elements: Object.assign({}, elements)});
-    };
-
-    onSubmit = () => {
-        this.props.onSubmit(this.createSubmitItems());
-    };
-
-    onClickProceed = () => {
-        const {onClickProceed} = this.props;
-        if (onClickProceed)
-            onClickProceed(this.createSubmitItems());
-    };
-
-    onPreview = () => {
-        const {onPreview} = this.props;
-        if (onPreview) onPreview(this.createSubmitItems());
-    }
-
-    onChangeFont = (font: PdfFont) => {
-        const currentFont = this.props.mainFont;
-        this.props.onChangeFont(font, this.onSaveHistory);
-        dispatchCustomEvent('pdfFontChanged', {previousFont: currentFont, font});
-    };
-
-    createSubmitItems = (): PDFElementParams<any, any>[] => {
-        return Object.values(this.refObjects).filter((element: PdfElement | null) => element !== null)
-            .map((element: PdfElement) => element.getParams());
-    };
-
-    getElement = (id: string, config: DefaultPDFElementParams<any, any>,
-                  convertUnits: boolean = true): React.ReactElement => {
-        const {dimensions, linkedID, persistent} = config, position: { x: number; y: number } = {
-                x: convertUnits ? ptToPx(dimensions?.left || 0) : (dimensions?.left || 0),
-                y: convertUnits ? ptToPx(dimensions?.top || 0) : (dimensions?.top || 0),
-            }, width = dimensions?.width, height = dimensions?.height, {values, mainFont} = this.props,
-            key: string = generateUUID();
-        const sharedProps = {
-            defaultPosition: position,
-            onDelete: this.onDeleteElement(id),
-            id,
-            draggable: true,
-            onFocusElement: this.onFocusElement,
-            onSaveHistory: this.onSaveHistory,
-            ref: (ref: any) => {
-                this.refObjects[id] = ref;
-            },
-            defaultSettings: {...config.dimensions, ...config.options},
-            key,
-        }
-        switch (config.type) {
-            case PDFElementType.TEXT:
-                return <PdfText {...sharedProps} values={values} persistent={persistent} mainFont={mainFont}
-                                linkedID={linkedID}/>;
-            case PDFElementType.IMAGE:
-                return <PdfImage {...sharedProps} values={values} width={width} height={height}
-                                 persistent={persistent}/>;
-            case PDFElementType.INVOICE_TABLE:
-                return <PdfInvoiceTable {...sharedProps} width={width} height={height} mainFont={mainFont}
-                                        persistent={PDFElementPersist.PERSISTENT}/>;
-        }
-        return <div/>;
-    };
-
-    renderElementButton = (icon: string, label: string, type: PDFElementType) => (
-        <div className='element-button' onClick={this.onAddElement(type)}>
-            <AwesomeIcon name={icon} className='element-icon'/>
-            <label className='element-label'>+ {label}</label>
-        </div>
-    );
-
-    componentDidMount = () => {
-        directTimeout(this.onSaveHistory);
-    };
-
-    componentWillUnmount = () => {
-        clearHistory();
-    };
-
-    render = () => {
-        const {elements, focusedElement, canUndo, canRedo,} = this.state,
-            {
-                customVariables, onPreview, mainFont, disableElements, onClickProceed, maxWidth, supportMultiPage
-            } = this.props;
-        return (
-            <div className='pdf-creator' onClick={this.onResetElement}
-                 style={{maxWidth: maxWidth ?? '100%'}}>
-                <div className='footer-container'>
-                    {onPreview !== undefined ? <Button onClick={this.onPreview} label='Voorbeeld'/> : <div/>}
-                    <div>
-                        <Button onClick={this.onSubmit} label='Opslaan'/>
-                        {onClickProceed !== undefined &&
-                            <Button onClick={this.onClickProceed} label='Naar volgende stap' className='proceed-btn'/>}
-                    </div>
-                </div>
-                <div/>
-                <div className='elements-container'>
-                    {!disableElements.includes('image') &&
-                        this.renderElementButton('image', 'Afbeelding', PDFElementType.IMAGE)}
-                    {!disableElements.includes('text') &&
-                        this.renderElementButton('font', 'Tekst', PDFElementType.TEXT)}
-                    {!disableElements.includes('invoiceTable') &&
-                        this.renderElementButton('list', 'Factuurregels', PDFElementType.INVOICE_TABLE)}
-                    <div className='history'>
-                        <div className={classNames('history-button', !canUndo && 'disabled')}
-                             onClick={canUndo ? this.onUndo : voidFunction}
-                             title={canUndo ? 'Ongedaan maken' : undefined}>
-                            <AwesomeIcon name='undo' className='history-icon'/>
-                        </div>
-                        <div className={classNames('history-button', !canRedo && 'disabled')}
-                             onClick={canRedo ? this.onRedo : voidFunction}
-                             title={canRedo ? 'Opnieuw doen' : undefined}>
-                            <AwesomeIcon name='redo' className='history-icon'/>
-                        </div>
-                    </div>
-                    <div className='history-reset'>
-                        <Button onClick={this.onReset} label='Reset'/>
-                    </div>
-                </div>
-                <div className='pdf-paper' onClick={this.onResetElement}>
-                    {Object.keys(elements).map((id: string) => (
-                        <Fragment key={id}>
-                            {elements[id]}
-                        </Fragment>
-                    ))}
-                </div>
-                <div className='right-col'>
-                    <PdfElementSettings element={focusedElement} onReset={this.onResetElement}
-                                        customVariables={customVariables} font={mainFont}
-                                        onChangeFont={this.onChangeFont} supportMultiPage={supportMultiPage}/>
-                </div>
-            </div>
-        )
-    }
-}

package/src/js/pdf/settings/buttons/iconButton.tsx

@@ -1,49 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/iconButton.scss';
-
-import React, {MouseEventHandler, PureComponent} from 'react';
-import classNames from 'classnames';
-
-export enum IconButtonType {BOLD = 'bold', ITALIC = 'italic', UNDERLINE = 'underline', CENTER = 'centered', LEFT = 'left', RIGHT = 'right'}
-
-interface Props {
-    onClick: (type: IconButtonType) => MouseEventHandler;
-    active: boolean;
-    type: IconButtonType;
-    title: string;
-}
-
-export default class IconButton extends PureComponent<Props> {
-    getPath = (): string => {
-        const {type} = this.props;
-        switch (type) {
-            case IconButtonType.BOLD:
-                return 'M747 1521q74 32 140 32 376 0 376-335 0-114-41-180-27-44-61.5-74t-67.5-46.5-80.5-25-84-10.5-94.5-2q-73 0-101 10 0 53-.5 159t-.5 158q0 8-1 67.5t-.5 96.5 4.5 83.5 12 66.5zm-14-746q42 7 109 7 82 0 143-13t110-44.5 74.5-89.5 25.5-142q0-70-29-122.5t-79-82-108-43.5-124-14q-50 0-130 13 0 50 4 151t4 152q0 27-.5 80t-.5 79q0 46 1 69zm-541 889l2-94q15-4 85-16t106-27q7-12 12.5-27t8.5-33.5 5.5-32.5 3-37.5.5-34v-65.5q0-982-22-1025-4-8-22-14.5t-44.5-11-49.5-7-48.5-4.5-30.5-3l-4-83q98-2 340-11.5t373-9.5q23 0 68.5.5t67.5.5q70 0 136.5 13t128.5 42 108 71 74 104.5 28 137.5q0 52-16.5 95.5t-39 72-64.5 57.5-73 45-84 40q154 35 256.5 134t102.5 248q0 100-35 179.5t-93.5 130.5-138 85.5-163.5 48.5-176 14q-44 0-132-3t-132-3q-106 0-307 11t-231 12z';
-            case IconButtonType.ITALIC:
-                return 'M384 1662l17-85q6-2 81.5-21.5t111.5-37.5q28-35 41-101 1-7 62-289t114-543.5 52-296.5v-25q-24-13-54.5-18.5t-69.5-8-58-5.5l19-103q33 2 120 6.5t149.5 7 120.5 2.5q48 0 98.5-2.5t121-7 98.5-6.5q-5 39-19 89-30 10-101.5 28.5t-108.5 33.5q-8 19-14 42.5t-9 40-7.5 45.5-6.5 42q-27 148-87.5 419.5t-77.5 355.5q-2 9-13 58t-20 90-16 83.5-6 57.5l1 18q17 4 185 31-3 44-16 99-11 0-32.5 1.5t-32.5 1.5q-29 0-87-10t-86-10q-138-2-206-2-51 0-143 9t-121 11z';
-            case IconButtonType.UNDERLINE:
-                return 'M176 223q-37-2-45-4l-3-88q13-1 40-1 60 0 112 4 132 7 166 7 86 0 168-3 116-4 146-5 56 0 86-2l-1 14 2 64v9q-60 9-124 9-60 0-79 25-13 14-13 132 0 13 .5 32.5t.5 25.5l1 229 14 280q6 124 51 202 35 59 96 92 88 47 177 47 104 0 191-28 56-18 99-51 48-36 65-64 36-56 53-114 21-73 21-229 0-79-3.5-128t-11-122.5-13.5-159.5l-4-59q-5-67-24-88-34-35-77-34l-100 2-14-3 2-86h84l205 10q76 3 196-10l18 2q6 38 6 51 0 7-4 31-45 12-84 13-73 11-79 17-15 15-15 41 0 7 1.5 27t1.5 31q8 19 22 396 6 195-15 304-15 76-41 122-38 65-112 123-75 57-182 89-109 33-255 33-167 0-284-46-119-47-179-122-61-76-83-195-16-80-16-237v-333q0-188-17-213-25-36-147-39zm1488 1409v-64q0-14-9-23t-23-9h-1472q-14 0-23 9t-9 23v64q0 14 9 23t23 9h1472q14 0 23-9t9-23z';
-            case IconButtonType.CENTER:
-                return 'M1792 1344v128q0 26-19 45t-45 19h-1664q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1664q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h896q26 0 45 19t19 45zm256-384v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-640q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h640q26 0 45 19t19 45z';
-            case IconButtonType.LEFT:
-                return 'M1792 1344v128q0 26-19 45t-45 19h-1664q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1664q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-1280q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1280q26 0 45 19t19 45zm256-384v128q0 26-19 45t-45 19h-1536q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1536q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-1152q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1152q26 0 45 19t19 45z';
-            case IconButtonType.RIGHT:
-                return 'M1792 1344v128q0 26-19 45t-45 19h-1664q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1664q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-1280q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1280q26 0 45 19t19 45zm256-384v128q0 26-19 45t-45 19h-1536q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1536q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-1152q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1152q26 0 45 19t19 45z';
-        }
-    }
-
-    render = () => {
-        const {onClick, active, type, title} = this.props;
-        return (
-            <div className={classNames('icon-button', active && 'active')} onClick={onClick(type)} title={title}>
-                <span className='icon-container'>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" className="button-icon">
-                        <path d={this.getPath()}/>
-                    </svg>
-                </span>
-            </div>
-        )
-    }
-}

package/src/js/pdf/settings/buttons/style/iconButton.scss

@@ -1,50 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../../../style/variables';
-
-.icon-button {
-  display: inline-flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background-color: $color-gray-7;
-  width: 34px;
-  height: 34px;
-  transition: background-color .2s ease-in-out;
-  border-right: 1px solid $color-gray-4;
-
-  .icon-container {
-    display: inline-flex;
-    text-align: center;
-    justify-content: center;
-    align-items: center;
-
-    .button-icon {
-      pointer-events: none;
-      width: 14px;
-      height: 14px;
-      isolation: isolate;
-      overflow: hidden;
-      stroke: #4c4c4c;
-      fill: #4c4c4c;
-      transform-origin: 0 0 !important;
-      background: 50% no-repeat;
-      background-size: contain;
-    }
-  }
-
-  &:hover {
-    background-color: $color-gray-4;
-  }
-
-  &.active {
-    background-color: $color-blue-1;
-  }
-
-  &:last-child {
-    border-right: none;
-  }
-}

package/src/js/pdf/settings/image/pdfImageSettings.tsx

@@ -1,82 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/pdfImageSettings.scss';
-
-import React, {PureComponent} from 'react';
-import PdfImage from "../../image/pdfImage";
-import {Button, DvrdSelect, ElementPosition, SelectItemShape} from "../../../../../index";
-import IconButton, {IconButtonType} from "../buttons/iconButton";
-import {PDFDisplay} from "../../../util/interfaces";
-
-interface Props {
-    element: PdfImage;
-    supportMultiPage: boolean;
-}
-
-interface State {
-    alignment?: ElementPosition;
-    display: PDFDisplay;
-}
-
-const displayItems: SelectItemShape[] = [
-    {value: PDFDisplay.ALL_PAGES, label: 'Alle pagina\'s'},
-    {value: PDFDisplay.FIRST_PAGE, label: 'Alleen eerste pagina'},
-    {value: PDFDisplay.LAST_PAGE, label: 'Alleen laatste pagina'},
-]
-
-export default class PdfImageSettings extends PureComponent<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        const settings = props.element.getSettings();
-        this.state = {
-            alignment: settings.alignment,
-            display: settings.display ?? PDFDisplay.ALL_PAGES,
-        };
-    }
-
-    onChangeDisplay = (value: PDFDisplay) => {
-        const {element} = this.props;
-        element.setSetting('display', value, () => {
-            this.setState({display: value});
-        })
-    }
-
-    onToggleAlignment = (type: IconButtonType) => () => {
-        const {alignment} = this.state, {element} = this.props;
-        let nextAlignment: ElementPosition | undefined;
-        if (type === IconButtonType.LEFT)
-            nextAlignment = alignment === ElementPosition.LEFT ? undefined : ElementPosition.LEFT;
-        else if (type === IconButtonType.CENTER)
-            nextAlignment = alignment === ElementPosition.CENTER ? undefined : ElementPosition.CENTER;
-        else if (type === IconButtonType.RIGHT)
-            nextAlignment = alignment === ElementPosition.RIGHT ? undefined : ElementPosition.RIGHT;
-        element.setSetting('alignment', nextAlignment, () => {
-            this.setState({alignment: nextAlignment});
-        });
-    }
-
-    render = () => {
-        const {element, supportMultiPage} = this.props, {alignment, display} = this.state;
-        return (
-            <div className='pdf-image-settings'>
-                {supportMultiPage && <>
-                    <label className='settings-title'>Pagina's</label>
-                    <DvrdSelect onChange={this.onChangeDisplay} value={display} items={displayItems}/>
-                </>}
-                <div className='divider'/>
-                <label className='settings-title'>Uitlijning</label>
-                <div className='alignment'>
-                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.LEFT}
-                                type={IconButtonType.LEFT} title='Links'/>
-                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.CENTER}
-                                type={IconButtonType.CENTER} title='Centreren'/>
-                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.RIGHT}
-                                type={IconButtonType.RIGHT} title='Rechts'/>
-                </div>
-                <div className='divider'/>
-                <Button onClick={element.onChooseFile} label='Kies afbeelding'/>
-            </div>
-        )
-    }
-}

package/src/js/pdf/settings/image/style/pdfImageSettings.scss

@@ -1,9 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../../../style/variables';
-
-.pdf-image-settings {
-
-}