Skip to content

Commit dec13e8

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
fix: image resize placeholder location issue in mobile to mobile and desktop to desktop view
1 parent dd536dc commit dec13e8

File tree

6 files changed

+96
-477
lines changed

6 files changed

+96
-477
lines changed

‎microfrontends/SignDocuments/src/Component/PdfRequestFiles.js‎

Lines changed: 1 addition & 224 deletions
Original file line numberDiff line numberDiff line change
@@ -426,228 +426,6 @@ function PdfRequestFiles() {
426426
}
427427
}
428428

429-
// //function for call cloud function signPdf and generate digital signature
430-
// const signPdfFun = async (
431-
// base64Url,
432-
// documentId,
433-
// xyPosData,
434-
// pdfBase64Url,
435-
// pageNo,
436-
// signerData
437-
// ) => {
438-
// let signgleSign;
439-
// const isMobile = window.innerWidth < 767;
440-
// const newWidth = window.innerWidth;
441-
// const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
442-
// if (
443-
// signerData &&
444-
// signerData.length === 1 &&
445-
// signerData[0].pos.length === 1
446-
// ) {
447-
// const height = xyPosData.Height ? xyPosData.Height : 60;
448-
449-
// const xPos = (pos) => {
450-
// //checking both condition mobile and desktop view
451-
// if (isMobile) {
452-
// //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
453-
// if (pos.isMobile) {
454-
// const x = pos.xPosition * (pos.scale / scale);
455-
// return x * scale + 50;
456-
// } else {
457-
// const x = pos.xPosition / scale;
458-
// return x * scale;
459-
// }
460-
// } else {
461-
// //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
462-
// if (pos.isMobile) {
463-
// const x = pos.xPosition * pos.scale + 50;
464-
// return x;
465-
// } else {
466-
// return pos.xPosition;
467-
// }
468-
// }
469-
// };
470-
471-
// const yBottom = (pos) => {
472-
// let yPosition;
473-
// //checking both condition mobile and desktop view
474-
475-
// if (isMobile) {
476-
// //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
477-
// if (pos.isMobile) {
478-
// const y = pos.yBottom * (pos.scale / scale);
479-
// yPosition = pos.isDrag
480-
// ? y * scale - height
481-
// : pos.firstYPos
482-
// ? y * scale - height + pos.firstYPos
483-
// : y * scale - height;
484-
// return yPosition;
485-
// } else {
486-
// const y = pos.yBottom / scale;
487-
488-
// yPosition = pos.isDrag
489-
// ? y * scale - height
490-
// : pos.firstYPos
491-
// ? y * scale - height + pos.firstYPos
492-
// : y * scale - height;
493-
// return yPosition;
494-
// }
495-
// } else {
496-
// //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
497-
// if (pos.isMobile) {
498-
// const y = pos.yBottom * pos.scale;
499-
500-
// yPosition = pos.isDrag
501-
// ? y - height
502-
// : pos.firstYPos
503-
// ? y - height + pos.firstYPos
504-
// : y - height;
505-
// return yPosition;
506-
// } else {
507-
// yPosition = pos.isDrag
508-
// ? pos.yBottom - height
509-
// : pos.firstYPos
510-
// ? pos.yBottom - height + pos.firstYPos
511-
// : pos.yBottom - height;
512-
// return yPosition;
513-
// }
514-
// }
515-
// };
516-
// const bottomY = yBottom(xyPosData);
517-
// signgleSign = {
518-
// pdfFile: pdfBase64Url,
519-
// docId: documentId,
520-
// userId: signerObjectId,
521-
// sign: {
522-
// Base64: base64Url,
523-
// Left: xPos(xyPosData),
524-
// Bottom: bottomY,
525-
// Width: xyPosData.Width ? xyPosData.Width : 150,
526-
// Height: height,
527-
// Page: pageNo
528-
// }
529-
// };
530-
// } else if (
531-
// xyPosData &&
532-
// xyPosData.length > 0 &&
533-
// xyPosData[0].pos.length > 0
534-
// ) {
535-
// signgleSign = {
536-
// pdfFile: base64Url,
537-
// docId: documentId,
538-
// userId: signerObjectId
539-
// };
540-
// }
541-
542-
// await axios
543-
// .post(
544-
// `${localStorage.getItem("baseUrl")}functions/signPdf`,
545-
// signgleSign,
546-
// {
547-
// headers: {
548-
// "Content-Type": "application/json",
549-
// "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
550-
// sessionToken: localStorage.getItem("accesstoken")
551-
// }
552-
// }
553-
// )
554-
// .then((Listdata) => {
555-
// const json = Listdata.data;
556-
557-
// if (json.result.data) {
558-
// setPdfUrl(json.result.data);
559-
// setIsSigned(true);
560-
// setSignedSigners([]);
561-
// setUnSignedSigners([]);
562-
// getDocumentDetails();
563-
// }
564-
// })
565-
// .catch((err) => {
566-
// console.log("axois err ", err);
567-
// alert("something went wrong");
568-
// });
569-
// };
570-
571-
//function for resize image and update width and height
572-
// const handleImageResize = (ref, key, signerId, position) => {
573-
// const filterSignerPos = signerPos.filter(
574-
// (data) => data.signerObjId === signerId
575-
// );
576-
// if (filterSignerPos.length > 0) {
577-
// const getPlaceHolder = filterSignerPos[0].placeHolder;
578-
// const getPageNumer = getPlaceHolder.filter(
579-
// (data) => data.pageNumber === pageNumber
580-
// );
581-
// if (getPageNumer.length > 0) {
582-
// const getXYdata = getPageNumer[0].pos.filter(
583-
// (data, ind) => data.key === key && data.Width && data.Height
584-
// );
585-
// if (getXYdata.length > 0) {
586-
// const getXYdata = getPageNumer[0].pos;
587-
// const getPosData = getXYdata;
588-
// const addSignPos = getPosData.map((url, ind) => {
589-
// if (url.key === key) {
590-
// return {
591-
// ...url,
592-
// Width: ref.offsetWidth,
593-
// Height: ref.offsetHeight,
594-
// xPosition: position.x
595-
// };
596-
// }
597-
// return url;
598-
// });
599-
600-
// const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
601-
// if (obj.pageNumber === pageNumber) {
602-
// return { ...obj, pos: addSignPos };
603-
// }
604-
// return obj;
605-
// });
606-
607-
// const newUpdateSigner = signerPos.map((obj, ind) => {
608-
// if (obj.signerObjId === signerId) {
609-
// return { ...obj, placeHolder: newUpdateSignPos };
610-
// }
611-
// return obj;
612-
// });
613-
614-
// setSignerPos(newUpdateSigner);
615-
// } else {
616-
// const getXYdata = getPageNumer[0].pos;
617-
618-
// const getPosData = getXYdata;
619-
620-
// const addSignPos = getPosData.map((url, ind) => {
621-
// if (url.key === key) {
622-
// return {
623-
// ...url,
624-
// Width: ref.offsetWidth,
625-
// Height: ref.offsetHeight
626-
// };
627-
// }
628-
// return url;
629-
// });
630-
631-
// const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
632-
// if (obj.pageNumber === pageNumber) {
633-
// return { ...obj, pos: addSignPos };
634-
// }
635-
// return obj;
636-
// });
637-
638-
// const newUpdateSigner = signerPos.map((obj, ind) => {
639-
// if (obj.signerObjId === signerId) {
640-
// return { ...obj, placeHolder: newUpdateSignPos };
641-
// }
642-
// return obj;
643-
// });
644-
645-
// setSignerPos(newUpdateSigner);
646-
// }
647-
// }
648-
// }
649-
// };
650-
651429
//function for get pdf page details
652430
const pageDetails = async (pdf) => {
653431
const load = {
@@ -950,7 +728,7 @@ function PdfRequestFiles() {
950728
</div>
951729
)}
952730

953-
<div className="signatureContainer">
731+
<div className="signatureContainer" ref={divRef}>
954732
{/* this modal is used to show decline alert */}
955733
<CustomModal
956734
containerWH={containerWH}
@@ -997,7 +775,6 @@ function PdfRequestFiles() {
997775
marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
998776
marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
999777
}}
1000-
ref={divRef}
1001778
>
1002779
{/* this modal is used show this document is already sign */}
1003780

