@pdfme/ui 2.1.0 → 2.2.0

package/dist/types/class.d.ts

@@ -25,6 +25,7 @@ export declare abstract class BaseUIClass {
             };
             rotate?: number | undefined;
             alignment?: "center" | "left" | "right" | undefined;
+            verticalAlignment?: "top" | "bottom" | "middle" | undefined;
             fontSize?: number | undefined;
             fontName?: string | undefined;
             fontColor?: string | undefined;

package/dist/types/components/Designer/index.d.ts

@@ -11,6 +11,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             };
             rotate?: number | undefined;
             alignment?: "center" | "left" | "right" | undefined;
+            verticalAlignment?: "top" | "bottom" | "middle" | undefined;
             fontSize?: number | undefined;
             fontName?: string | undefined;
             fontColor?: string | undefined;
@@ -60,6 +61,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             };
             rotate?: number | undefined;
             alignment?: "center" | "left" | "right" | undefined;
+            verticalAlignment?: "top" | "bottom" | "middle" | undefined;
             fontSize?: number | undefined;
             fontName?: string | undefined;
             fontColor?: string | undefined;

package/dist/types/components/Schemas/TextSchema.d.ts

@@ -11,6 +11,7 @@ declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
         };
         rotate?: number | undefined;
         alignment?: "center" | "left" | "right" | undefined;
+        verticalAlignment?: "top" | "bottom" | "middle" | undefined;
         fontSize?: number | undefined;
         fontName?: string | undefined;
         fontColor?: string | undefined;

package/dist/types/helper.d.ts

@@ -42,6 +42,7 @@ export declare const templateSchemas2SchemasList: (_template: Template) => Promi
     lineHeight?: number | undefined;
     rotate?: number | undefined;
     alignment?: "center" | "left" | "right" | undefined;
+    verticalAlignment?: "top" | "bottom" | "middle" | undefined;
     fontName?: string | undefined;
     fontColor?: string | undefined;
     characterSpacing?: number | undefined;

package/package.json

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

package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx

