@pdfme/ui 2.1.0 → 2.2.1

package/src/helper.ts

@@ -196,6 +196,14 @@ export const destroyShortCuts = () => {
   hotkeys.unbind(keys.join());
 };
 
+export const blobToDataURL = (blob: Blob): Promise<string> => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onloadend = () => resolve(reader.result as string);
+  reader.onerror = reject;
+  reader.readAsDataURL(blob);
+})
+
+
 const readFile = (file: File | null, type: 'text' | 'dataURL' | 'arrayBuffer') => {
   return new Promise<string | ArrayBuffer>((r) => {
     const fileReader = new FileReader();

package/src/i18n.ts

@@ -23,6 +23,9 @@ const dictEn = {
     'Cannot commit the change because the number of items has been changed.',
   commitBulkUpdateFieldName: 'Commit Changes',
   bulkUpdateFieldName: 'Bulk update field names',
+  barColor: 'Bar Color',
+  textColor: 'Text Color',
+  bgColor: 'Background Color',
 };
 
 const dictJa: { [key in keyof DictEn]: string } = {
@@ -45,6 +48,9 @@ const dictJa: { [key in keyof DictEn]: string } = {
   errorBulkUpdateFieldName: '項目数が変更されているため変更をコミットできません。',
   commitBulkUpdateFieldName: '変更を反映',
   bulkUpdateFieldName: '項目名を一括変更',
+  barColor: 'バーの色',
+  textColor: 'テキストの色',
+  bgColor: '背景色',
 };
 
 const dictAr: { [key in keyof DictEn]: string } = {
@@ -67,6 +73,9 @@ const dictAr: { [key in keyof DictEn]: string } = {
   errorBulkUpdateFieldName: 'لا يمكن تنفيذ التغيير لأنه تم تغيير عدد العناصر.',
   commitBulkUpdateFieldName: 'تنفيذ التغييرات',
   bulkUpdateFieldName: 'تغيير الأسماء',
+  barColor: 'لون الشريط',
+  textColor: 'لون الخط',
+  bgColor: 'لون الخلفية',
 };
 
 const dictTh: { [key in keyof DictEn]: string } = {
@@ -89,6 +98,34 @@ const dictTh: { [key in keyof DictEn]: string } = {
   errorBulkUpdateFieldName: 'ไม่สามารถยืนยันการแก้ไขได้เนื่องจากจำนวนรายการมีการเปลี่ยนแปลง',
   commitBulkUpdateFieldName: 'ยืนยันการแก้ไข',
   bulkUpdateFieldName: 'แก้ไขชื่อฟิลด์เป็นชุด',
+  barColor: 'สีบาร์',
+  textColor: 'สีข้อความ',
+  bgColor: 'สีพื้นหลัง',
+};
+
+const dictIt: { [key in keyof DictEn]: string } = {
+  cancel: 'Annulla',
+  field: 'Campo',
+  fieldName: 'Nome',
+  require: 'Richiesto',
+  uniq: 'Univoco',
+  inputExample: 'Testo di esempio',
+  edit: 'Modifica',
+  plsInputName: 'Inserisci il nome per favore',
+  fieldMustUniq: 'Il nome del campo non è univoco',
+  notUniq: '(Nome non univoco)',
+  noKeyName: 'Nessun nome',
+  fieldsList: 'Lista campi',
+  addNewField: 'Aggiungi un campo',
+  editField: 'Modifica campo',
+  type: 'Tipo',
+  errorOccurred: 'Riscontrato errore',
+  errorBulkUpdateFieldName: 'Non è possibile salvare le modifiche perché il numero di elementi è cambiato.',
+  commitBulkUpdateFieldName: 'Salva cambiamenti',
+  bulkUpdateFieldName: 'Modifica nomi campi in blocco',
+  barColor: 'Colore barra',
+  textColor: 'Colore testo',
+  bgColor: 'Colore sfondo',
 };
 
 const dictPl: {[key in keyof DictEn]: string} = {
@@ -111,7 +148,10 @@ const dictPl: {[key in keyof DictEn]: string} = {
   errorBulkUpdateFieldName:
     'Nie można wprowadzić zmian ponieważ liczba elementów uległa zmianie.',
   commitBulkUpdateFieldName: 'Zaakceptuj zmiany',
-  bulkUpdateFieldName: 'Masowo aktualizuj klucze pól', 
+  bulkUpdateFieldName: 'Masowo aktualizuj klucze pól',
+  barColor: 'Kolor paska',
+  textColor: 'Kolor tekstu',
+  bgColor: 'Kolor tła',
 }
 
 const i18n = (lang: Lang, key: keyof DictEn) => {
@@ -127,6 +167,9 @@ const i18n = (lang: Lang, key: keyof DictEn) => {
     case 'ja':
       return dictJa[key];
 
+    case 'it':
+      return dictIt[key];
+
     default:
       return dictEn[key];
   }

package/src/renders/barcodes.ts

@@ -0,0 +1,117 @@
+import type { RenderProps } from "../types"
+import type * as CSS from 'csstype';
+import { validateBarcodeInput, BarcodeSchema, createBarCode } from '@pdfme/common';
+import { blobToDataURL } from '../helper';
+
+const fullSize = { width: '100%', height: '100%' }
+
+const createErrorBarcodeElm = () => {
+    const container = document.createElement('div');
+    const containerStyle: CSS.Properties = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...fullSize,
+    }
+    Object.assign(container.style, containerStyle);
+
+    const span = document.createElement('span');
+    const spanStyle: CSS.Properties = {
+        color: 'white',
+        background: 'red',
+        padding: '0.25rem',
+        fontSize: '12pt',
+        fontWeight: 'bold',
+        borderRadius: '2px',
+    }
+    Object.assign(span.style, spanStyle);
+
+    span.textContent = 'ERROR';
+    container.appendChild(span);
+
+    return container;
+};
+
+const createBarcodeImage = async (schema: BarcodeSchema, value: string) => {
+    const imageBuf = await createBarCode({ ...schema, input: value });
+    const barcodeData = new Blob([new Uint8Array(imageBuf)], { type: 'image/png' });
+    const barcodeDataURL = await blobToDataURL(barcodeData);
+    return barcodeDataURL;
+}
+
+const createBarcodeImageElm = async (schema: BarcodeSchema, value: string) => {
+    const barcodeDataURL = await createBarcodeImage(schema, value);
+    const img = document.createElement('img');
+    img.src = barcodeDataURL;
+    const imgStyle: CSS.Properties = { ...fullSize, borderRadius: 0 }
+    Object.assign(img.style, imgStyle)
+    return img;
+}
+
+
+export const renderBarcode = async (arg: RenderProps) => {
+    const {
+        value,
+        rootElement,
+        mode,
+        onChange,
+        stopEditing,
+        tabIndex,
+        placeholder,
+    } = arg;
+    const schema = arg.schema as BarcodeSchema;
+
+    const container = document.createElement('div');
+    const containerStyle: CSS.Properties = {
+        ...fullSize,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontFamily: "'Open Sans', sans-serif",
+
+    }
+    Object.assign(container.style, containerStyle);
+    rootElement.appendChild(container);
+    const isForm = mode === 'form';
+    if (isForm) {
+        const input = document.createElement('input');
+        const inputStyle: CSS.Properties = {
+            ...fullSize,
+            position: 'absolute',
+            textAlign: 'center',
+            fontSize: '1rem',
+            color: '#000',
+            backgroundColor: isForm || value ? 'rgb(242 244 255 / 75%)' : 'none',
+            border: 'none',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'auto',
+
+        };
+        Object.assign(input.style, inputStyle);
+        input.value = value;
+        input.placeholder = placeholder || "";
+        input.tabIndex = tabIndex || 0;
+        input.addEventListener('change', (e: Event) => {
+            onChange && onChange((e.target as HTMLInputElement).value);
+        });
+        input.addEventListener('blur', () => {
+            stopEditing && stopEditing();
+        });
+        container.appendChild(input);
+        input.setSelectionRange(value.length, value.length);
+        input.focus();
+    }
+
+    if (!value) return;
+    try {
+        if (!validateBarcodeInput(schema.type, value)) throw new Error('Invalid barcode input');
+        const imgElm = await createBarcodeImageElm(schema, value)
+        container.appendChild(imgElm);
+    } catch (err) {
+        console.error(err);
+        const errorBarcodeElm = createErrorBarcodeElm();
+        container.appendChild(errorBarcodeElm);
+    }
+}

package/src/renders/image.ts

@@ -0,0 +1,101 @@
+import type { ChangeEvent } from 'react';
+import type * as CSS from 'csstype';
+import { ImageSchema } from '@pdfme/common';
+import type { RenderProps } from "../types"
+import { ZOOM } from '../constants';
+import { readFiles } from '../helper';
+
+const fullSize = { width: '100%', height: '100%' }
+export const renderImage = async (arg: RenderProps) => {
+    const {
+        value,
+        rootElement,
+        mode,
+        onChange,
+        stopEditing,
+        tabIndex,
+        placeholder,
+    } = arg;
+    const isForm = mode === 'form';
+
+    const schema = arg.schema as ImageSchema;
+
+    const size = { width: schema.width * ZOOM, height: schema.height * ZOOM };
+
+    const container = document.createElement('div');
+    const containerStyle: CSS.Properties = {
+        ...fullSize,
+        backgroundImage: value ? 'none' : `url(${placeholder})`,
+        backgroundSize: `${size.width}px ${size.height}px`,
+    }
+    Object.assign(container.style, containerStyle);
+    container.addEventListener('click', (e) => {
+        if (isForm) {
+            e.stopPropagation();
+        }
+    });
+    rootElement.appendChild(container);
+
+    // image tag
+    if (value) {
+        const img = document.createElement('img');
+        const imgStyle: CSS.Properties = { height: '100%', width: '100%', borderRadius: 0 }
+        Object.assign(img.style, imgStyle);
+        img.src = value;
+        container.appendChild(img);
+    }
+
+    // remove button
+    if (value && isForm) {
+        const button = document.createElement('button');
+        button.textContent = 'x';
+        const buttonStyle: CSS.Properties = {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: 1,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: '#333',
+            background: '#f2f2f2',
+            borderRadius: '2px',
+            border: '1px solid #767676',
+            cursor: 'pointer',
+            height: '24px',
+            width: '24px',
+        }
+        Object.assign(button.style, buttonStyle);
+        button.addEventListener('click', () => {
+            onChange && onChange('');
+        });
+        container.appendChild(button);
+    }
+
+    // file input
+    const label = document.createElement('label');
+    const labelStyle: CSS.Properties = {
+        ...fullSize,
+        display: isForm ? 'flex' : 'none',
+        position: 'absolute',
+        top: 0,
+        backgroundColor: isForm || value ? 'rgb(242 244 255 / 75%)' : 'none',
+        cursor: 'pointer',
+    }
+    Object.assign(label.style, labelStyle);
+    container.appendChild(label);
+
+
+    const input = document.createElement('input');
+    const inputStyle: CSS.Properties = { ...fullSize, position: 'absolute', top: '50%' }
+    Object.assign(input.style, inputStyle);
+    input.tabIndex = tabIndex || 0;
+    input.type = 'file';
+    input.accept = 'image/jpeg, image/png';
+    input.addEventListener('change', (event: Event) => {
+        const changeEvent = event as unknown as ChangeEvent<HTMLInputElement>;
+        readFiles(changeEvent.target.files, 'dataURL').then((result) => onChange && onChange(result as string))
+    });
+    input.addEventListener('blur', () => stopEditing && stopEditing());
+    label.appendChild(input);
+}

package/src/renders/text.ts

@@ -0,0 +1,138 @@
+import type * as CSS from 'csstype';
+import type { RenderProps } from "../types"
+import {
+    DEFAULT_FONT_SIZE,
+    DEFAULT_ALIGNMENT,
+    VERTICAL_ALIGN_TOP,
+    VERTICAL_ALIGN_MIDDLE,
+    VERTICAL_ALIGN_BOTTOM,
+    DEFAULT_VERTICAL_ALIGNMENT,
+    DEFAULT_LINE_HEIGHT,
+    DEFAULT_CHARACTER_SPACING,
+    DEFAULT_FONT_COLOR,
+    TextSchema,
+    calculateDynamicFontSize,
+    getFontKitFont,
+    getDefaultFont,
+    getBrowserVerticalFontAdjustments,
+} from '@pdfme/common';
+
+const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
+    switch (verticalAlignmentValue) {
+        case VERTICAL_ALIGN_TOP:
+            return 'flex-start';
+        case VERTICAL_ALIGN_MIDDLE:
+            return 'center';
+        case VERTICAL_ALIGN_BOTTOM:
+            return 'flex-end';
+    }
+    return 'flex-start';
+};
+
+export const renderText = async (arg: RenderProps) => {
+    const {
+        value,
+        rootElement,
+        mode,
+        onChange,
+        stopEditing,
+        tabIndex,
+        placeholder,
+        options,
+    } = arg;
+
+    const schema = arg.schema as TextSchema;
+
+    const font = options?.font || getDefaultFont();
+
+    let dynamicFontSize: undefined | number = undefined;
+    if (schema.dynamicFontSize && value) {
+        dynamicFontSize = await calculateDynamicFontSize({
+            textSchema: schema,
+            font,
+            value,
+            startingFontSize: dynamicFontSize,
+        })
+    }
+
+
+    const fontKitFont = await getFontKitFont(schema, font)
+    // Depending on vertical alignment, we need to move the top or bottom of the font to keep
+    // it within it's defined box and align it with the generated pdf.
+    const { topAdj, bottomAdj } = getBrowserVerticalFontAdjustments(
+        fontKitFont,
+        dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE,
+        schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
+        schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
+    );
+
+    const topAdjustment = topAdj;
+    const bottomAdjustment = bottomAdj;
+
+    const container = document.createElement('div');
+    const containerStyle: CSS.Properties = {
+        padding: 0,
+        resize: 'none',
+        backgroundColor: value && schema.backgroundColor ? schema.backgroundColor : 'rgb(242 244 255 / 75%)',
+        border: 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
+        width: '100%',
+        height: '100%',
+    };
+    Object.assign(container.style, containerStyle);
+    rootElement.innerHTML = '';
+    rootElement.appendChild(container);
+
+
+    const fontStyles: CSS.Properties = {
+        fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
+        color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
+        fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
+        letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
+        lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
+        textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+    };
+
+    if (mode === 'form') {
+        const textarea = document.createElement('textarea');
+        const textareaStyle: CSS.Properties = {
+            padding: 0,
+            resize: 'none',
+            border: 'none',
+            outline: 'none',
+            paddingTop: topAdjustment + 'px',
+            background: 'none',
+            width: '100%',
+            height: '100%',
+        };
+        Object.assign(textarea.style, textareaStyle, fontStyles);
+        textarea.rows = 1;
+        textarea.placeholder = placeholder || "";
+        textarea.tabIndex = tabIndex || 0;
+
+        textarea.addEventListener('change', (e: Event) => onChange && onChange((e.target as HTMLTextAreaElement).value));
+        textarea.addEventListener('blur', () => stopEditing && stopEditing());
+        textarea.value = value;
+        container.appendChild(textarea);
+        textarea.setSelectionRange(value.length, value.length);
+        textarea.focus();
+    } else {
+        const div = document.createElement('div');
+        const divStyle: CSS.Properties = {
+            ...fontStyles,
+            marginBottom: bottomAdjustment + 'px',
+            paddingTop: topAdjustment + 'px',
+        };
+        Object.assign(div.style, divStyle);
+        div.innerHTML = value.split('').map((l: string, i: number) => (
+            `<span style="letter-spacing:${String(value).length === i + 1 ? 0 : 'inherit'};">${l}</span>`
+        )).join('');
+
+        container.appendChild(div);
+
+    }
+}

package/src/types.ts

@@ -0,0 +1,28 @@
+
+import type { UIOptions, SchemaForUI } from '@pdfme/common';
+
+interface RenderBaseProps {
+    schema: SchemaForUI;
+    mode: 'viewer' | 'form';
+    tabIndex?: number;
+    placeholder?: string;
+    stopEditing?: () => void;
+
+}
+
+export type RendererProps = RenderBaseProps & {
+    onChange: (value: string) => void;
+    outline: string;
+    onChangeHoveringSchemaId?: (id: string | null) => void;
+}
+
+export type RenderProps = RenderBaseProps & {
+    onChange?: (value: string) => void;
+    value: string;
+    rootElement: HTMLDivElement,
+    options: UIOptions;
+}
+
+export interface Renderer {
+    [key: string]: { render: (arg: RenderProps) => Promise<void> } | undefined;
+}

package/dist/types/components/Schemas/BarcodeSchema.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { SchemaUIProps } from './SchemaUI';
-declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
-    schema: {
-        type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce" | "gs1datamatrix";
-        height: number;
-        width: number;
-        position: {
-            x: number;
-            y: number;
-        };
-        rotate?: number | undefined;
-    };
-} & React.RefAttributes<HTMLInputElement>>;
-export default _default;

package/dist/types/components/Schemas/ImageSchema.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { SchemaUIProps } from './SchemaUI';
-declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
-    schema: {
-        type: "image";
-        height: number;
-        width: number;
-        position: {
-            x: number;
-            y: number;
-        };
-        rotate?: number | undefined;
-    };
-} & React.RefAttributes<HTMLInputElement>>;
-export default _default;

package/dist/types/components/Schemas/SchemaUI.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { SchemaForUI } from '@pdfme/common';
-export interface SchemaUIProps {
-    schema: SchemaForUI;
-    editable: boolean;
-    onChange: (value: string) => void;
-    onStopEditing: () => void;
-    tabIndex?: number;
-    placeholder?: string;
-}
-declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
-    outline: string;
-    onChangeHoveringSchemaId?: ((id: string | null) => void) | undefined;
-} & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
-export default _default;

package/dist/types/components/Schemas/TextSchema.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-import { SchemaUIProps } from './SchemaUI';
-declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
-    schema: {
-        type: "text";
-        height: number;
-        width: number;
-        position: {
-            x: number;
-            y: number;
-        };
-        rotate?: number | undefined;
-        alignment?: "center" | "left" | "right" | undefined;
-        fontSize?: number | undefined;
-        fontName?: string | undefined;
-        fontColor?: string | undefined;
-        backgroundColor?: string | undefined;
-        characterSpacing?: number | undefined;
-        lineHeight?: number | undefined;
-        dynamicFontSize?: {
-            max: number;
-            min: number;
-            fit?: string | undefined;
-        } | undefined;
-    };
-} & React.RefAttributes<HTMLTextAreaElement>>;
-export default _default;