fix: resize placeholder design and adding resize option for recipients, added signers's name on placeholder

Author: raktima-opensignlabs

microfrontends/SignDocuments/src/Component/PdfRequestFiles.js

@@ -524,6 +524,87 @@ function PdfRequestFiles() {
         alert("something went wrong");
       });
   };
+
+  //function for resize image and update width and height
+  const handleImageResize = (ref, key, signerId, position) => {
+    const filterSignerPos = signerPos.filter(
+      (data) => data.signerObjId === signerId
+    );
+    if (filterSignerPos.length > 0) {
+      const getPlaceHolder = filterSignerPos[0].placeHolder;
+      const getPageNumer = getPlaceHolder.filter(
+        (data) => data.pageNumber === pageNumber
+      );
+      if (getPageNumer.length > 0) {
+        const getXYdata = getPageNumer[0].pos.filter(
+          (data, ind) => data.key === key && data.Width && data.Height
+        );
+        if (getXYdata.length > 0) {
+          const getXYdata = getPageNumer[0].pos;
+          const getPosData = getXYdata;
+          const addSignPos = getPosData.map((url, ind) => {
+            if (url.key === key) {
+              return {
+                ...url,
+                Width: ref.offsetWidth,
+                Height: ref.offsetHeight,
+                xPosition: position.x
+              };
+            }
+            return url;
+          });
+
+          const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+            if (obj.pageNumber === pageNumber) {
+              return { ...obj, pos: addSignPos };
+            }
+            return obj;
+          });
+
+          const newUpdateSigner = signerPos.map((obj, ind) => {
+            if (obj.signerObjId === signerId) {
+              return { ...obj, placeHolder: newUpdateSignPos };
+            }
+            return obj;
+          });
+
+          setSignerPos(newUpdateSigner);
+        } else {
+          const getXYdata = getPageNumer[0].pos;
+
+          const getPosData = getXYdata;
+
+          const addSignPos = getPosData.map((url, ind) => {
+            if (url.key === key) {
+              return {
+                ...url,
+                Width: ref.offsetWidth,
+                Height: ref.offsetHeight
+              };
+            }
+            return url;
+          });
+
+          const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+            if (obj.pageNumber === pageNumber) {
+              return { ...obj, pos: addSignPos };
+            }
+            return obj;
+          });
+
+          const newUpdateSigner = signerPos.map((obj, ind) => {
+            if (obj.signerObjId === signerId) {
+              return { ...obj, placeHolder: newUpdateSignPos };
+            }
+            return obj;
+          });
+
+          setSignerPos(newUpdateSigner);
+        }
+      }
+    }
+  };
+
   //function for get pdf page details
   const pageDetails = async (pdf) => {
     const load = {
@@ -956,6 +1037,7 @@ function PdfRequestFiles() {
                 setCurrentSigner={setCurrentSigner}
                 setPdfLoadFail={setPdfLoadFail}
                 pdfLoadFail={pdfLoadFail}
+                setSignerPos={setSignerPos}
               />
             </div>
             <div>

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -692,60 +692,6 @@ function SignYourSelf() {
     setSignBtnPosition([xySignature]);
   };
 
-  //function for resize image and update width and height
-  const handleImageResize = (ref, key, direction, position) => {
-    const updateFilter = xyPostion[index].pos.filter(
-      (data, ind) => data.key === key && data.Width && data.Height
-    );
-
-    if (updateFilter.length > 0) {
-      const getXYdata = xyPostion[index].pos;
-      const getPosData = getXYdata;
-      const addSign = getPosData.map((url, ind) => {
-        if (url.key === key) {
-          return {
-            ...url,
-            Width: ref.offsetWidth,
-            Height: ref.offsetHeight,
-            xPosition: position.x
-          };
-        }
-        return url;
-      });
-
-      const newUpdateUrl = xyPostion.map((obj, ind) => {
-        if (ind === index) {
-          return { ...obj, pos: addSign };
-        }
-        return obj;
-      });
-
-      setXyPostion(newUpdateUrl);
-    } else {
-      const getXYdata = xyPostion[index].pos;
-
-      const getPosData = getXYdata;
-
-      const addSign = getPosData.map((url, ind) => {
-        if (url.key === key) {
-          return {
-            ...url,
-            Width: ref.offsetWidth,
-            Height: ref.offsetHeight
-          };
-        }
-        return url;
-      });
-
-      const newUpdateUrl = xyPostion.map((obj, ind) => {
-        if (ind === index) {
-          return { ...obj, pos: addSign };
-        }
-        return obj;
-      });
-      setXyPostion(newUpdateUrl);
-    }
-  };
   const handleAllDelete = () => {
     setXyPostion([]);
   };
@@ -1002,7 +948,6 @@ function SignYourSelf() {
                 nodeRef={nodeRef}
                 handleTabDrag={handleTabDrag}
                 handleStop={handleStop}
-                handleImageResize={handleImageResize}
                 isDragging={isDragging}
                 setIsSignPad={setIsSignPad}
                 setIsStamp={setIsStamp}
@@ -1017,6 +962,8 @@ function SignYourSelf() {
                 pageDetails={pageDetails}
                 setPdfLoadFail={setPdfLoadFail}
                 pdfLoadFail={pdfLoadFail}
+                setXyPostion={setXyPostion}
+                index={index}
               />
             </div>
           </div>

microfrontends/SignDocuments/src/Component/component/borderResize.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+function BorderResize() {
+  return (
+    <div
+      className="borderResize"
+      style={{
+        right: "-1px",
+        bottom: "-1px",
+        borderRight: "3px solid  #188ae2",
+        borderBottom: "3px solid #188ae2"
+      }}
+    ></div>
+  );
+}
+
+export default BorderResize;