mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-17 21:25:54 +02:00
1366 lines
59 KiB
JavaScript
1366 lines
59 KiB
JavaScript
import React from "react";
|
|
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 {
|
|
addZIndex,
|
|
handleImageResize,
|
|
handleSignYourselfImageResize
|
|
} from "../../utils/Utils";
|
|
import EmailToast from "./emailToast";
|
|
import PlaceholderBorder from "./placeholderBorder";
|
|
|
|
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
|
|
|
|
function RenderPdf({
|
|
pageNumber,
|
|
pdfOriginalWidth,
|
|
pdfNewWidth,
|
|
drop,
|
|
signerPos,
|
|
successEmail,
|
|
nodeRef,
|
|
handleTabDrag,
|
|
handleStop,
|
|
isDragging,
|
|
setIsSignPad,
|
|
setIsStamp,
|
|
handleDeleteSign,
|
|
setSignKey,
|
|
pdfDetails,
|
|
xyPostion,
|
|
pdfRef,
|
|
pdfUrl,
|
|
numPages,
|
|
pageDetails,
|
|
recipient,
|
|
isAlreadySign,
|
|
pdfRequest,
|
|
setCurrentSigner,
|
|
signerObjectId,
|
|
signedSigners,
|
|
setPdfLoadFail,
|
|
placeholder,
|
|
pdfLoadFail,
|
|
setSignerPos,
|
|
setXyPostion,
|
|
index,
|
|
containerWH,
|
|
setIsResize,
|
|
setZIndex,
|
|
handleLinkUser,
|
|
setUniqueId,
|
|
signersdata,
|
|
setIsPageCopy,
|
|
setSignerObjId
|
|
}) {
|
|
const isMobile = window.innerWidth < 767;
|
|
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, signYourself) => {
|
|
const defaultWidth = 150;
|
|
const posWidth = pos.Width ? pos.Width : defaultWidth;
|
|
let width;
|
|
if (signYourself) {
|
|
width = posWidth;
|
|
return width;
|
|
} else {
|
|
if (isMobile) {
|
|
if (!pos.isMobile) {
|
|
if (pos.IsResize) {
|
|
width = posWidth ? posWidth : defaultWidth;
|
|
return width;
|
|
} else {
|
|
width = (posWidth || defaultWidth) / scale;
|
|
return width;
|
|
}
|
|
} else {
|
|
width = posWidth;
|
|
return width;
|
|
}
|
|
} else {
|
|
if (pos.isMobile) {
|
|
if (pos.IsResize) {
|
|
width = posWidth ? posWidth : defaultWidth;
|
|
return width;
|
|
} else {
|
|
width = (posWidth || defaultWidth) * pos.scale;
|
|
return width;
|
|
}
|
|
} else {
|
|
width = posWidth ? posWidth : defaultWidth;
|
|
return width;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const posHeight = (pos, signYourself) => {
|
|
let height;
|
|
const posHeight = pos.Height;
|
|
const defaultHeight = 60;
|
|
if (signYourself) {
|
|
height = posHeight ? posHeight : defaultHeight;
|
|
return height;
|
|
} else {
|
|
if (isMobile) {
|
|
if (!pos.isMobile) {
|
|
if (pos.IsResize) {
|
|
height = posHeight ? posHeight : defaultHeight;
|
|
return height;
|
|
} else {
|
|
height = (posHeight || defaultHeight) / scale;
|
|
return height;
|
|
}
|
|
} else {
|
|
height = posHeight ? posHeight : defaultHeight;
|
|
return height;
|
|
}
|
|
} else {
|
|
if (pos.isMobile) {
|
|
if (pos.IsResize) {
|
|
height = posHeight ? posHeight : defaultHeight;
|
|
return height;
|
|
} else {
|
|
height = (posHeight || defaultHeight) * pos.scale;
|
|
return height;
|
|
}
|
|
} else {
|
|
height = posHeight ? posHeight : defaultHeight;
|
|
return height;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const xPos = (pos, signYourself) => {
|
|
const resizePos = pos.xPosition;
|
|
if (signYourself) {
|
|
return resizePos;
|
|
} else {
|
|
//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) {
|
|
return resizePos / scale;
|
|
}
|
|
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
|
|
else {
|
|
return resizePos * (pos.scale / 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) {
|
|
return pos.scale && resizePos * pos.scale;
|
|
}
|
|
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
|
|
else {
|
|
return resizePos;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const yPos = (pos, signYourself) => {
|
|
const resizePos = pos.yPosition;
|
|
if (signYourself) {
|
|
return resizePos;
|
|
} else {
|
|
//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) {
|
|
return resizePos / scale;
|
|
}
|
|
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
|
|
else {
|
|
return resizePos * (pos.scale / 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) {
|
|
return pos.scale && resizePos * pos.scale;
|
|
}
|
|
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
|
|
else {
|
|
return resizePos;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
//function for render placeholder block over pdf document
|
|
const checkSignedSignes = (data) => {
|
|
const checkSign = signedSigners.filter(
|
|
(sign) => sign.objectId === data.signerObjId
|
|
);
|
|
if (data.signerObjId === signerObjectId) {
|
|
setCurrentSigner(true);
|
|
}
|
|
|
|
return (
|
|
checkSign.length === 0 &&
|
|
data.placeHolder.map((placeData, key) => {
|
|
return (
|
|
<React.Fragment key={key}>
|
|
{placeData.pageNumber === pageNumber &&
|
|
placeData.pos.map((pos, index) => {
|
|
return (
|
|
pos && (
|
|
<React.Fragment key={pos.key}>
|
|
<Rnd
|
|
disableDragging={true}
|
|
enableResizing={{
|
|
top: false,
|
|
right: false,
|
|
bottom: false,
|
|
left: false,
|
|
topRight: false,
|
|
bottomRight:
|
|
data.signerObjId === signerObjectId && true,
|
|
bottomLeft: false,
|
|
topLeft: false
|
|
}}
|
|
bounds="parent"
|
|
style={{
|
|
cursor:
|
|
data.signerObjId === signerObjectId
|
|
? "pointer"
|
|
: "not-allowed",
|
|
background: data.blockColor,
|
|
borderColor: themeColor(),
|
|
borderStyle: "dashed",
|
|
borderWidth: "0.1px",
|
|
zIndex: "1"
|
|
}}
|
|
className="signYourselfBlock"
|
|
size={{
|
|
width: posWidth(pos),
|
|
height: posHeight(pos)
|
|
}}
|
|
onClick={() => {
|
|
if (data.signerObjId === signerObjectId) {
|
|
setIsSignPad(true);
|
|
setSignKey(pos.key);
|
|
setIsStamp(pos.isStamp);
|
|
}
|
|
}}
|
|
onResize={(e, direction, ref, delta, position) => {
|
|
e.stopPropagation();
|
|
handleImageResize(
|
|
ref,
|
|
pos.key,
|
|
data.Id,
|
|
position,
|
|
signerPos,
|
|
pageNumber,
|
|
setSignerPos,
|
|
pdfOriginalWidth,
|
|
containerWH,
|
|
true
|
|
);
|
|
}}
|
|
lockAspectRatio={
|
|
pos.Width ? pos.Width / pos.Height : 2.5
|
|
}
|
|
default={{
|
|
x: xPos(pos),
|
|
y: yPos(pos)
|
|
}}
|
|
>
|
|
<div style={{ pointerEvents: "none" }}>
|
|
{data.signerObjId === signerObjectId && (
|
|
<BorderResize />
|
|
)}
|
|
{pos.SignUrl ? (
|
|
<img
|
|
alt="no img"
|
|
onClick={() => {
|
|
setIsSignPad(true);
|
|
setSignKey(pos.key);
|
|
}}
|
|
src={pos.SignUrl}
|
|
style={{
|
|
width: "99%",
|
|
height: "100%",
|
|
objectFit: "contain"
|
|
}}
|
|
/>
|
|
) : (
|
|
pdfDetails[0].Signers.map((signerData, key) => {
|
|
return (
|
|
signerData.objectId === data.signerObjId && (
|
|
<div
|
|
key={key}
|
|
style={{
|
|
fontSize: "12px",
|
|
color: "black",
|
|
fontWeight: "600",
|
|
|
|
marginTop: "0px"
|
|
}}
|
|
>
|
|
{signerData.Name}
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</Rnd>
|
|
</React.Fragment>
|
|
)
|
|
);
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
})
|
|
);
|
|
};
|
|
|
|
const PlaceholderDesign = ({ pos, data }) => {
|
|
return (
|
|
<div>
|
|
<i
|
|
className="fa-regular fa-copy signCopy"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsPageCopy(true);
|
|
setSignKey(pos.key);
|
|
}}
|
|
style={{
|
|
color: "#188ae2"
|
|
}}
|
|
></i>
|
|
<i
|
|
className="fa-regular fa-circle-xmark signCloseBtn"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (data) {
|
|
handleDeleteSign(pos.key, data.signerObjId);
|
|
} else {
|
|
handleDeleteSign(pos.key);
|
|
setIsStamp(false);
|
|
}
|
|
}}
|
|
style={{
|
|
color: "#188ae2"
|
|
}}
|
|
></i>
|
|
|
|
{pos.SignUrl ? (
|
|
<div style={{ pointerEvents: "none" }}>
|
|
<img
|
|
alt="signimg"
|
|
src={pos.SignUrl}
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain"
|
|
}}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div
|
|
style={{
|
|
fontSize: "10px",
|
|
color: "black",
|
|
justifyContent: "center"
|
|
}}
|
|
>
|
|
{pos.isStamp ? "stamp" : "signature"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
const handleUserName = (signerId, Role) => {
|
|
if (signerId) {
|
|
const checkSign = signersdata.find((sign) => sign.objectId === signerId);
|
|
if (checkSign?.Name) {
|
|
return (
|
|
<>
|
|
<div style={{ color: "black", fontSize: 11 }}>
|
|
{checkSign?.Name}
|
|
</div>
|
|
<div style={{ color: "black", fontSize: 11 }}> {`(${Role})`} </div>
|
|
</>
|
|
);
|
|
} else {
|
|
return <div style={{ color: "black", fontSize: 11 }}> {Role} </div>;
|
|
}
|
|
} else {
|
|
return <div style={{ color: "black", fontSize: 11 }}> {Role} </div>;
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
{isMobile && scale ? (
|
|
<div
|
|
style={{
|
|
border: "0.1px solid #ebe8e8",
|
|
marginTop: isGuestSigner && "30px"
|
|
}}
|
|
ref={drop}
|
|
id="container"
|
|
>
|
|
<EmailToast isShow={successEmail} />
|
|
{pdfLoadFail.status &&
|
|
(recipient
|
|
? !pdfUrl &&
|
|
!isAlreadySign.mssg &&
|
|
xyPostion.length > 0 &&
|
|
xyPostion.map((data, ind) => {
|
|
return (
|
|
<React.Fragment key={ind}>
|
|
{data.pageNumber === pageNumber &&
|
|
data.pos.map((pos) => {
|
|
return (
|
|
pos && (
|
|
<Rnd
|
|
data-tut="reactourSecond"
|
|
disableDragging={true}
|
|
enableResizing={{
|
|
top: false,
|
|
right: false,
|
|
bottom: false,
|
|
left: false,
|
|
topRight: false,
|
|
bottomRight: true,
|
|
bottomLeft: false,
|
|
topLeft: false
|
|
}}
|
|
key={pos.key}
|
|
bounds="parent"
|
|
style={{
|
|
cursor: "all-scroll",
|
|
borderColor: themeColor(),
|
|
borderStyle: "dashed",
|
|
borderWidth: "0.1px",
|
|
zIndex: "1",
|
|
background: data.blockColor
|
|
? data.blockColor
|
|
: "#daebe0"
|
|
}}
|
|
className="signYourselfBlock"
|
|
onResize={(
|
|
e,
|
|
direction,
|
|
ref,
|
|
delta,
|
|
position
|
|
) => {
|
|
handleSignYourselfImageResize(
|
|
ref,
|
|
pos.key,
|
|
xyPostion,
|
|
index,
|
|
setXyPostion
|
|
);
|
|
}}
|
|
size={{
|
|
width: posWidth(pos),
|
|
height: posHeight(pos)
|
|
}}
|
|
lockAspectRatio={
|
|
pos.Width ? pos.Width / pos.Height : 2.5
|
|
}
|
|
default={{
|
|
x: xPos(pos),
|
|
y: yPos(pos)
|
|
}}
|
|
onClick={() => {
|
|
setIsSignPad(true);
|
|
setSignKey(pos.key);
|
|
setIsStamp(
|
|
pos?.isStamp ? pos.isStamp : false
|
|
);
|
|
}}
|
|
>
|
|
<BorderResize />
|
|
{pos.SignUrl ? (
|
|
<img
|
|
alt="no img"
|
|
onClick={() => {
|
|
setIsSignPad(true);
|
|
setSignKey(pos.key);
|
|
}}
|
|
src={pos.SignUrl}
|
|
style={{
|
|
width: "99%",
|
|
height: "100%",
|
|
objectFit: "contain"
|
|
}}
|
|
/>
|
|
) : (
|
|
<div
|
|
style={{
|
|
fontSize: "10px",
|
|
color: "black",
|
|
|
|
justifyContent: "center",
|
|
marginTop: "0px"
|
|
}}
|
|
>
|
|
{pos.isStamp ? (
|
|
<div>stamp</div>
|
|
) : (
|
|
<div>signature</div>
|
|
)}
|
|
{handleUserName(
|
|
data.signerObjId,
|
|
data.Role
|
|
)}
|
|
</div>
|
|
)}
|
|
</Rnd>
|
|
)
|
|
);
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
})
|
|
: pdfRequest
|
|
? signerPos.map((data, key) => {
|
|
return (
|
|
<React.Fragment key={key}>
|
|
{checkSignedSignes(data)}
|
|
</React.Fragment>
|
|
);
|
|
})
|
|
: placeholder // placeholder mobile
|
|
? signerPos.map((data, ind) => {
|
|
return (
|
|
<React.Fragment key={ind}>
|
|
{data.placeHolder.map((placeData, index) => {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
{placeData.pageNumber === pageNumber &&
|
|
placeData.pos.map((pos) => {
|
|
return (
|
|
<Rnd
|
|
bounds="parent"
|
|
enableResizing={{
|
|
top: false,
|
|
right: false,
|
|
bottom: false,
|
|
left: false,
|
|
topRight: false,
|
|
bottomRight: true,
|
|
bottomLeft: false,
|
|
topLeft: false
|
|
}}
|
|
key={pos.key}
|
|
style={{
|
|
cursor: "all-scroll",
|
|
background: data.blockColor,
|
|
borderColor: data.bac,
|
|
zIndex: pos.zIndex
|
|
}}
|
|
className="signYourselfBlock"
|
|
onDrag={() => handleTabDrag(pos.key)}
|
|
size={{
|
|
width: posWidth(pos),
|
|
height: posHeight(pos)
|
|
}}
|
|
// size={{
|
|
// width: pos.Width ? pos.Width : 150,
|
|
// height: pos.Height ? pos.Height : 60
|
|
// }}
|
|
lockAspectRatio={
|
|
pos.Width
|
|
? pos.Width / pos.Height
|
|
: 2.5
|
|
}
|
|
onDragStop={
|
|
(event, dragElement) =>
|
|
handleStop(
|
|
event,
|
|
dragElement,
|
|
data.Id,
|
|
pos.key
|
|
)
|
|
// data.signerObjId,
|
|
}
|
|
// default={{
|
|
// x: pos.xPosition,
|
|
// y: pos.yPosition
|
|
// }}
|
|
default={{
|
|
x: xPos(pos),
|
|
y: yPos(pos)
|
|
}}
|
|
onResizeStart={() => {
|
|
setIsResize(true);
|
|
}}
|
|
onResizeStop={() => {
|
|
setIsResize && setIsResize(false);
|
|
}}
|
|
onResize={(
|
|
e,
|
|
direction,
|
|
ref,
|
|
delta,
|
|
position
|
|
) => {
|
|
handleImageResize(
|
|
ref,
|
|
pos.key,
|
|
data.Id,
|
|
position,
|
|
signerPos,
|
|
pageNumber,
|
|
setSignerPos,
|
|
pdfOriginalWidth,
|
|
containerWH,
|
|
true
|
|
);
|
|
}}
|
|
>
|
|
<BorderResize right={-12} top={-11} />
|
|
<PlaceholderBorder
|
|
pos={pos}
|
|
posWidth={posWidth}
|
|
posHeight={posHeight}
|
|
/>
|
|
<div
|
|
onTouchEnd={() => {
|
|
const dataNewPlace = addZIndex(
|
|
signerPos,
|
|
pos.key,
|
|
setZIndex
|
|
);
|
|
setSignerPos((prevState) => {
|
|
const newState = [...prevState];
|
|
newState.splice(
|
|
0,
|
|
signerPos.length,
|
|
...dataNewPlace
|
|
);
|
|
return newState;
|
|
});
|
|
}}
|
|
>
|
|
<i
|
|
data-tut="reactourLinkUser"
|
|
className="fa-regular fa-user signUserIcon"
|
|
onTouchEnd={(e) => {
|
|
e.stopPropagation();
|
|
handleLinkUser(data.Id);
|
|
setUniqueId(data.Id);
|
|
}}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleLinkUser(data.Id);
|
|
setUniqueId(data.Id);
|
|
}}
|
|
style={{
|
|
color: "#188ae2"
|
|
}}
|
|
></i>
|
|
<i
|
|
className="fa-regular fa-copy signCopy"
|
|
onTouchEnd={(e) => {
|
|
e.stopPropagation();
|
|
setIsPageCopy(true);
|
|
setSignKey(pos.key);
|
|
setSignerObjId(data.signerObjId);
|
|
setUniqueId(data.Id);
|
|
}}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsPageCopy(true);
|
|
setSignKey(pos.key);
|
|
setSignerObjId(data.signerObjId);
|
|
setUniqueId(data.Id);
|
|
}}
|
|
style={{
|
|
color: "#188ae2"
|
|
}}
|
|
></i>
|
|
<i
|
|
className="fa-regular fa-circle-xmark signCloseBtn"
|
|
onTouchEnd={(e) => {
|
|
e.stopPropagation();
|
|
handleDeleteSign(
|
|
pos.key,
|
|
data.Id
|
|
);
|
|
// data.signerObjId
|
|
}}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleDeleteSign(
|
|
pos.key,
|
|
data.Id
|
|
);
|
|
// data.signerObjId
|
|
}}
|
|
style={{
|
|
color: "#188ae2"
|
|
}}
|
|
></i>
|
|
|
|
<div
|
|
style={{
|
|
fontSize: "10px",
|
|
color: "black",
|
|
fontWeight: "500",
|
|
marginTop: "0px"
|
|
}}
|
|
>
|
|
{pos.isStamp ? (
|
|
<div>stamp</div>
|
|
) : (
|
|
<div>signature</div>
|
|
)}
|
|
{handleUserName(
|
|
data.signerObjId,
|
|
data.Role
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Rnd>
|
|
);
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
})
|
|
: xyPostion.map((data, ind) => {
|
|
return (
|
|
<React.Fragment key={ind}>
|
|
{data.pageNumber === pageNumber &&
|
|
data.pos.map((pos) => {
|
|
return (
|
|
pos && (
|
|
<Rnd
|
|
allowAnyClick
|
|
enableResizing={{
|
|
top: false,
|
|
right: false,
|
|
bottom: false,
|
|
left: false,
|
|
topRight: false,
|
|
bottomRight: true,
|
|
bottomLeft: false,
|
|
topLeft: false
|
|
}}
|
|
lockAspectRatio={
|
|
pos.Width ? pos.Width / pos.Height : 2.5
|
|
}
|
|
bounds="parent"
|
|
ref={nodeRef}
|
|
key={pos.key}
|
|
className="signYourselfBlock"
|
|
style={{
|
|
border: "1px solid red",
|
|
cursor: "all-scroll",
|
|
zIndex: "1",
|
|
background: "#daebe0"
|
|
}}
|
|
size={{
|
|
width: posWidth(pos, true),
|
|
height: posHeight(pos, true)
|
|
}}
|
|
default={{
|
|
x: xPos(pos, true),
|
|
y: yPos(pos, true)
|
|
}}
|
|
onDrag={() => handleTabDrag(pos.key)}
|
|
onDragStop={handleStop}
|
|
onResize={(
|
|
e,
|
|
direction,
|
|
ref,
|
|
delta,
|
|
position
|
|
) => {
|
|
handleSignYourselfImageResize(
|
|
ref,
|
|
pos.key,
|
|
xyPostion,
|
|
index,
|
|
setXyPostion
|
|
);
|
|
}}
|
|
>
|
|
<BorderResize right={-12} top={-11} />
|
|
<PlaceholderBorder
|
|
pos={pos}
|
|
posWidth={posWidth}
|
|
isSignYourself={true}
|
|
posHeight={posHeight}
|
|
/>
|
|
<div
|
|
style={{
|
|
left: xPos(pos, true),
|
|
top: yPos(pos, true),
|
|
width: posWidth(pos, true),
|
|
height: posHeight(pos, true),
|
|
zIndex: "10"
|
|
}}
|
|
onTouchEnd={(e) => {
|
|
if (!isDragging && isMobile) {
|
|
setTimeout(() => {
|
|
e.stopPropagation();
|
|
setIsSignPad(true);
|
|
setSignKey(pos.key);
|
|
setIsStamp(pos.isStamp);
|
|
}, 500);
|
|
}
|
|
}}
|
|
>
|
|
<i
|
|
className="fa-regular fa-copy signCopy"
|
|
onTouchEnd={(e) => {
|
|
e.stopPropagation();
|
|
setIsPageCopy(true);
|
|
setSignKey(pos.key);
|
|
}}
|
|
style={{
|
|
color: "#188ae2"
|
|
}}
|
|
></i>
|
|
<i
|
|
className="fa-regular fa-circle-xmark signCloseBtn"
|
|
onTouchEnd={(e) => {
|
|
e.stopPropagation();
|
|
if (data) {
|
|
handleDeleteSign(
|
|
pos.key,
|
|
data.signerObjId
|
|
);
|
|
} else {
|
|
handleDeleteSign(pos.key);
|
|
setIsStamp(false);
|
|
}
|
|
}}
|
|
style={{
|
|
color: "#188ae2"
|
|
}}
|
|
></i>
|
|
|
|
{pos.SignUrl ? (
|
|
<div style={{ pointerEvents: "none" }}>
|
|
<img
|
|
alt="signimg"
|
|
src={pos.SignUrl}
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain"
|
|
}}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div
|
|
style={{
|
|
fontSize: "10px",
|
|
color: "black",
|
|
justifyContent: "center"
|
|
}}
|
|
>
|
|
{pos.isStamp ? "stamp" : "signature"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Rnd>
|
|
)
|
|
);
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
}))}
|
|
|
|
{/* this component for render pdf document is in middle of the component */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<Document
|
|
onLoadError={(e) => {
|
|
if (recipient) {
|
|
setPdfLoadFail(true);
|
|
}
|
|
}}
|
|
onLoadSuccess={pageDetails}
|
|
ref={pdfRef}
|
|
file={
|
|
pdfUrl
|
|
? pdfUrl
|
|
: pdfDetails[0] && pdfDetails[0].SignedUrl
|
|
? pdfDetails[0].SignedUrl
|
|
: pdfDetails[0].URL
|
|
}
|
|
>
|
|
{Array.from(new Array(numPages), (el, index) => (
|
|
<Page
|
|
key={index}
|
|
pageNumber={pageNumber}
|
|
width={containerWH.width}
|
|
height={containerWH.height}
|
|
renderAnnotationLayer={false}
|
|
renderTextLayer={false}
|
|
onGetAnnotationsError={(error) => {
|
|
console.log("annotation error", error);
|
|
}}
|
|
/>
|
|
))}
|
|
</Document>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<RSC
|
|
style={{
|
|
position: "relative",
|
|
boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
|
|
width:
|
|
pdfOriginalWidth > pdfNewWidth ? pdfNewWidth : pdfOriginalWidth,
|
|
height: window.innerHeight - 110 + "px"
|
|
}}
|
|
noScrollY={false}
|
|
noScrollX={pdfNewWidth < pdfOriginalWidth ? false : true}
|
|
>
|
|
<div
|
|
style={{
|
|
border: "0.1px solid #ebe8e8",
|
|
width: pdfOriginalWidth
|
|
}}
|
|
ref={drop}
|
|
id="container"
|
|
>
|
|
<EmailToast isShow={successEmail} />
|
|
{pdfLoadFail.status &&
|
|
(recipient
|
|
? !pdfUrl &&
|
|
!isAlreadySign.mssg &&
|
|
xyPostion.length > 0 &&
|
|
xyPostion.map((data, ind) => {
|
|
return (
|
|
<React.Fragment key={ind}>
|
|
{data.pageNumber === pageNumber &&
|
|
data.pos.map((pos) => {
|
|
return (
|
|
pos && (
|
|
<Rnd
|
|
data-tut="reactourSecond"
|
|
disableDragging={true}
|
|
enableResizing={{
|
|
top: false,
|
|
right: false,
|
|
bottom: false,
|
|
left: false,
|
|
topRight: false,
|
|
bottomRight: true,
|
|
bottomLeft: false,
|
|
topLeft: false
|
|
}}
|
|
onResize={(
|
|
e,
|
|
direction,
|
|
ref,
|
|
delta,
|
|
position
|
|
) => {
|
|
handleSignYourselfImageResize(
|
|
ref,
|
|
pos.key,
|
|
xyPostion,
|
|
index,
|
|
setXyPostion
|
|
);
|
|
}}
|
|
key={pos.key}
|
|
bounds="parent"
|
|
style={{
|
|
cursor: "all-scroll",
|
|
borderColor: themeColor(),
|
|
borderStyle: "dashed",
|
|
borderWidth: "0.1px",
|
|
zIndex: "1",
|
|
background: data.blockColor
|
|
? data.blockColor
|
|
: "#daebe0"
|
|
}}
|
|
className="signYourselfBlock"
|
|
size={{
|
|
width: posWidth(pos),
|
|
height: posHeight(pos)
|
|
}}
|
|
lockAspectRatio={
|
|
pos.Width ? pos.Width / pos.Height : 2.5
|
|
}
|
|
default={{
|
|
x: xPos(pos),
|
|
y: yPos(pos)
|
|
}}
|
|
onClick={() => {
|
|
setIsSignPad(true);
|
|
setSignKey(pos.key);
|
|
setIsStamp(
|
|
pos?.isStamp ? pos.isStamp : false
|
|
);
|
|
}}
|
|
>
|
|
<div style={{ pointerEvents: "none" }}>
|
|
<BorderResize />
|
|
{pos.SignUrl ? (
|
|
<img
|
|
alt="no img"
|
|
onClick={() => {
|
|
setIsSignPad(true);
|
|
setSignKey(pos.key);
|
|
}}
|
|
src={pos.SignUrl}
|
|
style={{
|
|
width: "99%",
|
|
height: "100%",
|
|
objectFit: "contain"
|
|
}}
|
|
/>
|
|
) : (
|
|
<div
|
|
style={{
|
|
fontSize: "10px",
|
|
color: "black",
|
|
fontWeight: "600",
|
|
justifyContent: "center",
|
|
marginTop: "0px"
|
|
}}
|
|
>
|
|
{pos.isStamp ? (
|
|
<div>stamp</div>
|
|
) : (
|
|
<div>signature</div>
|
|
)}
|
|
{handleUserName(
|
|
data.signerObjId,
|
|
data.Role
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Rnd>
|
|
)
|
|
);
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
})
|
|
: pdfRequest
|
|
? signerPos.map((data, key) => {
|
|
return (
|
|
<React.Fragment key={key}>
|
|
{checkSignedSignes(data)}
|
|
</React.Fragment>
|
|
);
|
|
})
|
|
: placeholder
|
|
? signerPos.map((data, ind) => {
|
|
return (
|
|
<React.Fragment key={ind}>
|
|
{data.placeHolder.map((placeData, index) => {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
{placeData.pageNumber === pageNumber &&
|
|
placeData.pos.map((pos) => {
|
|
return (
|
|
<Rnd
|
|
onClick={() => {
|
|
const dataNewPlace = addZIndex(
|
|
signerPos,
|
|
pos.key,
|
|
setZIndex
|
|
);
|
|
setSignerPos((prevState) => {
|
|
const newState = [...prevState];
|
|
newState.splice(
|
|
0,
|
|
signerPos.length,
|
|
...dataNewPlace
|
|
);
|
|
return newState;
|
|
});
|
|
}}
|
|
key={pos.key}
|
|
enableResizing={{
|
|
top: false,
|
|
right: false,
|
|
bottom: false,
|
|
left: false,
|
|
topRight: false,
|
|
bottomRight: true,
|
|
bottomLeft: false,
|
|
topLeft: false
|
|
}}
|
|
bounds="parent"
|
|
style={{
|
|
cursor: "all-scroll",
|
|
background: data.blockColor,
|
|
zIndex: pos.zIndex
|
|
}}
|
|
className="signYourselfBlock"
|
|
onDrag={() => handleTabDrag(pos.key)}
|
|
size={{
|
|
width: posWidth(pos),
|
|
height: posHeight(pos)
|
|
}}
|
|
lockAspectRatio={
|
|
pos.Width
|
|
? pos.Width / pos.Height
|
|
: 2.5
|
|
}
|
|
onDragStop={
|
|
(event, dragElement) =>
|
|
handleStop(
|
|
event,
|
|
dragElement,
|
|
data.Id,
|
|
pos.key
|
|
)
|
|
// data.signerObjId,
|
|
}
|
|
// default={{
|
|
// x: pos.xPosition,
|
|
// y: pos.yPosition
|
|
// }}
|
|
default={{
|
|
x: xPos(pos),
|
|
y: yPos(pos)
|
|
}}
|
|
onResizeStart={() => {
|
|
setIsResize(true);
|
|
}}
|
|
onResizeStop={() => {
|
|
setIsResize && setIsResize(false);
|
|
}}
|
|
onResize={(
|
|
e,
|
|
direction,
|
|
ref,
|
|
delta,
|
|
position
|
|
) => {
|
|
e.stopPropagation();
|
|
handleImageResize(
|
|
ref,
|
|
pos.key,
|
|
data.Id, //data.signerObjId,
|
|
position,
|
|
signerPos,
|
|
pageNumber,
|
|
setSignerPos,
|
|
pdfOriginalWidth,
|
|
containerWH,
|
|
false
|
|
);
|
|
}}
|
|
>
|
|
<BorderResize right={-12} top={-11} />
|
|
<PlaceholderBorder
|
|
pos={pos}
|
|
posWidth={posWidth}
|
|
posHeight={posHeight}
|
|
/>
|
|
<div>
|
|
<i
|
|
data-tut="reactourLinkUser"
|
|
className="fa-regular fa-user signUserIcon"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleLinkUser(data.Id);
|
|
setUniqueId(data.Id);
|
|
}}
|
|
style={{
|
|
color: "#188ae2"
|
|
}}
|
|
></i>
|
|
<i
|
|
className="fa-regular fa-copy signCopy"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsPageCopy(true);
|
|
setSignKey(pos.key);
|
|
setUniqueId(data.Id);
|
|
setSignerObjId(
|
|
data.signerObjId
|
|
);
|
|
}}
|
|
style={{
|
|
color: "#188ae2"
|
|
}}
|
|
></i>
|
|
<i
|
|
className="fa-regular fa-circle-xmark signCloseBtn"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleDeleteSign(
|
|
pos.key,
|
|
data.Id
|
|
);
|
|
// data.signerObjId
|
|
}}
|
|
style={{
|
|
color: "#188ae2"
|
|
}}
|
|
></i>
|
|
|
|
<div
|
|
style={{
|
|
fontSize: "10px",
|
|
color: "black",
|
|
justifyContent: "center"
|
|
}}
|
|
>
|
|
{pos.isStamp ? (
|
|
<div>stamp</div>
|
|
) : (
|
|
<div>signature</div>
|
|
)}
|
|
{handleUserName(
|
|
data.signerObjId,
|
|
data.Role
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Rnd>
|
|
);
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
})
|
|
: xyPostion.map((data, ind) => {
|
|
return (
|
|
<React.Fragment key={ind}>
|
|
{data.pageNumber === pageNumber &&
|
|
data.pos.map((pos) => {
|
|
return (
|
|
pos && (
|
|
<Rnd
|
|
ref={nodeRef}
|
|
key={pos.key}
|
|
lockAspectRatio={
|
|
pos.Width ? pos.Width / pos.Height : 2.5
|
|
}
|
|
enableResizing={{
|
|
top: false,
|
|
right: false,
|
|
bottom: false,
|
|
left: false,
|
|
topRight: false,
|
|
bottomRight: true,
|
|
bottomLeft: false,
|
|
topLeft: false
|
|
}}
|
|
bounds="parent"
|
|
className="signYourselfBlock"
|
|
style={{
|
|
border: "1px solid red",
|
|
cursor: "all-scroll",
|
|
zIndex: "1",
|
|
background: "#daebe0"
|
|
}}
|
|
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
|
|
}}
|
|
onClick={() => {
|
|
if (!isDragging) {
|
|
setIsSignPad(true);
|
|
setSignKey(pos.key);
|
|
setIsStamp(pos.isStamp);
|
|
}
|
|
}}
|
|
onResize={(
|
|
e,
|
|
direction,
|
|
ref,
|
|
delta,
|
|
position
|
|
) => {
|
|
e.stopPropagation();
|
|
handleSignYourselfImageResize(
|
|
ref,
|
|
pos.key,
|
|
xyPostion,
|
|
index,
|
|
setXyPostion
|
|
);
|
|
}}
|
|
>
|
|
<BorderResize right={-12} top={-11} />
|
|
<PlaceholderBorder
|
|
pos={pos}
|
|
posWidth={posWidth}
|
|
posHeight={posHeight}
|
|
/>
|
|
<PlaceholderDesign pos={pos} />
|
|
</Rnd>
|
|
)
|
|
);
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
}))}
|
|
{/* this component for render pdf document is in middle of the component */}
|
|
<Document
|
|
onLoadError={(e) => {
|
|
if (recipient) {
|
|
const load = {
|
|
status: false,
|
|
type: "failed"
|
|
};
|
|
setPdfLoadFail(load);
|
|
}
|
|
}}
|
|
onLoadSuccess={pageDetails}
|
|
ref={pdfRef}
|
|
file={
|
|
pdfUrl
|
|
? pdfUrl
|
|
: pdfDetails[0] && pdfDetails[0].SignedUrl
|
|
? pdfDetails[0].SignedUrl
|
|
: pdfDetails[0].URL
|
|
}
|
|
>
|
|
{Array.from(new Array(numPages), (el, index) => (
|
|
<Page
|
|
key={index}
|
|
pageNumber={pageNumber}
|
|
renderAnnotationLayer={false}
|
|
renderTextLayer={false}
|
|
onGetAnnotationsError={(error) => {
|
|
console.log("annotation error", error);
|
|
}}
|
|
/>
|
|
))}
|
|
</Document>
|
|
</div>
|
|
</RSC>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default RenderPdf;
|