fix: widgets shift slightly in right side after being dropped in the template view.

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>

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>

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

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

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