mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-09-11 04:07:40 +02:00
fix: placeholder and signyourself location issue in mobille view
This commit is contained in:
RaktimaNXG
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user