@pdfme/schemas 3.1.5-dev.11 → 3.1.5-dev.13

package/dist/esm/src/uiRenderUtils.js

@@ -0,0 +1,25 @@
+export const readFile = (input) => new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+    fileReader.onload = (e) => {
+        if (e.target?.result) {
+            resolve(e.target.result);
+        }
+    };
+    fileReader.onerror = (e) => {
+        reject(new Error('[@pdfme/schemas] File reading failed'));
+    };
+    let file = null;
+    if (input instanceof FileList && input.length > 0) {
+        file = input[0];
+    }
+    else if (input instanceof File) {
+        file = input;
+    }
+    if (file) {
+        fileReader.readAsDataURL(file);
+    }
+    else {
+        reject(new Error('[@pdfme/schemas] No files provided'));
+    }
+});
+//# sourceMappingURL=uiRenderUtils.js.map

package/dist/esm/src/uiRenderUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiRenderUtils.js","sourceRoot":"","sources":["../../../src/uiRenderUtils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAA6B,EAAiC,EAAE,CACvF,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;IAC9B,MAAM,UAAU,GAAG,IAAI,UAAU,EAAE,CAAC;IAEpC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE;QACxB,IAAI,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE;YACpB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SAC1B;IACH,CAAC,CAAC;IAEF,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE;QACzB,MAAM,CAAC,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,IAAI,IAAI,GAAgB,IAAI,CAAC;IAC7B,IAAI,KAAK,YAAY,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACjD,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;KACjB;SAAM,IAAI,KAAK,YAAY,IAAI,EAAE;QAChC,IAAI,GAAG,KAAK,CAAC;KACd;IAED,IAAI,IAAI,EAAE;QACR,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;KAChC;SAAM;QACL,MAAM,CAAC,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC,CAAC;KACzD;AACH,CAAC,CAAC,CAAC"}

package/dist/types/src/{image/index.d.ts → graphics/image.d.ts}

@@ -1,4 +1,6 @@
 import type { Plugin } from '@pdfme/common';
-import type { ImageSchema } from './types';
+import type { Schema } from '@pdfme/common';
+interface ImageSchema extends Schema {
+}
 declare const schema: Plugin<ImageSchema>;
 export default schema;

package/dist/types/src/index.d.ts

@@ -1,9 +1,10 @@
 import text from './text/index.js';
-import image from './image/index.js';
+import image from './graphics/image.js';
 import barcodes from './barcodes/index.js';
-import line from './line/index.js';
-import { convertForPdfLayoutProps, rotatePoint } from './renderUtils.js';
+import line from './shapes/line.js';
+import { rectangle, ellipse } from './shapes/rectAndEllipse.js';
+import { convertForPdfLayoutProps, rotatePoint } from './pdfRenderUtils.js';
 declare const builtInPlugins: {
     Text: import("@pdfme/common").Plugin<import("./text/types.js").TextSchema>;
 };
-export { text, image, barcodes, line, builtInPlugins, convertForPdfLayoutProps, rotatePoint };
+export { text, image, barcodes, line, rectangle, ellipse, builtInPlugins, convertForPdfLayoutProps, rotatePoint, };

package/dist/types/src/shapes/line.d.ts

@@ -0,0 +1,6 @@
+import type { Schema, Plugin } from '@pdfme/common';
+interface LineSchema extends Schema {
+    color: string;
+}
+declare const schema: Plugin<LineSchema>;
+export default schema;

package/dist/types/src/shapes/rectAndEllipse.d.ts

