@pdfme/schemas 3.1.5-dev.9 → 3.2.0

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

@@ -0,0 +1,144 @@
+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;
+            readOnlyValue?: string | 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;
+                readOnlyValue?: string | 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;
+                readOnlyValue?: string | 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;
+            readOnlyValue?: string | 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;
+                readOnlyValue?: string | 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;
+                readOnlyValue?: string | 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/text/index.d.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from '@pdfme/common';
 import type { TextSchema } from './types';
-declare const schema: Plugin<TextSchema>;
-export default schema;
+declare const textSchema: Plugin<TextSchema>;
+export default textSchema;
+export declare const readOnlyText: Plugin<TextSchema>;

package/dist/types/src/text/pdfRender.d.ts

@@ -1,3 +1,3 @@
-import { PDFRenderProps } from '@pdfme/common';
 import type { TextSchema } from './types';
+import { PDFRenderProps } from '@pdfme/common';
 export declare const pdfRender: (arg: PDFRenderProps<TextSchema>) => Promise<void>;

package/dist/types/src/{renderUtils.d.ts → utils.d.ts}

@@ -24,5 +24,7 @@ export declare const rotatePoint: (point: {
     y: number;
 };
 export declare const addAlphaToHex: (hex: string, alphaPercentage: number) => string;
-export declare const isEditable: (mode: Mode) => boolean;
+export declare const isEditable: (mode: Mode, schema: Schema) => boolean;
 export declare const hex2RgbColor: (hexString: string | undefined) => import("@pdfme/pdf-lib").RGB | undefined;
+export declare const readFile: (input: File | FileList | null) => Promise<string | ArrayBuffer>;
+export declare const createErrorElm: () => HTMLDivElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/schemas",
-  "version": "3.1.5-dev.9",
+  "version": "3.2.0",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -32,7 +32,7 @@
     }
   },
   "scripts": {
-    "develop": "tsc -p tsconfig.esm.json -w",
+    "dev": "tsc -p tsconfig.esm.json -w",
     "build": "npm-run-all --parallel build:cjs build:esm",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:esm": "tsc -p tsconfig.esm.json",
@@ -43,8 +43,9 @@
     "prettier": "prettier --write 'src/**/*.ts'"
   },
   "dependencies": {
-    "@pdfme/pdf-lib": "^1.17.3",
+    "@pdfme/pdf-lib": "^1.18.3",
     "bwip-js": "^4.1.1",
+    "fast-xml-parser": "^4.3.2",
     "fontkit": "^2.0.2"
   },
   "devDependencies": {

package/src/barcodes/index.ts

@@ -5,7 +5,7 @@ import type { BarcodeSchema, BarcodeTypes } from './types';
 import { BARCODE_TYPES } from './constants.js';
 import { Plugin } from '@pdfme/common';
 
-const schemas = BARCODE_TYPES.reduce(
+const barcodes = BARCODE_TYPES.reduce(
   (acc, type) =>
     Object.assign(acc, {
       [type]: { pdf: pdfRender, ui: uiRender, propPanel: getPropPanelByBarcodeType(type) },
@@ -13,4 +13,4 @@ const schemas = BARCODE_TYPES.reduce(
   {} as Record<BarcodeTypes, Plugin<BarcodeSchema>>
 );
 
-export default schemas;
+export default barcodes;

package/src/barcodes/pdfRender.ts

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

package/src/barcodes/propPanel.ts

@@ -154,7 +154,7 @@ export const getPropPanelByBarcodeType = (barcodeType: string): PropPanel<Barcod
 
   const defaults = barcodeDefaults.find(({ defaultSchema }) => defaultSchema.type === barcodeType);
 
-  if (!defaults) throw new Error(`[@pdfme/schemas] No default for barcode type ${barcodeType}`);
+  if (!defaults) throw new Error(`[@pdfme/schemas/barcodes] No default for barcode type ${barcodeType}`);
 
   return {
     schema: ({ i18n }) => ({

package/src/barcodes/uiRender.ts

@@ -2,37 +2,10 @@ 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, createErrorElm } from '../utils.js';
 
 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 blobToDataURL = (blob: Blob): Promise<string> =>
   new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -74,16 +47,17 @@ export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
   };
   Object.assign(container.style, containerStyle);
   rootElement.appendChild(container);
-  const editable = isEditable(mode);
+  const editable = isEditable(mode, schema);
   if (editable) {
     const input = document.createElement('input');
     const inputStyle: CSS.Properties = {
-      ...fullSize,
+      width: '100%',
       position: 'absolute',
       textAlign: 'center',
-      fontSize: '1rem',
-      color: '#000',
-      backgroundColor: editable || value ? addAlphaToHex(theme.colorPrimaryBg, 30) : 'none',
+      fontSize: '12pt',
+      fontWeight: 'bold',
+      color: theme.colorWhite,
+      backgroundColor: editable || value ? addAlphaToHex('#000000', 80) : 'none',
       border: 'none',
       display: 'flex',
       alignItems: 'center',
@@ -108,12 +82,11 @@ export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
   if (!value) return;
   try {
     if (!validateBarcodeInput(schema.type, value))
-      throw new Error('[@pdfme/schemas] Invalid barcode input');
+      throw new Error('[@pdfme/schemas/barcodes] Invalid barcode input');
     const imgElm = await createBarcodeImageElm(schema, value);
     container.appendChild(imgElm);
   } catch (err) {
     console.error(`[@pdfme/ui] ${err}`);
-    const errorBarcodeElm = createErrorBarcodeElm();
-    container.appendChild(errorBarcodeElm);
+    container.appendChild(createErrorElm());
   }
 };

package/src/graphics/helper.ts

@@ -0,0 +1,147 @@
+// ref: https://github.com/image-size/image-size ----------------------------
+// The following code is adapted from the image-size code. Unnecessary formats and dependencies on Node have been removed.
+type IImage = {
+  validate: (input: Uint8Array) => boolean;
+  calculate: (input: Uint8Array) => { width: number; height: number } | undefined;
+};
+
+const decoder = new TextDecoder();
+const toUTF8String = (input: Uint8Array, start = 0, end = input.length) =>
+  decoder.decode(input.slice(start, end));
+
+const toHexString = (input: Uint8Array, start = 0, end = input.length) =>
+  input.slice(start, end).reduce((memo, i) => memo + ('0' + i.toString(16)).slice(-2), '');
+
+const readUInt16BE = (input: Uint8Array, offset = 0) => input[offset] * 2 ** 8 + input[offset + 1];
+
+const readUInt32BE = (input: Uint8Array, offset = 0) =>
+  input[offset] * 2 ** 24 +
+  input[offset + 1] * 2 ** 16 +
+  input[offset + 2] * 2 ** 8 +
+  input[offset + 3];
+
+const extractSize = (input: Uint8Array, index: number) => {
+  return {
+    height: readUInt16BE(input, index),
+    width: readUInt16BE(input, index + 2),
+  };
+};
+
+const validateInput = (input: Uint8Array, index: number): void => {
+  // index should be within buffer limits
+  if (index > input.length) {
+    throw new TypeError('Corrupt JPG, exceeded buffer limits');
+  }
+  // Every JPEG block must begin with a 0xFF
+  if (input[index] !== 0xff) {
+    throw new TypeError('Invalid JPG, marker table corrupted');
+  }
+};
+
+const JPG: IImage = {
+  validate: (input) => toHexString(input, 0, 2) === 'ffd8',
+
+  calculate(input) {
+    // Skip 4 chars, they are for signature
+    input = input.slice(4);
+
+    let next: number;
+    while (input.length) {
+      // read length of the next block
+      const i = readUInt16BE(input, 0);
+
+      // ensure correct format
+      validateInput(input, i);
+
+      // 0xFFC0 is baseline standard(SOF)
+      // 0xFFC1 is baseline optimized(SOF)
+      // 0xFFC2 is progressive(SOF2)
+      next = input[i + 1];
+      if (next === 0xc0 || next === 0xc1 || next === 0xc2) {
+        const size = extractSize(input, i + 5);
+
+        return size;
+      }
+
+      // move to the next block
+      input = input.slice(i + 2);
+    }
+
+    throw new TypeError('Invalid JPG, no size found');
+  },
+};
+
+const pngSignature = 'PNG\r\n\x1a\n';
+const pngImageHeaderChunkName = 'IHDR';
+
+// Used to detect "fried" png's: http://www.jongware.com/pngdefry.html
+const pngFriedChunkName = 'CgBI';
+
+const PNG: IImage = {
+  validate(input) {
+    if (pngSignature === toUTF8String(input, 1, 8)) {
+      let chunkName = toUTF8String(input, 12, 16);
+      if (chunkName === pngFriedChunkName) {
+        chunkName = toUTF8String(input, 28, 32);
+      }
+      if (chunkName !== pngImageHeaderChunkName) {
+        throw new TypeError('Invalid PNG');
+      }
+      return true;
+    }
+    return false;
+  },
+
+  calculate(input) {
+    if (toUTF8String(input, 12, 16) === pngFriedChunkName) {
+      return {
+        height: readUInt32BE(input, 36),
+        width: readUInt32BE(input, 32),
+      };
+    }
+    return {
+      height: readUInt32BE(input, 20),
+      width: readUInt32BE(input, 16),
+    };
+  },
+};
+
+const typeHandlers = {
+  jpg: JPG,
+  png: PNG,
+};
+
+type imageType = keyof typeof typeHandlers;
+
+function detector(input: Uint8Array): imageType | undefined {
+  const firstBytes: { [byte: number]: imageType } = {
+    0x89: 'png',
+    0xff: 'jpg',
+  };
+  const byte = input[0];
+  if (byte in firstBytes) {
+    const type = firstBytes[byte];
+    if (type && typeHandlers[type].validate(input)) {
+      return type;
+    }
+  }
+
+  const keys = Object.keys(typeHandlers) as imageType[];
+  return keys.find((key: imageType) => typeHandlers[key].validate(input));
+}
+
+export const imageSize = (imgBuffer: Buffer): { height: number; width: number } => {
+  const type = detector(imgBuffer);
+
+  if (typeof type !== 'undefined' && type in typeHandlers) {
+    const size = typeHandlers[type].calculate(imgBuffer);
+    if (size !== undefined) {
+      return size;
+    }
+  }
+
+  throw new TypeError(
+    '[@pdfme/schemas/images] Unsupported file type: ' + (type === undefined ? 'undefined' : type)
+  );
+};
+// ----------------------------

package/src/graphics/image.ts

@@ -0,0 +1,207 @@
+import type { ChangeEvent } from 'react';
+import type { PDFImage } from '@pdfme/pdf-lib';
+import type { Plugin } from '@pdfme/common';
+import type { PDFRenderProps, Schema } from '@pdfme/common';
+import type * as CSS from 'csstype';
+import { Buffer } from 'buffer';
+import { UIRenderProps } from '@pdfme/common';
+import { convertForPdfLayoutProps, addAlphaToHex, isEditable, readFile } from '../utils.js';
+import { DEFAULT_OPACITY } from '../constants.js';
+import { imageSize } from './helper.js';
+
+const px2mm = (px: number): number => {
+  // http://www.endmemo.com/sconvert/millimeterpixel.php
+  const ratio = 0.26458333333333;
+  return parseFloat(String(px)) * ratio;
+};
+
+const getCacheKey = (schema: Schema, input: string) => `${schema.type}${input}`;
+const fullSize = { width: '100%', height: '100%' };
+const defaultValue =
+  'data:image/png;base64,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';
+
+interface ImageSchema extends Schema {}
+
+const imageSchema: 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) as PDFImage;
+    if (!image) {
+      const isPng = value.startsWith('data:image/png;');
+      image = await (isPng ? pdfDoc.embedPng(value) : pdfDoc.embedJpg(value));
+      _cache.set(inputImageCacheKey, image);
+    }
+
+    const _schema = { ...schema, position: { ...schema.position } };
+    const dataUriPrefix = ';base64,';
+    const idx = value.indexOf(dataUriPrefix);
+    const imgBase64 = value.substring(idx + dataUriPrefix.length, value.length);
+    const dimension = imageSize(Buffer.from(imgBase64, 'base64'));
+
+    const imageWidth = px2mm(dimension.width);
+    const imageHeight = px2mm(dimension.height);
+    const boxWidth = _schema.width;
+    const boxHeight = _schema.height;
+
+    const imageRatio = imageWidth / imageHeight;
+    const boxRatio = boxWidth / boxHeight;
+
+    if (imageRatio > boxRatio) {
+      _schema.width = boxWidth;
+      _schema.height = boxWidth / imageRatio;
+      _schema.position.y += (boxHeight - _schema.height) / 2;
+    } else {
+      _schema.width = boxHeight * imageRatio;
+      _schema.height = boxHeight;
+      _schema.position.x += (boxWidth - _schema.width) / 2;
+    }
+
+    const pageHeight = page.getHeight();
+    const lProps = convertForPdfLayoutProps({ schema: _schema, pageHeight });
+    const { width, height, rotate, position, opacity } = lProps;
+    const { x, y } = position;
+    page.drawImage(image, { x, y, rotate, width, height, opacity });
+  },
+  ui: (arg: UIRenderProps<ImageSchema>) => {
+    const {
+      value,
+      rootElement,
+      mode,
+      onChange,
+      stopEditing,
+      tabIndex,
+      placeholder,
+      theme,
+      schema,
+    } = arg;
+    const editable = isEditable(mode, schema);
+    const isDefault = value === defaultValue;
+
+    const container = document.createElement('div');
+    const backgroundStyle = placeholder ? `url(${placeholder})` : 'none';
+    const containerStyle: CSS.Properties = {
+      ...fullSize,
+      backgroundImage: value ? 'none' : backgroundStyle,
+      backgroundSize: `contain`,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center',
+    };
+    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,
+        objectFit: 'contain',
+      };
+      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%',
+        left: '50%',
+        width: '180px',
+        height: '30px',
+        marginLeft: '-90px',
+        marginTop: '-15px',
+      };
+      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 imageSchema;
+
+export const readOnlyImage: Plugin<ImageSchema> = {
+  pdf: imageSchema.pdf,
+  ui: imageSchema.ui,
+  propPanel: {
+    ...imageSchema.propPanel,
+    defaultSchema: {
+      ...imageSchema.propPanel.defaultSchema,
+      type: 'readOnlyImage',
+      readOnly: true,
+      readOnlyValue: defaultValue,
+    },
+  },
+};