fix: size of the placeholder changed after the signature was uploaded in need-your-sign report

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 */}