@pdfme/schemas 6.0.3 → 6.0.5-dev.1

package/src/text/pdfRender.ts

@@ -1,240 +0,0 @@
-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,
-  fetchRemoteFontData,
-  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 fetchRemoteFontData(fontData);
-      }
-      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

@@ -1,184 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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 type TextSchema = 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;
-};