@pdfme/ui 2.0.2 → 2.1.0

package/dist/types/class.d.ts

@@ -34,6 +34,7 @@ export declare abstract class BaseUIClass {
             dynamicFontSize?: {
                 max: number;
                 min: number;
+                fit?: string | undefined;
             } | undefined;
         } | {
             type: "image";

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

@@ -20,6 +20,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             dynamicFontSize?: {
                 max: number;
                 min: number;
+                fit?: string | undefined;
             } | undefined;
         } | {
             type: "image";
@@ -68,6 +69,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             dynamicFontSize?: {
                 max: number;
                 min: number;
+                fit?: string | undefined;
             } | undefined;
         } | {
             type: "image";

package/dist/types/components/Paper.d.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject, ReactNode } from 'react';
 import { SchemaForUI, Size } from '@pdfme/common';
-declare const Paper: (porps: {
+declare const Paper: (props: {
     paperRefs: MutableRefObject<HTMLDivElement[]>;
     scale: number;
     size: Size;

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

@@ -4,6 +4,7 @@ export interface SchemaUIProps {
     schema: SchemaForUI;
     editable: boolean;
     onChange: (value: string) => void;
+    onStopEditing: () => void;
     tabIndex?: number;
     placeholder?: string;
 }

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

@@ -20,6 +20,7 @@ declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
         dynamicFontSize?: {
             max: number;
             min: number;
+            fit?: string | undefined;
         } | undefined;
     };
 } & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/types/helper.d.ts

@@ -48,6 +48,7 @@ export declare const templateSchemas2SchemasList: (_template: Template) => Promi
     dynamicFontSize?: {
         max: number;
         min: number;
+        fit?: string | undefined;
     } | undefined;
 } | {
     type: "image";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -64,7 +64,7 @@
     "webpack-cli": "^5.0.1"
   },
   "peerDependencies": {
-    "@pdfme/common": "^2.0.0"
+    "@pdfme/common": "^2.1.0"
   },
   "jest": {
     "setupFiles": [

package/src/components/Designer/Main/index.tsx

@@ -39,6 +39,7 @@ const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }
         zIndex: 1,
         top,
         left,
+        padding: 2,
         height: 24,
         width: 24,
         cursor: 'pointer',
@@ -52,7 +53,7 @@ const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }
         justifyContent: 'center',
       }}
     >
-      <XMarkIcon width={10} height={10} />
+      <XMarkIcon style={{ pointerEvents: 'none' }} width={24} height={24} />
     </button>
   );
 };
@@ -195,14 +196,6 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
     changeSchemas(flatten(arg));
   };
 
-  const currentlyEditingThisTextSchema = (target: EventTarget | null) => {
-    if (!target) return false;
-    if (target instanceof HTMLTextAreaElement) {
-      return activeElements.map((ae) => ae.id).includes(target.parentElement?.id || '');
-    }
-    return false;
-  };
-
   const onResize = ({ target, width, height, direction }: OnResize) => {
     if (!target) return;
     const s = target.style;
@@ -239,20 +232,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   };
 
   return (
-    <div
-      ref={ref}
-      onClick={(e) => {
-        e.stopPropagation();
-        if (!currentlyEditingThisTextSchema(e.target)) {
-          setEditing(false);
-        }
-        // For MacOS CMD+SHIFT+3/4 screenshots where the keydown event is never received, check mouse too
-        if (!e.shiftKey) {
-          setIsPressShiftKey(false);
-        }
-      }}
-      style={{ overflow: 'overlay' }}
-    >
+    <div ref={ref} style={{ overflow: 'overlay' }}>
       <Selecto
         container={paperRefs.current[pageCursor]}
         continueSelect={isPressShiftKey}
@@ -266,8 +246,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
           if (paperRefs.current[pageCursor] === inputEvent.target) {
             onEdit([]);
           }
-
-          if (inputEvent.target.id === DELETE_BTN_ID) {
+          if (inputEvent.target?.id === DELETE_BTN_ID) {
             removeSchemas(activeElements.map((ae) => ae.id));
           }
         }}
@@ -280,8 +259,15 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
           if (!isClick && removed.length > 0) {
             newActiveElements = activeElements.filter((ae) => !removed.includes(ae));
           }
-
           onEdit(newActiveElements);
