diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
index 2d5bb3b2b..f955a6fd3 100644
--- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
@@ -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]);
@@ -470,8 +476,10 @@ function SignYourSelf() {
pngUrl,
pdfDoc,
pdfOriginalWidth,
- true
+ true,
+ containerWH
);
+
signPdfFun(pdfBytes, documentId);
}
setIsSignPad(false);
@@ -490,9 +498,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 +514,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,
@@ -534,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);
});
};
@@ -692,60 +695,6 @@ function SignYourSelf() {
setSignBtnPosition([xySignature]);
};
- //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);
- }
- };
const handleAllDelete = () => {
setXyPostion([]);
};
@@ -903,8 +852,8 @@ function SignYourSelf() {
{/* pdf render view */}
{placeData.pageNumber === pageNumber &&
placeData.pos.map((pos, index) => {
- return pos && pos.SignUrl ? (
-
- {
- setIsSignPad(true);
- setSignKey(pos.key);
- }}
- >
-
-
- ) : (
- {
- if (data.signerObjId === signerObjectId) {
- setIsSignPad(true);
- setSignKey(pos.key);
- setIsStamp(pos.isStamp);
- }
- }}
- style={{
- padding: "0px",
- cursor: "all-scroll",
- zIndex: 1,
- position: "absolute",
- borderStyle: "dashed",
- width: "200px",
- height: "30px",
- borderColor: themeColor(),
- background: data.blockColor,
- textAlign: "center",
- justifyContent: "center",
- borderWidth: "0.2px"
- }}
- default={{
- x: xPos(pos),
- y: yPos(pos)
- }}
- size={{
- width: posWidth(pos),
- height: posHeight(pos)
- }}
- lockAspectRatio={pos.Width ? pos.Width / pos.Height : 2.5}
- >
-
+
+ )
);
})}
@@ -263,6 +252,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 ? (
@@ -285,135 +284,97 @@ function RenderPdf({
{data.pageNumber === pageNumber &&
data.pos.map((pos) => {
- return pos && pos.SignUrl ? (
- {
- setIsSignPad(true);
- setSignKey(pos.key);
- }}
- >
-
- ) : (
- {
+ handleSignYourselfImageResize(
+ ref,
+ pos.key,
+ direction,
+ position,
+ xyPostion,
+ index,
+ setXyPostion,
+ pdfOriginalWidth,
+ containerWH
+ );
+ }}
+ size={{
+ width: posWidth(pos),
+ height: posHeight(pos)
+ }}
+ lockAspectRatio={
+ pos.Width ? pos.Width / pos.Height : 2.5
+ }
//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
- x: !pos.isMobile
- ? pos.xPosition / scale
- : pos.xPosition * (pos.scale / scale) - 50,
-
- y: !pos.isMobile
- ? pos.yPosition / scale
- : pos.yPosition * (pos.scale / scale)
- }}
- onClick={() => {
- setIsSignPad(true);
- setSignKey(pos.key);
- setIsStamp(pos.isStamp);
- }}
- >
-
+ ![no img]()
{
+ setIsSignPad(true);
+ setSignKey(pos.key);
+ }}
+ src={pos.SignUrl}
+ style={{
+ width: "100%",
+ height: "100%",
+ objectFit: "contain"
+ }}
+ />
+ ) : (
+
@@ -438,22 +399,23 @@ function RenderPdf({
placeData.pos.map((pos) => {
return (
handleTabDrag(
pos.key,
@@ -469,11 +431,6 @@ function RenderPdf({
? pos.Width / pos.Height
: 2.5
}
- resizeHandleStyles={{
- bottom: { display: "none" },
- right: { display: "none" },
- bottomRight: { display: "block" }
- }}
onDragStop={(event, dragElement) =>
handleStop(
event,
@@ -486,21 +443,33 @@ function RenderPdf({
x: pos.xPosition,
y: pos.yPosition
}}
- onResize={(
+ onResizeStart={() => {
+ setIsResize(true);
+ }}
+ onResizeStop={(
e,
direction,
ref,
delta,
position
) => {
+ e.stopPropagation();
handleImageResize(
ref,
pos.key,
data.signerObjId,
- position
+ position,
+ signerPos,
+ pageNumber,
+ setSignerPos,
+ pdfOriginalWidth,
+ containerWH,
+ setIsResize
);
}}
>
+
{data.pageNumber === pageNumber &&
data.pos.map((pos) => {
- return pos && pos.SignUrl ? (
- handleTabDrag(pos.key)}
- onDragStop={handleStop}
- onResize={(
- e,
- direction,
- ref,
- delta,
- position
- ) => {
- handleImageResize(
- ref,
- pos.key,
- direction,
- position
- );
- }}
- >
- {" "}
-
- ) : (
- <>
+ return (
+ pos && (
{
- handleTabDrag(pos.key, e);
- }}
- onDragStop={handleStop}
size={{
- width: pos.Width ? pos.Width : 150,
- height: pos.Height ? pos.Height : 60
+ width: pos.Width ? pos.Width : 151,
+ height: pos.Height ? pos.Height : 61
}}
default={{
x: pos.xPosition,
y: pos.yPosition
}}
+ onDrag={() => handleTabDrag(pos.key)}
+ onDragStop={handleStop}
+ onResize={(
+ e,
+ direction,
+ ref,
+ delta,
+ position
+ ) => {
+ handleSignYourselfImageResize(
+ ref,
+ pos.key,
+ direction,
+ position,
+ xyPostion,
+ index,
+ setXyPostion,
+ pdfOriginalWidth,
+ containerWH
+ );
+ }}
>
+ {" "}
-
+ )
);
})}
@@ -780,8 +654,8 @@ function RenderPdf({
{
@@ -823,135 +697,99 @@ function RenderPdf({
{data.pageNumber === pageNumber &&
data.pos.map((pos) => {
- return pos && pos.SignUrl ? (
- {
- setIsSignPad(true);
- setSignKey(pos.key);
- }}
- >
-
- ) : (
- {
- setIsSignPad(true);
- setSignKey(pos.key);
- setIsStamp(pos.isStamp);
- }}
- >
-
+
+ )
);
})}
@@ -977,21 +815,22 @@ function RenderPdf({
return (
handleTabDrag(
pos.key,
@@ -1007,11 +846,6 @@ function RenderPdf({
? pos.Width / pos.Height
: 2.5
}
- resizeHandleStyles={{
- bottom: { display: "none" },
- right: { display: "none" },
- bottomRight: { display: "block" }
- }}
onDragStop={(event, dragElement) =>
handleStop(
event,
@@ -1024,7 +858,10 @@ function RenderPdf({
x: pos.xPosition,
y: pos.yPosition
}}
- onResize={(
+ onResizeStart={() => {
+ setIsResize(true);
+ }}
+ onResizeStop={(
e,
direction,
ref,
@@ -1035,10 +872,17 @@ function RenderPdf({
ref,
pos.key,
data.signerObjId,
- position
+ position,
+ signerPos,
+ pageNumber,
+ setSignerPos,
+ pdfOriginalWidth,
+ containerWH,
+ setIsResize
);
}}
>
+
{data.pageNumber === pageNumber &&
data.pos.map((pos) => {
- return pos && pos.SignUrl ? (
- handleTabDrag(pos.key)}
- size={{
- width: pos.Width ? pos.Width : 150,
- height: pos.Height ? pos.Height : 60
- }}
- onDragStop={handleStop}
- default={{
- x: pos.xPosition,
- y: pos.yPosition
- }}
- onResize={(
- e,
- direction,
- ref,
- delta,
- position
- ) => {
- handleImageResize(
- ref,
- pos.key,
- direction,
- position
- );
- }}
- onClick={() => {
- if (!isDragging) {
- setIsSignPad(true);
- setSignKey(pos.key);
- setIsStamp(pos.isStamp);
+ return (
+ pos && (
+
-
- ) : (
- handleTabDrag(pos.key, e)}
- size={{
- width: pos.Width ? pos.Width : 150,
- height: pos.Height ? pos.Height : 60
- }}
- onDragStop={handleStop}
- default={{
- x: pos.xPosition,
- y: pos.yPosition
- }}
- >
-
-
+
+
+ {pos.SignUrl ? (
+ 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 */}
@@ -992,33 +941,36 @@ function SignYourSelf() {
setIsEmail={setIsEmail}
/>
- {/* className="hidePdf" */}
diff --git a/microfrontends/SignDocuments/src/Component/component/borderResize.js b/microfrontends/SignDocuments/src/Component/component/borderResize.js
new file mode 100644
index 000000000..1596d09bb
--- /dev/null
+++ b/microfrontends/SignDocuments/src/Component/component/borderResize.js
@@ -0,0 +1,17 @@
+import React from "react";
+
+function BorderResize() {
+ return (
+
+ );
+}
+
+export default BorderResize;
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
index c27fe6a94..8e7626d8b 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
@@ -3,6 +3,11 @@ import RSC from "react-scrollbars-custom";
import { Rnd } from "react-rnd";
import { themeColor } from "../../utils/ThemeColor/backColor";
import { Document, Page, pdfjs } from "react-pdf";
+import BorderResize from "./borderResize";
+import {
+ handleImageResize,
+ handleSignYourselfImageResize
+} from "../../utils/Utils";
import EmailToast from "./emailToast";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
@@ -17,7 +22,6 @@ function RenderPdf({
nodeRef,
handleTabDrag,
handleStop,
- handleImageResize,
isDragging,
setIsSignPad,
setIsStamp,
@@ -37,13 +41,19 @@ function RenderPdf({
signedSigners,
setPdfLoadFail,
placeholder,
- pdfLoadFail
+ pdfLoadFail,
+ setSignerPos,
+ setXyPostion,
+ index,
+ containerWH,
+ setIsResize
}) {
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;
@@ -89,7 +99,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 {
@@ -99,7 +109,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 {
@@ -122,7 +132,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 {
@@ -137,124 +147,103 @@ function RenderPdf({
-
- ![no img]()
{
+ return (
+ pos && (
+
+ {
+ handleImageResize(
+ ref,
+ pos.key,
+ data.signerObjId,
+ position,
+ signerPos,
+ pageNumber,
+ setSignerPos,
+ pdfOriginalWidth,
+ containerWH
+ );
+ }}
+ lockAspectRatio={pos.Width && 2.5}
+ default={{
+ x: xPos(pos),
+ y: yPos(pos)
+ }}
+ onClick={() => {
+ if (data.signerObjId === signerObjectId) {
setIsSignPad(true);
setSignKey(pos.key);
- }}
- src={pos.SignUrl}
- style={{
- width: "100%",
- height: "100%",
- objectFit: "contain"
- }}
- />
-
-
+
+
+ {data.signerObjId === signerObjectId && (
+ ![no img]()
{
+ setIsSignPad(true);
+ setSignKey(pos.key);
+ }}
+ src={pos.SignUrl}
+ style={{
+ width: "100%",
+ height: "100%",
+ objectFit: "contain"
+ }}
+ />
+ ) : (
+ pdfDetails[0].Signers.map((signerData, key) => {
+ return (
+ signerData.objectId === data.signerObjId && (
+
+ )
+ );
+ })
+ )}
+
- {pos.isStamp ? "stamp" : "signature"}
-
-
+ marginTop: "0px"
+ }}
+ >
+ {signerData.Name}
+
- ![no img]()
{
- setIsSignPad(true);
- setSignKey(pos.key);
- }}
- src={pos.SignUrl}
- style={{
- width: "100%",
- height: "100%",
- objectFit: "contain"
- }}
- />
-
- {
+ setIsSignPad(true);
+ setSignKey(pos.key);
}}
>
- {pos.isStamp ? "stamp" : "signature"}
-
-
+ {pos.isStamp ? "stamp" : "signature"}
+
+ )}
+
+ )
);
})}
{
e.stopPropagation();
@@ -510,14 +479,9 @@ function RenderPdf({
);
}}
style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px",
- zIndex: 10
+ background: themeColor()
}}
+ className="placeholdCloseBtn"
>
x
@@ -526,7 +490,6 @@ function RenderPdf({
fontSize: "12px",
color: "black",
fontWeight: "600",
-
marginTop: "0px"
}}
>
@@ -546,206 +509,117 @@ function RenderPdf({
{
- if (!isDragging) {
- setTimeout(() => {
- e.stopPropagation();
- setIsSignPad(true);
- setSignKey(pos.key);
- setIsStamp(pos.isStamp);
- }, 500);
- }
- }}
- >
-
- {
- e.stopPropagation();
- handleDeleteSign(pos.key);
- setIsStamp(false);
- }}
- style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px"
- }}
- >
- x
-
-
- ![signimg]()
{
- setSignKey(pos.key);
- console.log("Drag 2");
- setIsSignPad(true);
- setIsStamp(pos.isStamp);
- }}
- src={pos.SignUrl}
- style={{
- width: "100%",
- height: "100%",
- objectFit: "contain"
- }}
- />
-
- {
if (!isDragging) {
setTimeout(() => {
+ e.stopPropagation();
setIsSignPad(true);
setSignKey(pos.key);
setIsStamp(pos.isStamp);
}, 500);
}
}}
- className="dragElm"
style={{
- padding: "0px",
- cursor: "all-scroll",
- zIndex: 20,
- position: "absolute",
- borderStyle: "dashed",
- width: "150px",
- height: "60px",
- borderColor: themeColor(),
- background: "#daebe0",
- textAlign: "center",
- justifyContent: "center",
- borderWidth: "0.2px",
- overflow: "hidden"
+ height: "100%"
}}
>
+ 
+ ) : (
+
{
e.stopPropagation();
- e.preventDefault();
-
handleDeleteSign(pos.key);
setIsStamp(false);
}}
- onClick={(e) => {
- e.stopPropagation(); // Prevent further event propagation
- }}
style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px"
+ background: themeColor()
}}
+ className="placeholdCloseBtn"
>
x
-
- {pos.isStamp ? "stamp" : "signature"}
-
+ {pos.SignUrl ? (
+
+ {pos.isStamp ? "stamp" : "signature"}
+
+ )}
- ![no img]()
{
- setIsSignPad(true);
- setSignKey(pos.key);
- }}
- src={pos.SignUrl}
- style={{
- width: "100%",
- height: "100%",
- objectFit: "contain"
- }}
- />
-
- {
+ handleSignYourselfImageResize(
+ ref,
+ pos.key,
+ direction,
+ position,
+ xyPostion,
+ index,
+ setXyPostion,
+ pdfOriginalWidth,
+ containerWH
+ );
+ }}
+ key={pos.key}
+ bounds="parent"
style={{
- fontSize: "12px",
- color: "black",
- fontWeight: "600",
- justifyContent: "center",
- marginTop: "0px"
+ cursor: "all-scroll",
+ borderColor: themeColor()
+ }}
+ className="placeholderBlock"
+ size={{
+ width: pos.Width ? pos.Width : 150,
+ height: pos.Height ? pos.Height : 60
+ }}
+ lockAspectRatio={pos.Width && 2.5}
+ //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
+ : pos.xPosition,
+ y: pos.isMobile
+ ? pos.scale && pos.yPosition * pos.scale
+ : pos.yPosition
+ }}
+ onClick={() => {
+ setIsSignPad(true);
+ setSignKey(pos.key);
}}
>
- {pos.isStamp ? "stamp" : "signature"}
-
-
+ ![no img]()
{
+ setIsSignPad(true);
+ setSignKey(pos.key);
+ }}
+ src={pos.SignUrl}
+ style={{
+ width: "100%",
+ height: "100%",
+ objectFit: "contain"
+ }}
+ />
+ ) : (
+
+
+ {pos.isStamp ? "stamp" : "signature"}
+
+ )}
+ {
e.stopPropagation();
@@ -1048,14 +892,9 @@ function RenderPdf({
);
}}
style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px",
- zIndex: 10
+ background: themeColor()
}}
+ className="placeholdCloseBtn"
>
x
@@ -1086,192 +925,115 @@ function RenderPdf({
{
- e.stopPropagation();
- handleDeleteSign(pos.key);
- setIsStamp(false);
+ enableResizing={{
+ top: false,
+ right: false,
+ bottom: false,
+ left: false,
+ topRight: false,
+ bottomRight: true,
+ bottomLeft: false,
+ topLeft: false
}}
+ bounds="parent"
style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px"
+ borderColor: themeColor(),
+ cursor: "all-scroll"
}}
- >
- x
-
-
- ![signimg]()
{
- setSignKey(pos.key);
- setIsSignPad(true);
- setIsStamp(pos.isStamp);
- }}
- src={pos.SignUrl}
- style={{
- width: "100%",
- height: "100%",
- objectFit: "contain"
- }}
- />
-
- {
+ className="placeholderBlock"
+ onDrag={() => handleTabDrag(pos.key)}
+ size={{
+ width: pos.Width ? pos.Width : 150,
+ height: pos.Height ? pos.Height : 60
+ }}
+ onDragStop={handleStop}
+ default={{
+ x: pos.xPosition,
+ y: pos.yPosition
+ }}
+ onResize={(
+ e,
+ direction,
+ ref,
+ delta,
+ position
+ ) => {
+ handleSignYourselfImageResize(
+ ref,
+ pos.key,
+ direction,
+ position,
+ xyPostion,
+ index,
+ setXyPostion,
+ pdfOriginalWidth,
+ containerWH
+ );
+ }}
+ onClick={() => {
if (!isDragging) {
- e.stopPropagation();
setIsSignPad(true);
setSignKey(pos.key);
setIsStamp(pos.isStamp);
}
}}
- style={{
- cursor: "all-scroll",
- zIndex: 10,
- position: "absolute",
- borderStyle: "dashed",
- width: "150px",
- height: "60px",
- borderColor: themeColor(),
- background: "#daebe0",
- textAlign: "center",
- justifyContent: "center",
- alignItems: "center",
- borderWidth: "0.2px"
- }}
>
-
+
+ {
e.stopPropagation();
handleDeleteSign(pos.key);
setIsStamp(false);
}}
style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px"
+ background: themeColor()
}}
+ className="placeholdCloseBtn"
>
x
-
-
- {pos.isStamp ? "stamp" : "signature"}
-
-
+
+
+ ) : (
+
+ {pos.isStamp ? "stamp" : "signature"}
+
+ )}
+
+ )
);
})}
);
}))}
{/* this component for render pdf document is in middle of the component */}
-
500 && "20px",
- marginRight: pdfOriginalWidth > 500 && "20px"
+ marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
+ marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
}}
>
{/* this modal is used show alert set placeholder for all signers before send mail */}
@@ -1009,24 +937,28 @@ function PlaceHolderSign() {
dataTut4="reactourFour"
/>
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
index 0b5595ec0..58a94b89d 100644
--- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
@@ -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);
@@ -466,138 +487,35 @@ function EmbedPdfImage() {
pngUrl,
pdfDoc,
pdfOriginalWidth,
- false
+ false,
+ containerWH
);
- 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([]);
}
}
- //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.yPosition * (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);
@@ -870,9 +788,10 @@ function EmbedPdfImage() {
{/* pdf render view */}
-
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 */}
{!pdfUrl ? (
diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css
index 474d5c3a5..477159b03 100644
--- a/microfrontends/SignDocuments/src/css/signature.css
+++ b/microfrontends/SignDocuments/src/css/signature.css
@@ -8,6 +8,13 @@
.penContainer {
width: 460px;
}
+.borderResize {
+ position: absolute;
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+
+}
.mailBtn{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
padding: 3px 15px !important;
@@ -26,6 +33,8 @@
margin: 2px;
border-radius: 2px;
}
+
+
.signatureBtn {
border: 1.5px solid #47a3ad;
margin-bottom: 10px;
@@ -131,6 +140,48 @@
outline: none;
}
+.resizable-box-overlay {
+ position: absolute;
+ border: 2px solid #ddd;
+ overflow: hidden;
+ background-color: white;
+}
+
+.box-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.close-button {
+ align-self: flex-end;
+ margin: 8px;
+ cursor: pointer;
+}
+
+.placeholdCloseBtn {
+ position: absolute;
+ right: -9px;
+ top: -15px;
+ border-radius: 100%;
+ font-size: 10px;
+ cursor: pointer;
+ padding: 0px 5px;
+}
+.placeholderBlock{
+ padding: 0px;
+ z-index: 1;
+ position: absolute;
+ border-style: dashed;
+ width: 150px;
+ height: 60px;
+ background: #daebe0;
+ text-align: center;
+ justify-content: center;
+ border-width: 0.2px
+}
+
.finishBtn {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
padding: 3px 30px;
@@ -801,10 +852,13 @@ option {
.signature-backdrop {
position: fixed;
- top: 0; bottom: 0; left: 0; right: 0;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
background-color: #000;
}
.signature-backdrop.fade.in {
opacity: 0.5;
-}
+}
\ No newline at end of file
diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js
index 3c98d56eb..b12cf2fc1 100644
--- a/microfrontends/SignDocuments/src/utils/Utils.js
+++ b/microfrontends/SignDocuments/src/utils/Utils.js
@@ -348,7 +348,8 @@ export const multiSignEmbed = async (
pngUrl,
pdfDoc,
pdfOriginalWidth,
- signyourself
+ signyourself,
+ containerWH
) => {
for (let i = 0; i < pngUrl.length; i++) {
const pageNo = pngUrl[i].pageNumber;
@@ -385,12 +386,12 @@ export const multiSignEmbed = async (
const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60;
const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150;
const isMobile = window.innerWidth < 767;
- const newWidth = window.innerWidth - 32;
+ const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const xPos = (pos) => {
if (signyourself) {
if (isMobile) {
- return imgUrlList[id].xPosition * scale + 43;
+ return imgUrlList[id].xPosition * scale;
} else {
return imgUrlList[id].xPosition;
}
@@ -400,7 +401,7 @@ export const multiSignEmbed = async (
//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;
+ return x * scale;
} else {
const x = pos.xPosition / scale;
return x * scale;
@@ -408,7 +409,7 @@ export const multiSignEmbed = async (
} 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;
+ const x = pos.xPosition * pos.scale;
return x;
} else {
return pos.xPosition;
@@ -435,9 +436,9 @@ export const multiSignEmbed = async (
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const y = pos.yPosition * (pos.scale / scale);
- return page.getHeight() - y * scale - imgHeight;
+ return page.getHeight() - y * scale - imgHeight * scale;
} else {
- return page.getHeight() - y * scale - imgHeight;
+ return page.getHeight() - y * scale - imgHeight * scale;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
@@ -454,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
});
});
}
@@ -486,3 +487,308 @@ export const pdfNewWidthFun = (divRef) => {
//160 is width of left side, 200 is width of right side component
return pdfWidth;
};
+
+//function for resize image and update width and height for mulitisigners
+export const handleImageResize = (
+ ref,
+ key,
+ signerId,
+ position,
+ signerPos,
+ pageNumber,
+ setSignerPos,
+ pdfOriginalWidth,
+ containerWH,
+ setIsResize
+) => {
+ 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(
+ (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: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
+ Height: !url.isMobile
+ ? ref.offsetHeight * scale
+ : 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: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
+ Height: !url.isMobile
+ ? ref.offsetHeight * scale
+ : 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);
+ }
+ }
+ }
+ setIsResize && setIsResize(false);
+};
+
+//function for resize image and update width and height for sign-yourself
+export const handleSignYourselfImageResize = (
+ ref,
+ key,
+ direction,
+ position,
+ xyPostion,
+ index,
+ setXyPostion,
+ pdfOriginalWidth,
+ containerWH
+) => {
+ const updateFilter = xyPostion[index].pos.filter(
+ (data) => data.key === key && data.Width && data.Height
+ );
+ const isMobile = window.innerWidth < 767;
+ const newWidth = containerWH;
+ const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
+
+ 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: !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;
+ });
+
+ 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: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
+ // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight
+ 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);
+ }
+};
+
+//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 imgWidth = xyPosData.Width ? xyPosData.Width * scale : 150 * scale;
+ const imgHeight = height * scale;
+ const bottomY = yBottom(xyPosData);
+ signgleSign = {
+ pdfFile: pdfBase64Url,
+ docId: documentId,
+ userId: signerObjectId,
+ sign: {
+ Base64: base64Url,
+ Left: xPos(xyPosData),
+ Bottom: bottomY,
+ Width: imgWidth,
+ Height: imgHeight,
+ 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;
+};