@pdfme/schemas 3.1.5-dev.15 → 3.1.5-dev.17

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

@@ -19,6 +19,7 @@ export declare const rectangle: {
             width: number;
             height: number;
             readOnly?: boolean | undefined;
+            readOnlyValue?: string | undefined;
             rotate?: number | undefined;
             opacity?: number | undefined;
         };
@@ -38,6 +39,7 @@ export declare const rectangle: {
                 opacity?: number | undefined;
                 rotate?: number | undefined;
                 readOnly?: boolean | undefined;
+                readOnlyValue?: string | undefined;
             };
             activeElements: HTMLElement[];
             changeSchemas: import("@pdfme/common").ChangeSchemas;
@@ -55,6 +57,7 @@ export declare const rectangle: {
                 opacity?: number | undefined;
                 rotate?: number | undefined;
                 readOnly?: boolean | undefined;
+                readOnlyValue?: string | undefined;
             }[];
             pageSize: {
                 width: number;
@@ -84,6 +87,7 @@ export declare const ellipse: {
             width: number;
             height: number;
             readOnly?: boolean | undefined;
+            readOnlyValue?: string | undefined;
             rotate?: number | undefined;
             opacity?: number | undefined;
         };
@@ -103,6 +107,7 @@ export declare const ellipse: {
                 opacity?: number | undefined;
                 rotate?: number | undefined;
                 readOnly?: boolean | undefined;
+                readOnlyValue?: string | undefined;
             };
             activeElements: HTMLElement[];
             changeSchemas: import("@pdfme/common").ChangeSchemas;
@@ -120,6 +125,7 @@ export declare const ellipse: {
                 opacity?: number | undefined;
                 rotate?: number | undefined;
                 readOnly?: boolean | undefined;
+                readOnlyValue?: string | undefined;
             }[];
             pageSize: {
                 width: number;

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/utils.d.ts

@@ -24,7 +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.15",
+  "version": "3.1.5-dev.17",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -43,11 +43,10 @@
     "prettier": "prettier --write 'src/**/*.ts'"
   },
   "dependencies": {
-    "@pdfme/pdf-lib": "^1.18.1",
+    "@pdfme/pdf-lib": "^1.18.3",
     "bwip-js": "^4.1.1",
     "fast-xml-parser": "^4.3.2",
-    "fontkit": "^2.0.2",
-    "image-size": "^1.0.2"
+    "fontkit": "^2.0.2"
   },
   "devDependencies": {
     "@pdfme/common": "file:../common",

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/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

@@ -47,7 +47,7 @@ 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 = {
@@ -82,7 +82,7 @@ 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) {

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

@@ -3,16 +3,11 @@ 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 sizeOf from 'image-size';
 import { Buffer } from 'buffer';
 import { UIRenderProps } from '@pdfme/common';
-import {
-  convertForPdfLayoutProps,
-  addAlphaToHex,
-  isEditable,
-  readFile,
-} from '../utils.js';
+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
@@ -20,27 +15,6 @@ const px2mm = (px: number): number => {
   return parseFloat(String(px)) * ratio;
 };
 
-const getDimension = (imgBuffer: Buffer): Promise<{ height: number; width: number }> => {
-  if (typeof window !== 'undefined') {
-    return new Promise((resolve, reject) => {
-      const blob = new Blob([imgBuffer]);
-      const url = URL.createObjectURL(blob);
-      const img = new Image();
-      img.onload = () => {
-        resolve({ width: img.width, height: img.height });
-        URL.revokeObjectURL(url);
-      };
-      img.onerror = (e) => {
-        reject(e);
-      };
-      img.src = url;
-    });
-  } else {
-    const dimensions = sizeOf(imgBuffer);
-    return Promise.resolve({ width: dimensions.width ?? 0, height: dimensions.height ?? 0 });
-  }
-};
-
 const getCacheKey = (schema: Schema, input: string) => `${schema.type}${input}`;
 const fullSize = { width: '100%', height: '100%' };
 const defaultValue =
@@ -48,7 +22,7 @@ const defaultValue =
 
 interface ImageSchema extends Schema {}
 
-const schema: Plugin<ImageSchema> = {
+const imageSchema: Plugin<ImageSchema> = {
   pdf: async (arg: PDFRenderProps<ImageSchema>) => {
     const { value, schema, pdfDoc, page, _cache } = arg;
     if (!value || !value.startsWith('data:image/')) return;
@@ -65,7 +39,7 @@ const schema: Plugin<ImageSchema> = {
     const dataUriPrefix = ';base64,';
     const idx = value.indexOf(dataUriPrefix);
     const imgBase64 = value.substring(idx + dataUriPrefix.length, value.length);
-    const dimension = await getDimension(Buffer.from(imgBase64, 'base64'));
+    const dimension = imageSize(Buffer.from(imgBase64, 'base64'));
 
     const imageWidth = px2mm(dimension.width);
     const imageHeight = px2mm(dimension.height);
@@ -92,8 +66,18 @@ const schema: Plugin<ImageSchema> = {
     page.drawImage(image, { x, y, rotate, width, height, opacity });
   },
   ui: (arg: UIRenderProps<ImageSchema>) => {
-    const { value, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, theme } = arg;
-    const editable = isEditable(mode);
+    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');
@@ -205,4 +189,19 @@ const schema: Plugin<ImageSchema> = {
     },
   },
 };
-export default schema;
+
+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,
+    },
+  },
+};

package/src/graphics/svg.ts

@@ -4,22 +4,22 @@ import { convertForPdfLayoutProps, isEditable, addAlphaToHex, createErrorElm } f
 
 const isValidSVG = (svgString: string) => XMLValidator.validate(svgString) === true;
 
-const svgData = `<svg viewBox="0 0 488 600" version="1.1" xmlns="http://www.w3.org/2000/svg">
+const defaultValue = `<svg viewBox="0 0 488 600" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g transform="matrix(1,0,0,1,-56,0)" fill="#000000" stroke="none">
         <path d="M228.667,0L56,172.667L56.267,345.334L56.667,518L59.733,527.334C65.867,545.467 72.933,557.067 86,570.134C96.133,580.4 100,583.2 110.667,588.4C134.533,600.134 120,599.334 300,599.334C480,599.334 465.467,600.134 489.334,588.4C500,583.2 503.867,580.4 514,570.134C527.334,556.8 534.534,544.8 540.267,526.667L543.334,516.667L543.334,83.333L540.267,73.333C534.534,55.2 527.334,43.2 514,29.867C503.867,19.6 500,16.8 489.334,11.6C465.734,0 475.467,0.8 344.667,0.267L228.667,0ZM466.4,41.6C483.334,48.933 496.267,61.867 502.934,78.4L506,86L506,514L502.934,521.734C496,538.934 480.267,553.867 463.334,559.334C455.6,561.867 450.8,562 300,562C149.2,562 144.4,561.867 136.667,559.334C119.733,553.867 104,538.934 97.067,521.734L94,514L93.6,351.067L93.333,188.133L149.067,187.733L204.667,187.333L213.6,182.933C224.8,177.467 235.867,165.867 240.267,155.067C243.333,147.467 243.333,146.4 243.733,92.267L244.133,37.2L458,38L466.4,41.6ZM195.067,304C175.6,306.8 164,320.667 165.6,339.467C166,343.6 167.6,348.667 169.733,352.4C174.4,360.267 185.2,365.734 201.867,368.534C208.4,369.734 215.067,371.467 216.8,372.667C224,377.334 221.467,389.067 212.533,392C205.6,394.4 193.733,392.934 185.6,388.8C173.333,382.534 164,385.334 164,395.2C164,400.934 170.133,406.667 180.267,410.134C190.933,413.867 217.067,413.734 225.467,409.867C238.933,403.6 246.667,390 244.8,375.6C242.667,359.734 232.8,351.334 212.267,347.867C193.6,344.8 189.333,342.4 189.333,334.533C189.333,324.267 201.867,320.933 218.267,326.667C228.667,330.267 232.533,330.133 235.867,325.867C242.133,318 237.6,310.667 224.267,306.8C213.333,303.6 204.267,302.8 195.067,304ZM386,304.133C377.6,305.333 374,306.8 367.334,311.6C355.734,320.133 351.2,336.4 352.4,365.334C353.2,385.334 356,394.4 364.134,402.534C372.267,410.667 381.734,413.734 396.667,413.067C406.8,412.667 409.734,412 415.734,408.667C429.2,401.334 434.534,390.934 435.6,370.667C436.4,353.734 436,353.067 420.934,352.267C401.867,351.334 396,353.467 396,361.867C396,367.867 399.467,370.667 407.067,370.667C413.2,370.667 413.334,370.667 413.334,374.934C413.334,394 386.267,400.534 378.534,383.467C374.934,375.334 374.934,341.867 378.534,333.733C382,326.4 387.467,323.467 396.8,324.267C403.067,324.8 404.667,325.6 410.534,331.067C414.267,334.533 418.4,337.333 419.867,337.333C427.334,337.333 433.334,330.267 431.334,323.733C427.2,310.133 406.4,301.2 386,304.133ZM258.4,308C255.067,311.467 254.533,312.8 255.2,316.4C257.067,326.667 285.333,405.867 288.133,408.8C289.733,410.534 293.067,412.267 295.333,412.8C303.867,414.4 310.667,407.867 314.4,394.667C315.067,392.134 321.2,374.134 327.867,354.8C334.8,334.533 340,317.467 340,314.533C340,303.733 325.067,299.867 319.867,309.467C318.533,312.133 309.467,340.933 302.667,364C301.067,369.467 299.333,374.4 298.8,375.067C298.267,375.6 292.933,360.8 286.933,342C275.333,306 274.133,304 266.267,304C263.867,304 261.067,305.467 258.4,308Z" style="fill-rule:nonzero;"/>
     </g>
 </svg>`;
 
-interface SVG extends Schema {}
+interface SVGSchema extends Schema {}
 
-const schema: Plugin<SVG> = {
+const svgSchema: Plugin<SVGSchema> = {
   ui: (arg) => {
-    const { rootElement, value, mode, onChange, theme } = arg;
-    const container = document.createElement(isEditable(mode) ? 'textarea' : 'div');
+    const { rootElement, value, mode, onChange, theme, schema } = arg;
+    const container = document.createElement(isEditable(mode, schema) ? 'textarea' : 'div');
     container.style.width = '100%';
     container.style.height = '100%';
     container.style.boxSizing = 'border-box';
-    if (isEditable(mode)) {
+    if (isEditable(mode, schema)) {
       const textarea = container as HTMLTextAreaElement;
       textarea.value = value;
       textarea.style.position = 'absolute';
@@ -71,7 +71,7 @@ const schema: Plugin<SVG> = {
   },
   propPanel: {
     schema: {},
-    defaultValue: svgData,
+    defaultValue,
     defaultSchema: {
       type: 'svg',
       position: { x: 0, y: 0 },
@@ -81,4 +81,18 @@ const schema: Plugin<SVG> = {
   },
 };
 
-export default schema;
+export default svgSchema;
+
+export const readOnlySvg: Plugin<SVGSchema> = {
+  pdf: svgSchema.pdf,
+  ui: svgSchema.ui,
+  propPanel: {
+    ...svgSchema.propPanel,
+    defaultSchema: {
+      ...svgSchema.propPanel.defaultSchema,
+      type: 'readOnlySvg',
+      readOnly: true,
+      readOnlyValue: defaultValue,
+    },
+  },
+};

package/src/index.ts

@@ -1,6 +1,6 @@
-import text from './text/index.js';
-import image from './graphics/image.js';
-import svg from './graphics/svg.js';
+import text, { readOnlyText } from './text/index.js';
+import image, { readOnlyImage } from './graphics/image.js';
+import svg, { readOnlySvg } from './graphics/svg.js';
 import barcodes from './barcodes/index.js';
 import line from './shapes/line.js';
 import { rectangle, ellipse } from './shapes/rectAndEllipse.js';
@@ -10,8 +10,11 @@ const builtInPlugins = { Text: text };
 
 export {
   text,
+  readOnlyText,
   image,
+  readOnlyImage,
   svg,
+  readOnlySvg,
   barcodes,
   line,
   rectangle,

package/src/shapes/line.ts

@@ -8,7 +8,7 @@ interface LineSchema extends Schema {
   color: string;
 }
 
-const schema: Plugin<LineSchema> = {
+const lineSchema: Plugin<LineSchema> = {
   pdf: (arg: PDFRenderProps<LineSchema>) => {
     const { page, schema } = arg;
     const pageHeight = page.getHeight();
@@ -64,4 +64,4 @@ const schema: Plugin<LineSchema> = {
     },
   },
 };
-export default schema;
+export default lineSchema;

package/src/text/index.ts

@@ -4,5 +4,20 @@ import { propPanel } from './propPanel.js';
 import { uiRender } from './uiRender.js';
 import type { TextSchema } from './types';
 
-const schema: Plugin<TextSchema> = { pdf: pdfRender, ui: uiRender, propPanel };
-export default schema;
+const textSchema: Plugin<TextSchema> = { pdf: pdfRender, ui: uiRender, propPanel };
+
+export default textSchema;
+
+export const readOnlyText: Plugin<TextSchema> = {
+  pdf: textSchema.pdf,
+  ui: textSchema.ui,
+  propPanel: {
+    ...textSchema.propPanel,
+    defaultSchema: {
+      ...textSchema.propPanel.defaultSchema,
+      type: 'readOnlyText',
+      readOnly: true,
+      readOnlyValue: textSchema.propPanel.defaultValue,
+    },
+  },
+};

package/src/text/uiRender.ts

@@ -117,7 +117,7 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   const textBlock = document.createElement('div');
   Object.assign(textBlock.style, textBlockStyle);
 
-  if (isEditable(mode)) {
+  if (isEditable(mode, schema)) {
     textBlock.contentEditable = 'plaintext-only';
     textBlock.tabIndex = tabIndex || 0;
     textBlock.innerText = value;

package/src/utils.ts

@@ -70,7 +70,8 @@ export const addAlphaToHex = (hex: string, alphaPercentage: number) => {
   return hex + alphaHex;
 };
 
-export const isEditable = (mode: Mode) => mode === 'form' || mode === 'designer';
+export const isEditable = (mode: Mode, schema: Schema) =>
+  mode === 'designer' || (mode === 'form' && schema.readOnly !== true);
 
 const hex2rgb = (hex: string) => {
   if (hex.slice(0, 1) === '#') hex = hex.slice(1);