@pdfme/schemas 0.0.0

package/src/tables/classes.ts

@@ -0,0 +1,402 @@
+import { Font, mm2pt, pt2mm } from '@pdfme/common';
+import type { Font as FontKitFont } from 'fontkit';
+import { splitTextToSize, getFontKitFont, widthOfTextAtSize } from '../text/helper.js';
+import type { Styles, TableInput, Settings, Section, StylesProps } from './types.js';
+
+type ContentSettings = { body: Row[]; head: Row[]; columns: Column[] };
+
+export class Cell {
+  raw: string;
+  text: string[];
+  styles: Styles;
+  section: Section;
+  contentHeight = 0;
+  contentWidth = 0;
+  wrappedWidth = 0;
+  minReadableWidth = 0;
+  minWidth = 0;
+
+  width = 0;
+  height = 0;
+  x = 0;
+  y = 0;
+
+  constructor(raw: string, styles: Styles, section: Section) {
+    this.styles = styles;
+    this.section = section;
+    this.raw = raw;
+    const splitRegex = /\r\n|\r|\n/g;
+    this.text = raw.split(splitRegex);
+  }
+
+  getContentHeight() {
+    const lineCount = Array.isArray(this.text) ? this.text.length : 1;
+    const lineHeight = pt2mm(this.styles.fontSize) * this.styles.lineHeight;
+    const vPadding = this.padding('top') + this.padding('bottom');
+    const height = lineCount * lineHeight + vPadding;
+    return Math.max(height, this.styles.minCellHeight);
+  }
+
+  padding(name: 'top' | 'bottom' | 'left' | 'right') {
+    return this.styles.cellPadding[name];
+  }
+}
+
+export class Column {
+  index: number;
+  wrappedWidth = 0;
+  minReadableWidth = 0;
+  minWidth = 0;
+  width = 0;
+
+  constructor(index: number) {
+    this.index = index;
+  }
+
+  getMaxCustomCellWidth(table: Table) {
+    let max = 0;
+    for (const row of table.allRows()) {
+      const cell: Cell = row.cells[this.index];
+      max = Math.max(max, cell.styles.cellWidth);
+    }
+    return max;
+  }
+}
+
+export class Row {
+  readonly raw: string[];
+  readonly index: number;
+  readonly section: Section;
+  readonly cells: { [key: string]: Cell };
+
+  height = 0;
+
+  constructor(raw: string[], index: number, section: Section, cells: { [key: string]: Cell }) {
+    this.raw = raw;
+    this.index = index;
+    this.section = section;
+    this.cells = cells;
+  }
+
+  getMaxCellHeight(columns: Column[]) {
+    return columns.reduce((acc, column) => Math.max(acc, this.cells[column.index]?.height || 0), 0);
+  }
+
+  getMinimumRowHeight(columns: Column[]) {
+    return columns.reduce((acc: number, column: Column) => {
+      const cell = this.cells[column.index];
+      if (!cell) return 0;
+      const vPadding = cell.padding('top') + cell.padding('bottom');
+      const oneRowHeight = vPadding + cell.styles.lineHeight;
+      return oneRowHeight > acc ? oneRowHeight : acc;
+    }, 0);
+  }
+}
+
+export class Table {
+  readonly settings: Settings;
+  readonly styles: StylesProps;
+
+  readonly columns: Column[];
+  readonly head: Row[];
+  readonly body: Row[];
+
+  constructor(input: TableInput, content: ContentSettings) {
+    this.settings = input.settings;
+    this.styles = input.styles;
+
+    this.columns = content.columns;
+    this.head = content.head;
+    this.body = content.body;
+  }
+
+  static async create(arg: {
+    input: TableInput;
+    content: ContentSettings;
+    font: Font;
+    _cache: Map<string | number, FontKitFont>;
+  }) {
+    const { input, content, font, _cache } = arg;
+    const table = new Table(input, content);
+
+    await calculateWidths({ table, font, _cache });
+
+    return table;
+  }
+
+  getHeadHeight() {
+    return this.head.reduce((acc, row) => acc + row.getMaxCellHeight(this.columns), 0);
+  }
+
+  getBodyHeight() {
+    return this.body.reduce((acc, row) => acc + row.getMaxCellHeight(this.columns), 0);
+  }
+
+  allRows() {
+    return this.head.concat(this.body);
+  }
+
+  getWidth() {
+    return this.settings.tableWidth;
+  }
+
+  getHeight() {
+    return (this.settings.showHead ? this.getHeadHeight() : 0) + this.getBodyHeight();
+  }
+}
+
+async function calculateWidths(arg: {
+  table: Table;
+  font: Font;
+  _cache: Map<string | number, FontKitFont>;
+}) {
+  const { table, font, _cache } = arg;
+
+  const getFontKitFontByFontName = (fontName: string | undefined) =>
+    getFontKitFont(fontName, font, _cache);
+
+  await calculate(table, getFontKitFontByFontName);
+
+  const resizableColumns: Column[] = [];
+  let initialTableWidth = 0;
+
+  table.columns.forEach((column) => {
+    const customWidth = column.getMaxCustomCellWidth(table);
+    if (customWidth) {
+      // final column width
+      column.width = customWidth;
+    } else {
+      // initial column width (will be resized)
+      column.width = column.wrappedWidth;
+      resizableColumns.push(column);
+    }
+    initialTableWidth += column.width;
+  });
+
+  // width difference that needs to be distributed
+  let resizeWidth = table.getWidth() - initialTableWidth;
+
+  // first resize attempt: with respect to minReadableWidth and minWidth
+  if (resizeWidth) {
+    resizeWidth = resizeColumns(resizableColumns, resizeWidth, (column) =>
+      Math.max(column.minReadableWidth, column.minWidth),
+    );
+  }
+
+  // second resize attempt: ignore minReadableWidth but respect minWidth
+  if (resizeWidth) {
+    resizeWidth = resizeColumns(resizableColumns, resizeWidth, (column) => column.minWidth);
+  }
+
+  resizeWidth = Math.abs(resizeWidth);
+
+  applyColSpans(table);
+  await fitContent(table, getFontKitFontByFontName);
+  applyRowSpans(table);
+}
+
+function applyRowSpans(table: Table) {
+  const rowSpanCells: {
+    [key: string]: { cell: Cell; left: number; row: Row };
+  } = {};
+  let colRowSpansLeft = 1;
+  const all = table.allRows();
+  for (let rowIndex = 0; rowIndex < all.length; rowIndex++) {
+    const row = all[rowIndex];
+    for (const column of table.columns) {
+      const data = rowSpanCells[column.index];
+      if (colRowSpansLeft > 1) {
+        colRowSpansLeft--;
+        delete row.cells[column.index];
+      } else if (data) {
+        data.cell.height += row.height;
+        colRowSpansLeft = 1;
+        delete row.cells[column.index];
+        data.left--;
+        if (data.left <= 1) {
+          delete rowSpanCells[column.index];
+        }
+      } else {
+        const cell = row.cells[column.index];
+        if (!cell) {
+          continue;
+        }
+        cell.height = row.height;
+      }
+    }
+  }
+}
+
+function applyColSpans(table: Table) {
+  const all = table.allRows();
+  for (let rowIndex = 0; rowIndex < all.length; rowIndex++) {
+    const row = all[rowIndex];
+
+    let colSpanCell = null;
+    let combinedColSpanWidth = 0;
+    let colSpansLeft = 0;
+    for (let columnIndex = 0; columnIndex < table.columns.length; columnIndex++) {
+      const column = table.columns[columnIndex];
+
+      // Width and colspan
+      colSpansLeft -= 1;
+      if (colSpansLeft > 1 && table.columns[columnIndex + 1]) {
+        combinedColSpanWidth += column.width;
+        delete row.cells[column.index];
+      } else if (colSpanCell) {
+        const cell: Cell = colSpanCell;
+        delete row.cells[column.index];
+        colSpanCell = null;
+        cell.width = column.width + combinedColSpanWidth;
+      } else {
+        const cell = row.cells[column.index];
+        if (!cell) continue;
+        colSpansLeft = 1;
+        combinedColSpanWidth = 0;
+        cell.width = column.width + combinedColSpanWidth;
+      }
+    }
+  }
+}
+
+async function fitContent(
+  table: Table,
+  getFontKitFontByFontName: (fontName: string | undefined) => Promise<FontKitFont>,
+) {
+  const rowSpanHeight = { count: 0, height: 0 };
+  for (const row of table.allRows()) {
+    for (const column of table.columns) {
+      const cell: Cell = row.cells[column.index];
+      if (!cell) continue;
+
+      const fontKitFont = await getFontKitFontByFontName(cell.styles.fontName);
+      cell.text = splitTextToSize({
+        value: cell.raw,
+        characterSpacing: cell.styles.characterSpacing,
+        boxWidthInPt: mm2pt(cell.width),
+        fontSize: cell.styles.fontSize,
+        fontKitFont,
+      });
+
+      cell.contentHeight = cell.getContentHeight();
+
+      let realContentHeight = cell.contentHeight;
+      if (rowSpanHeight && rowSpanHeight.count > 0) {
+        if (rowSpanHeight.height > realContentHeight) {
+          realContentHeight = rowSpanHeight.height;
+        }
+      }
+      if (realContentHeight > row.height) {
+        row.height = realContentHeight;
+      }
+    }
+    rowSpanHeight.count--;
+  }
+}
+
+function resizeColumns(
+  columns: Column[],
+  resizeWidth: number,
+  getMinWidth: (column: Column) => number,
+) {
+  const initialResizeWidth = resizeWidth;
+  const sumWrappedWidth = columns.reduce((acc, column) => acc + column.wrappedWidth, 0);
+
+  for (let i = 0; i < columns.length; i++) {
+    const column = columns[i];
+
+    const ratio = column.wrappedWidth / sumWrappedWidth;
+    const suggestedChange = initialResizeWidth * ratio;
+    const suggestedWidth = column.width + suggestedChange;
+
+    const minWidth = getMinWidth(column);
+    const newWidth = suggestedWidth < minWidth ? minWidth : suggestedWidth;
+
+    resizeWidth -= newWidth - column.width;
+    column.width = newWidth;
+  }
+
+  resizeWidth = Math.round(resizeWidth * 1e10) / 1e10;
+
+  // Run the resizer again if there's remaining width needs
+  // to be distributed and there're columns that can be resized
+  if (resizeWidth) {
+    const resizableColumns = columns.filter((column) => {
+      return resizeWidth < 0
+        ? column.width > getMinWidth(column) // check if column can shrink
+        : true; // check if column can grow
+    });
+
+    if (resizableColumns.length) {
+      resizeWidth = resizeColumns(resizableColumns, resizeWidth, getMinWidth);
+    }
+  }
+
+  return resizeWidth;
+}
+
+async function calculate(
+  table: Table,
+  getFontKitFontByFontName: (fontName: string | undefined) => Promise<FontKitFont>,
+) {
+  for (const row of table.allRows()) {
+    for (const column of table.columns) {
+      const cell = row.cells[column.index];
+      if (!cell) continue;
+
+      const hPadding = cell.padding('right') + cell.padding('left');
+      const fontKitFont = await getFontKitFontByFontName(cell.styles.fontName);
+
+      cell.contentWidth = getStringWidth(cell, fontKitFont) + hPadding;
+
+      const longestWordWidth = getStringWidth(
+        Object.assign(cell, { text: cell.text.join(' ').split(/\s+/) }),
+        fontKitFont,
+      );
+      cell.minReadableWidth = longestWordWidth + hPadding;
+
+      cell.minWidth = cell.styles.cellWidth;
+      cell.wrappedWidth = cell.styles.cellWidth;
+    }
+  }
+
+  for (const row of table.allRows()) {
+    for (const column of table.columns) {
+      const cell = row.cells[column.index];
+
+      // For now we ignore the minWidth and wrappedWidth of colspan cells when calculating colspan widths.
+      // Could probably be improved upon however.
+      if (cell) {
+        column.wrappedWidth = Math.max(column.wrappedWidth, cell.wrappedWidth);
+        column.minWidth = Math.max(column.minWidth, cell.minWidth);
+        column.minReadableWidth = Math.max(column.minReadableWidth, cell.minReadableWidth);
+      } else {
+        // Respect cellWidth set in columnStyles even if there is no cells for this column
+        // or if the column only have colspan cells. Since the width of colspan cells
+        // does not affect the width of columns, setting columnStyles cellWidth enables the
+        // user to at least do it manually.
+
+        // Note that this is not perfect for now since for example row and table styles are
+        // not accounted for
+        const columnStyles = table.styles.columnStyles[column.index] || {};
+        const cellWidth = columnStyles.cellWidth || columnStyles.minCellWidth;
+        if (cellWidth) {
+          column.minWidth = cellWidth;
+          column.wrappedWidth = cellWidth;
+        }
+      }
+    }
+  }
+}
+
+function getStringWidth(cell: Cell, fontKitFont: FontKitFont) {
+  const text = cell.text;
+  const textArr: string[] = Array.isArray(text) ? text : [text];
+  const fontSize = cell.styles.fontSize;
+  const characterSpacing = cell.styles.characterSpacing;
+  const widestLineWidth = textArr
+    .map((text) => widthOfTextAtSize(text, fontKitFont, fontSize, characterSpacing))
+    .reduce((a, b) => Math.max(a, b), 0);
+
+  return widestLineWidth;
+}