@@ -0,0 +1,138 @@
+import { Schema } from '@pdfme/common';
+interface Shape extends Schema {
+    type: 'ellipse' | 'rectangle';
+    borderWidth: number;
+    borderColor: string;
+    color: string;
+}
+export declare const rectangle: {
+    propPanel: {
+        defaultSchema: {
+            type: "ellipse" | "rectangle";
+            borderWidth: number;
+            borderColor: string;
+            color: string;
+            position: {
+                x: number;
+                y: number;
+            };
+            width: number;
+            height: number;
+            readOnly?: boolean | undefined;
+            rotate?: number | undefined;
+            opacity?: number | undefined;
+        };
+        schema: ((propPanelProps: Omit<{
+            rootElement: HTMLDivElement;
+            activeSchema: {
+                width: number;
+                height: number;
+                type: string;
+                position: {
+                    x: number;
+                    y: number;
+                };
+                data: string;
+                id: string;
+                key: string;
+                opacity?: number | undefined;
+                rotate?: number | undefined;
+                readOnly?: boolean | undefined;
+            };
+            activeElements: HTMLElement[];
+            changeSchemas: import("@pdfme/common").ChangeSchemas;
+            schemas: {
+                width: number;
+                height: number;
+                type: string;
+                position: {
+                    x: number;
+                    y: number;
+                };
+                data: string;
+                id: string;
+                key: string;
+                opacity?: number | undefined;
+                rotate?: number | undefined;
+                readOnly?: boolean | undefined;
+            }[];
+            pageSize: {
+                width: number;
+                height: number;
+            };
+            options: import("@pdfme/common").UIOptions;
+            theme: import("antd").GlobalToken;
+            i18n: (key: string) => string;
+        }, "rootElement">) => Record<string, Partial<import("form-render").SchemaBase>>) | Record<string, Partial<import("form-render").SchemaBase>>;
+        widgets?: Record<string, (props: import("@pdfme/common").PropPanelWidgetProps) => void> | undefined;
+        defaultValue: string;
+    };
+    pdf: (arg: import("@pdfme/common").PDFRenderProps<Shape>) => void | Promise<void>;
+    ui: (arg: import("@pdfme/common").UIRenderProps<Shape>) => void | Promise<void>;
+};
+export declare const ellipse: {
+    propPanel: {
+        defaultSchema: {
+            type: "ellipse" | "rectangle";
+            borderWidth: number;
+            borderColor: string;
+            color: string;
+            position: {
+                x: number;
+                y: number;
+            };
+            width: number;
+            height: number;
+            readOnly?: boolean | undefined;
+            rotate?: number | undefined;
+            opacity?: number | undefined;
+        };
+        schema: ((propPanelProps: Omit<{
+            rootElement: HTMLDivElement;
+            activeSchema: {
+                width: number;
+                height: number;
+                type: string;
+                position: {
+                    x: number;
+                    y: number;
+                };
+                data: string;
+                id: string;
+                key: string;
+                opacity?: number | undefined;
+                rotate?: number | undefined;
+                readOnly?: boolean | undefined;
+            };
+            activeElements: HTMLElement[];
+            changeSchemas: import("@pdfme/common").ChangeSchemas;
+            schemas: {
+                width: number;
+                height: number;
+                type: string;
+                position: {
+                    x: number;
+                    y: number;
+                };
+                data: string;
+                id: string;
+                key: string;
+                opacity?: number | undefined;
+                rotate?: number | undefined;
+                readOnly?: boolean | undefined;
+            }[];
+            pageSize: {
+                width: number;
+                height: number;
+            };
+            options: import("@pdfme/common").UIOptions;
+            theme: import("antd").GlobalToken;
+            i18n: (key: string) => string;
+        }, "rootElement">) => Record<string, Partial<import("form-render").SchemaBase>>) | Record<string, Partial<import("form-render").SchemaBase>>;
+        widgets?: Record<string, (props: import("@pdfme/common").PropPanelWidgetProps) => void> | undefined;
+        defaultValue: string;
+    };
+    pdf: (arg: import("@pdfme/common").PDFRenderProps<Shape>) => void | Promise<void>;
+    ui: (arg: import("@pdfme/common").UIRenderProps<Shape>) => void | Promise<void>;
+};
+export {};

package/dist/types/src/uiRenderUtils.d.ts

@@ -0,0 +1 @@
+export declare const readFile: (input: File | FileList | null) => Promise<string | ArrayBuffer>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/schemas",
-  "version": "3.1.5-dev.11",
+  "version": "3.1.5-dev.13",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/barcodes/pdfRender.ts

@@ -1,5 +1,5 @@
 import { PDFRenderProps } from '@pdfme/common';
-import { convertForPdfLayoutProps } from '../renderUtils.js';
+import { convertForPdfLayoutProps } from '../pdfRenderUtils.js';
 import type { BarcodeSchema } from './types';
 import { createBarCode, validateBarcodeInput } from './helper.js';
 

