From 4262e0e6eb17432f7e0553d3e04e0980a8a032e4 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 24 Jul 2024 13:42:41 +0530 Subject: [PATCH] fix: text input font size isssue in mobile view --- .../src/components/pdf/PlaceholderType.js | 9 ++++-- apps/OpenSign/src/constant/Utils.js | 27 +++++++++++++++--- apps/OpenSign/src/pages/PdfRequestFiles.js | 28 ++++++++----------- apps/OpenSign/src/pages/PlaceHolderSign.js | 10 ++----- apps/OpenSign/src/pages/SignyourselfPdf.js | 8 ++---- 5 files changed, 45 insertions(+), 37 deletions(-) diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js index 23feff31b..546e83a65 100644 --- a/apps/OpenSign/src/components/pdf/PlaceholderType.js +++ b/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" }} > {type} @@ -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" }} > {type} @@ -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" }} > {type} diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index 2b50f3cc7..89c73dfc9 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/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") { diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index 0377171f4..09dcf6f1d 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/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 diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 77c0534e1..675868847 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/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"; diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index d16431a8f..1e29946f4 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/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