Skip to content

Commit

Permalink
Merge pull request #1413 from OpenSignLabs/raktima-patch-9
Browse files Browse the repository at this point in the history 
fix: text size issue after complete signature in mobile view
  • Loading branch information
@prafull-opensignlabs
prafull-opensignlabs authored Nov 4, 2024
2 parents dc90d41 + 24ce6ea commit 6146fe5
Show file tree
Hide file tree
Showing 10 changed files with 55 additions and 86 deletions.
4 changes: 2 additions & 2 deletions apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
View file
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
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
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
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -1030,7 +1030,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 @@ -1068,7 +1068,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 @@ -1086,7 +1086,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 @@ -1161,7 +1161,7 @@ const DraftTemplate = () => {
}
: {},
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand All @@ -1177,7 +1177,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
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
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 @@ -1340,7 +1338,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 @@ -1378,7 +1376,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 @@ -1396,7 +1394,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 @@ -1469,7 +1467,7 @@ function PlaceHolderSign() {
}
: {},
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
Expand All @@ -1485,7 +1483,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

0 comments on commit 6146fe5

Please sign in to comment.