From eb0941f0872e078fa1ba05a3e41e4719c0639ff9 Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Wed, 19 Jun 2024 14:24:08 +0530
Subject: [PATCH] fix: widgets shift slightly in right side after being dropped
 in the template view.

---
 .../OpenSign/src/components/pdf/WidgetList.js |  1 +
 apps/OpenSign/src/constant/Utils.js           |  6 ++--
 apps/OpenSign/src/pages/PlaceHolderSign.js    | 32 +++++++++++++------
 apps/OpenSign/src/pages/SignyourselfPdf.js    | 31 ++++++++++++------
 .../OpenSign/src/pages/TemplatePlaceholder.js | 32 +++++++++++++------
 5 files changed, 71 insertions(+), 31 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/WidgetList.js b/apps/OpenSign/src/components/pdf/WidgetList.js
index 29dccb1de..e4100a9d7 100644
--- a/apps/OpenSign/src/components/pdf/WidgetList.js
+++ b/apps/OpenSign/src/components/pdf/WidgetList.js
@@ -27,6 +27,7 @@ function WidgetList(props) {
           onMouseDown={() => {
             props?.handleMouseLeave();
           }}
+          onTouchStart={props?.handleDivClick}
         >
           {item.ref && getWidgetType(item, isHeader)}
         </div>
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index c72e6e8f7..fff999dc5 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -382,14 +382,16 @@ export const getWidgetType = (item, isHeader) => {
           {!isMobile && <i className="fa-sharp fa-solid fa-grip-vertical"></i>}
           <span
             className={`${
-              isHeader && "md:hidden lg:inline-block"
+              isHeader && "md:text-[8px]  lg:text-[15px]"
             } md:inline-block text-center text-[15px] ml-[5px] font-semibold`}
           >
             {item.type}
           </span>
         </div>
         <div
-          className={` text-[20px] op-btn op-btn-primary rounded-none w-[40px] h-full flex justify-center items-center`}
+          className={`${
+            isHeader && "md:text-[8px] md:w-[20px] lg:text-[20px] lg:w-[40px] "
+          } text-[20px] op-btn op-btn-primary rounded-none w-[40px] h-full flex justify-center items-center`}
         >
           <i className={item.icon}></i>
         </div>
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 6d849bc34..49f4ba31c 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -815,18 +815,30 @@ function PlaceHolderSign() {
     setPageNumber((prevPageNumber) => prevPageNumber + offset);
   }
 
-  //function for capture position on hover signature button
+  //function for capture position on hover or touch widgets
   const handleDivClick = (e) => {
+    const isTouchEvent = e.type.startsWith("touch");
     const divRect = e.currentTarget.getBoundingClientRect();
-    const mouseX = e.clientX - divRect.left;
-    const mouseY = e.clientY - divRect.top;
-
-    const xyPosition = {
-      xPos: mouseX,
-      yPos: mouseY
-    };
-
-    setXYSignature(xyPosition);
+    let mouseX, mouseY;
+    if (isTouchEvent) {
+      const touch = e.touches[0]; // Get the first touch point
+      mouseX = touch.clientX - divRect.left;
+      mouseY = touch.clientY - divRect.top;
+      setSignBtnPosition([
+        {
+          xPos: mouseX,
+          yPos: mouseY
+        }
+      ]);
+    } else {
+      mouseX = e.clientX - divRect.left;
+      mouseY = e.clientY - divRect.top;
+      const xyPosition = {
+        xPos: mouseX,
+        yPos: mouseY
+      };
+      setXYSignature(xyPosition);
+    }
   };
 
   //function for capture position of x and y on hover signature button last position
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index b896370a5..d967d8a8f 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -918,17 +918,30 @@ function SignYourSelf() {
 
     setXyPostion(getUpdatePosition);
   };
-  //function for capture position on hover signature button
+  //function for capture position on hover or touch widgets button
   const handleDivClick = (e) => {
+    const isTouchEvent = e.type.startsWith("touch");
     const divRect = e.currentTarget.getBoundingClientRect();
-    const mouseX = e.clientX - divRect.left;
-    const mouseY = e.clientY - divRect.top;
-    const xyPosition = {
-      xPos: mouseX,
-      yPos: mouseY
-    };
-
-    setXYSignature(xyPosition);
+    let mouseX, mouseY;
+    if (isTouchEvent) {
+      const touch = e.touches[0]; // Get the first touch point
+      mouseX = touch.clientX - divRect.left;
+      mouseY = touch.clientY - divRect.top;
+      setSignBtnPosition([
+        {
+          xPos: mouseX,
+          yPos: mouseY
+        }
+      ]);
+    } else {
+      mouseX = e.clientX - divRect.left;
+      mouseY = e.clientY - divRect.top;
+      const xyPosition = {
+        xPos: mouseX,
+        yPos: mouseY
+      };
+      setXYSignature(xyPosition);
+    }
   };
 
   //function for capture position of x and y on hover signature button last position
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index b1baf13a1..58af80a6f 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -683,18 +683,30 @@ const TemplatePlaceholder = () => {
     setPageNumber((prevPageNumber) => prevPageNumber + offset);
   }
 
-  //function for capture position on hover signature button
+  //function for capture position on hover or touch widgets
   const handleDivClick = (e) => {
+    const isTouchEvent = e.type.startsWith("touch");
     const divRect = e.currentTarget.getBoundingClientRect();
-    const mouseX = e.clientX - divRect.left;
-    const mouseY = e.clientY - divRect.top;
-
-    const xyPosition = {
-      xPos: mouseX,
-      yPos: mouseY
-    };
-
-    setXYSignature(xyPosition);
+    let mouseX, mouseY;
+    if (isTouchEvent) {
+      const touch = e.touches[0]; // Get the first touch point
+      mouseX = touch.clientX - divRect.left;
+      mouseY = touch.clientY - divRect.top;
+      setSignBtnPosition([
+        {
+          xPos: mouseX,
+          yPos: mouseY
+        }
+      ]);
+    } else {
+      mouseX = e.clientX - divRect.left;
+      mouseY = e.clientY - divRect.top;
+      const xyPosition = {
+        xPos: mouseX,
+        yPos: mouseY
+      };
+      setXYSignature(xyPosition);
+    }
   };
 
   //function for capture position of x and y on hover signature button last position