fix: drop widgets in center of document in mobile view

Author: raktima-opensignlabs

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 &&

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,

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);

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,