Merge pull request #249 from OpenSignLabs/placeholder-resize

2026-08-17 21:25:54 +02:00 · 2023-12-06 18:52:47 +05:30
parent b6ce00519f dec13e8b5f
commit f5c0694e32
9 changed files with 1159 additions and 1309 deletions
@@ -51,7 +51,6 @@ function PdfFile() {
    };
    setIsLoading(load);
    const driveDetails = await getDrive();
-
    if (driveDetails) {
      if (driveDetails.length > 0) {
        setPdfData(driveDetails);
@@ -19,7 +19,8 @@ import {
  urlValidator,
  multiSignEmbed,
  embedDocId,
-  pdfNewWidthFun
+  pdfNewWidthFun,
+  signPdfFun
 } from "../utils/Utils";
 import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
@@ -60,6 +61,7 @@ function PdfRequestFiles() {
  const [isUiLoading, setIsUiLoading] = useState(false);
  const [isDecline, setIsDecline] = useState({ isDeclined: false });
  const [currentSigner, setCurrentSigner] = useState(false);
+
  const [isCompleted, setIsCompleted] = useState({
    isCertificate: false,
    isModal: false
@@ -73,6 +75,7 @@ function PdfRequestFiles() {
  const [alreadySign, setAlreadySign] = useState(false);
  const [containerWH, setContainerWH] = useState({});
  const divRef = useRef(null);
+  const isMobile = window.innerWidth < 767;
  const rowLevel =
    localStorage.getItem("rowlevel") &&
    JSON.parse(localStorage.getItem("rowlevel"));
@@ -345,14 +348,32 @@ function PdfRequestFiles() {
                  );

                  //function for call to embed signature in pdf and get digital signature pdf
+
                  signPdfFun(
                    newImgUrl,
                    documentId,
+                    signerObjectId,
+                    pdfOriginalWidth,
+                    pngUrl,
                    data,
                    pdfBase64,
                    pageNo,
-                    pngUrl
-                  );
+                    containerWH
+                  )
+                    .then((res) => {
+                      if (res && res.status === "success") {
+                        setPdfUrl(res.data);
+                        setIsSigned(true);
+                        setSignedSigners([]);
+                        setUnSignedSigners([]);
+                        getDocumentDetails();
+                      } else {
+                        alert("something went wrong");
+                      }
+                    })
+                    .catch((err) => {
+                      alert("something went wrong");
+                    });
                })
                .catch((error) => {
                  console.error("Error:", error);
@@ -372,7 +393,29 @@ function PdfRequestFiles() {
            false
          );

-          signPdfFun(pdfBytes, documentId, pngUrl);
+          //function for call to embed signature in pdf and get digital signature pdf
+          signPdfFun(
+            pdfBytes,
+            documentId,
+            signerObjectId,
+            pdfOriginalWidth,
+            pngUrl,
+            containerWH
+          )
+            .then((res) => {
+              if (res && res.status === "success") {
+                setPdfUrl(res.data);
+                setIsSigned(true);
+                setSignedSigners([]);
+                setUnSignedSigners([]);
+                getDocumentDetails();
+              } else {
+                alert("something went wrong");
+              }
+            })
+            .catch((err) => {
+              alert("something went wrong");
+            });
        }

        setIsSignPad(false);
@@ -383,147 +426,6 @@ function PdfRequestFiles() {
    }
  }

-  //function for call cloud function signPdf and generate digital signature
-  const signPdfFun = async (
-    base64Url,
-    documentId,
-    xyPosData,
-    pdfBase64Url,
-    pageNo,
-    signerData
-  ) => {
-    let signgleSign;
-    const isMobile = window.innerWidth < 767;
-    const newWidth = window.innerWidth;
-    const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
-    if (
-      signerData &&
-      signerData.length === 1 &&
-      signerData[0].pos.length === 1
-    ) {
-      const height = xyPosData.Height ? xyPosData.Height : 60;
-
-      const xPos = (pos) => {
-        //checking both condition mobile and desktop view
-        if (isMobile) {
-          //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
-          if (pos.isMobile) {
-            const x = pos.xPosition * (pos.scale / scale);
-            return x * scale + 50;
-          } else {
-            const x = pos.xPosition / scale;
-            return x * scale;
-          }
-        } 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 x = pos.xPosition * pos.scale + 50;
-            return x;
-          } else {
-            return pos.xPosition;
-          }
-        }
-      };
-
-      const yBottom = (pos) => {
-        let yPosition;
-        //checking both condition mobile and desktop view
-
-        if (isMobile) {
-          //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
-          if (pos.isMobile) {
-            const y = pos.yBottom * (pos.scale / scale);
-            yPosition = pos.isDrag
-              ? y * scale - height
-              : pos.firstYPos
-                ? y * scale - height + pos.firstYPos
-                : y * scale - height;
-            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;
-          }
-        } 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;
-          } else {
-            yPosition = pos.isDrag
-              ? pos.yBottom - height
-              : pos.firstYPos
-                ? pos.yBottom - height + pos.firstYPos
-                : pos.yBottom - height;
-            return yPosition;
-          }
-        }
-      };
-      const bottomY = yBottom(xyPosData);
-      signgleSign = {
-        pdfFile: pdfBase64Url,
-        docId: documentId,
-        userId: signerObjectId,
-        sign: {
-          Base64: base64Url,
-          Left: xPos(xyPosData),
-          Bottom: bottomY,
-          Width: xyPosData.Width ? xyPosData.Width : 150,
-          Height: height,
-          Page: pageNo
-        }
-      };
-    } else if (
-      xyPosData &&
-      xyPosData.length > 0 &&
-      xyPosData[0].pos.length > 0
-    ) {
-      signgleSign = {
-        pdfFile: base64Url,
-        docId: documentId,
-        userId: signerObjectId
-      };
-    }
-
-    await axios
-      .post(
-        `${localStorage.getItem("baseUrl")}functions/signPdf`,
-        signgleSign,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            sessionToken: localStorage.getItem("accesstoken")
-          }
-        }
-      )
-      .then((Listdata) => {
-        const json = Listdata.data;
-
-        if (json.result.data) {
-          setPdfUrl(json.result.data);
-          setIsSigned(true);
-          setSignedSigners([]);
-          setUnSignedSigners([]);
-          getDocumentDetails();
-        }
-      })
-      .catch((err) => {
-        console.log("axois err ", err);
-        alert("something went wrong");
-      });
-  };
  //function for get pdf page details
  const pageDetails = async (pdf) => {
    const load = {
@@ -870,8 +772,8 @@ function PdfRequestFiles() {
            {/* pdf render view */}
            <div
              style={{
-                marginLeft: pdfOriginalWidth > 500 && "20px",
-                marginRight: pdfOriginalWidth > 500 && "20px"
+                marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
+                marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
              }}
            >
              {/* this modal is used show this document is already sign */}
@@ -936,27 +838,30 @@ function PdfRequestFiles() {
                pdfUrl={pdfUrl}
                alreadySign={alreadySign}
              />
-
-              <RenderPdf
-                pageNumber={pageNumber}
-                pdfOriginalWidth={pdfOriginalWidth}
-                pdfNewWidth={pdfNewWidth}
-                setIsSignPad={setIsSignPad}
-                setIsStamp={setIsStamp}
-                setSignKey={setSignKey}
-                pdfDetails={pdfDetails}
-                signerPos={signerPos}
-                successEmail={false}
-                pdfUrl={pdfUrl}
-                numPages={numPages}
-                pageDetails={pageDetails}
-                pdfRequest={true}
-                signerObjectId={signerObjectId}
-                signedSigners={signedSigners}
-                setCurrentSigner={setCurrentSigner}
-                setPdfLoadFail={setPdfLoadFail}
-                pdfLoadFail={pdfLoadFail}
-              />
+              {containerWH && (
+                <RenderPdf
+                  pageNumber={pageNumber}
+                  pdfOriginalWidth={pdfOriginalWidth}
+                  pdfNewWidth={pdfNewWidth}
+                  setIsSignPad={setIsSignPad}
+                  setIsStamp={setIsStamp}
+                  setSignKey={setSignKey}
+                  pdfDetails={pdfDetails}
+                  signerPos={signerPos}
+                  successEmail={false}
+                  pdfUrl={pdfUrl}
+                  numPages={numPages}
+                  pageDetails={pageDetails}
+                  pdfRequest={true}
+                  signerObjectId={signerObjectId}
+                  signedSigners={signedSigners}
+                  setCurrentSigner={setCurrentSigner}
+                  setPdfLoadFail={setPdfLoadFail}
+                  pdfLoadFail={pdfLoadFail}
+                  setSignerPos={setSignerPos}
+                  containerWH={containerWH}
+                />
+              )}
            </div>
            <div>
              <div className="signerComponent">
@@ -75,6 +75,7 @@ function SignYourSelf() {
  const [tourStatus, setTourStatus] = useState([]);
  const [noData, setNoData] = useState(false);
  const [contractName, setContractName] = useState("");
+  const [containerWH, setContainerWH] = useState({});
  const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
    status: false
  });
@@ -91,6 +92,7 @@ function SignYourSelf() {
      isOver: !!monitor.isOver()
    })
  });
