@pdfme/schemas 3.4.3 → 4.0.0

package/src/tables/pdfRender.ts

@@ -0,0 +1,113 @@
+import type { TableSchema } from './types';
+import type { PDFRenderProps } from '@pdfme/common';
+import { Cell, Table, Row, Column } from './classes';
+import { rectangle } from '../shapes/rectAndEllipse';
+import cell from './cell';
+import { getBodyWithRange } from './helper';
+import { createSingleTable } from './tableHelper';
+
+type Pos = { x: number; y: number };
+
+const rectanglePdfRender = rectangle.pdf;
+const cellPdfRender = cell.pdf;
+
+async function drawCell(arg: PDFRenderProps<TableSchema>, cell: Cell) {
+  await cellPdfRender({
+    ...arg,
+    value: cell.raw,
+    schema: {
+      type: 'cell',
+      position: { x: cell.x, y: cell.y },
+      width: cell.width,
+      height: cell.height,
+      fontName: cell.styles.fontName,
+      alignment: cell.styles.alignment,
+      verticalAlignment: cell.styles.verticalAlignment,
+      fontSize: cell.styles.fontSize,
+      lineHeight: cell.styles.lineHeight,
+      characterSpacing: cell.styles.characterSpacing,
+      backgroundColor: cell.styles.backgroundColor,
+      fontColor: cell.styles.textColor,
+      borderColor: cell.styles.lineColor,
+      borderWidth: cell.styles.lineWidth,
+      padding: cell.styles.cellPadding,
+    },
+  });
+}
+
+async function drawRow(
+  arg: PDFRenderProps<TableSchema>,
+  table: Table,
+  row: Row,
+  cursor: Pos,
+  columns: Column[]
+) {
+  cursor.x = table.settings.margin.left;
+  for (const column of columns) {
+    const cell = row.cells[column.index];
+    if (!cell) {
+      cursor.x += column.width;
+      continue;
+    }
+
+    cell.x = cursor.x;
+    cell.y = cursor.y;
+
+    await drawCell(arg, cell);
+
+    cursor.x += column.width;
+  }
+  cursor.y += row.height;
+}
+
+async function drawTableBorder(
+  arg: PDFRenderProps<TableSchema>,
+  table: Table,
+  startPos: Pos,
+  cursor: Pos
+) {
+  const lineWidth = table.settings.tableLineWidth;
+  const lineColor = table.settings.tableLineColor;
+  if (!lineWidth || !lineColor) return;
+  await rectanglePdfRender({
+    ...arg,
+    schema: {
+      type: 'rectangle',
+      borderWidth: lineWidth,
+      borderColor: lineColor,
+      color: '',
+      position: { x: startPos.x, y: startPos.y },
+      width: table.getWidth(),
+      height: cursor.y - startPos.y,
+      readOnly: true,
+    },
+  });
+}
+
+async function drawTable(arg: PDFRenderProps<TableSchema>, table: Table): Promise<void> {
+  const settings = table.settings;
+  const startY = settings.startY;
+  const margin = settings.margin;
+  const cursor = { x: margin.left, y: startY };
+
+  const startPos = Object.assign({}, cursor);
+
+  if (settings.showHead) {
+    for (const row of table.head) {
+      await drawRow(arg, table, row, cursor, table.columns);
+    }
+  }
+
+  for (const row of table.body) {
+    await drawRow(arg, table, row, cursor, table.columns);
+  }
+
+  await drawTableBorder(arg, table, startPos, cursor);
+}
+
+export const pdfRender = async (arg: PDFRenderProps<TableSchema>) => {
+  const { value, schema } = arg;
+  const body = getBodyWithRange(value, schema.__bodyRange);
+  const table = await createSingleTable(body, arg);
+  await drawTable(arg, table);
+};

package/src/tables/propPanel.ts

