fix: text input font size isssue in mobile view

Author: raktima-opensignlabs

apps/OpenSign/src/components/pdf/PlaceholderType.js

@@ -520,7 +520,8 @@ function PlaceholderType(props) {
               ? props.pos.options?.fontSize + "px"
               : "12px",
             color: props.pos.options?.fontColor || "black",
-            fontFamily: "Arial, sans-serif"
+            fontFamily: "Arial, sans-serif",
+            overflow: "hidden"
           }}
         >
           <span>{type}</span>
@@ -607,7 +608,8 @@ function PlaceholderType(props) {
               ? props.pos.options?.fontSize + "px"
               : "12px",
             color: props.pos.options?.fontColor || "black",
-            fontFamily: "Arial, sans-serif"
+            fontFamily: "Arial, sans-serif",
+            overflow: "hidden"
           }}
         >
           <span>{type}</span>
@@ -740,7 +742,8 @@ function PlaceholderType(props) {
               ? props.pos.options?.fontSize + "px"
               : "12px",
             color: props.pos.options?.fontColor || "black",
-            fontFamily: "Arial, sans-serif"
+            fontFamily: "Arial, sans-serif",
+            overflow: "hidden"
           }}
         >
           <span>{type}</span>

apps/OpenSign/src/constant/Utils.js

@@ -1249,15 +1249,30 @@ export const changeImageWH = async (base64Image) => {
   });
 };
 
+//function to calculate font size of text area widgets
+const calculateFontSize = (position, containerScale, signyourself) => {
+  const font = position?.options?.fontSize || 12;
+  if (!signyourself && position?.isMobile && position?.scale) {
+    return font / position?.scale / containerScale;
+  } else {
+    return font / containerScale;
+  }
+};
 //function for embed multiple signature using pdf-lib
 export const multiSignEmbed = async (
   xyPositionArray,
   pdfDoc,
   signyourself,
   scale,
-  containerScale
+  pdfOriginalWH,
+  containerWH
 ) => {
   for (let item of xyPositionArray) {
+    const containerScale = getContainerScale(
+      pdfOriginalWH,
+      item?.pageNumber,
+      containerWH
+    );
     const typeExist = item.pos.some((data) => data?.type);
     let updateItem;
 
@@ -1417,9 +1432,13 @@ export const multiSignEmbed = async (
         }
       } else if (widgetTypeExist) {
         const font = await pdfDoc.embedFont("Helvetica");
-        const fontSize =
-          parseInt(position?.options?.fontSize / containerScale) ||
-          12 / containerScale;
+        const fontSize = calculateFontSize(
+          position,
+          containerScale,
+          signyourself
+        );
+        parseInt(fontSize);
+
         const color = position?.options?.fontColor;
         let updateColorInRgb;
         if (color === "red") {

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -30,8 +30,7 @@ import {
   contactBook,
   handleDownloadPdf,
   handleToPrint,
-  handleDownloadCertificate,
-  getContainerScale
+  handleDownloadCertificate
 } from "../constant/Utils";
 import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
@@ -679,7 +678,7 @@ function PdfRequestFiles(props) {
             widgetKey,
             radioExist,
             requiredCheckbox,
-            pageNumber; // `pageNumber` is used to check on which page user did not fill widget's data then change current pageNumber and show tour message on that page
+            TourPageNumber; // `pageNumber` is used to check on which page user did not fill widget's data then change current pageNumber and show tour message on that page
 
           for (let i = 0; i < checkUser[0].placeHolder.length; i++) {
             for (let j = 0; j < checkUser[0].placeHolder[i].pos.length; j++) {
@@ -727,7 +726,7 @@ function PdfRequestFiles(props) {
                     ) {
                       showAlert = true;
                       widgetKey = requiredCheckbox[i].key;
-                      pageNumber = updatePage;
+                      TourPageNumber = updatePage;
                       setminRequiredCount(parseMin);
                     }
                     //else condition to validate minimum required checkbox
@@ -738,8 +737,7 @@ function PdfRequestFiles(props) {
                       if (!showAlert) {
                         showAlert = true;
                         widgetKey = requiredCheckbox[i].key;
-                        pageNumber = updatePage;
-
+                        TourPageNumber = updatePage;
                         setminRequiredCount(parseMin);
                       }
                     }
@@ -765,7 +763,7 @@ function PdfRequestFiles(props) {
                       if (!checkDefaultSigned && !showAlert) {
                         showAlert = true;
                         widgetKey = requiredRadio[i].key;
-                        pageNumber = updatePage;
+                        TourPageNumber = updatePage;
                         setminRequiredCount(null);
                       }
                     }
@@ -793,7 +791,7 @@ function PdfRequestFiles(props) {
                         if (!checkDefaultSigned && !showAlert) {
                           showAlert = true;
                           widgetKey = requiredWidgets[i].key;
-                          pageNumber = updatePage;
+                          TourPageNumber = updatePage;
                           setminRequiredCount(null);
                         }
                       }
@@ -809,15 +807,15 @@ function PdfRequestFiles(props) {
           }
           if (checkboxExist && requiredCheckbox && showAlert) {
             setUnSignedWidgetId(widgetKey);
-            setPageNumber(pageNumber);
+            setPageNumber(TourPageNumber);
             setWidgetsTour(true);
           } else if (radioExist && showAlert) {
             setUnSignedWidgetId(widgetKey);
-            setPageNumber(pageNumber);
+            setPageNumber(TourPageNumber);
             setWidgetsTour(true);
           } else if (showAlert) {
             setUnSignedWidgetId(widgetKey);
-            setPageNumber(pageNumber);
+            setPageNumber(TourPageNumber);
             setWidgetsTour(true);
           } else {
             setIsUiLoading(true);
@@ -858,18 +856,14 @@ function PdfRequestFiles(props) {
                   await embedDocId(pdfDoc, documentId, allPages);
                 }
               }
-              const containerScale = getContainerScale(
-                pdfOriginalWH,
-                pageNumber,
-                containerWH
-              );
               //embed multi signature in pdf
               const pdfBytes = await multiSignEmbed(
                 pngUrl,
                 pdfDoc,
                 isSignYourSelfFlow,
                 scale,
-                containerScale
+                pdfOriginalWH,
+                containerWH
               );
               //  console.log("pdfte", pdfBytes);
               //get ExistUserPtr object id of user class to get tenantDetails

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -854,18 +854,14 @@ function PlaceHolderSign() {
         ignoreEncryption: true
       });
       const isSignYourSelfFlow = false;
-      const containerScale = getContainerScale(
-        pdfOriginalWH,
-        pageNumber,
-        containerWH
-      );
       try {
         const pdfBytes = await multiSignEmbed(
           placeholder,
           pdfDoc,
           isSignYourSelfFlow,
-          containerWH,
-          containerScale
+          scale,
+          pdfOriginalWH,
+          containerWH
         );
 
         const fileName = sanitizeFileName(pdfDetails[0].Name) + ".pdf";

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -691,18 +691,14 @@ function SignYourSelf() {
             if (!HeaderDocId) {
               await embedDocId(pdfDoc, documentId, allPages);
             }
-            const containerScale = getContainerScale(
-              pdfOriginalWH,
-              pageNumber,
-              containerWH
-            );
             //embed multi signature in pdf
             const pdfBytes = await multiSignEmbed(
               xyPostion,
               pdfDoc,
               isSignYourSelfFlow,
               scale,
-              containerScale
+              pdfOriginalWH,
+              containerWH
             );
             // console.log("pdf", pdfBytes);
             //function for call to embed signature in pdf and get digital signature pdf