@pdfme/schemas 2.2.1

package/src/text/pdfRender.ts

@@ -0,0 +1,155 @@
+import { PDFFont, PDFDocument } from '@pdfme/pdf-lib';
+import { PDFRenderProps, Font, getDefaultFont, getFallbackFontName } from '@pdfme/common';
+import type { TextSchema, FontWidthCalcValues } from './types';
+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';
+import {
+  calculateDynamicFontSize,
+  heightOfFontAtSize,
+  getFontDescentInPt,
+  getFontKitFont,
+  getSplittedLines,
+  widthOfTextAtSize,
+} from './helper';
+import {
+  hex2RgbColor,
+  calcX,
+  calcY,
+  renderBackgroundColor,
+  convertSchemaDimensionsToPt,
+} from '../renderUtils';
+
+const embedAndGetFontObjCache = new WeakMap();
+const embedAndGetFontObj = async (arg: { pdfDoc: PDFDocument; font: Font }) => {
+  const { pdfDoc, font } = arg;
+  if (embedAndGetFontObjCache.has(pdfDoc)) {
+    return embedAndGetFontObjCache.get(pdfDoc);
+  }
+
+  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 }
+  );
+
+  embedAndGetFontObjCache.set(pdfDoc, fontObj);
+  return fontObj;
+};
+
+const getFontProp = async ({
+  value,
+  font,
+  schema,
+}: {
+  value: string;
+  font: Font;
+  schema: TextSchema;
+}) => {
+  const fontSize = schema.dynamicFontSize
+    ? await calculateDynamicFontSize({ textSchema: schema, font, value })
+    : schema.fontSize ?? DEFAULT_FONT_SIZE;
+  const color = hex2RgbColor(schema.fontColor || DEFAULT_FONT_COLOR);
+
+  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 } = arg;
+
+  const { font = getDefaultFont() } = options;
+
+  const [pdfFontObj, fontKitFont, fontProp] = await Promise.all([
+    embedAndGetFontObj({ pdfDoc, font }),
+    getFontKitFont(schema, font),
+    getFontProp({ value, font, schema }),
+  ]);
+
+  const { fontSize, color, alignment, verticalAlignment, lineHeight, characterSpacing } = fontProp;
+
+  const fontName = (
+    schema.fontName ? schema.fontName : getFallbackFontName(font)
+  ) as keyof typeof pdfFontObj;
+  const pdfFontValue = pdfFontObj[fontName];
+
+  const pageHeight = page.getHeight();
+  renderBackgroundColor({ schema, page, pageHeight });
+
+  const { width, height, rotate } = convertSchemaDimensionsToPt(schema);
+
+  page.pushOperators(pdfLib.setCharacterSpacing(characterSpacing ?? DEFAULT_CHARACTER_SPACING));
+
+  const firstLineTextHeight = heightOfFontAtSize(fontKitFont, fontSize);
+  const descent = getFontDescentInPt(fontKitFont, fontSize);
+  const halfLineHeightAdjustment = lineHeight === 0 ? 0 : ((lineHeight - 1) * fontSize) / 2;
+
+  const fontWidthCalcValues: FontWidthCalcValues = {
+    font: fontKitFont,
+    fontSize,
+    characterSpacing,
+    boxWidthInPt: width,
+  };
+
+  let lines: string[] = [];
+  value.split(/\r|\n|\r\n/g).forEach((line) => {
+    lines = lines.concat(getSplittedLines(line, fontWidthCalcValues));
+  });
+
+  // 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;
+    }
+  }
+
+  lines.forEach((line, rowIndex) => {
+    const textWidth = widthOfTextAtSize(line, fontKitFont, fontSize, characterSpacing);
+    const rowYOffset = lineHeight * fontSize * rowIndex;
+
+    page.drawText(line, {
+      x: calcX(schema.position.x, alignment, width, textWidth),
+      y: calcY(schema.position.y, pageHeight, yOffset) - rowYOffset,
+      rotate,
+      size: fontSize,
+      color,
+      lineHeight: lineHeight * fontSize,
+      maxWidth: width,
+      font: pdfFontValue,
+      wordBreaks: [''],
+    });
+  });
+};

package/src/text/propPanel.ts

