Merge pull request #1323 from OpenSignLabs/react-tour

Fix: resolved text box font size issue during resizing and prevented unnecessary popups from opening when resizing widgets.
OpenSignLabs · Oct 11, 2024 · 716023b · 716023b
2 parents 7b35e71 + 67b3417
commit 716023b
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 19 deletions.
diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -651,6 +651,21 @@ function Placeholder(props) {
       }
     }
   };
+  //function to calculate font size
+  const calculateFont = (size, isMinHeight) => {
+    const containerScale = getContainerScale(
+      props.pdfOriginalWH,
+      props.pageNumber,
+      props.containerWH
+    );
+    const fontSize = (size || 12) * containerScale * props.scale;
+    //isMinHeight to set text box minimum height
+    if (isMinHeight) {
+      return fontSize * 1.5 + "px";
+    } else {
+      return fontSize + "px";
+    }
+  };
 
   const getCursor = () => {
     if (props.data && props.isNeedSign) {
@@ -745,12 +760,16 @@ function Placeholder(props) {
               ? "auto"
               : props.posHeight(props.pos, props.isSignYourself)
         }}
+        minHeight={calculateFont(props.pos.options?.fontSize, true)}
+        maxHeight="auto"
         onResizeStart={() => {
           setDraggingEnabled(true);
           props.setIsResize && props.setIsResize(true);
         }}
         onResizeStop={(e, direction, ref) => {
-          props.setIsResize && props.setIsResize(false);
+          setTimeout(() => {
+            props.setIsResize && props.setIsResize(false);
+          }, 50);
           props.handleSignYourselfImageResize &&
             props.handleSignYourselfImageResize(
               ref,
@@ -785,7 +804,7 @@ function Placeholder(props) {
             h: ref.offsetHeight / (props.scale * containerScale)
           });
         }}
-        onClick={() => handleOnClickPlaceholder()}
+        onClick={() => !props.isResize && handleOnClickPlaceholder()}
       >
         {props.isShowBorder &&
         props.pos.type !== radioButtonWidget &&
@@ -872,7 +891,7 @@ function Placeholder(props) {
               startDate={startDate}
               handleSaveDate={handleSaveDate}
               xPos={props.xPos}
-              posHeight={props.posHeight}
+              calculateFont={calculateFont}
             />
           </div>
         ) : (
@@ -900,7 +919,7 @@ function Placeholder(props) {
               startDate={startDate}
               handleSaveDate={handleSaveDate}
               xPos={props.xPos}
-              posHeight={props.posHeight}
+              calculateFont={calculateFont}
             />
           </>
         )}

diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js
@@ -29,9 +29,7 @@ function PlaceholderType(props) {
   const [textValue, setTextValue] = useState();
   const [selectedCheckbox, setSelectedCheckbox] = useState([]);
   const years = range(1990, getYear(new Date()) + 16, 1);
-  const height = props.posHeight(props.pos, props.isSignYourself);
-  const fontSize =
-    (props.pos.options?.fontSize || (height ? height - 4 : 12)) + "px";
+  const fontSize = props.calculateFont(props.pos.options?.fontSize);
   const fontColor = props.pos.options?.fontColor || "black";
   const months = [
     "January",

diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js
@@ -65,7 +65,8 @@ function RenderPdf({
   fontSize,
   setFontSize,
   fontColor,
-  setFontColor
+  setFontColor,
+  isResize
 }) {
   const { t } = useTranslation();
   const isMobile = window.innerWidth < 767;
@@ -104,6 +105,7 @@ function RenderPdf({
       }
     }
   };
+
   const posHeight = (pos, signYourself) => {
     const containerScale = getContainerScale(
       pdfOriginalWH,
@@ -207,6 +209,7 @@ function RenderPdf({
                         pageNumber={pageNumber}
                         ispublicTemplate={ispublicTemplate}
                         handleUserDetails={handleUserDetails}
+                        isResize={isResize}
                       />
                     </React.Fragment>
                   )
@@ -357,6 +360,7 @@ function RenderPdf({
                                             setFontSize={setFontSize}
                                             fontColor={fontColor}
                                             setFontColor={setFontColor}
+                                            isResize={isResize}
                                           />
                                         </React.Fragment>
                                       );
@@ -417,6 +421,8 @@ function RenderPdf({
                                     setFontSize={setFontSize}
                                     fontColor={fontColor}
                                     setFontColor={setFontColor}
+                                    isResize={isResize}
+                                    setIsResize={setIsResize}
                                   />
                                 )
                               );
@@ -548,6 +554,7 @@ function RenderPdf({
                                             setFontSize={setFontSize}
                                             fontColor={fontColor}
                                             setFontColor={setFontColor}
+                                            isResize={isResize}
                                           />
                                         </React.Fragment>
                                       );
@@ -611,6 +618,8 @@ function RenderPdf({
                                     setFontSize={setFontSize}
                                     fontColor={fontColor}
                                     setFontColor={setFontColor}
+                                    isResize={isResize}
+                                    setIsResize={setIsResize}
                                   />
                                 </React.Fragment>
                               );

diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
@@ -1289,14 +1289,8 @@ export const changeImageWH = async (base64Image) => {
 };
 
 //function to calculate font size of text area widgets
-const calculateFontSize = (
-  position,
-  containerScale,
-  signyourself,
-  widgetHeight
-) => {
-  const font =
-    position?.options?.fontSize || (widgetHeight ? widgetHeight / 2 : 12);
+const calculateFontSize = (position, containerScale, signyourself) => {
+  const font = position?.options?.fontSize || 12;
   if (!signyourself && position?.isMobile && position?.scale) {
     return font / position?.scale / containerScale;
   } else {
@@ -1506,8 +1500,7 @@ export const multiSignEmbed = async (
           const fontSize = calculateFontSize(
             position,
             containerScale,
-            signyourself,
-            position.Height
+            signyourself
           );
           parseInt(fontSize);
           let textContent;
@@ -1688,6 +1681,7 @@ export const multiSignEmbed = async (
   }
   if (!hasError) {
     const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
+    // console.log("pdf", pdfBytes);
     return pdfBytes;
   } else {
     return {

diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -2058,6 +2058,7 @@ function PlaceHolderSign() {
                         setSignerPos={setSignerPos}
                         containerWH={containerWH}
                         setIsResize={setIsResize}
+                        isResize={isResize}
                         setZIndex={setZIndex}
                         setIsPageCopy={setIsPageCopy}
                         signersdata={signersdata}

diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -132,6 +132,7 @@ function SignYourSelf() {
   const [isRotate, setIsRotate] = useState({ status: false, degree: 0 });
   const [isSubscribe, setIsSubscribe] = useState({ plan: "", isValid: true });
   const [isDownloadModal, setIsDownloadModal] = useState(false);
+  const [isResize, setIsResize] = useState(false);
   const divRef = useRef(null);
   const nodeRef = useRef(null);
   const [, drop] = useDrop({
@@ -785,7 +786,7 @@ function SignYourSelf() {
   const handleStop = (event, dragElement) => {
     setFontSize();
     setFontColor();
-    if (isDragging && dragElement) {
+    if (!isResize && isDragging && dragElement) {
       event.preventDefault();
       const containerScale = getContainerScale(
         pdfOriginalWH,
@@ -1402,6 +1403,8 @@ function SignYourSelf() {
                       setFontSize={setFontSize}
                       fontColor={fontColor}
                       setFontColor={setFontColor}
+                      isResize={isResize}
+                      setIsResize={setIsResize}
                     />
                   )}
                 </div>

diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -1600,6 +1600,7 @@ const TemplatePlaceholder = () => {
                         setFontSize={setFontSize}
                         fontColor={fontColor}
                         setFontColor={setFontColor}
+                        isResize={isResize}
                       />
                     )}
                   </div>