Skip to content

fix: text size issue after complete signature in mobile view #1413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 4, 2024
Merged

fix: text size issue after complete signature in mobile view #1413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7327860
fix: text size issue after complete signature in mobile view
raktima-opensignlabs Oct 30, 2024
b3252e2
fix: remove blank space from text widgets,fix text size conflict issue
raktima-opensignlabs Nov 4, 2024
c3a14b8
refactor code
raktima-opensignlabs Nov 4, 2024
0d86f39
refactor code
raktima-opensignlabs Nov 4, 2024
8db934a
fix: increase space from bottom in text widgets
raktima-opensignlabs Nov 4, 2024
24ce6ea
fix: remove extra space from bottom after embed text widgets in mobil…
raktima-opensignlabs Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,9 +339,9 @@ function DropdownWidgetOption(props) {
value={
props.fontSize ||
props.currWidgetsDetails?.options?.fontSize ||
"12"
12
}
onChange={(e) => props.setFontSize(e.target.value)}
onChange={(e) => props.setFontSize(parseInt(e.target.value))}
>
{fontsizeArr.map((size, ind) => {
return (
Expand Down
8 changes: 4 additions & 4 deletions apps/OpenSign/src/components/pdf/Placeholder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -412,7 +412,7 @@ function Placeholder(props) {
data?.format,
null,
null,
props.fontSize || props.pos?.options?.fontSize || "12",
props.fontSize || props.pos?.options?.fontSize || 12,
props.fontColor || props.pos?.options?.fontColor || "black"
);
setSelectDate({ date: date, format: data?.format });
Expand Down Expand Up @@ -651,7 +651,7 @@ function Placeholder(props) {
const fontSize = (size || 12) * containerScale * props.scale;
//isMinHeight to set text box minimum height
if (isMinHeight) {
return fontSize * 1.5 + "px";
return fontSize * 1.2 + "px";
} else {
return fontSize + "px";
}
Expand Down Expand Up @@ -948,8 +948,8 @@ function Placeholder(props) {
<span>{t("font-size")} :</span>
<select
className="ml-[3px] md:ml:[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
value={props.fontSize || clickonWidget.options?.fontSize || "12"}
onChange={(e) => props.setFontSize(e.target.value)}
value={props.fontSize || clickonWidget.options?.fontSize || 12}
onChange={(e) => props.setFontSize(parseInt(e.target.value))}
>
{fontsizeArr.map((size, ind) => {
return (
Expand Down
6 changes: 4 additions & 2 deletions apps/OpenSign/src/components/pdf/TextFontSetting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,11 @@ function TextFontSetting(props) {
value={
props.fontSize ||
props.currWidgetsDetails?.options?.fontSize ||
"12"
12
}
onChange={(e) => props.setFontSize(e.target.value)}
onChange={(e) => {
props.setFontSize(parseInt(e.target.value));
}}
>
{fontsizeArr.map((size, ind) => {
return (
Expand Down
4 changes: 2 additions & 2 deletions apps/OpenSign/src/components/pdf/WidgetNameModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,9 +276,9 @@ const WidgetNameModal = (props) => {
<select
className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
value={
props.fontSize || props.defaultdata?.options?.fontSize || "12"
props.fontSize || props.defaultdata?.options?.fontSize || 12
}
onChange={(e) => props.setFontSize(e.target.value)}
onChange={(e) => props.setFontSize(parseInt(e.target.value))}
>
{fontsizeArr.map((size, ind) => {
return (
Expand Down
62 changes: 21 additions & 41 deletions apps/OpenSign/src/constant/Utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,29 +463,29 @@ export const defaultWidthHeight = (type) => {
case "stamp":
return { width: 150, height: 60 };
case "checkbox":
return { width: 15, height: 15 };
return { width: 15, height: 17 };
case textInputWidget:
return { width: 150, height: 25 };
return { width: 150, height: 17 };
case "dropdown":
return { width: 120, height: 22 };
case "initials":
return { width: 50, height: 50 };
case "name":
return { width: 150, height: 25 };
return { width: 150, height: 17 };
case "company":
return { width: 150, height: 25 };
return { width: 150, height: 17 };
case "job title":
return { width: 150, height: 25 };
return { width: 150, height: 17 };
case "date":
return { width: 100, height: 20 };
case "image":
return { width: 70, height: 70 };
case "email":
return { width: 150, height: 20 };
return { width: 150, height: 17 };
case radioButtonWidget:
return { width: 5, height: 10 };
case textWidget:
return { width: 150, height: 25 };
return { width: 150, height: 17 };
default:
return { width: 150, height: 60 };
}
Expand Down Expand Up @@ -1013,7 +1013,7 @@ export const calculateInitialWidthHeight = (widgetData) => {
const intialText = widgetData;
const span = document.createElement("span");
span.textContent = intialText;
span.style.font = `14px`; // here put your text size and font family
span.style.font = `12px`; // here put your text size and font family
span.style.display = "hidden";
document.body.appendChild(span);
const width = span.offsetWidth;
Expand Down Expand Up @@ -1303,16 +1303,6 @@ export const changeImageWH = async (base64Image) => {
});
};

//function to calculate font size of text area widgets
const calculateFontSize = (position, containerScale, signyourself) => {
const font = position?.options?.fontSize || 12;
if (!signyourself && position?.isMobile && position?.scale) {
return font / position?.scale / containerScale;
} else {
return font / containerScale;
}
};

const getWidgetsFontColor = (type) => {
switch (type) {
case "red":
Expand All @@ -1328,14 +1318,7 @@ const getWidgetsFontColor = (type) => {
}
};
//function for embed multiple signature using pdf-lib
export const multiSignEmbed = async (
widgets,
pdfDoc,
signyourself,
scale,
pdfOriginalWH,
containerWH
) => {
export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
// `fontBytes` is used to embed custom font in pdf
const fontBytes = await fileasbytes(
"https://cdn.opensignlabs.com/webfonts/times.ttf"
Expand All @@ -1345,11 +1328,6 @@ export const multiSignEmbed = async (
let hasError = false;
for (let item of widgets) {
if (hasError) break; // Stop the outer loop if an error occurred
const containerScale = getContainerScale(
pdfOriginalWH,
item?.pageNumber,
containerWH
);
const typeExist = item.pos.some((data) => data?.type);
let updateItem;

Expand Down Expand Up @@ -1436,7 +1414,17 @@ export const multiSignEmbed = async (
return y;
}
} else {
return resizePos;
const WidgetsTypeTextExist = [
textWidget,
textInputWidget,
"name",
"company",
"job title",
"date",
"email"
].includes(position.type);
const yPosition = WidgetsTypeTextExist ? resizePos + 6 : resizePos;
return yPosition;
}
};
const color = position?.options?.fontColor;
Expand Down Expand Up @@ -1512,11 +1500,7 @@ export const multiSignEmbed = async (
});
}
} else if (widgetTypeExist) {
const fontSize = calculateFontSize(
position,
containerScale,
signyourself
);
const fontSize = position?.options?.fontSize || 12;
parseInt(fontSize);
let textContent;
if (position?.options?.response) {
Expand Down Expand Up @@ -1549,7 +1533,6 @@ export const multiSignEmbed = async (
lines.push(currentLine.trim());
return lines;
};

// Function to break text into lines based on when user go next line on press enter button
const breakTextIntoLines = (textContent, width) => {
const lines = [];
Expand All @@ -1570,7 +1553,6 @@ export const multiSignEmbed = async (

return lines;
};

//check if text content have `\n` string it means user press enter to go next line and handle condition
//else auto adjust text content according to container width
const lines = isNewOnEnterLineExist
Expand All @@ -1597,7 +1579,6 @@ export const multiSignEmbed = async (
}
} else if (position.type === "dropdown") {
const fontsize = parseInt(position?.options?.fontSize) || 12;

const dropdownRandomId = "dropdown" + randomId();
const dropdown = form.createDropdown(dropdownRandomId);
dropdown.addOptions(position?.options?.values);
Expand Down Expand Up @@ -1696,7 +1677,6 @@ export const multiSignEmbed = async (
}
if (!hasError) {
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
// console.log("pdf", pdfBytes);
return pdfBytes;
} else {
return {
Expand Down
10 changes: 5 additions & 5 deletions apps/OpenSign/src/pages/DraftTemplate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1035,7 +1035,7 @@ const DraftTemplate = () => {
isReadOnly: isReadOnly || false,
isHideLabel: isHideLabel || false,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand Down Expand Up @@ -1073,7 +1073,7 @@ const DraftTemplate = () => {
defaultValue: defaultValue,
isHideLabel: isHideLabel || false,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand All @@ -1091,7 +1091,7 @@ const DraftTemplate = () => {
values: dropdownOptions,
defaultValue: defaultValue,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand Down Expand Up @@ -1166,7 +1166,7 @@ const DraftTemplate = () => {
}
: {},
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand All @@ -1182,7 +1182,7 @@ const DraftTemplate = () => {
status: defaultdata.status,
defaultValue: defaultdata.defaultValue,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand Down
4 changes: 1 addition & 3 deletions apps/OpenSign/src/pages/PdfRequestFiles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -924,9 +924,7 @@ function PdfRequestFiles(props) {
widgets,
pdfDoc,
isSignYourSelfFlow,
scale,
pdfOriginalWH,
containerWH
scale
);
// console.log("pdfte", pdfBytes);
//get ExistUserPtr object id of user class to get tenantDetails
Expand Down
14 changes: 6 additions & 8 deletions apps/OpenSign/src/pages/PlaceHolderSign.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -814,9 +814,7 @@ function PlaceHolderSign() {
placeholder,
pdfDoc,
isSignYourSelfFlow,
scale,
pdfOriginalWH,
containerWH
scale
);
const pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64);
const tenantId = localStorage.getItem("TenantId");
Expand Down Expand Up @@ -1339,7 +1337,7 @@ function PlaceHolderSign() {
isHideLabel: isHideLabel || false,
defaultValue: defaultValue,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand Down Expand Up @@ -1377,7 +1375,7 @@ function PlaceHolderSign() {
isReadOnly: isReadOnly || false,
isHideLabel: isHideLabel || false,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand All @@ -1395,7 +1393,7 @@ function PlaceHolderSign() {
values: dropdownOptions,
defaultValue: defaultValue,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand Down Expand Up @@ -1468,7 +1466,7 @@ function PlaceHolderSign() {
}
: {},
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand All @@ -1484,7 +1482,7 @@ function PlaceHolderSign() {
status: defaultdata.status,
defaultValue: defaultdata.defaultValue,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand Down
Loading