@@ -0,0 +1,148 @@
+import {
+  DEFAULT_FONT_NAME,
+  PropPanel,
+  PropPanelWidgetProps,
+  PropPanelSchema,
+  getFallbackFontName,
+} from '@pdfme/common';
+import type { TextSchema } from './types';
+import {
+  DEFAULT_FONT_SIZE,
+  DEFAULT_ALIGNMENT,
+  DEFAULT_VERTICAL_ALIGNMENT,
+  DEFAULT_CHARACTER_SPACING,
+  DEFAULT_LINE_HEIGHT,
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+  DEFAULT_FONT_COLOR,
+  DYNAMIC_FIT_VERTICAL,
+  DYNAMIC_FIT_HORIZONTAL,
+  DEFAULT_DYNAMIC_FIT,
+  DEFAULT_DYNAMIC_MIN_FONT_SIZE,
+  DEFAULT_DYNAMIC_MAX_FONT_SIZE,
+  ALIGN_RIGHT,
+  ALIGN_CENTER,
+} from './constants';
+
+const UseDynamicFontSize = (props: PropPanelWidgetProps) => {
+  const { rootElement, changeSchemas, activeSchema } = props;
+
+  const checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
+  checkbox.checked = Boolean((activeSchema as any)?.dynamicFontSize);
+  checkbox.onchange = (e: any) => {
+    const val = e.target.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');
+  label.innerText = 'Dynamic Font Size';
+  label.style.cssText = 'display: flex; width: 100%;';
+  label.appendChild(checkbox);
+  rootElement.appendChild(label);
+};
+
+export const propPanel: PropPanel<TextSchema> = {
+  propPanelSchema: ({ options, activeSchema }) => {
+    const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
+    const fontNames = Object.keys(font);
+    const fallbackFontName = getFallbackFontName(font);
+
+    const enableDynamicFont = Boolean((activeSchema as any)?.dynamicFontSize);
+
+    const textSchema: Record<string, PropPanelSchema> = {
+      fontName: {
+        title: 'Font Name',
+        type: 'string',
+        widget: 'select',
+        default: fallbackFontName,
+        props: { options: fontNames.map((name) => ({ label: name, value: name })) },
+        span: 8,
+      },
+      alignment: {
+        title: 'Text Align',
+        type: 'string',
+        widget: 'select',
+        props: {
+          options: [
+            { label: 'Left', value: DEFAULT_ALIGNMENT },
+            { label: 'Center', value: ALIGN_CENTER },
+            { label: 'Right', value: ALIGN_RIGHT },
+          ],
+        },
+        span: 8,
+      },
+      verticalAlignment: {
+        title: 'Vertical Align',
+        type: 'string',
+        widget: 'select',
+        props: {
+          options: [
+            { label: 'Top', value: VERTICAL_ALIGN_TOP },
+            { label: 'Middle', value: VERTICAL_ALIGN_MIDDLE },
+            { label: 'Bottom', value: VERTICAL_ALIGN_BOTTOM },
+          ],
+        },
+        span: 8,
+      },
+      fontSize: {
+        title: 'Font Size',
+        type: 'number',
+        widget: 'inputNumber',
+        span: 8,
+        disabled: enableDynamicFont,
+      },
+      lineHeight: { title: 'Line Height', type: 'number', widget: 'inputNumber', span: 8 },
+      characterSpacing: { title: 'Char Spc', type: 'number', widget: 'inputNumber', span: 8 },
+      useDynamicFontSize: { type: 'boolean', widget: 'UseDynamicFontSize', bind: false },
+      dynamicFontSize: {
+        type: 'object',
+        widget: 'card',
+        column: 3,
+        properties: {
+          min: { title: 'Min', type: 'number', widget: 'inputNumber', hidden: !enableDynamicFont },
+          max: { title: 'Max', type: 'number', widget: 'inputNumber', hidden: !enableDynamicFont },
+          fit: {
+            title: 'Fit',
+            type: 'string',
+            widget: 'select',
+            hidden: !enableDynamicFont,
+            props: {
+              options: [
+                { label: 'Horizontal', value: DYNAMIC_FIT_HORIZONTAL },
+                { label: 'Vertical', value: DYNAMIC_FIT_VERTICAL },
+              ],
+            },
+          },
+        },
+      },
+      fontColor: { title: 'Font Color', type: 'string', widget: 'color' },
+      backgroundColor: { title: 'Background', type: 'string', widget: 'color' },
+    };
+
+    return textSchema;
+  },
+  widgets: { UseDynamicFontSize },
+  defaultValue: 'Type Something...',
+  defaultSchema: {
+    type: 'text',
+    position: { x: 0, y: 0 },
+    width: 45,
+    height: 10,
+    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: '',
+  },
+};

package/src/text/types.ts

@@ -0,0 +1,29 @@
+import type { Schema } from '@pdfme/common';
+import type { Font as FontKitFont } from 'fontkit';
+
+export type ALIGNMENT = 'left' | 'center' | 'right';
+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;
+  characterSpacing: number;
+  dynamicFontSize?: {
+    min: number;
+    max: number;
+    fit: DYNAMIC_FONT_SIZE_FIT;
+  };
+
+  fontColor: string;
+  backgroundColor: string;
+}

package/src/text/uiRender.ts

