@pdfme/common 3.4.3 → 4.0.0-dev.3

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

@@ -2,7 +2,7 @@ import { z } from 'zod';
 import type { PDFPage, PDFDocument } from '@pdfme/pdf-lib';
 import type { ThemeConfig, GlobalToken } from 'antd';
 import type { WidgetProps as _PropPanelWidgetProps, Schema as _PropPanelSchema } from 'form-render';
-import { Lang, Dict, Mode, Size, Schema, Font, SchemaForUI, BasePdf, 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 } from './schema.js';
 export type PropPanelSchema = _PropPanelSchema;
 export type ChangeSchemas = (objs: {
     key: string;
@@ -15,6 +15,7 @@ export type ChangeSchemas = (objs: {
  * @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.
  * @property {typeof import('@pdfme/pdf-lib')} pdfLib The pdf-lib library used for rendering.
  * @property {PDFDocument} pdfDoc PDFDocument object from pdf-lib.
  * @property {PDFPage} page PDFPage object from pdf-lib.
@@ -25,6 +26,7 @@ export interface PDFRenderProps<T extends Schema> {
     key: string;
     value: string;
     schema: T;
+    basePdf: BasePdf;
     pdfLib: typeof import('@pdfme/pdf-lib');
     pdfDoc: PDFDocument;
     page: PDFPage;
@@ -36,28 +38,37 @@ export interface PDFRenderProps<T extends Schema> {
  *
  * @template T - Type of the extended Schema object.
  * @property {T} schema - Extended Schema object for rendering.
+ * @property {BasePdf} basePdf Base PDF object for rendering.
  * @property {Mode} mode - String indicating the rendering state. 'designer' is only used when the field is in edit mode in the Designer.
  * @property {number} [tabIndex] - Tab index for Form.
  * @property {string} [placeholder] - Placeholder text for Form.
  * @property {() => void} [stopEditing] - Stops editing mode, can be used when the mode is 'designer'.
  * @property {string} key - The key of the schema object.
  * @property {string} value - The string used for UI rendering.
- * @property {(value: string) => void} [onChange] - Used to change the value. Only applicable when the mode is 'form' or 'designer'.
+ * @property {(arg: { key: string; value: any } | { key: string; value: any }[]) => void} [onChange] - Used to change the value and schema properties. Only applicable when the mode is 'form' or 'designer'.
  * @property {HTMLDivElement} rootElement - The root HTMLDivElement for the UI.
  * @property {UIOptions} options - Options object passed from the Viewer, Form, or Designer.
  * @property {ThemeConfig} theme - An object that merges the 'theme' passed as an options with the default theme.
  * @property {(key: keyof Dict | string) => string} i18n - An object merged based on the options 'lang' and 'labels'.
+ * @property {Size} pageSize - The size of the page being edited.
  * @property {Map<any, any>} _cache - Cache shared only during the execution of the render function (useful for caching images, etc. if needed).
  */
 export type UIRenderProps<T extends Schema> = {
     schema: T;
+    basePdf: BasePdf;
     mode: Mode;
     tabIndex?: number;
     placeholder?: string;
     stopEditing?: () => void;
     key: string;
     value: string;
-    onChange?: (value: string) => void;
+    onChange?: (arg: {
+        key: string;
+        value: any;
+    } | {
+        key: string;
+        value: any;
+    }[]) => void;
     rootElement: HTMLDivElement;
     options: UIOptions;
     theme: GlobalToken;
@@ -84,7 +95,6 @@ type PropPanelProps = {
     activeElements: HTMLElement[];
     changeSchemas: ChangeSchemas;
     schemas: SchemaForUI[];
-    pageSize: Size;
     options: UIOptions;
     theme: GlobalToken;
     i18n: (key: keyof Dict | string) => string;
@@ -95,13 +105,11 @@ export type PropPanelWidgetProps = _PropPanelWidgetProps & PropPanelProps;
  * @template T - Type of the extended Schema object.
  * @property {Record<string, PropPanelSchema> | ((propPanelProps: Omit<PropPanelProps, 'rootElement'>) => Record<string, PropPanelSchema>)} schema - A function returning a form-render schema object or the schema object itself. When a function, it takes properties passed from the designer as arguments.
  * @property {Record<string, (props: PropPanelWidgetProps) => void>} [widgets] - An object of functions returning form-render widgets. The functions take, as arguments, both form-render's WidgetProps and properties passed from the designer.
- * @property {string} defaultValue - The default input value set when adding the schema.
  * @property {T} defaultSchema - The default schema set when adding the schema.
  */
 export interface PropPanel<T extends Schema> {
     schema: ((propPanelProps: Omit<PropPanelProps, 'rootElement'>) => Record<string, PropPanelSchema>) | Record<string, PropPanelSchema>;
     widgets?: Record<string, (props: PropPanelWidgetProps) => void>;
-    defaultValue: string;
     defaultSchema: T;
 }
 /**
@@ -139,7 +147,9 @@ export type SchemaForUI = z.infer<typeof SchemaForUI>;
 export type Font = z.infer<typeof Font>;
 export type ColorType = z.infer<typeof ColorType>;
 export type BasePdf = z.infer<typeof BasePdf>;
+export type BlankPdf = z.infer<typeof BlankPdf>;
 export type Template = z.infer<typeof Template>;
+export type CommonOptions = z.infer<typeof CommonOptions>;
 export type GeneratorOptions = z.infer<typeof GeneratorOptions>;
 export type GenerateProps = z.infer<typeof GenerateProps> & {
     plugins?: Plugins;

package/package.json

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

package/src/constants.ts

@@ -1,3 +1,4 @@
+export const PDFME_VERSION = '4.0.0';
 export const PT_TO_PX_RATIO = 1.333;
 export const PT_TO_MM_RATIO = 0.3528;
 export const MM_TO_PT_RATIO = 2.8346; // https://www.ddc.co.jp/words/archives/20090701114500.html

package/src/helper.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 import { Buffer } from 'buffer';
-import { Schema, Template, Font, BasePdf, Plugins } from './types';
+import { Schema, Template, Font, BasePdf, Plugins, BlankPdf, CommonOptions } from './types';
 import {
   Inputs as InputsSchema,
   UIOptions as UIOptionsSchema,
@@ -9,6 +9,7 @@ import {
   DesignerProps as DesignerPropsSchema,
   GenerateProps as GeneratePropsSchema,
   UIProps as UIPropsSchema,
+  BlankPdf as BlankPdfSchema,
 } from './schema.js';
 import {
   MM_TO_PT_RATIO,
@@ -52,6 +53,12 @@ export const pt2px = (pt: number): number => {
   return pt * PT_TO_PX_RATIO;
 };
 
+export const px2mm = (px: number): number => {
+  // http://www.endmemo.com/sconvert/millimeterpixel.php
+  const ratio = 0.26458333333333;
+  return parseFloat(String(px)) * ratio;
+};
+
 const blob2Base64Pdf = (blob: Blob) => {
   return new Promise<string>((resolve, reject) => {
     const reader = new FileReader();
@@ -70,6 +77,19 @@ 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);
 };
 
+export const getInputFromTemplate = (template: Template): { [key: string]: string }[] => {
+  const input: { [key: string]: string } = {};
+  template.schemas.forEach((schema) => {
+    Object.entries(schema).forEach(([key, value]) => {
+      if (!value.readOnly) {
+        input[key] = value.content || '';
+      }
+    });
+  });
+
+  return [input];
+};
+
 export const getB64BasePdf = (basePdf: BasePdf) => {
   const needFetchFromNetwork =
     typeof basePdf === 'string' && !basePdf.startsWith('data:application/pdf;');
@@ -85,6 +105,9 @@ export const getB64BasePdf = (basePdf: BasePdf) => {
   return basePdf as string;
 };
 
+export const isBlankPdf = (basePdf: BasePdf): basePdf is BlankPdf =>
+  BlankPdfSchema.safeParse(basePdf).success;
+
 const getByteString = (base64: string) => Buffer.from(base64, 'base64').toString('binary');
 
 export const b64toUint8Array = (base64: string) => {
@@ -199,3 +222,118 @@ 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);
+
+interface ModifyTemplateForDynamicTableArg {
+  template: Template;
+  input: Record<string, string>;
+  _cache: Map<any, any>;
+  options: CommonOptions;
+  modifyTemplate: (arg: {
+    template: Template;
+    input: Record<string, string>;
+    _cache: Map<any, any>;
+    options: CommonOptions;
+  }) => Promise<Template>;
+  getDynamicHeight: (
+    value: string,
+    args: { schema: Schema; basePdf: BasePdf; options: CommonOptions; _cache: Map<any, any> }
+  ) => Promise<number>;
+}
+
+export const getDynamicTemplate = async (
+  arg: ModifyTemplateForDynamicTableArg
+): Promise<Template> => {
+  const { template, modifyTemplate } = arg;
+  if (!isBlankPdf(template.basePdf)) {
+    return template;
+  }
+
+  const modifiedTemplate = await modifyTemplate(arg);
+
+  const diffMap = await calculateDiffMap({ ...arg, template: modifiedTemplate });
+
+  return normalizePositionsAndPageBreak(modifiedTemplate, diffMap);
+};
+
+export const calculateDiffMap = async (arg: ModifyTemplateForDynamicTableArg) => {
+  const { template, input, _cache, options, getDynamicHeight } = arg;
+  const basePdf = template.basePdf;
+  const tmpDiffMap = new Map<number, number>();
+  if (!isBlankPdf(basePdf)) {
+    return tmpDiffMap;
+  }
+  const pageHeight = basePdf.height;
+  let pageIndex = 0;
+  for (const schemaObj of template.schemas) {
+    for (const [key, schema] of Object.entries(schemaObj)) {
+      const dynamicHeight = await getDynamicHeight(input?.[key] || '', {
+        schema,
+        basePdf,
+        options,
+        _cache,
+      });
+      if (schema.height !== dynamicHeight) {
+        tmpDiffMap.set(
+          schema.position.y + schema.height + pageHeight * pageIndex,
+          dynamicHeight - schema.height
+        );
+      }
+    }
+    pageIndex++;
+  }
+
+  const diffMap = new Map<number, number>();
+  const keys = Array.from(tmpDiffMap.keys()).sort((a, b) => a - b);
+  let additionalHeight = 0;
+
+  for (const key of keys) {
+    const value = tmpDiffMap.get(key) as number;
+    const newValue = value + additionalHeight;
+    diffMap.set(key + additionalHeight, newValue);
+    additionalHeight += newValue;
+  }
+
+  return diffMap;
+};
+
+export const normalizePositionsAndPageBreak = (
+  template: Template,
+  diffMap: Map<number, number>
+): Template => {
+  if (!isBlankPdf(template.basePdf) || diffMap.size === 0) {
+    return template;
+  }
+
+  const returnTemplate: Template = { schemas: [{}], basePdf: template.basePdf };
+  const pages = returnTemplate.schemas;
+  const pageHeight = template.basePdf.height;
+  const paddingTop = template.basePdf.padding[0];
+  const paddingBottom = template.basePdf.padding[2];
+
+  for (let i = 0; i < template.schemas.length; i += 1) {
+    const schemaObj = template.schemas[i];
+    if (!pages[i]) pages[i] = {};
+
+    for (const [key, schema] of Object.entries(schemaObj)) {
+      const { position, height } = schema;
+      let newY = position.y;
+      let pageCursor = i;
+
+      for (const [diffKey, diffValue] of diffMap) {
+        if (newY > diffKey) {
+          newY += diffValue;
+        }
+      }
+
+      while (newY + height >= pageHeight - paddingBottom) {
+        newY = newY + paddingTop - (pageHeight - paddingBottom) + paddingTop;
+        pageCursor++;
+      }
+
+      if (!pages[pageCursor]) pages[pageCursor] = {};
+      pages[pageCursor][key] = { ...schema, position: { ...position, y: newY } };
+    }
+  }
+
+  return returnTemplate;
+};

package/src/index.ts

@@ -1,4 +1,5 @@
 import {
+  PDFME_VERSION,
   MM_TO_PT_RATIO,
   PT_TO_MM_RATIO,
   PT_TO_PX_RATIO,
@@ -23,7 +24,9 @@ import type {
   Font,
   ColorType,
   BasePdf,
+  BlankPdf,
   Template,
+  CommonOptions,
   GeneratorOptions,
   Plugins,
   GenerateProps,
@@ -48,10 +51,15 @@ import {
   mm2pt,
   pt2mm,
   pt2px,
+  px2mm,
   isHexValid,
+  getInputFromTemplate,
+  isBlankPdf,
+  getDynamicTemplate,
 } from './helper.js';
 
 export {
+  PDFME_VERSION,
   MM_TO_PT_RATIO,
   PT_TO_MM_RATIO,
   PT_TO_PX_RATIO,
@@ -65,7 +73,11 @@ export {
   mm2pt,
   pt2mm,
   pt2px,
+  px2mm,
   isHexValid,
+  getInputFromTemplate,
+  isBlankPdf,
+  getDynamicTemplate,
   checkFont,
   checkInputs,
   checkUIOptions,
@@ -85,7 +97,9 @@ export type {
   Font,
   ColorType,
   BasePdf,
+  BlankPdf,
   Template,
+  CommonOptions,
   GeneratorOptions,
   Plugins,
   GenerateProps,

package/src/schema.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-const langs = ['en', 'ja', 'ar', 'th', 'pl', 'it', 'de'] as const;
+const langs = ['en', 'ja', 'ar', 'th', 'pl', 'it', 'de', 'es', 'fr'] as const;
 
 export const Lang = z.enum(langs);
 export const Dict = z.object({
@@ -19,18 +19,21 @@ export const Dict = z.object({
   notUniq: z.string(),
   noKeyName: z.string(),
   fieldsList: z.string(),
-  addNewField: z.string(),
   editField: z.string(),
   type: z.string(),
   errorOccurred: z.string(),
   errorBulkUpdateFieldName: z.string(),
   commitBulkUpdateFieldName: z.string(),
   bulkUpdateFieldName: z.string(),
+  addPageAfter: z.string(),
+  removePage: z.string(),
+  removePageConfirm: z.string(),
   hexColorPrompt: z.string(),
   // -----------------used in schemas-----------------
   'schemas.color': z.string(),
   'schemas.borderWidth': z.string(),
   'schemas.borderColor': z.string(),
+  'schemas.backgroundColor': z.string(),
   'schemas.textColor': z.string(),
   'schemas.bgColor': z.string(),
   'schemas.horizontal': z.string(),
@@ -41,6 +44,7 @@ export const Dict = z.object({
   'schemas.top': z.string(),
   'schemas.middle': z.string(),
   'schemas.bottom': z.string(),
+  'schemas.padding': z.string(),
 
   'schemas.text.fontName': z.string(),
   'schemas.text.size': z.string(),
@@ -55,6 +59,12 @@ export const Dict = z.object({
 
   'schemas.barcodes.barColor': z.string(),
   'schemas.barcodes.includetext': z.string(),
+
+  'schemas.table.alternateBackgroundColor': z.string(),
+  'schemas.table.tableStyle': z.string(),
+  'schemas.table.headStyle': z.string(),
+  'schemas.table.bodyStyle': z.string(),
+  'schemas.table.columnStyle': z.string(),
 });
 export const Mode = z.enum(['viewer', 'form', 'designer']);
 
@@ -65,25 +75,42 @@ export const Size = z.object({ height: z.number(), width: z.number() });
 export const Schema = z
   .object({
     type: z.string(),
-    readOnly: z.boolean().optional(),
-    readOnlyValue: z.string().optional(),
+    icon: z.string().optional(),
+    content: z.string().optional(),
     position: z.object({ x: z.number(), y: z.number() }),
     width: z.number(),
     height: z.number(),
     rotate: z.number().optional(),
     opacity: z.number().optional(),
+    readOnly: z.boolean().optional(),
   })
   .passthrough();
 
 const SchemaForUIAdditionalInfo = z.object({
   id: z.string(),
   key: z.string(),
-  data: z.string(),
 });
 export const SchemaForUI = Schema.merge(SchemaForUIAdditionalInfo);
 
 const ArrayBufferSchema: z.ZodSchema<ArrayBuffer> = z.any().refine((v) => v instanceof ArrayBuffer);
 const Uint8ArraySchema: z.ZodSchema<Uint8Array> = z.any().refine((v) => v instanceof Uint8Array);
+export const BlankPdf = z.object({
+  width: z.number(),
+  height: z.number(),
+  padding: z.tuple([z.number(), z.number(), z.number(), z.number()]),
+});
+
+export const BasePdf = z.union([z.string(), ArrayBufferSchema, Uint8ArraySchema, BlankPdf]);
+
+export const Template = z
+  .object({
+    schemas: z.array(z.record(Schema)),
+    basePdf: BasePdf,
+    pdfmeVersion: z.string().optional(),
+  })
+  .passthrough();
+
+export const Inputs = z.array(z.record(z.any())).min(1);
 
 export const Font = z.record(
   z.object({
@@ -93,18 +120,7 @@ export const Font = z.record(
   })
 );
 
-export const BasePdf = z.union([z.string(), ArrayBufferSchema, Uint8ArraySchema]);
-
-export const Template = z.object({
-  schemas: z.array(z.record(Schema)),
-  basePdf: BasePdf,
-  sampledata: z.array(z.record(z.string())).length(1).optional(),
-  columns: z.array(z.string()).optional(),
-});
-
-export const Inputs = z.array(z.record(z.string())).min(1);
-
-const CommonOptions = z.object({ font: Font.optional() }).passthrough();
+export const CommonOptions = z.object({ font: Font.optional() }).passthrough();
 
 const CommonProps = z.object({
   template: Template,

package/src/types.ts

@@ -11,6 +11,8 @@ import {
   Font,
   SchemaForUI,
   BasePdf,
+  BlankPdf,
+  CommonOptions,
   Template,
   GeneratorOptions,
   GenerateProps,
@@ -30,6 +32,7 @@ export type ChangeSchemas = (objs: { key: string; value: any; schemaId: string }
  * @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.
  * @property {typeof import('@pdfme/pdf-lib')} pdfLib The pdf-lib library used for rendering.
  * @property {PDFDocument} pdfDoc PDFDocument object from pdf-lib.
  * @property {PDFPage} page PDFPage object from pdf-lib.
@@ -40,6 +43,7 @@ export interface PDFRenderProps<T extends Schema> {
   key: string;
   value: string;
   schema: T;
+  basePdf: BasePdf;
   pdfLib: typeof import('@pdfme/pdf-lib');
   pdfDoc: PDFDocument;
   page: PDFPage;
@@ -53,28 +57,31 @@ export interface PDFRenderProps<T extends Schema> {
  *
  * @template T - Type of the extended Schema object.
  * @property {T} schema - Extended Schema object for rendering.
+ * @property {BasePdf} basePdf Base PDF object for rendering.
  * @property {Mode} mode - String indicating the rendering state. 'designer' is only used when the field is in edit mode in the Designer.
  * @property {number} [tabIndex] - Tab index for Form.
  * @property {string} [placeholder] - Placeholder text for Form.
  * @property {() => void} [stopEditing] - Stops editing mode, can be used when the mode is 'designer'.
  * @property {string} key - The key of the schema object.
  * @property {string} value - The string used for UI rendering.
- * @property {(value: string) => void} [onChange] - Used to change the value. Only applicable when the mode is 'form' or 'designer'.
+ * @property {(arg: { key: string; value: any } | { key: string; value: any }[]) => void} [onChange] - Used to change the value and schema properties. Only applicable when the mode is 'form' or 'designer'.
  * @property {HTMLDivElement} rootElement - The root HTMLDivElement for the UI.
  * @property {UIOptions} options - Options object passed from the Viewer, Form, or Designer.
  * @property {ThemeConfig} theme - An object that merges the 'theme' passed as an options with the default theme.
  * @property {(key: keyof Dict | string) => string} i18n - An object merged based on the options 'lang' and 'labels'.
+ * @property {Size} pageSize - The size of the page being edited.
  * @property {Map<any, any>} _cache - Cache shared only during the execution of the render function (useful for caching images, etc. if needed).
  */
 export type UIRenderProps<T extends Schema> = {
   schema: T;
+  basePdf: BasePdf;
   mode: Mode;
   tabIndex?: number;
   placeholder?: string;
   stopEditing?: () => void;
   key: string;
   value: string;
-  onChange?: (value: string) => void;
+  onChange?: (arg: { key: string; value: any } | { key: string; value: any }[]) => void;
   rootElement: HTMLDivElement;
   options: UIOptions;
   theme: GlobalToken;
@@ -102,7 +109,6 @@ type PropPanelProps = {
   activeElements: HTMLElement[];
   changeSchemas: ChangeSchemas;
   schemas: SchemaForUI[];
-  pageSize: Size;
   options: UIOptions;
   theme: GlobalToken;
   i18n: (key: keyof Dict | string) => string;
@@ -115,7 +121,6 @@ export type PropPanelWidgetProps = _PropPanelWidgetProps & PropPanelProps;
  * @template T - Type of the extended Schema object.
  * @property {Record<string, PropPanelSchema> | ((propPanelProps: Omit<PropPanelProps, 'rootElement'>) => Record<string, PropPanelSchema>)} schema - A function returning a form-render schema object or the schema object itself. When a function, it takes properties passed from the designer as arguments.
  * @property {Record<string, (props: PropPanelWidgetProps) => void>} [widgets] - An object of functions returning form-render widgets. The functions take, as arguments, both form-render's WidgetProps and properties passed from the designer.
- * @property {string} defaultValue - The default input value set when adding the schema.
  * @property {T} defaultSchema - The default schema set when adding the schema.
  */
 export interface PropPanel<T extends Schema> {
@@ -124,7 +129,6 @@ export interface PropPanel<T extends Schema> {
     | Record<string, PropPanelSchema>;
 
   widgets?: Record<string, (props: PropPanelWidgetProps) => void>;
-  defaultValue: string;
   defaultSchema: T;
 }
 
@@ -162,7 +166,9 @@ export type SchemaForUI = z.infer<typeof SchemaForUI>;
 export type Font = z.infer<typeof Font>;
 export type ColorType = z.infer<typeof ColorType>;
 export type BasePdf = z.infer<typeof BasePdf>;
+export type BlankPdf = z.infer<typeof BlankPdf>;
 export type Template = z.infer<typeof Template>;
+export type CommonOptions = z.infer<typeof CommonOptions>;
 export type GeneratorOptions = z.infer<typeof GeneratorOptions>;
 export type GenerateProps = z.infer<typeof GenerateProps> & { plugins?: Plugins };
 export type UIOptions = z.infer<typeof UIOptions> & { theme?: ThemeConfig };