fix: text widget font size issue in large pdf

Author: raktima-opensignlabs

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

@@ -4,6 +4,7 @@ import PlaceholderBorder from "./PlaceholderBorder";
 import { Rnd } from "react-rnd";
 import {
   defaultWidthHeight,
+  getContainerScale,
   handleCopyNextToWidget,
   isTabAndMobile,
   onChangeInput,
@@ -634,10 +635,11 @@ function Placeholder(props) {
     );
   };
   const xPos = (pos, signYourself) => {
-    const getPdfPageWidth = props.pdfOriginalWH.find(
-      (data) => data.pageNumber === props.pageNumber
+    const containerScale = getContainerScale(
+      props.pdfOriginalWH,
+      props.pageNumber,
+      props.containerWH
     );
-    const containerScale = props.containerWH.width / getPdfPageWidth?.width;
     const resizePos = pos.xPosition;
     if (signYourself) {
       return resizePos * containerScale * props.scale;
@@ -659,10 +661,11 @@ function Placeholder(props) {
     }
   };
   const yPos = (pos, signYourself) => {
-    const getPdfPageWidth = props.pdfOriginalWH.find(
-      (data) => data.pageNumber === props.pageNumber
+    const containerScale = getContainerScale(
+      props.pdfOriginalWH,
+      props.pageNumber,
+      props.containerWH
     );
-    const containerScale = props.containerWH.width / getPdfPageWidth.width;
     const resizePos = pos.yPosition;
 
     if (signYourself) {

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

@@ -47,14 +47,11 @@ function PlaceholderBorder(props) {
       onTouchEnd={() =>
         props.pos.type === textWidget && props?.setDraggingEnabled(true)
       }
-      className="absolute inline-block w-[14px] h-[14px] hover:cursor-sw-resize"
+      className="absolute inline-block w-[14px] h-[14px]  border-[0.2px] overflow-hidden border-dashed"
       style={{
         borderColor: themeColor,
-        borderStyle: "dashed",
         minWidth: handleMinWidth() || 0,
-        minHeight: handleMinHeight() || 0,
-        borderWidth: "0.2px",
-        overflow: "hidden"
+        minHeight: handleMinHeight() || 0
       }}
     ></div>
   );

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

@@ -139,8 +139,7 @@ function PlaceholderType(props) {
 
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <div
-      className={`${selectWidgetCls} overflow-hidden`}
-      style={{ fontSize: calculateFontSize() }}
+      className={`${selectWidgetCls} text-[12px] overflow-hidden`}
       onClick={onClick}
       ref={ref}
     >
@@ -171,12 +170,6 @@ function PlaceholderType(props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [type]);
-
-  const calculateFontSize = () => {
-    const fontSize = 10 + Math.min(props.pos.Width, props.pos.Height) * 0.1;
-    const size = fontSize ? fontSize : 12;
-    return size + "px";
-  };
   //function for show checked checkbox
   const selectCheckbox = (ind) => {
     const res = props.pos.options?.response;
@@ -426,7 +419,8 @@ function PlaceholderType(props) {
             fontSize: props.pos.options?.fontSize
               ? props.pos.options?.fontSize + "px"
               : "12px",
-            color: props.pos.options?.fontColor || "black"
+            color: props.pos.options?.fontColor || "black",
+            overflow: "hidden"
           }}
         >
           <span>{type}</span>
@@ -465,10 +459,7 @@ function PlaceholderType(props) {
           })}
         </select>
       ) : (
-        <div
-          className={selectWidgetCls}
-          style={{ fontSize: calculateFontSize() }}
-        >
+        <div className="text-[12px] overflow-hidden">
           {props.pos?.options?.name ? props.pos.options.name : type}
         </div>
       );
@@ -527,7 +518,8 @@ function PlaceholderType(props) {
             fontSize: props.pos.options?.fontSize
               ? props.pos.options?.fontSize + "px"
               : "12px",
-            color: props.pos.options?.fontColor || "black"
+            color: props.pos.options?.fontColor || "black",
+            fontFamily: "Arial, sans-serif"
           }}
         >
           <span>{type}</span>
@@ -569,7 +561,9 @@ function PlaceholderType(props) {
             fontSize: props.pos.options?.fontSize
               ? props.pos.options?.fontSize + "px"
               : "12px",
-            color: props.pos.options?.fontColor || "black"
+            color: props.pos.options?.fontColor || "black",
+            overflow: "hidden",
+            fontFamily: "Arial, sans-serif"
           }}
         >
           <span>{type}</span>
@@ -611,7 +605,8 @@ function PlaceholderType(props) {
             fontSize: props.pos.options?.fontSize
               ? props.pos.options?.fontSize + "px"
               : "12px",
-            color: props.pos.options?.fontColor || "black"
+            color: props.pos.options?.fontColor || "black",
+            fontFamily: "Arial, sans-serif"
           }}
         >
           <span>{type}</span>
