@pdfme/schemas 5.3.4 → 5.3.5-dev.2

package/src/text/pdfRender.ts

@@ -120,8 +120,6 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
     page.drawRectangle({ x, y, width, height, rotate, color });
   }
 
-  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;
@@ -150,12 +148,20 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   }
 
   const pivotPoint = { x: x + width / 2, y: pageHeight - mm2pt(schema.position.y) - height / 2 };
+  const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
 
   lines.forEach((line, rowIndex) => {
-    const textWidth = widthOfTextAtSize(line, fontKitFont, fontSize, characterSpacing);
+    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;
@@ -167,7 +173,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
 
     // draw strikethrough
     if (schema.strikethrough && textWidth > 0) {
-      const _x = xLine + textWidth + 1
+      const _x = xLine + textWidth + 1;
       const _y = yLine + textHeight / 3;
       page.drawLine({
         start: rotatePoint({ x: xLine, y: _y }, pivotPoint, rotate.angle),
@@ -180,7 +186,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
 
     // draw underline
     if (schema.underline && textWidth > 0) {
-      const _x = xLine + textWidth + 1
+      const _x = xLine + textWidth + 1;
       const _y = yLine - textHeight / 12;
       page.drawLine({
         start: rotatePoint({ x: xLine, y: _y }, pivotPoint, rotate.angle),
@@ -199,7 +205,16 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
       yLine = rotatedPoint.y;
     }
 
-    page.drawText(line, {
+    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,

package/src/text/propPanel.ts

@@ -87,7 +87,7 @@ export const propPanel: PropPanel<TextSchema> = {
         type: 'number',
         widget: 'inputNumber',
         props: { step: 0.1, min: 0 },
-        span: 7,
+        span: 8,
       },
       useDynamicFontSize: { type: 'boolean', widget: 'UseDynamicFontSize', bind: false, span: 16 },
       dynamicFontSize: {
@@ -128,7 +128,7 @@ export const propPanel: PropPanel<TextSchema> = {
         type: 'string',
         widget: 'color',
         props: {
-          disabledAlpha: true
+          disabledAlpha: true,
         },
         rules: [
           {
@@ -142,7 +142,7 @@ export const propPanel: PropPanel<TextSchema> = {
         type: 'string',
         widget: 'color',
         props: {
-          disabledAlpha: true
+          disabledAlpha: true,
         },
         rules: [
           {

package/src/text/types.ts

@@ -1,7 +1,7 @@
 import type { Schema } from '@pdfme/common';
 import type { Font as FontKitFont } from 'fontkit';
 
-export type ALIGNMENT = 'left' | 'center' | 'right';
+export type ALIGNMENT = 'left' | 'center' | 'right' | 'justify';
 export type VERTICAL_ALIGNMENT = 'top' | 'middle' | 'bottom';
 export type DYNAMIC_FONT_SIZE_FIT = 'horizontal' | 'vertical';