From 49461a43bb9918c164bbaee0f8d9542de46d9ba0 Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Wed, 4 Sep 2024 19:39:10 +0530
Subject: [PATCH] fix: drop widgets in center of document in mobile view

---
 apps/OpenSign/src/components/pdf/RenderPdf.js |  3 ++-
 apps/OpenSign/src/pages/PlaceHolderSign.js    | 10 ++++------
 apps/OpenSign/src/pages/SignyourselfPdf.js    | 20 +++++++++----------
 .../OpenSign/src/pages/TemplatePlaceholder.js | 10 ++++------
 4 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js
index ef8576862..f0a967c2d 100644
--- a/apps/OpenSign/src/components/pdf/RenderPdf.js
+++ b/apps/OpenSign/src/components/pdf/RenderPdf.js
@@ -364,7 +364,8 @@ function RenderPdf({
                         </React.Fragment>
                       );
                     })
-                  : xyPostion.map((data, ind) => {
+                  : !pdfDetails?.[0]?.IsCompleted &&
+                    xyPostion.map((data, ind) => {
                       return (
                         <React.Fragment key={ind}>
                           {data.pageNumber === pageNumber &&
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 3072cf467..617bcc64f 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -479,14 +479,12 @@ function PlaceHolderSign() {
       const widgetHeight = defaultWidthHeight(dragTypeValue).height;
       //adding and updating drop position in array when user drop signature button in div
       if (item === "onclick") {
+        const divHeight = divRef.current.getBoundingClientRect().height;
+        // `getBoundingClientRect()` is used to get accurate measurement height of the div
         const dropObj = {
           //onclick put placeholder center on pdf
-          xPosition:
-            (containerWH.width / 2 - widgetWidth / 2) /
-            (containerScale * scale),
-          yPosition:
-            (containerWH.height / 2 - widgetHeight / 2) /
-            (containerScale * scale),
+          xPosition: widgetWidth / 4 + containerWH.width / 2,
+          yPosition: widgetHeight + divHeight / 2,
           isStamp:
             (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
           key: key,
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index da31e5214..94ca515c9 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -415,28 +415,28 @@ function SignYourSelf() {
       pageNumber,
       containerWH
     );
+    console.log("container", widgetTypeExist, dragTypeValue, widgetValue);
     //adding and updating drop position in array when user drop signature button in div
     if (item === "onclick") {
+      // `getBoundingClientRect()` is used to get accurate measurement height of the div
+      const divHeight = divRef.current.getBoundingClientRect().height;
       const getWidth = widgetTypeExist
         ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth
-        : dragTypeValue === "initials"
-          ? defaultWidthHeight(dragTypeValue).width
-          : "";
+        : defaultWidthHeight(dragTypeValue).width;
       const getHeight = widgetTypeExist
         ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight
-        : dragTypeValue === "initials"
-          ? defaultWidthHeight(dragTypeValue).height
-          : "";
+        : defaultWidthHeight(dragTypeValue).height;
+
       dropObj = {
-        xPosition: containerWH.width / 2,
-        yPosition: containerWH.height / 2,
+        xPosition: getWidth / 2 + containerWH.width / 2,
+        yPosition: getHeight + divHeight / 2,
         isStamp:
           (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
         key: key,
         type: dragTypeValue,
         scale: containerScale,
-        Width: getWidth / (containerScale * scale),
-        Height: getHeight / (containerScale * scale),
+        Width: getWidth,
+        Height: getHeight,
         options: addWidgetOptions(dragTypeValue)
       };
       dropData.push(dropObj);
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index bdff205f6..96cacac81 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -384,14 +384,12 @@ const TemplatePlaceholder = () => {
           currentPagePosition;
         let placeHolder;
         if (item === "onclick") {
+          // `getBoundingClientRect()` is used to get accurate measurement height of the div
+          const divHeight = divRef.current.getBoundingClientRect().height;
           const dropObj = {
             //onclick put placeholder center on pdf
-            xPosition:
-              (containerWH.width / 2 - widgetWidth / 2) /
-              (containerScale * scale),
-            yPosition:
-              (containerWH.height / 2 - widgetHeight / 2) /
-              (containerScale * scale),
+            xPosition: widgetWidth / 4 + containerWH.width / 2,
+            yPosition: widgetHeight + divHeight / 2,
             isStamp:
               (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
             key: key,