@pdfme/common 2.1.0 → 2.2.1

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

@@ -1,6 +1,13 @@
 import { z } from 'zod';
+import type { Font as FontKitFont } from 'fontkit';
 import { Lang, Size, Alignment, BarcodeSchemaType, SchemaType, CommonSchema as _CommonSchema, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaInputs, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, PreviewReactProps, DesignerProps, DesignerReactProps } from './schema.js';
-declare type CommonSchema = z.infer<typeof _CommonSchema>;
+export type FontWidthCalcValues = {
+    font: FontKitFont;
+    fontSize: number;
+    characterSpacing: number;
+    boxWidthInPt: number;
+};
+type CommonSchema = z.infer<typeof _CommonSchema>;
 export declare const schemaTypes: readonly ["text", "image", "qrcode", "japanpost", "ean13", "ean8", "code39", "code128", "nw7", "itf14", "upca", "upce", "gs1datamatrix"];
 export declare const isTextSchema: (arg: CommonSchema) => arg is {
     type: "text";
@@ -12,6 +19,7 @@ export declare const isTextSchema: (arg: CommonSchema) => arg is {
     };
     rotate?: number | undefined;
     alignment?: "center" | "left" | "right" | undefined;
+    verticalAlignment?: "top" | "bottom" | "middle" | undefined;
     fontSize?: number | undefined;
     fontName?: string | undefined;
     fontColor?: string | undefined;
@@ -43,28 +51,31 @@ export declare const isBarcodeSchema: (arg: CommonSchema) => arg is {
         y: number;
     };
     rotate?: number | undefined;
+    backgroundcolor?: string | undefined;
+    barcolor?: string | undefined;
+    textcolor?: string | undefined;
 };
-export declare type Lang = z.infer<typeof Lang>;
-export declare type Size = z.infer<typeof Size>;
-export declare type Alignment = z.infer<typeof Alignment>;
-export declare type SchemaType = z.infer<typeof SchemaType>;
-export declare type BarCodeType = z.infer<typeof BarcodeSchemaType>;
-export declare type TextSchema = z.infer<typeof TextSchema>;
-export declare type ImageSchema = z.infer<typeof ImageSchema>;
-export declare type BarcodeSchema = z.infer<typeof BarcodeSchema>;
-export declare type Schema = z.infer<typeof Schema>;
-export declare type SchemaInputs = z.infer<typeof SchemaInputs>;
-export declare type SchemaForUI = z.infer<typeof SchemaForUI>;
-export declare type Font = z.infer<typeof Font>;
-export declare type BasePdf = z.infer<typeof BasePdf>;
-export declare type Template = z.infer<typeof Template>;
-export declare type CommonProps = z.infer<typeof CommonProps>;
-export declare type GeneratorOptions = z.infer<typeof GeneratorOptions>;
-export declare type GenerateProps = z.infer<typeof GenerateProps>;
-export declare type UIOptions = z.infer<typeof UIOptions>;
-export declare type UIProps = z.infer<typeof UIProps>;
-export declare type PreviewProps = z.infer<typeof PreviewProps>;
-export declare type PreviewReactProps = z.infer<typeof PreviewReactProps>;
-export declare type DesignerProps = z.infer<typeof DesignerProps>;
-export declare type DesignerReactProps = z.infer<typeof DesignerReactProps>;
+export type Lang = z.infer<typeof Lang>;
+export type Size = z.infer<typeof Size>;
+export type Alignment = z.infer<typeof Alignment>;
+export type SchemaType = z.infer<typeof SchemaType>;
+export type BarCodeType = z.infer<typeof BarcodeSchemaType>;
+export type TextSchema = z.infer<typeof TextSchema>;
+export type ImageSchema = z.infer<typeof ImageSchema>;
+export type BarcodeSchema = z.infer<typeof BarcodeSchema>;
+export type Schema = z.infer<typeof Schema>;
+export type SchemaInputs = z.infer<typeof SchemaInputs>;
+export type SchemaForUI = z.infer<typeof SchemaForUI>;
+export type Font = z.infer<typeof Font>;
+export type BasePdf = z.infer<typeof BasePdf>;
+export type Template = z.infer<typeof Template>;
+export type CommonProps = z.infer<typeof CommonProps>;
+export type GeneratorOptions = z.infer<typeof GeneratorOptions>;
+export type GenerateProps = z.infer<typeof GenerateProps>;
+export type UIOptions = z.infer<typeof UIOptions>;
+export type UIProps = z.infer<typeof UIProps>;
+export type PreviewProps = z.infer<typeof PreviewProps>;
+export type PreviewReactProps = z.infer<typeof PreviewReactProps>;
+export type DesignerProps = z.infer<typeof DesignerProps>;
+export type DesignerReactProps = z.infer<typeof DesignerReactProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/common",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -47,9 +47,17 @@
   },
   "dependencies": {
     "buffer": "^6.0.3",
+    "bwip-js": "^3.4.5",
     "fontkit": "^2.0.2",
     "zod": "^3.20.2"
   },
