From 852a3dc8bbffa4d525b0213b644f43e1c32dd782 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 29 Dec 2023 16:36:49 +0530 Subject: [PATCH 1/7] feat: Enable text input signature feature --- .../src/Component/PdfRequestFiles.js | 10 +- .../src/Component/SignYourselfPdf.js | 9 +- .../src/Component/component/signPad.js | 183 ++++++++++++++++-- .../src/Component/recipientSignPdf.js | 9 +- .../SignDocuments/src/css/signature.css | 6 +- .../SignDocuments/src/utils/Utils.js | 128 ++++++------ 6 files changed, 242 insertions(+), 103 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 228ac55fa..ce80021c8 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -522,9 +522,10 @@ function PdfRequestFiles() { }; //function for save button to save signature or image url - const saveSign = (isDefaultSign) => { + const saveSign = (isDefaultSign, width, height) => { + const isTypeText = width && height ? true : false; const signatureImg = isDefaultSign ? defaultSignImg : signature; - let imgWH = { width: "", height: "" }; + let imgWH = { width: width ? width : "", height: height ? height : "" }; setIsSignPad(false); setIsImageSelect(false); setImage(); @@ -558,7 +559,8 @@ function PdfRequestFiles() { signKey, signatureImg, imgWH, - isDefaultSign + isDefaultSign, + isTypeText ); const updateSignerData = currentSigner.map((obj, ind) => { @@ -885,7 +887,7 @@ function PdfRequestFiles() { display: "flex", flexDirection: "row", alignItems: "center", - padding:"10px 0", + padding: "10px 0", background: checkSignerBackColor(obj) }} key={ind} diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index c2a363590..45178e6e9 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -657,10 +657,10 @@ function SignYourSelf() { }; //function for save button to save signature or image url - const saveSign = (isDefaultSign) => { + const saveSign = (isDefaultSign, width, height) => { + const isTypeText = width && height ? true : false; const signatureImg = isDefaultSign ? defaultSignImg : signature; - - let imgWH = { width: "", height: "" }; + let imgWH = { width: width ? width : "", height: height ? height : "" }; setIsSignPad(false); setIsImageSelect(false); setImage(); @@ -681,7 +681,8 @@ function SignYourSelf() { signKey, signatureImg, imgWH, - isDefaultSign + isDefaultSign, + isTypeText ); setXyPostion(getUpdatePosition); diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index d077547bd..060cd1d2e 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -27,8 +27,34 @@ function SignPad({ const allColor = [bluePen, redPen, blackPen]; const canvasRef = useRef(null); const [isDefaultSign, setIsDefaultSign] = useState(false); - const [isTab, setIsTab] = useState("signature"); + const [isTab, setIsTab] = useState("draw"); const [isSignImg, setIsSignImg] = useState(""); + const [signValue, setSignValue] = useState(""); + const [textWidth, setTextWidth] = useState(null); + const fontOptions = [ + { value: "Lucida Handwriting" }, + { value: "Segoe Script" }, + { value: "Harrington" }, + { value: "cursive" } + + // Add more font options as needed + ]; + const [fontSelect, setFontSelect] = useState(fontOptions[0].value); + + useEffect(() => { + const senderUser = + localStorage.getItem( + `Parse/${localStorage.getItem("parseAppId")}/currentUser` + ) && + localStorage.getItem( + `Parse/${localStorage.getItem("parseAppId")}/currentUser` + ); + const jsonSender = JSON.parse(senderUser); + + const currentUserName = jsonSender && jsonSender.name; + //function for clear signature + setSignValue(currentUserName); + }, []); //function for clear signature const handleClear = () => { if (canvasRef.current) { @@ -68,8 +94,13 @@ function SignPad({ setIsSignImg(""); onSaveSign(isDefaultSign); } else { - setIsSignImg(""); - onSaveSign(); + if (isTab === "type") { + setIsSignImg(""); + onSaveSign(false, textWidth, 30); + } else { + setIsSignImg(""); + onSaveSign(); + } } setPenColor("blue"); @@ -82,13 +113,15 @@ function SignPad({ setIsImageSelect(false); setIsDefaultSign(false); setImage(); - setIsTab("signature"); + setIsTab("draw"); }} style={{ background: themeColor(), color: "white" }} - disabled={isSignImg || image || isDefaultSign ? false : true} + disabled={ + isSignImg || image || isDefaultSign || textWidth ? false : true + } type="button" className={ isSignImg || image ? "finishBtn saveBtn" : "disabledFinish saveBtn" @@ -105,8 +138,46 @@ function SignPad({ if (canvasRef.current) { canvasRef.current.fromDataURL(isSignImg); } + if (isTab === "type") { + convertToImg(); + } }, [isTab]); + //function for convert input text value in image + const convertToImg = async () => { + //get text content to convert in image + const textContent = signValue; + // Calculate the width of the text content + const textWidth = getTextWidth(textContent); + // Increase pixel ratio for higher resolution + const pixelRatio = window.devicePixelRatio || 1; + // Create a canvas with the calculated width + const canvas = document.createElement("canvas"); + canvas.width = textWidth * pixelRatio + 20 * pixelRatio; + canvas.height = 20 * pixelRatio; // You can adjust the height as needed + setTextWidth(textWidth * pixelRatio); + // Draw the text content on the canvas + const context = canvas.getContext("2d"); + context.scale(pixelRatio, pixelRatio); + context.font = `13px ${fontSelect}`; // You can adjust the font size and style + context.fillText(textContent, 0, 10); // Adjust the y-coordinate as needed + + // Convert the canvas to image data + const dataUrl = canvas.toDataURL("image/png"); + + setSignature(dataUrl); + }; + + //for getting text content width render text in span tag and get width + const getTextWidth = (text) => { + const tempSpan = document.createElement("span"); + tempSpan.innerText = text; + tempSpan.style.visibility = "hidden"; + document.body.appendChild(tempSpan); + const width = tempSpan.offsetWidth; + document.body.removeChild(tempSpan); + return width; + }; return (
{/*isSignPad */} @@ -143,22 +214,23 @@ function SignPad({ onClick={() => { setIsDefaultSign(false); setIsImageSelect(false); - setIsTab("signature"); + setIsTab("draw"); setImage(); }} style={{ - color: isTab === "signature" ? themeColor() : "#515252", + color: isTab === "draw" ? themeColor() : "#515252", + marginLeft: "2px" }} className="signTab" > - Signature + Draw
+
+ { + setIsDefaultSign(false); + setIsImageSelect(false); + setIsTab("type"); + setImage(); + }} + style={{ + color: isTab === "type" ? themeColor() : "#515252", + marginLeft: "2px" + }} + className="signTab" + > + Type + + +
+
{defaultSign && (
X @@ -254,6 +352,7 @@ function SignPad({ alignItems: "center", marginBottom: 6, cursor: "pointer" + // background:'rgb(255, 255, 255)' }} className="signatureCanvas" > @@ -262,6 +361,7 @@ function SignPad({ style={{ width: "100%", height: "100%", + background: "rgb(255, 255, 255)", objectFit: "contain" }} src={defaultSign} @@ -276,6 +376,7 @@ function SignPad({ +
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index b039b0975..3c79eb685 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -555,10 +555,11 @@ function EmbedPdfImage() { }; //function for save button to save signature or image url - const saveSign = (isDefaultSign) => { + const saveSign = (isDefaultSign, width, height) => { + const isTypeText = width && height ? true : false; const signatureImg = isDefaultSign ? defaultSignImg : signature; - const signFlag = true; - let imgWH = { width: "", height: "" }; + + let imgWH = { width: width ? width : "", height: height ? height : "" }; setIsSignPad(false); setIsImageSelect(false); setImage(); @@ -580,7 +581,7 @@ function EmbedPdfImage() { signatureImg, imgWH, isDefaultSign, - signFlag + isTypeText ); if (getUpdatePosition) { diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 3aeeac8ce..892abb7ed 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -123,7 +123,6 @@ } .signatureInput { - padding: 10px; width: 80%; border-radius: 4px; font-size: 0.75rem; @@ -134,10 +133,13 @@ font-variation-settings: inherit; font-weight: inherit; overflow: visible; + height: 30px; } .signatureInput:focus { outline: none; + border: 1px solid blue; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); } .resizable-box-overlay { @@ -664,7 +666,7 @@ option { .fontOptionContainer { border: 1px solid #d6d3d3; - margin: 10px 5px 5px 5px; + margin: 10px 0px 5px 0px; } diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 803d278d3..6f93e1237 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -126,7 +126,8 @@ export function onSaveSign( signKey, signatureImg, imgWH, - isDefaultSign + isDefaultSign, + isTypeText ) { let getIMGWH; let getXYdata = xyPostion[index].pos; @@ -134,21 +135,17 @@ export function onSaveSign( if (position.key === signKey) { if (isDefaultSign) { getIMGWH = calculateImgAspectRatio(imgWH, position); + } else if (isTypeText) { + getIMGWH = { newWidth: imgWH.width, newHeight: imgWH.height }; + } else { + getIMGWH = calculateImgAspectRatio( + { width: 150, height: 60 }, + position + ); } - const getSignImgWH = calculateImgAspectRatio( - { width: 150, height: 60 }, - position - ); - const posWidth = isDefaultSign - ? getIMGWH.newWidth - : position.Width - ? getSignImgWH.newWidth - : 150; - const posHeight = isDefaultSign - ? getIMGWH.newHeight - : position.Height - ? getSignImgWH.newHeight - : 60; + + const posWidth = getIMGWH ? getIMGWH.newWidth : 150; + const posHeight = getIMGWH ? getIMGWH.newHeight : 60; return { ...position, @@ -765,66 +762,62 @@ export const handleImageResize = ( export const handleSignYourselfImageResize = ( ref, key, - direction, - position, xyPostion, index, - setXyPostion, - pdfOriginalWidth, - containerWH + setXyPostion ) => { - const updateFilter = xyPostion[index].pos.filter( - (data) => data.key === key && data.Width && data.Height - ); + // const updateFilter = xyPostion[index].pos.filter( + // (data) => data.key === key && data.Width && data.Height + // ); - if (updateFilter.length > 0) { - const getXYdata = xyPostion[index].pos; - const getPosData = getXYdata; - const addSign = getPosData.map((url, ind) => { - if (url.key === key) { - return { - ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight, - IsResize: true - }; - } - return url; - }); + // if (updateFilter.length > 0) { + // const getXYdata = xyPostion[index].pos; + // const getPosData = getXYdata; + // const addSign = getPosData.map((url, ind) => { + // if (url.key === key) { + // return { + // ...url, + // Width: ref.offsetWidth, + // Height: ref.offsetHeight, + // IsResize: true + // }; + // } + // return url; + // }); - const newUpdateUrl = xyPostion.map((obj, ind) => { - if (ind === index) { - return { ...obj, pos: addSign }; - } - return obj; - }); + // const newUpdateUrl = xyPostion.map((obj, ind) => { + // if (ind === index) { + // return { ...obj, pos: addSign }; + // } + // return obj; + // }); - setXyPostion(newUpdateUrl); - } else { - const getXYdata = xyPostion[index].pos; + // setXyPostion(newUpdateUrl); + // } else { + const getXYdata = xyPostion[index].pos; - const getPosData = getXYdata; + const getPosData = getXYdata; - const addSign = getPosData.map((url, ind) => { - if (url.key === key) { - return { - ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight, - IsResize: true - }; - } - return url; - }); + const addSign = getPosData.map((url, ind) => { + if (url.key === key) { + return { + ...url, + Width: ref.offsetWidth, + Height: ref.offsetHeight, + IsResize: true + }; + } + return url; + }); - const newUpdateUrl = xyPostion.map((obj, ind) => { - if (ind === index) { - return { ...obj, pos: addSign }; - } - return obj; - }); - setXyPostion(newUpdateUrl); - } + const newUpdateUrl = xyPostion.map((obj, ind) => { + if (ind === index) { + return { ...obj, pos: addSign }; + } + return obj; + }); + setXyPostion(newUpdateUrl); + // } }; //function for call cloud function signPdf and generate digital signature @@ -1052,7 +1045,6 @@ export const getFirstLetter = (name) => { return firstLetter; }; - export const darkenColor = (color, factor) => { // Remove '#' from the color code and parse it to get RGB values const hex = color.replace("#", ""); @@ -1070,5 +1062,3 @@ export const darkenColor = (color, factor) => { .toString(16) .padStart(6, "0")}`; }; - - From ee609061edc7227e2686e9437700d2ff4c1f4712 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 2 Jan 2024 10:03:06 +0530 Subject: [PATCH 2/7] fix: text input signature font-family for mobile view --- .../src/Component/component/signPad.js | 14 +++++--------- microfrontends/SignDocuments/src/css/signature.css | 13 ++++++++++++- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index 060cd1d2e..35ceb6e47 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -32,11 +32,10 @@ function SignPad({ const [signValue, setSignValue] = useState(""); const [textWidth, setTextWidth] = useState(null); const fontOptions = [ - { value: "Lucida Handwriting" }, - { value: "Segoe Script" }, - { value: "Harrington" }, - { value: "cursive" } - + { value: "Fasthand" }, + { value: "Dancing Script" }, + { value: "Cedarville Cursive" }, + { value: "Delicious Handrawn" } // Add more font options as needed ]; const [fontSelect, setFontSelect] = useState(fontOptions[0].value); @@ -153,7 +152,7 @@ function SignPad({ // Create a canvas with the calculated width const canvas = document.createElement("canvas"); - canvas.width = textWidth * pixelRatio + 20 * pixelRatio; + canvas.width = textWidth * pixelRatio + 30 * pixelRatio; canvas.height = 20 * pixelRatio; // You can adjust the height as needed setTextWidth(textWidth * pixelRatio); // Draw the text content on the canvas @@ -164,7 +163,6 @@ function SignPad({ // Convert the canvas to image data const dataUrl = canvas.toDataURL("image/png"); - setSignature(dataUrl); }; @@ -199,8 +197,6 @@ function SignPad({ justifyContent: "space-around", alignItems: "end", gap: 10 - - // background: themeColor(), }} > {isStamp ? ( diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 892abb7ed..857606582 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -1,3 +1,8 @@ +@import url('https://fonts.googleapis.com/css2?family=Fasthand&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap'); + .signatureCanvas { border: 2px solid #888; background-color: rgb(255, 255, 255); @@ -810,6 +815,12 @@ option { .mobileHead { display: flex; } + .signTab { + + font-weight: 500 !important; + + font-size: 10px !important; + } } @@ -868,7 +879,7 @@ option { font-weight: 500 !important; - font-size: 10px !important; + font-size: 8px !important; } .uploadImgLogo { From cf88eb2124bec51600995d694f4defcc2fac18d3 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 3 Jan 2024 12:43:01 +0530 Subject: [PATCH 3/7] fix: font-style issue after save text signature --- .../src/Component/component/signPad.js | 44 ++++++++++++++----- .../SignDocuments/src/css/signature.css | 8 +++- 2 files changed, 38 insertions(+), 14 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index 35ceb6e47..1eb483568 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -95,7 +95,7 @@ function SignPad({ } else { if (isTab === "type") { setIsSignImg(""); - onSaveSign(false, textWidth, 30); + onSaveSign(false, textWidth, 25); } else { setIsSignImg(""); onSaveSign(); @@ -142,37 +142,42 @@ function SignPad({ } }, [isTab]); //function for convert input text value in image - const convertToImg = async () => { + const convertToImg = async (fontStyle) => { //get text content to convert in image const textContent = signValue; + const fontfamily = fontStyle ? fontStyle : fontSelect; // Calculate the width of the text content - const textWidth = getTextWidth(textContent); + const textWidth = getTextWidth(textContent, fontfamily); // Increase pixel ratio for higher resolution const pixelRatio = window.devicePixelRatio || 1; - // Create a canvas with the calculated width const canvas = document.createElement("canvas"); - canvas.width = textWidth * pixelRatio + 30 * pixelRatio; + canvas.width = textWidth * pixelRatio + 10 * pixelRatio; canvas.height = 20 * pixelRatio; // You can adjust the height as needed setTextWidth(textWidth * pixelRatio); + // Draw the text content on the canvas const context = canvas.getContext("2d"); + + context.clearRect(0, 0, canvas.width, canvas.height); context.scale(pixelRatio, pixelRatio); - context.font = `13px ${fontSelect}`; // You can adjust the font size and style + context.font = `13px ${fontfamily}`; // You can adjust the font size and style context.fillText(textContent, 0, 10); // Adjust the y-coordinate as needed // Convert the canvas to image data const dataUrl = canvas.toDataURL("image/png"); + setSignature(dataUrl); }; //for getting text content width render text in span tag and get width - const getTextWidth = (text) => { + const getTextWidth = (text, fontfamily) => { const tempSpan = document.createElement("span"); tempSpan.innerText = text; tempSpan.style.visibility = "hidden"; + tempSpan.style.fontFamily = fontfamily; document.body.appendChild(tempSpan); - const width = tempSpan.offsetWidth; + const width = tempSpan.getBoundingClientRect().width; document.body.removeChild(tempSpan); return width; }; @@ -426,9 +431,16 @@ function SignPad({ ) ) : isTab === "type" ? (
-
- Signature: +
+ Signature: setFontSelect(font.value)} + onClick={() => { + setFontSelect(font.value); + convertToImg(font.value); + }} > -
+
{signValue ? signValue : "Your signature"}
diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 857606582..2eb4f834a 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -130,7 +130,7 @@ .signatureInput { width: 80%; border-radius: 4px; - font-size: 0.75rem; + font-size: 20px; border: 1px solid #e2dddd; color: black; font-family: inherit; @@ -791,6 +791,10 @@ option { .mobileHead { display: flex; } + .signatureText{ + margin-right: 5px; + font-size: 12px; + } } @media screen and (max-width:487px) and (min-width:351px) { @@ -819,7 +823,7 @@ option { font-weight: 500 !important; - font-size: 10px !important; + font-size: 12px !important; } } From 081dae0b903f70b2e79d05fbc21a0b8c7db88a2b Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 3 Jan 2024 13:07:59 +0530 Subject: [PATCH 4/7] fix: font style for first time on save text signature --- .../SignDocuments/src/Component/component/signPad.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index 1eb483568..211ba0a8e 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -145,7 +145,11 @@ function SignPad({ const convertToImg = async (fontStyle) => { //get text content to convert in image const textContent = signValue; - const fontfamily = fontStyle ? fontStyle : fontSelect; + const fontfamily = fontStyle + ? fontStyle + : fontSelect + ? fontSelect + : fontOptions[0].value; // Calculate the width of the text content const textWidth = getTextWidth(textContent, fontfamily); // Increase pixel ratio for higher resolution From ac9367a71544bbe53b1214e77bd00040b7eb7fd3 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 3 Jan 2024 13:46:44 +0530 Subject: [PATCH 5/7] fix: fontstyle after save text signature issue --- .../src/Component/component/signPad.js | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index 211ba0a8e..66355fd05 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -53,6 +53,7 @@ function SignPad({ const currentUserName = jsonSender && jsonSender.name; //function for clear signature setSignValue(currentUserName); + setFontSelect("Fasthand"); }, []); //function for clear signature const handleClear = () => { @@ -132,6 +133,22 @@ function SignPad({ ); }; + useEffect(() => { + const loadFont = async () => { + try { + await document.fonts.load(`20px ${fontSelect}`); + const selectFontSTyle = fontOptions.find( + (font) => font.value === fontSelect + ); + setFontSelect(selectFontSTyle?.value || fontOptions[0].value); + } catch (error) { + console.error("Error loading font:", error); + } + }; + + loadFont(); + }, [fontSelect]); + useEffect(() => { // Load the default signature after the component mounts if (canvasRef.current) { @@ -149,7 +166,8 @@ function SignPad({ ? fontStyle : fontSelect ? fontSelect - : fontOptions[0].value; + : "Fasthand"; + console.log("font family", fontfamily); // Calculate the width of the text content const textWidth = getTextWidth(textContent, fontfamily); // Increase pixel ratio for higher resolution From 153c5db4b518939f91e7b3460d82dd938a2c16a6 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 3 Jan 2024 16:17:32 +0530 Subject: [PATCH 6/7] fix: input signature image height issue and limit 30 character of input text signature --- .../src/Component/component/signPad.js | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index 66355fd05..11b21e935 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -31,6 +31,7 @@ function SignPad({ const [isSignImg, setIsSignImg] = useState(""); const [signValue, setSignValue] = useState(""); const [textWidth, setTextWidth] = useState(null); + const [textHeight, setTextHeight] = useState(null); const fontOptions = [ { value: "Fasthand" }, { value: "Dancing Script" }, @@ -96,7 +97,7 @@ function SignPad({ } else { if (isTab === "type") { setIsSignImg(""); - onSaveSign(false, textWidth, 25); + onSaveSign(false, textWidth, textHeight); } else { setIsSignImg(""); onSaveSign(); @@ -155,28 +156,30 @@ function SignPad({ canvasRef.current.fromDataURL(isSignImg); } if (isTab === "type") { - convertToImg(); + convertToImg(fontSelect, signValue); } }, [isTab]); //function for convert input text value in image - const convertToImg = async (fontStyle) => { + const convertToImg = async (fontStyle, text) => { //get text content to convert in image - const textContent = signValue; + const textContent = text; const fontfamily = fontStyle ? fontStyle : fontSelect ? fontSelect : "Fasthand"; - console.log("font family", fontfamily); + // Calculate the width of the text content - const textWidth = getTextWidth(textContent, fontfamily); + const { width, height } = getTextWidth(textContent, fontfamily); // Increase pixel ratio for higher resolution const pixelRatio = window.devicePixelRatio || 1; // Create a canvas with the calculated width const canvas = document.createElement("canvas"); - canvas.width = textWidth * pixelRatio + 10 * pixelRatio; - canvas.height = 20 * pixelRatio; // You can adjust the height as needed - setTextWidth(textWidth * pixelRatio); + canvas.width = width * 2; + canvas.height = height; + // canvas.height = height; // You can adjust the height as needed + setTextWidth(width); + setTextHeight(25); // Draw the text content on the canvas const context = canvas.getContext("2d"); @@ -184,11 +187,10 @@ function SignPad({ context.clearRect(0, 0, canvas.width, canvas.height); context.scale(pixelRatio, pixelRatio); context.font = `13px ${fontfamily}`; // You can adjust the font size and style - context.fillText(textContent, 0, 10); // Adjust the y-coordinate as needed + context.fillText(textContent, 4, 10); // Adjust the y-coordinate as needed // Convert the canvas to image data const dataUrl = canvas.toDataURL("image/png"); - setSignature(dataUrl); }; @@ -199,9 +201,10 @@ function SignPad({ tempSpan.style.visibility = "hidden"; tempSpan.style.fontFamily = fontfamily; document.body.appendChild(tempSpan); - const width = tempSpan.getBoundingClientRect().width; + const width = tempSpan.offsetWidth; + const height = tempSpan.offsetHeight; document.body.removeChild(tempSpan); - return width; + return { width, height }; }; return (
@@ -228,7 +231,7 @@ function SignPad({ > {isStamp ? ( - Upload Image + Upload stamp image ) : ( <> @@ -462,7 +465,7 @@ function SignPad({ > Signature: { setSignValue(e.target.value); - convertToImg(); + convertToImg(fontSelect, e.target.value); }} />
@@ -486,7 +489,7 @@ function SignPad({ }} onClick={() => { setFontSelect(font.value); - convertToImg(font.value); + convertToImg(font.value, signValue); }} >
Date: Thu, 4 Jan 2024 16:14:23 +0530 Subject: [PATCH 7/7] fix: text-input signatureissue --- .../src/Component/component/signPad.js | 65 ++++++++++--------- 1 file changed, 36 insertions(+), 29 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index 11b21e935..f4d3d6c2d 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -26,6 +26,7 @@ function SignPad({ const [penColor, setPenColor] = useState("blue"); const allColor = [bluePen, redPen, blackPen]; const canvasRef = useRef(null); + const spanRef = useRef(null); const [isDefaultSign, setIsDefaultSign] = useState(false); const [isTab, setIsTab] = useState("draw"); const [isSignImg, setIsSignImg] = useState(""); @@ -169,43 +170,46 @@ function SignPad({ ? fontSelect : "Fasthand"; - // Calculate the width of the text content - const { width, height } = getTextWidth(textContent, fontfamily); - // Increase pixel ratio for higher resolution - const pixelRatio = window.devicePixelRatio || 1; - // Create a canvas with the calculated width - const canvas = document.createElement("canvas"); - canvas.width = width * 2; - canvas.height = height; - // canvas.height = height; // You can adjust the height as needed - setTextWidth(width); - setTextHeight(25); + //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.display = "hidden"; + document.body.appendChild(span); // Replace 'container' with the ID of the container element + //create canvas to render text in canvas and convert in image + const canvasElement = document.createElement("canvas"); // Draw the text content on the canvas - const context = canvas.getContext("2d"); + const ctx = canvasElement.getContext("2d"); + const pixelRatio = window.devicePixelRatio || 1; + const width = span.offsetWidth; + const height = span.offsetHeight; + setTextWidth(width); + setTextHeight(height); + const font = span.style["font"]; + // Set the canvas dimensions to match the span + canvasElement.width = width * pixelRatio; + canvasElement.height = height * pixelRatio; - context.clearRect(0, 0, canvas.width, canvas.height); - context.scale(pixelRatio, pixelRatio); - context.font = `13px ${fontfamily}`; // You can adjust the font size and style - context.fillText(textContent, 4, 10); // Adjust the y-coordinate as needed + // Render the content of the span onto the canvas + // ctx.fillStyle = "white"; // Set the background color of the canvas + // ctx.fillRect(0, 0, width*pixelRatio, height*pixelRatio); + // You can customize text styles if needed + ctx.font = font; + ctx.fillStyle = "black"; // Set the text color + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.scale(pixelRatio, pixelRatio); + // Draw the content of the span onto the canvas + ctx.fillText(span.textContent, width / 2, height / 2); // Adjust the x,y-coordinate as needed + //remove span tag + document.body.removeChild(span); // Convert the canvas to image data - const dataUrl = canvas.toDataURL("image/png"); + const dataUrl = canvasElement.toDataURL("image/png"); setSignature(dataUrl); }; - //for getting text content width render text in span tag and get width - const getTextWidth = (text, fontfamily) => { - const tempSpan = document.createElement("span"); - tempSpan.innerText = text; - tempSpan.style.visibility = "hidden"; - tempSpan.style.fontFamily = fontfamily; - document.body.appendChild(tempSpan); - const width = tempSpan.offsetWidth; - const height = tempSpan.offsetHeight; - document.body.removeChild(tempSpan); - return { width, height }; - }; return (
{/*isSignPad */} @@ -464,6 +468,7 @@ function SignPad({ }} > Signature: +
+ {/*
nwbfmb
*/}
{fontOptions.map((font, ind) => { return (