@pdfme/schemas 3.2.3-dev.1 → 4.0.0-alpha.0

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

@@ -0,0 +1,91 @@
+import type { ALIGNMENT, VERTICAL_ALIGNMENT } from '../text/types';
+import type { Schema } from '@pdfme/common';
+export type Spacing = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+type BorderInsets = Spacing;
+type BoxDimensions = Spacing;
+export interface CellStyle {
+    fontName?: string;
+    alignment: ALIGNMENT;
+    verticalAlignment: VERTICAL_ALIGNMENT;
+    fontSize: number;
+    lineHeight: number;
+    characterSpacing: number;
+    fontColor: string;
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: BoxDimensions;
+    padding: BoxDimensions;
+}
+export type CellSchema = Schema & CellStyle;
+export interface TableSchema extends Schema {
+    showHead: boolean;
+    head: string[];
+    headWidthPercentages: number[];
+    __bodyRange?: {
+        start: number;
+        end?: number;
+    };
+    tableStyles: {
+        borderColor: string;
+        borderWidth: number;
+    };
+    headStyles: CellStyle;
+    bodyStyles: CellStyle & {
+        alternateBackgroundColor: string;
+    };
+    columnStyles: {
+        alignment?: {
+            [colIndex: number]: ALIGNMENT;
+        };
+    };
+}
+export interface Styles {
+    fontName: string | undefined;
+    backgroundColor: string;
+    textColor: string;
+    lineHeight: number;
+    characterSpacing: number;
+    alignment: 'left' | 'center' | 'right';
+    verticalAlignment: 'top' | 'middle' | 'bottom';
+    fontSize: number;
+    cellPadding: Spacing;
+    lineColor: string;
+    lineWidth: BorderInsets;
+    cellWidth: number;
+    minCellHeight: number;
+    minCellWidth: number;
+}
+export interface TableInput {
+    settings: Settings;
+    styles: StylesProps;
+    content: ContentInput;
+}
+interface ContentInput {
+    body: string[][];
+    head: string[][];
+    columns: number[];
+}
+export interface Settings {
+    startY: number;
+    margin: Spacing;
+    tableWidth: number;
+    showHead: boolean;
+    tableLineWidth: number;
+    tableLineColor: string;
+}
+export interface StylesProps {
+    styles: Partial<Styles>;
+    headStyles: Partial<Styles>;
+    bodyStyles: Partial<Styles>;
+    alternateRowStyles: Partial<Styles>;
+    columnStyles: {
+        [key: string]: Partial<Styles>;
+    };
+}
+export type Section = 'head' | 'body';
+export {};

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

@@ -0,0 +1,3 @@
+import type { UIRenderProps } from '@pdfme/common';
+import type { TableSchema } from './types.js';
+export declare const uiRender: (arg: UIRenderProps<TableSchema>) => Promise<void>;

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

