diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js index aed4f2e99..44251aa4a 100644 --- a/apps/OpenSign/src/components/pdf/Placeholder.js +++ b/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) { diff --git a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js index aa1ac500b..a451dbc83 100644 --- a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js +++ b/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 }} > ); diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js index 29d2d31d6..0780918d5 100644 --- a/apps/OpenSign/src/components/pdf/PlaceholderType.js +++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js @@ -139,8 +139,7 @@ function PlaceholderType(props) { const ExampleCustomInput = forwardRef(({ value, onClick }, 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" }} > {type} @@ -465,10 +459,7 @@ function PlaceholderType(props) { })} ) : ( -
+
{props.pos?.options?.name ? props.pos.options.name : type}
); @@ -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" }} > {type} @@ -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" }} > {type} @@ -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" }} > {type} @@ -677,7 +672,7 @@ function PlaceholderType(props) { />
) : ( -
+
{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" }} > {type} @@ -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", diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js index a49cde627..2fad7783c 100644 --- a/apps/OpenSign/src/components/pdf/RenderPdf.js +++ b/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; diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index 84771816e..2b50f3cc7 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/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; +}; diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index 2b001da8e..0377171f4 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/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 diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 60754ea3d..77c0534e1 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/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"; diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index b13cab34a..d16431a8f 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -32,7 +32,8 @@ import { textInputWidget, fetchImageBase64, changeImageWH, - handleSendOTP + handleSendOTP, + getContainerScale } from "../constant/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; @@ -453,10 +454,11 @@ function SignYourSelf() { const widgetTypeExist = ["name", "company", "job title", "email"].includes( dragTypeValue ); - const getPdfPageWidth = pdfOriginalWH.find( - (data) => data.pageNumber === pageNumber + const containerScale = getContainerScale( + pdfOriginalWH, + pageNumber, + containerWH ); - const containerScale = containerWH?.width / getPdfPageWidth?.width || 1; //adding and updating drop position in array when user drop signature button in div if (item === "onclick") { const getWidth = widgetTypeExist @@ -689,12 +691,18 @@ 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 + scale, + containerScale ); // console.log("pdf", pdfBytes); //function for call to embed signature in pdf and get digital signature pdf @@ -812,10 +820,11 @@ function SignYourSelf() { setFontColor(); if (isDragging && dragElement) { event.preventDefault(); - const getPdfPageWidth = pdfOriginalWH.find( - (data) => data.pageNumber === pageNumber + const containerScale = getContainerScale( + pdfOriginalWH, + pageNumber, + containerWH ); - const containerScale = containerWH.width / getPdfPageWidth?.width || 1; if (dragKey >= 0) { const filterDropPos = xyPostion.filter( (data) => data.pageNumber === pageNumber diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index 1b386692d..e96cab49d 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -24,7 +24,8 @@ import { addWidgetOptions, textInputWidget, radioButtonWidget, - fetchSubscription + fetchSubscription, + getContainerScale } from "../constant/Utils"; import RenderPdf from "../components/pdf/RenderPdf"; import "../styles/AddUser.css"; @@ -364,10 +365,11 @@ const TemplatePlaceholder = () => { if (signer) { const posZIndex = zIndex + 1; setZIndex(posZIndex); - const getPdfPageWidth = pdfOriginalWH.find( - (data) => data.pageNumber === pageNumber + const containerScale = getContainerScale( + pdfOriginalWH, + pageNumber, + containerWH ); - const containerScale = containerWH.width / getPdfPageWidth?.width || 1; const key = randomId(); let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); const dragTypeValue = item?.text ? item.text : monitor.type; @@ -561,10 +563,11 @@ const TemplatePlaceholder = () => { updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace); const signId = signerId; //? 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 || 1; if (keyValue >= 0) { const filterSignerPos = updateSignPos.filter( (data) => data.Id === signId