Skip to content

Commit 6146fe5

Browse files
Merge pull request #1413 from OpenSignLabs/raktima-patch-9
fix: text size issue after complete signature in mobile view
2 parents dc90d41 + 24ce6ea commit 6146fe5

File tree

10 files changed

+55
-86
lines changed

10 files changed

+55
-86
lines changed

apps/OpenSign/src/components/pdf/DropdownWidgetOption.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -339,9 +339,9 @@ function DropdownWidgetOption(props) {
339339
value={
340340
props.fontSize ||
341341
props.currWidgetsDetails?.options?.fontSize ||
342-
"12"
342+
12
343343
}
344-
onChange={(e) => props.setFontSize(e.target.value)}
344+
onChange={(e) => props.setFontSize(parseInt(e.target.value))}
345345
>
346346
{fontsizeArr.map((size, ind) => {
347347
return (

apps/OpenSign/src/components/pdf/Placeholder.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,7 @@ function Placeholder(props) {
412412
data?.format,
413413
null,
414414
null,
415-
props.fontSize || props.pos?.options?.fontSize || "12",
415+
props.fontSize || props.pos?.options?.fontSize || 12,
416416
props.fontColor || props.pos?.options?.fontColor || "black"
417417
);
418418
setSelectDate({ date: date, format: data?.format });
@@ -651,7 +651,7 @@ function Placeholder(props) {
651651
const fontSize = (size || 12) * containerScale * props.scale;
652652
//isMinHeight to set text box minimum height
653653
if (isMinHeight) {
654-
return fontSize * 1.5 + "px";
654+
return fontSize * 1.2 + "px";
655655
} else {
656656
return fontSize + "px";
657657
}
@@ -948,8 +948,8 @@ function Placeholder(props) {
948948
<span>{t("font-size")} :</span>
949949
<select
950950
className="ml-[3px] md:ml:[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
951-
value={props.fontSize || clickonWidget.options?.fontSize || "12"}
952-
onChange={(e) => props.setFontSize(e.target.value)}
951+
value={props.fontSize || clickonWidget.options?.fontSize || 12}
952+
onChange={(e) => props.setFontSize(parseInt(e.target.value))}
953953
>
954954
{fontsizeArr.map((size, ind) => {
955955
return (

apps/OpenSign/src/components/pdf/TextFontSetting.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@ function TextFontSetting(props) {
2121
value={
2222
props.fontSize ||
2323
props.currWidgetsDetails?.options?.fontSize ||
24-
"12"
24+
12
2525
}
26-
onChange={(e) => props.setFontSize(e.target.value)}
26+
onChange={(e) => {
27+
props.setFontSize(parseInt(e.target.value));
28+
}}
2729
>
2830
{fontsizeArr.map((size, ind) => {
2931
return (

apps/OpenSign/src/components/pdf/WidgetNameModal.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -276,9 +276,9 @@ const WidgetNameModal = (props) => {
276276
<select
277277
className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
278278
value={
279-
props.fontSize || props.defaultdata?.options?.fontSize || "12"
279+
props.fontSize || props.defaultdata?.options?.fontSize || 12
280280
}
281-
onChange={(e) => props.setFontSize(e.target.value)}
281+
onChange={(e) => props.setFontSize(parseInt(e.target.value))}
282282
>
283283
{fontsizeArr.map((size, ind) => {
284284
return (

apps/OpenSign/src/constant/Utils.js

Lines changed: 21 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -463,29 +463,29 @@ export const defaultWidthHeight = (type) => {
463463
case "stamp":
464464
return { width: 150, height: 60 };
465465
case "checkbox":
466-
return { width: 15, height: 15 };
466+
return { width: 15, height: 17 };
467467
case textInputWidget:
468-
return { width: 150, height: 25 };
468+
return { width: 150, height: 17 };
469469
case "dropdown":
470470
return { width: 120, height: 22 };
471471
case "initials":
472472
return { width: 50, height: 50 };
473473
case "name":
474-
return { width: 150, height: 25 };
474+
return { width: 150, height: 17 };
475475
case "company":
476-
return { width: 150, height: 25 };
476+
return { width: 150, height: 17 };
477477
case "job title":
478-
return { width: 150, height: 25 };
478+
return { width: 150, height: 17 };
479479
case "date":
480480
return { width: 100, height: 20 };
481481
case "image":
482482
return { width: 70, height: 70 };
483483
case "email":
484-
return { width: 150, height: 20 };
484+
return { width: 150, height: 17 };
485485
case radioButtonWidget:
486486
return { width: 5, height: 10 };
487487
case textWidget:
488-
return { width: 150, height: 25 };
488+
return { width: 150, height: 17 };
489489
default:
490490
return { width: 150, height: 60 };
491491
}
@@ -1013,7 +1013,7 @@ export const calculateInitialWidthHeight = (widgetData) => {
10131013
const intialText = widgetData;
10141014
const span = document.createElement("span");
10151015
span.textContent = intialText;
1016-
span.style.font = `14px`; // here put your text size and font family
1016+
span.style.font = `12px`; // here put your text size and font family
10171017
span.style.display = "hidden";
10181018
document.body.appendChild(span);
10191019
const width = span.offsetWidth;
@@ -1303,16 +1303,6 @@ export const changeImageWH = async (base64Image) => {
13031303
});
13041304
};
13051305

1306-
//function to calculate font size of text area widgets
1307-
const calculateFontSize = (position, containerScale, signyourself) => {
1308-
const font = position?.options?.fontSize || 12;
1309-
if (!signyourself && position?.isMobile && position?.scale) {
1310-
return font / position?.scale / containerScale;
1311-
} else {
1312-
return font / containerScale;
1313-
}
1314-
};
1315-
13161306
const getWidgetsFontColor = (type) => {
13171307
switch (type) {
13181308
case "red":
@@ -1328,14 +1318,7 @@ const getWidgetsFontColor = (type) => {
13281318
}
13291319
};
13301320
//function for embed multiple signature using pdf-lib
1331-
export const multiSignEmbed = async (
1332-
widgets,
1333-
pdfDoc,
1334-
signyourself,
1335-
scale,
1336-
pdfOriginalWH,
1337-
containerWH
1338-
) => {
1321+
export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
13391322
// `fontBytes` is used to embed custom font in pdf
13401323
const fontBytes = await fileasbytes(
13411324
"https://cdn.opensignlabs.com/webfonts/times.ttf"
@@ -1345,11 +1328,6 @@ export const multiSignEmbed = async (
13451328
let hasError = false;
13461329
for (let item of widgets) {
13471330
if (hasError) break; // Stop the outer loop if an error occurred
1348-
const containerScale = getContainerScale(
1349-
pdfOriginalWH,
1350-
item?.pageNumber,
1351-
containerWH
1352-
);
13531331
const typeExist = item.pos.some((data) => data?.type);
13541332
let updateItem;
13551333

@@ -1436,7 +1414,17 @@ export const multiSignEmbed = async (
14361414
return y;
14371415
}
14381416
} else {
1439-
return resizePos;
1417+
const WidgetsTypeTextExist = [
1418+
textWidget,
1419+
textInputWidget,
1420+
"name",
1421+
"company",
1422+
"job title",
1423+
"date",
1424+
"email"
1425+
].includes(position.type);
1426+
const yPosition = WidgetsTypeTextExist ? resizePos + 6 : resizePos;
1427+
return yPosition;
14401428
}
14411429
};
14421430
const color = position?.options?.fontColor;
@@ -1512,11 +1500,7 @@ export const multiSignEmbed = async (
15121500
});
15131501
}
15141502
} else if (widgetTypeExist) {
1515-
const fontSize = calculateFontSize(
1516-
position,
1517-
containerScale,
1518-
signyourself
1519-
);
1503+
const fontSize = position?.options?.fontSize || 12;
15201504
parseInt(fontSize);
15211505
let textContent;
15221506
if (position?.options?.response) {
@@ -1549,7 +1533,6 @@ export const multiSignEmbed = async (
15491533
lines.push(currentLine.trim());
15501534
return lines;
15511535
};
1552-
15531536
// Function to break text into lines based on when user go next line on press enter button
15541537
const breakTextIntoLines = (textContent, width) => {
15551538
const lines = [];
@@ -1570,7 +1553,6 @@ export const multiSignEmbed = async (
15701553

15711554
return lines;
15721555
};
1573-
15741556
//check if text content have `\n` string it means user press enter to go next line and handle condition
15751557
//else auto adjust text content according to container width
15761558
const lines = isNewOnEnterLineExist
@@ -1597,7 +1579,6 @@ export const multiSignEmbed = async (
15971579
}
15981580
} else if (position.type === "dropdown") {
15991581
const fontsize = parseInt(position?.options?.fontSize) || 12;
1600-
16011582
const dropdownRandomId = "dropdown" + randomId();
16021583
const dropdown = form.createDropdown(dropdownRandomId);
16031584
dropdown.addOptions(position?.options?.values);
@@ -1696,7 +1677,6 @@ export const multiSignEmbed = async (
16961677
}
16971678
if (!hasError) {
16981679
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
1699-
// console.log("pdf", pdfBytes);
17001680
return pdfBytes;
17011681
} else {
17021682
return {

apps/OpenSign/src/pages/DraftTemplate.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1030,7 +1030,7 @@ const DraftTemplate = () => {
10301030
isReadOnly: isReadOnly || false,
10311031
isHideLabel: isHideLabel || false,
10321032
fontSize:
1033-
fontSize || currWidgetsDetails?.options?.fontSize || "12",
1033+
fontSize || currWidgetsDetails?.options?.fontSize || 12,
10341034
fontColor:
10351035
fontColor ||
10361036
currWidgetsDetails?.options?.fontColor ||
@@ -1068,7 +1068,7 @@ const DraftTemplate = () => {
10681068
defaultValue: defaultValue,
10691069
isHideLabel: isHideLabel || false,
10701070
fontSize:
1071-
fontSize || currWidgetsDetails?.options?.fontSize || "12",
1071+
fontSize || currWidgetsDetails?.options?.fontSize || 12,
10721072
fontColor:
10731073
fontColor ||
10741074
currWidgetsDetails?.options?.fontColor ||
@@ -1086,7 +1086,7 @@ const DraftTemplate = () => {
10861086
values: dropdownOptions,
10871087
defaultValue: defaultValue,
10881088
fontSize:
1089-
fontSize || currWidgetsDetails?.options?.fontSize || "12",
1089+
fontSize || currWidgetsDetails?.options?.fontSize || 12,
10901090
fontColor:
10911091
fontColor ||
10921092
currWidgetsDetails?.options?.fontColor ||
@@ -1161,7 +1161,7 @@ const DraftTemplate = () => {
11611161
}
11621162
: {},
11631163
fontSize:
1164-
fontSize || currWidgetsDetails?.options?.fontSize || "12",
1164+
fontSize || currWidgetsDetails?.options?.fontSize || 12,
11651165
fontColor:
11661166
fontColor ||
11671167
currWidgetsDetails?.options?.fontColor ||
@@ -1177,7 +1177,7 @@ const DraftTemplate = () => {
11771177
status: defaultdata.status,
11781178
defaultValue: defaultdata.defaultValue,
11791179
fontSize:
1180-
fontSize || currWidgetsDetails?.options?.fontSize || "12",
1180+
fontSize || currWidgetsDetails?.options?.fontSize || 12,
11811181
fontColor:
11821182
fontColor ||
11831183
currWidgetsDetails?.options?.fontColor ||

apps/OpenSign/src/pages/PdfRequestFiles.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -924,9 +924,7 @@ function PdfRequestFiles(props) {
924924
widgets,
925925
pdfDoc,
926926
isSignYourSelfFlow,
927-
scale,
928-
pdfOriginalWH,
929-
containerWH
927+
scale
930928
);
931929
// console.log("pdfte", pdfBytes);
932930
//get ExistUserPtr object id of user class to get tenantDetails

apps/OpenSign/src/pages/PlaceHolderSign.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -814,9 +814,7 @@ function PlaceHolderSign() {
814814
placeholder,
815815
pdfDoc,
816816
isSignYourSelfFlow,
817-
scale,
818-
pdfOriginalWH,
819-
containerWH
817+
scale
820818
);
821819
const pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64);
822820
const tenantId = localStorage.getItem("TenantId");
@@ -1340,7 +1338,7 @@ function PlaceHolderSign() {
13401338
isHideLabel: isHideLabel || false,
13411339
defaultValue: defaultValue,
13421340
fontSize:
1343-
fontSize || currWidgetsDetails?.options?.fontSize || "12",
1341+
fontSize || currWidgetsDetails?.options?.fontSize || 12,
13441342
fontColor:
13451343
fontColor ||
13461344
currWidgetsDetails?.options?.fontColor ||
@@ -1378,7 +1376,7 @@ function PlaceHolderSign() {
13781376
isReadOnly: isReadOnly || false,
13791377
isHideLabel: isHideLabel || false,
13801378
fontSize:
1381-
fontSize || currWidgetsDetails?.options?.fontSize || "12",
1379+
fontSize || currWidgetsDetails?.options?.fontSize || 12,
13821380
fontColor:
13831381
fontColor ||
13841382
currWidgetsDetails?.options?.fontColor ||
@@ -1396,7 +1394,7 @@ function PlaceHolderSign() {
13961394
values: dropdownOptions,
13971395
defaultValue: defaultValue,
13981396
fontSize:
1399-
fontSize || currWidgetsDetails?.options?.fontSize || "12",
1397+
fontSize || currWidgetsDetails?.options?.fontSize || 12,
14001398
fontColor:
14011399
fontColor ||
14021400
currWidgetsDetails?.options?.fontColor ||
@@ -1469,7 +1467,7 @@ function PlaceHolderSign() {
14691467
}
14701468
: {},
14711469
fontSize:
1472-
fontSize || currWidgetsDetails?.options?.fontSize || "12",
1470+
fontSize || currWidgetsDetails?.options?.fontSize || 12,
14731471
fontColor:
14741472
fontColor ||
14751473
currWidgetsDetails?.options?.fontColor ||
@@ -1485,7 +1483,7 @@ function PlaceHolderSign() {
14851483
status: defaultdata.status,
14861484
defaultValue: defaultdata.defaultValue,
14871485
fontSize:
1488-
fontSize || currWidgetsDetails?.options?.fontSize || "12",
1486+
fontSize || currWidgetsDetails?.options?.fontSize || 12,
14891487
fontColor:
14901488
fontColor ||
14911489
currWidgetsDetails?.options?.fontColor ||

0 commit comments

Comments
 (0)