+  const isMobile = window.innerWidth < 767;

  const pdfRef = useRef();

@@ -178,6 +180,10 @@ function SignYourSelf() {
    if (divRef.current) {
      const pdfWidth = pdfNewWidthFun(divRef);
      setPdfNewWidth(pdfWidth);
+      setContainerWH({
+        width: divRef.current.offsetWidth,
+        height: divRef.current.offsetHeight
+      });
    }
  }, [divRef.current]);

@@ -470,8 +476,10 @@ function SignYourSelf() {
          pngUrl,
          pdfDoc,
          pdfOriginalWidth,
-          true
+          true,
+          containerWH
        );
+
        signPdfFun(pdfBytes, documentId);
      }
      setIsSignPad(false);
@@ -490,9 +498,7 @@ function SignYourSelf() {
    pageNo
  ) => {
    let singleSign;
-
-    const isMobile = window.innerWidth < 767;
-    const newWidth = window.innerWidth - 32;
+    const newWidth = containerWH.width;
    const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
    const imgWidth = xyPosData ? xyPosData.Width : 150;
    if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
@@ -508,9 +514,7 @@ function SignYourSelf() {
        docId: documentId,
        sign: {
          Base64: base64Url,
-          Left: isMobile
-            ? xyPosData.xPosition * scale + 43
-            : xyPosData.xPosition,
+          Left: isMobile ? xyPosData.xPosition * scale : xyPosData.xPosition,
          Bottom: bottomY,
          Width: xyPosData.Width ? xyPosData.Width * scale : 150 * scale,
          Height: height * scale,
@@ -534,14 +538,13 @@ function SignYourSelf() {
      })
      .then((Listdata) => {
        const json = Listdata.data;
-        // console.log("json ", json);
+
        setPdfUrl(json.result.data);
        if (json.result.data) {
          getDocumentDetails(false);
        }
      })
      .catch((err) => {
-        // this.setState({ loading: false });
        console.log("axois err ", err);
      });
  };
@@ -692,60 +695,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([]);
  };