‎microfrontends/SignDocuments/src/Component/SignYourselfPdf.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -476,8 +476,10 @@ function SignYourSelf() {
476476
pngUrl,
477477
pdfDoc,
478478
pdfOriginalWidth,
479-
true
479+
true,
480+
containerWH
480481
);
482+
481483
signPdfFun(pdfBytes, documentId);
482484
}
483485
setIsSignPad(false);
@@ -536,14 +538,13 @@ function SignYourSelf() {
536538
})
537539
.then((Listdata) => {
538540
const json = Listdata.data;
539-
// console.log("json ", json);
541+
540542
setPdfUrl(json.result.data);
541543
if (json.result.data) {
542544
getDocumentDetails(false);
543545
}
544546
})
545547
.catch((err) => {
546-
// this.setState({ loading: false });
547548
console.log("axois err ", err);
548549
});
549550
};
@@ -825,7 +826,7 @@ function SignYourSelf() {
825826
) : noData ? (
826827
<Nodata />
827828
) : (
828-
<div className="signatureContainer">
829+
<div className="signatureContainer" ref={divRef}>
829830
{/* this component used for UI interaction and show their functionality */}
830831
{pdfLoadFail && !checkTourStatus && (
831832
<Tour
@@ -940,7 +941,7 @@ function SignYourSelf() {
940941
setIsEmail={setIsEmail}
941942
/>
942943

943-
<div data-tut="reactourSecond" ref={divRef}>
944+
<div data-tut="reactourSecond">
944945
{containerWH && (
945946
<RenderPdf
946947
pageNumber={pageNumber}

‎microfrontends/SignDocuments/src/Component/component/renderPdf.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
handleSignYourselfImageResize
1010
} from "../../utils/Utils";
1111
import EmailToast from "./emailToast";
12-
1312

1413
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
1514

@@ -46,7 +45,8 @@ function RenderPdf({
4645
setSignerPos,
4746
setXyPostion,
4847
index,
49-
containerWH
48+
containerWH,
49+
setIsResize
5050
}) {
5151
const isMobile = window.innerWidth < 767;
5252
const newWidth = containerWH.width;
@@ -443,13 +443,17 @@ function RenderPdf({
443443
x: pos.xPosition,
444444
y: pos.yPosition
445445
}}
446-
onResize={(
446+
onResizeStart={() => {
447+
setIsResize(true);
448+
}}
449+
onResizeStop={(
447450
e,
448451
direction,
449452
ref,
450453
delta,
451454
position
452455
) => {
456+
e.stopPropagation();
453457
handleImageResize(
454458
ref,
455459
pos.key,
@@ -459,7 +463,8 @@ function RenderPdf({
459463
pageNumber,
460464
setSignerPos,
461465
pdfOriginalWidth,
462-
containerWH
466+
containerWH,
467+
setIsResize
463468
);
464469
}}
465470
>
@@ -853,7 +858,10 @@ function RenderPdf({
853858
x: pos.xPosition,
854859
y: pos.yPosition
855860
}}
856-
onResize={(
861+
onResizeStart={() => {
862+
setIsResize(true);
863+
}}
864+
onResizeStop={(
857865
e,
858866
direction,
859867
ref,
@@ -869,7 +877,8 @@ function RenderPdf({
869877
pageNumber,
870878
setSignerPos,
871879
pdfOriginalWidth,
872-
containerWH
880+
containerWH,
881+
setIsResize
873882
);
874883
}}
875884
>

0 commit comments

Comments
 (0)