Skip to content

Commit 0f515ba

Browse files
prafull-opensignlabsprafull-opensignlabs
authored
Merge pull request #963 from OpenSignLabs/raktima-opensignlabs-patch-11
fix: text widget font size issue in large PDF documents
2 parents 5fb28fe + 76a11f6 commit 0f515ba

File tree

11 files changed

+127
-80
lines changed

11 files changed

+127
-80
lines changed

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import PlaceholderBorder from "./PlaceholderBorder";
44
import { Rnd } from "react-rnd";
55
import {
66
defaultWidthHeight,
7+
getContainerScale,
78
handleCopyNextToWidget,
89
isTabAndMobile,
910
onChangeInput,
@@ -634,10 +635,11 @@ function Placeholder(props) {
634635
);
635636
};
636637
const xPos = (pos, signYourself) => {
637-
const getPdfPageWidth = props.pdfOriginalWH.find(
638-
(data) => data.pageNumber === props.pageNumber
638+
const containerScale = getContainerScale(
639+
props.pdfOriginalWH,
640+
props.pageNumber,
641+
props.containerWH
639642
);
640-
const containerScale = props.containerWH.width / getPdfPageWidth?.width;
641643
const resizePos = pos.xPosition;
642644
if (signYourself) {
643645
return resizePos * containerScale * props.scale;
@@ -659,10 +661,11 @@ function Placeholder(props) {
659661
}
660662
};
661663
const yPos = (pos, signYourself) => {
662-
const getPdfPageWidth = props.pdfOriginalWH.find(
663-
(data) => data.pageNumber === props.pageNumber
664+
const containerScale = getContainerScale(
665+
props.pdfOriginalWH,
666+
props.pageNumber,
667+
props.containerWH
664668
);
665-
const containerScale = props.containerWH.width / getPdfPageWidth.width;
666669
const resizePos = pos.yPosition;
667670

668671
if (signYourself) {

‎apps/OpenSign/src/components/pdf/PlaceholderBorder.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,11 @@ function PlaceholderBorder(props) {
4747
onTouchEnd={() =>
4848
props.pos.type === textWidget && props?.setDraggingEnabled(true)
4949
}
50-
className="absolute inline-block w-[14px] h-[14px] hover:cursor-sw-resize"
50+
className="absolute inline-block w-[14px] h-[14px] border-[0.2px] overflow-hidden border-dashed"
5151
style={{
5252
borderColor: themeColor,
53-
borderStyle: "dashed",
5453
minWidth: handleMinWidth() || 0,
55-
minHeight: handleMinHeight() || 0,
56-
borderWidth: "0.2px",
57-
overflow: "hidden"
54+
minHeight: handleMinHeight() || 0
5855
}}
5956
></div>
6057
);

‎apps/OpenSign/src/components/pdf/PlaceholderType.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,7 @@ function PlaceholderType(props) {
140140

141141
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
142142
<div
143-
className={`${selectWidgetCls} overflow-hidden`}
144-
style={{ fontSize: calculateFontSize() }}
143+
className={`${selectWidgetCls} text-[12px] overflow-hidden`}
145144
onClick={onClick}
146145
ref={ref}
147146
>
@@ -172,12 +171,6 @@ function PlaceholderType(props) {
172171
}
173172
// eslint-disable-next-line react-hooks/exhaustive-deps
174173
}, [type]);
175-
176-
const calculateFontSize = () => {
177-
const fontSize = 10 + Math.min(props.pos.Width, props.pos.Height) * 0.1;
178-
const size = fontSize ? fontSize : 12;
179-
return size + "px";
180-
};
181174
//function for show checked checkbox
182175
const selectCheckbox = (ind) => {
183176
const res = props.pos.options?.response;
@@ -427,7 +420,8 @@ function PlaceholderType(props) {
427420
fontSize: props.pos.options?.fontSize
428421
? props.pos.options?.fontSize + "px"
429422
: "12px",
430-
color: props.pos.options?.fontColor || "black"
423+
color: props.pos.options?.fontColor || "black",
424+
overflow: "hidden"
431425
}}
432426
>
433427
<span>{type}</span>
@@ -466,10 +460,7 @@ function PlaceholderType(props) {
466460
})}
467461
</select>
468462
) : (
469-
<div
470-
className={selectWidgetCls}
471-
style={{ fontSize: calculateFontSize() }}
472-
>
463+
<div className="text-[12px] overflow-hidden">
473464
{props.pos?.options?.name ? props.pos.options.name : type}
474465
</div>
475466
);
@@ -528,7 +519,9 @@ function PlaceholderType(props) {
528519
fontSize: props.pos.options?.fontSize
529520
? props.pos.options?.fontSize + "px"
530521
: "12px",
531-
color: props.pos.options?.fontColor || "black"
522+
color: props.pos.options?.fontColor || "black",
523+
fontFamily: "Arial, sans-serif",
524+
overflow: "hidden"
532525
}}
533526
>
534527
<span>{type}</span>
@@ -570,7 +563,9 @@ function PlaceholderType(props) {
570563
fontSize: props.pos.options?.fontSize
571564
? props.pos.options?.fontSize + "px"
572565
: "12px",
573-
color: props.pos.options?.fontColor || "black"
566+
color: props.pos.options?.fontColor || "black",
567+
overflow: "hidden",
568+
fontFamily: "Arial, sans-serif"
574569
}}
575570
>
576571
<span>{type}</span>
@@ -612,7 +607,9 @@ function PlaceholderType(props) {
612607
fontSize: props.pos.options?.fontSize
613608
? props.pos.options?.fontSize + "px"
614609
: "12px",
615-
color: props.pos.options?.fontColor || "black"
610+
color: props.pos.options?.fontColor || "black",
611+
fontFamily: "Arial, sans-serif",
612+
overflow: "hidden"
616613
}}
617614
>
618615
<span>{type}</span>
@@ -678,7 +675,7 @@ function PlaceholderType(props) {
678675
/>
679676
</div>
680677
) : (
681-
<div className="text-[12px] text-black uppercase items-center">
678+
<div className="text-[12px] text-black items-center overflow-hidden">
682679
<span>
683680
{props.selectDate
684681
? props.selectDate?.format
@@ -733,7 +730,8 @@ function PlaceholderType(props) {
733730
fontSize: props.pos.options?.fontSize
734731
? props.pos.options?.fontSize + "px"
735732
: "12px",
736-
color: props.pos.options?.fontColor || "black"
733+
color: props.pos.options?.fontColor || "black",
734+
fontFamily: "Arial, sans-serif"
737735
}}
738736
cols="50"
739737
/>
@@ -743,7 +741,9 @@ function PlaceholderType(props) {
743741
fontSize: props.pos.options?.fontSize
744742
? props.pos.options?.fontSize + "px"
745743
: "12px",
746-
color: props.pos.options?.fontColor || "black"
744+
color: props.pos.options?.fontColor || "black",
745+
fontFamily: "Arial, sans-serif",
746+
overflow: "hidden"
747747
}}
748748
>
749749
<span>{type}</span>
@@ -802,6 +802,7 @@ function PlaceholderType(props) {
802802
}}
803803
className={textWidgetCls}
804804
style={{
805+
fontFamily: "Arial, sans-serif",
805806
fontSize: props.pos.options?.fontSize
806807
? props.pos.options?.fontSize + "px"
807808
: "12px",

‎apps/OpenSign/src/components/pdf/RenderPdf.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import RSC from "react-scrollbars-custom";
33
import { Document, Page } from "react-pdf";
44
import {
55
defaultWidthHeight,
6+
getContainerScale,
67
handleImageResize,
78
handleSignYourselfImageResize
89
} from "../../constant/Utils";
@@ -68,10 +69,11 @@ function RenderPdf({
6869

6970
// handle signature block width and height according to screen
7071
const posWidth = (pos, signYourself) => {
71-
const getPdfPageWidth = pdfOriginalWH.find(
72-
(data) => data.pageNumber === pageNumber
72+
const containerScale = getContainerScale(
73+
pdfOriginalWH,
74+
pageNumber,
75+
containerWH
7376
);
74-
const containerScale = containerWH.width / getPdfPageWidth.width || 1;
7577
const defaultWidth = defaultWidthHeight(pos.type).width;
7678
const posWidth = pos.Width ? pos.Width : defaultWidth;
7779
if (signYourself) {
@@ -97,11 +99,11 @@ function RenderPdf({
9799
}
98100
};
99101
const posHeight = (pos, signYourself) => {
100-
const getPdfPageWidth = pdfOriginalWH.find(
101-
(data) => data.pageNumber === pageNumber
102+
const containerScale = getContainerScale(
103+
pdfOriginalWH,
104+
pageNumber,
105+
containerWH
102106
);
103-
const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
104-
105107
const posHeight = pos.Height || defaultWidthHeight(pos.type).height;
106108
if (signYourself) {
107109
return posHeight * scale * containerScale;

‎apps/OpenSign/src/constant/Utils.js‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { appInfo } from "./appinfo";
77
import { saveAs } from "file-saver";
88
import printModule from "print-js";
99

10-
export const fontsizeArr = [7, 8, 9, 10, 11, 12, 13, 14, 15, 18];
10+
export const fontsizeArr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28];
1111
export const fontColorArr = ["red", "black", "blue", "yellow"];
1212
export const isMobile = window.innerWidth < 767;
1313
export const isTabAndMobile = window.innerWidth < 1023;
@@ -1249,14 +1249,30 @@ export const changeImageWH = async (base64Image) => {
12491249
});
12501250
};
12511251

1252+
//function to calculate font size of text area widgets
1253+
const calculateFontSize = (position, containerScale, signyourself) => {
1254+
const font = position?.options?.fontSize || 12;
1255+
if (!signyourself && position?.isMobile && position?.scale) {
1256+
return font / position?.scale / containerScale;
1257+
} else {
1258+
return font / containerScale;
1259+
}
1260+
};
12521261
//function for embed multiple signature using pdf-lib
12531262
export const multiSignEmbed = async (
12541263
xyPositionArray,
12551264
pdfDoc,
12561265
signyourself,
1257-
scale
1266+
scale,
1267+
pdfOriginalWH,
1268+
containerWH
12581269
) => {
12591270
for (let item of xyPositionArray) {
1271+
const containerScale = getContainerScale(
1272+
pdfOriginalWH,
1273+
item?.pageNumber,
1274+
containerWH
1275+
);
12601276
const typeExist = item.pos.some((data) => data?.type);
12611277
let updateItem;
12621278

@@ -1416,7 +1432,13 @@ export const multiSignEmbed = async (
14161432
}
14171433
} else if (widgetTypeExist) {
14181434
const font = await pdfDoc.embedFont("Helvetica");
1419-
const fontSize = parseInt(position?.options?.fontSize) || 12;
1435+
const fontSize = calculateFontSize(
1436+
position,
1437+
containerScale,
1438+
signyourself
1439+
);
1440+
parseInt(fontSize);
1441+
14201442
const color = position?.options?.fontColor;
14211443
let updateColorInRgb;
14221444
if (color === "red") {
@@ -1591,7 +1613,7 @@ export const multiSignEmbed = async (
15911613
});
15921614
}
15931615
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
1594-
// console.log("pdf", pdfBytes);
1616+
//console.log("pdf", pdfBytes);
15951617
return pdfBytes;
15961618
};
15971619

@@ -2211,3 +2233,11 @@ function getImagePosition(page, image, sizeRatio) {
22112233
rotate: page.getRotation()
22122234
};
22132235
}
2236+
//function to use calculate pdf rendering scale in the container
2237+
export const getContainerScale = (pdfOriginalWH, pageNumber, containerWH) => {
2238+
const getPdfPageWidth = pdfOriginalWH.find(
2239+
(data) => data.pageNumber === pageNumber
2240+
);
2241+
const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
2242+
return containerScale;
2243+
};

‎apps/OpenSign/src/pages/PdfRequestFiles.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -678,7 +678,7 @@ function PdfRequestFiles(props) {
678678
widgetKey,
679679
radioExist,
680680
requiredCheckbox,
681-
pageNumber; // `pageNumber` is used to check on which page user did not fill widget's data then change current pageNumber and show tour message on that page
681+
TourPageNumber; // `pageNumber` is used to check on which page user did not fill widget's data then change current pageNumber and show tour message on that page
682682

683683
for (let i = 0; i < checkUser[0].placeHolder.length; i++) {
684684
for (let j = 0; j < checkUser[0].placeHolder[i].pos.length; j++) {
@@ -726,7 +726,7 @@ function PdfRequestFiles(props) {
726726
) {
727727
showAlert = true;
728728
widgetKey = requiredCheckbox[i].key;
729-
pageNumber = updatePage;
729+
TourPageNumber = updatePage;
730730
setminRequiredCount(parseMin);
731731
}
732732
//else condition to validate minimum required checkbox
@@ -737,8 +737,7 @@ function PdfRequestFiles(props) {
737737
if (!showAlert) {
738738
showAlert = true;
739739
widgetKey = requiredCheckbox[i].key;
740-
pageNumber = updatePage;
741-
740+
TourPageNumber = updatePage;
742741
setminRequiredCount(parseMin);
743742
}
744743
}
@@ -764,7 +763,7 @@ function PdfRequestFiles(props) {
764763
if (!checkDefaultSigned && !showAlert) {
765764
showAlert = true;
766765
widgetKey = requiredRadio[i].key;
767-
pageNumber = updatePage;
766+
TourPageNumber = updatePage;
768767
setminRequiredCount(null);
769768
}
770769
}
@@ -792,7 +791,7 @@ function PdfRequestFiles(props) {
792791
if (!checkDefaultSigned && !showAlert) {
793792
showAlert = true;
794793
widgetKey = requiredWidgets[i].key;
795-
pageNumber = updatePage;
794+
TourPageNumber = updatePage;
796795
setminRequiredCount(null);
797796
}
798797
}
@@ -808,15 +807,15 @@ function PdfRequestFiles(props) {
808807
}
809808
if (checkboxExist && requiredCheckbox && showAlert) {
810809
setUnSignedWidgetId(widgetKey);
811-
setPageNumber(pageNumber);
810+
setPageNumber(TourPageNumber);
812811
setWidgetsTour(true);
813812
} else if (radioExist && showAlert) {
814813
setUnSignedWidgetId(widgetKey);
815-
setPageNumber(pageNumber);
814+
setPageNumber(TourPageNumber);
816815
setWidgetsTour(true);
817816
} else if (showAlert) {
818817
setUnSignedWidgetId(widgetKey);
819-
setPageNumber(pageNumber);
818+
setPageNumber(TourPageNumber);
820819
setWidgetsTour(true);
821820
} else {
822821
setIsUiLoading(true);
@@ -862,7 +861,9 @@ function PdfRequestFiles(props) {
862861
pngUrl,
863862
pdfDoc,
864863
isSignYourSelfFlow,
865-
scale
864+
scale,
865+
pdfOriginalWH,
866+
containerWH
866867
);
867868
// console.log("pdfte", pdfBytes);
868869
//get ExistUserPtr object id of user class to get tenantDetails

0 commit comments

Comments
 (0)