Skip to content

Commit 852a3dc

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
feat: Enable text input signature feature
1 parent 751c7b5 commit 852a3dc

File tree

6 files changed

+246
-107
lines changed

6 files changed

+246
-107
lines changed

‎microfrontends/SignDocuments/src/Component/PdfRequestFiles.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -522,9 +522,10 @@ function PdfRequestFiles() {
522522
};
523523

524524
//function for save button to save signature or image url
525-
const saveSign = (isDefaultSign) => {
525+
const saveSign = (isDefaultSign, width, height) => {
526+
const isTypeText = width && height ? true : false;
526527
const signatureImg = isDefaultSign ? defaultSignImg : signature;
527-
let imgWH = { width: "", height: "" };
528+
let imgWH = { width: width ? width : "", height: height ? height : "" };
528529
setIsSignPad(false);
529530
setIsImageSelect(false);
530531
setImage();
@@ -558,7 +559,8 @@ function PdfRequestFiles() {
558559
signKey,
559560
signatureImg,
560561
imgWH,
561-
isDefaultSign
562+
isDefaultSign,
563+
isTypeText
562564
);
563565

564566
const updateSignerData = currentSigner.map((obj, ind) => {
@@ -885,7 +887,7 @@ function PdfRequestFiles() {
885887
display: "flex",
886888
flexDirection: "row",
887889
alignItems: "center",
888-
padding:"10px 0",
890+
padding: "10px 0",
889891
background: checkSignerBackColor(obj)
890892
}}
891893
key={ind}

‎microfrontends/SignDocuments/src/Component/SignYourselfPdf.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -657,10 +657,10 @@ function SignYourSelf() {
657657
};
658658

659659
//function for save button to save signature or image url
660-
const saveSign = (isDefaultSign) => {
660+
const saveSign = (isDefaultSign, width, height) => {
661+
const isTypeText = width && height ? true : false;
661662
const signatureImg = isDefaultSign ? defaultSignImg : signature;
662-
663-
let imgWH = { width: "", height: "" };
663+
let imgWH = { width: width ? width : "", height: height ? height : "" };
664664
setIsSignPad(false);
665665
setIsImageSelect(false);
666666
setImage();
@@ -681,7 +681,8 @@ function SignYourSelf() {
681681
signKey,
682682
signatureImg,
683683
imgWH,
684-
isDefaultSign
684+
isDefaultSign,
685+
isTypeText
685686
);
686687

687688
setXyPostion(getUpdatePosition);

‎microfrontends/SignDocuments/src/Component/component/signPad.js‎

Lines changed: 163 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,34 @@ function SignPad({
2727
const allColor = [bluePen, redPen, blackPen];
2828
const canvasRef = useRef(null);
2929
const [isDefaultSign, setIsDefaultSign] = useState(false);
30-
const [isTab, setIsTab] = useState("signature");
30+
const [isTab, setIsTab] = useState("draw");
3131
const [isSignImg, setIsSignImg] = useState("");
32+
const [signValue, setSignValue] = useState("");
33+
const [textWidth, setTextWidth] = useState(null);
34+
const fontOptions = [
35+
{ value: "Lucida Handwriting" },
36+
{ value: "Segoe Script" },
37+
{ value: "Harrington" },
38+
{ value: "cursive" }
39+
40+
// Add more font options as needed
41+
];
42+
const [fontSelect, setFontSelect] = useState(fontOptions[0].value);
43+
44+
useEffect(() => {
45+
const senderUser =
46+
localStorage.getItem(
47+
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
48+
) &&
49+
localStorage.getItem(
50+
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
51+
);
52+
const jsonSender = JSON.parse(senderUser);
53+
54+
const currentUserName = jsonSender && jsonSender.name;
55+
//function for clear signature
56+
setSignValue(currentUserName);
57+
}, []);
3258
//function for clear signature
3359
const handleClear = () => {
3460
if (canvasRef.current) {
@@ -68,8 +94,13 @@ function SignPad({
6894
setIsSignImg("");
6995
onSaveSign(isDefaultSign);
7096
} else {
71-
setIsSignImg("");
72-
onSaveSign();
97+
if (isTab === "type") {
98+
setIsSignImg("");
99+
onSaveSign(false, textWidth, 30);
100+
} else {
101+
setIsSignImg("");
102+
onSaveSign();
103+
}
73104
}
74105

75106
setPenColor("blue");
@@ -82,13 +113,15 @@ function SignPad({
82113
setIsImageSelect(false);
83114
setIsDefaultSign(false);
84115
setImage();
85-
setIsTab("signature");
116+
setIsTab("draw");
86117
}}
87118
style={{
88119
background: themeColor(),
89120
color: "white"
90121
}}
91-
disabled={isSignImg || image || isDefaultSign ? false : true}
122+
disabled={
123+
isSignImg || image || isDefaultSign || textWidth ? false : true
124+
}
92125
type="button"
93126
className={
94127
isSignImg || image ? "finishBtn saveBtn" : "disabledFinish saveBtn"
@@ -105,8 +138,46 @@ function SignPad({
105138
if (canvasRef.current) {
106139
canvasRef.current.fromDataURL(isSignImg);
107140
}
141+
if (isTab === "type") {
142+
convertToImg();
143+
}
108144
}, [isTab]);
145+
//function for convert input text value in image
146+
const convertToImg = async () => {
147+
//get text content to convert in image
148+
const textContent = signValue;
149+
// Calculate the width of the text content
150+
const textWidth = getTextWidth(textContent);
151+
// Increase pixel ratio for higher resolution
152+
const pixelRatio = window.devicePixelRatio || 1;
153+
154+
// Create a canvas with the calculated width
155+
const canvas = document.createElement("canvas");
156+
canvas.width = textWidth * pixelRatio + 20 * pixelRatio;
157+
canvas.height = 20 * pixelRatio; // You can adjust the height as needed
158+
setTextWidth(textWidth * pixelRatio);
159+
// Draw the text content on the canvas
160+
const context = canvas.getContext("2d");
161+
context.scale(pixelRatio, pixelRatio);
162+
context.font = `13px ${fontSelect}`; // You can adjust the font size and style
163+
context.fillText(textContent, 0, 10); // Adjust the y-coordinate as needed
109164

165+
// Convert the canvas to image data
166+
const dataUrl = canvas.toDataURL("image/png");
167+
168+
setSignature(dataUrl);
169+
};
170+
171+
//for getting text content width render text in span tag and get width
172+
const getTextWidth = (text) => {
173+
const tempSpan = document.createElement("span");
174+
tempSpan.innerText = text;
175+
tempSpan.style.visibility = "hidden";
176+
document.body.appendChild(tempSpan);
177+
const width = tempSpan.offsetWidth;
178+
document.body.removeChild(tempSpan);
179+
return width;
180+
};
110181
return (
111182
<div>
112183
{/*isSignPad */}
@@ -143,22 +214,23 @@ function SignPad({
143214
onClick={() => {
144215
setIsDefaultSign(false);
145216
setIsImageSelect(false);
146-
setIsTab("signature");
217+
setIsTab("draw");
147218
setImage();
148219
}}
149220
style={{
150-
color: isTab === "signature" ? themeColor() : "#515252",
221+
color: isTab === "draw" ? themeColor() : "#515252",
222+
151223
marginLeft: "2px"
152224
}}
153225
className="signTab"
154226
>
155-
Signature
227+
Draw
156228
</span>
157229

158230
<div
159231
style={{
160232
border:
161-
isTab === "signature"
233+
isTab === "draw"
162234
? "1.5px solid #108783"
163235
: "1.5px solid #ffffff"
164236
}}
@@ -187,7 +259,33 @@ function SignPad({
187259
}}
188260
></div>
189261
</div>
262+
<div>
263+
<span
264+
onClick={() => {
265+
setIsDefaultSign(false);
266+
setIsImageSelect(false);
267+
setIsTab("type");
268+
setImage();
269+
}}
270+
style={{
271+
color: isTab === "type" ? themeColor() : "#515252",
272+
273+
marginLeft: "2px"
274+
}}
275+
className="signTab"
276+
>
277+
Type
278+
</span>
190279

280+
<div
281+
style={{
282+
border:
283+
isTab === "type"
284+
? "1.5px solid #108783"
285+
: "1.5px solid #ffffff"
286+
}}
287+
></div>
288+
</div>
191289
{defaultSign && (
192290
<div>
193291
<span
@@ -234,7 +332,7 @@ function SignPad({
234332
setIsImageSelect(false);
235333
setIsDefaultSign(false);
236334
setImage();
237-
setIsTab("signature");
335+
setIsTab("draw");
238336
}}
239337
>
240338
X
@@ -254,6 +352,7 @@ function SignPad({
254352
alignItems: "center",
255353
marginBottom: 6,
256354
cursor: "pointer"
355+
// background:'rgb(255, 255, 255)'
257356
}}
258357
className="signatureCanvas"
259358
>
@@ -262,6 +361,7 @@ function SignPad({
262361
style={{
263362
width: "100%",
264363
height: "100%",
364+
background: "rgb(255, 255, 255)",
265365
objectFit: "contain"
266366
}}
267367
src={defaultSign}
@@ -276,6 +376,7 @@ function SignPad({
276376
<div
277377
style={{
278378
border: "1px solid black",
379+
279380
display: "flex",
280381
flexDirection: "column",
281382
justifyContent: "center",
@@ -293,6 +394,7 @@ function SignPad({
293394
accept="image/*"
294395
ref={imageRef}
295396
hidden
397+
// style={{ display: "none" }}
296398
/>
297399
<i className="fas fa-cloud-upload-alt uploadImgLogo"></i>
298400
<div className="uploadImg">Upload</div>
@@ -301,32 +403,71 @@ function SignPad({
301403
<>
302404
<div
303405
style={{
406+
// position: "relative",
407+
304408
border: "1px solid black",
305-
display: "flex",
306-
flexDirection: "column",
307-
justifyContent: "center",
308-
alignItems: "center",
309409
marginBottom: 6,
310-
cursor: "pointer"
410+
// justifyContent:"center"
411+
overflow: "hidden"
311412
}}
312413
className="signatureCanvas"
313414
>
314415
<img
315-
alt="stamp img"
416+
alt="print img"
417+
ref={imageRef}
418+
// alt="preview image"
419+
src={image.src}
316420
style={{
317-
width: "100%",
318-
height: "100%",
421+
//overflow:"hidden",
319422
objectFit: "contain"
320423
}}
321-
ref={imageRef}
322-
src={image.src}
323424
/>
324425
</div>
325426
<div style={{ display: "flex", justifyContent: "flex-end" }}>
326427
<SaveBtn />
327428
</div>
328429
</>
329430
)
431+
) : isTab === "type" ? (
432+
<div>
433+
<div style={{ display: "flex", justifyContent: "space-between" }}>
434+
<span>Signature: </span>
435+
<input
436+
style={{ fontFamily: fontSelect }}
437+
type="text"
438+
className="signatureInput"
439+
placeholder="Your signature"
440+
value={signValue}
441+
onChange={(e) => {
442+
setSignValue(e.target.value);
443+
convertToImg();
444+
}}
445+
/>
446+
</div>
447+
<div className="fontOptionContainer">
448+
{fontOptions.map((font, ind) => {
449+
return (
450+
<div
451+
key={ind}
452+
style={{
453+
fontFamily: font.value,
454+
backgroundColor:
455+
fontSelect === font.value && "rgb(206 225 247)"
456+
}}
457+
onClick={() => setFontSelect(font.value)}
458+
>
459+
<div style={{ padding: "5px 10px 5px 10px" }}>
460+
{signValue ? signValue : "Your signature"}
461+
</div>
462+
</div>
463+
);
464+
})}
465+
</div>
466+
467+
<div style={{ display: "flex", justifyContent: "flex-end" }}>
468+
<SaveBtn />
469+
</div>
470+
</div>
330471
) : (
331472
<>
332473
<SignatureCanvas
@@ -381,9 +522,11 @@ function SignPad({
381522
width={20}
382523
height={20}
383524
/>
525+
// </button>
384526
);
385527
})}
386528
</div>
529+
387530
<SaveBtn />
388531
</div>
389532
</>

‎microfrontends/SignDocuments/src/Component/recipientSignPdf.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -555,10 +555,11 @@ function EmbedPdfImage() {
555555
};
556556

557557
//function for save button to save signature or image url
558-
const saveSign = (isDefaultSign) => {
558+
const saveSign = (isDefaultSign, width, height) => {
559+
const isTypeText = width && height ? true : false;
559560
const signatureImg = isDefaultSign ? defaultSignImg : signature;
560-
const signFlag = true;
561-
let imgWH = { width: "", height: "" };
561+
562+
let imgWH = { width: width ? width : "", height: height ? height : "" };
562563
setIsSignPad(false);
563564
setIsImageSelect(false);
564565
setImage();
@@ -580,7 +581,7 @@ function EmbedPdfImage() {
580581
signatureImg,
581582
imgWH,
582583
isDefaultSign,
583-
signFlag
584+
isTypeText
584585
);
585586

586587
if (getUpdatePosition) {

0 commit comments

Comments
 (0)