@@ -0,0 +1,153 @@
+import type * as CSS from 'csstype';
+import { UIRenderProps, Schema, getDefaultFont } from '@pdfme/common';
+import type { TextSchema } from './types';
+import {
+  DEFAULT_FONT_SIZE,
+  DEFAULT_ALIGNMENT,
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+  DEFAULT_VERTICAL_ALIGNMENT,
+  DEFAULT_LINE_HEIGHT,
+  DEFAULT_CHARACTER_SPACING,
+  DEFAULT_FONT_COLOR,
+} from './constants';
+import {
+  calculateDynamicFontSize,
+  getFontKitFont,
+  getBrowserVerticalFontAdjustments,
+} from './helper';
+
+const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
+  switch (verticalAlignmentValue) {
+    case VERTICAL_ALIGN_TOP:
+      return 'flex-start';
+    case VERTICAL_ALIGN_MIDDLE:
+      return 'center';
+    case VERTICAL_ALIGN_BOTTOM:
+      return 'flex-end';
+  }
+  return 'flex-start';
+};
+
+export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
+  const {
+    value,
+    schema,
+    rootElement,
+    mode,
+    onChange,
+    stopEditing,
+    tabIndex,
+    placeholder,
+    options,
+  } = arg;
+  const font = options?.font || getDefaultFont();
+
+  let dynamicFontSize: undefined | number = undefined;
+  if (schema.dynamicFontSize && value) {
+    dynamicFontSize = await calculateDynamicFontSize({
+      textSchema: schema,
+      font,
+      value,
+      startingFontSize: dynamicFontSize,
+    });
+  }
+
+  const fontKitFont = await getFontKitFont(schema, font);
+  // Depending on vertical alignment, we need to move the top or bottom of the font to keep
+  // it within it's defined box and align it with the generated pdf.
+  const { topAdj, bottomAdj } = getBrowserVerticalFontAdjustments(
+    fontKitFont,
+    dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE,
+    schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
+    schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
+  );
+
+  const topAdjustment = topAdj;
+  const bottomAdjustment = bottomAdj;
+
+  const container = document.createElement('div');
+  function getBackgroundColor(mode: 'form' | 'viewer', value: string, schema: Schema) {
+    if (mode === 'form' && value && schema.backgroundColor) {
+      return schema.backgroundColor as string;
+    } else if (mode === 'viewer') {
+      return (schema.backgroundColor as string) ?? 'transparent';
+    } else {
+      return 'rgb(242 244 255 / 75%)';
+    }
+  }
+
+  const containerStyle: CSS.Properties = {
+    padding: 0,
+    resize: 'none',
+    backgroundColor: getBackgroundColor(mode, value, schema),
+    border: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
+    width: '100%',
+    height: '100%',
+  };
+  Object.assign(container.style, containerStyle);
+  rootElement.innerHTML = '';
+  rootElement.appendChild(container);
+
+  const fontStyles: CSS.Properties = {
+    fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
+    color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
+    fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
+    letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
+    lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
+    textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+  };
+
+  if (mode === 'form') {
+    const textarea = document.createElement('textarea');
+    const textareaStyle: CSS.Properties = {
+      padding: 0,
+      resize: 'none',
+      border: 'none',
+      outline: 'none',
+      paddingTop: topAdjustment + 'px',
+      backgroundColor: 'transparent',
+      width: '100%',
+      height: '100%',
+    };
+    Object.assign(textarea.style, textareaStyle, fontStyles);
+    textarea.rows = 1;
+    textarea.placeholder = placeholder || '';
+    textarea.tabIndex = tabIndex || 0;
+
+    textarea.addEventListener(
+      'change',
+      (e: Event) => onChange && onChange((e.target as HTMLTextAreaElement).value)
+    );
+    textarea.addEventListener('blur', () => stopEditing && stopEditing());
+    textarea.value = value;
+    container.appendChild(textarea);
+    textarea.setSelectionRange(value.length, value.length);
+    textarea.focus();
+  } else {
+    const div = document.createElement('div');
+    const divStyle: CSS.Properties = {
+      ...fontStyles,
+      marginBottom: bottomAdjustment + 'px',
+      paddingTop: topAdjustment + 'px',
+    };
+    Object.assign(div.style, divStyle);
+    div.innerHTML = value
+      .split('')
+      .map(
+        (l: string, i: number) =>
+          `<span style="letter-spacing:${
+            String(value).length === i + 1 ? 0 : 'inherit'
+          };">${l}</span>`
+      )
+      .join('');
+
+    container.appendChild(div);
+  }
+};

package/tsconfig.cjs.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "./dist/cjs",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "skipLibCheck": true,
+  }
+}

package/tsconfig.esm.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "module": "ESNext",
+    "outDir": "./dist/esm",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "skipLibCheck": true,
+  }
+}

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.esm",
+  "compilerOptions": {
+    "outDir": "./dist",
+  }
+}