@@ -0,0 +1,91 @@
+import type { PropPanel } from '@pdfme/common';
+import type { TableSchema } from './types';
+import { getFallbackFontName, DEFAULT_FONT_NAME } from '@pdfme/common';
+import {
+  getDefaultCellStyles,
+  getCellPropPanelSchema,
+  getColumnStylesPropPanelSchema,
+} from './helper.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+
+export const propPanel: PropPanel<TableSchema> = {
+  schema: ({ activeSchema, options, i18n }) => {
+    // @ts-ignore
+    const head = (activeSchema.head || []) as string[];
+    const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
+    const fontNames = Object.keys(font);
+    const fallbackFontName = getFallbackFontName(font);
+    return {
+      tableStyles: {
+        title: i18n('schemas.table.tableStyle'),
+        type: 'object',
+        widget: 'Card',
+        span: 24,
+        properties: {
+          borderWidth: {
+            title: i18n('schemas.borderWidth'),
+            type: 'number',
+            widget: 'inputNumber',
+            props: { min: 0, step: 0.1 },
+            step: 1,
+          },
+          borderColor: {
+            title: i18n('schemas.borderColor'),
+            type: 'string',
+            widget: 'color',
+            rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+          },
+        },
+      },
+      headStyles: {
+        title: i18n('schemas.table.headStyle'),
+        type: 'object',
+        widget: 'Card',
+        span: 24,
+        properties: getCellPropPanelSchema({ i18n, fallbackFontName, fontNames }),
+      },
+      bodyStyles: {
+        title: i18n('schemas.table.bodyStyle'),
+        type: 'object',
+        widget: 'Card',
+        span: 24,
+        properties: getCellPropPanelSchema({ i18n, fallbackFontName, fontNames, isBody: true }),
+      },
+      columnStyles: {
+        title: i18n('schemas.table.columnStyle'),
+        type: 'object',
+        widget: 'Card',
+        span: 24,
+        properties: getColumnStylesPropPanelSchema({ head, i18n }),
+      },
+    };
+  },
+  defaultSchema: {
+    type: 'table',
+    icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>',
+    position: { x: 0, y: 0 },
+    width: 150,
+    height: 20,
+    content: JSON.stringify([
+      ['Alice', 'New York', 'Alice is a freelance web designer and developer'],
+      ['Bob', 'Paris', 'Bob is a freelance illustrator and graphic designer'],
+    ]),
+    showHead: true,
+    head: ['Name', 'City', 'Description'],
+    headWidthPercentages: [30, 30, 40],
+    tableStyles: {
+      borderColor: '#000000',
+      borderWidth: 0.3,
+    },
+    headStyles: Object.assign(getDefaultCellStyles(), {
+      fontColor: '#ffffff',
+      backgroundColor: '#2980ba',
+      borderColor: '',
+      borderWidth: { top: 0, right: 0, bottom: 0, left: 0 },
+    }),
+    bodyStyles: Object.assign(getDefaultCellStyles(), {
+      alternateBackgroundColor: '#f5f5f5',
+    }),
+    columnStyles: {},
+  },
+};

package/src/tables/tableHelper.ts

