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")}`; }; - -