From fd0ec5fd3167a0ffa2229e73ebd93f318aaf2992 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 26 Dec 2023 18:52:53 +0530 Subject: [PATCH] resolve resize issue for template placeholder --- .../src/Component/PdfRequestFiles.js | 33 +++++---- .../src/Component/TemplatePlaceholder.js | 4 +- .../Component/component/PlaceholderCopy.js | 68 ++++++++++++++----- .../src/Component/component/renderPdf.js | 23 +++++-- .../src/Component/placeHolderSign.js | 4 +- .../SignDocuments/src/utils/Utils.js | 27 ++++++-- 6 files changed, 112 insertions(+), 47 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 6cda177de..228ac55fa 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -808,7 +808,7 @@ function PdfRequestFiles() { }} className="signedStyle" > - Signed By + Signed by
{signedSigners.map((obj, ind) => { @@ -817,8 +817,8 @@ function PdfRequestFiles() { style={{ display: "flex", flexDirection: "row", - padding: "10px", - + alignItems: "center", + padding: "10px 0", background: checkSignerBackColor(obj) }} key={ind} @@ -833,17 +833,18 @@ function PdfRequestFiles() { borderRadius: 30 / 2, justifyContent: "center", alignItems: "center", - marginRight: "20px" + margin: "0 10px 0 5px" }} > - {" "} {getFirstLetter(obj.Name)}
@@ -874,7 +875,7 @@ function PdfRequestFiles() { marginTop: signedSigners.length > 0 && "20px" }} > - Yet To Sign + Yet to sign
{unsignedSigners.map((obj, ind) => { @@ -883,7 +884,8 @@ function PdfRequestFiles() { style={{ display: "flex", flexDirection: "row", - padding: "10px", + alignItems: "center", + padding:"10px 0", background: checkSignerBackColor(obj) }} key={ind} @@ -892,23 +894,24 @@ function PdfRequestFiles() { className="signerStyle" style={{ background: "#abd1d0", - width: 20, - height: 20, + width: 30, + height: 30, display: "flex", borderRadius: 30 / 2, justifyContent: "center", alignItems: "center", - marginRight: "20px" + margin: "0 10px 0 5px" }} > - {" "} {getFirstLetter(obj.Name)}
diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 5acb59798..e6aa79aa9 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -1090,7 +1090,8 @@ const TemplatePlaceholder = () => { allPages={allPages} pageNumber={pageNumber} signKey={signKey} - signerObjId={signerObjId} + // signerObjId={signerObjId} + Id={uniqueId} /> {/* pdf header which contain funish back button */}
{ )} - {/* signature button */} {isMobile ? (
diff --git a/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js b/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js index c7698e067..1a3756960 100644 --- a/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js +++ b/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js @@ -66,21 +66,30 @@ function PlaceholderCopy(props) { let newPlaceholderPosition = []; let newPageNumber = 1; const signerPosition = props.xyPostion; - + const signerId = props.signerObjId ? props.signerObjId : props.Id //handle placeholder array and copy for multiple signers placeholder at requested location - if (props.signerObjId) { + if (signerId) { //get current signers data - const filterSignerPosition = signerPosition.filter( - (data) => data.signerObjId === props.signerObjId - ); + let filterSignerPosition; + if(props?.signerObjId){ + filterSignerPosition = signerPosition.filter( + (data) => data.signerObjId === signerId + ); + }else{ + filterSignerPosition = signerPosition.filter((item)=> item.Id === signerId) + } + console.log("filterSignerPosition ", filterSignerPosition) //get current pagenumber's all placeholder position data const placeholderPosition = filterSignerPosition[0].placeHolder.filter( (data) => data.pageNumber === props.pageNumber ); + console.log("placeholderPosition ", placeholderPosition) + console.log("props.signKey ", props.signKey) //get current placeholder position data which user want to copy const currentPlaceholder = placeholderPosition[0].pos.filter( (position) => position.key === props.signKey ); + console.log("currentPlaceholder ", currentPlaceholder) const { key, ...rest } = currentPlaceholder[0]; for (let i = 0; i < props.allPages; i++) { const newId = randomKey(); @@ -104,18 +113,43 @@ function PlaceholderCopy(props) { } newPageNumber++; } - - const updatedSignerPlaceholder = signerPosition.map( - (signersData, ind) => { - if (signersData.signerObjId === props.signerObjId) { - return { - ...signersData, - placeHolder: newPlaceholderPosition - }; + let updatedSignerPlaceholder; + if(props?.signerObjId){ + updatedSignerPlaceholder = signerPosition.map( + (signersData, ind) => { + if (signersData.signerObjId === props.signerObjId) { + return { + ...signersData, + placeHolder: newPlaceholderPosition + }; + } + return signersData; + } + ); + }else{ + updatedSignerPlaceholder = signerPosition.map( + (signersData, ind) => { + if (signersData.Id === props.Id) { + return { + ...signersData, + placeHolder: newPlaceholderPosition + }; + } + return signersData; } - return signersData; - } - ); + ); + } + // const updatedSignerPlaceholder = signerPosition.map( + // (signersData, ind) => { + // if (signersData.signerObjId === props.signerObjId) { + // return { + // ...signersData, + // placeHolder: newPlaceholderPosition + // }; + // } + // return signersData; + // } + // ); const signersData = signerPosition; signersData.splice(0, signerPosition.length, ...updatedSignerPlaceholder); @@ -174,7 +208,7 @@ function PlaceholderCopy(props) { return ( - Place All pages + Copy to all pages diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index e707c632c..7f47ddae6 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -510,7 +510,7 @@ function RenderPdf({ ); }) - : placeholder + : placeholder // placeholder mobile ? signerPos.map((data, ind) => { return ( @@ -541,9 +541,13 @@ function RenderPdf({ className="signYourselfBlock" onDrag={() => handleTabDrag(pos.key)} size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 + width: posWidth(pos), + height: posHeight(pos) }} + // size={{ + // width: pos.Width ? pos.Width : 150, + // height: pos.Height ? pos.Height : 60 + // }} lockAspectRatio={ pos.Width ? pos.Width / pos.Height @@ -559,9 +563,13 @@ function RenderPdf({ ) // data.signerObjId, } + // default={{ + // x: pos.xPosition, + // y: pos.yPosition + // }} default={{ - x: pos.xPosition, - y: pos.yPosition + x: xPos(pos), + y: yPos(pos) }} onResizeStart={() => { setIsResize(true); @@ -1089,10 +1097,11 @@ function RenderPdf({ delta, position ) => { + e.stopPropagation() handleImageResize( ref, pos.key, - data.signerObjId, + data.Id,//data.signerObjId, position, signerPos, pageNumber, @@ -1122,7 +1131,9 @@ function RenderPdf({ onClick={(e) => { e.stopPropagation(); setIsPageCopy(true); + console.log("pos.key) ", pos.key) setSignKey(pos.key); + setUniqueId(data.Id) setSignerObjId( data.signerObjId ); diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index af3184231..9fbb14f0e 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -1122,7 +1122,8 @@ function PlaceHolderSign() { allPages={allPages} pageNumber={pageNumber} signKey={signKey} - signerObjId={signerObjId} + // signerObjId={signerObjId} + Id={uniqueId} /> {/* pdf header which contain funish back button */}
{ - const filterSignerPos = signerPos.filter( - (data) => data.signerObjId === signerId - ); + // const filterSignerPos = signerPos.filter( + // (data) => data.signerObjId === signerId + // ); + const filterSignerPos = signerPos.filter( + (data) => data.Id === signerId + ); if (filterSignerPos.length > 0) { const getPlaceHolder = filterSignerPos[0].placeHolder; const getPageNumer = getPlaceHolder.filter( @@ -704,13 +707,19 @@ export const handleImageResize = ( return obj; }); + // const newUpdateSigner = signerPos.map((obj, ind) => { + // if (obj.signerObjId === signerId) { + // return { ...obj, placeHolder: newUpdateSignPos }; + // } + // return obj; + // }); + const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.signerObjId === signerId) { + if (obj.Id === signerId) { return { ...obj, placeHolder: newUpdateSignPos }; } return obj; }); - setSignerPos(newUpdateSigner); } else { const getXYdata = getPageNumer[0].pos; @@ -734,8 +743,14 @@ export const handleImageResize = ( return obj; }); + // const newUpdateSigner = signerPos.map((obj, ind) => { + // if (obj.signerObjId === signerId) { + // return { ...obj, placeHolder: newUpdateSignPos }; + // } + // return obj; + // }); const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.signerObjId === signerId) { + if (obj.Id === signerId) { return { ...obj, placeHolder: newUpdateSignPos }; } return obj;