@@ -903,8 +852,8 @@ function SignYourSelf() {
          {/* pdf render view */}
          <div
            style={{
-              marginLeft: pdfOriginalWidth > 500 && "20px",
-              marginRight: pdfOriginalWidth > 500 && "20px"
+              marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
+              marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
            }}
          >
            {/* this modal is used show this document is already sign */}
@@ -992,33 +941,36 @@ function SignYourSelf() {
              setIsEmail={setIsEmail}
            />

-            {/* className="hidePdf" */}
            <div data-tut="reactourSecond">
-              <RenderPdf
-                pageNumber={pageNumber}
-                pdfOriginalWidth={pdfOriginalWidth}
-                pdfNewWidth={pdfNewWidth}
-                drop={drop}
-                successEmail={successEmail}
-                nodeRef={nodeRef}
-                handleTabDrag={handleTabDrag}
-                handleStop={handleStop}
-                handleImageResize={handleImageResize}
-                isDragging={isDragging}
-                setIsSignPad={setIsSignPad}
-                setIsStamp={setIsStamp}
-                handleDeleteSign={handleDeleteSign}
-                setSignKey={setSignKey}
-                pdfDetails={pdfDetails}
-                setIsDragging={setIsDragging}
-                xyPostion={xyPostion}
-                pdfRef={pdfRef}
-                pdfUrl={pdfUrl}
-                numPages={numPages}
-                pageDetails={pageDetails}
-                setPdfLoadFail={setPdfLoadFail}
-                pdfLoadFail={pdfLoadFail}
-              />
+              {containerWH && (
+                <RenderPdf
+                  pageNumber={pageNumber}
+                  pdfOriginalWidth={pdfOriginalWidth}
+                  pdfNewWidth={pdfNewWidth}
+                  drop={drop}
+                  successEmail={successEmail}
+                  nodeRef={nodeRef}
+                  handleTabDrag={handleTabDrag}
+                  handleStop={handleStop}
+                  isDragging={isDragging}
+                  setIsSignPad={setIsSignPad}
+                  setIsStamp={setIsStamp}
+                  handleDeleteSign={handleDeleteSign}
+                  setSignKey={setSignKey}
+                  pdfDetails={pdfDetails}
+                  setIsDragging={setIsDragging}
+                  xyPostion={xyPostion}
+                  pdfRef={pdfRef}
+                  pdfUrl={pdfUrl}
+                  numPages={numPages}
+                  pageDetails={pageDetails}
+                  setPdfLoadFail={setPdfLoadFail}
+                  pdfLoadFail={pdfLoadFail}
+                  setXyPostion={setXyPostion}
+                  index={index}
+                  containerWH={containerWH}
+                />
+              )}
            </div>
          </div>

@@ -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;
@@ -57,12 +57,14 @@ function PlaceHolderSign() {
  const [noData, setNoData] = useState(false);
  const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
  const [contractName, setContractName] = useState("");
+  const [containerWH, setContainerWH] = useState();
  const { docId } = useParams();
  const signRef = useRef(null);
  const dragRef = useRef(null);
  const divRef = useRef(null);
  const [isShowEmail, setIsShowEmail] = useState(false);
  const [selectedEmail, setSelectedEmail] = useState(false);
+  const [isResize, setIsResize] = useState(false);
  const [pdfLoadFail, setPdfLoadFail] = useState({
    status: false,
    type: "load"
@@ -82,8 +84,6 @@ function PlaceHolderSign() {
    "#ffffcc"
  ];
  const isMobile = window.innerWidth < 767;
-  const newWidth = window.innerWidth;
-  const scale = pdfOriginalWidth / newWidth;
  const [{ isOver }, drop] = useDrop({
    accept: "BOX",
    drop: (item, monitor) => addPositionOfSignature(item, monitor),
@@ -170,6 +170,10 @@ function PlaceHolderSign() {
    if (divRef.current) {
      const pdfWidth = pdfNewWidthFun(divRef);
      setPdfNewWidth(pdfWidth);
+      setContainerWH({
+        width: divRef.current.offsetWidth,
+        height: divRef.current.offsetHeight
+      });
    }
  }, [divRef.current]);
  //function for get document details
@@ -254,6 +258,8 @@ function PlaceHolderSign() {
  };

  const getSignerPos = (item, monitor) => {
+    const newWidth = containerWH.width;
+    const scale = pdfOriginalWidth / newWidth;
    const key = Math.floor(1000 + Math.random() * 9000);
    let filterSignerPos = signerPos.filter(
      (data) => data.signerObjId === signerObjId
@@ -397,56 +403,58 @@ function PlaceHolderSign() {

  //function for set and update x and y postion after drag and drop signature tab
  const handleStop = (event, dragElement, signerId, key) => {
-    const containerRect = document
-      .getElementById("container")
-      .getBoundingClientRect();
-    const signId = signerId ? signerId : signerObjId;
-    const keyValue = key ? key : dragKey;
-    const ybottom = containerRect.height - dragElement.y;
+    if (!isResize) {
+      const containerRect = document
+        .getElementById("container")
+        .getBoundingClientRect();
+      const signId = signerId ? signerId : signerObjId;
+      const keyValue = key ? key : dragKey;
+      const ybottom = containerRect.height - dragElement.y;

-    if (keyValue >= 0) {
-      const filterSignerPos = signerPos.filter(
-        (data) => data.signerObjId === signId
-      );
-
-      if (filterSignerPos.length > 0) {
-        const getPlaceHolder = filterSignerPos[0].placeHolder;
-
-        const getPageNumer = getPlaceHolder.filter(
-          (data) => data.pageNumber === pageNumber
+      if (keyValue >= 0) {
+        const filterSignerPos = signerPos.filter(
+          (data) => data.signerObjId === signId
        );

-        if (getPageNumer.length > 0) {
-          const getXYdata = getPageNumer[0].pos;
+        if (filterSignerPos.length > 0) {
+          const getPlaceHolder = filterSignerPos[0].placeHolder;

-          const getPosData = getXYdata;
-          const addSignPos = getPosData.map((url, ind) => {
-            if (url.key === keyValue) {
-              return {
-                ...url,
-                xPosition: dragElement.x,
-                yPosition: dragElement.y,
-                isDrag: true,
-                yBottom: ybottom
-              };
-            }
-            return url;
-          });
+          const getPageNumer = getPlaceHolder.filter(
+            (data) => data.pageNumber === pageNumber
+          );

-          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 === signId) {
-              return { ...obj, placeHolder: newUpdateSignPos };
-            }
-            return obj;
-          });
+          if (getPageNumer.length > 0) {
+            const getXYdata = getPageNumer[0].pos;

-          setSignerPos(newUpdateSigner);
+            const getPosData = getXYdata;
+            const addSignPos = getPosData.map((url, ind) => {
+              if (url.key === keyValue) {
+                return {
+                  ...url,
+                  xPosition: dragElement.x,
+                  yPosition: dragElement.y,
+                  isDrag: true,
+                  yBottom: ybottom
+                };
+              }
+              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 === signId) {
+                return { ...obj, placeHolder: newUpdateSignPos };
+              }
+              return obj;
+            });
+
+            setSignerPos(newUpdateSigner);
+          }
        }
      }
    }
@@ -518,86 +526,6 @@ function PlaceHolderSign() {
    }
  };

-  //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 change page
  function changePage(offset) {
    setSignBtnPosition([]);
@@ -860,8 +788,8 @@ function PlaceHolderSign() {
          {/* pdf render view */}
          <div
            style={{
-              marginLeft: pdfOriginalWidth > 500 && "20px",
-              marginRight: pdfOriginalWidth > 500 && "20px"
+              marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
+              marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
            }}
          >
            {/* this modal is used show alert set placeholder for all signers before send mail */}
@@ -1009,24 +937,28 @@ function PlaceHolderSign() {
              dataTut4="reactourFour"
            />
            <div data-tut="reactourThird">
-              <RenderPdf
-                pageNumber={pageNumber}
-                pdfOriginalWidth={pdfOriginalWidth}
-                pdfNewWidth={pdfNewWidth}
-                pdfDetails={pdfDetails}
-                signerPos={signerPos}
-                successEmail={false}
-                numPages={numPages}
-                pageDetails={pageDetails}
-                placeholder={true}
-                drop={drop}
-                handleDeleteSign={handleDeleteSign}
-                handleTabDrag={handleTabDrag}
-                handleStop={handleStop}
-                handleImageResize={handleImageResize}
-                setPdfLoadFail={setPdfLoadFail}
-                pdfLoadFail={pdfLoadFail}
-              />
+              {containerWH && (
+                <RenderPdf
+                  pageNumber={pageNumber}
+                  pdfOriginalWidth={pdfOriginalWidth}
+                  pdfNewWidth={pdfNewWidth}
+                  pdfDetails={pdfDetails}
+                  signerPos={signerPos}
+                  successEmail={false}
+                  numPages={numPages}
+                  pageDetails={pageDetails}
+                  placeholder={true}
+                  drop={drop}
+                  handleDeleteSign={handleDeleteSign}
+                  handleTabDrag={handleTabDrag}
+                  handleStop={handleStop}
+                  setPdfLoadFail={setPdfLoadFail}
+                  pdfLoadFail={pdfLoadFail}
+                  setSignerPos={setSignerPos}
+                  containerWH={containerWH}
+                  setIsResize={setIsResize}
+                />
+              )}
            </div>
          </div>

@@ -21,7 +21,8 @@ import {
  contractDocument,
  urlValidator,
  multiSignEmbed,
-  embedDocId
+  embedDocId,
+  signPdfFun
 } from "../utils/Utils";
 import Tour from "reactour";
 import Signedby from "./component/signedby";
@@ -448,8 +449,28 @@ function EmbedPdfImage() {
                  ""
                );

-                //function for call to embed signature in pdf and get digital signature pdf
-                signPdfFun(newImgUrl, docId, data, pdfBase64, pageNo);
+                //function for embed signature in pdf and get digital signature pdf
+                signPdfFun(
+                  newImgUrl,
+                  docId,
+                  signerUserId,
+                  pdfOriginalWidth,
+                  xyPostion,
+                  data,
+                  pdfBase64,
+                  pageNo,
+                  containerWH
+                )
+                  .then((res) => {
+                    if (res && res.status === "success") {
+                      getDocumentDetails();
+                    } else {
+                      alert("something went wrong");
+                    }
+                  })
+                  .catch((err) => {
+                    alert("something went wrong!");
+                  });
              })
              .catch((error) => {
                console.error("Error:", error);
@@ -466,138 +487,35 @@ function EmbedPdfImage() {
          pngUrl,
          pdfDoc,
          pdfOriginalWidth,
-          false
+          false,
+          containerWH
        );
-        signPdfFun(pdfBytes, docId);
+
+        //function for embed signature in pdf and get digital signature pdf
+        signPdfFun(
+          pdfBytes,
+          docId,
+          signerUserId,
+          pdfOriginalWidth,
+          xyPostion,
+          containerWH
+        )
+          .then((res) => {
+            if (res && res.status === "success") {
+              getDocumentDetails();
+            } else {
+              alert("something went wrong!");
+            }
+          })
+          .catch((err) => {
+            alert("something went wrong in query");
+          });
      }
      setIsSignPad(false);
      setXyPostion([]);
    }
  }

-  //function for call cloud function signPdf and generate digital signature
-  const signPdfFun = async (
-    base64Url,
-    docId,
-    xyPosData,
-    pdfBase64Url,
-    pageNo
-  ) => {
-    let singleSign;
-    const isMobile = window.innerWidth < 767;
-    const newWidth = window.innerWidth;
-    const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
-    const height = xyPosData ? xyPosData.Height : 60;
-    const xPos = (pos) => {
-      //checking both condition mobile and desktop view
-      if (isMobile) {
-        //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
-        if (pos.isMobile) {
-          const x = pos.xPosition * (pos.scale / scale);
-          return x * scale + 50;
-        } else {
-          const x = pos.xPosition / scale;
-          return x * scale;
-        }
-      } 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 x = pos.xPosition * pos.scale + 50;
-          return x;
-        } else {
-          return pos.xPosition;
-        }
-      }
-    };
-
-    const yBottom = (pos) => {
-      let yPosition;
-      //checking both condition mobile and desktop view
-
-      if (isMobile) {
-        //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
-        if (pos.isMobile) {
-          const y = pos.yPosition * (pos.scale / scale);
-          yPosition = pos.isDrag
-            ? y * scale - height
-            : pos.firstYPos
-              ? y * scale - height + pos.firstYPos
-              : y * scale - height;
-          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;
-        }
-      } 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;
-        } else {
-          yPosition = pos.isDrag
-            ? pos.yBottom - height
-            : pos.firstYPos
-              ? pos.yBottom - height + pos.firstYPos
-              : pos.yBottom - height;
-          return yPosition;
-        }
-      }
-    };
-    if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
-      const bottomY = yBottom(xyPosData);
-      singleSign = {
-        pdfFile: pdfBase64Url,
-        docId: docId,
-        userId: signerUserId,
-        sign: {
-          Base64: base64Url,
-          Left: xPos(xyPosData),
-          Bottom: bottomY,
-          Width: xyPosData.Width ? xyPosData.Width : 150,
-          Height: height,
-          Page: pageNo
-        }
-      };
-    } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
-      singleSign = {
-        pdfFile: base64Url,
-        docId: docId,
-        userId: signerUserId
-      };
-    }
-
-    await axios
-      .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
-        headers: {
-          "Content-Type": "application/json",
-          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          sessionToken: localStorage.getItem("accesstoken")
-        }
-      })
-      .then((Listdata) => {
-        const json = Listdata.data;
-
-        if (json.result.data) {
-          getDocumentDetails();
-        }
-      })
-      .catch((err) => {
-        alert("something went wrong");
-      });
-  };
-
  //function for change page
  function changePage(offset) {
    setPageNumber((prevPageNumber) => prevPageNumber + offset);
@@ -870,9 +788,10 @@ function EmbedPdfImage() {
          {/* pdf render view */}
          <div
            style={{
-              marginLeft: !isGuestSigner && pdfOriginalWidth > 500 && "20px",
-              marginRight: !isGuestSigner && pdfOriginalWidth > 500 && "20px"
+              marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
+              marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
            }}
+            ref={divRef}
          >
            {/* this modal is used show this document is already sign */}
            <Modal
@@ -948,25 +867,29 @@ function EmbedPdfImage() {
              decline={true}
              alreadySign={pdfUrl ? true : false}
            />
-
-            <RenderPdf
-              pageNumber={pageNumber}
-              pdfOriginalWidth={pdfOriginalWidth}
-              pdfNewWidth={pdfNewWidth}
-              setIsSignPad={setIsSignPad}
-              setIsStamp={setIsStamp}
-              setSignKey={setSignKey}
-              pdfDetails={signedPdfData}
-              xyPostion={xyPostion}
-              successEmail={false}
-              pdfUrl={pdfUrl}
-              numPages={numPages}
-              pageDetails={pageDetails}
-              recipient={true}
-              isAlreadySign={isAlreadySign}
-              setPdfLoadFail={setPdfLoadFail}
-              pdfLoadFail={pdfLoadFail}
-            />
+            {containerWH && (
+              <RenderPdf
+                pageNumber={pageNumber}
+                pdfOriginalWidth={pdfOriginalWidth}
+                pdfNewWidth={pdfNewWidth}
+                setIsSignPad={setIsSignPad}
+                setIsStamp={setIsStamp}
+                setSignKey={setSignKey}
+                pdfDetails={signedPdfData}
+                xyPostion={xyPostion}
+                successEmail={false}
+                pdfUrl={pdfUrl}
+                numPages={numPages}
+                pageDetails={pageDetails}
+                recipient={true}
+                isAlreadySign={isAlreadySign}
+                setPdfLoadFail={setPdfLoadFail}
+                pdfLoadFail={pdfLoadFail}
+                setXyPostion={setXyPostion}
+                index={index}
+                containerWH={containerWH}
+              />
+            )}
          </div>

          {!pdfUrl ? (
@@ -8,6 +8,13 @@
 .penContainer {
  width: 460px;
 }
+.borderResize {
+  position: absolute;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+
+}
 .mailBtn{
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
    padding: 3px 15px !important;
@@ -26,6 +33,8 @@
  margin: 2px;
  border-radius: 2px;
 }
+
+ 
 .signatureBtn {
  border: 1.5px solid #47a3ad;
  margin-bottom: 10px;
@@ -131,6 +140,48 @@
  outline: none;
 }

+.resizable-box-overlay {
+  position: absolute;
+  border: 2px solid #ddd;
+  overflow: hidden;
+  background-color: white;
+}
+
+.box-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.close-button {
+  align-self: flex-end;
+  margin: 8px;
+  cursor: pointer;
+}
+
+.placeholdCloseBtn {
+  position: absolute;
+  right: -9px;
+  top: -15px;
+  border-radius: 100%;
+  font-size: 10px;
+  cursor: pointer;
+  padding: 0px 5px;
+}
+.placeholderBlock{
+  padding: 0px;
+  z-index: 1;
+  position: absolute;
+  border-style: dashed;
+  width: 150px;
+  height: 60px;
+  background: #daebe0;
+  text-align: center;
+  justify-content: center;
+  border-width: 0.2px
+}
+
 .finishBtn {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
  padding: 3px 30px;
@@ -801,10 +852,13 @@ option {

 .signature-backdrop {
  position: fixed;
-  top: 0; bottom: 0; left: 0; right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
  background-color: #000;
 }

 .signature-backdrop.fade.in {
  opacity: 0.5;
-}
+}
@@ -348,7 +348,8 @@ export const multiSignEmbed = async (
  pngUrl,
  pdfDoc,
  pdfOriginalWidth,
-  signyourself
+  signyourself,
+  containerWH
 ) => {
  for (let i = 0; i < pngUrl.length; i++) {
    const pageNo = pngUrl[i].pageNumber;
@@ -385,12 +386,12 @@ export const multiSignEmbed = async (
      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 = window.innerWidth - 32;
+      const newWidth = containerWH.width;
      const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
      const xPos = (pos) => {
        if (signyourself) {
          if (isMobile) {
-            return imgUrlList[id].xPosition * scale + 43;
+            return imgUrlList[id].xPosition * scale;
          } else {
            return imgUrlList[id].xPosition;
          }
@@ -400,7 +401,7 @@ export const multiSignEmbed = async (
            //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
            if (pos.isMobile) {
              const x = pos.xPosition * (pos.scale / scale);
-              return x * scale + 50;
+              return x * scale;
            } else {
              const x = pos.xPosition / scale;
              return x * scale;
@@ -408,7 +409,7 @@ export const multiSignEmbed = async (
          } 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 x = pos.xPosition * pos.scale + 50;
+              const x = pos.xPosition * pos.scale;
              return x;
            } else {
              return pos.xPosition;
@@ -435,9 +436,9 @@ export const multiSignEmbed = async (
            //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
            if (pos.isMobile) {
              const y = pos.yPosition * (pos.scale / scale);
-              return page.getHeight() - y * scale - imgHeight;
+              return page.getHeight() - y * scale - imgHeight * scale;
            } else {
-              return page.getHeight() - y * scale - imgHeight;
+              return page.getHeight() - y * scale - imgHeight * scale;
            }
          } else {
            //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
@@ -454,8 +455,8 @@ export const multiSignEmbed = async (
      page.drawImage(img, {
        x: xPos(imgUrlList[id]),
        y: yPos(imgUrlList[id]),
-        width: signyourself ? imgWidth * scale : imgWidth,
-        height: signyourself ? imgHeight * scale : imgHeight
+        width: imgWidth * scale,
+        height: imgHeight * scale
      });
    });
  }
@@ -486,3 +487,308 @@ export const pdfNewWidthFun = (divRef) => {
  //160 is width of left side, 200 is width of right side component
  return pdfWidth;
 };
+
+//function for resize image and update width and height for mulitisigners
+export const handleImageResize = (
+  ref,
+  key,
+  signerId,
+  position,
+  signerPos,
+  pageNumber,
+  setSignerPos,
+  pdfOriginalWidth,
+  containerWH,
+  setIsResize
+) => {
+  const filterSignerPos = signerPos.filter(
+    (data) => data.signerObjId === signerId
+  );
+  const isMobile = window.innerWidth < 767;
+  const newWidth = containerWH;
+  const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
+  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: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
+              Height: !url.isMobile
+                ? ref.offsetHeight * scale
+                : 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: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
+              Height: !url.isMobile
+                ? ref.offsetHeight * scale
+                : 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);
+      }
+    }
+  }
+  setIsResize && setIsResize(false);
+};
+
+//function for resize image and update width and height for sign-yourself
+export const handleSignYourselfImageResize = (
+  ref,
+  key,
+  direction,
+  position,
+  xyPostion,
+  index,
+  setXyPostion,
+  pdfOriginalWidth,
+  containerWH
+) => {
+  const updateFilter = xyPostion[index].pos.filter(
+    (data) => data.key === key && data.Width && data.Height
+  );
+  const isMobile = window.innerWidth < 767;
+  const newWidth = containerWH;
+  const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
+
+  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: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
+          // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight,
+          Width: ref.offsetWidth,
+          Height: ref.offsetHeight
+          //  xPosition: position.xpos
+        };
+      }
+      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: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
+          // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight
+          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);
+  }
+};
+
+//function for call cloud function signPdf and generate digital signature
+export const signPdfFun = async (
+  base64Url,
+  documentId,
+  signerObjectId,
+  pdfOriginalWidth,
+  signerData,
+  xyPosData,
+  pdfBase64Url,
+  pageNo,
+  containerWH
+) => {
+  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;
+
+    const xPos = (pos) => {
+      //checking both condition mobile and desktop view
+      if (isMobile) {
+        //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+        if (pos.isMobile) {
+          const x = pos.xPosition * (pos.scale / scale);
+          return x * scale;
+        } else {
+          const x = pos.xPosition / scale;
+          return x * scale;
+        }
+      } 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 x = pos.xPosition * pos.scale;
+          return x;
+        } else {
+          return pos.xPosition;
+        }
+      }
+    };
+    const yBottom = (pos) => {
+      let yPosition;
+      //checking both condition mobile and desktop view
+
+      if (isMobile) {
+        //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+        if (pos.isMobile) {
+          const y = pos.yBottom * (pos.scale / scale);
+          yPosition = pos.isDrag
+            ? y * scale - height * scale
+            : pos.firstYPos
+              ? y * scale - height * scale + pos.firstYPos
+              : y * scale - height * scale;
+          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;
+        }
+      } 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;
+        } else {
+          yPosition = pos.isDrag
+            ? pos.yBottom - height
+            : pos.firstYPos
+              ? pos.yBottom - height + pos.firstYPos
+              : pos.yBottom - height;
+          return yPosition;
+        }
+      }
+    };
+    const imgWidth = xyPosData.Width ? xyPosData.Width * scale : 150 * scale;
+    const imgHeight = height * scale;
+    const bottomY = yBottom(xyPosData);
+    signgleSign = {
+      pdfFile: pdfBase64Url,
+      docId: documentId,
+      userId: signerObjectId,
+      sign: {
+        Base64: base64Url,
+        Left: xPos(xyPosData),
+        Bottom: bottomY,
+        Width: imgWidth,
+        Height: imgHeight,
+        Page: pageNo
+      }
+    };
+  } else if (
+    signerData &&
+    signerData.length > 0 &&
+    signerData[0].pos.length > 0
+  ) {
+    signgleSign = {
+      pdfFile: base64Url,
+      docId: documentId,
+      userId: signerObjectId
+    };
+  }
+
+  const response = await axios
+    .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, signgleSign, {
+      headers: {
+        "Content-Type": "application/json",
+        "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+        sessionToken: localStorage.getItem("accesstoken")
+      }
+    })
+    .then((Listdata) => {
+      const json = Listdata.data;
+      const res = json.result;
+      // console.log("res", res);
+      return res;
+    })
+    .catch((err) => {
+      console.log("axois err ", err);
+      alert("something went wrong");
+    });
+
+  return response;
+};