+  "devDependencies": {
+    "@types/bwip-js": "^3.2.0",
+    "@types/fontkit": "^2.0.3",
+    "@types/pngjs": "^6.0.1",
+    "jsqr": "^1.4.0",
+    "pngjs": "^7.0.0"
+  },
   "jest": {
     "resolver": "ts-jest-resolver",
     "moduleFileExtensions": [
@@ -70,8 +78,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "devDependencies": {
-    "@types/fontkit": "^2.0.3"
   }
 }

package/src/barcode.ts

@@ -0,0 +1,51 @@
+import { b64toUint8Array, } from './helper';
+import { BarCodeType, } from './type';
+import bwipjs, { ToBufferOptions } from 'bwip-js';
+import { Buffer } from 'buffer';
+
+/**
+ * The bwip.js lib has a different name for nw7 type barcodes
+ */
+export const barCodeType2Bcid = (type: BarCodeType) =>
+  type === 'nw7' ? 'rationalizedCodabar' : type;
+
+/**
+ *  Strip hash from the beginning of HTML hex color codes for the bwip.js lib
+ */
+export const mapHexColorForBwipJsLib = (color: string | undefined, fallback?: string) =>
+  color ? color.replace('#', '') : fallback ? fallback.replace('#', '') : '000000';
+
+export const createBarCode = async (arg: {
+  type: BarCodeType;
+  input: string;
+  width: number;
+  height: number;
+  backgroundcolor?: string;
+  barcolor?: string;
+  textcolor?: string;
+}): Promise<Buffer> => {
+  const { type, input, width, height, backgroundcolor, barcolor, textcolor } = arg;
+  const bcid = barCodeType2Bcid(type);
+  const includetext = true;
+  const scale = 5;
+  const bwipjsArg: ToBufferOptions = { bcid, text: input, width, height, scale, includetext };
+
+  if (backgroundcolor) bwipjsArg.backgroundcolor = mapHexColorForBwipJsLib(backgroundcolor);
+  if (barcolor) bwipjsArg.barcolor = mapHexColorForBwipJsLib(barcolor);
+  if (textcolor) bwipjsArg.textcolor = mapHexColorForBwipJsLib(textcolor);
+
+  let res: Buffer;
+
+  if (typeof window !== 'undefined') {
+    const canvas = document.createElement('canvas');
+    bwipjs.toCanvas(canvas, bwipjsArg);
+    const dataUrl = canvas.toDataURL('image/png');
+    res = b64toUint8Array(dataUrl).buffer as Buffer;
+  } else {
+    res = await bwipjs.toBuffer(bwipjsArg);
+  }
+
+  return res;
+};
+
+

package/src/constants.ts

@@ -1,9 +1,15 @@
 export const DEFAULT_FONT_NAME = 'Roboto';
 export const DEFAULT_FONT_SIZE = 13;
 export const DEFAULT_ALIGNMENT = 'left';
+export const VERTICAL_ALIGN_TOP = 'top';
+export const VERTICAL_ALIGN_MIDDLE = 'middle';
+export const VERTICAL_ALIGN_BOTTOM = 'bottom';
+export const DEFAULT_VERTICAL_ALIGNMENT = VERTICAL_ALIGN_TOP;
 export const DEFAULT_LINE_HEIGHT = 1;
 export const DEFAULT_CHARACTER_SPACING = 0;
-export const DEFAULT_FONT_COLOR = '#000';
+export const DEFAULT_FONT_COLOR = '#000000';
+export const DEFAULT_BARCODE_BG_COLOR = '#ffffff';
+export const DEFAULT_BARCODE_COLOR = '#000000';
 export const DYNAMIC_FIT_VERTICAL = 'vertical';
 export const DYNAMIC_FIT_HORIZONTAL = 'horizontal';
 export const DEFAULT_DYNAMIC_FIT = DYNAMIC_FIT_VERTICAL;

package/src/font.ts

@@ -1,6 +1,6 @@
 import * as fontkit from 'fontkit';
 import type { Font as FontKitFont } from 'fontkit';
-import { Template, Schema, Font, isTextSchema, TextSchema } from './type';
+import { FontWidthCalcValues, Template, Schema, Font, isTextSchema, TextSchema } from './type';
 import { Buffer } from 'buffer';
 import {
   DEFAULT_FONT_VALUE,
@@ -9,12 +9,12 @@ import {
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_LINE_HEIGHT,
   FONT_SIZE_ADJUSTMENT,
-  PT_TO_PX_RATIO,
   DEFAULT_DYNAMIC_FIT,
   DYNAMIC_FIT_HORIZONTAL,
   DYNAMIC_FIT_VERTICAL,
+  VERTICAL_ALIGN_TOP,
 } from './constants';
-import { mm2pt, pt2mm } from './helper';
+import { mm2pt, pt2mm, pt2px } from './helper';
 import { b64toUint8Array } from "."
 
 export const getFallbackFontName = (font: Font) => {
@@ -51,10 +51,7 @@ const getFontNamesInSchemas = (schemas: { [key: string]: Schema }[]) =>
   );
 
 export const checkFont = (arg: { font: Font; template: Template }) => {
-  const {
-    font,
-    template: { schemas },
-  } = arg;
+  const { font, template: { schemas } } = arg;
   const fontValues = Object.values(font);
   const fallbackFontNum = fontValues.reduce((acc, cur) => (cur.fallback ? acc + 1 : acc), 0);
   if (fallbackFontNum === 0) {
@@ -77,20 +74,50 @@ export const checkFont = (arg: { font: Font; template: Template }) => {
   }
 };
 
-export const getFontAlignmentValue = (fontKitFont: FontKitFont, fontSize: number) => {
+export const getBrowserVerticalFontAdjustments = (
+  fontKitFont: FontKitFont,
+  fontSize: number,
+  lineHeight: number,
+  verticalAlignment: string
+) => {
   const { ascent, descent, unitsPerEm } = fontKitFont;
 
-  const fontSizeInPx = fontSize * PT_TO_PX_RATIO;
+  // Fonts have a designed line height that the browser renders when using `line-height: normal`
+  const fontBaseLineHeight = (ascent - descent) / unitsPerEm;
 
-  // Convert ascent and descent to px values
-  const ascentInPixels = (ascent / unitsPerEm) * fontSizeInPx;
-  const descentInPixels = (descent / unitsPerEm) * fontSizeInPx;
+  // For vertical alignment top
+  // To achieve consistent positioning between browser and PDF, we apply the difference between
+  // the font's actual height and the font size in pixels.
+  // Browsers middle the font within this height, so we only need half of it to apply to the top.
+  // This means the font renders a bit lower in the browser, but achieves PDF alignment
+  const topAdjustment = (fontBaseLineHeight * fontSize - fontSize) / 2;
 
-  // Calculate the single line height in px
-  const singleLineHeight = ((ascentInPixels + Math.abs(descentInPixels)) / fontSizeInPx);
+  if (verticalAlignment === VERTICAL_ALIGN_TOP) {
+    return { topAdj: pt2px(topAdjustment), bottomAdj: 0 };
+  }
 
-  // Calculate the top margin/padding in px
-  return ((singleLineHeight * fontSizeInPx) - fontSizeInPx) / 2
+  // For vertical alignment bottom and middle
+  // When browsers render text in a non-form element (such as a <div>), some of the text may be
+  // lowered below and outside the containing element if the line height used is less than
+  // the base line-height of the font.
+  // This behaviour does not happen in a <textarea> though, so we need to adjust the positioning
+  // for consistency between editing and viewing to stop text jumping up and down.
+  // This portion of text is half of the difference between the base line height and the used
+  // line height. If using the same or higher line-height than the base font, then line-height
+  // takes over in the browser and this adjustment is not needed.
+  // Unlike the top adjustment - this is only driven by browser behaviour, not PDF alignment.
+  let bottomAdjustment = 0;
+  if (lineHeight < fontBaseLineHeight) {
+    bottomAdjustment = ((fontBaseLineHeight - lineHeight) * fontSize) / 2;
+  }
+
+  return { topAdj: 0, bottomAdj: pt2px(bottomAdjustment) };
+};
+
+export const getFontDescentInPt = (fontKitFont: FontKitFont, fontSize: number) => {
+  const { descent, unitsPerEm } = fontKitFont;
+
+  return (descent / unitsPerEm) * fontSize;
 };
 
 export const heightOfFontAtSize = (fontKitFont: FontKitFont, fontSize: number) => {
@@ -138,12 +165,6 @@ export const getFontKitFont = async (textSchema: TextSchema, font: Font) => {
   return fontKitFont;
 };
 
-export type FontWidthCalcValues = {
-  font: FontKitFont;
-  fontSize: number;
-  characterSpacing: number;
-  boxWidthInPt: number;
-};
 
 const isTextExceedingBoxWidth = (text: string, calcValues: FontWidthCalcValues) => {
   const { font, fontSize, characterSpacing, boxWidthInPt } = calcValues;
@@ -215,12 +236,12 @@ export const getSplittedLines = (textLine: string, calcValues: FontWidthCalcValu
 export const calculateDynamicFontSize = async ({
   textSchema,
   font,
-  input,
+  value,
   startingFontSize,
 }: {
   textSchema: TextSchema;
   font: Font;
-  input: string;
+  value: string;
   startingFontSize?: number | undefined;
 }) => {
   const {
@@ -237,7 +258,7 @@ export const calculateDynamicFontSize = async ({
 
   const characterSpacing = schemaCharacterSpacing ?? DEFAULT_CHARACTER_SPACING;
   const fontKitFont = await getFontKitFont(textSchema, font);
-  const textContentRows = input.split('\n');
+  const paragraphs = value.split('\n');
 
   let dynamicFontSize = fontSize;
   if (dynamicFontSize < dynamicFontSizeSetting.min) {
@@ -252,17 +273,18 @@ export const calculateDynamicFontSize = async ({
     let totalHeightInMm = 0;
 
     const boxWidthInPt = mm2pt(boxWidth);
-    const textHeight = heightOfFontAtSize(fontKitFont, size);
-    const textHeightInMm = pt2mm(textHeight * lineHeight);
+    const firstLineTextHeight = heightOfFontAtSize(fontKitFont, size);
+    const firstLineHeightInMm = pt2mm(firstLineTextHeight * lineHeight);
+    const otherRowHeightInMm = pt2mm(size * lineHeight);
 
-    textContentRows.forEach((paragraph) => {
+    paragraphs.forEach((paragraph, paraIndex) => {
       const lines = getSplittedLines(paragraph, {
         font: fontKitFont,
         fontSize: size,
         characterSpacing,
         boxWidthInPt,
       });
-      lines.forEach((line) => {
+      lines.forEach((line, lineIndex) => {
         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);
@@ -270,7 +292,11 @@ export const calculateDynamicFontSize = async ({
           totalWidthInMm = Math.max(totalWidthInMm, textWidthInMm);
         }
 
-        totalHeightInMm += textHeightInMm;
+        if (paraIndex + lineIndex === 0) {
+          totalHeightInMm += firstLineHeightInMm;
+        } else {
+          totalHeightInMm += otherRowHeightInMm;
+        }
       });
       if (dynamicFontFit === DYNAMIC_FIT_HORIZONTAL) {
         // For horizontal fit we want to consider the line's width 'unsplit'

package/src/helper.ts

@@ -10,7 +10,7 @@ import {
   GenerateProps as GeneratePropsSchema,
   UIProps as UIPropsSchema,
 } from './schema';
-import { MM_TO_PT_RATIO, PT_TO_MM_RATIO } from './constants';
+import { MM_TO_PT_RATIO, PT_TO_MM_RATIO, PT_TO_PX_RATIO } from './constants';
 import { checkFont } from './font';
 
 export const mm2pt = (mm: number): number => {
@@ -21,6 +21,10 @@ export const pt2mm = (pt: number): number => {
   return pt * PT_TO_MM_RATIO;
 };
 
+export const pt2px = (pt: number): number => {
+  return pt * PT_TO_PX_RATIO;
+};
+
 const blob2Base64Pdf = (blob: Blob) => {
   return new Promise<string>((resolve, reject) => {
     const reader = new FileReader();
@@ -189,6 +193,7 @@ export const validateBarcodeInput = (type: BarCodeType, input: string) => {
     let res = input.match(regexp);
     if (
       res != null &&
+      input.length <= 52 && // 52 is the max length of a GS1 DataMatrix barcode before bwip-js throws an error
       res[1] === '01' &&
       (res[2].length === 14 || res[2].length === 8 || res[2].length === 12 || res[2].length === 13)
     ) {

package/src/index.ts

@@ -2,9 +2,15 @@ import {
   DEFAULT_FONT_NAME,
   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,
+  DEFAULT_BARCODE_BG_COLOR,
+  DEFAULT_BARCODE_COLOR,
   DYNAMIC_FIT_VERTICAL,
   DYNAMIC_FIT_HORIZONTAL,
   DEFAULT_DYNAMIC_FIT,
@@ -15,8 +21,10 @@ import {
   BLANK_PDF,
   DEFAULT_FONT_VALUE,
 } from './constants.js';
+import { createBarCode } from './barcode';
 import { schemaTypes, isImageSchema, isBarcodeSchema, isTextSchema } from './type.js';
 import type {
+  FontWidthCalcValues,
   Lang,
   Size,
   Alignment,
@@ -52,6 +60,7 @@ import {
   checkDesignerProps,
   checkGenerateProps,
   mm2pt,
+  pt2px,
   validateBarcodeInput,
 } from './helper.js';
 import {
@@ -62,18 +71,24 @@ import {
   widthOfTextAtSize,
   checkFont,
   getFontKitFont,
-  getFontAlignmentValue,
+  getBrowserVerticalFontAdjustments,
+  getFontDescentInPt,
   getSplittedLines,
-  FontWidthCalcValues,
 } from './font.js';
 
 export {
   DEFAULT_FONT_NAME,
   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,
+  DEFAULT_BARCODE_BG_COLOR,
+  DEFAULT_BARCODE_COLOR,
   DYNAMIC_FIT_VERTICAL,
   DYNAMIC_FIT_HORIZONTAL,
   DEFAULT_DYNAMIC_FIT,
@@ -95,9 +110,11 @@ export {
   heightOfFontAtSize,
   widthOfTextAtSize,
   mm2pt,
+  pt2px,
   checkFont,
+  getBrowserVerticalFontAdjustments,
+  getFontDescentInPt,
   getFontKitFont,
-  getFontAlignmentValue,
   checkInputs,
   checkUIOptions,
   checkTemplate,
@@ -107,6 +124,7 @@ export {
   checkGenerateProps,
   validateBarcodeInput,
   calculateDynamicFontSize,
+  createBarCode
 };
 
 export type {

package/src/schema.ts

@@ -1,7 +1,9 @@
 /* eslint dot-notation: "off"*/
 import { z } from 'zod';
+import { VERTICAL_ALIGN_TOP, VERTICAL_ALIGN_MIDDLE, VERTICAL_ALIGN_BOTTOM } from "./constants";
+
+const langs = ['en', 'ja', 'ar', 'th', 'pl', 'it'] 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() });
@@ -9,6 +11,13 @@ export const Size = z.object({ height: z.number(), width: z.number() });
 const alignments = ['left', 'center', 'right'] as const;
 export const Alignment = z.enum(alignments);
 
+const verticalAlignments = [
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+] as const;
+export const VerticalAlignment = z.enum(verticalAlignments);
+
 // prettier-ignore
 export const barcodeSchemaTypes = ['qrcode', 'japanpost', 'ean13', 'ean8', 'code39', 'code128', 'nw7', 'itf14', 'upca', 'upce', 'gs1datamatrix'] as const;
 const notBarcodeSchemaTypes = ['text', 'image'] as const;
@@ -28,6 +37,7 @@ export const CommonSchema = z.object({
 export const TextSchema = CommonSchema.extend({
   type: z.literal(SchemaType.Enum.text),
   alignment: Alignment.optional(),
+  verticalAlignment: VerticalAlignment.optional(),
   fontSize: z.number().optional(),
   fontName: z.string().optional(),
   fontColor: z.string().optional(),
@@ -43,7 +53,12 @@ export const TextSchema = CommonSchema.extend({
 
 export const ImageSchema = CommonSchema.extend({ type: z.literal(SchemaType.Enum.image) });
 
-export const BarcodeSchema = CommonSchema.extend({ type: BarcodeSchemaType });
+export const BarcodeSchema = CommonSchema.extend({ 
+  type: BarcodeSchemaType,
+  backgroundcolor: z.string().optional(),
+  barcolor: z.string().optional(),
+  textcolor: z.string().optional(),
+});
 
 export const Schema = z.union([TextSchema, ImageSchema, BarcodeSchema]);
 

package/src/type.ts

@@ -1,4 +1,6 @@
 import { z } from 'zod';
+import type { Font as FontKitFont } from 'fontkit';
+
 import {
   Lang,
   Size,
@@ -28,6 +30,13 @@ import {
   DesignerReactProps,
 } from './schema.js';
 
+export type FontWidthCalcValues = {
+  font: FontKitFont;
+  fontSize: number;
+  characterSpacing: number;
+  boxWidthInPt: number;
+};
+
 type CommonSchema = z.infer<typeof _CommonSchema>;
 export const schemaTypes = _schemaTypes;
 export const isTextSchema = (arg: CommonSchema): arg is TextSchema => arg.type === 'text';