Merge pull request #1162 from OpenSignLabs/raktima-patch-2

fix: drop widgets in center of document in mobile view

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/index.css

@@ -12,23 +12,35 @@ body {
 }
 
 .hide-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+@media screen and (max-width: 766px) {
+  .bBofGr {
+    width: 14px !important;
+  }
 }
 
 /* below css class replace bootstrap background color with daisy */
 .op-bg-primary {
   @apply bg-primary;
 }
+
 .op-bg-secondary {
   @apply bg-secondary;
 }
+
 .op-bg-info {
   @apply bg-info;
 }
+
 .op-bg-success {
   @apply bg-success;
 }
+
 .op-bg-warning {
   @apply bg-warning;
 }
@@ -37,28 +49,37 @@ body {
 .op-text-primary {
   @apply text-primary;
 }
+
 .op-text-secondary {
   @apply text-secondary;
 }
+
 .op-text-info {
   @apply text-info;
 }
+
 .op-text-accent {
   @apply text-accent;
 }
+
 .op-text-success {
   @apply text-success;
 }
+
 .op-text-warning {
   @apply text-warning;
 }
+
 .op-border-primary {
   @apply border-primary;
 }
+
 /* CSS for scrollbar customization */
 * {
-  scrollbar-width: thin; /* For Firefox */
-  scrollbar-color: gray; /* For Firefox */
+  scrollbar-width: thin;
+  /* For Firefox */
+  scrollbar-color: gray;
+  /* For Firefox */
 }
 
 /* For webkit-based browsers like Chrome, Safari */
@@ -73,4 +94,4 @@ body {
 *::-webkit-scrollbar-thumb {
   background-color: gray;
   border-radius: 10px;
-}
+}

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

@@ -417,26 +417,25 @@ function SignYourSelf() {
     );
     //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,