mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-30 19:59:49 +02:00
feat: placeholder copy all pages feature at same location and change placeholder design
This commit is contained in:
RaktimaNXG
@@ -1,12 +1,12 @@
|
||||
import React from "react";
|
||||
|
||||
function BorderResize() {
|
||||
function BorderResize({ right, top }) {
|
||||
return (
|
||||
<div
|
||||
className="borderResize"
|
||||
style={{
|
||||
right: "-1px",
|
||||
bottom: "-1px",
|
||||
right: right ? right + "px" : "-1px",
|
||||
bottom: top ? top + "px" : "-1px",
|
||||
borderRight: "3px solid #188ae2",
|
||||
borderBottom: "3px solid #188ae2"
|
||||
}}
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
import React, { useState } from "react";
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
import ModalHeader from "react-bootstrap/esm/ModalHeader";
|
||||
import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
|
||||
function CopyAllPage(props) {
|
||||
const allpage = ["All pages", "All pages but last", "All pages but first"];
|
||||
const [selectData, setSelectData] = useState("");
|
||||
|
||||
const randomKey = () => {
|
||||
const randomId = Math.floor(1000 + Math.random() * 9000);
|
||||
return randomId;
|
||||
};
|
||||
|
||||
const allPagesCondition = (
|
||||
isAlreadyPage,
|
||||
type,
|
||||
rest,
|
||||
newPageNumber,
|
||||
getAlreadyPos
|
||||
) => {
|
||||
let obj;
|
||||
|
||||
if (isAlreadyPage === 1 && type === "first") {
|
||||
const filterPos =
|
||||
getAlreadyPos &&
|
||||
getAlreadyPos.filter((data) => data.xPosition !== rest.xPosition);
|
||||
if (filterPos && filterPos.length > 0) {
|
||||
return (obj = {
|
||||
pageNumber: newPageNumber,
|
||||
pos: [...filterPos]
|
||||
});
|
||||
}
|
||||
} else if (newPageNumber === props.allPages && type === "last") {
|
||||
const filterPos =
|
||||
getAlreadyPos &&
|
||||
getAlreadyPos.filter((data) => data.xPosition !== rest.xPosition);
|
||||
|
||||
if (getAlreadyPos) {
|
||||
return (obj = {
|
||||
pageNumber: newPageNumber,
|
||||
pos: [...filterPos]
|
||||
});
|
||||
}
|
||||
} else if (getAlreadyPos) {
|
||||
const filterPos =
|
||||
getAlreadyPos &&
|
||||
getAlreadyPos.filter((data) => data.xPosition !== rest.xPosition);
|
||||
|
||||
return (obj = {
|
||||
pageNumber: newPageNumber,
|
||||
pos: [...filterPos, rest]
|
||||
});
|
||||
} else {
|
||||
return (obj = {
|
||||
pageNumber: newPageNumber,
|
||||
pos: [rest]
|
||||
});
|
||||
}
|
||||
};
|
||||
const addPos = (type) => {
|
||||
let newXyPos = [];
|
||||
let newPageNumber = 1;
|
||||
const signerPos = props.xyPostion;
|
||||
|
||||
if (props.signerObjId) {
|
||||
const filterSignerPos = signerPos.filter(
|
||||
(data) => data.signerObjId === props.signerObjId
|
||||
);
|
||||
const xyData = filterSignerPos[0].placeHolder.filter(
|
||||
(data) => data.pageNumber === props.pageNumber
|
||||
);
|
||||
|
||||
const posData = xyData[0].pos.filter((pos) => pos.key === props.signKey);
|
||||
for (let i = 0; i < props.allPages; i++) {
|
||||
const { key, ...rest } = posData[0];
|
||||
const newId = randomKey();
|
||||
rest.key = newId;
|
||||
const getAlreadyPos =
|
||||
filterSignerPos[0].placeHolder[i] &&
|
||||
filterSignerPos[0].placeHolder[i].pos;
|
||||
|
||||
const isAlreadyPage =
|
||||
filterSignerPos[0].placeHolder[i] &&
|
||||
filterSignerPos[0].placeHolder[i].pageNumber;
|
||||
|
||||
const getObj = allPagesCondition(
|
||||
isAlreadyPage,
|
||||
type,
|
||||
rest,
|
||||
newPageNumber,
|
||||
getAlreadyPos
|
||||
);
|
||||
if (getObj) {
|
||||
newXyPos.push(getObj);
|
||||
}
|
||||
newPageNumber++;
|
||||
}
|
||||
|
||||
const addSign = signerPos.map((url, ind) => {
|
||||
if (url.signerObjId === props.signerObjId) {
|
||||
return {
|
||||
...url,
|
||||
placeHolder: newXyPos
|
||||
};
|
||||
}
|
||||
return url;
|
||||
});
|
||||
|
||||
const newSignerData = signerPos;
|
||||
newSignerData.splice(0, signerPos.length, ...addSign);
|
||||
props.setXyPostion(newSignerData);
|
||||
} else {
|
||||
const xyPostion = props.xyPostion;
|
||||
|
||||
const xyData = xyPostion.filter(
|
||||
(data) => data.pageNumber === props.pageNumber
|
||||
);
|
||||
const posData = xyData[0].pos.filter((pos) => pos.key === props.signKey);
|
||||
|
||||
for (let i = 0; i < props.allPages; i++) {
|
||||
const isAlreadyPage = xyPostion[i] && xyPostion[i].pageNumber;
|
||||
const getAlreadyPos = xyPostion[i] && xyPostion[i].pos;
|
||||
const { key, ...rest } = posData[0];
|
||||
const newId = randomKey();
|
||||
rest.key = newId;
|
||||
const getObj = allPagesCondition(
|
||||
isAlreadyPage,
|
||||
type,
|
||||
rest,
|
||||
newPageNumber,
|
||||
getAlreadyPos
|
||||
);
|
||||
if (getObj) {
|
||||
newXyPos.push(getObj);
|
||||
}
|
||||
|
||||
newPageNumber++;
|
||||
}
|
||||
props.setXyPostion(newXyPos);
|
||||
}
|
||||
};
|
||||
|
||||
const applyAllPage = () => {
|
||||
if (selectData === "All pages") {
|
||||
addPos("all");
|
||||
} else if (selectData === "All pages but last") {
|
||||
addPos("last");
|
||||
} else if (selectData === "All pages but first") {
|
||||
addPos("first");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal show={props.isPageCopy}>
|
||||
<ModalHeader style={{ background: themeColor() }}>
|
||||
<span style={{ color: "white" }}>Place All pages</span>
|
||||
</ModalHeader>
|
||||
|
||||
<Modal.Body>
|
||||
{allpage.map((data, key) => {
|
||||
return (
|
||||
<div key={key} style={{ display: "flex", flexDirection: "column" }}>
|
||||
<label key={key} style={{ fontSize: "16px", fontWeight: "500" }}>
|
||||
<input
|
||||
style={{ accentColor: "red", marginRight: "10px" }}
|
||||
type="radio"
|
||||
value={data}
|
||||
onChange={() => setSelectData(data)}
|
||||
checked={selectData === data}
|
||||
/>
|
||||
|
||||
{data}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<button
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
onClick={() => props.setIsPageCopy(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
applyAllPage();
|
||||
props.setIsPageCopy(false);
|
||||
}}
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
type="button"
|
||||
disabled={!selectData}
|
||||
className="finishBtn"
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default CopyAllPage;
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
import { resizeBorderExtraWidth } from "../../utils/Utils";
|
||||
function PlaceholderBorder(props) {
|
||||
const getResizeBorderExtraWidth = resizeBorderExtraWidth();
|
||||
|
||||
return (
|
||||
<div
|
||||
// onTouchStart={(e) => {
|
||||
// if (!props.isDragging && props.isMobile) {
|
||||
// setTimeout(() => {
|
||||
// e.stopPropagation();
|
||||
// props.setIsSignPad(true);
|
||||
// props.setSignKey(props.pos.key);
|
||||
// props.setIsStamp(props.pos.isStamp);
|
||||
// }, 500);
|
||||
// }
|
||||
// }}
|
||||
className="borderResize"
|
||||
style={{
|
||||
borderColor: themeColor(),
|
||||
borderStyle: "dashed",
|
||||
width: props.pos.Width
|
||||
? props.pos.Width + getResizeBorderExtraWidth
|
||||
: 150 + getResizeBorderExtraWidth,
|
||||
height: props.pos.Height
|
||||
? props.pos.Height + getResizeBorderExtraWidth
|
||||
: 60 + getResizeBorderExtraWidth,
|
||||
borderWidth: "0.2px",
|
||||
overflow: "hidden"
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlaceholderBorder;
|
||||
@@ -10,6 +10,7 @@ function RenderAllPdfPage({
|
||||
setAllPages,
|
||||
setPageNumber,
|
||||
setSignBtnPosition,
|
||||
pageNumber
|
||||
}) {
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
|
||||
|
||||
@@ -20,75 +21,80 @@ function RenderAllPdfPage({
|
||||
|
||||
return (
|
||||
<div className="showPages">
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
|
||||
backgroundColor: "white",
|
||||
height:"100%"
|
||||
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "140px" }}>
|
||||
<div
|
||||
style={{
|
||||
background: themeColor(),
|
||||
// color:"white"
|
||||
}}
|
||||
className="signedStyle"
|
||||
>
|
||||
Pages
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
|
||||
backgroundColor: "white",
|
||||
height: "100%"
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "140px" }}>
|
||||
<div
|
||||
style={{
|
||||
background: themeColor()
|
||||
// color:"white"
|
||||
}}
|
||||
className="signedStyle"
|
||||
>
|
||||
Pages
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<RSC id="RSC-Example" style={{width:"135px",height:window.innerHeight-130+'px'}} >
|
||||
<Document
|
||||
onLoadSuccess={onDocumentLoad}
|
||||
file={pdfUrl ? pdfUrl : signPdfUrl}
|
||||
// file="https://api.printnode.com/static/test/pdf/multipage.pdf"
|
||||
<div>
|
||||
<RSC
|
||||
id="RSC-Example"
|
||||
style={{
|
||||
width: "135px",
|
||||
height: window.innerHeight - 130 + "px"
|
||||
}}
|
||||
>
|
||||
{Array.from(new Array(allPages), (el, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
width: "100px",
|
||||
border: "2px solid #878787",
|
||||
// padding: "5px",
|
||||
margin: "10px",
|
||||
<Document
|
||||
onLoadSuccess={onDocumentLoad}
|
||||
file={pdfUrl ? pdfUrl : signPdfUrl}
|
||||
// file="https://api.printnode.com/static/test/pdf/multipage.pdf"
|
||||
>
|
||||
{Array.from(new Array(allPages), (el, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
width: "100px",
|
||||
border:
|
||||
pageNumber - 1 === index
|
||||
? "2px solid red"
|
||||
: "2px solid #878787",
|
||||
// padding: "5px",
|
||||
margin: "10px",
|
||||
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
contain: "content",
|
||||
}}
|
||||
onClick={() => {
|
||||
setPageNumber(index + 1);
|
||||
if (setSignBtnPosition) {
|
||||
setSignBtnPosition([]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Page
|
||||
key={`page_${index + 1}`}
|
||||
pageNumber={index + 1}
|
||||
width={100}
|
||||
height={100}
|
||||
scale={1}
|
||||
renderAnnotationLayer={false}
|
||||
renderTextLayer={false}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Document>
|
||||
</RSC>
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
contain: "content"
|
||||
}}
|
||||
onClick={() => {
|
||||
setPageNumber(index + 1);
|
||||
if (setSignBtnPosition) {
|
||||
setSignBtnPosition([]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Page
|
||||
key={`page_${index + 1}`}
|
||||
pageNumber={index + 1}
|
||||
width={100}
|
||||
height={100}
|
||||
scale={1}
|
||||
renderAnnotationLayer={false}
|
||||
renderTextLayer={false}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Document>
|
||||
</RSC>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
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`;
|
||||
|
||||
@@ -48,7 +49,9 @@ function RenderPdf({
|
||||
index,
|
||||
containerWH,
|
||||
setIsResize,
|
||||
setZIndex
|
||||
setZIndex,
|
||||
setIsPageCopy,
|
||||
setSignerObjId
|
||||
}) {
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const newWidth = containerWH.width;
|
||||
@@ -58,66 +61,118 @@ function RenderPdf({
|
||||
|
||||
// handle signature block width and height according to screen
|
||||
const posWidth = (pos) => {
|
||||
const defaultWidth = 150;
|
||||
const posWidth = pos.Width ? pos.Width : defaultWidth;
|
||||
let width;
|
||||
if (isMobile) {
|
||||
if (!pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
width = pos.Width ? pos.Width : 150;
|
||||
width = posWidth ? posWidth : defaultWidth;
|
||||
return width;
|
||||
} else {
|
||||
width = (pos.Width || 150) / scale;
|
||||
width = (posWidth || defaultWidth) / scale;
|
||||
return width;
|
||||
}
|
||||
} else {
|
||||
width = pos.Width ? pos.Width : 150;
|
||||
width = posWidth ? posWidth : defaultWidth;
|
||||
return width;
|
||||
}
|
||||
} else {
|
||||
if (pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
width = pos.Width ? pos.Width : 150;
|
||||
width = posWidth ? posWidth : defaultWidth;
|
||||
return width;
|
||||
} else {
|
||||
width = (pos.Width || 150) * pos.scale;
|
||||
width = (posWidth || defaultWidth) * pos.scale;
|
||||
return width;
|
||||
}
|
||||
} else {
|
||||
width = pos.Width ? pos.Width : 150;
|
||||
width = posWidth ? posWidth : defaultWidth;
|
||||
return width;
|
||||
}
|
||||
}
|
||||
};
|
||||
const posHeight = (pos) => {
|
||||
let height;
|
||||
const posHeight = pos.Height;
|
||||
const defaultHeight = 60;
|
||||
if (isMobile) {
|
||||
if (!pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
height = pos.Height ? pos.Height : 60;
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
} else {
|
||||
height = (pos.Height || 60) / scale;
|
||||
height = (posHeight || defaultHeight) / scale;
|
||||
return height;
|
||||
}
|
||||
} else {
|
||||
height = pos.Height ? pos.Height : 60;
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
}
|
||||
} else {
|
||||
if (pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
height = pos.Height ? pos.Height : 60;
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
} else {
|
||||
height = (pos.Height || 60) * pos.scale;
|
||||
height = (posHeight || defaultHeight) * pos.scale;
|
||||
return height;
|
||||
}
|
||||
} else {
|
||||
height = pos.Height ? pos.Height : 60;
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const xPos = (pos) => {
|
||||
const resizePos = pos.xPosition;
|
||||
//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) => {
|
||||
const resizePos = pos.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) {
|
||||
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(
|
||||
@@ -126,52 +181,7 @@ function RenderPdf({
|
||||
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;
|
||||
}
|
||||
//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;
|
||||
}
|
||||
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
|
||||
else {
|
||||
return pos.yPosition;
|
||||
}
|
||||
}
|
||||
};
|
||||
return (
|
||||
checkSign.length === 0 &&
|
||||
data.placeHolder.map((placeData, key) => {
|
||||
@@ -201,11 +211,13 @@ function RenderPdf({
|
||||
data.signerObjId === signerObjectId
|
||||
? "pointer"
|
||||
: "not-allowed",
|
||||
borderColor: themeColor(),
|
||||
background: data.blockColor,
|
||||
borderColor: themeColor(),
|
||||
borderStyle: "dashed",
|
||||
borderWidth: "0.1px",
|
||||
zIndex: "1"
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
className="signYourselfBlock"
|
||||
size={{
|
||||
width: posWidth(pos),
|
||||
height: posHeight(pos)
|
||||
@@ -289,14 +301,62 @@ 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);
|
||||
}
|
||||
const BlockDesign = ({ pos, data }) => {
|
||||
return (
|
||||
<div>
|
||||
<i
|
||||
class="fa-regular fa-copy signCopy"
|
||||
onClick={(e) => {
|
||||
console.log("hello console");
|
||||
e.stopPropagation();
|
||||
setIsPageCopy(true);
|
||||
setSignKey(pos.key);
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
}}
|
||||
></i>
|
||||
<i
|
||||
class="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: "12px",
|
||||
color: "black",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp ? "stamp" : "signature"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -341,9 +401,14 @@ function RenderPdf({
|
||||
style={{
|
||||
cursor: "all-scroll",
|
||||
borderColor: themeColor(),
|
||||
zIndex: "1"
|
||||
borderStyle: "dashed",
|
||||
borderWidth: "0.1px",
|
||||
zIndex: "1",
|
||||
background: data.blockColor
|
||||
? data.blockColor
|
||||
: "#daebe0"
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
className="signYourselfBlock"
|
||||
onResize={(
|
||||
e,
|
||||
direction,
|
||||
@@ -374,9 +439,7 @@ function RenderPdf({
|
||||
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
|
||||
default={{
|
||||
x: xPos(pos),
|
||||
y: !pos.isMobile
|
||||
? pos.yPosition / scale
|
||||
: pos.yPosition * (pos.scale / scale)
|
||||
y: yPos(pos)
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsSignPad(true);
|
||||
@@ -449,14 +512,13 @@ function RenderPdf({
|
||||
topLeft: false
|
||||
}}
|
||||
key={pos.key}
|
||||
bounds="parent"
|
||||
style={{
|
||||
cursor: "all-scroll",
|
||||
borderColor: themeColor(),
|
||||
background: data.blockColor,
|
||||
borderColor: data.bac,
|
||||
zIndex: pos.zIndex
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
className="signYourselfBlock"
|
||||
onDrag={() => handleTabDrag(pos.key)}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
@@ -506,6 +568,9 @@ function RenderPdf({
|
||||
);
|
||||
}}
|
||||
>
|
||||
<BorderResize right={-12} top={-11} />
|
||||
<PlaceholderBorder pos={pos} />
|
||||
|
||||
<div
|
||||
onTouchEnd={() => {
|
||||
const dataNewPlace = addZIndex(
|
||||
@@ -523,20 +588,26 @@ function RenderPdf({
|
||||
return newState;
|
||||
});
|
||||
}}
|
||||
style={{
|
||||
cursor: "all-scroll",
|
||||
borderColor: themeColor(),
|
||||
background: data.blockColor,
|
||||
zIndex: pos.zIndex,
|
||||
height: pos.Height
|
||||
? pos.Height
|
||||
: 60,
|
||||
width: pos.Width ? pos.Width : 150
|
||||
}}
|
||||
>
|
||||
<BorderResize />
|
||||
|
||||
<div
|
||||
<i
|
||||
class="fa-regular fa-copy signCopy"
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsPageCopy(true);
|
||||
setSignKey(pos.key);
|
||||
setSignerObjId(data.signerObjId);
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsPageCopy(true);
|
||||
setSignKey(pos.key);
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
}}
|
||||
></i>
|
||||
<i
|
||||
class="fa-regular fa-circle-xmark signCloseBtn"
|
||||
onTouchStart={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(
|
||||
@@ -545,12 +616,10 @@ function RenderPdf({
|
||||
);
|
||||
}}
|
||||
style={{
|
||||
background: themeColor()
|
||||
color: "#188ae2"
|
||||
}}
|
||||
className="placeholdCloseBtn"
|
||||
>
|
||||
x
|
||||
</div>
|
||||
></i>
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
@@ -595,18 +664,19 @@ function RenderPdf({
|
||||
lockAspectRatio={
|
||||
pos.Width ? pos.Width / pos.Height : 2.5
|
||||
}
|
||||
className="placeholderBlock"
|
||||
bounds="parent"
|
||||
ref={nodeRef}
|
||||
key={pos.key}
|
||||
className="signYourselfBlock"
|
||||
style={{
|
||||
border: "1px solid red",
|
||||
cursor: "all-scroll",
|
||||
borderColor: themeColor(),
|
||||
zIndex: "1"
|
||||
zIndex: "1",
|
||||
background: "#daebe0"
|
||||
}}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 151,
|
||||
height: pos.Height ? pos.Height : 61
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
height: pos.Height ? pos.Height : 60
|
||||
}}
|
||||
default={{
|
||||
x: pos.xPosition,
|
||||
@@ -633,11 +703,24 @@ function RenderPdf({
|
||||
containerWH
|
||||
);
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
console.log("go here");
|
||||
if (!isDragging && isMobile) {
|
||||
setTimeout(() => {
|
||||
e.stopPropagation();
|
||||
setIsSignPad(true);
|
||||
setSignKey(pos.key);
|
||||
setIsStamp(pos.isStamp);
|
||||
}, 500);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
<BorderResize right={-12} top={-11} />
|
||||
<PlaceholderBorder pos={pos} />
|
||||
<div
|
||||
onTouchEnd={(e) => {
|
||||
if (!isDragging) {
|
||||
console.log("go here");
|
||||
if (!isDragging && isMobile) {
|
||||
setTimeout(() => {
|
||||
e.stopPropagation();
|
||||
setIsSignPad(true);
|
||||
@@ -646,41 +729,54 @@ function RenderPdf({
|
||||
}, 500);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
height: "100%"
|
||||
}}
|
||||
>
|
||||
<BorderResize />
|
||||
<div
|
||||
ref={nodeRef}
|
||||
onTouchStart={(e) => {
|
||||
<i
|
||||
class="fa-regular fa-copy signCopy"
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(pos.key);
|
||||
setIsStamp(false);
|
||||
setIsPageCopy(true);
|
||||
setSignKey(pos.key);
|
||||
}}
|
||||
style={{
|
||||
background: themeColor()
|
||||
color: "#188ae2"
|
||||
}}
|
||||
className="placeholdCloseBtn"
|
||||
>
|
||||
x
|
||||
</div>
|
||||
></i>
|
||||
<i
|
||||
class="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 ? (
|
||||
<img
|
||||
alt="signimg"
|
||||
src={pos.SignUrl}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain"
|
||||
}}
|
||||
/>
|
||||
<div style={{ pointerEvents: "none" }}>
|
||||
<img
|
||||
alt="signimg"
|
||||
src={pos.SignUrl}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
cancel=".dragElm"
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: themeColor(),
|
||||
color: "black",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
@@ -806,9 +902,14 @@ function RenderPdf({
|
||||
style={{
|
||||
cursor: "all-scroll",
|
||||
borderColor: themeColor(),
|
||||
zIndex: "1"
|
||||
borderStyle: "dashed",
|
||||
borderWidth: "0.1px",
|
||||
zIndex: "1",
|
||||
background: data.blockColor
|
||||
? data.blockColor
|
||||
: "#daebe0"
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
className="signYourselfBlock"
|
||||
size={{
|
||||
width: posWidth(pos),
|
||||
height: posHeight(pos)
|
||||
@@ -816,15 +917,9 @@ function RenderPdf({
|
||||
lockAspectRatio={
|
||||
pos.Width ? pos.Width / pos.Height : 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
|
||||
x: xPos(pos),
|
||||
y: yPos(pos)
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsSignPad(true);
|
||||
@@ -919,10 +1014,10 @@ function RenderPdf({
|
||||
style={{
|
||||
cursor: "all-scroll",
|
||||
background: data.blockColor,
|
||||
borderColor: themeColor(),
|
||||
|
||||
zIndex: pos.zIndex
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
className="signYourselfBlock"
|
||||
onDrag={() => handleTabDrag(pos.key)}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
@@ -972,34 +1067,48 @@ function RenderPdf({
|
||||
);
|
||||
}}
|
||||
>
|
||||
<BorderResize />
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(
|
||||
pos.key,
|
||||
data.signerObjId
|
||||
);
|
||||
}}
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
className="placeholdCloseBtn"
|
||||
>
|
||||
x
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "black",
|
||||
fontWeight: "600",
|
||||
<BorderResize right={-12} top={-11} />
|
||||
<PlaceholderBorder pos={pos} />
|
||||
<div>
|
||||
<i
|
||||
class="fa-regular fa-copy signCopy"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsPageCopy(true);
|
||||
setSignKey(pos.key);
|
||||
setSignerObjId(
|
||||
data.signerObjId
|
||||
);
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
}}
|
||||
></i>
|
||||
<i
|
||||
class="fa-regular fa-circle-xmark signCloseBtn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(
|
||||
pos.key,
|
||||
data.signerObjId
|
||||
);
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
}}
|
||||
></i>
|
||||
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp
|
||||
? "stamp"
|
||||
: "signature"}
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "black",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp
|
||||
? "stamp"
|
||||
: "signature"}
|
||||
</div>
|
||||
</div>
|
||||
</Rnd>
|
||||
);
|
||||
@@ -1034,12 +1143,13 @@ function RenderPdf({
|
||||
topLeft: false
|
||||
}}
|
||||
bounds="parent"
|
||||
className="signYourselfBlock"
|
||||
style={{
|
||||
borderColor: themeColor(),
|
||||
border: "1px solid red",
|
||||
cursor: "all-scroll",
|
||||
zIndex: "1"
|
||||
zIndex: "1",
|
||||
background: "#daebe0"
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
onDrag={() => handleTabDrag(pos.key)}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
@@ -1077,46 +1187,10 @@ function RenderPdf({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<BorderResize />
|
||||
<BorderResize right={-12} top={-11} />
|
||||
<PlaceholderBorder pos={pos} />
|
||||
|
||||
<span
|
||||
ref={nodeRef}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(pos.key);
|
||||
setIsStamp(false);
|
||||
}}
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
className="placeholdCloseBtn"
|
||||
>
|
||||
x
|
||||
</span>
|
||||
|
||||
{pos.SignUrl ? (
|
||||
<div style={{ pointerEvents: "none" }}>
|
||||
<img
|
||||
alt="signimg"
|
||||
src={pos.SignUrl}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: themeColor(),
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp ? "stamp" : "signature"}
|
||||
</div>
|
||||
)}
|
||||
<BlockDesign pos={pos} />
|
||||
</Rnd>
|
||||
)
|
||||
);
|
||||
@@ -1124,6 +1198,7 @@ function RenderPdf({
|
||||
</React.Fragment>
|
||||
);
|
||||
}))}
|
||||
|
||||
{/* this component for render pdf document is in middle of the component */}
|
||||
<Document
|
||||
onLoadError={(e) => {
|
||||
|
||||
Reference in New Issue
Block a user