@@ -0,0 +1,322 @@
+import {
+  Schema,
+  isBlankPdf,
+  BasePdf,
+  CommonOptions,
+  getDefaultFont,
+  getFallbackFontName,
+} from '@pdfme/common';
+import type {
+  TableSchema,
+  CellStyle,
+  Styles,
+  Spacing,
+  TableInput,
+  StylesProps,
+  Section,
+} from './types';
+import { cloneDeep } from '../utils';
+import { Cell, Column, Row, Table } from './classes';
+
+type StyleProp = 'styles' | 'headStyles' | 'bodyStyles' | 'alternateRowStyles' | 'columnStyles';
+
+interface CreateTableArgs {
+  schema: Schema;
+  basePdf: BasePdf;
+  options: CommonOptions;
+  _cache: Map<any, any>;
+}
+
+interface UserOptions {
+  startY: number;
+  tableWidth: number;
+  margin: Spacing;
+  showHead: boolean;
+  tableLineWidth?: number;
+  tableLineColor?: string;
+  head?: string[][];
+  body?: string[][];
+
+  styles?: Partial<Styles>;
+  bodyStyles?: Partial<Styles>;
+  headStyles?: Partial<Styles>;
+  alternateRowStyles?: Partial<Styles>;
+  columnStyles?: {
+    [key: string]: Partial<Styles>;
+  };
+}
+
+function parseSection(
+  sectionName: Section,
+  sectionRows: string[][],
+  columns: Column[],
+  styleProps: StylesProps,
+  fallbackFontName: string
+): Row[] {
+  const rowSpansLeftForColumn: { [key: string]: { left: number; times: number } } = {};
+  const result = sectionRows.map((rawRow, rowIndex) => {
+    let skippedRowForRowSpans = 0;
+    const cells: { [key: string]: Cell } = {};
+
+    let colSpansAdded = 0;
+    let columnSpansLeft = 0;
+    for (const column of columns) {
+      if (
+        rowSpansLeftForColumn[column.index] == null ||
+        rowSpansLeftForColumn[column.index].left === 0
+      ) {
+        if (columnSpansLeft === 0) {
+          let rawCell;
+          if (Array.isArray(rawRow)) {
+            rawCell = rawRow[column.index - colSpansAdded - skippedRowForRowSpans];
+          } else {
+            rawCell = rawRow[column.index];
+          }
+          const styles = cellStyles(sectionName, column, rowIndex, styleProps, fallbackFontName);
+          const cell = new Cell(rawCell, styles, sectionName);
+          cells[column.index] = cell;
+
+          columnSpansLeft = 0;
+          rowSpansLeftForColumn[column.index] = {
+            left: 0,
+            times: columnSpansLeft,
+          };
+        } else {
+          columnSpansLeft--;
+          colSpansAdded++;
+        }
+      } else {
+        rowSpansLeftForColumn[column.index].left--;
+        columnSpansLeft = rowSpansLeftForColumn[column.index].times;
+        skippedRowForRowSpans++;
+      }
+    }
+    return new Row(rawRow, rowIndex, sectionName, cells);
+  });
+  return result;
+}
+
+function parseContent4Table(input: TableInput, fallbackFontName: string) {
+  const content = input.content;
+  const columns = content.columns.map((index) => new Column(index));
+  const styles = input.styles;
+  return {
+    columns,
+    head: parseSection('head', content.head, columns, styles, fallbackFontName),
+    body: parseSection('body', content.body, columns, styles, fallbackFontName),
+  };
+}
+
+function cellStyles(
+  sectionName: Section,
+  column: Column,
+  rowIndex: number,
+  styles: StylesProps,
+  fallbackFontName: string
+) {
+  let sectionStyles;
+  if (sectionName === 'head') {
+    sectionStyles = styles.headStyles;
+  } else if (sectionName === 'body') {
+    sectionStyles = styles.bodyStyles;
+  }
+  const otherStyles = Object.assign({}, styles.styles, sectionStyles);
+
+  const colStyles = styles.columnStyles[column.index] || styles.columnStyles[column.index] || {};
+
+  const rowStyles =
+    sectionName === 'body' && rowIndex % 2 === 0
+      ? Object.assign({}, styles.alternateRowStyles)
+      : {};
+
+  const defaultStyle = {
+    fontName: fallbackFontName,
+    backgroundColor: '',
+    textColor: '#000000',
+    lineHeight: 1,
+    characterSpacing: 0,
+    alignment: 'left',
+    verticalAlignment: 'middle',
+    fontSize: 10,
+    cellPadding: 5,
+    lineColor: '#000000',
+    lineWidth: 0,
+    minCellHeight: 0,
+    minCellWidth: 0,
+  };
+  return Object.assign(defaultStyle, otherStyles, rowStyles, colStyles) as Styles;
+}
+
+function mapCellStyle(style: CellStyle): Partial<Styles> {
+  return {
+    fontName: style.fontName,
+    alignment: style.alignment,
+    verticalAlignment: style.verticalAlignment,
+    fontSize: style.fontSize,
+    lineHeight: style.lineHeight,
+    characterSpacing: style.characterSpacing,
+    backgroundColor: style.backgroundColor,
+    // ---
+    textColor: style.fontColor,
+    lineColor: style.borderColor,
+    lineWidth: style.borderWidth,
+    cellPadding: style.padding,
+  };
+}
+
+function createTableWithAvailableHeight(
+  tableBody: Row[],
+  availableHeight: number,
+  args: CreateTableArgs
+) {
+  let limit = availableHeight;
+  const newTableBody: string[][] = [];
+  let index = 0;
+  while (limit > 0 && index < tableBody.length) {
+    const row = tableBody.slice(0, index + 1).pop();
+    if (!row) break;
+    const rowHeight = row.height;
+    if (limit - rowHeight < 0) {
+      break;
+    }
+    newTableBody.push(row.raw);
+    limit -= rowHeight;
+    index++;
+  }
+  return createSingleTable(newTableBody, args);
+}
+
+function getTableOptions(schema: TableSchema, body: string[][]): UserOptions {
+  const columnStylesWidth = schema.headWidthPercentages.reduce(
+    (acc, cur, i) => ({ ...acc, [i]: { cellWidth: schema.width * (cur / 100) } }),
+    {} as Record<number, Partial<Styles>>
+  );
+
+  const columnStylesAlignment = Object.entries(schema.columnStyles.alignment || {}).reduce(
+    (acc, [key, value]) => ({ ...acc, [key]: { alignment: value } }),
+    {} as Record<number, Partial<Styles>>
+  );
+
+  const allKeys = new Set([
+    ...Object.keys(columnStylesWidth).map(Number),
+    ...Object.keys(columnStylesAlignment).map(Number),
+  ]);
+  const columnStyles = Array.from(allKeys).reduce((acc, key) => {
+    const widthStyle = columnStylesWidth[key] || {};
+    const alignmentStyle = columnStylesAlignment[key] || {};
+    return { ...acc, [key]: { ...widthStyle, ...alignmentStyle } };
+  }, {} as Record<number, Partial<Styles>>);
+
+  return {
+    head: [schema.head],
+    body,
+    showHead: schema.showHead,
+    startY: schema.position.y,
+    tableWidth: schema.width,
+    tableLineColor: schema.tableStyles.borderColor,
+    tableLineWidth: schema.tableStyles.borderWidth,
+    headStyles: mapCellStyle(schema.headStyles),
+    bodyStyles: mapCellStyle(schema.bodyStyles),
+    alternateRowStyles: { backgroundColor: schema.bodyStyles.alternateBackgroundColor },
+    columnStyles,
+    margin: { top: 0, right: 0, left: schema.position.x, bottom: 0 },
+  };
+}
+
+function parseStyles(cInput: UserOptions) {
+  const styleOptions: StylesProps = {
+    styles: {},
+    headStyles: {},
+    bodyStyles: {},
+    alternateRowStyles: {},
+    columnStyles: {},
+  };
+  for (const prop of Object.keys(styleOptions) as StyleProp[]) {
+    if (prop === 'columnStyles') {
+      const current = cInput[prop];
+      styleOptions.columnStyles = Object.assign({}, current);
+    } else {
+      const allOptions = [cInput];
+      const styles = allOptions.map((opts) => opts[prop] || {});
+      styleOptions[prop] = Object.assign({}, styles[0], styles[1], styles[2]);
+    }
+  }
+  return styleOptions;
+}
+
+function parseContent4Input(options: UserOptions) {
+  const head = options.head || [];
+  const body = options.body || [];
+  const columns = (head[0] || body[0] || []).map((_, index) => index);
+  return { columns, head, body };
+}
+
+function parseInput(schema: TableSchema, body: string[][]): TableInput {
+  const options = getTableOptions(schema, body);
+  const styles = parseStyles(options);
+  const settings = {
+    startY: options.startY,
+    margin: options.margin,
+    tableWidth: options.tableWidth,
+    showHead: options.showHead,
+    tableLineWidth: options.tableLineWidth ?? 0,
+    tableLineColor: options.tableLineColor ?? '',
+  };
+
+  const content = parseContent4Input(options);
+
+  return { content, styles, settings };
+}
+
+export function createSingleTable(body: string[][], args: CreateTableArgs) {
+  const { options, _cache, basePdf } = args;
+  if (!isBlankPdf(basePdf)) throw new Error('[@pdfme/schema/table] Blank PDF is not supported');
+
+  const input = parseInput(args.schema as TableSchema, body);
+
+  const font = options.font || getDefaultFont();
+
+  const fallbackFontName = getFallbackFontName(font);
+
+  const content = parseContent4Table(input, fallbackFontName);
+
+  return Table.create({ input, content, font, _cache });
+}
+
+export async function createMultiTables(body: string[][], args: CreateTableArgs): Promise<Table[]> {
+  const { basePdf, schema } = args;
+
+  if (!isBlankPdf(basePdf)) throw new Error('[@pdfme/schema/table] Blank PDF is not supported');
+  const pageHeight = basePdf.height;
+  const paddingBottom = basePdf.padding[2];
+  const paddingTop = basePdf.padding[0];
+  let availableHeight = pageHeight - paddingBottom - schema.position.y;
+
+  const testTable = await createSingleTable(body, args);
+  let remainingBody = testTable.body;
+  const tables: Table[] = [];
+
+  while (remainingBody.length > 0) {
+    const tableHeight =
+      tables.length === 0
+        ? availableHeight - testTable.getHeadHeight()
+        : availableHeight - paddingTop;
+
+    const table = await createTableWithAvailableHeight(remainingBody, tableHeight, args);
+
+    tables.push(table);
+
+    remainingBody = remainingBody.slice(table.body.length);
+
+    if (remainingBody.length > 0) {
+      const _schema = cloneDeep(schema);
+      _schema.showHead = false;
+      _schema.position.y = paddingTop;
+      args.schema = _schema;
+
+      availableHeight = pageHeight - paddingTop - paddingBottom;
+    }
+  }
+
+  return tables;
+}

package/src/tables/types.ts

@@ -0,0 +1,88 @@
+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';