+
+          if (newActiveElements != activeElements) {
+            setEditing(false);
+          }
+          // For MacOS CMD+SHIFT+3/4 screenshots where the keydown event is never received, check mouse too
+          if (!inputEvent.shiftKey) {
+            setIsPressShiftKey(false);
+          }
         }}
       />
       <Paper
@@ -338,9 +324,10 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
             schema={schema}
             onChangeHoveringSchemaId={onChangeHoveringSchemaId}
             editable={editing && activeElements.map((ae) => ae.id).includes(schema.id)}
-            onChange={async (value) => {
+            onChange={(value) => {
               changeSchemas([{ key: 'data', value, schemaId: schema.id }]);
             }}
+            onStopEditing={() => setEditing(false)}
             outline={hoveringSchemaId === schema.id ? '1px solid #18a0fb' : '1px dashed #4af'}
             ref={inputRef}
           />

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

@@ -6,6 +6,9 @@ import {
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
+  DYNAMIC_FIT_VERTICAL,
+  DYNAMIC_FIT_HORIZONTAL,
+  DEFAULT_DYNAMIC_FIT,
 } from '@pdfme/common';
 import { FontContext } from '../../../../contexts';
 import { SidebarProps } from '..';
@@ -24,11 +27,14 @@ const NumberInputSet = (props: {
   width: string;
   label: string;
   value: number;
+  step?: number;
   minNumber?: number;
   maxNumber?: number;
+  disabled?: boolean;
+  style?: object;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) => {
-  const { label, value, width, minNumber, maxNumber, onChange } = props;
+  const { label, step, value, width, minNumber, maxNumber, disabled, style, onChange } = props;
   const formattedLabel = label.replace(/\s/g, '');
 
   return (
@@ -37,10 +43,12 @@ const NumberInputSet = (props: {
       <input
         id={`input-${formattedLabel}`}
         name={`input-${formattedLabel}`}
-        style={inputStyle}
+        style={{ ...inputStyle, ...style }}
         onChange={onChange}
-        value={value}
+        value={isNaN(value) ? '' : value}
         type="number"
+        step={step ?? 1}
+        disabled={disabled}
         {...(minNumber && { min: minNumber })}
         {...(maxNumber && { max: maxNumber })}
       />
@@ -92,13 +100,14 @@ const SelectSet = (props: {
   label: string;
   value: string;
   options: string[];
+  width?: string;
   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }) => {
-  const { label, value, options, onChange } = props;
+  const { label, value, options, width, onChange } = props;
   const formattedLabel = label.replace(/\s/g, '');
 
   return (
-    <div style={{ width: '45%' }}>
+    <div style={{ width: width ?? '45%' }}>
       <label htmlFor={`select-${formattedLabel}`}>{label}:</label>
       <select
         id={`select-${formattedLabel}`}
@@ -145,6 +154,7 @@ const TextPropEditor = (
 ) => {
   const { changeSchemas, activeSchema } = props;
   const alignments = ['left', 'center', 'right'];
+  const dynamicFits = [DYNAMIC_FIT_HORIZONTAL, DYNAMIC_FIT_VERTICAL];
   const font = useContext(FontContext);
   const fallbackFontName = getFallbackFontName(font);
 
@@ -189,26 +199,17 @@ const TextPropEditor = (
         <NumberInputSet
           width="30%"
           label={'FontSize(pt)'}
-          value={activeSchema.fontSize ?? DEFAULT_FONT_SIZE}
+          value={activeSchema.dynamicFontSize ? NaN : (activeSchema.fontSize ?? DEFAULT_FONT_SIZE)}
+          style={activeSchema.dynamicFontSize ? { background: '#ccc', cursor: 'not-allowed' } : {}}
+          disabled={!!activeSchema.dynamicFontSize}
           onChange={(e) => {
-            const currentFontSize = Number(e.target.value);
-            const dynamincFontSizeMinAdjust = activeSchema.dynamicFontSize && activeSchema.dynamicFontSize.min > currentFontSize;
-
-            changeSchemas([
-              { key: 'fontSize', value: currentFontSize, schemaId: activeSchema.id },
-              ...(dynamincFontSizeMinAdjust
-                ? [{
-                      key: 'dynamicFontSize.min',
-                      value: currentFontSize,
-                      schemaId: activeSchema.id,
-                    }]
-                : []),
-            ]);
+            changeSchemas([{ key: 'fontSize', value: Number(e.target.value), schemaId: activeSchema.id }])
           }}
         />
         <NumberInputSet
           width="30%"
           label={'LineHeight(em)'}
+          step={0.1}
           value={activeSchema.lineHeight ?? DEFAULT_LINE_HEIGHT}
           onChange={(e) =>
             changeSchemas([
@@ -220,6 +221,7 @@ const TextPropEditor = (
         <NumberInputSet
           width="40%"
           label={'CharacterSpacing(pt)'}
+          step={0.1}
           value={activeSchema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}
           onChange={async (e) => {
             const currentCharacterSpacing = Number(e.target.value);
@@ -257,26 +259,46 @@ const TextPropEditor = (
         {activeSchema.dynamicFontSize && (
           <>
             <NumberInputSet
-              width="45%"
+              width="30%"
               label={'FontSize Min(pt)'}
               value={activeSchema.dynamicFontSize.min ?? Number(activeSchema.fontSize)}
               minNumber={0}
-              maxNumber={activeSchema.fontSize}
+              style={
+                activeSchema.dynamicFontSize &&
+                  activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
+                  ? { background: 'rgb(200 0 0 / 30%)' }
+                  : {}
+              }
               onChange={(e) => {
                 changeSchemas([{ key: 'dynamicFontSize.min', value: Number(e.target.value), schemaId: activeSchema.id }])
-
               }}
             />
 
             <NumberInputSet
-              width="45%"
+              width="30%"
               label={'FontSize Max(pt)'}
               value={activeSchema.dynamicFontSize.max ?? Number(activeSchema.fontSize)}
-              minNumber={activeSchema.fontSize}
+              minNumber={0}
+              style={
+                activeSchema.dynamicFontSize &&
+                  activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
+                  ? { background: 'rgb(200 0 0 / 30%)' }
+                  : {}
+              }
               onChange={(e) => {
                 changeSchemas([{ key: 'dynamicFontSize.max', value: Number(e.target.value), schemaId: activeSchema.id }])
               }}
             />
+
+            <SelectSet
+              width="40%"
+              label={'Fit'}
+              value={activeSchema.dynamicFontSize.fit ?? DEFAULT_DYNAMIC_FIT}
+              options={dynamicFits}
+              onChange={(e) => {
+                changeSchemas([{ key: 'dynamicFontSize.fit', value: e.target.value, schemaId: activeSchema.id }])
+              }}
+            />
           </>
         )}
       </div>

package/src/components/Paper.tsx

@@ -3,7 +3,7 @@ import { SchemaForUI, Size, getFallbackFontName } from '@pdfme/common';
 import { FontContext } from '../contexts';
 import { ZOOM, RULER_HEIGHT } from '../constants';
 
-const Paper = (porps: {
+const Paper = (props: {
   paperRefs: MutableRefObject<HTMLDivElement[]>;
   scale: number;
   size: Size;
@@ -14,7 +14,7 @@ const Paper = (porps: {
   renderSchema: (arg: { index: number; schema: SchemaForUI }) => ReactNode;
 }) => {
   const { paperRefs, scale, size, schemasList, pageSizes, backgrounds, renderPaper, renderSchema } =
-    porps;
+    props;
   const font = useContext(FontContext);
 
   if (pageSizes.length !== backgrounds.length || pageSizes.length !== schemasList.length) {

package/src/components/Preview.tsx

@@ -100,8 +100,9 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
               key={schema.id}
               schema={Object.assign(schema, { data })}
               editable={editable}
-              placeholder={template.sampledata ? template.sampledata[0][key] : ''}
+              placeholder={template.sampledata?.[0]?.[key] ?? ''}
               tabIndex={index + 100}
+              onStopEditing={() => { }}
               onChange={(value) => handleChangeInput({ key, value })}
               outline={editable ? '1px dashed #4af' : 'transparent'}
             />

package/src/components/Schemas/BarcodeSchema.tsx

@@ -69,7 +69,7 @@ const BarcodePreview = (props: { schema: BarcodeSchema; value: string }) => {
 type Props = SchemaUIProps & { schema: BarcodeSchema };
 
 const BarcodeSchemaUI = (
-  { schema, editable, placeholder, tabIndex, onChange }: Props,
+  { schema, editable, placeholder, tabIndex, onChange, onStopEditing }: Props,
   ref: Ref<HTMLInputElement>
 ) => {
   const value = schema.data;
@@ -109,6 +109,7 @@ const BarcodeSchemaUI = (
           style={style}
           value={value}
           onChange={(e) => onChange(e.target.value)}
+          onBlur={onStopEditing}
         />
       ) : (
         <div style={style}>

package/src/components/Schemas/ImageSchema.tsx

@@ -8,7 +8,7 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 type Props = SchemaUIProps & { schema: ImageSchema };
 
 const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) => {
-  const { editable, placeholder, tabIndex, schema, onChange } = props;
+  const { editable, placeholder, tabIndex, schema, onChange, onStopEditing } = props;
   const [fileName, setFileName] = useState<string>('');
   const hasData = Boolean(schema.data);
 
@@ -75,6 +75,7 @@ const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) => {
           onChange={(event: ChangeEvent<HTMLInputElement>) =>
             readFiles(event.target.files, 'dataURL').then((result) => onChange(result as string))
           }
+          onBlur={onStopEditing}
           type="file"
           accept="image/jpeg, image/png"
         />

package/src/components/Schemas/SchemaUI.tsx

@@ -9,6 +9,7 @@ export interface SchemaUIProps {
   schema: SchemaForUI;
   editable: boolean;
   onChange: (value: string) => void;
+  onStopEditing: () => void;
   tabIndex?: number;
   placeholder?: string;
 }

package/src/components/Schemas/TextSchema.tsx

@@ -17,7 +17,7 @@ import { FontContext } from '../../contexts';
 type Props = SchemaUIProps & { schema: TextSchema };
 
 const TextSchemaUI = (
-  { schema, editable, placeholder, tabIndex, onChange }: Props,
+  { schema, editable, placeholder, tabIndex, onChange, onStopEditing }: Props,
   ref: Ref<HTMLTextAreaElement>
 ) => {
   const font = useContext(FontContext);
@@ -27,15 +27,45 @@ const TextSchemaUI = (
 
   useEffect(() => {
     if (schema.dynamicFontSize && schema.data) {
-      calculateDynamicFontSize({ textSchema: schema, font, input: schema.data }).then(setDynamicFontSize)
+      calculateDynamicFontSize({
+        textSchema: schema,
+        font,
+        input: schema.data,
+        startingFontSize: dynamicFontSize,
+      }).then(setDynamicFontSize);
     } else {
       setDynamicFontSize(undefined);
     }
+  }, [
+    schema.data,
+    schema.width,
+    schema.height,
+    schema.dynamicFontSize?.min,
+    schema.dynamicFontSize?.max,
+    schema.dynamicFontSize?.fit,
+    schema.characterSpacing,
+    schema.lineHeight,
+    font
+  ]);
+
+  useEffect(() => {
     getFontKitFont(schema, font).then(fontKitFont => {
       const fav = getFontAlignmentValue(fontKitFont, dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE);
       setFontAlignmentValue(fav);
     });
-  }, [schema.data, schema.width, schema.fontName, schema.fontSize, schema.dynamicFontSize, schema.dynamicFontSize?.max, schema.dynamicFontSize?.min, schema.characterSpacing, font]);
+  }, [
+    schema.width,
+    schema.height,
+    schema.fontName,
+    schema.fontSize,
+    schema.dynamicFontSize?.max,
+    schema.dynamicFontSize?.min,
+    schema.dynamicFontSize?.fit,
+    schema.characterSpacing,
+    schema.lineHeight,
+    font,
+    dynamicFontSize
+  ]);
 
 
   const style: React.CSSProperties = {
@@ -53,7 +83,7 @@ const TextSchemaUI = (
     letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
     lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
     textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
-    whiteSpace: 'pre-line',
+    whiteSpace: 'pre-wrap',
     wordBreak: 'break-word',
     backgroundColor:
       schema.data && schema.backgroundColor ? schema.backgroundColor : 'rgb(242 244 255 / 75%)',
@@ -67,6 +97,7 @@ const TextSchemaUI = (
       tabIndex={tabIndex}
       style={style}
       onChange={(e) => onChange(e.target.value)}
+      onBlur={onStopEditing}
       value={schema.data}
     ></textarea>
   ) : (

package/src/helper.ts

@@ -314,7 +314,7 @@ const sortSchemasList = (template: Template, pageNum: number): SchemaForUI[][] =
           })
           .map((e) => {
             const [key, value] = e;
-            const data = template.sampledata ? template.sampledata[0][key] : '';
+            const data = template.sampledata?.[0]?.[key] ?? '';
 
             return Object.assign(value, {
               key,