From 3b5875e28364ee0d98d7ab58395072691800fb57 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 22 Dec 2023 12:44:38 +0530 Subject: [PATCH] fix: size of the placeholder changed after the signature was uploaded in need-your-sign report --- .../src/Component/PdfRequestFiles.js | 221 ++++++------------ .../src/Component/SignYourselfPdf.js | 5 +- .../SignDocuments/src/utils/Utils.js | 107 +++------ 3 files changed, 108 insertions(+), 225 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 6daf4a2a5..6cda177de 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -21,8 +21,9 @@ import { embedDocId, pdfNewWidthFun, signPdfFun, - calculateImgAspectRatio, - onImageSelect + onImageSelect, + onSaveSign, + onSaveImage } from "../utils/Utils"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; @@ -482,181 +483,99 @@ function PdfRequestFiles() { } }; //function for upload stamp image - const onSaveImage = () => { + const saveImage = () => { + //get current signers placeholder position data const currentSigner = signerPos.filter( (data) => data.signerObjId === signerObjectId ); - const i = currentSigner[0].placeHolder.findIndex((object) => { + //get current pagenumber placeholder index + const getIndex = currentSigner[0].placeHolder.findIndex((object) => { return object.pageNumber === pageNumber; }); - const updateFilter = currentSigner[0].placeHolder[i].pos.filter( - (data) => - data.key === signKey && data.Width && data.Height && data.SignUrl + //get current signer placeholder position data + const placeholderPosition = currentSigner[0].placeHolder; + //function of save image and get updated position with image url + const getUpdatePosition = onSaveImage( + placeholderPosition, + getIndex, + signKey, + imgWH, + image ); - let getIMGWH = calculateImgAspectRatio(imgWH); - if (updateFilter.length > 0) { - const getXYdata = currentSigner[0].placeHolder[i].pos; - const getPosData = getXYdata; - const addSign = getPosData.map((url, ind) => { - if (url.key === signKey) { - return { - ...url, - Width: getIMGWH.newWidth, - Height: getIMGWH.newHeight, - SignUrl: image.src, - ImageType: image.imgType - }; - } - return url; - }); - - const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => { - if (ind === i) { - return { ...obj, pos: addSign }; - } - return obj; - }); - const getPlaceData = currentSigner[0].placeHolder; - getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl); - - const indexofSigner = signerPos.findIndex((object) => { - return object.signerObjId === signerObjectId; - }); - setSignerPos((prevState) => { - const newState = [...prevState]; // Create a copy of the state - newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy - return newState; // Update the state with the modified copy - }); - } else { - const getXYdata = currentSigner[0].placeHolder[i].pos; - - const getPosData = getXYdata; - - const addSign = getPosData.map((url, ind) => { - if (url.key === signKey) { - return { - ...url, - Width: getIMGWH.newWidth, - Height: getIMGWH.newHeight, - SignUrl: image.src, - ImageType: image.imgType - }; - } - return url; - }); - - const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => { - if (ind === i) { - return { ...obj, pos: addSign }; - } - return obj; - }); - - const getPlaceData = currentSigner[0].placeHolder; - getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl); - - const indexofSigner = signerPos.findIndex((object) => { - return object.signerObjId === signerObjectId; - }); - setSignerPos((prevState) => { - const newState = [...prevState]; // Create a copy of the state - newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy - return newState; // Update the state with the modified copy - }); - } + //replace updated placeholder position with old data + placeholderPosition.splice( + 0, + placeholderPosition.length, + ...getUpdatePosition + ); + //get current signers placeholder position data index number in array + const indexofSigner = signerPos.findIndex((object) => { + return object.signerObjId === signerObjectId; + }); + //update current signers data with new placeholder position array data + setSignerPos((prevState) => { + const newState = [...prevState]; // Create a copy of the state + newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy + return newState; // Update the state with the modified copy + }); }; //function for save button to save signature or image url - const onSaveSign = (isDefaultSign) => { + const saveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; - const isSign = true; - let getIMGWH; + let imgWH = { width: "", height: "" }; setIsSignPad(false); setIsImageSelect(false); setImage(); + + //get current signers placeholder position data + const currentSigner = signerPos.filter( + (data) => data.signerObjId === signerObjectId + ); + //get current pagenumber placeholder index + const getIndex = currentSigner[0].placeHolder.findIndex((object) => { + return object.pageNumber === pageNumber; + }); + + //set default signature image width and height if (isDefaultSign) { const img = new Image(); img.src = defaultSignImg; if (img.complete) { - let imgWH = { + imgWH = { width: img.width, height: img.height }; - getIMGWH = calculateImgAspectRatio(imgWH); } } - const currentSigner = signerPos.filter( - (data) => data.signerObjId === signerObjectId + //get current signer placeholder position data + const placeholderPosition = currentSigner[0].placeHolder; + //function of save signature image and get updated position with signature image url + const getUpdatePosition = onSaveSign( + placeholderPosition, + getIndex, + signKey, + signatureImg, + imgWH, + isDefaultSign ); - const i = currentSigner[0].placeHolder.findIndex((object) => { - return object.pageNumber === pageNumber; + const updateSignerData = currentSigner.map((obj, ind) => { + if (obj.signerObjId === signerObjectId) { + return { ...obj, placeHolder: getUpdatePosition }; + } + return obj; }); - let updateFilter; - - updateFilter = currentSigner[0].placeHolder[i].pos.filter( - (data) => data.key === signKey && data.SignUrl + const index = signerPos.findIndex( + (data) => data.signerObjId === signerObjectId ); - - const getXYdata = currentSigner[0].placeHolder[i].pos; - const getPosData = getXYdata; - const posWidth = isDefaultSign - ? getIMGWH.newWidth - : isSign && getPosData[0].ImageType - ? 150 - : getPosData[0].Width - ? getPosData[0].Width - : 150; - const posHidth = isDefaultSign - ? getIMGWH.newHeight - : isSign && getPosData[0].ImageType - ? 60 - : getPosData[0].Height - ? getPosData[0].Height - : 60; - if (updateFilter.length > 0) { - updateFilter[0].SignUrl = signatureImg; - updateFilter[0].Width = posWidth; - updateFilter[0].Height = posHidth; - } else { - const addSign = getPosData.map((url, ind) => { - if (url.key === signKey) { - return { - ...url, - SignUrl: signatureImg, - Width: posWidth, - Height: posHidth, - ImageType: "sign" - }; - } - return url; - }); - - const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => { - if (obj.pageNumber === pageNumber) { - return { ...obj, pos: addSign }; - } - return obj; - }); - - const newUpdatePos = currentSigner.map((obj, ind) => { - if (obj.signerObjId === signerObjectId) { - return { ...obj, placeHolder: newUpdateUrl }; - } - return obj; - }); - - const index = signerPos.findIndex( - (data) => data.signerObjId === signerObjectId - ); - setSignerPos((prevState) => { - const newState = [...prevState]; // Create a copy of the state - newState.splice(index, 1, ...newUpdatePos); // Modify the copy - return newState; // Update the state with the modified copy - }); - } + setSignerPos((prevState) => { + const newState = [...prevState]; + newState.splice(index, 1, ...updateSignerData); + return newState; + }); }; const checkSignerBackColor = (obj) => { @@ -832,8 +751,8 @@ function PdfRequestFiles() { onImageChange={onImageChange} setSignature={setSignature} image={image} - onSaveImage={onSaveImage} - onSaveSign={onSaveSign} + onSaveImage={saveImage} + onSaveSign={saveSign} defaultSign={defaultSignImg} /> {/* pdf header which contain funish back button */} diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index bf6486281..c2a363590 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -659,7 +659,7 @@ function SignYourSelf() { //function for save button to save signature or image url const saveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; - const signFlag = true; + let imgWH = { width: "", height: "" }; setIsSignPad(false); setIsImageSelect(false); @@ -681,8 +681,7 @@ function SignYourSelf() { signKey, signatureImg, imgWH, - isDefaultSign, - signFlag + isDefaultSign ); setXyPostion(getUpdatePosition); diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 0f35e2db6..0e5e297f7 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -92,60 +92,31 @@ export const calculateImgAspectRatio = (imgWH, pos) => { //function for upload stamp or image export function onSaveImage(xyPostion, index, signKey, imgWH, image) { - const updateFilter = xyPostion[index].pos.filter( - (data, ind) => - data.key === signKey && data.Width && data.Height && data.SignUrl - ); let getIMGWH; - const getXYdata = xyPostion[index].pos; - if (updateFilter.length > 0) { - const addSign = getXYdata.map((url, ind) => { - if (url.key === signKey) { - getIMGWH = calculateImgAspectRatio(imgWH, url); + //get current page position + const getXYData = xyPostion[index].pos; + const updateXYData = getXYData.map((url) => { + if (url.key === signKey) { + getIMGWH = calculateImgAspectRatio(imgWH, url); - return { - ...url, - Width: getIMGWH.newWidth, - Height: getIMGWH.newHeight, - SignUrl: image.src, - ImageType: image.imgType - }; - } - return url; - }); + return { + ...url, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, + SignUrl: image.src, + ImageType: image.imgType + }; + } + return url; + }); - const newUpdateUrl = xyPostion.map((obj, ind) => { - if (ind === index) { - return { ...obj, pos: addSign }; - } - return obj; - }); - return newUpdateUrl; - } else { - const getXYdata = xyPostion[index].pos; - const addSign = getXYdata.map((url, ind) => { - if (url.key === signKey) { - getIMGWH = calculateImgAspectRatio(imgWH, url); - - return { - ...url, - Width: getIMGWH.newWidth, - Height: getIMGWH.newHeight, - SignUrl: image.src, - ImageType: image.imgType - }; - } - return url; - }); - - const newUpdateUrl = xyPostion.map((obj, ind) => { - if (ind === index) { - return { ...obj, pos: addSign }; - } - return obj; - }); - return newUpdateUrl; - } + const updateXYposition = xyPostion.map((obj, ind) => { + if (ind === index) { + return { ...obj, pos: updateXYData }; + } + return obj; + }); + return updateXYposition; } //function for save button to save signature or image url @@ -155,53 +126,47 @@ export function onSaveSign( signKey, signatureImg, imgWH, - isDefaultSign, - isSign + isDefaultSign ) { - let getXYdata = xyPostion[index].pos; - let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey); - let getIMGWH; - - const addSign = getXYdata.map((url, ind) => { - if (url.key === signKey) { + let getXYdata = xyPostion[index].pos; + const updateXYData = getXYdata.map((position) => { + if (position.key === signKey) { if (isDefaultSign) { - getIMGWH = calculateImgAspectRatio(imgWH, url); + getIMGWH = calculateImgAspectRatio(imgWH, position); } - const getSignImgWH = calculateImgAspectRatio( { width: 150, height: 60 }, - url + position ); const posWidth = isDefaultSign ? getIMGWH.newWidth - : getPosData[0].Width + : position.Width ? getSignImgWH.newWidth : 150; const posHeight = isDefaultSign ? getIMGWH.newHeight - : getPosData[0].Height + : position.Height ? getSignImgWH.newHeight : 60; return { - ...url, + ...position, Width: posWidth, Height: posHeight, - SignUrl: signatureImg, - ImageType: "sign" + SignUrl: signatureImg }; } - return url; + return position; }); - const newUpdateUrl = xyPostion.map((obj, ind) => { + const updateXYposition = xyPostion.map((obj, ind) => { if (ind === index) { - return { ...obj, pos: addSign }; + return { ...obj, pos: updateXYData }; } return obj; }); - return newUpdateUrl; + return updateXYposition; } export const addZIndex = (signerPos, key, setZIndex) => {