@pdfme/common 4.5.2-dev.2 → 4.5.2-dev.3

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

@@ -4,7 +4,7 @@ import type { PDFPage, PDFDocument } from '@pdfme/pdf-lib';
 import type { ThemeConfig, GlobalToken } from 'antd';
 /**  @ts-ignore -- optional interface, will gracefully degrade to `any` if `form-render` isn't installed*/
 import type { WidgetProps as _PropPanelWidgetProps, Schema as _PropPanelSchema } from 'form-render';
-import { Lang, Dict, Mode, Size, Schema, Font, SchemaForUI, BasePdf, BlankPdf, CommonOptions, Template, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps, ColorType } from './schema.js';
+import { Lang, Dict, Mode, Size, Schema, Font, SchemaForUI, BasePdf, BlankPdf, CommonOptions, Template, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps, ColorType, LegacySchemaPageArray, SchemaPageArray } from './schema.js';
 export type PropPanelSchema = _PropPanelSchema;
 export type ChangeSchemaItem = {
     key: string;
@@ -15,7 +15,6 @@ export type ChangeSchemas = (objs: ChangeSchemaItem[]) => void;
 /**
  * Properties used for PDF rendering.
  * @template T Type of the extended Schema object.
- * @property {string} key The key of the schema object.
  * @property {string} value The string used for PDF rendering.
  * @property {T} schema Extended Schema object for rendering.
  * @property {BasePdf} basePdf Base PDF object for rendering.
@@ -26,7 +25,6 @@ export type ChangeSchemas = (objs: ChangeSchemaItem[]) => void;
  * @property {Map<any, any>} _cache Cache shared only during the execution of the generate function (useful for caching images, etc. if needed).
  */
 export interface PDFRenderProps<T extends Schema> {
-    key: string;
     value: string;
     schema: T;
     basePdf: BasePdf;
@@ -63,7 +61,6 @@ export type UIRenderProps<T extends Schema> = {
     tabIndex?: number;
     placeholder?: string;
     stopEditing?: () => void;
-    key: string;
     value: string;
     onChange?: (arg: {
         key: string;
@@ -173,4 +170,6 @@ export type PreviewProps = z.infer<typeof PreviewProps> & {
 export type DesignerProps = z.infer<typeof DesignerProps> & {
     plugins?: Plugins;
 };
+export type SchemaPageArray = z.infer<typeof SchemaPageArray>;
+export type LegacySchemaPageArray = z.infer<typeof LegacySchemaPageArray>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/common",
-  "version": "4.5.2-dev.2",
+  "version": "4.5.2-dev.3",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/helper.ts

@@ -1,6 +1,16 @@
 import { z } from 'zod';
 import { Buffer } from 'buffer';
-import { Schema, Template, Font, BasePdf, Plugins, BlankPdf, CommonOptions } from './types';
+import {
+  Schema,
+  Template,
+  Font,
+  BasePdf,
+  Plugins,
+  BlankPdf,
+  CommonOptions,
+  LegacySchemaPageArray,
+  SchemaPageArray
+} from './types';
 import {
   Inputs as InputsSchema,
   UIOptions as UIOptionsSchema,
@@ -79,12 +89,34 @@ export const isHexValid = (hex: string): boolean => {
   return /^#(?:[A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/i.test(hex);
 };
 
+/**
+ * Migrate from legacy keyed object format to array format
+ * @param template Template
+ */
+export const migrateTemplate = (template: Template) => {
+  if (!template.schemas) {
+    return;
+  }
+
+  if (Array.isArray(template.schemas) && template.schemas.length > 0 && !Array.isArray(template.schemas[0])) {
+    template.schemas = (template.schemas as unknown as LegacySchemaPageArray).map(
+      (page: Record<string, Schema>) =>
+        Object.entries(page).map(([key, value]) => ({
+          ...value,
+          name: key,
+        }))
+    );
+  }
+};
+
 export const getInputFromTemplate = (template: Template): { [key: string]: string }[] => {
+  migrateTemplate(template);
+
   const input: { [key: string]: string } = {};
-  template.schemas.forEach((schema) => {
-    Object.entries(schema).forEach(([key, value]) => {
-      if (!value.readOnly) {
-        input[key] = value.content || '';
+  template.schemas.forEach(page => {
+    page.forEach(schema => {
+      if (!schema.readOnly) {
+        input[schema.name] = schema.content || '';
       }
     });
   });
@@ -124,10 +156,10 @@ export const b64toUint8Array = (base64: string) => {
   return unit8arr;
 };
 
-const getFontNamesInSchemas = (schemas: { [key: string]: Schema }[]) =>
+const getFontNamesInSchemas = (schemas: SchemaPageArray) =>
   uniq(
     schemas
-      .map((s) => Object.values(s).map((v) => (v as any).fontName ?? ''))
+      .map((p) => p.map((v) => (v as any).fontName ?? ''))
       .reduce((acc, cur) => acc.concat(cur), [] as (string | undefined)[])
       .filter(Boolean) as string[]
   );
@@ -169,7 +201,7 @@ export const checkPlugins = (arg: { plugins: Plugins; template: Template }) => {
     plugins,
     template: { schemas },
   } = arg;
-  const allSchemaTypes = uniq(schemas.map((s) => Object.values(s).map((v) => v.type)).flat());
+  const allSchemaTypes = uniq(schemas.map((p) => p.map((v) => v.type)).flat());
 
   const pluginsSchemaTypes = Object.values(plugins).map((p) => p?.propPanel.defaultSchema.type);
 
@@ -219,11 +251,24 @@ ${message}`);
 
 export const checkInputs = (data: unknown) => checkProps(data, InputsSchema);
 export const checkUIOptions = (data: unknown) => checkProps(data, UIOptionsSchema);
-export const checkTemplate = (data: unknown) => checkProps(data, TemplateSchema);
-export const checkUIProps = (data: unknown) => checkProps(data, UIPropsSchema);
 export const checkPreviewProps = (data: unknown) => checkProps(data, PreviewPropsSchema);
 export const checkDesignerProps = (data: unknown) => checkProps(data, DesignerPropsSchema);
-export const checkGenerateProps = (data: unknown) => checkProps(data, GeneratePropsSchema);
+export const checkUIProps = (data: unknown) => {
+  if (typeof data === 'object' && data !== null && 'template' in data) {
+    migrateTemplate(data.template as Template);
+  }
+  checkProps(data, UIPropsSchema);
+}
+export const checkTemplate = (template: unknown) => {
+  migrateTemplate(template as Template);
+  checkProps(template, TemplateSchema);
+}
+export const checkGenerateProps = (data: unknown) => {
+  if (typeof data === 'object' && data !== null && 'template' in data) {
+    migrateTemplate(data.template as Template);
+  }
+  checkProps(data, GeneratePropsSchema);
+}
 
 interface ModifyTemplateForDynamicTableArg {
   template: Template;
@@ -239,7 +284,6 @@ interface ModifyTemplateForDynamicTableArg {
 class Node {
   index = 0;
 
-  key?: string;
   schema?: Schema;
 
   children: Node[] = [];
@@ -258,8 +302,7 @@ class Node {
     this.index = index;
   }
 
-  setKeyAndSchema(key: string, schema: Schema): void {
-    this.key = key;
+  setSchema(schema: Schema): void {
     this.schema = schema;
   }
 
@@ -301,24 +344,23 @@ function createPage(basePdf: BlankPdf) {
 }
 
 function createNode(arg: {
-  key: string;
   schema: Schema;
   position: { x: number; y: number };
   width: number;
   height: number;
 }) {
-  const { position, width, height, key, schema } = arg;
+  const { position, width, height, schema } = arg;
   const node = new Node({ width, height });
   node.setPosition(position);
-  node.setKeyAndSchema(key, schema);
+  node.setSchema(schema);
   return node;
 }
 
 function resortChildren(page: Node, orderMap: Map<string, number>): void {
   page.children = page.children
     .sort((a, b) => {
-      const orderA = orderMap.get(a.key!);
-      const orderB = orderMap.get(b.key!);
+      const orderA = orderMap.get(a.schema?.name!);
+      const orderB = orderMap.get(b.schema?.name!);
       if (orderA === undefined || orderB === undefined) {
         throw new Error('[@pdfme/common] order is not defined');
       }
@@ -333,23 +375,21 @@ function resortChildren(page: Node, orderMap: Map<string, number>): void {
 async function createOnePage(
   arg: {
     basePdf: BlankPdf;
-    schemaObj: Record<string, Schema>;
+    schemaPage: Schema[];
     orderMap: Map<string, number>;
   } & Omit<ModifyTemplateForDynamicTableArg, 'template'>
 ): Promise<Node> {
-  const { basePdf, schemaObj, orderMap, input, options, _cache, getDynamicHeights } = arg;
+  const { basePdf, schemaPage, orderMap, input, options, _cache, getDynamicHeights } = arg;
   const page = createPage(basePdf);
 
   const schemaPositions: number[] = [];
-  const sortedSchemaEntries = Object.entries(schemaObj).sort(
-    (a, b) => a[1].position.y - b[1].position.y
-  );
+  const sortedSchemaEntries = cloneDeep(schemaPage).sort((a, b) => a.position.y - b.position.y);
   const diffMap = new Map();
-  for (const [key, schema] of sortedSchemaEntries) {
+  for (const schema of sortedSchemaEntries) {
     const { position, width } = schema;
 
     const opt = { schema, basePdf, options, _cache };
-    const value = (schema.readOnly ? schema.content : input?.[key]) || '';
+    const value = (schema.readOnly ? schema.content : input?.[schema.name]) || '';
     const heights = await getDynamicHeights(value, opt);
 
     const heightsSum = heights.reduce((acc, cur) => acc + cur, 0);
@@ -364,7 +404,7 @@ async function createOnePage(
           y += diff;
         }
       }
-      const node = createNode({ key, schema, position: { ...position, y }, width, height });
+      const node = createNode({ schema, position: { ...position, y }, width, height });
 
       schemaPositions.push(y + height + basePdf.padding[2]);
       page.insertChild(node);
@@ -406,7 +446,7 @@ function breakIntoPages(arg: {
 
   const children = longPage.children.sort((a, b) => a.position.y - b.position.y);
   for (let i = 0; i < children.length; i++) {
-    const { key, schema, position, height, width } = children[i];
+    const { schema, position, height, width } = children[i];
     const { y, x } = position;
 
     let targetPageIndex = Math.floor(y / getPageHeight(pages.length - 1));
@@ -417,9 +457,9 @@ function breakIntoPages(arg: {
       newY = calculateNewY(y, targetPageIndex);
     }
 
-    if (!key || !schema) throw new Error('[@pdfme/common] key or schema is undefined');
+    if (!schema) throw new Error('[@pdfme/common] schema is undefined');
 
-    const clonedElement = createNode({ key, schema, position: { x, y: newY }, width, height });
+    const clonedElement = createNode({ schema, position: { x, y: newY }, width, height });
     pages[targetPageIndex].insertChild(clonedElement);
   }
 
@@ -430,46 +470,53 @@ function breakIntoPages(arg: {
 
 function createNewTemplate(pages: Node[], basePdf: BlankPdf): Template {
   const newTemplate: Template = {
-    schemas: Array.from({ length: pages.length }, () => ({} as Record<string, Schema>)),
+    schemas: Array.from({ length: pages.length }, () => ([] as Schema[])),
     basePdf: basePdf,
   };
 
-  const keyToSchemas = new Map<string, Node[]>();
+  const nameToSchemas = new Map<string, Node[]>();
 
   cloneDeep(pages).forEach((page, pageIndex) => {
     page.children.forEach((child) => {
-      const { key, schema } = child;
-      if (!key || !schema) throw new Error('[@pdfme/common] key or schema is undefined');
+      const { schema } = child;
+      if (!schema) throw new Error('[@pdfme/common] schema is undefined');
 
-      if (!keyToSchemas.has(key)) {
-        keyToSchemas.set(key, []);
+      const name = schema.name
+      if (!nameToSchemas.has(name)) {
+        nameToSchemas.set(name, []);
       }
-      keyToSchemas.get(key)!.push(child);
+      nameToSchemas.get(name)!.push(child);
 
-      const sameKeySchemas = page.children.filter((c) => c.key === key);
-      const start = keyToSchemas.get(key)!.length - sameKeySchemas.length;
+      const sameNameSchemas = page.children.filter((c) => c.schema?.name === name);
+      const start = nameToSchemas.get(name)!.length - sameNameSchemas.length;
 
-      if (sameKeySchemas.length > 0) {
-        if (!sameKeySchemas[0].schema) {
+      if (sameNameSchemas.length > 0) {
+        if (!sameNameSchemas[0].schema) {
           throw new Error('[@pdfme/common] schema is undefined');
         }
 
         // Use the first schema to get the schema and position
-        const schema = sameKeySchemas[0].schema;
-        const height = sameKeySchemas.reduce((acc, cur) => acc + cur.height, 0);
-        const position = sameKeySchemas[0].position;
+        const schema = sameNameSchemas[0].schema;
+        const height = sameNameSchemas.reduce((acc, cur) => acc + cur.height, 0);
+        const position = sameNameSchemas[0].position;
 
         // Currently, __bodyRange exists for table schemas, but if we make it more abstract,
         // it could be used for other schemas as well to render schemas that have been split by page breaks, starting from the middle.
         schema.__bodyRange = {
           start: Math.max(start - 1, 0),
-          end: start + sameKeySchemas.length - 1,
+          end: start + sameNameSchemas.length - 1,
         };
 
         // Currently, this is used to determine whether to display the header when a table is split.
         schema.__isSplit = start > 0;
 
-        newTemplate.schemas[pageIndex][key] = Object.assign({}, schema, { position, height });
+        const newSchema = Object.assign({}, schema, { position, height });
+        const index = newTemplate.schemas[pageIndex].findIndex((s) => s.name === name);
+        if (index !== -1) {
+          newTemplate.schemas[pageIndex][index] = newSchema;
+        } else {
+          newTemplate.schemas[pageIndex].push(newSchema);
+        }
       }
     });
   });
@@ -488,10 +535,9 @@ export const getDynamicTemplate = async (
   const basePdf = template.basePdf as BlankPdf;
   const pages: Node[] = [];
 
-  for (const schemaObj of template.schemas) {
-    const orderMap = new Map(Object.keys(schemaObj).map((key, index) => [key, index]));
-
-    const longPage = await createOnePage({ basePdf, schemaObj, orderMap, ...arg });
+  for (const schemaPage of template.schemas) {
+    const orderMap = new Map(schemaPage.map((schema, index) => [schema.name, index]));
+    const longPage = await createOnePage({ basePdf, schemaPage, orderMap, ...arg });
     const brokenPages = breakIntoPages({ longPage, basePdf, orderMap });
     pages.push(...brokenPages);
   }

package/src/index.ts

@@ -10,6 +10,7 @@ import {
 import type {
   ChangeSchemaItem,
   ChangeSchemas,
+  SchemaPageArray,
   PropPanel,
   PropPanelSchema,
   PropPanelWidgetProps,
@@ -112,6 +113,7 @@ export type {
   DesignerProps,
   ChangeSchemaItem,
   ChangeSchemas,
+  SchemaPageArray,
   PropPanel,
   PropPanelSchema,
   PropPanelWidgetProps,

package/src/schema.ts

@@ -84,6 +84,7 @@ export const Size = z.object({ height: z.number(), width: z.number() });
 
 export const Schema = z
   .object({
+    name: z.string(),
     type: z.string(),
     content: z.string().optional(),
     position: z.object({ x: z.number(), y: z.number() }),
@@ -98,10 +99,7 @@ export const Schema = z
   })
   .passthrough();
 
-const SchemaForUIAdditionalInfo = z.object({
-  id: z.string(),
-  key: z.string(),
-});
+const SchemaForUIAdditionalInfo = z.object({ id: z.string() });
 export const SchemaForUI = Schema.merge(SchemaForUIAdditionalInfo);
 
 const ArrayBufferSchema: z.ZodSchema<ArrayBuffer> = z.any().refine((v) => v instanceof ArrayBuffer);
@@ -117,9 +115,13 @@ const CustomPdf = z.union([z.string(), ArrayBufferSchema, Uint8ArraySchema]);
 
 export const BasePdf = z.union([CustomPdf, BlankPdf]);
 
+// Legacy keyed structure for BC - we convert to SchemaPageArray on import
+export const LegacySchemaPageArray = z.array(z.record(Schema));
+export const SchemaPageArray = z.array(z.array(Schema));
+
 export const Template = z
   .object({
-    schemas: z.array(z.record(Schema)),
+    schemas: SchemaPageArray,
     basePdf: BasePdf,
     pdfmeVersion: z.string().optional(),
   })

package/src/types.ts

@@ -23,6 +23,8 @@ import {
   PreviewProps,
   DesignerProps,
   ColorType,
+  LegacySchemaPageArray,
+  SchemaPageArray,
 } from './schema.js';
 
 export type PropPanelSchema = _PropPanelSchema;
@@ -36,7 +38,6 @@ export type ChangeSchemas = (objs: ChangeSchemaItem[]) => void;
 /**
  * Properties used for PDF rendering.
  * @template T Type of the extended Schema object.
- * @property {string} key The key of the schema object.
  * @property {string} value The string used for PDF rendering.
  * @property {T} schema Extended Schema object for rendering.
  * @property {BasePdf} basePdf Base PDF object for rendering.
@@ -47,7 +48,6 @@ export type ChangeSchemas = (objs: ChangeSchemaItem[]) => void;
  * @property {Map<any, any>} _cache Cache shared only during the execution of the generate function (useful for caching images, etc. if needed).
  */
 export interface PDFRenderProps<T extends Schema> {
-  key: string;
   value: string;
   schema: T;
   basePdf: BasePdf;
@@ -86,7 +86,6 @@ export type UIRenderProps<T extends Schema> = {
   tabIndex?: number;
   placeholder?: string;
   stopEditing?: () => void;
-  key: string;
   value: string;
   onChange?: (arg: { key: string; value: any } | { key: string; value: any }[]) => void;
   rootElement: HTMLDivElement;
@@ -186,3 +185,5 @@ export type UIOptions = z.infer<typeof UIOptions> & { theme?: ThemeConfig };
 export type UIProps = z.infer<typeof UIProps> & { plugins?: Plugins };
 export type PreviewProps = z.infer<typeof PreviewProps> & { plugins?: Plugins };
 export type DesignerProps = z.infer<typeof DesignerProps> & { plugins?: Plugins };
+export type SchemaPageArray = z.infer<typeof SchemaPageArray>;
+export type LegacySchemaPageArray = z.infer<typeof LegacySchemaPageArray>;