@dvrd/dvr-controls 1.0.14 → 1.0.16

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

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

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

@@ -0,0 +1,279 @@
+/*
+ * 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";
+import { IconName } from '@fortawesome/fontawesome-svg-core';
+
+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: IconName, 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

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

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

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

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