From d224a44e541a6159dc84cd4aad7e0b3cb10f809e Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Thu, 7 Dec 2023 20:01:15 +0530 Subject: [PATCH] fix: mobile to desktop and desktop to mobile view placeholder location issue --- .../src/Component/PdfRequestFiles.js | 12 +- .../src/Component/SignYourselfPdf.js | 4 +- .../src/Component/component/modalComponent.js | 49 +++-- .../src/Component/component/renderPdf.js | 114 ++++++++-- .../src/Component/placeHolderSign.js | 8 +- .../src/Component/recipientSignPdf.js | 8 +- .../SignDocuments/src/utils/Utils.js | 197 ++++++++++++++---- 7 files changed, 302 insertions(+), 90 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 71f2dc1b3..ac93db750 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -296,7 +296,7 @@ function PdfRequestFiles() { } } - if (checkSignUrl && checkSignUrl.length > 0) { + if (checkSignUrl && checkSignUrl.length == 0) { alert("Please complete your signature!"); } else { setIsUiLoading(true); @@ -348,17 +348,16 @@ function PdfRequestFiles() { ); //function for call to embed signature in pdf and get digital signature pdf - signPdfFun( newImgUrl, documentId, signerObjectId, pdfOriginalWidth, pngUrl, + containerWH, data, pdfBase64, - pageNo, - containerWH + pageNo ) .then((res) => { if (res && res.status === "success") { @@ -390,9 +389,10 @@ function PdfRequestFiles() { pngUrl, pdfDoc, pdfOriginalWidth, - false + false, + containerWH ); - + // console.log(pdfBytes) //function for call to embed signature in pdf and get digital signature pdf signPdfFun( pdfBytes, diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index f955a6fd3..664b0313e 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -407,7 +407,7 @@ function SignYourSelf() { } } - if (checkSignUrl && checkSignUrl.length > 0) { + if (checkSignUrl && checkSignUrl.length == 0) { alert("Please complete your signature!"); } else { setIsCeleb(true); @@ -479,7 +479,7 @@ function SignYourSelf() { true, containerWH ); - + //function for call to embed signature in pdf and get digital signature pdf signPdfFun(pdfBytes, documentId); } setIsSignPad(false); diff --git a/microfrontends/SignDocuments/src/Component/component/modalComponent.js b/microfrontends/SignDocuments/src/Component/component/modalComponent.js index 589c5a2ba..8ab872e35 100644 --- a/microfrontends/SignDocuments/src/Component/component/modalComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/modalComponent.js @@ -1,13 +1,16 @@ import React from "react"; import Modal from "react-bootstrap/Modal"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; - +import { useNavigate } from "react-router-dom"; function ModalComponent({ isShow, type, setIsShowEmail }) { + const navigate = useNavigate(); return ( {type === "signersAlert" ? ( Select signers + ) : type === "alreadyPlace" ? ( + Already Placed! ) : ( Document Expired! )} @@ -16,24 +19,42 @@ function ModalComponent({ isShow, type, setIsShowEmail }) { {type === "signersAlert" ? (

Please select signer for add placeholder!

+ ) : type === "alreadyPlace" ? ( +

Already set placeHolder for this document.

) : (

This Document is no longer available.

)} - {type === "signersAlert" &&( - )} + {type === "signersAlert" ? ( + + ) : ( + type === "alreadyPlace" && ( + + ) + )} ); diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 8e7626d8b..79502599a 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -59,30 +59,64 @@ function RenderPdf({ let width; if (isMobile) { if (!pos.isMobile) { - width = pos.Width / scale ? pos.Width / scale : 150 / scale; - return width; + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width / scale ? pos.Width / scale : 150 / scale; + // width = + // pos.Width * pos.scale ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } } else { width = pos.Width ? pos.Width : 150; return width; } } else { - width = pos.Width ? pos.Width : 150; - return width; + if (pos.isMobile) { + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } + } else { + width = pos.Width ? pos.Width : 150; + return width; + } } }; const posHeight = (pos) => { - let width; + let height; if (isMobile) { if (!pos.isMobile) { - width = pos.Height / scale ? pos.Height / scale : 60 / scale; - return width; + if (pos.IsResize) { + // height = pos.Height ? pos.Height / scale : 60 / scale; + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height / scale : 60 / scale; + // height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } } else { - width = pos.Height ? pos.Height : 60; - return width; + height = pos.Height ? pos.Height : 60; + return height; } } else { - width = pos.Height ? pos.Height : 60; - return width; + if (pos.isMobile) { + if (pos.IsResize) { + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } + } else { + height = pos.Height ? pos.Height : 60; + return height; + } } }; @@ -99,7 +133,7 @@ function RenderPdf({ if (isMobile) { //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale if (!pos.isMobile) { - return pos.xPosition / scale - 32; + return pos.xPosition / scale; } //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale else { @@ -169,7 +203,8 @@ function RenderPdf({ data.signerObjId === signerObjectId ? "pointer" : "not-allowed", - borderColor: themeColor() + borderColor: themeColor(), + background: data.blockColor }} className="placeholderBlock" size={{ @@ -186,7 +221,8 @@ function RenderPdf({ pageNumber, setSignerPos, pdfOriginalWidth, - containerWH + containerWH, + true ); }} lockAspectRatio={pos.Width && 2.5} @@ -262,6 +298,46 @@ function RenderPdf({ } }; + const calculateWidth = (pos) => { + let width; + if (isMobile) { + width = pos.Width ? pos.Width * scale : 150 * scale; + return width; + } else { + if (pos.isMobile) { + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } + } else { + width = pos.Width ? pos.Width : 150; + return width; + } + } + }; + const calculateHeight = (pos) => { + let height; + if (isMobile) { + height = pos.Height ? pos.Height * scale : 60 * scale; + return height; + } else { + if (pos.isMobile) { + if (pos.IsResize) { + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } + } else { + height = pos.Height ? pos.Height : 60; + return height; + } + } + }; return ( <> {isMobile && scale ? ( @@ -413,7 +489,8 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", - borderColor: themeColor() + borderColor: themeColor(), + background: data.blockColor }} className="placeholderBlock" onDrag={() => @@ -464,6 +541,7 @@ function RenderPdf({ setSignerPos, pdfOriginalWidth, containerWH, + false, setIsResize ); }} @@ -739,8 +817,8 @@ function RenderPdf({ }} className="placeholderBlock" size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 + width: calculateWidth(pos), + height: calculateHeight(pos) }} lockAspectRatio={pos.Width && 2.5} //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale @@ -828,6 +906,7 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", + background: data.blockColor, borderColor: themeColor() }} className="placeholderBlock" @@ -878,6 +957,7 @@ function RenderPdf({ setSignerPos, pdfOriginalWidth, containerWH, + false, setIsResize ); }} diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 6d0a95b65..8d1eb8a54 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -65,6 +65,7 @@ function PlaceHolderSign() { const [isShowEmail, setIsShowEmail] = useState(false); const [selectedEmail, setSelectedEmail] = useState(false); const [isResize, setIsResize] = useState(false); + const [isAlreadyPlace, setIsAlreadyPlace] = useState(false); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -181,8 +182,12 @@ function PlaceHolderSign() { //getting document details const documentData = await contractDocument(documentId); if (documentData && documentData.length > 0) { + const alreadyPlaceholder = + documentData[0].Placeholders && documentData[0].Placeholders; + if (alreadyPlaceholder && alreadyPlaceholder.length > 0) { + setIsAlreadyPlace(true); + } setPdfDetails(documentData); - const currEmail = documentData[0].ExtUserPtr.Email; const filterCurrEmail = documentData[0].Signers.filter( (data) => data.Email === currEmail @@ -916,6 +921,7 @@ function PlaceHolderSign() { )} + 0) { + if (checkSignUrl && checkSignUrl.length == 0) { alert("Please complete your signature!"); } else { const loadObj = { @@ -456,10 +456,10 @@ function EmbedPdfImage() { signerUserId, pdfOriginalWidth, xyPostion, + containerWH, data, pdfBase64, - pageNo, - containerWH + pageNo ) .then((res) => { if (res && res.status === "success") { @@ -508,7 +508,7 @@ function EmbedPdfImage() { } }) .catch((err) => { - alert("something went wrong in query"); + alert("something went wrong in query", err); }); } setIsSignPad(false); diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index b12cf2fc1..24d9f7e8e 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -1,6 +1,7 @@ import axios from "axios"; import { $ } from "select-dom"; import { rgb } from "pdf-lib"; +const isMobile = window.innerWidth < 767; export async function getBase64FromUrl(url) { const data = await fetch(url); const blob = await data.blob(); @@ -342,7 +343,83 @@ export function modalAlign() { modal.style.top = window.innerHeight / 3 + "px"; } } +export const containerWidth = (pos, scale, signyourself) => { + let width; + if (signyourself) { + if (isMobile) { + return pos.Width * scale; + } else { + return pos.Width; + } + } else { + if (isMobile) { + if (pos.isMobile) { + width = pos.Width ? pos.Width * scale : 150 * scale; + return width; + } else { + if (pos.IsResize) { + width = pos.Width ? pos.Width * scale : 150 * scale; + return width; + } else { + width = pos.Width ? pos.Width : 150; + return width; + } + } + } else { + if (pos.isMobile) { + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } + } else { + width = pos.Width ? pos.Width : 150; + return width; + } + } + } +}; +export const containerHeight = (pos, scale, signyourself) => { + let height; + if (signyourself) { + if (isMobile) { + return pos.Height * scale; + } else { + return pos.Height; + } + } else { + if (isMobile) { + if (pos.isMobile) { + height = pos.Height ? pos.Height * scale : 60 * scale; + return height; + } else { + if (pos.IsResize) { + height = pos.Height ? pos.Height * scale : 60 * scale; + return height; + } else { + height = pos.Height ? pos.Height : 60; + return height; + } + } + } else { + if (pos.isMobile) { + if (pos.IsResize) { + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } + } else { + height = pos.Height ? pos.Height : 60; + return height; + } + } + } +}; //function for embed multiple signature using pdf-lib export const multiSignEmbed = async ( pngUrl, @@ -352,6 +429,9 @@ export const multiSignEmbed = async ( containerWH ) => { for (let i = 0; i < pngUrl.length; i++) { + const isMobile = window.innerWidth < 767; + const newWidth = containerWH.width; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; const pageNo = pngUrl[i].pageNumber; const imgUrlList = pngUrl[i].pos; const pages = pdfDoc.getPages(); @@ -384,10 +464,9 @@ export const multiSignEmbed = async ( img = await pdfDoc.embedPng(imgData); } const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60; - const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150; - const isMobile = window.innerWidth < 767; - const newWidth = containerWH.width; - const scale = isMobile ? pdfOriginalWidth / newWidth : 1; + const scaleWidth = containerWidth(imgUrlList[id], scale, signyourself); + const scaleHeight = containerHeight(imgUrlList[id], scale, signyourself); + const xPos = (pos) => { if (signyourself) { if (isMobile) { @@ -438,13 +517,22 @@ export const multiSignEmbed = async ( const y = pos.yPosition * (pos.scale / scale); return page.getHeight() - y * scale - imgHeight * scale; } else { - return page.getHeight() - y * scale - imgHeight * scale; + if (pos.IsResize) { + return page.getHeight() - y * scale - imgHeight * scale; + } else { + return page.getHeight() - y * scale - imgHeight; + } } } else { //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale if (pos.isMobile) { - const y = pos.yPosition * pos.scale; - return page.getHeight() - y - imgHeight; + if (pos.IsResize) { + const y = pos.yPosition * pos.scale; + return page.getHeight() - y - imgHeight; + } else { + const y = pos.yPosition * pos.scale; + return page.getHeight() - y - imgHeight * pos.scale; + } } else { return page.getHeight() - pos.yPosition - imgHeight; } @@ -455,12 +543,14 @@ export const multiSignEmbed = async ( page.drawImage(img, { x: xPos(imgUrlList[id]), y: yPos(imgUrlList[id]), - width: imgWidth * scale, - height: imgHeight * scale + width: scaleWidth, + height: scaleHeight }); }); } + const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false }); + return pdfBytes; }; //function for embed document id @@ -499,6 +589,7 @@ export const handleImageResize = ( setSignerPos, pdfOriginalWidth, containerWH, + showResize, setIsResize ) => { const filterSignerPos = signerPos.filter( @@ -523,11 +614,9 @@ export const handleImageResize = ( if (url.key === key) { return { ...url, - Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - Height: !url.isMobile - ? ref.offsetHeight * scale - : ref.offsetHeight - // xPosition: position.x + Width: ref.offsetWidth, + Height: ref.offsetHeight, + IsResize: showResize ? true : false }; } return url; @@ -550,17 +639,14 @@ export const handleImageResize = ( setSignerPos(newUpdateSigner); } else { const getXYdata = getPageNumer[0].pos; - const getPosData = getXYdata; - const addSignPos = getPosData.map((url, ind) => { if (url.key === key) { return { ...url, - Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - Height: !url.isMobile - ? ref.offsetHeight * scale - : ref.offsetHeight + Width: ref.offsetWidth, + Height: ref.offsetHeight, + IsResize: showResize ? true : false }; } return url; @@ -603,7 +689,8 @@ export const handleSignYourselfImageResize = ( (data) => data.key === key && data.Width && data.Height ); const isMobile = window.innerWidth < 767; - const newWidth = containerWH; + const newWidth = containerWH.width; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (updateFilter.length > 0) { @@ -613,11 +700,11 @@ export const handleSignYourselfImageResize = ( if (url.key === key) { return { ...url, - // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight, + // Width: !url.isMobile ? scaleWidth : ref.offsetWidth, + // Height: !url.isMobile ? scaleHeight : ref.offsetHeight, Width: ref.offsetWidth, - Height: ref.offsetHeight - // xPosition: position.xpos + Height: ref.offsetHeight, + IsResize: true }; } return url; @@ -643,7 +730,8 @@ export const handleSignYourselfImageResize = ( // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight Width: ref.offsetWidth, - Height: ref.offsetHeight + Height: ref.offsetHeight, + IsResize: true }; } return url; @@ -666,14 +754,15 @@ export const signPdfFun = async ( signerObjectId, pdfOriginalWidth, signerData, + containerWH, xyPosData, pdfBase64Url, - pageNo, - containerWH + pageNo ) => { let signgleSign; - const isMobile = window.innerWidth < 767; + const newWidth = containerWH.width; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (signerData && signerData.length === 1 && signerData[0].pos.length === 1) { const height = xyPosData.Height ? xyPosData.Height : 60; @@ -715,24 +804,41 @@ export const signPdfFun = async ( return yPosition; } else { const y = pos.yBottom / scale; - - yPosition = pos.isDrag - ? y * scale - height - : pos.firstYPos - ? y * scale - height + pos.firstYPos - : y * scale - height; - return yPosition; + if (pos.IsResize) { + yPosition = pos.isDrag + ? y * scale - height * scale + : pos.firstYPos + ? y * scale - height * scale + pos.firstYPos + : y * scale - height * scale; + return yPosition; + } else { + yPosition = pos.isDrag + ? y * scale - height + : pos.firstYPos + ? y * scale - height + pos.firstYPos + : y * scale - height; + return yPosition; + } } } else { //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale if (pos.isMobile) { const y = pos.yBottom * pos.scale; - yPosition = pos.isDrag - ? y - height - : pos.firstYPos - ? y - height + pos.firstYPos - : y - height; - return yPosition; + if (pos.IsResize) { + yPosition = pos.isDrag + ? y - height + : pos.firstYPos + ? y - height + pos.firstYPos + : y - height; + return yPosition; + } else { + yPosition = pos.isDrag + ? y - height * pos.scale + : pos.firstYPos + ? y - height * pos.scale + pos.firstYPos + : y - height * pos.scale; + return yPosition; + } } else { yPosition = pos.isDrag ? pos.yBottom - height @@ -743,8 +849,7 @@ export const signPdfFun = async ( } } }; - const imgWidth = xyPosData.Width ? xyPosData.Width * scale : 150 * scale; - const imgHeight = height * scale; + const bottomY = yBottom(xyPosData); signgleSign = { pdfFile: pdfBase64Url, @@ -754,8 +859,8 @@ export const signPdfFun = async ( Base64: base64Url, Left: xPos(xyPosData), Bottom: bottomY, - Width: imgWidth, - Height: imgHeight, + Width: containerWidth(xyPosData, scale), + Height: containerHeight(xyPosData, scale), Page: pageNo } };