package/src/barcodes/uiRender.ts

@@ -2,7 +2,7 @@ import type * as CSS from 'csstype';
 import { UIRenderProps } from '@pdfme/common';
 import type { BarcodeSchema } from './types';
 import { validateBarcodeInput, createBarCode } from './helper.js';
-import { addAlphaToHex, isEditable } from '../renderUtils.js';
+import { addAlphaToHex, isEditable } from '../pdfRenderUtils.js';
 
 const fullSize = { width: '100%', height: '100%' };
 

package/src/graphics/image.ts

@@ -0,0 +1,151 @@
+import type { ChangeEvent } from 'react';
+import type { Plugin } from '@pdfme/common';
+import type { PDFRenderProps, Schema } from '@pdfme/common';
+import type * as CSS from 'csstype';
+import { UIRenderProps, ZOOM } from '@pdfme/common';
+import { convertForPdfLayoutProps, addAlphaToHex, isEditable } from '../pdfRenderUtils.js';
+import { readFile } from '../uiRenderUtils.js';
+import { DEFAULT_OPACITY } from '../constants.js';
+
+const getCacheKey = (schema: Schema, input: string) => `${schema.type}${input}`;
+const fullSize = { width: '100%', height: '100%' };
+const defaultValue =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAALuAQMAAADL0wGJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURbzAw+rv8fKruy0AAAPoSURBVHja7dwxbtwwEEBRCkKwRQodYftcYk+ROkcJz5NTsEuZK/AIKlIQAUEnke0VqQ0pA5zxWvFnZcD2s0CNuENxPOZBc0QDDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PD/+P8bkxvnTzzjTG0M2b5rh08rHNT518aPOnTt63+aGTd23edPJ2h//ax+/oO6Gzx6c78+cuPu7x01vmwx5/6uLnO/PjO+b/rGifvtWH3VnT9vmh/e3eqx/bc9d79af2YwEPDw8P/6r8r1GVt5VcUoZPtXxGhp9rGYEM72vbEBne1hJ5Gb6ayIvwqZppi/CxmgqL8KGaTIrwc3WDfATeV/ffIryr7r+PwNvq/vsIfH17D5/qbw/gb/mLKp/OqnycFPj14yqcJPm4vfp5VJ0cP6jyzqjy9rr2q/Dr4qzBp3V5E1wxp/V3rl8LXn32qF6fAY31Psv2NXi/5lQaH+Vuzak0eLsmPRppVPa3FPiU3QiFFDZmD4FCAh6yxV+Bn7O9isLmx2d/TGHr5rI7obDxtFkcKWyb89M2+U1/sX7Kv7Io8gaxFy5l2D/faRk++3x6PgsalV52+fwUW4j/+eGhDPuneyH/otHmp9jyfHHMLM6n4phZnI/FObA4H4qDWnF+Lo46xXlflG+I864o3xDnbVG+Ic6X9RXSfCrrK6T5WBZASPOhrFCQ5ufyjF+a92XdkjTvyrolad6WdUvS/KawSI7/sQn7JfDl+O+bsF8CX44fN2FvHnNnIT4Nm7BfAl+ON5uwXwJfjA/LCuk2BXvCvN0U7InxflmAtxV1gvx0U2N3luPtdZOlwj/FoR5vbuq85Pi48F6LD0scOk3+sq1cleP9ohlNfkpq/N9pGaMuH7T4ZVqGWYt/nBavyxstftblfaVIWJU/y72yODCfzJH5oMvPh+adLm+PzCdzZD5U/61ClT9Lnvyo8e7QvFHlE3ydj0zOu5ucickhcpgcJofJedUVk8j5b/nGgIeHh4d/I3x/RwLlhgfNH3DavSwGXf7YjT76uqCEQ/P37p9z7uKVmwspd17S7hul3PXK6fbsmnvWhO6GZlMnn3ri8gXN5GzHnX0B35ydj91814CHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHl+d/A9cKjmiL040TAAAAAElFTkSuQmCC';
+
+interface ImageSchema extends Schema {}
+
+const schema: Plugin<ImageSchema> = {
+  pdf: async (arg: PDFRenderProps<ImageSchema>) => {
+    const { value, schema, pdfDoc, page, _cache } = arg;
+    if (!value || !value.startsWith('data:image/')) return;
+
+    const inputImageCacheKey = getCacheKey(schema, value);
+    let image = _cache.get(inputImageCacheKey);
+    if (!image) {
+      const isPng = value.startsWith('data:image/png;');
+      image = await (isPng ? pdfDoc.embedPng(value) : pdfDoc.embedJpg(value));
+      _cache.set(inputImageCacheKey, image);
+    }
+
+    const pageHeight = page.getHeight();
+    const {
+      width,
+      height,
+      rotate,
+      position: { x, y },
+      opacity,
+    } = convertForPdfLayoutProps({ schema, pageHeight });
+
+    page.drawImage(image, { x, y, rotate, width, height, opacity });
+  },
+  ui: (arg: UIRenderProps<ImageSchema>) => {
+    const {
+      value,
+      rootElement,
+      mode,
+      onChange,
+      stopEditing,
+      tabIndex,
+      placeholder,
+      schema,
+      theme,
+    } = arg;
+    const editable = isEditable(mode);
+    const isDefault = value === defaultValue;
+
+    const size = { width: schema.width * ZOOM, height: schema.height * ZOOM };
+
+    const container = document.createElement('div');
+    const backgroundStyle = placeholder ? `url(${placeholder})` : 'none';
+    const containerStyle: CSS.Properties = {
+      ...fullSize,
+      backgroundImage: value ? 'none' : backgroundStyle,
+      backgroundSize: `${size.width}px ${size.height}px`,
+    };
+    Object.assign(container.style, containerStyle);
+    container.addEventListener('click', (e) => {
+      if (editable) {
+        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 && !isDefault && editable) {
+      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
+    if ((!value || isDefault) && editable) {
+      const label = document.createElement('label');
+      const labelStyle: CSS.Properties = {
+        ...fullSize,
+        display: editable ? 'flex' : 'none',
+        position: 'absolute',
+        top: 0,
+        backgroundColor: editable || value ? addAlphaToHex(theme.colorPrimaryBg, 30) : '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>;
+        readFile(changeEvent.target.files).then((result) => onChange && onChange(result as string));
+      });
+      input.addEventListener('blur', () => stopEditing && stopEditing());
+      label.appendChild(input);
+    }
+  },
+  propPanel: {
+    schema: {},
+    defaultValue,
+    defaultSchema: {
+      type: 'image',
+      position: { x: 0, y: 0 },
+      width: 40,
+      height: 40,
+      // If the value of "rotate" is set to undefined or not set at all, rotation will be disabled in the UI.
+      // Check this document: https://pdfme.com//docs/custom-schemas#learning-how-to-create-from-pdfmeschemas-code
+      rotate: 0,
+      opacity: DEFAULT_OPACITY,
+    },
+  },
+};
+export default schema;

package/src/index.ts

@@ -1,9 +1,20 @@
 import text from './text/index.js';
-import image from './image/index.js';
+import image from './graphics/image.js';
 import barcodes from './barcodes/index.js';
-import line from './line/index.js';
-import { convertForPdfLayoutProps, rotatePoint } from './renderUtils.js';
+import line from './shapes/line.js';
+import { rectangle, ellipse } from './shapes/rectAndEllipse.js';
+import { convertForPdfLayoutProps, rotatePoint } from './pdfRenderUtils.js';
 
 const builtInPlugins = { Text: text };
 
-export { text, image, barcodes, line, builtInPlugins, convertForPdfLayoutProps, rotatePoint };
+export {
+  text,
+  image,
+  barcodes,
+  line,
+  rectangle,
+  ellipse,
+  builtInPlugins,
+  convertForPdfLayoutProps,
+  rotatePoint,
+};

package/src/{renderUtils.ts → pdfRenderUtils.ts}

@@ -32,10 +32,7 @@ export const convertForPdfLayoutProps = ({
   }
 
   return {
-    position: {
-      x: x,
-      y: y,
-    },
+    position: { x, y },
     height: height,
     width: width,
     rotate: degrees(rotateDegrees),

package/src/shapes/line.ts

@@ -0,0 +1,67 @@
+import type { Schema, Plugin, PDFRenderProps, UIRenderProps } from '@pdfme/common';
+import { rotatePoint, convertForPdfLayoutProps, hex2RgbColor } from '../pdfRenderUtils.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+
+const DEFAULT_LINE_COLOR = '#000000';
+
+interface LineSchema extends Schema {
+  color: string;
+}
+
+const schema: Plugin<LineSchema> = {
+  pdf: (arg: PDFRenderProps<LineSchema>) => {
+    const { page, schema } = arg;
+    const pageHeight = page.getHeight();
+    const {
+      width,
+      height,
+      rotate,
+      position: { x, y },
+      opacity,
+    } = convertForPdfLayoutProps({ schema, pageHeight, applyRotateTranslate: false });
+    const pivot = { x: x + width / 2, y: y + height / 2 };
+    page.drawLine({
+      start: rotatePoint({ x, y: y + height / 2 }, pivot, rotate.angle),
+      end: rotatePoint({ x: x + width, y: y + height / 2 }, pivot, rotate.angle),
+      thickness: height,
+      color: hex2RgbColor(schema.color ?? DEFAULT_LINE_COLOR),
+      opacity: opacity,
+    });
+  },
+  ui: (arg: UIRenderProps<LineSchema>) => {
+    const { schema, rootElement } = arg;
+    const div = document.createElement('div');
+    div.style.backgroundColor = schema.color ?? DEFAULT_LINE_COLOR;
+    div.style.width = '100%';
+    div.style.height = '100%';
+    rootElement.appendChild(div);
+  },
+  propPanel: {
+    schema: ({ i18n }) => ({
+      color: {
+        title: i18n('schemas.color'),
+        type: 'string',
+        widget: 'color',
+        required: true,
+        rules: [
+          {
+            pattern: HEX_COLOR_PATTERN,
+            message: i18n('hexColorPrompt'),
+          },
+        ],
+      },
+    }),
+    defaultValue: '',
+    defaultSchema: {
+      type: 'line',
+      position: { x: 0, y: 0 },
+      width: 50,
+      height: 1,
+      rotate: 0,
+      opacity: 1,
+      readOnly: true,
+      color: DEFAULT_LINE_COLOR,
+    },
+  },
+};
+export default schema;

package/src/shapes/rectAndEllipse.ts

@@ -0,0 +1,110 @@
+import { Plugin, Schema, mm2pt } from '@pdfme/common';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+import { hex2RgbColor, convertForPdfLayoutProps } from '../pdfRenderUtils.js';
+
+interface Shape extends Schema {
+  type: 'ellipse' | 'rectangle';
+  borderWidth: number;
+  borderColor: string;
+  color: string;
+}
+
+const shape: Plugin<Shape> = {
+  ui: (arg) => {
+    const { schema, rootElement } = arg;
+    const div = document.createElement('div');
+    div.style.width = '100%';
+    div.style.height = '100%';
+    div.style.boxSizing = 'border-box';
+    if (schema.type === 'ellipse') {
+      div.style.borderRadius = '50%';
+    }
+    div.style.borderWidth = `${schema.borderWidth ?? 0}mm`;
+    div.style.borderStyle = schema.borderWidth && schema.borderColor ? 'solid' : 'none';
+    div.style.borderColor = schema.borderColor ?? 'transparent';
+    div.style.backgroundColor = schema.color ?? 'transparent';
+
+    rootElement.appendChild(div);
+  },
+  pdf: (arg) => {
+    const { schema, page } = arg;
+    const pageHeight = page.getHeight();
+    const cArg = { schema, pageHeight };
+    const { position, width, height, rotate, opacity } = convertForPdfLayoutProps(cArg);
+    const {
+      position: { x: x4Ellipse, y: y4Ellipse },
+    } = convertForPdfLayoutProps({ ...cArg, applyRotateTranslate: false });
+    const borderWidth = schema.borderWidth ? mm2pt(schema.borderWidth) : 0;
+
+    const drawOptions = {
+      rotate,
+      borderWidth,
+      borderColor: hex2RgbColor(schema.borderColor),
+      color: hex2RgbColor(schema.color),
+      opacity,
+      borderOpacity: opacity,
+    };
+    if (schema.type === 'ellipse') {
+      page.drawEllipse({
+        x: x4Ellipse + width / 2,
+        y: y4Ellipse + height / 2,
+        xScale: width / 2 - borderWidth / 2,
+        yScale: height / 2 - borderWidth / 2,
+        ...drawOptions,
+      });
+    } else if (schema.type === 'rectangle') {
+      page.drawRectangle({
+        x: position.x + borderWidth / 2,
+        y: position.y + borderWidth / 2,
+        width: width - borderWidth,
+        height: height - borderWidth,
+        ...drawOptions,
+      });
+    }
+  },
+  propPanel: {
+    schema: ({ i18n }) => ({
+      borderWidth: {
+        title: i18n('schemas.borderWidth'),
+        type: 'number',
+        widget: 'inputNumber',
+        min: 0,
+        step: 1,
+      },
+      borderColor: {
+        title: i18n('schemas.borderColor'),
+        type: 'string',
+        widget: 'color',
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+      },
+      color: {
+        title: i18n('schemas.color'),
+        type: 'string',
+        widget: 'color',
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+      },
+    }),
+    defaultValue: '',
+    defaultSchema: {
+      type: 'rectangle',
+      position: { x: 0, y: 0 },
+      width: 62.5,
+      height: 37.5,
+      rotate: 0,
+      opacity: 1,
+      borderWidth: 5,
+      borderColor: '#000000',
+      color: '#ffffff',
+      readOnly: true,
+    },
+  },
+};
+
+const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
+  ...shape.propPanel,
+  defaultSchema: { ...shape.propPanel.defaultSchema, type },
+});
+
+export const rectangle = { ...shape, propPanel: getPropPanelSchema('rectangle') };
+
+export const ellipse = { ...shape, propPanel: getPropPanelSchema('ellipse') };

package/src/text/pdfRender.ts

@@ -20,7 +20,7 @@ import {
   getSplittedLines,
   widthOfTextAtSize,
 } from './helper.js';
-import { convertForPdfLayoutProps, rotatePoint, hex2RgbColor } from '../renderUtils.js';
+import { convertForPdfLayoutProps, rotatePoint, hex2RgbColor } from '../pdfRenderUtils.js';
 
 const embedAndGetFontObj = async (arg: {
   pdfDoc: PDFDocument;

package/src/text/uiRender.ts

@@ -18,7 +18,7 @@ import {
   getFontKitFont,
   getBrowserVerticalFontAdjustments,
 } from './helper.js';
-import { addAlphaToHex, isEditable } from '../renderUtils.js';
+import { addAlphaToHex, isEditable } from '../pdfRenderUtils.js';
 
 const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   switch (verticalAlignmentValue) {

package/src/uiRenderUtils.ts

@@ -0,0 +1,27 @@
+export const readFile = (input: File | FileList | null): Promise<string | ArrayBuffer> =>
+  new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+
+    fileReader.onload = (e) => {
+      if (e.target?.result) {
+        resolve(e.target.result);
+      }
+    };
+
+    fileReader.onerror = (e) => {
+      reject(new Error('[@pdfme/schemas] File reading failed'));
+    };
+
+    let file: File | null = null;
+    if (input instanceof FileList && input.length > 0) {
+      file = input[0];
+    } else if (input instanceof File) {
+      file = input;
+    }
+
+    if (file) {
+      fileReader.readAsDataURL(file);
+    } else {
+      reject(new Error('[@pdfme/schemas] No files provided'));
+    }
+  });

package/dist/cjs/src/image/index.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const pdfRender_js_1 = require("./pdfRender.js");
-const propPanel_js_1 = require("./propPanel.js");
-const uiRender_js_1 = require("./uiRender.js");
-const schema = { pdf: pdfRender_js_1.pdfRender, ui: uiRender_js_1.uiRender, propPanel: propPanel_js_1.propPanel };
-exports.default = schema;
-//# sourceMappingURL=index.js.map

package/dist/cjs/src/image/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/image/index.ts"],"names":[],"mappings":";;AACA,iDAA2C;AAC3C,iDAA2C;AAC3C,+CAAyC;AAGzC,MAAM,MAAM,GAAwB,EAAE,GAAG,EAAE,wBAAS,EAAE,EAAE,EAAE,sBAAQ,EAAE,SAAS,EAAT,wBAAS,EAAE,CAAC;AAChF,kBAAe,MAAM,CAAC"}