Merge pull request #998 from OpenSignLabs/input_text_darkmode

fix: type initials and signature looks blurry on download pdf
OpenSignLabs · Aug 1, 2024 · 375dc86 · 375dc86
2 parents d2f187f + 10e0153
commit 375dc86
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/apps/OpenSign/src/components/pdf/SignPad.js b/apps/OpenSign/src/components/pdf/SignPad.js
@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
 import SignatureCanvas from "react-signature-canvas";
-
 function SignPad({
   isSignPad,
   isStamp,
@@ -99,7 +98,12 @@ function SignPad({
               } else {
                 if (isTab === "type") {
                   setIsSignImg("");
-                  onSaveSign(null, false, textWidth, textHeight);
+                  onSaveSign(
+                    null,
+                    false,
+                    !isInitial && textWidth > 150 ? 150 : textWidth,
+                    !isInitial && textHeight > 35 ? 35 : textHeight
+                  );
                 } else {
                   setIsSignImg("");
                   canvasRef.current.clear();
@@ -211,11 +215,11 @@ function SignPad({
       : fontSelect
         ? fontSelect
         : "Fasthand";
-
+    const fontSizeValue = "40px";
     //creating span for getting text content width
     const span = document.createElement("span");
     span.textContent = textContent;
-    span.style.font = `20px ${fontfamily}`; // here put your text size and font family
+    span.style.font = `${fontSizeValue} ${fontfamily}`; // here put your text size and font family
     span.style.color = color ? color : penColor;
     span.style.display = "hidden";
     document.body.appendChild(span); // Replace 'container' with the ID of the container element
@@ -225,7 +229,8 @@ function SignPad({
     // Draw the text content on the canvas
     const ctx = canvasElement.getContext("2d");
     const pixelRatio = window.devicePixelRatio || 1;
-    const width = span.offsetWidth;
+    const addExtraWidth = isInitial ? 10 : 50;
+    const width = span.offsetWidth + addExtraWidth;
     const height = span.offsetHeight;
     setTextWidth(width);
     setTextHeight(height);