@pdfme/common 2.0.1 → 2.1.0

package/dist/types/src/type.d.ts

@@ -21,6 +21,7 @@ export declare const isTextSchema: (arg: CommonSchema) => arg is {
     dynamicFontSize?: {
         max: number;
         min: number;
+        fit?: string | undefined;
     } | undefined;
 };
 export declare const isImageSchema: (arg: CommonSchema) => arg is {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/common",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/constants.ts

@@ -4,10 +4,13 @@ export const DEFAULT_ALIGNMENT = 'left';
 export const DEFAULT_LINE_HEIGHT = 1;
 export const DEFAULT_CHARACTER_SPACING = 0;
 export const DEFAULT_FONT_COLOR = '#000';
-export const DEFAULT_TOLERANCE = 1;
-export const DEFAULT_FONT_SIZE_ADJUSTMENT = 0.25;
-export const DEFAULT_PT_TO_PX_RATIO = 1.333;
-export const DEFAULT_PT_TO_MM_RATIO = 0.3528;
+export const DYNAMIC_FIT_VERTICAL = 'vertical';
+export const DYNAMIC_FIT_HORIZONTAL = 'horizontal';
+export const DEFAULT_DYNAMIC_FIT = DYNAMIC_FIT_VERTICAL;
+export const FONT_SIZE_ADJUSTMENT = 0.25;
+export const PT_TO_PX_RATIO = 1.333;
+export const PT_TO_MM_RATIO = 0.3528;
+export const MM_TO_PT_RATIO = 2.8346; // https://www.ddc.co.jp/words/archives/20090701114500.html
 
 export const BLANK_PDF =
   'data:application/pdf;base64,JVBERi0xLjcKJeLjz9MKNSAwIG9iago8PAovRmlsdGVyIC9GbGF0ZURlY29kZQovTGVuZ3RoIDM4Cj4+CnN0cmVhbQp4nCvkMlAwUDC1NNUzMVGwMDHUszRSKErlCtfiyuMK5AIAXQ8GCgplbmRzdHJlYW0KZW5kb2JqCjQgMCBvYmoKPDwKL1R5cGUgL1BhZ2UKL01lZGlhQm94IFswIDAgNTk1LjQ0IDg0MS45Ml0KL1Jlc291cmNlcyA8PAo+PgovQ29udGVudHMgNSAwIFIKL1BhcmVudCAyIDAgUgo+PgplbmRvYmoKMiAwIG9iago8PAovVHlwZSAvUGFnZXMKL0tpZHMgWzQgMCBSXQovQ291bnQgMQo+PgplbmRvYmoKMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMiAwIFIKPj4KZW5kb2JqCjMgMCBvYmoKPDwKL3RyYXBwZWQgKGZhbHNlKQovQ3JlYXRvciAoU2VyaWYgQWZmaW5pdHkgRGVzaWduZXIgMS4xMC40KQovVGl0bGUgKFVudGl0bGVkLnBkZikKL0NyZWF0aW9uRGF0ZSAoRDoyMDIyMDEwNjE0MDg1OCswOScwMCcpCi9Qcm9kdWNlciAoaUxvdmVQREYpCi9Nb2REYXRlIChEOjIwMjIwMTA2MDUwOTA5WikKPj4KZW5kb2JqCjYgMCBvYmoKPDwKL1NpemUgNwovUm9vdCAxIDAgUgovSW5mbyAzIDAgUgovSUQgWzwyODhCM0VENTAyOEU0MDcyNERBNzNCOUE0Nzk4OUEwQT4gPEY1RkJGNjg4NkVERDZBQUNBNDRCNEZDRjBBRDUxRDlDPl0KL1R5cGUgL1hSZWYKL1cgWzEgMiAyXQovRmlsdGVyIC9GbGF0ZURlY29kZQovSW5kZXggWzAgN10KL0xlbmd0aCAzNgo+PgpzdHJlYW0KeJxjYGD4/5+RUZmBgZHhFZBgDAGxakAEP5BgEmFgAABlRwQJCmVuZHN0cmVhbQplbmRvYmoKc3RhcnR4cmVmCjUzMgolJUVPRgo=';

package/src/font.ts

@@ -7,11 +7,14 @@ import {
   DEFAULT_FONT_NAME,
   DEFAULT_FONT_SIZE,
   DEFAULT_CHARACTER_SPACING,
-  DEFAULT_TOLERANCE,
-  DEFAULT_FONT_SIZE_ADJUSTMENT,
-  DEFAULT_PT_TO_MM_RATIO,
-  DEFAULT_PT_TO_PX_RATIO,
+  DEFAULT_LINE_HEIGHT,
+  FONT_SIZE_ADJUSTMENT,
+  PT_TO_PX_RATIO,
+  DEFAULT_DYNAMIC_FIT,
+  DYNAMIC_FIT_HORIZONTAL,
+  DYNAMIC_FIT_VERTICAL,
 } from './constants';
+import { mm2pt, pt2mm } from './helper';
 import { b64toUint8Array } from "."
 
 export const getFallbackFontName = (font: Font) => {
@@ -31,7 +34,7 @@ export const getFallbackFontName = (font: Font) => {
 const getFallbackFont = (font: Font) => {
   const fallbackFontName = getFallbackFontName(font);
   return font[fallbackFontName];
-}
+};
 
 export const getDefaultFont = (): Font => ({
   [DEFAULT_FONT_NAME]: { data: b64toUint8Array(DEFAULT_FONT_VALUE), fallback: true },
@@ -77,7 +80,7 @@ export const checkFont = (arg: { font: Font; template: Template }) => {
 export const getFontAlignmentValue = (fontKitFont: FontKitFont, fontSize: number) => {
   const { ascent, descent, unitsPerEm } = fontKitFont;
 
-  const fontSizeInPx = fontSize * DEFAULT_PT_TO_PX_RATIO;
+  const fontSizeInPx = fontSize * PT_TO_PX_RATIO;
 
   // Convert ascent and descent to px values
   const ascentInPixels = (ascent / unitsPerEm) * fontSizeInPx;
@@ -88,7 +91,7 @@ export const getFontAlignmentValue = (fontKitFont: FontKitFont, fontSize: number
 
   // Calculate the top margin/padding in px
   return ((singleLineHeight * fontSizeInPx) - fontSizeInPx) / 2
-}
+};
 
 export const heightOfFontAtSize = (fontKitFont: FontKitFont, fontSize: number) => {
   const { ascent, descent, bbox, unitsPerEm } = fontKitFont;
@@ -103,46 +106,19 @@ export const heightOfFontAtSize = (fontKitFont: FontKitFont, fontSize: number) =
   return (height / 1000) * fontSize;
 };
 
-const widthOfTextAtSize = (input: string, fontKitFont: FontKitFont, fontSize: number) => {
-  const { glyphs } = fontKitFont.layout(input);
-  const scale = 1000 / fontKitFont.unitsPerEm;
-  return glyphs.reduce((totalWidth, glyph) => totalWidth + glyph.advanceWidth * scale, 0) * (fontSize / 1000);
-}
-
-const calculateCharacterSpacing = (
-  textContent: string,
-  textCharacterSpacing: number
-) => {
-  const numberOfCharacters = textContent.length;
-  return (numberOfCharacters - 1) * textCharacterSpacing;
+const calculateCharacterSpacing = (textContent: string, textCharacterSpacing: number) => {
+  return (textContent.length - 1) * textCharacterSpacing;
 };
 
-const calculateTextWidthInMm = (textContent: string, textWidth: number, textCharacterSpacing: number) =>
-  (textWidth + calculateCharacterSpacing(textContent, textCharacterSpacing)) * DEFAULT_PT_TO_MM_RATIO;
-
-const getLongestLine = (
-  textContentRows: string[],
-  fontKitFont: FontKitFont,
-  fontSize: number,
-  characterSpacingCount: number
-) => {
-  let longestLine = '';
-  let maxLineWidth = 0;
-
-  textContentRows.forEach((line) => {
-    const textWidth = widthOfTextAtSize(line, fontKitFont, fontSize);
-    const lineWidth = calculateTextWidthInMm(line, textWidth, characterSpacingCount);
-
-    if (lineWidth > maxLineWidth) {
-      longestLine = line;
-      maxLineWidth = lineWidth;
-    }
-  });
-
-  return longestLine;
+export const widthOfTextAtSize = (text: string, fontKitFont: FontKitFont, fontSize: number, characterSpacing: number) => {
+  const { glyphs } = fontKitFont.layout(text);
+  const scale = 1000 / fontKitFont.unitsPerEm;
+  const standardWidth =
+    glyphs.reduce((totalWidth, glyph) => totalWidth + glyph.advanceWidth * scale, 0) *
+    (fontSize / 1000);
+  return standardWidth + calculateCharacterSpacing(text, characterSpacing);
 };
 
-
 const fontKitFontCache: { [fontName: string]: FontKitFont } = {};
 export const getFontKitFont = async (textSchema: TextSchema, font: Font) => {
   const fontName = textSchema.fontName || getFallbackFontName(font);
@@ -157,38 +133,194 @@ export const getFontKitFont = async (textSchema: TextSchema, font: Font) => {
   }
 
   const fontKitFont = fontkit.create(fontData instanceof Buffer ? fontData : Buffer.from(fontData as ArrayBuffer));
-  fontKitFontCache[fontName] = fontKitFont
+  fontKitFontCache[fontName] = fontKitFont;
 
   return fontKitFont;
-}
+};
 
-const getTextContent = (input: string, fontKitFont: FontKitFont, fontSize: number, characterSpacingCount: number): string => {
-  const textContentRows = input.split('\n');
-  return textContentRows.length > 1 ? getLongestLine(textContentRows, fontKitFont, fontSize, characterSpacingCount) : input;
-}
+export type FontWidthCalcValues = {
+  font: FontKitFont;
+  fontSize: number;
+  characterSpacing: number;
+  boxWidthInPt: number;
+};
+
+const isTextExceedingBoxWidth = (text: string, calcValues: FontWidthCalcValues) => {
+  const { font, fontSize, characterSpacing, boxWidthInPt } = calcValues;
+  const textWidth = widthOfTextAtSize(text, font, fontSize, characterSpacing);
+  return textWidth > boxWidthInPt;
+};
 
-export const calculateDynamicFontSize = async ({ textSchema, font, input }: { textSchema: TextSchema, font: Font, input: string }) => {
-  const { fontSize: _fontSize, dynamicFontSize: dynamicFontSizeSetting, characterSpacing, width } = textSchema;
-  const fontSize = _fontSize || DEFAULT_FONT_SIZE;
+/**
+ * Incrementally checks the current line for its real length
+ * and returns the position where it exceeds the box width.
+ * Returns `null` to indicate if textLine is shorter than the available box.
+ */
+const getOverPosition = (textLine: string, calcValues: FontWidthCalcValues) => {
+  for (let i = 0; i <= textLine.length; i++) {
+    if (isTextExceedingBoxWidth(textLine.slice(0, i + 1), calcValues)) {
+      return i;
+    }
+  }
+
+  return null;
+};
+
+/**
+ * Gets the position of the split. Splits the exceeding line at
+ * the last whitespace prior to it exceeding the bounding box width.
+ */
+const getSplitPosition = (textLine: string, calcValues: FontWidthCalcValues) => {
+  const overPos = getOverPosition(textLine, calcValues);
+  if (overPos === null) return textLine.length; // input line is shorter than the available space
+
+  let overPosTmp = overPos;
+  while (textLine[overPosTmp] !== ' ' && overPosTmp >= 0) {
+    overPosTmp--;
+  }
+
+  // For very long lines with no whitespace use the original overPos
+  return overPosTmp > 0 ? overPosTmp : overPos;
+};
+
+/**
+ * Recursively splits the line at getSplitPosition.
+ * If there is some leftover, split the rest again in the same manner.
+ */
+export const getSplittedLines = (textLine: string, calcValues: FontWidthCalcValues): string[] => {
+  const splitPos = getSplitPosition(textLine, calcValues);
+  const splittedLine = textLine.substring(0, splitPos);
+  const rest = textLine.substring(splitPos).trimStart();
+
+  if (rest === textLine) {
+    // if we went so small that we want to split on the first char
+    // then end recursion to avoid infinite loop
+    return [textLine];
+  }
+
+  if (rest.length === 0) {
+    // end recursion if there is no leftover
+    return [splittedLine];
+  }
+
+  return [splittedLine, ...getSplittedLines(rest, calcValues)];
+};
+
+/**
+ * If using dynamic font size, iteratively increment or decrement the
+ * font size to fit the containing box.
+ * Calculating space usage involves splitting lines where they exceed
+ * the box width based on the proposed size.
+ */
+export const calculateDynamicFontSize = async ({
+  textSchema,
+  font,
+  input,
+  startingFontSize,
+}: {
+  textSchema: TextSchema;
+  font: Font;
+  input: string;
+  startingFontSize?: number | undefined;
+}) => {
+  const {
+    fontSize: schemaFontSize,
+    dynamicFontSize: dynamicFontSizeSetting,
+    characterSpacing: schemaCharacterSpacing,
+    width: boxWidth,
+    height: boxHeight,
+    lineHeight = DEFAULT_LINE_HEIGHT,
+  } = textSchema;
+  const fontSize = startingFontSize || schemaFontSize || DEFAULT_FONT_SIZE;
   if (!dynamicFontSizeSetting) return fontSize;
+  if (dynamicFontSizeSetting.max < dynamicFontSizeSetting.min) return fontSize;
 
-  const characterSpacingCount = characterSpacing ?? DEFAULT_CHARACTER_SPACING;
+  const characterSpacing = schemaCharacterSpacing ?? DEFAULT_CHARACTER_SPACING;
   const fontKitFont = await getFontKitFont(textSchema, font);
-  const textContent = getTextContent(input, fontKitFont, fontSize, characterSpacingCount);
-  const textWidth = widthOfTextAtSize(textContent, fontKitFont, fontSize);
+  const textContentRows = input.split('\n');
 
   let dynamicFontSize = fontSize;
-  let textWidthInMm = calculateTextWidthInMm(textContent, textWidth, characterSpacingCount);
+  if (dynamicFontSize < dynamicFontSizeSetting.min) {
+    dynamicFontSize = dynamicFontSizeSetting.min;
+  } else if (dynamicFontSize > dynamicFontSizeSetting.max) {
+    dynamicFontSize = dynamicFontSizeSetting.max;
+  }
+  const dynamicFontFit = dynamicFontSizeSetting.fit ?? DEFAULT_DYNAMIC_FIT;
+
+  const calculateConstraints = (size: number) => {
+    let totalWidthInMm = 0;
+    let totalHeightInMm = 0;
+
+    const boxWidthInPt = mm2pt(boxWidth);
+    const textHeight = heightOfFontAtSize(fontKitFont, size);
+    const textHeightInMm = pt2mm(textHeight * lineHeight);
+
+    textContentRows.forEach((paragraph) => {
+      const lines = getSplittedLines(paragraph, {
+        font: fontKitFont,
+        fontSize: size,
+        characterSpacing,
+        boxWidthInPt,
+      });
+      lines.forEach((line) => {
+        if (dynamicFontFit === DYNAMIC_FIT_VERTICAL) {
+          // For vertical fit we want to consider the width of text lines where we detect a split
+          const textWidth = widthOfTextAtSize(line, fontKitFont, size, characterSpacing);
+          const textWidthInMm = pt2mm(textWidth);
+          totalWidthInMm = Math.max(totalWidthInMm, textWidthInMm);
+        }
+
+        totalHeightInMm += textHeightInMm;
+      });
+      if (dynamicFontFit === DYNAMIC_FIT_HORIZONTAL) {
+        // For horizontal fit we want to consider the line's width 'unsplit'
+        const textWidth = widthOfTextAtSize(paragraph, fontKitFont, size, characterSpacing);
+        const textWidthInMm = pt2mm(textWidth);
+        totalWidthInMm = Math.max(totalWidthInMm, textWidthInMm);
+      }
+    });
+
+    return { totalWidthInMm, totalHeightInMm };
+  };
+
+  const shouldFontGrowToFit = (totalWidthInMm: number, totalHeightInMm: number) => {
+    if (dynamicFontSize >= dynamicFontSizeSetting.max) {
+      return false;
+    }
+    if (dynamicFontFit === DYNAMIC_FIT_HORIZONTAL) {
+      return totalWidthInMm < boxWidth;
+    }
+    return totalHeightInMm < boxHeight;
+  };
 
-  while (textWidthInMm > width - DEFAULT_TOLERANCE && dynamicFontSize > dynamicFontSizeSetting.min) {
-    dynamicFontSize -= DEFAULT_FONT_SIZE_ADJUSTMENT;
-    textWidthInMm = calculateTextWidthInMm(textContent, widthOfTextAtSize(textContent, fontKitFont, dynamicFontSize), characterSpacingCount);
+  const shouldFontShrinkToFit = (totalWidthInMm: number, totalHeightInMm: number) => {
+    if (dynamicFontSize <= dynamicFontSizeSetting.min || dynamicFontSize <= 0) {
+      return false;
+    }
+    return totalWidthInMm > boxWidth || totalHeightInMm > boxHeight;
+  };
+
+  let { totalWidthInMm, totalHeightInMm } = calculateConstraints(dynamicFontSize);
+
+  // Attempt to increase the font size up to desired fit
+  while (shouldFontGrowToFit(totalWidthInMm, totalHeightInMm)) {
+    dynamicFontSize += FONT_SIZE_ADJUSTMENT;
+    const { totalWidthInMm: newWidth, totalHeightInMm: newHeight } = calculateConstraints(dynamicFontSize);
+
+    if (newHeight < boxHeight) {
+      totalWidthInMm = newWidth;
+      totalHeightInMm = newHeight;
+    } else {
+      dynamicFontSize -= FONT_SIZE_ADJUSTMENT;
+      break;
+    }
   }
 
-  while (textWidthInMm < width - DEFAULT_TOLERANCE && dynamicFontSize < dynamicFontSizeSetting.max) {
-    dynamicFontSize += DEFAULT_FONT_SIZE_ADJUSTMENT;
-    textWidthInMm = calculateTextWidthInMm(textContent, widthOfTextAtSize(textContent, fontKitFont, dynamicFontSize), characterSpacingCount);
+  // Attempt to decrease the font size down to desired fit
+  while (shouldFontShrinkToFit(totalWidthInMm, totalHeightInMm)) {
+    dynamicFontSize -= FONT_SIZE_ADJUSTMENT;
+    ({ totalWidthInMm, totalHeightInMm } = calculateConstraints(dynamicFontSize));
   }
 
   return dynamicFontSize;
-};
+};

package/src/helper.ts

@@ -10,7 +10,16 @@ import {
   GenerateProps as GeneratePropsSchema,
   UIProps as UIPropsSchema,
 } from './schema';
-import { checkFont } from "./font"
+import { MM_TO_PT_RATIO, PT_TO_MM_RATIO } from './constants';
+import { checkFont } from './font';
+
+export const mm2pt = (mm: number): number => {
+  return parseFloat(String(mm)) * MM_TO_PT_RATIO;
+};
+
+export const pt2mm = (pt: number): number => {
+  return pt * PT_TO_MM_RATIO;
+};
 
 const blob2Base64Pdf = (blob: Blob) => {
   return new Promise<string>((resolve, reject) => {

package/src/index.ts

@@ -5,10 +5,13 @@ import {
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
-  DEFAULT_TOLERANCE,
-  DEFAULT_FONT_SIZE_ADJUSTMENT,
-  DEFAULT_PT_TO_MM_RATIO,
-  DEFAULT_PT_TO_PX_RATIO,
+  DYNAMIC_FIT_VERTICAL,
+  DYNAMIC_FIT_HORIZONTAL,
+  DEFAULT_DYNAMIC_FIT,
+  FONT_SIZE_ADJUSTMENT,
+  MM_TO_PT_RATIO,
+  PT_TO_MM_RATIO,
+  PT_TO_PX_RATIO,
   BLANK_PDF,
   DEFAULT_FONT_VALUE,
 } from './constants.js';
@@ -48,15 +51,20 @@ import {
   checkPreviewProps,
   checkDesignerProps,
   checkGenerateProps,
+  mm2pt,
   validateBarcodeInput,
 } from './helper.js';
 import {
-  calculateDynamicFontSize, getFallbackFontName,
+  calculateDynamicFontSize,
+  getFallbackFontName,
   getDefaultFont,
   heightOfFontAtSize,
+  widthOfTextAtSize,
   checkFont,
   getFontKitFont,
   getFontAlignmentValue,
+  getSplittedLines,
+  FontWidthCalcValues,
 } from './font.js';
 
 export {
@@ -66,10 +74,13 @@ export {
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
-  DEFAULT_TOLERANCE,
-  DEFAULT_FONT_SIZE_ADJUSTMENT,
-  DEFAULT_PT_TO_MM_RATIO,
-  DEFAULT_PT_TO_PX_RATIO,
+  DYNAMIC_FIT_VERTICAL,
+  DYNAMIC_FIT_HORIZONTAL,
+  DEFAULT_DYNAMIC_FIT,
+  FONT_SIZE_ADJUSTMENT,
+  MM_TO_PT_RATIO,
+  PT_TO_MM_RATIO,
+  PT_TO_PX_RATIO,
   BLANK_PDF,
   DEFAULT_FONT_VALUE,
   schemaTypes,
@@ -80,7 +91,10 @@ export {
   b64toUint8Array,
   getFallbackFontName,
   getDefaultFont,
+  getSplittedLines,
   heightOfFontAtSize,
+  widthOfTextAtSize,
+  mm2pt,
   checkFont,
   getFontKitFont,
   getFontAlignmentValue,
@@ -119,4 +133,5 @@ export type {
   PreviewReactProps,
   DesignerProps,
   DesignerReactProps,
+  FontWidthCalcValues,
 };

package/src/schema.ts

@@ -1,7 +1,7 @@
 /* eslint dot-notation: "off"*/
 import { z } from 'zod';
 
-const langs = ['en', 'ja', 'ar', 'th'] as const;
+const langs = ['en', 'ja', 'ar', 'th', 'pl'] as const;
 export const Lang = z.enum(langs);
 
 export const Size = z.object({ height: z.number(), width: z.number() });
@@ -37,6 +37,7 @@ export const TextSchema = CommonSchema.extend({
   dynamicFontSize: z.object({
     max: z.number(),
     min: z.number(),
+    fit: z.string().optional(),
   }).optional(),
 });