package/src/tables/dynamicTemplate.ts

@@ -0,0 +1,88 @@
+import { Schema, BasePdf, BlankPdf, CommonOptions, isBlankPdf } from '@pdfme/common';
+import { createSingleTable } from './tableHelper.js';
+import { getBodyWithRange, getBody } from './helper.js';
+import { TableSchema } from './types.js';
+
+export const getDynamicHeightsForTable = async (
+  value: string,
+  args: {
+    schema: Schema;
+    basePdf: BasePdf;
+    options: CommonOptions;
+    _cache: Map<string | number, unknown>;
+  },
+): Promise<number[]> => {
+  if (args.schema.type !== 'table') return Promise.resolve([args.schema.height]);
+  const schema = args.schema as TableSchema;
+  const body =
+    schema.__bodyRange?.start === 0 ? getBody(value) : getBodyWithRange(value, schema.__bodyRange);
+  const table = await createSingleTable(body, args);
+
+  const baseHeights = schema.showHead
+    ? table.allRows().map((row) => row.height)
+    : [0].concat(table.body.map((row) => row.height));
+
+  const headerHeight = schema.showHead ? table.getHeadHeight() : 0;
+  const shouldRepeatHeader = schema.repeatHead && isBlankPdf(args.basePdf) && headerHeight > 0;
+
+  if (!shouldRepeatHeader) {
+    return baseHeights;
+  }
+
+  const basePdf = args.basePdf as BlankPdf;
+  const [paddingTop, , paddingBottom] = basePdf.padding;
+  const pageContentHeight = basePdf.height - paddingTop - paddingBottom;
+  const getPageStartY = (pageIndex: number) => pageIndex * pageContentHeight + paddingTop;
+
+  const initialPageIndex = Math.max(
+    0,
+    Math.floor((schema.position.y - paddingTop) / pageContentHeight),
+  );
+  const headRowCount = schema.showHead ? table.head.length : 0;
+  const SAFETY_MARGIN = 0.5;
+
+  let currentPageIndex = initialPageIndex;
+  let currentPageY = schema.position.y;
+  let rowsOnCurrentPage = 0;
+
+  const result: number[] = [];
+
+  for (let i = 0; i < baseHeights.length; i++) {
+    const isBodyRow = i >= headRowCount;
+    const rowHeight = baseHeights[i];
+
+    while (true) {
+      const currentPageStartY = getPageStartY(currentPageIndex);
+      const remainingHeight = currentPageStartY + pageContentHeight - currentPageY;
+      const needsHeader =
+        isBodyRow && rowsOnCurrentPage === 0 && currentPageIndex > initialPageIndex;
+      const totalRowHeight = rowHeight + (needsHeader ? headerHeight : 0);
+
+      if (totalRowHeight > remainingHeight - SAFETY_MARGIN) {
+        if (rowsOnCurrentPage === 0 && Math.abs(currentPageY - currentPageStartY) < SAFETY_MARGIN) {
+          result.push(totalRowHeight);
+          currentPageY += totalRowHeight;
+          rowsOnCurrentPage++;
+          break;
+        }
+        currentPageIndex++;
+        currentPageY = getPageStartY(currentPageIndex);
+        rowsOnCurrentPage = 0;
+        continue;
+      }
+
+      result.push(totalRowHeight);
+      currentPageY += totalRowHeight;
+      rowsOnCurrentPage++;
+
+      if (currentPageY >= currentPageStartY + pageContentHeight - SAFETY_MARGIN) {
+        currentPageIndex++;
+        currentPageY = getPageStartY(currentPageIndex);
+        rowsOnCurrentPage = 0;
+      }
+      break;
+    }
+  }
+
+  return result;
+};