@@ -677,7 +672,7 @@ function PlaceholderType(props) {
           />
         </div>
       ) : (
-        <div className="text-[12px] text-black uppercase items-center">
+        <div className="text-[12px] text-black items-center overflow-hidden">
           <span>
             {props.selectDate
               ? props.selectDate?.format
@@ -732,7 +727,8 @@ function PlaceholderType(props) {
             fontSize: props.pos.options?.fontSize
               ? props.pos.options?.fontSize + "px"
               : "12px",
-            color: props.pos.options?.fontColor || "black"
+            color: props.pos.options?.fontColor || "black",
+            fontFamily: "Arial, sans-serif"
           }}
           cols="50"
         />
@@ -742,7 +738,8 @@ function PlaceholderType(props) {
             fontSize: props.pos.options?.fontSize
               ? props.pos.options?.fontSize + "px"
               : "12px",
-            color: props.pos.options?.fontColor || "black"
+            color: props.pos.options?.fontColor || "black",
+            fontFamily: "Arial, sans-serif"
           }}
         >
           <span>{type}</span>
@@ -801,6 +798,7 @@ function PlaceholderType(props) {
           }}
           className={textWidgetCls}
           style={{
+            fontFamily: "Arial, sans-serif",
             fontSize: props.pos.options?.fontSize
               ? props.pos.options?.fontSize + "px"
               : "12px",

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

@@ -3,6 +3,7 @@ import RSC from "react-scrollbars-custom";
 import { Document, Page } from "react-pdf";
 import {
   defaultWidthHeight,
+  getContainerScale,
   handleImageResize,
   handleSignYourselfImageResize
 } from "../../constant/Utils";
@@ -68,10 +69,11 @@ function RenderPdf({
 
   // handle signature block width and height according to screen
   const posWidth = (pos, signYourself) => {
-    const getPdfPageWidth = pdfOriginalWH.find(
-      (data) => data.pageNumber === pageNumber
+    const containerScale = getContainerScale(
+      pdfOriginalWH,
+      pageNumber,
+      containerWH
     );
-    const containerScale = containerWH.width / getPdfPageWidth.width || 1;
     const defaultWidth = defaultWidthHeight(pos.type).width;
     const posWidth = pos.Width ? pos.Width : defaultWidth;
     if (signYourself) {
@@ -97,11 +99,11 @@ function RenderPdf({
     }
   };
   const posHeight = (pos, signYourself) => {
-    const getPdfPageWidth = pdfOriginalWH.find(
-      (data) => data.pageNumber === pageNumber
+    const containerScale = getContainerScale(
+      pdfOriginalWH,
+      pageNumber,
+      containerWH
     );
-    const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
-
     const posHeight = pos.Height || defaultWidthHeight(pos.type).height;
     if (signYourself) {
       return posHeight * scale * containerScale;

apps/OpenSign/src/constant/Utils.js

@@ -1254,7 +1254,8 @@ export const multiSignEmbed = async (
   xyPositionArray,
   pdfDoc,
   signyourself,
-  scale
+  scale,
+  containerScale
 ) => {
   for (let item of xyPositionArray) {
     const typeExist = item.pos.some((data) => data?.type);
@@ -1416,7 +1417,9 @@ export const multiSignEmbed = async (
         }
       } else if (widgetTypeExist) {
         const font = await pdfDoc.embedFont("Helvetica");
-        const fontSize = parseInt(position?.options?.fontSize) || 12;
+        const fontSize =
+          parseInt(position?.options?.fontSize / containerScale) ||
+          12 / containerScale;
         const color = position?.options?.fontColor;
         let updateColorInRgb;
         if (color === "red") {
@@ -1591,7 +1594,7 @@ export const multiSignEmbed = async (
     });
   }
   const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
-  // console.log("pdf", pdfBytes);
+  //console.log("pdf", pdfBytes);
   return pdfBytes;
 };
 
@@ -2211,3 +2214,11 @@ function getImagePosition(page, image, sizeRatio) {
     rotate: page.getRotation()
   };
 }
+//function to use calculate pdf rendering scale in the container
+export const getContainerScale = (pdfOriginalWH, pageNumber, containerWH) => {
+  const getPdfPageWidth = pdfOriginalWH.find(
+    (data) => data.pageNumber === pageNumber
+  );
+  const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
+  return containerScale;
+};

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -30,7 +30,8 @@ import {
   contactBook,
   handleDownloadPdf,
   handleToPrint,
-  handleDownloadCertificate
+  handleDownloadCertificate,
+  getContainerScale
 } from "../constant/Utils";
 import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
@@ -857,12 +858,18 @@ 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
+                scale,
+                containerScale
               );
               //  console.log("pdfte", pdfBytes);
               //get ExistUserPtr object id of user class to get tenantDetails

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -33,7 +33,8 @@ import {
   replaceMailVaribles,
   copytoData,
   fetchSubscription,
-  convertPdfArrayBuffer
+  convertPdfArrayBuffer,
+  getContainerScale
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import { useNavigate } from "react-router-dom";
@@ -452,10 +453,11 @@ function PlaceHolderSign() {
       setZIndex(posZIndex);
       const signer = signersdata.find((x) => x.Id === uniqueId);
       const key = randomId();
-      const getPdfPageWidth = pdfOriginalWH.find(
-        (data) => data.pageNumber === pageNumber
+      const containerScale = getContainerScale(
+        pdfOriginalWH,
+        pageNumber,
+        containerWH
       );
-      const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
       let dropData = [];
       let placeHolder;
       const dragTypeValue = item?.text ? item.text : monitor.type;
@@ -676,11 +678,11 @@ function PlaceHolderSign() {
       updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace);
       const signId = signerId ? signerId : uniqueId; //? signerId : signerObjId;
       const keyValue = key ? key : dragKey;
-      const getPdfPageWidth = pdfOriginalWH.find(
-        (data) => data.pageNumber === pageNumber
+      const containerScale = getContainerScale(
+        pdfOriginalWH,
+        pageNumber,
+        containerWH
       );
-      const containerScale = containerWH.width / getPdfPageWidth?.width;
-
       if (keyValue >= 0) {
         let filterSignerPos;
         if (signId) {
@@ -851,14 +853,19 @@ function PlaceHolderSign() {
       const pdfDoc = await PDFDocument.load(existingPdfBytes, {
         ignoreEncryption: true
       });
-
       const isSignYourSelfFlow = false;
+      const containerScale = getContainerScale(
+        pdfOriginalWH,
+        pageNumber,
+        containerWH
+      );
       try {
         const pdfBytes = await multiSignEmbed(
           placeholder,
           pdfDoc,
           isSignYourSelfFlow,
-          containerWH
+          containerWH,
+          containerScale
         );
 
         const fileName = sanitizeFileName(pdfDetails[0].Name) + ".pdf";