Skip to content

Commit e0e7dd5

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
fix: widget's position errors caused by differing page sizes in landscape orientation
1 parent 56d5091 commit e0e7dd5

File tree

7 files changed

+93
-63
lines changed

7 files changed

+93
-63
lines changed

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ function Placeholder(props) {
9191
const [placeholderBorder, setPlaceholderBorder] = useState({ w: 0, h: 0 });
9292
const [isDraggingEnabled, setDraggingEnabled] = useState(true);
9393
const [isShowDateFormat, setIsShowDateFormat] = useState(false);
94+
const [containerScale, setContainerScale] = useState();
9495
const [selectDate, setSelectDate] = useState({
9596
date:
9697
props.pos.type === "date"
@@ -120,7 +121,14 @@ function Placeholder(props) {
120121
width: null,
121122
height: null
122123
});
123-
const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
124+
125+
useEffect(() => {
126+
const getPdfPageWidth = props.pdfOriginalWH.find(
127+
(data) => data.pageNumber === props.pageNumber
128+
);
129+
setContainerScale(props.containerWH.width / getPdfPageWidth.width);
130+
// eslint-disable-next-line react-hooks/exhaustive-deps
131+
}, [props.containerWH.width, props.pdfOriginalWH]);
124132
const dateFormatArr = [
125133
"L",
126134
"DD-MM-YYYY",
@@ -558,7 +566,10 @@ function Placeholder(props) {
558566
);
559567
};
560568
const xPos = (pos, signYourself) => {
561-
const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
569+
const getPdfPageWidth = props.pdfOriginalWH.find(
570+
(data) => data.pageNumber === props.pageNumber
571+
);
572+
const containerScale = props.containerWH.width / getPdfPageWidth?.width;
562573
const resizePos = pos.xPosition;
563574
if (signYourself) {
564575
return resizePos * containerScale * props.scale;
@@ -580,7 +591,10 @@ function Placeholder(props) {
580591
}
581592
};
582593
const yPos = (pos, signYourself) => {
583-
const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
594+
const getPdfPageWidth = props.pdfOriginalWH.find(
595+
(data) => data.pageNumber === props.pageNumber
596+
);
597+
const containerScale = props.containerWH.width / getPdfPageWidth.width;
584598
const resizePos = pos.yPosition;
585599

586600
if (signYourself) {

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,10 @@ function RenderPdf({
6767

6868
// handle signature block width and height according to screen
6969
const posWidth = (pos, signYourself) => {
70-
const containerScale = containerWH.width / pdfOriginalWH.width;
70+
const getPdfPageWidth = pdfOriginalWH.find(
71+
(data) => data.pageNumber === pageNumber
72+
);
73+
const containerScale = containerWH.width / getPdfPageWidth.width || 1;
7174
const defaultWidth = defaultWidthHeight(pos.type).width;
7275
const posWidth = pos.Width ? pos.Width : defaultWidth;
7376
if (signYourself) {
@@ -93,7 +96,10 @@ function RenderPdf({
9396
}
9497
};
9598
const posHeight = (pos, signYourself) => {
96-
const containerScale = containerWH.width / pdfOriginalWH.width;
99+
const getPdfPageWidth = pdfOriginalWH.find(
100+
(data) => data.pageNumber === pageNumber
101+
);
102+
const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
97103

98104
const posHeight = pos.Height || defaultWidthHeight(pos.type).height;
99105
if (signYourself) {
@@ -189,6 +195,7 @@ function RenderPdf({
189195
scale={scale}
190196
containerWH={containerWH}
191197
pdfOriginalWH={pdfOriginalWH}
198+
pageNumber={pageNumber}
192199
/>
193200
</React.Fragment>
194201
)
@@ -250,7 +257,6 @@ function RenderPdf({
250257
>
251258
{isLoadPdf &&
252259
containerWH?.width &&
253-
pdfOriginalWH?.width &&
254260
(pdfRequest
255261
? signerPos.map((data, key) => {
256262
return (
@@ -315,6 +321,7 @@ function RenderPdf({
315321
scale={scale}
316322
containerWH={containerWH}
317323
pdfOriginalWH={pdfOriginalWH}
324+
pageNumber={pageNumber}
318325
/>
319326
</React.Fragment>
320327
);
@@ -367,6 +374,7 @@ function RenderPdf({
367374
}
368375
scale={scale}
369376
pdfOriginalWH={pdfOriginalWH}
377+
pageNumber={pageNumber}
370378
/>
371379
)
372380
);
@@ -434,7 +442,6 @@ function RenderPdf({
434442
>
435443
{isLoadPdf &&
436444
containerWH?.width &&
437-
pdfOriginalWH?.width &&
438445
(pdfRequest //pdf request sign flow
439446
? signerPos?.map((data, key) => {
440447
return (
@@ -499,6 +506,7 @@ function RenderPdf({
499506
scale={scale}
500507
containerWH={containerWH}
501508
pdfOriginalWH={pdfOriginalWH}
509+
pageNumber={pageNumber}
502510
/>
503511
</React.Fragment>
504512
);
@@ -556,6 +564,7 @@ function RenderPdf({
556564
scale={scale}
557565
containerWH={containerWH}
558566
pdfOriginalWH={pdfOriginalWH}
567+
pageNumber={pageNumber}
559568
/>
560569
</React.Fragment>
561570
);

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1226,7 +1226,6 @@ export const changeImageWH = async (base64Image) => {
12261226
export const multiSignEmbed = async (
12271227
xyPositionArray,
12281228
pdfDoc,
1229-
pdfOriginalWH,
12301229
signyourself,
12311230
scale
12321231
) => {
@@ -1287,20 +1286,8 @@ export const multiSignEmbed = async (
12871286
}
12881287
}
12891288
let widgetWidth, widgetHeight;
1290-
widgetWidth = placeholderWidth(
1291-
position,
1292-
scale,
1293-
signyourself,
1294-
pdfOriginalWH,
1295-
scale
1296-
);
1297-
widgetHeight = placeholderHeight(
1298-
position,
1299-
scale,
1300-
signyourself,
1301-
pdfOriginalWH.height,
1302-
scale
1303-
);
1289+
widgetWidth = placeholderWidth(position);
1290+
widgetHeight = placeholderHeight(position);
13041291
const xPos = (position) => {
13051292
const resizePos = position.xPosition;
13061293
//first two condition handle to old data already saved from mobile view which scale point diffrent

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ function PdfRequestFiles() {
8686
const [defaultSignImg, setDefaultSignImg] = useState();
8787
const [isDocId, setIsDocId] = useState(false);
8888
const [pdfNewWidth, setPdfNewWidth] = useState();
89-
const [pdfOriginalWH, setPdfOriginalWH] = useState();
89+
const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
9090
const [signerPos, setSignerPos] = useState([]);
9191
const [signerObjectId, setSignerObjectId] = useState();
9292
const [isUiLoading, setIsUiLoading] = useState(false);
@@ -785,7 +785,6 @@ function PdfRequestFiles() {
785785
const pdfBytes = await multiSignEmbed(
786786
pngUrl,
787787
pdfDoc,
788-
pdfOriginalWH,
789788
isSignYourSelfFlow,
790789
scale
791790
);
@@ -1020,11 +1019,14 @@ function PdfRequestFiles() {
10201019
];
10211020
//function for get pdf page details
10221021
const pageDetails = async (pdf) => {
1023-
const firstPage = await pdf.getPage(1);
1024-
const scale = 1;
1025-
const { width, height } = firstPage.getViewport({ scale });
1026-
// console.log("width height", width, height);
1027-
setPdfOriginalWH({ width: width, height: height });
1022+
let pdfWHObj = [];
1023+
for (let index = 0; index < allPages; index++) {
1024+
const firstPage = await pdf.getPage(index + 1);
1025+
const scale = 1;
1026+
const { width, height } = firstPage.getViewport({ scale });
1027+
pdfWHObj.push({ pageNumber: index + 1, width, height });
1028+
}
1029+
setPdfOriginalWH(pdfWHObj);
10281030
setPdfLoadFail({
10291031
status: true
10301032
});
@@ -1555,7 +1557,6 @@ function PdfRequestFiles() {
15551557
<PdfZoom
15561558
setScale={setScale}
15571559
scale={scale}
1558-
pdfOriginalWH={pdfOriginalWH}
15591560
containerWH={containerWH}
15601561
setZoomPercent={setZoomPercent}
15611562
zoomPercent={zoomPercent}

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

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function PlaceHolderSign() {
8787
const [checkTourStatus, setCheckTourStatus] = useState(false);
8888
const [tourStatus, setTourStatus] = useState([]);
8989
const [signerUserId, setSignerUserId] = useState();
90-
const [pdfOriginalWH, setPdfOriginalWH] = useState();
90+
const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
9191
const [contractName, setContractName] = useState("");
9292
const [containerWH, setContainerWH] = useState();
9393
const { docId } = useParams();
@@ -467,7 +467,10 @@ function PlaceHolderSign() {
467467
setZIndex(posZIndex);
468468
const signer = signersdata.find((x) => x.Id === uniqueId);
469469
const key = randomId();
470-
const containerScale = containerWH?.width / pdfOriginalWH?.width || 1;
470+
const getPdfPageWidth = pdfOriginalWH.find(
471+
(data) => data.pageNumber === pageNumber
472+
);
473+
const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
471474
let dropData = [];
472475
let placeHolder;
473476
const dragTypeValue = item?.text ? item.text : monitor.type;
@@ -514,7 +517,6 @@ function PlaceHolderSign() {
514517
const getYPosition = signBtnPosition[0]
515518
? y - signBtnPosition[0].yPos
516519
: y;
517-
console.log("getxyPos", getXPosition, getYPosition);
518520
const dropObj = {
519521
xPosition: getXPosition / (containerScale * scale),
520522
yPosition: getYPosition / (containerScale * scale),
@@ -661,11 +663,14 @@ function PlaceHolderSign() {
661663

662664
//function for get pdf page details
663665
const pageDetails = async (pdf) => {
664-
const firstPage = await pdf.getPage(1);
665-
const scale = 1;
666-
const { width, height } = firstPage.getViewport({ scale });
667-
// console.log("width height", width, height);
668-
setPdfOriginalWH({ width: width, height: height });
666+
let pdfWHObj = [];
667+
for (let index = 0; index < allPages; index++) {
668+
const firstPage = await pdf.getPage(index + 1);
669+
const scale = 1;
670+
const { width, height } = firstPage.getViewport({ scale });
671+
pdfWHObj.push({ pageNumber: index + 1, width, height });
672+
}
673+
setPdfOriginalWH(pdfWHObj);
669674
setPdfLoadFail({
670675
status: true
671676
});
@@ -685,7 +690,10 @@ function PlaceHolderSign() {
685690
updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace);
686691
const signId = signerId ? signerId : uniqueId; //? signerId : signerObjId;
687692
const keyValue = key ? key : dragKey;
688-
const containerScale = containerWH.width / pdfOriginalWH.width;
693+
const getPdfPageWidth = pdfOriginalWH.find(
694+
(data) => data.pageNumber === pageNumber
695+
);
696+
const containerScale = containerWH.width / getPdfPageWidth?.width;
689697

690698
if (keyValue >= 0) {
691699
let filterSignerPos;
@@ -864,7 +872,6 @@ function PlaceHolderSign() {
864872
const pdfBytes = await multiSignEmbed(
865873
placeholder,
866874
pdfDoc,
867-
pdfOriginalWH,
868875
isSignYourSelfFlow,
869876
containerWH
870877
);
@@ -1784,7 +1791,6 @@ function PlaceHolderSign() {
17841791
<PdfZoom
17851792
setScale={setScale}
17861793
scale={scale}
1787-
pdfOriginalWH={pdfOriginalWH}
17881794
containerWH={containerWH}
17891795
setZoomPercent={setZoomPercent}
17901796
zoomPercent={zoomPercent}

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

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ function SignYourSelf() {
7676
const [signKey, setSignKey] = useState();
7777
const [imgWH, setImgWH] = useState({});
7878
const [pdfNewWidth, setPdfNewWidth] = useState();
79-
const [pdfOriginalWH, setPdfOriginalWH] = useState();
79+
const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
8080
const [successEmail, setSuccessEmail] = useState(false);
8181
const imageRef = useRef(null);
8282
const [myInitial, setMyInitial] = useState("");
@@ -458,7 +458,10 @@ function SignYourSelf() {
458458
const widgetTypeExist = ["name", "company", "job title", "email"].includes(
459459
dragTypeValue
460460
);
461-
const containerScale = containerWH?.width / pdfOriginalWH?.width || 1;
461+
const getPdfPageWidth = pdfOriginalWH.find(
462+
(data) => data.pageNumber === pageNumber
463+
);
464+
const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
462465
//adding and updating drop position in array when user drop signature button in div
463466
if (item === "onclick") {
464467
const getWidth = widgetTypeExist
@@ -695,7 +698,6 @@ function SignYourSelf() {
695698
const pdfBytes = await multiSignEmbed(
696699
xyPostion,
697700
pdfDoc,
698-
pdfOriginalWH,
699701
isSignYourSelfFlow,
700702
scale
701703
);
@@ -809,13 +811,14 @@ function SignYourSelf() {
809811
setDragKey(key);
810812
setIsDragging(true);
811813
};
812-
813-
// console.log("xy", pdfOriginalWH);
814814
//function for set and update x and y postion after drag and drop signature tab
815815
const handleStop = (event, dragElement) => {
816816
if (isDragging && dragElement) {
817817
event.preventDefault();
818-
const containerScale = containerWH.width / pdfOriginalWH.width;
818+
const getPdfPageWidth = pdfOriginalWH.find(
819+
(data) => data.pageNumber === pageNumber
820+
);
821+
const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
819822
if (dragKey >= 0) {
820823
const filterDropPos = xyPostion.filter(
821824
(data) => data.pageNumber === pageNumber
@@ -848,13 +851,16 @@ function SignYourSelf() {
848851
setIsDragging(false);
849852
}, 200);
850853
};
851-
852854
//function for get pdf page details
853855
const pageDetails = async (pdf) => {
854-
const firstPage = await pdf.getPage(1);
855-
const scale = 1;
856-
const { width, height } = firstPage.getViewport({ scale });
857-
setPdfOriginalWH({ width: width, height: height });
856+
let pdfWHObj = [];
857+
for (let index = 0; index < allPages; index++) {
858+
const firstPage = await pdf.getPage(index + 1);
859+
const scale = 1;
860+
const { width, height } = firstPage.getViewport({ scale });
861+
pdfWHObj.push({ pageNumber: index + 1, width, height });
862+
}
863+
setPdfOriginalWH(pdfWHObj);
858864
setPdfLoadFail({
859865
status: true
860866
});
@@ -1166,7 +1172,7 @@ function SignYourSelf() {
11661172
{isUiLoading && (
11671173
<div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-center bg-[#e6f2f2] bg-opacity-80">
11681174
<Loader />
1169-
<span className="text-[13px] text-base-content">
1175+
<span style={{ fontSize: "13px", fontWeight: "bold" }}>
11701176
This might take some time
11711177
</span>
11721178
</div>
@@ -1218,7 +1224,6 @@ function SignYourSelf() {
12181224
<PdfZoom
12191225
setScale={setScale}
12201226
scale={scale}
1221-
pdfOriginalWH={pdfOriginalWH}
12221227
containerWH={containerWH}
12231228
setZoomPercent={setZoomPercent}
12241229
zoomPercent={zoomPercent}

0 commit comments

Comments
 (0)