package/src/tables/helper.ts

@@ -0,0 +1,216 @@
+import {
+  DEFAULT_ALIGNMENT,
+  DEFAULT_FONT_SIZE,
+  DEFAULT_LINE_HEIGHT,
+  DEFAULT_CHARACTER_SPACING,
+  DEFAULT_FONT_COLOR,
+  ALIGN_RIGHT,
+  ALIGN_CENTER,
+  ALIGN_LEFT,
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+} from '../text/constants.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+
+export const getDefaultCellStyles = () => ({
+  fontName: undefined,
+  alignment: DEFAULT_ALIGNMENT,
+  verticalAlignment: VERTICAL_ALIGN_MIDDLE,
+  fontSize: DEFAULT_FONT_SIZE,
+  lineHeight: DEFAULT_LINE_HEIGHT,
+  characterSpacing: DEFAULT_CHARACTER_SPACING,
+  fontColor: DEFAULT_FONT_COLOR,
+  backgroundColor: '',
+  borderColor: '#888888',
+  borderWidth: { top: 0.1, bottom: 0.1, left: 0.1, right: 0.1 },
+  padding: { top: 5, bottom: 5, left: 5, right: 5 },
+});
+
+const getBoxDimensionProp = (step = 1) => {
+  const getCommonProp = () => ({
+    type: 'number',
+    widget: 'inputNumber',
+    props: { min: 0, step },
+    span: 6,
+  });
+  return {
+    top: { title: 'Top', ...getCommonProp() },
+    right: { title: 'Right', ...getCommonProp() },
+    bottom: { title: 'Bottom', ...getCommonProp() },
+    left: { title: 'Left', ...getCommonProp() },
+  };
+};
+
+export const getCellPropPanelSchema = (arg: {
+  i18n: (key: string) => string;
+  fallbackFontName: string;
+  fontNames: string[];
+  isBody?: boolean;
+}) => {
+  const { i18n, fallbackFontName, fontNames, isBody } = arg;
+
+  return {
+    fontName: {
+      title: i18n('schemas.text.fontName'),
+      type: 'string',
+      widget: 'select',
+      default: fallbackFontName,
+      placeholder: fallbackFontName,
+      props: { options: fontNames.map((name) => ({ label: name, value: name })) },
+      span: 12,
+    },
+    fontSize: {
+      title: i18n('schemas.text.size'),
+      type: 'number',
+      widget: 'inputNumber',
+      props: { min: 0 },
+      span: 6,
+    },
+    characterSpacing: {
+      title: i18n('schemas.text.spacing'),
+      type: 'number',
+      widget: 'inputNumber',
+      props: { min: 0 },
+      span: 6,
+    },
+    alignment: {
+      title: i18n('schemas.text.textAlign'),
+      type: 'string',
+      widget: 'select',
+      props: {
+        options: [
+          { label: i18n('schemas.left'), value: ALIGN_LEFT },
+          { label: i18n('schemas.center'), value: ALIGN_CENTER },
+          { label: i18n('schemas.right'), value: ALIGN_RIGHT },
+        ],
+      },
+      span: 8,
+    },
+    verticalAlignment: {
+      title: i18n('schemas.text.verticalAlign'),
+      type: 'string',
+      widget: 'select',
+      props: {
+        options: [
+          { label: i18n('schemas.top'), value: VERTICAL_ALIGN_TOP },
+          { label: i18n('schemas.middle'), value: VERTICAL_ALIGN_MIDDLE },
+          { label: i18n('schemas.bottom'), value: VERTICAL_ALIGN_BOTTOM },
+        ],
+      },
+      span: 8,
+    },
+    lineHeight: {
+      title: i18n('schemas.text.lineHeight'),
+      type: 'number',
+      widget: 'inputNumber',
+      props: { step: 0.1, min: 0 },
+      span: 8,
+    },
+    fontColor: {
+      title: i18n('schemas.textColor'),
+      type: 'string',
+      widget: 'color',
+      props: {
+        disabledAlpha: true,
+      },
+      rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+    },
+    borderColor: {
+      title: i18n('schemas.borderColor'),
+      type: 'string',
+      widget: 'color',
+      props: {
+        disabledAlpha: true,
+      },
+      rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+    },
+    backgroundColor: {
+      title: i18n('schemas.backgroundColor'),
+      type: 'string',
+      widget: 'color',
+      props: {
+        disabledAlpha: true,
+      },
+      rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+    },
+    ...(isBody
+      ? {
+          alternateBackgroundColor: {
+            title: i18n('schemas.table.alternateBackgroundColor'),
+            type: 'string',
+            widget: 'color',
+            props: {
+              disabledAlpha: true,
+            },
+            rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+          },
+        }
+      : {}),
+    '-': { type: 'void', widget: 'Divider' },
+    borderWidth: {
+      title: i18n('schemas.borderWidth'),
+      type: 'object',
+      widget: 'lineTitle',
+      span: 24,
+      properties: getBoxDimensionProp(0.1),
+    },
+    '--': { type: 'void', widget: 'Divider' },
+    padding: {
+      title: i18n('schemas.padding'),
+      type: 'object',
+      widget: 'lineTitle',
+      span: 24,
+      properties: getBoxDimensionProp(),
+    },
+  };
+};
+
+export const getColumnStylesPropPanelSchema = ({
+  head,
+  i18n,
+}: {
+  head: string[];
+  i18n: (key: string) => string;
+}) => ({
+  alignment: {
+    type: 'object',
+    widget: 'lineTitle',
+    title: i18n('schemas.text.textAlign'),
+    column: 3,
+    properties: head.reduce(
+      (acc, cur, i) =>
+        Object.assign(acc, {
+          [i]: {
+            title: cur || 'Column ' + String(i + 1),
+            type: 'string',
+            widget: 'select',
+            props: {
+              options: [
+                { label: i18n('schemas.left'), value: ALIGN_LEFT },
+                { label: i18n('schemas.center'), value: ALIGN_CENTER },
+                { label: i18n('schemas.right'), value: ALIGN_RIGHT },
+              ],
+            },
+          },
+        }),
+      {},
+    ),
+  },
+});
+
+export const getBody = (value: string | string[][]): string[][] => {
+  if (typeof value === 'string') {
+    return JSON.parse(value || '[]') as string[][];
+  }
+  return value || [];
+};
+
+export const getBodyWithRange = (
+  value: string | string[][],
+  range?: { start: number; end?: number | undefined },
+) => {
+  const body = getBody(value);
+  if (!range) return body;
+  return body.slice(range.start, range.end);
+};