WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-09-13 21:27:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: placeholder and signyourself location issue in mobille view

Browse Source
This commit is contained in:
RaktimaNXG
2023-12-04 11:34:51 +05:30
parent 1cc4cf93cb
commit 0c4b8143b2
7 changed files with 735 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
-1
View File
@@ -44,7 +44,6 @@ function PdfFile() {
};
setIsLoading(load);
const driveDetails = await getDrive();
if (driveDetails) {
if (driveDetails.length > 0) {
setPdfData(driveDetails);
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+279 -233
View File
@@ -19,7 +19,8 @@ import {
urlValidator,
multiSignEmbed,
embedDocId,
pdfNewWidthFun
pdfNewWidthFun,
signPdfFun
} from "../utils/Utils";
import Loader from "./component/loader";
import HandleError from "./component/HandleError";
@@ -60,6 +61,7 @@ function PdfRequestFiles() {
const [isUiLoading, setIsUiLoading] = useState(false);
const [isDecline, setIsDecline] = useState({ isDeclined: false });
const [currentSigner, setCurrentSigner] = useState(false);
const [isCompleted, setIsCompleted] = useState({
isCertificate: false,
isModal: false
@@ -73,6 +75,7 @@ function PdfRequestFiles() {
const [alreadySign, setAlreadySign] = useState(false);
const [containerWH, setContainerWH] = useState({});
const divRef = useRef(null);
const isMobile = window.innerWidth < 767;
const rowLevel =
localStorage.getItem("rowlevel") &&
JSON.parse(localStorage.getItem("rowlevel"));
@@ -345,14 +348,32 @@ function PdfRequestFiles() {
);
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(
newImgUrl,
documentId,
signerObjectId,
pdfOriginalWidth,
pngUrl,
data,
pdfBase64,
pageNo,
pngUrl
);
containerWH
)
.then((res) => {
if (res && res.status === "success") {
setPdfUrl(res.data);
setIsSigned(true);
setSignedSigners([]);
setUnSignedSigners([]);
getDocumentDetails();
} else {
alert("something went wrong");
}
})
.catch((err) => {
alert("something went wrong");
});
})
.catch((error) => {
console.error("Error:", error);
@@ -372,7 +393,29 @@ function PdfRequestFiles() {
false
);
signPdfFun(pdfBytes, documentId, pngUrl);
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(
pdfBytes,
documentId,
signerObjectId,
pdfOriginalWidth,
pngUrl,
containerWH
)
.then((res) => {
if (res && res.status === "success") {
setPdfUrl(res.data);
setIsSigned(true);
setSignedSigners([]);
setUnSignedSigners([]);
getDocumentDetails();
} else {
alert("something went wrong");
}
})
.catch((err) => {
alert("something went wrong");
});
}
setIsSignPad(false);
@@ -383,227 +426,227 @@ function PdfRequestFiles() {
}
}
//function for call cloud function signPdf and generate digital signature
const signPdfFun = async (
base64Url,
documentId,
xyPosData,
pdfBase64Url,
pageNo,
signerData
) => {
let signgleSign;
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
if (
signerData &&
signerData.length === 1 &&
signerData[0].pos.length === 1
) {
const height = xyPosData.Height ? xyPosData.Height : 60;
// //function for call cloud function signPdf and generate digital signature
// const signPdfFun = async (
// base64Url,
// documentId,
// xyPosData,
// pdfBase64Url,
// pageNo,
// signerData
// ) => {
// let signgleSign;
// const isMobile = window.innerWidth < 767;
// const newWidth = window.innerWidth;
// const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
// if (
// signerData &&
// signerData.length === 1 &&
// signerData[0].pos.length === 1
// ) {
// const height = xyPosData.Height ? xyPosData.Height : 60;
const xPos = (pos) => {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const x = pos.xPosition * (pos.scale / scale);
return x * scale + 50;
} else {
const x = pos.xPosition / scale;
return x * scale;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const x = pos.xPosition * pos.scale + 50;
return x;
} else {
return pos.xPosition;
}
}
};
// const xPos = (pos) => {
// //checking both condition mobile and desktop view
// if (isMobile) {
// //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
// if (pos.isMobile) {
// const x = pos.xPosition * (pos.scale / scale);
// return x * scale + 50;
// } else {
// const x = pos.xPosition / scale;
// return x * scale;
// }
// } else {
// //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
// if (pos.isMobile) {
// const x = pos.xPosition * pos.scale + 50;
// return x;
// } else {
// return pos.xPosition;
// }
// }
// };
const yBottom = (pos) => {
let yPosition;
//checking both condition mobile and desktop view
// const yBottom = (pos) => {
// let yPosition;
// //checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const y = pos.yBottom * (pos.scale / scale);
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
} else {
const y = pos.yBottom / scale;
// if (isMobile) {
// //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
// if (pos.isMobile) {
// const y = pos.yBottom * (pos.scale / scale);
// yPosition = pos.isDrag
// ? y * scale - height
// : pos.firstYPos
// ? y * scale - height + pos.firstYPos
// : y * scale - height;
// return yPosition;
// } else {
// const y = pos.yBottom / scale;
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const y = pos.yBottom * pos.scale;
// yPosition = pos.isDrag
// ? y * scale - height
// : pos.firstYPos
// ? y * scale - height + pos.firstYPos
// : y * scale - height;
// return yPosition;
// }
// } else {
// //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
// if (pos.isMobile) {
// const y = pos.yBottom * pos.scale;
yPosition = pos.isDrag
? y - height
: pos.firstYPos
? y - height + pos.firstYPos
: y - height;
return yPosition;
} else {
yPosition = pos.isDrag
? pos.yBottom - height
: pos.firstYPos
? pos.yBottom - height + pos.firstYPos
: pos.yBottom - height;
return yPosition;
}
}
};
const bottomY = yBottom(xyPosData);
signgleSign = {
pdfFile: pdfBase64Url,
docId: documentId,
userId: signerObjectId,
sign: {
Base64: base64Url,
Left: xPos(xyPosData),
Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width : 150,
Height: height,
Page: pageNo
}
};
} else if (
xyPosData &&
xyPosData.length > 0 &&
xyPosData[0].pos.length > 0
) {
signgleSign = {
pdfFile: base64Url,
docId: documentId,
userId: signerObjectId
};
}
// yPosition = pos.isDrag
// ? y - height
// : pos.firstYPos
// ? y - height + pos.firstYPos
// : y - height;
// return yPosition;
// } else {
// yPosition = pos.isDrag
// ? pos.yBottom - height
// : pos.firstYPos
// ? pos.yBottom - height + pos.firstYPos
// : pos.yBottom - height;
// return yPosition;
// }
// }
// };
// const bottomY = yBottom(xyPosData);
// signgleSign = {
// pdfFile: pdfBase64Url,
// docId: documentId,
// userId: signerObjectId,
// sign: {
// Base64: base64Url,
// Left: xPos(xyPosData),
// Bottom: bottomY,
// Width: xyPosData.Width ? xyPosData.Width : 150,
// Height: height,
// Page: pageNo
// }
// };
// } else if (
// xyPosData &&
// xyPosData.length > 0 &&
// xyPosData[0].pos.length > 0
// ) {
// signgleSign = {
// pdfFile: base64Url,
// docId: documentId,
// userId: signerObjectId
// };
// }
await axios
.post(
`${localStorage.getItem("baseUrl")}functions/signPdf`,
signgleSign,
{
headers: {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken")
}
}
)
.then((Listdata) => {
const json = Listdata.data;
// await axios
// .post(
// `${localStorage.getItem("baseUrl")}functions/signPdf`,
// signgleSign,
// {
// headers: {
// "Content-Type": "application/json",
// "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
// sessionToken: localStorage.getItem("accesstoken")
// }
// }
// )
// .then((Listdata) => {
// const json = Listdata.data;
if (json.result.data) {
setPdfUrl(json.result.data);
setIsSigned(true);
setSignedSigners([]);
setUnSignedSigners([]);
getDocumentDetails();
}
})
.catch((err) => {
console.log("axois err ", err);
alert("something went wrong");
});
};
// if (json.result.data) {
// setPdfUrl(json.result.data);
// setIsSigned(true);
// setSignedSigners([]);
// setUnSignedSigners([]);
// getDocumentDetails();
// }
// })
// .catch((err) => {
// console.log("axois err ", err);
// alert("something went wrong");
// });
// };
//function for resize image and update width and height
const handleImageResize = (ref, key, signerId, position) => {
const filterSignerPos = signerPos.filter(
(data) => data.signerObjId === signerId
);
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos.filter(
(data, ind) => data.key === key && data.Width && data.Height
);
if (getXYdata.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === key) {
return {
...url,
Width: ref.offsetWidth,
Height: ref.offsetHeight,
xPosition: position.x
};
}
return url;
});
// const handleImageResize = (ref, key, signerId, position) => {
// const filterSignerPos = signerPos.filter(
// (data) => data.signerObjId === signerId
// );
// if (filterSignerPos.length > 0) {
// const getPlaceHolder = filterSignerPos[0].placeHolder;
// const getPageNumer = getPlaceHolder.filter(
// (data) => data.pageNumber === pageNumber
// );
// if (getPageNumer.length > 0) {
// const getXYdata = getPageNumer[0].pos.filter(
// (data, ind) => data.key === key && data.Width && data.Height
// );
// if (getXYdata.length > 0) {
// const getXYdata = getPageNumer[0].pos;
// const getPosData = getXYdata;
// const addSignPos = getPosData.map((url, ind) => {
// if (url.key === key) {
// return {
// ...url,
// Width: ref.offsetWidth,
// Height: ref.offsetHeight,
// xPosition: position.x
// };
// }
// return url;
// });
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
// const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
// if (obj.pageNumber === pageNumber) {
// return { ...obj, pos: addSignPos };
// }
// return obj;
// });
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.signerObjId === signerId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
// const newUpdateSigner = signerPos.map((obj, ind) => {
// if (obj.signerObjId === signerId) {
// return { ...obj, placeHolder: newUpdateSignPos };
// }
// return obj;
// });
setSignerPos(newUpdateSigner);
} else {
const getXYdata = getPageNumer[0].pos;
// setSignerPos(newUpdateSigner);
// } else {
// const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
// const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === key) {
return {
...url,
Width: ref.offsetWidth,
Height: ref.offsetHeight
};
}
return url;
});
// const addSignPos = getPosData.map((url, ind) => {
// if (url.key === key) {
// return {
// ...url,
// Width: ref.offsetWidth,
// Height: ref.offsetHeight
// };
// }
// return url;
// });
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
// const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
// if (obj.pageNumber === pageNumber) {
// return { ...obj, pos: addSignPos };
// }
// return obj;
// });
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.signerObjId === signerId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
// const newUpdateSigner = signerPos.map((obj, ind) => {
// if (obj.signerObjId === signerId) {
// return { ...obj, placeHolder: newUpdateSignPos };
// }
// return obj;
// });
setSignerPos(newUpdateSigner);
}
}
}
};
// setSignerPos(newUpdateSigner);
// }
// }
// }
// };
//function for get pdf page details
const pageDetails = async (pdf) => {
@@ -907,7 +950,7 @@ function PdfRequestFiles() {
</div>
)}
<div className="signatureContainer" ref={divRef}>
<div className="signatureContainer">
{/* this modal is used to show decline alert */}
<CustomModal
containerWH={containerWH}
@@ -951,9 +994,10 @@ function PdfRequestFiles() {
{/* pdf render view */}
<div
style={{
marginLeft: pdfOriginalWidth > 500 && "20px",
marginRight: pdfOriginalWidth > 500 && "20px"
marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
}}
ref={divRef}
>
{/* this modal is used show this document is already sign */}
@@ -1017,28 +1061,30 @@ function PdfRequestFiles() {
pdfUrl={pdfUrl}
alreadySign={alreadySign}
/>
<RenderPdf
pageNumber={pageNumber}
pdfOriginalWidth={pdfOriginalWidth}
pdfNewWidth={pdfNewWidth}
setIsSignPad={setIsSignPad}
setIsStamp={setIsStamp}
setSignKey={setSignKey}
pdfDetails={pdfDetails}
signerPos={signerPos}
successEmail={false}
pdfUrl={pdfUrl}
numPages={numPages}
pageDetails={pageDetails}
pdfRequest={true}
signerObjectId={signerObjectId}
signedSigners={signedSigners}
setCurrentSigner={setCurrentSigner}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setSignerPos={setSignerPos}
/>
{containerWH && (
<RenderPdf
pageNumber={pageNumber}
pdfOriginalWidth={pdfOriginalWidth}
pdfNewWidth={pdfNewWidth}
setIsSignPad={setIsSignPad}
setIsStamp={setIsStamp}
setSignKey={setSignKey}
pdfDetails={pdfDetails}
signerPos={signerPos}
successEmail={false}
pdfUrl={pdfUrl}
numPages={numPages}
pageDetails={pageDetails}
pdfRequest={true}
signerObjectId={signerObjectId}
signedSigners={signedSigners}
setCurrentSigner={setCurrentSigner}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setSignerPos={setSignerPos}
containerWH={containerWH}
/>
)}
</div>
<div>
<div className="signerComponent">
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+41 -37
View File
@@ -75,6 +75,7 @@ function SignYourSelf() {
const [tourStatus, setTourStatus] = useState([]);
const [noData, setNoData] = useState(false);
const [contractName, setContractName] = useState("");
const [containerWH, setContainerWH] = useState({});
const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
status: false
});
@@ -91,6 +92,7 @@ function SignYourSelf() {
isOver: !!monitor.isOver()
})
});
const isMobile = window.innerWidth < 767;
const pdfRef = useRef();
@@ -178,6 +180,10 @@ function SignYourSelf() {
if (divRef.current) {
const pdfWidth = pdfNewWidthFun(divRef);
setPdfNewWidth(pdfWidth);
setContainerWH({
width: divRef.current.offsetWidth,
height: divRef.current.offsetHeight
});
}
}, [divRef.current]);
@@ -490,9 +496,7 @@ function SignYourSelf() {
pageNo
) => {
let singleSign;
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth - 32;
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const imgWidth = xyPosData ? xyPosData.Width : 150;
if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
@@ -508,9 +512,7 @@ function SignYourSelf() {
docId: documentId,
sign: {
Base64: base64Url,
Left: isMobile
? xyPosData.xPosition * scale + 43
: xyPosData.xPosition,
Left: isMobile ? xyPosData.xPosition * scale : xyPosData.xPosition,
Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width * scale : 150 * scale,
Height: height * scale,
@@ -823,7 +825,7 @@ function SignYourSelf() {
) : noData ? (
<Nodata />
) : (
<div className="signatureContainer" ref={divRef}>
<div className="signatureContainer">
{/* this component used for UI interaction and show their functionality */}
{pdfLoadFail && !checkTourStatus && (
<Tour
@@ -849,8 +851,8 @@ function SignYourSelf() {
{/* pdf render view */}
<div
style={{
marginLeft: pdfOriginalWidth > 500 && "20px",
marginRight: pdfOriginalWidth > 500 && "20px"
marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
}}
>
{/* this modal is used show this document is already sign */}
@@ -937,34 +939,36 @@ function SignYourSelf() {
isSignYourself={true}
/>
{/* className="hidePdf" */}
<div data-tut="reactourSecond">
<RenderPdf
pageNumber={pageNumber}
pdfOriginalWidth={pdfOriginalWidth}
pdfNewWidth={pdfNewWidth}
drop={drop}
successEmail={successEmail}
nodeRef={nodeRef}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
isDragging={isDragging}
setIsSignPad={setIsSignPad}
setIsStamp={setIsStamp}
handleDeleteSign={handleDeleteSign}
setSignKey={setSignKey}
pdfDetails={pdfDetails}
setIsDragging={setIsDragging}
xyPostion={xyPostion}
pdfRef={pdfRef}
pdfUrl={pdfUrl}
numPages={numPages}
pageDetails={pageDetails}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setXyPostion={setXyPostion}
index={index}
/>
<div data-tut="reactourSecond" ref={divRef}>
{containerWH && (
<RenderPdf
pageNumber={pageNumber}
pdfOriginalWidth={pdfOriginalWidth}
pdfNewWidth={pdfNewWidth}
drop={drop}
successEmail={successEmail}
nodeRef={nodeRef}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
isDragging={isDragging}
setIsSignPad={setIsSignPad}
setIsStamp={setIsStamp}
handleDeleteSign={handleDeleteSign}
setSignKey={setSignKey}
pdfDetails={pdfDetails}
setIsDragging={setIsDragging}
xyPostion={xyPostion}
pdfRef={pdfRef}
pdfUrl={pdfUrl}
numPages={numPages}
pageDetails={pageDetails}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setXyPostion={setXyPostion}
index={index}
containerWH={containerWH}
/>
)}
</div>
</div>
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+52 -83
View File
@@ -44,13 +44,15 @@ function RenderPdf({
pdfLoadFail,
setSignerPos,
setXyPostion,
index
index,
containerWH
}) {
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
//check isGuestSigner is present in local if yes than handle login flow header in mobile view
const isGuestSigner = localStorage.getItem("isGuestSigner");
// handle signature block width and height according to screen
const posWidth = (pos) => {
let width;
@@ -96,7 +98,7 @@ function RenderPdf({
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (!pos.isMobile) {
return pos.xPosition / scale - 20;
return pos.xPosition / scale - 32;
}
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
else {
@@ -106,7 +108,7 @@ function RenderPdf({
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
return pos.scale && pos.xPosition * pos.scale + 50;
return pos.scale && pos.xPosition * pos.scale;
}
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
else {
@@ -129,7 +131,7 @@ function RenderPdf({
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
return pos.scale && pos.yPosition * pos.scale + 50;
return pos.scale && pos.yPosition * pos.scale;
}
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
else {
@@ -181,7 +183,9 @@ function RenderPdf({
position,
signerPos,
pageNumber,
setSignerPos
setSignerPos,
pdfOriginalWidth,
containerWH
);
}}
lockAspectRatio={pos.Width && 2.5}
@@ -247,6 +251,16 @@ function RenderPdf({
);
};
//handled x-position in mobile view saved from big screen or small screen
const xPos = (pos) => {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (!pos.isMobile) {
return pos.xPosition / scale;
} else {
return pos.xPosition * (pos.scale / scale);
}
};
return (
<>
{isMobile && scale ? (
@@ -318,7 +332,9 @@ function RenderPdf({
position,
xyPostion,
index,
setXyPostion
setXyPostion,
pdfOriginalWidth,
containerWH
);
}}
size={{
@@ -331,10 +347,7 @@ function RenderPdf({
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
default={{
x: !pos.isMobile
? pos.xPosition / scale
: pos.xPosition * (pos.scale / scale) - 50,
x: xPos(pos),
y: !pos.isMobile
? pos.yPosition / scale
: pos.yPosition * (pos.scale / scale)
@@ -398,6 +411,16 @@ function RenderPdf({
placeData.pos.map((pos) => {
return (
<Rnd
enableResizing={{
top: false,
right: false,
bottom: false,
left: false,
topRight: false,
bottomRight: true,
bottomLeft: false,
topLeft: false
}}
key={pos.key}
bounds="parent"
style={{
@@ -446,7 +469,9 @@ function RenderPdf({
position,
signerPos,
pageNumber,
setSignerPos
setSignerPos,
pdfOriginalWidth,
containerWH
);
}}
>
@@ -540,7 +565,9 @@ function RenderPdf({
position,
xyPostion,
index,
setXyPostion
setXyPostion,
pdfOriginalWidth,
containerWH
);
}}
>
@@ -634,8 +661,8 @@ function RenderPdf({
<Page
key={index}
pageNumber={pageNumber}
width={window.innerWidth - 32}
height={window.innerHeight - 32}
width={containerWH.width}
height={containerWH.height}
renderAnnotationLayer={false}
renderTextLayer={false}
onGetAnnotationsError={(error) => {
@@ -719,7 +746,9 @@ function RenderPdf({
position,
xyPostion,
index,
setXyPostion
setXyPostion,
pdfOriginalWidth,
containerWH
);
}}
key={pos.key}
@@ -738,8 +767,7 @@ function RenderPdf({
default={{
x: pos.isMobile
? pos.scale &&
pos.xPosition * pos.scale + 20
? pos.scale && pos.xPosition * pos.scale
: pos.xPosition,
y: pos.isMobile
? pos.scale && pos.yPosition * pos.scale
@@ -781,69 +809,6 @@ function RenderPdf({
)}
</div>
</Rnd>
// ) : (
// <Rnd
// data-tut="reactourSecond"
// enableResizing={{
// top: false,
// right: false,
// bottom: false,
// left: false,
// topRight: false,
// bottomRight: false,
// bottomLeft: false,
// topLeft: false
// }}
// key={pos.key}
// bounds="parent"
// style={{
// padding: "0px",
// cursor: "all-scroll",
// zIndex: 1,
// position: "absolute",
// borderStyle: "dashed",
// width: "150px",
// height: "60px",
// borderColor: themeColor(),
// background: "#c1dee0",
// textAlign: "center",
// justifyContent: "center",
// borderWidth: "0.2px"
// }}
// size={{
// width: pos.Width ? pos.Width : 150,
// height: pos.Height ? pos.Height : 60
// }}
// disableDragging={true}
// //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale
// default={{
// x: pos.isMobile
// ? pos.scale &&
// pos.xPosition * pos.scale + 20
// : pos.xPosition,
// y: pos.isMobile
// ? pos.scale && pos.yPosition * pos.scale
// : pos.yPosition
// }}
// onClick={() => {
// setIsSignPad(true);
// setSignKey(pos.key);
// setIsStamp(pos.isStamp);
// }}
// >
// <div
// style={{
// fontSize: "12px",
// color: "black",
// fontWeight: "600",
// justifyContent: "center",
// marginTop: "0px"
// }}
// >
// {pos.isStamp ? "stamp" : "signature"}
// </div>
// </Rnd>
)
);
})}
@@ -927,7 +892,9 @@ function RenderPdf({
position,
signerPos,
pageNumber,
setSignerPos
setSignerPos,
pdfOriginalWidth,
containerWH
);
}}
>
@@ -1022,7 +989,9 @@ function RenderPdf({
position,
xyPostion,
index,
setXyPostion
setXyPostion,
pdfOriginalWidth,
containerWH
);
}}
onClick={() => {
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+33 -24
View File
@@ -57,6 +57,7 @@ function PlaceHolderSign() {
const [noData, setNoData] = useState(false);
const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
const [contractName, setContractName] = useState("");
const [containerWH, setContainerWH] = useState();
const { docId } = useParams();
const signRef = useRef(null);
const dragRef = useRef(null);
@@ -82,8 +83,6 @@ function PlaceHolderSign() {
"#ffffcc"
];
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const scale = pdfOriginalWidth / newWidth;
const [{ isOver }, drop] = useDrop({
accept: "BOX",
drop: (item, monitor) => addPositionOfSignature(item, monitor),
@@ -170,6 +169,10 @@ function PlaceHolderSign() {
if (divRef.current) {
const pdfWidth = pdfNewWidthFun(divRef);
setPdfNewWidth(pdfWidth);
setContainerWH({
width: divRef.current.offsetWidth,
height: divRef.current.offsetHeight
});
}
}, [divRef.current]);
//function for get document details
@@ -254,6 +257,8 @@ function PlaceHolderSign() {
};
const getSignerPos = (item, monitor) => {
const newWidth = containerWH.width;
const scale = pdfOriginalWidth / newWidth;
const key = Math.floor(1000 + Math.random() * 9000);
let filterSignerPos = signerPos.filter(
(data) => data.signerObjId === signerObjId
@@ -753,7 +758,7 @@ function PlaceHolderSign() {
) : noData ? (
<Nodata />
) : (
<div className="signatureContainer" ref={divRef}>
<div className="signatureContainer">
{/* this component used for UI interaction and show their functionality */}
{!checkTourStatus && (
//this tour component used in your html component where you want to put
@@ -780,9 +785,10 @@ function PlaceHolderSign() {
{/* pdf render view */}
<div
style={{
marginLeft: pdfOriginalWidth > 500 && "20px",
marginRight: pdfOriginalWidth > 500 && "20px"
marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
}}
ref={divRef}
>
{/* this modal is used show alert set placeholder for all signers before send mail */}
@@ -929,25 +935,28 @@ function PlaceHolderSign() {
dataTut4="reactourFour"
/>
<div data-tut="reactourThird">
<RenderPdf
pageNumber={pageNumber}
pdfOriginalWidth={pdfOriginalWidth}
pdfNewWidth={pdfNewWidth}
pdfDetails={pdfDetails}
signerPos={signerPos}
successEmail={false}
numPages={numPages}
pageDetails={pageDetails}
placeholder={true}
drop={drop}
handleDeleteSign={handleDeleteSign}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
// handleImageResize={handleImageResize}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setSignerPos={setSignerPos}
/>
{containerWH && (
<RenderPdf
pageNumber={pageNumber}
pdfOriginalWidth={pdfOriginalWidth}
pdfNewWidth={pdfNewWidth}
pdfDetails={pdfDetails}
signerPos={signerPos}
successEmail={false}
numPages={numPages}
pageDetails={pageDetails}
placeholder={true}
drop={drop}
handleDeleteSign={handleDeleteSign}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
// handleImageResize={handleImageResize}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setSignerPos={setSignerPos}
containerWH={containerWH}
/>
)}
</div>
</div>
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+184 -142
View File
@@ -21,7 +21,8 @@ import {
contractDocument,
urlValidator,
multiSignEmbed,
embedDocId
embedDocId,
signPdfFun
} from "../utils/Utils";
import Tour from "reactour";
import Signedby from "./component/signedby";
@@ -448,8 +449,28 @@ function EmbedPdfImage() {
""
);
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(newImgUrl, docId, data, pdfBase64, pageNo);
//function for embed signature in pdf and get digital signature pdf
signPdfFun(
newImgUrl,
docId,
signerUserId,
pdfOriginalWidth,
xyPostion,
data,
pdfBase64,
pageNo,
containerWH
)
.then((res) => {
if (res && res.status === "success") {
getDocumentDetails();
} else {
alert("something went wrong");
}
})
.catch((err) => {
alert("something went wrong!");
});
})
.catch((error) => {
console.error("Error:", error);
@@ -468,7 +489,25 @@ function EmbedPdfImage() {
pdfOriginalWidth,
false
);
signPdfFun(pdfBytes, docId);
//function for embed signature in pdf and get digital signature pdf
signPdfFun(
pdfBytes,
docId,
signerUserId,
pdfOriginalWidth,
xyPostion,
containerWH
)
.then((res) => {
if (res && res.status === "success") {
getDocumentDetails();
} else {
alert("something went wrong!");
}
})
.catch((err) => {
alert("something went wrong in query");
});
}
setIsSignPad(false);
setXyPostion([]);
@@ -476,127 +515,127 @@ function EmbedPdfImage() {
}
//function for call cloud function signPdf and generate digital signature
const signPdfFun = async (
base64Url,
docId,
xyPosData,
pdfBase64Url,
pageNo
) => {
let singleSign;
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const height = xyPosData ? xyPosData.Height : 60;
const xPos = (pos) => {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const x = pos.xPosition * (pos.scale / scale);
return x * scale + 50;
} else {
const x = pos.xPosition / scale;
return x * scale;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const x = pos.xPosition * pos.scale + 50;
return x;
} else {
return pos.xPosition;
}
}
};
// const signPdfFun = async (
// base64Url,
// docId,
// xyPosData,
// pdfBase64Url,
// pageNo
// ) => {
// let singleSign;
// const isMobile = window.innerWidth < 767;
// const newWidth = window.innerWidth;
// const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
// const height = xyPosData ? xyPosData.Height : 60;
// const xPos = (pos) => {
// //checking both condition mobile and desktop view
// if (isMobile) {
// //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
// if (pos.isMobile) {
// const x = pos.xPosition * (pos.scale / scale);
// return x * scale + 50;
// } else {
// const x = pos.xPosition / scale;
// return x * scale;
// }
// } else {
// //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
// if (pos.isMobile) {
// const x = pos.xPosition * pos.scale + 50;
// return x;
// } else {
// return pos.xPosition;
// }
// }
// };
const yBottom = (pos) => {
let yPosition;
//checking both condition mobile and desktop view
// const yBottom = (pos) => {
// let yPosition;
// //checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const y = pos.yBottom * (pos.scale / scale);
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
} else {
const y = pos.yBottom / scale;
// if (isMobile) {
// //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
// if (pos.isMobile) {
// const y = pos.yBottom * (pos.scale / scale);
// yPosition = pos.isDrag
// ? y * scale - height
// : pos.firstYPos
// ? y * scale - height + pos.firstYPos
// : y * scale - height;
// return yPosition;
// } else {
// const y = pos.yBottom / scale;
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const y = pos.yBottom * pos.scale;
// yPosition = pos.isDrag
// ? y * scale - height
// : pos.firstYPos
// ? y * scale - height + pos.firstYPos
// : y * scale - height;
// return yPosition;
// }
// } else {
// //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
// if (pos.isMobile) {
// const y = pos.yBottom * pos.scale;
yPosition = pos.isDrag
? y - height
: pos.firstYPos
? y - height + pos.firstYPos
: y - height;
return yPosition;
} else {
yPosition = pos.isDrag
? pos.yBottom - height
: pos.firstYPos
? pos.yBottom - height + pos.firstYPos
: pos.yBottom - height;
return yPosition;
}
}
};
if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
const bottomY = yBottom(xyPosData);
singleSign = {
pdfFile: pdfBase64Url,
docId: docId,
userId: signerUserId,
sign: {
Base64: base64Url,
Left: xPos(xyPosData),
Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width : 150,
Height: height,
Page: pageNo
}
};
} else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
singleSign = {
pdfFile: base64Url,
docId: docId,
userId: signerUserId
};
}
// yPosition = pos.isDrag
// ? y - height
// : pos.firstYPos
// ? y - height + pos.firstYPos
// : y - height;
// return yPosition;
// } else {
// yPosition = pos.isDrag
// ? pos.yBottom - height
// : pos.firstYPos
// ? pos.yBottom - height + pos.firstYPos
// : pos.yBottom - height;
// return yPosition;
// }
// }
// };
// if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
// const bottomY = yBottom(xyPosData);
// singleSign = {
// pdfFile: pdfBase64Url,
// docId: docId,
// userId: signerUserId,
// sign: {
// Base64: base64Url,
// Left: xPos(xyPosData),
// Bottom: bottomY,
// Width: xyPosData.Width ? xyPosData.Width : 150,
// Height: height,
// Page: pageNo
// }
// };
// } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
// singleSign = {
// pdfFile: base64Url,
// docId: docId,
// userId: signerUserId
// };
// }
await axios
.post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
headers: {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken")
}
})
.then((Listdata) => {
const json = Listdata.data;
// await axios
// .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
// headers: {
// "Content-Type": "application/json",
// "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
// sessionToken: localStorage.getItem("accesstoken")
// }
// })
// .then((Listdata) => {
// const json = Listdata.data;
if (json.result.data) {
getDocumentDetails();
}
})
.catch((err) => {
alert("something went wrong");
});
};
// if (json.result.data) {
// getDocumentDetails();
// }
// })
// .catch((err) => {
// alert("something went wrong");
// });
// };
//function for change page
function changePage(offset) {
@@ -924,9 +963,10 @@ function EmbedPdfImage() {
{/* pdf render view */}
<div
style={{
marginLeft: !isGuestSigner && pdfOriginalWidth > 500 && "20px",
marginRight: !isGuestSigner && pdfOriginalWidth > 500 && "20px"
marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
}}
ref={divRef}
>
{/* this modal is used show this document is already sign */}
<Modal
@@ -1002,27 +1042,29 @@ function EmbedPdfImage() {
decline={true}
alreadySign={pdfUrl ? true : false}
/>
<RenderPdf
pageNumber={pageNumber}
pdfOriginalWidth={pdfOriginalWidth}
pdfNewWidth={pdfNewWidth}
setIsSignPad={setIsSignPad}
setIsStamp={setIsStamp}
setSignKey={setSignKey}
pdfDetails={signedPdfData}
xyPostion={xyPostion}
successEmail={false}
pdfUrl={pdfUrl}
numPages={numPages}
pageDetails={pageDetails}
recipient={true}
isAlreadySign={isAlreadySign}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setXyPostion={setXyPostion}
index={index}
/>
{containerWH && (
<RenderPdf
pageNumber={pageNumber}
pdfOriginalWidth={pdfOriginalWidth}
pdfNewWidth={pdfNewWidth}
setIsSignPad={setIsSignPad}
setIsStamp={setIsStamp}
setSignKey={setSignKey}
pdfDetails={signedPdfData}
xyPostion={xyPostion}
successEmail={false}
pdfUrl={pdfUrl}
numPages={numPages}
pageDetails={pageDetails}
recipient={true}
isAlreadySign={isAlreadySign}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setXyPostion={setXyPostion}
index={index}
containerWH={containerWH}
/>
)}
</div>
{!pdfUrl ? (
microfrontends/SignDocuments/src/utils/Utils.js
+146 -5
View File
@@ -495,11 +495,16 @@ export const handleImageResize = (
position,
signerPos,
pageNumber,
setSignerPos
setSignerPos,
pdfOriginalWidth,
containerWH
) => {
const filterSignerPos = signerPos.filter(
(data) => data.signerObjId === signerId
);
const isMobile = window.innerWidth < 767;
const newWidth = containerWH;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
@@ -516,8 +521,10 @@ export const handleImageResize = (
if (url.key === key) {
return {
...url,
Width: ref.offsetWidth,
Height: ref.offsetHeight,
Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
Height: !url.isMobile
? ref.offsetHeight * scale
: ref.offsetHeight,
xPosition: position.x
};
}
@@ -548,8 +555,10 @@ export const handleImageResize = (
if (url.key === key) {
return {
...url,
Width: ref.offsetWidth,
Height: ref.offsetHeight
Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
Height: !url.isMobile
? ref.offsetHeight * scale
: ref.offsetHeight
};
}
return url;
@@ -637,3 +646,135 @@ export const handleSignYourselfImageResize = (
setXyPostion(newUpdateUrl);
}
};
//function for call cloud function signPdf and generate digital signature
export const signPdfFun = async (
base64Url,
documentId,
signerObjectId,
pdfOriginalWidth,
signerData,
xyPosData,
pdfBase64Url,
pageNo,
containerWH
) => {
let signgleSign;
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
if (signerData && signerData.length === 1 && signerData[0].pos.length === 1) {
const height = xyPosData.Height ? xyPosData.Height : 60;
const xPos = (pos) => {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const x = pos.xPosition * (pos.scale / scale);
return x * scale;
} else {
const x = pos.xPosition / scale;
return x * scale;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const x = pos.xPosition * pos.scale;
return x;
} else {
return pos.xPosition;
}
}
};
const yBottom = (pos) => {
let yPosition;
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const y = pos.yBottom * (pos.scale / scale);
yPosition = pos.isDrag
? y * scale - height * scale
: pos.firstYPos
? y * scale - height * scale + pos.firstYPos
: y * scale - height * scale;
return yPosition;
} else {
const y = pos.yBottom / scale;
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const y = pos.yBottom * pos.scale;
yPosition = pos.isDrag
? y - height
: pos.firstYPos
? y - height + pos.firstYPos
: y - height;
return yPosition;
} else {
yPosition = pos.isDrag
? pos.yBottom - height
: pos.firstYPos
? pos.yBottom - height + pos.firstYPos
: pos.yBottom - height;
return yPosition;
}
}
};
const bottomY = yBottom(xyPosData);
signgleSign = {
pdfFile: pdfBase64Url,
docId: documentId,
userId: signerObjectId,
sign: {
Base64: base64Url,
Left: xPos(xyPosData),
Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width : 150,
Height: height,
Page: pageNo
}
};
} else if (
signerData &&
signerData.length > 0 &&
signerData[0].pos.length > 0
) {
signgleSign = {
pdfFile: base64Url,
docId: documentId,
userId: signerObjectId
};
}
const response = await axios
.post(`${localStorage.getItem("baseUrl")}functions/signPdf`, signgleSign, {
headers: {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken")
}
})
.then((Listdata) => {
const json = Listdata.data;
const res = json.result;
console.log("res", res);
return res;
})
.catch((err) => {
console.log("axois err ", err);
alert("something went wrong");
});
return response;
};