@@ -9,7 +9,7 @@ export declare const getBrowserVerticalFontAdjustments: (fontKitFont: FontKitFon
 export declare const getFontDescentInPt: (fontKitFont: FontKitFont, fontSize: number) => number;
 export declare const heightOfFontAtSize: (fontKitFont: FontKitFont, fontSize: number) => number;
 export declare const widthOfTextAtSize: (text: string, fontKitFont: FontKitFont, fontSize: number, characterSpacing: number) => number;
-export declare const getFontKitFont: (textSchema: TextSchema, font: Font, _cache: Map<any, any>) => Promise<fontkit.Font>;
+export declare const getFontKitFont: (fontName: string | undefined, font: Font, _cache: Map<any, any>) => Promise<fontkit.Font>;
 /**
  * Recursively splits the line at getSplitPosition.
  * If there is some leftover, split the rest again in the same manner.
@@ -28,3 +28,10 @@ export declare const calculateDynamicFontSize: ({ textSchema, font, value, start
     startingFontSize?: number | undefined;
     _cache: Map<any, any>;
 }) => Promise<number>;
+export declare const splitTextToSize: (arg: {
+    value: string;
+    characterSpacing: number;
+    boxWidthInPt: number;
+    fontSize: number;
+    fontKitFont: fontkit.Font;
+}) => string[];

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

@@ -28,3 +28,5 @@ 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;
+export declare const px2mm: (px: number) => number;
+export declare const cloneDeep: <T>(value: T) => T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/schemas",
-  "version": "3.2.3-dev.1",
+  "version": "4.0.0-alpha.0",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/barcodes/propPanel.ts

@@ -16,11 +16,11 @@ const defaultIncludetext = { includetext: DEFAULT_BARCODE_INCLUDETEXT };
 const position = { x: 0, y: 0 };
 const default40x20 = { width: 40, height: 20 };
 
-const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[] = [
+const barcodeDefaults: { defaultSchema: BarcodeSchema }[] = [
   {
-    defaultValue: 'https://pdfme.com/',
     defaultSchema: {
       type: 'qrcode',
+      content: 'https://pdfme.com/',
       position,
       ...defaultColors,
       width: 30,
@@ -30,9 +30,9 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '6540123789-A-K-Z',
     defaultSchema: {
       type: 'japanpost',
+      content: '6540123789-A-K-Z',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -44,9 +44,9 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '2112345678900',
     defaultSchema: {
       type: 'ean13',
+      content: '2112345678900',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -58,9 +58,9 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '02345673',
     defaultSchema: {
       type: 'ean8',
+      content: '02345673',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -71,9 +71,9 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: 'THIS IS CODE 39',
     defaultSchema: {
       type: 'code39',
+      content: 'THIS IS CODE 39',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -83,9 +83,9 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: 'This is Code 128!',
     defaultSchema: {
       type: 'code128',
+      content: 'This is Code 128!',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -96,9 +96,9 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: 'A0123456789B',
     defaultSchema: {
       type: 'nw7',
+      content: 'A0123456789B',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -109,9 +109,9 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '04601234567893',
     defaultSchema: {
       type: 'itf14',
+      content: '04601234567893',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -123,9 +123,9 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '416000336108',
     defaultSchema: {
       type: 'upca',
+      content: '416000336108',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -137,9 +137,9 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '00123457',
     defaultSchema: {
       type: 'upce',
+      content: '00123457',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -150,9 +150,9 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '(01)03453120000011(17)191125(10)ABCD1234',
     defaultSchema: {
       type: 'gs1datamatrix',
+      content: '(01)03453120000011(17)191125(10)ABCD1234',
       position,
       ...defaultColors,
       width: 30,

package/src/barcodes/uiRender.ts

@@ -69,7 +69,7 @@ export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
     input.placeholder = placeholder || '';
     input.tabIndex = tabIndex || 0;
     input.addEventListener('change', (e: Event) => {
-      onChange && onChange((e.target as HTMLInputElement).value);
+      onChange && onChange({ key: 'content', value: (e.target as HTMLInputElement).value });
     });
     input.addEventListener('blur', () => {
       stopEditing && stopEditing();

package/src/graphics/image.ts

@@ -5,16 +5,10 @@ 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 { convertForPdfLayoutProps, addAlphaToHex, isEditable, readFile, px2mm } 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 =
@@ -133,7 +127,7 @@ const imageSchema: Plugin<ImageSchema> = {
       };
       Object.assign(button.style, buttonStyle);
       button.addEventListener('click', () => {
-        onChange && onChange('');
+        onChange && onChange({ key: 'content', value: '' });
       });
       container.appendChild(button);
     }
@@ -168,7 +162,9 @@ const imageSchema: Plugin<ImageSchema> = {
       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));
+        readFile(changeEvent.target.files).then(
+          (result) => onChange && onChange({ key: 'content', value: result as string })
+        );
       });
       input.addEventListener('blur', () => stopEditing && stopEditing());
       label.appendChild(input);
@@ -176,9 +172,9 @@ const imageSchema: Plugin<ImageSchema> = {
   },
   propPanel: {
     schema: {},
-    defaultValue,
     defaultSchema: {
       type: 'image',
+      content: defaultValue,
       position: { x: 0, y: 0 },
       width: 40,
       height: 40,
@@ -201,7 +197,6 @@ export const readOnlyImage: Plugin<ImageSchema> = {
       ...imageSchema.propPanel.defaultSchema,
       type: 'readOnlyImage',
       readOnly: true,
-      readOnlyValue: defaultValue,
     },
   },
 };

package/src/graphics/svg.ts

@@ -41,7 +41,7 @@ const svgSchema: Plugin<SVGSchema> = {
 
       textarea.addEventListener('change', (e: Event) => {
         const newValue = (e.target as HTMLTextAreaElement).value;
-        onChange && onChange(newValue);
+        onChange && onChange({ key: 'content', value: newValue });
       });
       rootElement.appendChild(container);
       textarea.setSelectionRange(value.length, value.length);
@@ -71,9 +71,9 @@ const svgSchema: Plugin<SVGSchema> = {
   },
   propPanel: {
     schema: {},
-    defaultValue,
     defaultSchema: {
       type: 'svg',
+      content: defaultValue,
       position: { x: 0, y: 0 },
       width: 40,
       height: 40,
@@ -92,7 +92,6 @@ export const readOnlySvg: Plugin<SVGSchema> = {
       ...svgSchema.propPanel.defaultSchema,
       type: 'readOnlySvg',
       readOnly: true,
-      readOnlyValue: defaultValue,
     },
   },
 };

package/src/index.ts

@@ -3,6 +3,8 @@ 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 table from './tables/index.js';
+import { modifyTemplateForTable, getDynamicHeightForTable } from './tables/dynamicTemplate.js';
 import { rectangle, ellipse } from './shapes/rectAndEllipse.js';
 import { convertForPdfLayoutProps, rotatePoint } from './utils.js';
 
@@ -17,6 +19,9 @@ export {
   readOnlySvg,
   barcodes,
   line,
+  table,
+  modifyTemplateForTable,
+  getDynamicHeightForTable,
   rectangle,
   ellipse,
   builtInPlugins,

package/src/shapes/line.ts

@@ -11,6 +11,7 @@ interface LineSchema extends Schema {
 const lineSchema: Plugin<LineSchema> = {
   pdf: (arg: PDFRenderProps<LineSchema>) => {
     const { page, schema } = arg;
+    if (schema.width === 0 || schema.height === 0 || !schema.color) return;
     const pageHeight = page.getHeight();
     const {
       width,
@@ -24,14 +25,14 @@ const lineSchema: Plugin<LineSchema> = {
       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),
+      color: hex2RgbColor(schema.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.backgroundColor = schema.color ?? 'transparent';
     div.style.width = '100%';
     div.style.height = '100%';
     rootElement.appendChild(div);
@@ -43,15 +44,9 @@ const lineSchema: Plugin<LineSchema> = {
         type: 'string',
         widget: 'color',
         required: true,
-        rules: [
-          {
-            pattern: HEX_COLOR_PATTERN,
-            message: i18n('hexColorPrompt'),
-          },
-        ],
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
       },
     }),
-    defaultValue: '',
     defaultSchema: {
       type: 'line',
       position: { x: 0, y: 0 },

package/src/shapes/rectAndEllipse.ts

@@ -2,14 +2,14 @@ import { Plugin, Schema, mm2pt } from '@pdfme/common';
 import { HEX_COLOR_PATTERN } from '../constants.js';
 import { hex2RgbColor, convertForPdfLayoutProps } from '../utils.js';
 
-interface Shape extends Schema {
+interface ShapeSchema extends Schema {
   type: 'ellipse' | 'rectangle';
   borderWidth: number;
   borderColor: string;
   color: string;
 }
 
-const shape: Plugin<Shape> = {
+const shape: Plugin<ShapeSchema> = {
   ui: (arg) => {
     const { schema, rootElement } = arg;
     const div = document.createElement('div');
@@ -28,6 +28,7 @@ const shape: Plugin<Shape> = {
   },
   pdf: (arg) => {
     const { schema, page } = arg;
+    if (!schema.color && !schema.borderColor) return;
     const pageHeight = page.getHeight();
     const cArg = { schema, pageHeight };
     const { position, width, height, rotate, opacity } = convertForPdfLayoutProps(cArg);
@@ -68,7 +69,7 @@ const shape: Plugin<Shape> = {
         title: i18n('schemas.borderWidth'),
         type: 'number',
         widget: 'inputNumber',
-        min: 0,
+        props: { min: 0 },
         step: 1,
       },
       borderColor: {
@@ -84,7 +85,6 @@ const shape: Plugin<Shape> = {
         rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
       },
     }),
-    defaultValue: '',
     defaultSchema: {
       type: 'rectangle',
       position: { x: 0, y: 0 },

package/src/tables/cell.ts

@@ -0,0 +1,157 @@
+import {
+  DEFAULT_FONT_NAME,
+  Plugin,
+  PDFRenderProps,
+  UIRenderProps,
+  getFallbackFontName,
+} from '@pdfme/common';
+import { uiRender as textUiRender } from '../text/uiRender.js';
+import { pdfRender as textPdfRender } from '../text/pdfRender.js';
+import line from '../shapes/line.js';
+import { rectangle } from '../shapes/rectAndEllipse.js';
+import type { CellSchema } from './types';
+import { getCellPropPanelSchema, getDefaultCellStyles } from './helper.js';
+const linePdfRender = line.pdf;
+const rectanglePdfRender = rectangle.pdf;
+
+const renderLine = async (
+  arg: PDFRenderProps<CellSchema>,
+  schema: CellSchema,
+  position: { x: number; y: number },
+  width: number,
+  height: number
+) =>
+  linePdfRender({
+    ...arg,
+    schema: { ...schema, type: 'line', position, width, height, color: schema.borderColor },
+  });
+
+const createTextDiv = (schema: CellSchema) => {
+  const { borderWidth: bw, width, height, padding: pd } = schema;
+  const textDiv = document.createElement('div');
+  textDiv.style.position = 'absolute';
+  textDiv.style.zIndex = '1';
+  textDiv.style.width = `${width - bw.left - bw.right - pd.left - pd.right}mm`;
+  textDiv.style.height = `${height - bw.top - bw.bottom - pd.top - pd.bottom}mm`;
+  textDiv.style.top = `${bw.top + pd.top}mm`;
+  textDiv.style.left = `${bw.left + pd.left}mm`;
+  return textDiv;
+};
+
+const createLineDiv = (
+  width: string,
+  height: string,
+  top: string | null,
+  right: string | null,
+  bottom: string | null,
+  left: string | null,
+  borderColor: string
+) => {
+  const div = document.createElement('div');
+  div.style.width = width;
+  div.style.height = height;
+  div.style.position = 'absolute';
+  if (top !== null) div.style.top = top;
+  if (right !== null) div.style.right = right;
+  if (bottom !== null) div.style.bottom = bottom;
+  if (left !== null) div.style.left = left;
+  div.style.backgroundColor = borderColor;
+  return div;
+};
+
+const cellSchema: Plugin<CellSchema> = {
+  pdf: async (arg: PDFRenderProps<CellSchema>) => {
+    const { schema } = arg;
+    const { position, width, height, borderWidth, padding } = schema;
+
+    await Promise.all([
+      // BACKGROUND
+      rectanglePdfRender({
+        ...arg,
+        schema: {
+          ...schema,
+          type: 'rectangle',
+          width: schema.width,
+          height: schema.height,
+          borderWidth: 0,
+          borderColor: '',
+          color: schema.backgroundColor,
+        },
+      }),
+      // TOP
+      renderLine(arg, schema, { x: position.x, y: position.y }, width, borderWidth.top),
+      // RIGHT
+      renderLine(
+        arg,
+        schema,
+        { x: position.x + width - borderWidth.right, y: position.y },
+        borderWidth.right,
+        height
+      ),
+      // BOTTOM
+      renderLine(
+        arg,
+        schema,
+        { x: position.x, y: position.y + height - borderWidth.bottom },
+        width,
+        borderWidth.bottom
+      ),
+      // LEFT
+      renderLine(arg, schema, { x: position.x, y: position.y }, borderWidth.left, height),
+    ]);
+    // TEXT
+    await textPdfRender({
+      ...arg,
+      schema: {
+        ...schema,
+        type: 'text',
+        backgroundColor: '',
+        position: {
+          x: position.x + borderWidth.left + padding.left,
+          y: position.y + borderWidth.top + padding.top,
+        },
+        width: width - borderWidth.left - borderWidth.right - padding.left - padding.right,
+        height: height - borderWidth.top - borderWidth.bottom - padding.top - padding.bottom,
+      },
+    });
+  },
+  ui: async (arg: UIRenderProps<CellSchema>) => {
+    const { schema, rootElement } = arg;
+    const { borderWidth, width, height, borderColor, backgroundColor } = schema;
+    rootElement.style.backgroundColor = backgroundColor;
+
+    const textDiv = createTextDiv(schema);
+    await textUiRender({
+      ...arg,
+      schema: { ...schema, backgroundColor: '' },
+      rootElement: textDiv,
+    });
+    rootElement.appendChild(textDiv);
+
+    const lines = [
+      createLineDiv(`${width}mm`, `${borderWidth.top}mm`, '0mm', null, null, '0mm', borderColor),
+      createLineDiv(`${width}mm`, `${borderWidth.bottom}mm`, null, null, '0mm', '0mm', borderColor),
+      createLineDiv(`${borderWidth.left}mm`, `${height}mm`, '0mm', null, null, '0mm', borderColor),
+      createLineDiv(`${borderWidth.right}mm`, `${height}mm`, '0mm', '0mm', null, null, borderColor),
+    ];
+
+    lines.forEach((line) => rootElement.appendChild(line));
+  },
+  propPanel: {
+    schema: ({ options, i18n }) => {
+      const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
+      const fontNames = Object.keys(font);
+      const fallbackFontName = getFallbackFontName(font);
+      return getCellPropPanelSchema({ i18n, fontNames, fallbackFontName });
+    },
+    defaultSchema: {
+      type: 'cell',
+      content: 'Type Something...',
+      position: { x: 0, y: 0 },
+      width: 50,
+      height: 15,
+      ...getDefaultCellStyles(),
+    },
+  },
+};
+export default cellSchema;