WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-20 06:35:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: image resize placeholder location issue in mobile to mobile and desktop to desktop view

Browse Source
This commit is contained in:
RaktimaNXG
2023-12-06 16:37:59 +05:30
parent dd536dc7d0
commit dec13e8b5f
6 changed files with 95 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+1 -224
View File
@@ -426,228 +426,6 @@ 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;
// 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
// 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 - 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;
// 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 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;
// });
// setSignerPos(newUpdateSigner);
// } else {
// 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
// };
// }
// return url;
// });
// 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;
// });
// setSignerPos(newUpdateSigner);
// }
// }
// }
// };
//function for get pdf page details
const pageDetails = async (pdf) => {
const load = {
@@ -950,7 +728,7 @@ function PdfRequestFiles() {
</div>
)}
<div className="signatureContainer">
<div className="signatureContainer" ref={divRef}>
{/* this modal is used to show decline alert */}
<CustomModal
containerWH={containerWH}
@@ -997,7 +775,6 @@ function PdfRequestFiles() {
marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
}}
ref={divRef}
>
{/* this modal is used show this document is already sign */}
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+6 -5
View File
@@ -476,8 +476,10 @@ function SignYourSelf() {
pngUrl,
pdfDoc,
pdfOriginalWidth,
true
true,
containerWH
);
signPdfFun(pdfBytes, documentId);
}
setIsSignPad(false);
@@ -536,14 +538,13 @@ function SignYourSelf() {
})
.then((Listdata) => {
const json = Listdata.data;
// console.log("json ", json);
setPdfUrl(json.result.data);
if (json.result.data) {
getDocumentDetails(false);
}
})
.catch((err) => {
// this.setState({ loading: false });
console.log("axois err ", err);
});
};
@@ -825,7 +826,7 @@ function SignYourSelf() {
) : noData ? (
<Nodata />
) : (
<div className="signatureContainer">
<div className="signatureContainer" ref={divRef}>
{/* this component used for UI interaction and show their functionality */}
{pdfLoadFail && !checkTourStatus && (
<Tour
@@ -940,7 +941,7 @@ function SignYourSelf() {
setIsEmail={setIsEmail}
/>
<div data-tut="reactourSecond" ref={divRef}>
<div data-tut="reactourSecond">
{containerWH && (
<RenderPdf
pageNumber={pageNumber}
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+15 -6
View File
@@ -9,7 +9,6 @@ import {
handleSignYourselfImageResize
} from "../../utils/Utils";
import EmailToast from "./emailToast";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
@@ -46,7 +45,8 @@ function RenderPdf({
setSignerPos,
setXyPostion,
index,
containerWH
containerWH,
setIsResize
}) {
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
@@ -443,13 +443,17 @@ function RenderPdf({
x: pos.xPosition,
y: pos.yPosition
}}
onResize={(
onResizeStart={() => {
setIsResize(true);
}}
onResizeStop={(
e,
direction,
ref,
delta,
position
) => {
e.stopPropagation();
handleImageResize(
ref,
pos.key,
@@ -459,7 +463,8 @@ function RenderPdf({
pageNumber,
setSignerPos,
pdfOriginalWidth,
containerWH
containerWH,
setIsResize
);
}}
>
@@ -853,7 +858,10 @@ function RenderPdf({
x: pos.xPosition,
y: pos.yPosition
}}
onResize={(
onResizeStart={() => {
setIsResize(true);
}}
onResizeStop={(
e,
direction,
ref,
@@ -869,7 +877,8 @@ function RenderPdf({
pageNumber,
setSignerPos,
pdfOriginalWidth,
containerWH
containerWH,
setIsResize
);
}}
>
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+49 -47
View File
@@ -64,6 +64,7 @@ function PlaceHolderSign() {
const divRef = useRef(null);
const [isShowEmail, setIsShowEmail] = useState(false);
const [selectedEmail, setSelectedEmail] = useState(false);
const [isResize, setIsResize] = useState(false);
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
@@ -402,56 +403,58 @@ function PlaceHolderSign() {
//function for set and update x and y postion after drag and drop signature tab
const handleStop = (event, dragElement, signerId, key) => {
const containerRect = document
.getElementById("container")
.getBoundingClientRect();
const signId = signerId ? signerId : signerObjId;
const keyValue = key ? key : dragKey;
const ybottom = containerRect.height - dragElement.y;
if (!isResize) {
const containerRect = document
.getElementById("container")
.getBoundingClientRect();
const signId = signerId ? signerId : signerObjId;
const keyValue = key ? key : dragKey;
const ybottom = containerRect.height - dragElement.y;
if (keyValue >= 0) {
const filterSignerPos = signerPos.filter(
(data) => data.signerObjId === signId
);
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
if (keyValue >= 0) {
const filterSignerPos = signerPos.filter(
(data) => data.signerObjId === signId
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === keyValue) {
return {
...url,
xPosition: dragElement.x,
yPosition: dragElement.y,
isDrag: true,
yBottom: ybottom
};
}
return url;
});
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
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 === signId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
setSignerPos(newUpdateSigner);
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === keyValue) {
return {
...url,
xPosition: dragElement.x,
yPosition: dragElement.y,
isDrag: true,
yBottom: ybottom
};
}
return url;
});
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 === signId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
}
}
}
}
@@ -758,7 +761,7 @@ function PlaceHolderSign() {
) : noData ? (
<Nodata />
) : (
<div className="signatureContainer">
<div className="signatureContainer" ref={divRef}>
{/* this component used for UI interaction and show their functionality */}
{!checkTourStatus && (
//this tour component used in your html component where you want to put
@@ -788,7 +791,6 @@ function PlaceHolderSign() {
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 */}
@@ -950,11 +952,11 @@ function PlaceHolderSign() {
handleDeleteSign={handleDeleteSign}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
// handleImageResize={handleImageResize}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setSignerPos={setSignerPos}
containerWH={containerWH}
setIsResize={setIsResize}
/>
)}
</div>
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+3 -178
View File
@@ -487,8 +487,10 @@ function EmbedPdfImage() {
pngUrl,
pdfDoc,
pdfOriginalWidth,
false
false,
containerWH
);
//function for embed signature in pdf and get digital signature pdf
signPdfFun(
pdfBytes,
@@ -514,129 +516,6 @@ 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 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;
// 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
// };
// }
// 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");
// });
// };
//function for change page
function changePage(offset) {
setPageNumber((prevPageNumber) => prevPageNumber + offset);
@@ -851,60 +730,6 @@ function EmbedPdfImage() {
);
};
// //function for resize image and update width and height
// const handleImageResize = (ref, key, direction, position) => {
// const updateFilter = xyPostion[index].pos.filter(
// (data, ind) => data.key === key && data.Width && data.Height
// );
// if (updateFilter.length > 0) {
// const getXYdata = xyPostion[index].pos;
// const getPosData = getXYdata;
// const addSign = getPosData.map((url, ind) => {
// if (url.key === key) {
// return {
// ...url,
// Width: ref.offsetWidth,
// Height: ref.offsetHeight,
// xPosition: position.x
// };
// }
// return url;
// });
// const newUpdateUrl = xyPostion.map((obj, ind) => {
// if (ind === index) {
// return { ...obj, pos: addSign };
// }
// return obj;
// });
// setXyPostion(newUpdateUrl);
// } else {
// const getXYdata = xyPostion[index].pos;
// const getPosData = getXYdata;
// const addSign = getPosData.map((url, ind) => {
// if (url.key === key) {
// return {
// ...url,
// Width: ref.offsetWidth,
// Height: ref.offsetHeight
// };
// }
// return url;
// });
// const newUpdateUrl = xyPostion.map((obj, ind) => {
// if (ind === index) {
// return { ...obj, pos: addSign };
// }
// return obj;
// });
// setXyPostion(newUpdateUrl);
// }
// };
return (
<DndProvider backend={HTML5Backend}>
{isLoading.isLoad ? (
microfrontends/SignDocuments/src/utils/Utils.js
+21 -16
View File
@@ -455,8 +455,8 @@ export const multiSignEmbed = async (
page.drawImage(img, {
x: xPos(imgUrlList[id]),
y: yPos(imgUrlList[id]),
width: signyourself ? imgWidth * scale : imgWidth,
height: signyourself ? imgHeight * scale : imgHeight
width: imgWidth * scale,
height: imgHeight * scale
});
});
}
@@ -498,7 +498,8 @@ export const handleImageResize = (
pageNumber,
setSignerPos,
pdfOriginalWidth,
containerWH
containerWH,
setIsResize
) => {
const filterSignerPos = signerPos.filter(
(data) => data.signerObjId === signerId
@@ -520,14 +521,13 @@ export const handleImageResize = (
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === key) {
console.log("url", url);
return {
...url,
Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
Height: !url.isMobile
? ref.offsetHeight * scale
: ref.offsetHeight,
xPosition: position.x
: ref.offsetHeight
// xPosition: position.x
};
}
return url;
@@ -584,6 +584,7 @@ export const handleImageResize = (
}
}
}
setIsResize && setIsResize(false);
};
//function for resize image and update width and height for sign-yourself
@@ -601,7 +602,6 @@ export const handleSignYourselfImageResize = (
const updateFilter = xyPostion[index].pos.filter(
(data) => data.key === key && data.Width && data.Height
);
// console.log(" position.x", position.x)
const isMobile = window.innerWidth < 767;
const newWidth = containerWH;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
@@ -611,12 +611,13 @@ export const handleSignYourselfImageResize = (
const getPosData = getXYdata;
const addSign = getPosData.map((url, ind) => {
if (url.key === key) {
console.log("url", url);
return {
...url,
Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight,
xPosition: position.xpos
// Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
// Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight,
Width: ref.offsetWidth,
Height: ref.offsetHeight
// xPosition: position.xpos
};
}
return url;
@@ -639,8 +640,10 @@ export const handleSignYourselfImageResize = (
if (url.key === key) {
return {
...url,
Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight
// Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
// Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight
Width: ref.offsetWidth,
Height: ref.offsetHeight
};
}
return url;
@@ -740,6 +743,8 @@ export const signPdfFun = async (
}
}
};
const imgWidth = xyPosData.Width ? xyPosData.Width * scale : 150 * scale;
const imgHeight = height * scale;
const bottomY = yBottom(xyPosData);
signgleSign = {
pdfFile: pdfBase64Url,
@@ -749,8 +754,8 @@ export const signPdfFun = async (
Base64: base64Url,
Left: xPos(xyPosData),
Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width : 150,
Height: height,
Width: imgWidth,
Height: imgHeight,
Page: pageNo
}
};
@@ -777,7 +782,7 @@ export const signPdfFun = async (
.then((Listdata) => {
const json = Listdata.data;
const res = json.result;
console.log("res", res);
// console.log("res", res);
return res;
})
.catch((err) => {