From 7584667643dc4187b1986a55d33dc8c449420379 Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Thu, 14 Mar 2024 18:35:40 +0530
Subject: [PATCH 1/2] fix: when click on label in radio or checkbox widget it's
 border not visible

---
 .../src/components/pdf/Placeholder.js         | 45 +++++++++----------
 .../src/components/pdf/PlaceholderType.js     | 23 +++++-----
 2 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
index 81a645067..d7c8f7d36 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -168,8 +168,8 @@ function Placeholder(props) {
     };
   }, [isShowDateFormat]);
 
-  //onclick placeholder function to open signature pad
-  const handlePlaceholderClick = () => {
+  //`handleWidgetIdandPopup` is used to set current widget id and open relative popup
+  const handleWidgetIdandPopup = () => {
     if (props.setSelectWidgetId) {
       props.setSelectWidgetId(props.pos.key);
     }
@@ -238,9 +238,18 @@ function Placeholder(props) {
       }
     }
   };
-
-  //function to set state value of onclick on widget's setting icon
-  const handleWidgetsOnclick = () => {
+  const handleOnClickPlaceholder = () => {
+    if (!props.isNeedSign) {
+      props.setWidgetType(props.pos.type);
+    }
+    if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) {
+      handleWidgetIdandPopup();
+    } else if (props.isPlaceholder || props.isSignYourself) {
+      handleWidgetIdandPopup();
+    }
+  };
+  //`handleOnClickSettingIcon` is used set current widget details and open setting of it
+  const handleOnClickSettingIcon = () => {
     if (props.pos.type === radioButtonWidget) {
       props.setIsRadio(true);
     } else if (props.pos.type === "dropdown") {
@@ -312,11 +321,11 @@ function Placeholder(props) {
                 <i
                   onClick={(e) => {
                     e.stopPropagation();
-                    handleWidgetsOnclick();
+                    handleOnClickSettingIcon();
                   }}
                   onTouchEnd={(e) => {
                     e.stopPropagation();
-                    handleWidgetsOnclick();
+                    handleOnClickSettingIcon();
                   }}
                   className="fa-solid fa-gear settingIcon"
                   style={{
@@ -335,11 +344,11 @@ function Placeholder(props) {
                   <i
                     onClick={(e) => {
                       e.stopPropagation();
-                      handleWidgetsOnclick();
+                      handleOnClickSettingIcon();
                     }}
                     onTouchEnd={(e) => {
                       e.stopPropagation();
-                      handleWidgetsOnclick();
+                      handleOnClickSettingIcon();
                     }}
                     className="fa-solid fa-gear settingIcon"
                     style={{
@@ -622,14 +631,7 @@ function Placeholder(props) {
             false
           );
       }}
-      onClick={() => {
-        !props.isNeedSign && props.setWidgetType(props.pos.type);
-        props.isNeedSign && props.data?.signerObjId === props.signerObjId
-          ? handlePlaceholderClick()
-          : props.isPlaceholder
-            ? handlePlaceholderClick()
-            : props.isSignYourself && handlePlaceholderClick();
-      }}
+      onClick={() => handleOnClickPlaceholder()}
     >
       {props.isShowBorder &&
       props.pos.type !== radioButtonWidget &&
@@ -679,14 +681,7 @@ function Placeholder(props) {
             // height: props.posHeight(props.pos, props.isSignYourself),
             zIndex: "10"
           }}
-          onTouchEnd={() => {
-            !props.isNeedSign && props.setWidgetType(props.pos.type);
-            props.isNeedSign && props.data?.signerObjId === props.signerObjId
-              ? handlePlaceholderClick()
-              : props.isPlaceholder
-                ? handlePlaceholderClick()
-                : props.isSignYourself && handlePlaceholderClick();
-          }}
+          onTouchEnd={() => handleOnClickPlaceholder()}
         >
           {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
 
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js
index 71614bd8b..8f5b78ce8 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js
@@ -332,15 +332,14 @@ function PlaceholderType(props) {
         <div style={{ zIndex: props.isSignYourself && "99" }}>
           {props.pos.options?.values?.map((data, ind) => {
             return (
-              <div key={ind} className="flex items-center gap-1 min-w-max">
+              <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
                   id={data}
                   style={{
                     width: props.pos.Width,
                     display: "flex",
                     justifyContent: "center",
-                    marginBottom: "6px",
-                    marginTop: "5px"
+                    marginTop: ind === 0 ? 0 : "5px"
                   }}
                   onBlur={handleInputBlur}
                   disabled={
@@ -375,7 +374,10 @@ function PlaceholderType(props) {
                   }}
                 />
                 {!props.pos.options?.isHideLabel && (
-                  <label htmlFor={data} className="text-xs">
+                  <label
+                    htmlFor={!props.isPlaceholder && data}
+                    className="text-xs mb-0 text-center"
+                  >
                     {data}
                   </label>
                 )}
@@ -710,18 +712,14 @@ function PlaceholderType(props) {
         <div>
           {props.pos.options?.values.map((data, ind) => {
             return (
-              <div
-                key={ind}
-                className="flex flex-row items-center gap-1 min-w-max"
-              >
+              <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
                   id={data}
                   style={{
                     width: props.pos.Width,
                     display: "flex",
                     justifyContent: "center",
-                    marginBottom: "6px",
-                    marginTop: "5px"
+                    marginTop: ind === 0 ? 0 : "5px"
                   }}
                   type="radio"
                   disabled={
@@ -737,7 +735,10 @@ function PlaceholderType(props) {
                   }}
                 />
                 {!props.pos.options?.isHideLabel && (
-                  <label htmlFor={data} className="text-xs">
+                  <label
+                    htmlFor={!props.isPlaceholder && data}
+                    className="text-xs mb-0"
+                  >
                     {data}
                   </label>
                 )}

From 17660dae21553a8f82e531294333133258daeee6 Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Thu, 14 Mar 2024 20:12:41 +0530
Subject: [PATCH 2/2] fix: border of radio button & checkbox is not proper

---
 .../src/components/pdf/Placeholder.js         | 98 ++++++-------------
 .../src/components/pdf/PlaceholderBorder.js   |  9 +-
 apps/OpenSign/src/styles/signature.css        |  2 -
 3 files changed, 32 insertions(+), 77 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
index d7c8f7d36..3f8ba02c0 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -114,6 +114,10 @@ function Placeholder(props) {
         props.pos?.options?.validation?.format
       )
   );
+  const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
+    width: null,
+    height: null
+  });
   const dateFormatArr = [
     "L",
     "DD-MM-YYYY",
@@ -125,6 +129,21 @@ function Placeholder(props) {
     "DD MMM, YYYY",
     "DD MMMM, YYYY"
   ];
+
+  useEffect(() => {
+    const updateWidth = () => {
+      const rndElement = document.getElementById(props.pos.key);
+      if (rndElement) {
+        const { width, height } = rndElement.getBoundingClientRect();
+        setGetCheckboxRenderWidth({ width: width, height: height });
+      }
+    };
+
+    // Delay to ensure rendering is complete
+    const timer = setTimeout(updateWidth, 0);
+
+    return () => clearTimeout(timer);
+  }, [props.pos]);
   //function change format array list with selected date and format
   const changeDateFormat = () => {
     const updateDate = [];
@@ -330,8 +349,8 @@ function Placeholder(props) {
                   className="fa-solid fa-gear settingIcon"
                   style={{
                     color: "#188ae2",
-                    right: "9px",
-                    top: "-28px"
+                    right: "29px",
+                    top: "-19px"
                   }}
                 ></i>
               ) : (
@@ -351,19 +370,7 @@ function Placeholder(props) {
                       handleOnClickSettingIcon();
                     }}
                     className="fa-solid fa-gear settingIcon"
-                    style={{
-                      color: "#188ae2",
-                      right: ["checkbox", radioButtonWidget].includes(
-                        props.pos.type
-                      )
-                        ? "24px"
-                        : "47px",
-                      top: ["checkbox", radioButtonWidget].includes(
-                        props.pos.type
-                      )
-                        ? "-28px"
-                        : "-19px"
-                    }}
+                    style={{ color: "#188ae2", right: "47px", top: "-19px" }}
                   ></i>
                 )
               )}
@@ -382,19 +389,7 @@ function Placeholder(props) {
                     props.handleLinkUser(props.data.Id);
                     props.setUniqueId(props.data.Id);
                   }}
-                  style={{
-                    color: "#188ae2",
-                    right:
-                      props.pos.type === "checkbox" ||
-                      props.pos.type === radioButtonWidget
-                        ? "8px"
-                        : "32px",
-                    top:
-                      props.pos.type === "checkbox" ||
-                      props.pos.type === radioButtonWidget
-                        ? "-28px"
-                        : "-18px"
-                  }}
+                  style={{ color: "#188ae2", right: "32px", top: "-18px" }}
                 ></i>
               )}
             </>
@@ -472,19 +467,7 @@ function Placeholder(props) {
             className="fa-regular fa-copy signCopy"
             onClick={(e) => handleCopyPlaceholder(e)}
             onTouchEnd={(e) => handleCopyPlaceholder(e)}
-            style={{
-              color: "#188ae2",
-              right:
-                props.pos.type === "checkbox" ||
-                props.pos.type === radioButtonWidget
-                  ? "-9px"
-                  : "12px",
-              top:
-                props.pos.type === "checkbox" ||
-                props.pos.type === radioButtonWidget
-                  ? "-28px"
-                  : "-18px"
-            }}
+            style={{ color: "#188ae2", right: "12px", top: "-18px" }}
           ></i>
           <i
             className="fa-regular fa-circle-xmark signCloseBtn"
@@ -507,19 +490,7 @@ function Placeholder(props) {
                 props.setIsStamp(false);
               }
             }}
-            style={{
-              color: "#188ae2",
-              right:
-                props.pos.type === "checkbox" ||
-                props.pos.type === radioButtonWidget
-                  ? "-27px"
-                  : "-8px",
-              top:
-                props.pos.type === "checkbox" ||
-                props.pos.type === radioButtonWidget
-                  ? "-28px"
-                  : "-18px"
-            }}
+            style={{ color: "#188ae2", right: "-8px", top: "-18px" }}
           ></i>
         </>
       )
@@ -528,6 +499,7 @@ function Placeholder(props) {
 
   return (
     <Rnd
+      id={props.pos.key}
       data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
       key={props.pos.key}
       lockAspectRatio={
@@ -637,20 +609,7 @@ function Placeholder(props) {
       props.pos.type !== radioButtonWidget &&
       props.pos.type !== "checkbox" &&
       props.pos.key === props.selectWidgetId ? (
-        <BorderResize
-          right={
-            props.pos.type === "checkbox" ||
-            props.pos.type === radioButtonWidget
-              ? -21
-              : -12
-          }
-          top={
-            props.pos.type === "checkbox" ||
-            props.pos.type === radioButtonWidget
-              ? -21
-              : -11
-          }
-        />
+        <BorderResize right={-12} top={-11} />
       ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
         props.data?.signerObjId === props.signerObjId &&
         props.pos.type !== radioButtonWidget &&
@@ -670,6 +629,7 @@ function Placeholder(props) {
           setDraggingEnabled={setDraggingEnabled}
           pos={props.pos}
           isPlaceholder={props.isPlaceholder}
+          getCheckboxRenderWidth={getCheckboxRenderWidth}
         />
       )}
       {isMobile ? (
@@ -677,7 +637,7 @@ function Placeholder(props) {
           style={{
             left: props.xPos(props.pos, props.isSignYourself),
             top: props.yPos(props.pos, props.isSignYourself),
-            width: props.posWidth(props.pos, props.isSignYourself),
+            width: "auto", //props.posWidth(props.pos, props.isSignYourself),
             // height: props.posHeight(props.pos, props.isSignYourself),
             zIndex: "10"
           }}
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
index 22907f296..f209307c2 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
@@ -6,16 +6,13 @@ import {
   resizeBorderExtraWidth
 } from "../../constant/Utils";
 function PlaceholderBorder(props) {
-  const getResizeBorderExtraWidth =
-    props.pos.type === "checkbox" || props.pos.type === radioButtonWidget
-      ? 38
-      : resizeBorderExtraWidth();
+  const getResizeBorderExtraWidth = resizeBorderExtraWidth();
   const defaultWidth = defaultWidthHeight(props.pos.type).width;
   const defaultHeight = defaultWidthHeight(props.pos.type).height;
 
   const handleMinWidth = () => {
     if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
-      return "120%";
+      return props.getCheckboxRenderWidth.width + getResizeBorderExtraWidth;
     } else {
       return props.pos.Width
         ? props.pos.Width + getResizeBorderExtraWidth
@@ -24,7 +21,7 @@ function PlaceholderBorder(props) {
   };
   const handleMinHeight = () => {
     if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
-      return "120%";
+      return props.getCheckboxRenderWidth.height + getResizeBorderExtraWidth;
     } else {
       return props.pos.Height
         ? props.pos.Height + getResizeBorderExtraWidth
diff --git a/apps/OpenSign/src/styles/signature.css b/apps/OpenSign/src/styles/signature.css
index 47c3d9e73..8229cdb05 100644
--- a/apps/OpenSign/src/styles/signature.css
+++ b/apps/OpenSign/src/styles/signature.css
@@ -339,8 +339,6 @@
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
-  min-width:max-content;
-  min-height: max-content;
 }
 
 .finishBtn {