@@ -6,6 +6,10 @@ import {
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+  DEFAULT_VERTICAL_ALIGNMENT,
   DYNAMIC_FIT_VERTICAL,
   DYNAMIC_FIT_HORIZONTAL,
   DEFAULT_DYNAMIC_FIT,
@@ -154,6 +158,7 @@ const TextPropEditor = (
 ) => {
   const { changeSchemas, activeSchema } = props;
   const alignments = ['left', 'center', 'right'];
+  const verticalAlignments = [VERTICAL_ALIGN_TOP, VERTICAL_ALIGN_MIDDLE, VERTICAL_ALIGN_BOTTOM];
   const dynamicFits = [DYNAMIC_FIT_HORIZONTAL, DYNAMIC_FIT_VERTICAL];
   const font = useContext(FontContext);
   const fallbackFontName = getFallbackFontName(font);
@@ -180,13 +185,22 @@ const TextPropEditor = (
         />
 
         <SelectSet
-          label={'Alignment'}
+          label={'Horizontal Align'}
           value={activeSchema.alignment ?? 'left'}
           options={alignments}
           onChange={(e) =>
             changeSchemas([{ key: 'alignment', value: e.target.value, schemaId: activeSchema.id }])
           }
         />
+
+        <SelectSet
+          label={'Vertical Align'}
+          value={activeSchema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT}
+          options={verticalAlignments}
+          onChange={(e) => {
+            changeSchemas([{ key: 'verticalAlignment', value: e.target.value, schemaId: activeSchema.id }]);
+          }}
+        />
       </div>
       <div
         style={{

package/src/components/Schemas/TextSchema.tsx

@@ -2,18 +2,34 @@ import React, { useContext, forwardRef, Ref, useState, useEffect } from 'react';
 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,
   TextSchema,
   calculateDynamicFontSize,
   getFontKitFont,
-  getFontAlignmentValue,
+  getBrowserVerticalFontAdjustments,
 } from '@pdfme/common';
 import { SchemaUIProps } from './SchemaUI';
 import { ZOOM } from '../../constants';
 import { FontContext } from '../../contexts';
 
+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';
+};
+
 type Props = SchemaUIProps & { schema: TextSchema };
 
 const TextSchemaUI = (
@@ -22,8 +38,8 @@ const TextSchemaUI = (
 ) => {
   const font = useContext(FontContext);
   const [dynamicFontSize, setDynamicFontSize] = useState<number | undefined>(undefined);
-  const [fontAlignmentValue, setFontAlignmentValue] = useState<number>(0);
-
+  const [topAdjustment, setTopAdjustment] = useState<number>(0);
+  const [bottomAdjustment, setBottomAdjustment] = useState<number>(0);
 
   useEffect(() => {
     if (schema.dynamicFontSize && schema.data) {
@@ -50,10 +66,31 @@ const TextSchemaUI = (
 
   useEffect(() => {
     getFontKitFont(schema, font).then(fontKitFont => {
-      const fav = getFontAlignmentValue(fontKitFont, dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE);
-      setFontAlignmentValue(fav);
+      // 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
+      );
+      setTopAdjustment(topAdj);
+      setBottomAdjustment(bottomAdj);
     });
+
+    if (ref && 'current' in ref) {
+      const textarea = ref.current;
+
+      if (textarea) {
+        // Textareas cannot be vertically aligned, so we need to adjust the height of the textarea
+        // to exactly fit the height of it's content, whilst aligned within it's container.
+        // This gives the appearance of being vertically aligned.
+        textarea.style.height = 'auto'; // Reset the height to auto to ensure we get the correct height.
+        textarea.style.height = `${textarea.scrollHeight}px`;
+      }
+    }
   }, [
+    schema.data,
     schema.width,
     schema.height,
     schema.fontName,
@@ -63,20 +100,36 @@ const TextSchemaUI = (
     schema.dynamicFontSize?.fit,
     schema.characterSpacing,
     schema.lineHeight,
+    schema.verticalAlignment,
     font,
-    dynamicFontSize
+    dynamicFontSize,
+    editable,
   ]);
 
-
-  const style: React.CSSProperties = {
+  const containerStyle: React.CSSProperties = {
     position: 'absolute',
     top: 0,
     padding: 0,
-    height: fontAlignmentValue < 0 ? schema.height * ZOOM + Math.abs(fontAlignmentValue) : schema.height * ZOOM,
+    height: schema.height * ZOOM,
     width: schema.width * ZOOM,
     resize: 'none',
-    marginTop: fontAlignmentValue < 0 ? fontAlignmentValue : 0,
-    paddingTop: fontAlignmentValue >= 0 ? fontAlignmentValue : 0,
+    backgroundColor: schema.data && schema.backgroundColor ? schema.backgroundColor : 'rgb(242 244 255 / 75%)',
+    border: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
+  };
+
+  const textareaStyle: React.CSSProperties = {
+    padding: 0,
+    resize: 'none',
+    border: 'none',
+    outline: 'none',
+    paddingTop: topAdjustment,
+    background: 'none',
+  };
+
+  const fontStyles: React.CSSProperties = {
     fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
     color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
     fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
@@ -85,27 +138,32 @@ const TextSchemaUI = (
     textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
     whiteSpace: 'pre-wrap',
     wordBreak: 'break-word',
-    backgroundColor:
-      schema.data && schema.backgroundColor ? schema.backgroundColor : 'rgb(242 244 255 / 75%)',
-    border: 'none',
   };
 
   return editable ? (
-    <textarea
-      ref={ref}
-      placeholder={placeholder}
-      tabIndex={tabIndex}
-      style={style}
-      onChange={(e) => onChange(e.target.value)}
-      onBlur={onStopEditing}
-      value={schema.data}
-    ></textarea>
+    <div style={containerStyle}>
+      <textarea
+        ref={ref}
+        placeholder={placeholder}
+        tabIndex={tabIndex}
+        style={{ ...textareaStyle, ...fontStyles }}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={onStopEditing}
+        value={schema.data}
+      ></textarea>
+    </div>
   ) : (
-    <div style={{ ...style, height: schema.height * ZOOM, marginTop: 0, paddingTop: 0 }}>
-      <div style={{ marginTop: style.marginTop, paddingTop: style.paddingTop }}>
+    <div style={containerStyle}>
+      <div
+        style={{
+          ...fontStyles,
+          marginBottom: bottomAdjustment,
+          paddingTop: topAdjustment,
+        }}
+      >
         {/*  Set the letterSpacing of the last character to 0. */}
         {schema.data.split('').map((l, i) => (
-          <span key={i} style={{ letterSpacing: String(schema.data).length === i + 1 ? 0 : 'inherit', }} >
+          <span key={i} style={{ letterSpacing: String(schema.data).length === i + 1 ? 0 : 'inherit' }}>
             {l}
           </span>
         ))}