Skip to content

Commit 716023b

Browse files
prafull-opensignlabsprafull-opensignlabs
authored
Merge pull request #1323 from OpenSignLabs/react-tour
Fix: resolved text box font size issue during resizing and prevented unnecessary popups from opening when resizing widgets.
2 parents 7b35e71 + 67b3417 commit 716023b

File tree

7 files changed

+44
-19
lines changed

7 files changed

+44
-19
lines changed

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

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -651,6 +651,21 @@ function Placeholder(props) {
651651
}
652652
}
653653
};
654+
//function to calculate font size
655+
const calculateFont = (size, isMinHeight) => {
656+
const containerScale = getContainerScale(
657+
props.pdfOriginalWH,
658+
props.pageNumber,
659+
props.containerWH
660+
);
661+
const fontSize = (size || 12) * containerScale * props.scale;
662+
//isMinHeight to set text box minimum height
663+
if (isMinHeight) {
664+
return fontSize * 1.5 + "px";
665+
} else {
666+
return fontSize + "px";
667+
}
668+
};
654669

655670
const getCursor = () => {
656671
if (props.data && props.isNeedSign) {
@@ -745,12 +760,16 @@ function Placeholder(props) {
745760
? "auto"
746761
: props.posHeight(props.pos, props.isSignYourself)
747762
}}
763+
minHeight={calculateFont(props.pos.options?.fontSize, true)}
764+
maxHeight="auto"
748765
onResizeStart={() => {
749766
setDraggingEnabled(true);
750767
props.setIsResize && props.setIsResize(true);
751768
}}
752769
onResizeStop={(e, direction, ref) => {
753-
props.setIsResize && props.setIsResize(false);
770+
setTimeout(() => {
771+
props.setIsResize && props.setIsResize(false);
772+
}, 50);
754773
props.handleSignYourselfImageResize &&
755774
props.handleSignYourselfImageResize(
756775
ref,
@@ -785,7 +804,7 @@ function Placeholder(props) {
785804
h: ref.offsetHeight / (props.scale * containerScale)
786805
});
787806
}}
788-
onClick={() => handleOnClickPlaceholder()}
807+
onClick={() => !props.isResize && handleOnClickPlaceholder()}
789808
>
790809
{props.isShowBorder &&
791810
props.pos.type !== radioButtonWidget &&
@@ -872,7 +891,7 @@ function Placeholder(props) {
872891
startDate={startDate}
873892
handleSaveDate={handleSaveDate}
874893
xPos={props.xPos}
875-
posHeight={props.posHeight}
894+
calculateFont={calculateFont}
876895
/>
877896
</div>
878897
) : (
@@ -900,7 +919,7 @@ function Placeholder(props) {
900919
startDate={startDate}
901920
handleSaveDate={handleSaveDate}
902921
xPos={props.xPos}
903-
posHeight={props.posHeight}
922+
calculateFont={calculateFont}
904923
/>
905924
</>
906925
)}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ function PlaceholderType(props) {
2929
const [textValue, setTextValue] = useState();
3030
const [selectedCheckbox, setSelectedCheckbox] = useState([]);
3131
const years = range(1990, getYear(new Date()) + 16, 1);
32-
const height = props.posHeight(props.pos, props.isSignYourself);
33-
const fontSize =
34-
(props.pos.options?.fontSize || (height ? height - 4 : 12)) + "px";
32+
const fontSize = props.calculateFont(props.pos.options?.fontSize);
3533
const fontColor = props.pos.options?.fontColor || "black";
3634
const months = [
3735
"January",

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ function RenderPdf({
6565
fontSize,
6666
setFontSize,
6767
fontColor,
68-
setFontColor
68+
setFontColor,
69+
isResize
6970
}) {
7071
const { t } = useTranslation();
7172
const isMobile = window.innerWidth < 767;
@@ -104,6 +105,7 @@ function RenderPdf({
104105
}
105106
}
106107
};
108+
107109
const posHeight = (pos, signYourself) => {
108110
const containerScale = getContainerScale(
109111
pdfOriginalWH,
@@ -207,6 +209,7 @@ function RenderPdf({
207209
pageNumber={pageNumber}
208210
ispublicTemplate={ispublicTemplate}
209211
handleUserDetails={handleUserDetails}
212+
isResize={isResize}
210213
/>
211214
</React.Fragment>
212215
)
@@ -357,6 +360,7 @@ function RenderPdf({
357360
setFontSize={setFontSize}
358361
fontColor={fontColor}
359362
setFontColor={setFontColor}
363+
isResize={isResize}
360364
/>
361365
</React.Fragment>
362366
);
@@ -417,6 +421,8 @@ function RenderPdf({
417421
setFontSize={setFontSize}
418422
fontColor={fontColor}
419423
setFontColor={setFontColor}
424+
isResize={isResize}
425+
setIsResize={setIsResize}
420426
/>
421427
)
422428
);
@@ -548,6 +554,7 @@ function RenderPdf({
548554
setFontSize={setFontSize}
549555
fontColor={fontColor}
550556
setFontColor={setFontColor}
557+
isResize={isResize}
551558
/>
552559
</React.Fragment>
553560
);
@@ -611,6 +618,8 @@ function RenderPdf({
611618
setFontSize={setFontSize}
612619
fontColor={fontColor}
613620
setFontColor={setFontColor}
621+
isResize={isResize}
622+
setIsResize={setIsResize}
614623
/>
615624
</React.Fragment>
616625
);

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1289,14 +1289,8 @@ export const changeImageWH = async (base64Image) => {
12891289
};
12901290

12911291
//function to calculate font size of text area widgets
1292-
const calculateFontSize = (
1293-
position,
1294-
containerScale,
1295-
signyourself,
1296-
widgetHeight
1297-
) => {
1298-
const font =
1299-
position?.options?.fontSize || (widgetHeight ? widgetHeight / 2 : 12);
1292+
const calculateFontSize = (position, containerScale, signyourself) => {
1293+
const font = position?.options?.fontSize || 12;
13001294
if (!signyourself && position?.isMobile && position?.scale) {
13011295
return font / position?.scale / containerScale;
13021296
} else {
@@ -1506,8 +1500,7 @@ export const multiSignEmbed = async (
15061500
const fontSize = calculateFontSize(
15071501
position,
15081502
containerScale,
1509-
signyourself,
1510-
position.Height
1503+
signyourself
15111504
);
15121505
parseInt(fontSize);
15131506
let textContent;
@@ -1688,6 +1681,7 @@ export const multiSignEmbed = async (
16881681
}
16891682
if (!hasError) {
16901683
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
1684+
// console.log("pdf", pdfBytes);
16911685
return pdfBytes;
16921686
} else {
16931687
return {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2058,6 +2058,7 @@ function PlaceHolderSign() {
20582058
setSignerPos={setSignerPos}
20592059
containerWH={containerWH}
20602060
setIsResize={setIsResize}
2061+
isResize={isResize}
20612062
setZIndex={setZIndex}
20622063
setIsPageCopy={setIsPageCopy}
20632064
signersdata={signersdata}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ function SignYourSelf() {
132132
const [isRotate, setIsRotate] = useState({ status: false, degree: 0 });
133133
const [isSubscribe, setIsSubscribe] = useState({ plan: "", isValid: true });
134134
const [isDownloadModal, setIsDownloadModal] = useState(false);
135+
const [isResize, setIsResize] = useState(false);
135136
const divRef = useRef(null);
136137
const nodeRef = useRef(null);
137138
const [, drop] = useDrop({
@@ -785,7 +786,7 @@ function SignYourSelf() {
785786
const handleStop = (event, dragElement) => {
786787
setFontSize();
787788
setFontColor();
788-
if (isDragging && dragElement) {
789+
if (!isResize && isDragging && dragElement) {
789790
event.preventDefault();
790791
const containerScale = getContainerScale(
791792
pdfOriginalWH,
@@ -1402,6 +1403,8 @@ function SignYourSelf() {
14021403
setFontSize={setFontSize}
14031404
fontColor={fontColor}
14041405
setFontColor={setFontColor}
1406+
isResize={isResize}
1407+
setIsResize={setIsResize}
14051408
/>
14061409
)}
14071410
</div>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1600,6 +1600,7 @@ const TemplatePlaceholder = () => {
16001600
setFontSize={setFontSize}
16011601
fontColor={fontColor}
16021602
setFontColor={setFontColor}
1603+
isResize={isResize}
16031604
/>
16041605
)}
16051606
</div>

0 commit comments

Comments
 (0)