@pdfme/ui 1.2.6 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.2.6",
+  "version": "2.0.0",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -25,7 +25,7 @@
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "scripts": {
     "develop": "webpack --watch --mode development",
@@ -41,7 +41,7 @@
     "@dnd-kit/core": "^5.0.1",
     "@dnd-kit/sortable": "^6.0.0",
     "@heroicons/react": "^2.0.13",
-    "@pdfme/common": "latest",
+    "@pdfme/common": "file:../common",
     "@scena/react-guides": "^0.16.0",
     "hotkeys-js": "^3.8.7",
     "pdfjs-dist": "2.12.313",

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

@@ -195,6 +195,14 @@ 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;
@@ -235,7 +243,9 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
       ref={ref}
       onClick={(e) => {
         e.stopPropagation();
-        setEditing(false);
+        if (!currentlyEditingThisTextSchema(e.target)) {
+          setEditing(false);
+        }
       }}
       style={{ overflow: 'overlay' }}
     >

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

@@ -165,9 +165,7 @@ const TextPropEditor = (
           value={activeSchema.fontName ?? fallbackFontName}
           options={Object.keys(font)}
           onChange={(e) => {
-            changeSchemas([
-              { key: 'fontName', value: e.target.value, schemaId: activeSchema.id, },
-            ]);
+            changeSchemas([{ key: 'fontName', value: e.target.value, schemaId: activeSchema.id }]);
           }}
         />
 
@@ -194,8 +192,17 @@ const TextPropEditor = (
           value={activeSchema.fontSize ?? DEFAULT_FONT_SIZE}
           onChange={(e) => {
             const currentFontSize = Number(e.target.value);
+            const dynamincFontSizeMinAdjust = activeSchema.dynamicFontSize && activeSchema.dynamicFontSize.min > currentFontSize;
+
             changeSchemas([
-              { key: 'fontSize', value: currentFontSize, schemaId: activeSchema.id, },
+              { key: 'fontSize', value: currentFontSize, schemaId: activeSchema.id },
+              ...(dynamincFontSizeMinAdjust
+                ? [{
+                      key: 'dynamicFontSize.min',
+                      value: currentFontSize,
+                      schemaId: activeSchema.id,
+                    }]
+                : []),
             ]);
           }}
         />

package/src/components/Schemas/TextSchema.tsx

@@ -7,12 +7,13 @@ import {
   DEFAULT_FONT_COLOR,
   TextSchema,
   calculateDynamicFontSize,
+  getFontKitFont,
+  getFontAlignmentValue,
 } from '@pdfme/common';
 import { SchemaUIProps } from './SchemaUI';
 import { ZOOM } from '../../constants';
 import { FontContext } from '../../contexts';
 
-
 type Props = SchemaUIProps & { schema: TextSchema };
 
 const TextSchemaUI = (
@@ -20,9 +21,9 @@ const TextSchemaUI = (
   ref: Ref<HTMLTextAreaElement>
 ) => {
   const font = useContext(FontContext);
-
-
   const [dynamicFontSize, setDynamicFontSize] = useState<number | undefined>(undefined);
+  const [fontAlignmentValue, setFontAlignmentValue] = useState<number>(0);
+
 
   useEffect(() => {
     if (schema.dynamicFontSize && schema.data) {
@@ -30,25 +31,33 @@ const TextSchemaUI = (
     } else {
       setDynamicFontSize(undefined);
     }
-  }, [schema.data, schema.width, schema.fontName, schema.dynamicFontSize, schema.dynamicFontSize?.max, schema.dynamicFontSize?.min, schema.characterSpacing, font]);
+    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]);
+
 
   const style: React.CSSProperties = {
+    position: 'absolute',
+    top: 0,
     padding: 0,
+    height: fontAlignmentValue < 0 ? schema.height * ZOOM + Math.abs(fontAlignmentValue) : schema.height * ZOOM,
+    width: schema.width * ZOOM,
     resize: 'none',
-    position: 'absolute',
+    marginTop: fontAlignmentValue < 0 ? fontAlignmentValue : 0,
+    paddingTop: fontAlignmentValue >= 0 ? fontAlignmentValue : 0,
     fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
-    height: schema.height * ZOOM,
-    width: schema.width * ZOOM,
-    textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
+    color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
     fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
     letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
     lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
+    textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
     whiteSpace: 'pre-line',
     wordBreak: 'break-word',
-    border: 'none',
-    color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
     backgroundColor:
       schema.data && schema.backgroundColor ? schema.backgroundColor : 'rgb(242 244 255 / 75%)',
+    border: 'none',
   };
 
   return editable ? (
@@ -61,18 +70,15 @@ const TextSchemaUI = (
       value={schema.data}
     ></textarea>
   ) : (
-    <div style={style}>
-      {/*  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',
-          }}
-        >
-          {l}
-        </span>
-      ))}
+    <div style={{ ...style, height: schema.height * ZOOM, marginTop: 0, paddingTop: 0 }}>
+      <div style={{ marginTop: style.marginTop, paddingTop: style.paddingTop }}>
+        {/*  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', }} >
+            {l}
+          </span>
+        ))}
+      </div>
     </div>
   );
 };