@pdfme/schemas 0.0.0

package/src/text/pdfRender.ts

@@ -0,0 +1,239 @@
+import { PDFFont, PDFDocument } from '@pdfme/pdf-lib';
+import type { Font as FontKitFont } from 'fontkit';
+import type { TextSchema } from './types.js';
+import {
+  PDFRenderProps,
+  ColorType,
+  Font,
+  getDefaultFont,
+  getFallbackFontName,
+  mm2pt,
+} from '@pdfme/common';
+import {
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+  DEFAULT_FONT_SIZE,
+  DEFAULT_ALIGNMENT,
+  DEFAULT_VERTICAL_ALIGNMENT,
+  DEFAULT_LINE_HEIGHT,
+  DEFAULT_CHARACTER_SPACING,
+  DEFAULT_FONT_COLOR,
+} from './constants.js';
+import {
+  calculateDynamicFontSize,
+  heightOfFontAtSize,
+  getFontDescentInPt,
+  getFontKitFont,
+  widthOfTextAtSize,
+  splitTextToSize,
+} from './helper.js';
+import { convertForPdfLayoutProps, rotatePoint, hex2PrintingColor } from '../utils.js';
+
+const embedAndGetFontObj = async (arg: {
+  pdfDoc: PDFDocument;
+  font: Font;
+  _cache: Map<PDFDocument, { [key: string]: PDFFont }>;
+}) => {
+  const { pdfDoc, font, _cache } = arg;
+  if (_cache.has(pdfDoc)) {
+    return _cache.get(pdfDoc) as { [key: string]: PDFFont };
+  }
+
+  const fontValues = await Promise.all(
+    Object.values(font).map(async (v) => {
+      let fontData = v.data;
+      if (typeof fontData === 'string' && fontData.startsWith('http')) {
+        fontData = await fetch(fontData).then((res) => res.arrayBuffer());
+      }
+      return pdfDoc.embedFont(fontData, {
+        subset: typeof v.subset === 'undefined' ? true : v.subset,
+      });
+    }),
+  );
+
+  const fontObj = Object.keys(font).reduce(
+    (acc, cur, i) => Object.assign(acc, { [cur]: fontValues[i] }),
+    {} as { [key: string]: PDFFont },
+  );
+
+  _cache.set(pdfDoc, fontObj);
+  return fontObj;
+};
+
+const getFontProp = ({
+  value,
+  fontKitFont,
+  schema,
+  colorType,
+}: {
+  value: string;
+  fontKitFont: FontKitFont;
+  colorType?: ColorType;
+  schema: TextSchema;
+}) => {
+  const fontSize = schema.dynamicFontSize
+    ? calculateDynamicFontSize({ textSchema: schema, fontKitFont, value })
+    : (schema.fontSize ?? DEFAULT_FONT_SIZE);
+  const color = hex2PrintingColor(schema.fontColor || DEFAULT_FONT_COLOR, colorType);
+
+  return {
+    alignment: schema.alignment ?? DEFAULT_ALIGNMENT,
+    verticalAlignment: schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT,
+    lineHeight: schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
+    characterSpacing: schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING,
+    fontSize,
+    color,
+  };
+};
+
+export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
+  const { value, pdfDoc, pdfLib, page, options, schema, _cache } = arg;
+  if (!value) return;
+
+  const { font = getDefaultFont(), colorType } = options;
+
+  const [pdfFontObj, fontKitFont] = await Promise.all([
+    embedAndGetFontObj({
+      pdfDoc,
+      font,
+      _cache: _cache as unknown as Map<PDFDocument, { [key: string]: PDFFont }>,
+    }),
+    getFontKitFont(schema.fontName, font, _cache as Map<string, FontKitFont>),
+  ]);
+  const fontProp = getFontProp({ value, fontKitFont, schema, colorType });
+
+  const { fontSize, color, alignment, verticalAlignment, lineHeight, characterSpacing } = fontProp;
+
+  const fontName = (
+    schema.fontName ? schema.fontName : getFallbackFontName(font)
+  ) as keyof typeof pdfFontObj;
+  const pdfFontValue = pdfFontObj && pdfFontObj[fontName];
+
+  const pageHeight = page.getHeight();
+  const {
+    width,
+    height,
+    rotate,
+    position: { x, y },
+    opacity,
+  } = convertForPdfLayoutProps({ schema, pageHeight, applyRotateTranslate: false });
+
+  const pivotPoint = { x: x + width / 2, y: pageHeight - mm2pt(schema.position.y) - height / 2 };
+
+  if (schema.backgroundColor) {
+    const color = hex2PrintingColor(schema.backgroundColor, colorType);
+    if (rotate.angle !== 0) {
+      // Apply the same rotation logic as text rendering to match UI behavior
+      const rotatedPoint = rotatePoint({ x, y }, pivotPoint, rotate.angle);
+      page.drawRectangle({ x: rotatedPoint.x, y: rotatedPoint.y, width, height, rotate, color });
+    } else {
+      page.drawRectangle({ x, y, width, height, rotate, color });
+    }
+  }
+
+  const firstLineTextHeight = heightOfFontAtSize(fontKitFont, fontSize);
+  const descent = getFontDescentInPt(fontKitFont, fontSize);
+  const halfLineHeightAdjustment = lineHeight === 0 ? 0 : ((lineHeight - 1) * fontSize) / 2;
+
+  const lines = splitTextToSize({
+    value,
+    characterSpacing,
+    fontSize,
+    fontKitFont,
+    boxWidthInPt: width,
+  });
+
+  // Text lines are rendered from the bottom upwards, we need to adjust the position down
+  let yOffset = 0;
+  if (verticalAlignment === VERTICAL_ALIGN_TOP) {
+    yOffset = firstLineTextHeight + halfLineHeightAdjustment;
+  } else {
+    const otherLinesHeight = lineHeight * fontSize * (lines.length - 1);
+
+    if (verticalAlignment === VERTICAL_ALIGN_BOTTOM) {
+      yOffset = height - otherLinesHeight + descent - halfLineHeightAdjustment;
+    } else if (verticalAlignment === VERTICAL_ALIGN_MIDDLE) {
+      yOffset =
+        (height - otherLinesHeight - firstLineTextHeight + descent) / 2 + firstLineTextHeight;
+    }
+  }
+
+  const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+
+  lines.forEach((line, rowIndex) => {
+    const trimmed = line.replace('\n', '');
+    const textWidth = widthOfTextAtSize(trimmed, fontKitFont, fontSize, characterSpacing);
+    const textHeight = heightOfFontAtSize(fontKitFont, fontSize);
+    const rowYOffset = lineHeight * fontSize * rowIndex;
+
+    // Adobe Acrobat Reader shows an error if `drawText` is called with an empty text
+    if (line === '') {
+      // return; // this also works
+      line = '\r\n';
+    }
+
+    let xLine = x;
+    if (alignment === 'center') {
+      xLine += (width - textWidth) / 2;
+    } else if (alignment === 'right') {
+      xLine += width - textWidth;
+    }
+
+    let yLine = pageHeight - mm2pt(schema.position.y) - yOffset - rowYOffset;
+
+    // draw strikethrough
+    if (schema.strikethrough && textWidth > 0) {
+      const _x = xLine + textWidth + 1;
+      const _y = yLine + textHeight / 3;
+      page.drawLine({
+        start: rotatePoint({ x: xLine, y: _y }, pivotPoint, rotate.angle),
+        end: rotatePoint({ x: _x, y: _y }, pivotPoint, rotate.angle),
+        thickness: (1 / 12) * fontSize,
+        color: color,
+        opacity,
+      });
+    }
+
+    // draw underline
+    if (schema.underline && textWidth > 0) {
+      const _x = xLine + textWidth + 1;
+      const _y = yLine - textHeight / 12;
+      page.drawLine({
+        start: rotatePoint({ x: xLine, y: _y }, pivotPoint, rotate.angle),
+        end: rotatePoint({ x: _x, y: _y }, pivotPoint, rotate.angle),
+        thickness: (1 / 12) * fontSize,
+        color: color,
+        opacity,
+      });
+    }
+
+    if (rotate.angle !== 0) {
+      // As we draw each line individually from different points, we must translate each lines position
+      // relative to the UI rotation pivot point. see comments in convertForPdfLayoutProps() for more info.
+      const rotatedPoint = rotatePoint({ x: xLine, y: yLine }, pivotPoint, rotate.angle);
+      xLine = rotatedPoint.x;
+      yLine = rotatedPoint.y;
+    }
+
+    let spacing = characterSpacing;
+    if (alignment === 'justify' && line.slice(-1) !== '\n') {
+      // if alignment is `justify` but the end of line is not newline, then adjust the spacing
+      const iterator = segmenter.segment(trimmed)[Symbol.iterator]();
+      const len = Array.from(iterator).length;
+      spacing += (width - textWidth) / len;
+    }
+    page.pushOperators(pdfLib.setCharacterSpacing(spacing));
+
+    page.drawText(trimmed, {
+      x: xLine,
+      y: yLine,
+      rotate,
+      size: fontSize,
+      color,
+      lineHeight: lineHeight * fontSize,
+      font: pdfFontValue,
+      opacity,
+    });
+  });
+};

