diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index b5c76c72c..f0e7980dc 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -524,9 +524,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(); @@ -560,7 +561,8 @@ function PdfRequestFiles() { signKey, signatureImg, imgWH, - isDefaultSign + isDefaultSign, + isTypeText ); const updateSignerData = currentSigner.map((obj, ind) => { diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 02abf989d..d34414077 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -660,10 +660,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(); @@ -684,7 +684,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..f4d3d6c2d 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -26,9 +26,37 @@ 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("signature"); + const [isTab, setIsTab] = useState("draw"); 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" }, + { value: "Cedarville Cursive" }, + { value: "Delicious Handrawn" } + // 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); + setFontSelect("Fasthand"); + }, []); //function for clear signature const handleClear = () => { if (canvasRef.current) { @@ -68,8 +96,13 @@ function SignPad({ setIsSignImg(""); onSaveSign(isDefaultSign); } else { - setIsSignImg(""); - onSaveSign(); + if (isTab === "type") { + setIsSignImg(""); + onSaveSign(false, textWidth, textHeight); + } else { + setIsSignImg(""); + onSaveSign(); + } } setPenColor("blue"); @@ -82,13 +115,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" @@ -100,12 +135,80 @@ 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) { canvasRef.current.fromDataURL(isSignImg); } + if (isTab === "type") { + convertToImg(fontSelect, signValue); + } }, [isTab]); + //function for convert input text value in image + const convertToImg = async (fontStyle, text) => { + //get text content to convert in image + const textContent = text; + const fontfamily = fontStyle + ? fontStyle + : fontSelect + ? fontSelect + : "Fasthand"; + + //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 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; + + // 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 = canvasElement.toDataURL("image/png"); + setSignature(dataUrl); + }; return (
@@ -128,13 +231,11 @@ function SignPad({ justifyContent: "space-around", alignItems: "end", gap: 10 - - // background: themeColor(), }} > {isStamp ? ( - Upload Image + Upload stamp image ) : ( <> @@ -143,22 +244,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 +382,7 @@ function SignPad({ alignItems: "center", marginBottom: 6, cursor: "pointer" + // background:'rgb(255, 255, 255)' }} className="signatureCanvas" > @@ -262,6 +391,7 @@ function SignPad({ style={{ width: "100%", height: "100%", + background: "rgb(255, 255, 255)", objectFit: "contain" }} src={defaultSign} @@ -276,6 +406,7 @@ function SignPad({ +
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 2415e6d99..bc1ef4d7a 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -560,10 +560,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(); @@ -585,7 +586,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..2eb4f834a 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); @@ -123,10 +128,9 @@ } .signatureInput { - padding: 10px; width: 80%; border-radius: 4px; - font-size: 0.75rem; + font-size: 20px; border: 1px solid #e2dddd; color: black; font-family: inherit; @@ -134,10 +138,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 +671,7 @@ option { .fontOptionContainer { border: 1px solid #d6d3d3; - margin: 10px 5px 5px 5px; + margin: 10px 0px 5px 0px; } @@ -784,6 +791,10 @@ option { .mobileHead { display: flex; } + .signatureText{ + margin-right: 5px; + font-size: 12px; + } } @media screen and (max-width:487px) and (min-width:351px) { @@ -808,6 +819,12 @@ option { .mobileHead { display: flex; } + .signTab { + + font-weight: 500 !important; + + font-size: 12px !important; + } } @@ -866,7 +883,7 @@ option { font-weight: 500 !important; - font-size: 10px !important; + font-size: 8px !important; } .uploadImgLogo { diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 2d4ff8706..dec3f024a 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, @@ -767,60 +764,61 @@ export const handleSignYourselfImageResize = ( key, xyPostion, index, - setXyPostion + 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