mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-20 22:52:39 +02:00
handled placeholder from all devices, remove underline from certificate,login page style,solved reactour issue for document owner from login flow, need your sign reports finish button issue,remove commented code, delete button(cross) on email documents popup issue and solve some minor design issue
This commit is contained in:
RaktimaNXG
@@ -5,8 +5,6 @@ import { Rnd } from "react-rnd";
|
||||
import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
import { Document, Page, pdfjs } from "react-pdf";
|
||||
|
||||
// import Draggable from "react-draggable";
|
||||
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
|
||||
|
||||
function RenderPdf({
|
||||
@@ -41,19 +39,64 @@ function RenderPdf({
|
||||
placeholder,
|
||||
pdfLoadFail
|
||||
}) {
|
||||
const isMobile = window.innerWidth < 712;
|
||||
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const newWidth = window.innerWidth;
|
||||
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
|
||||
//function for render placeholder block over pdf document
|
||||
|
||||
const checkSignedSignes = (data) => {
|
||||
// console.log("data",data)
|
||||
const checkSign = signedSigners.filter(
|
||||
(sign) => sign.objectId === data.signerObjId
|
||||
);
|
||||
if (data.signerObjId === signerObjectId) {
|
||||
setCurrentSigner(true);
|
||||
}
|
||||
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) {
|
||||
return pos.xPosition / scale;
|
||||
}
|
||||
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
|
||||
else {
|
||||
return pos.xPosition * (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 && pos.xPosition * pos.scale + 50;
|
||||
}
|
||||
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
|
||||
else {
|
||||
return pos.xPosition;
|
||||
}
|
||||
}
|
||||
};
|
||||
const yPos = (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) {
|
||||
return pos.yPosition / scale;
|
||||
}
|
||||
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
|
||||
else {
|
||||
return pos.yPosition * (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 && pos.yPosition * pos.scale + 50;
|
||||
}
|
||||
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
|
||||
else {
|
||||
return pos.yPosition;
|
||||
}
|
||||
}
|
||||
};
|
||||
return (
|
||||
checkSign.length === 0 &&
|
||||
data.placeHolder.map((placeData, key) => {
|
||||
@@ -96,10 +139,8 @@ function RenderPdf({
|
||||
}}
|
||||
lockAspectRatio={pos.Width && 2.5}
|
||||
default={{
|
||||
x: pos.scale
|
||||
? pos.xPosition * pos.scale
|
||||
: pos.xPosition,
|
||||
y: pos.scale ? pos.yPosition * pos.scale : pos.yPosition
|
||||
x: xPos(pos),
|
||||
y: yPos(pos)
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsSignPad(true);
|
||||
@@ -160,8 +201,8 @@ function RenderPdf({
|
||||
borderWidth: "0.2px"
|
||||
}}
|
||||
default={{
|
||||
x: pos.scale ? pos.xPosition * pos.scale : pos.xPosition,
|
||||
y: pos.scale ? pos.yPosition * pos.scale : pos.yPosition
|
||||
x: xPos(pos),
|
||||
y: yPos(pos)
|
||||
}}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
@@ -174,7 +215,7 @@ function RenderPdf({
|
||||
fontSize: "12px",
|
||||
color: "black",
|
||||
fontWeight: "600",
|
||||
// justifyContent: "center",
|
||||
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
@@ -191,26 +232,10 @@ function RenderPdf({
|
||||
|
||||
return (
|
||||
<>
|
||||
{isMobile ? (
|
||||
// <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",
|
||||
// marginTop: "50px",
|
||||
// }}
|
||||
// noScrollY={false}
|
||||
// noScrollX={pdfNewWidth < pdfOriginalWidth ? false : true}
|
||||
// >
|
||||
{isMobile && scale ? (
|
||||
<div
|
||||
style={{
|
||||
border: "0.1px solid #ebe8e8"
|
||||
// marginTop: "50px",
|
||||
|
||||
// height:window.innerHeight-100+'px',
|
||||
// width:window.innerWidth
|
||||
}}
|
||||
ref={drop}
|
||||
id="container"
|
||||
@@ -273,9 +298,17 @@ function RenderPdf({
|
||||
height: pos.Height ? pos.Height : 60
|
||||
}}
|
||||
lockAspectRatio={pos.Width && 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
|
||||
default={{
|
||||
x: pos.xPosition,
|
||||
y: pos.yPosition
|
||||
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);
|
||||
@@ -333,8 +366,16 @@ function RenderPdf({
|
||||
}}
|
||||
disableDragging={true}
|
||||
default={{
|
||||
x: pos.xPosition,
|
||||
y: pos.yPosition
|
||||
//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);
|
||||
@@ -409,7 +450,14 @@ function RenderPdf({
|
||||
right: { display: "none" },
|
||||
bottomRight: { display: "block" }
|
||||
}}
|
||||
onDragStop={handleStop}
|
||||
onDragStop={(event, dragElement) =>
|
||||
handleStop(
|
||||
event,
|
||||
dragElement,
|
||||
data.signerObjId,
|
||||
pos.key
|
||||
)
|
||||
}
|
||||
default={{
|
||||
x: pos.xPosition,
|
||||
y: pos.yPosition
|
||||
@@ -437,13 +485,6 @@ function RenderPdf({
|
||||
data.signerObjId
|
||||
);
|
||||
}}
|
||||
// onClick={(e) => {
|
||||
// e.stopPropagation();
|
||||
// handleDeleteSign(
|
||||
// pos.key,
|
||||
// data.signerObjId
|
||||
// );
|
||||
// }}
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
@@ -461,7 +502,7 @@ function RenderPdf({
|
||||
fontSize: "12px",
|
||||
color: "black",
|
||||
fontWeight: "600",
|
||||
// justifyContent: "center",
|
||||
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
@@ -532,7 +573,6 @@ function RenderPdf({
|
||||
>
|
||||
{" "}
|
||||
<div
|
||||
// className="dragElm"
|
||||
onTouchStart={(e) => {
|
||||
if (!isDragging) {
|
||||
setTimeout(() => {
|
||||
@@ -545,18 +585,12 @@ function RenderPdf({
|
||||
}}
|
||||
>
|
||||
<div
|
||||
// className="dragElm"
|
||||
ref={nodeRef}
|
||||
onTouchStart={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(pos.key);
|
||||
setIsStamp(false);
|
||||
}}
|
||||
// onClick={(e) => {
|
||||
// e.stopPropagation();
|
||||
// handleDeleteSign(pos.key);
|
||||
// setIsStamp(false);
|
||||
// }}
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
@@ -590,10 +624,8 @@ function RenderPdf({
|
||||
<>
|
||||
<Rnd
|
||||
allowAnyClick
|
||||
// cancel=".dragElm"
|
||||
ref={nodeRef}
|
||||
key={pos.key}
|
||||
// lockAspectRatio={2.5}
|
||||
lockAspectRatio={
|
||||
pos.Width ? pos.Width / pos.Height : 2.5
|
||||
}
|
||||
@@ -616,53 +648,22 @@ function RenderPdf({
|
||||
onDrag={(e) => {
|
||||
handleTabDrag(pos.key, e);
|
||||
}}
|
||||
// onMouseUp={(e) => handleTabDrag(pos.key, e)}
|
||||
onDragStop={handleStop}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
height: pos.Height ? pos.Height : 60
|
||||
}}
|
||||
// onMouseDown={(e) => {
|
||||
|
||||
// if (!isDragging) {
|
||||
// console.log("child m=event",isDragging);
|
||||
// setTimeout(() => {
|
||||
// if(isDeleted){
|
||||
// setIsSignPad(true);
|
||||
// // setIsSignPad(false)
|
||||
// setSignKey(pos.key);
|
||||
// setIsStamp(pos.isStamp);
|
||||
|
||||
// }else{
|
||||
// setIsSignPad(true);
|
||||
// // setIsSignPad(false)
|
||||
// setSignKey(pos.key);
|
||||
// setIsStamp(pos.isStamp);
|
||||
// }
|
||||
|
||||
// }, 500);
|
||||
// }
|
||||
// }}
|
||||
default={{
|
||||
x: pos.xPosition,
|
||||
y: pos.yPosition
|
||||
}}
|
||||
|
||||
// onClick={(e) => {
|
||||
// if (!isDragging) {
|
||||
// e.stopPropagation();
|
||||
// setIsSignPad(true);
|
||||
// setSignKey(pos.key);
|
||||
// setIsStamp(pos.isStamp);
|
||||
// }
|
||||
// }}
|
||||
>
|
||||
<div
|
||||
onTouchStart={(e) => {
|
||||
if (!isDragging) {
|
||||
setTimeout(() => {
|
||||
setIsSignPad(true);
|
||||
//setIsSignPad(false)
|
||||
|
||||
setSignKey(pos.key);
|
||||
setIsStamp(pos.isStamp);
|
||||
}, 500);
|
||||
@@ -686,21 +687,9 @@ function RenderPdf({
|
||||
}}
|
||||
>
|
||||
<div
|
||||
// onMouseDown={(e) => {
|
||||
// console.log("child m=event")
|
||||
// e.preventDefault();
|
||||
// setIsDragging(true)
|
||||
|
||||
// handleDeleteSign(pos.key);
|
||||
// setIsStamp(false);
|
||||
// setTimeout(()=>{
|
||||
// setIsDragging(false)
|
||||
// },2000)
|
||||
// }}
|
||||
onTouchStart={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
// setIsDragging(true);
|
||||
|
||||
handleDeleteSign(pos.key);
|
||||
setIsStamp(false);
|
||||
@@ -756,7 +745,6 @@ function RenderPdf({
|
||||
onLoadSuccess={pageDetails}
|
||||
ref={pdfRef}
|
||||
file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
|
||||
// file="https://qikinnovation.ams3.digitaloceanspaces.com/exported_file_2068_2023-08-30T05%3A04%3A26.334Z.pdf" // "https://api.printnode.com/static/test/pdf/multipage.pdf" // {pdfUrl ? pdfUrl : signPdfUrl}
|
||||
>
|
||||
{Array.from(new Array(numPages), (el, index) => (
|
||||
<Page
|
||||
@@ -764,7 +752,6 @@ function RenderPdf({
|
||||
pageNumber={pageNumber}
|
||||
width={window.innerWidth}
|
||||
height={window.innerHeight}
|
||||
// scale={1}
|
||||
renderAnnotationLayer={false}
|
||||
renderTextLayer={false}
|
||||
onGetAnnotationsError={(error) => {
|
||||
@@ -776,7 +763,6 @@ function RenderPdf({
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// </RSC>
|
||||
<RSC
|
||||
style={{
|
||||
position: "relative",
|
||||
@@ -854,12 +840,15 @@ function RenderPdf({
|
||||
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.scale
|
||||
? pos.xPosition * pos.scale
|
||||
x: pos.isMobile
|
||||
? pos.scale &&
|
||||
pos.xPosition * pos.scale + 20
|
||||
: pos.xPosition,
|
||||
y: pos.scale
|
||||
? pos.yPosition * pos.scale
|
||||
y: pos.isMobile
|
||||
? pos.scale && pos.yPosition * pos.scale
|
||||
: pos.yPosition
|
||||
}}
|
||||
onClick={() => {
|
||||
@@ -917,12 +906,15 @@ function RenderPdf({
|
||||
height: pos.Height ? pos.Height : 60
|
||||
}}
|
||||
disableDragging={true}
|
||||
//if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale
|
||||
|
||||
default={{
|
||||
x: pos.scale
|
||||
? pos.xPosition * pos.scale
|
||||
x: pos.isMobile
|
||||
? pos.scale &&
|
||||
pos.xPosition * pos.scale + 20
|
||||
: pos.xPosition,
|
||||
y: pos.scale
|
||||
? pos.yPosition * pos.scale
|
||||
y: pos.isMobile
|
||||
? pos.scale && pos.yPosition * pos.scale
|
||||
: pos.yPosition
|
||||
}}
|
||||
onClick={() => {
|
||||
@@ -998,7 +990,14 @@ function RenderPdf({
|
||||
right: { display: "none" },
|
||||
bottomRight: { display: "block" }
|
||||
}}
|
||||
onDragStop={handleStop}
|
||||
onDragStop={(event, dragElement) =>
|
||||
handleStop(
|
||||
event,
|
||||
dragElement,
|
||||
data.signerObjId,
|
||||
pos.key
|
||||
)
|
||||
}
|
||||
default={{
|
||||
x: pos.xPosition,
|
||||
y: pos.yPosition
|
||||
@@ -1043,7 +1042,7 @@ function RenderPdf({
|
||||
fontSize: "12px",
|
||||
color: "black",
|
||||
fontWeight: "600",
|
||||
// justifyContent: "center",
|
||||
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
@@ -1067,7 +1066,6 @@ function RenderPdf({
|
||||
<Rnd
|
||||
ref={nodeRef}
|
||||
key={pos.key}
|
||||
// lockAspectRatio={2.5}
|
||||
lockAspectRatio={
|
||||
pos.Width ? pos.Width / pos.Height : 2.5
|
||||
}
|
||||
@@ -1158,7 +1156,6 @@ function RenderPdf({
|
||||
<Rnd
|
||||
ref={nodeRef}
|
||||
key={pos.key}
|
||||
// lockAspectRatio={2.5}
|
||||
lockAspectRatio={
|
||||
pos.Width ? pos.Width / pos.Height : 2.5
|
||||
}
|
||||
@@ -1264,13 +1261,11 @@ function RenderPdf({
|
||||
onLoadSuccess={pageDetails}
|
||||
ref={pdfRef}
|
||||
file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
|
||||
// file="https://qikinnovation.ams3.digitaloceanspaces.com/exported_file_2068_2023-08-30T05%3A04%3A26.334Z.pdf" // "https://api.printnode.com/static/test/pdf/multipage.pdf" // {pdfUrl ? pdfUrl : signPdfUrl}
|
||||
>
|
||||
{Array.from(new Array(numPages), (el, index) => (
|
||||
<Page
|
||||
key={index}
|
||||
pageNumber={pageNumber}
|
||||
// width={pdfNewWidth}
|
||||
renderAnnotationLayer={false}
|
||||
renderTextLayer={false}
|
||||
onGetAnnotationsError={(error) => {
|
||||
|
||||
Reference in New Issue
Block a user