package/src/text/propPanel.ts

@@ -0,0 +1,184 @@
+import {
+  DEFAULT_FONT_NAME,
+  PropPanel,
+  PropPanelWidgetProps,
+  PropPanelSchema,
+  getFallbackFontName,
+} from '@pdfme/common';
+import type { TextSchema } from './types.js';
+import {
+  DEFAULT_FONT_SIZE,
+  DEFAULT_ALIGNMENT,
+  DEFAULT_VERTICAL_ALIGNMENT,
+  DEFAULT_CHARACTER_SPACING,
+  DEFAULT_LINE_HEIGHT,
+  DEFAULT_FONT_COLOR,
+  DYNAMIC_FIT_VERTICAL,
+  DYNAMIC_FIT_HORIZONTAL,
+  DEFAULT_DYNAMIC_FIT,
+  DEFAULT_DYNAMIC_MIN_FONT_SIZE,
+  DEFAULT_DYNAMIC_MAX_FONT_SIZE,
+} from './constants.js';
+import { DEFAULT_OPACITY, HEX_COLOR_PATTERN } from '../constants.js';
+import { getExtraFormatterSchema } from './extraFormatter.js';
+
+const UseDynamicFontSize = (props: PropPanelWidgetProps) => {
+  const { rootElement, changeSchemas, activeSchema, i18n } = props;
+
+  const checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
+  checkbox.checked = Boolean((activeSchema as { dynamicFontSize?: unknown })?.dynamicFontSize);
+  checkbox.onchange = (e: Event) => {
+    const val = (e.target as HTMLInputElement).checked
+      ? {
+          min: DEFAULT_DYNAMIC_MIN_FONT_SIZE,
+          max: DEFAULT_DYNAMIC_MAX_FONT_SIZE,
+          fit: DEFAULT_DYNAMIC_FIT,
+        }
+      : undefined;
+    changeSchemas([{ key: 'dynamicFontSize', value: val, schemaId: activeSchema.id }]);
+  };
+  const label = document.createElement('label');
+  const span = document.createElement('span');
+  span.innerText = i18n('schemas.text.dynamicFontSize') || '';
+  span.style.cssText = 'margin-left: 0.5rem';
+  label.style.cssText = 'display: flex; width: 100%;';
+  label.appendChild(checkbox);
+  label.appendChild(span);
+  rootElement.appendChild(label);
+};
+
+export const propPanel: PropPanel<TextSchema> = {
+  schema: ({ options, activeSchema, i18n }) => {
+    const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
+    const fontNames = Object.keys(font);
+    const fallbackFontName = getFallbackFontName(font);
+
+    const enableDynamicFont = Boolean(
+      (activeSchema as { dynamicFontSize?: unknown })?.dynamicFontSize,
+    );
+
+    const textSchema: Record<string, PropPanelSchema> = {
+      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',
+        span: 6,
+        disabled: enableDynamicFont,
+        props: { min: 0 },
+      },
+      characterSpacing: {
+        title: i18n('schemas.text.spacing'),
+        type: 'number',
+        widget: 'inputNumber',
+        span: 6,
+        props: { min: 0 },
+      },
+      formatter: getExtraFormatterSchema(i18n),
+      lineHeight: {
+        title: i18n('schemas.text.lineHeight'),
+        type: 'number',
+        widget: 'inputNumber',
+        props: { step: 0.1, min: 0 },
+        span: 8,
+      },
+      useDynamicFontSize: { type: 'boolean', widget: 'UseDynamicFontSize', bind: false, span: 16 },
+      dynamicFontSize: {
+        type: 'object',
+        widget: 'card',
+        column: 3,
+        properties: {
+          min: {
+            title: i18n('schemas.text.min'),
+            type: 'number',
+            widget: 'inputNumber',
+            hidden: !enableDynamicFont,
+            props: { min: 0 },
+          },
+          max: {
+            title: i18n('schemas.text.max'),
+            type: 'number',
+            widget: 'inputNumber',
+            hidden: !enableDynamicFont,
+            props: { min: 0 },
+          },
+          fit: {
+            title: i18n('schemas.text.fit'),
+            type: 'string',
+            widget: 'select',
+            hidden: !enableDynamicFont,
+            props: {
+              options: [
+                { label: i18n('schemas.horizontal'), value: DYNAMIC_FIT_HORIZONTAL },
+                { label: i18n('schemas.vertical'), value: DYNAMIC_FIT_VERTICAL },
+              ],
+            },
+          },
+        },
+      },
+      fontColor: {
+        title: i18n('schemas.textColor'),
+        type: 'string',
+        widget: 'color',
+        props: {
+          disabledAlpha: true,
+        },
+        rules: [
+          {
+            pattern: HEX_COLOR_PATTERN,
+            message: i18n('validation.hexColor'),
+          },
+        ],
+      },
+      backgroundColor: {
+        title: i18n('schemas.bgColor'),
+        type: 'string',
+        widget: 'color',
+        props: {
+          disabledAlpha: true,
+        },
+        rules: [
+          {
+            pattern: HEX_COLOR_PATTERN,
+            message: i18n('validation.hexColor'),
+          },
+        ],
+      },
+    };
+
+    return textSchema;
+  },
+  widgets: { UseDynamicFontSize },
+  defaultSchema: {
+    name: '',
+    type: 'text',
+    content: 'Type Something...',
+    position: { x: 0, y: 0 },
+    width: 45,
+    height: 10,
+    // If the value of "rotate" is set to undefined or not set at all, rotation will be disabled in the UI.
+    // Check this document: https://pdfme.com//docs/custom-schemas#learning-how-to-create-from-pdfmeschemas-code
+    rotate: 0,
+    alignment: DEFAULT_ALIGNMENT,
+    verticalAlignment: DEFAULT_VERTICAL_ALIGNMENT,
+    fontSize: DEFAULT_FONT_SIZE,
+    lineHeight: DEFAULT_LINE_HEIGHT,
+    characterSpacing: DEFAULT_CHARACTER_SPACING,
+    dynamicFontSize: undefined,
+    fontColor: DEFAULT_FONT_COLOR,
+    fontName: undefined,
+    backgroundColor: '',
+    opacity: DEFAULT_OPACITY,
+    strikethrough: false,
+    underline: false,
+  },
+};

package/src/text/types.ts

@@ -0,0 +1,30 @@
+import type { Schema } from '@pdfme/common';
+import type { Font as FontKitFont } from 'fontkit';
+
+export type ALIGNMENT = 'left' | 'center' | 'right' | 'justify';
+export type VERTICAL_ALIGNMENT = 'top' | 'middle' | 'bottom';
+export type DYNAMIC_FONT_SIZE_FIT = 'horizontal' | 'vertical';
+
+export type FontWidthCalcValues = {
+  font: FontKitFont;
+  fontSize: number;
+  characterSpacing: number;
+  boxWidthInPt: number;
+};
+export interface TextSchema extends Schema {
+  fontName?: string;
+  alignment: ALIGNMENT;
+  verticalAlignment: VERTICAL_ALIGNMENT;
+  fontSize: number;
+  lineHeight: number;
+  strikethrough?: boolean;
+  underline?: boolean;
+  characterSpacing: number;
+  dynamicFontSize?: {
+    min: number;
+    max: number;
+    fit: DYNAMIC_FONT_SIZE_FIT;
+  };
+  fontColor: string;
+  backgroundColor: string;
+}