mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-21 07:02:32 +02:00
fix: zIndex of placeholder-block and added signyourself & request signature form in openSign drive
This commit is contained in:
RaktimaNXG
@@ -103,6 +103,7 @@
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -8,8 +8,10 @@ import ModalHeader from "react-bootstrap/esm/ModalHeader";
|
||||
import { themeColor, iconColor } from "../../utils/ThemeColor/backColor";
|
||||
import { getDrive } from "../../utils/Utils";
|
||||
import AlertComponent from "../component/alertComponent";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
function PdfFile() {
|
||||
const navigate = useNavigate();
|
||||
const scrollRef = useRef(null);
|
||||
const [isList, setIsList] = useState(false);
|
||||
const [selectedSort, setSelectedSort] = useState("Date");
|
||||
@@ -28,6 +30,7 @@ function PdfFile() {
|
||||
const [handleError, setHandleError] = useState();
|
||||
const [folderName, setFolderName] = useState([]);
|
||||
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
|
||||
const [isNewFol, setIsNewFol] = useState(false);
|
||||
const currentUser =
|
||||
localStorage.getItem(
|
||||
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
|
||||
@@ -188,7 +191,6 @@ function PdfFile() {
|
||||
};
|
||||
}
|
||||
|
||||
// console.log("data", data);
|
||||
await axios
|
||||
.post(
|
||||
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
|
||||
@@ -314,6 +316,8 @@ function PdfFile() {
|
||||
const closeMenuOnOutsideClick = (e) => {
|
||||
if (isShowSort && !e.target.closest("#menu-container")) {
|
||||
setIsShowSort(false);
|
||||
} else if (isNewFol && !e.target.closest("#folder-menu")) {
|
||||
setIsNewFol(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -502,6 +506,67 @@ function PdfFile() {
|
||||
})}
|
||||
</div>
|
||||
<div className="dropMenuBD">
|
||||
<div
|
||||
id="folder-menu"
|
||||
className={isNewFol ? "dropdown show" : "dropdown"}
|
||||
onClick={() => setIsNewFol(!isNewFol)}
|
||||
>
|
||||
<div className="sort">
|
||||
<i
|
||||
className="fa fa-plus-square"
|
||||
aria-hidden="true"
|
||||
style={{ fontSize: "25px", color: `${iconColor()}` }}
|
||||
></i>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
isNewFol ? "dropdown-menu show" : "dropdown-menu"
|
||||
}
|
||||
aria-labelledby="dropdownMenuButton"
|
||||
aria-expanded={isNewFol ? "true" : "false"}
|
||||
>
|
||||
{" "}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="dropdown-item itemColor"
|
||||
onClick={() => getParentFolder()}
|
||||
>
|
||||
<i
|
||||
style={{ marginRight: "5px" }}
|
||||
className="fa fa-plus"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
Create folder
|
||||
</span>
|
||||
<span
|
||||
className="dropdown-item itemColor"
|
||||
onClick={() => navigate("/form/sHAnZphf69")}
|
||||
>
|
||||
<i
|
||||
style={{ marginRight: "5px" }}
|
||||
className="fas fa-pen-nib"
|
||||
></i>
|
||||
Sign Yourself
|
||||
</span>
|
||||
<span
|
||||
className="dropdown-item itemColor"
|
||||
onClick={() => navigate("/form/8mZzFxbG1z")}
|
||||
>
|
||||
{" "}
|
||||
<i
|
||||
style={{ marginRight: "5px" }}
|
||||
className="fa fa-file-signature"
|
||||
></i>
|
||||
Request Signatures{" "}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="menu-container"
|
||||
className={isShowSort ? "dropdown show" : "dropdown"}
|
||||
@@ -645,14 +710,6 @@ function PdfFile() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="sort" onClick={() => getParentFolder()}>
|
||||
<i
|
||||
className="fa fa-plus-square"
|
||||
aria-hidden="true"
|
||||
style={{ fontSize: "25px", color: `${iconColor()}` }}
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
import { Document, Page, pdfjs } from "react-pdf";
|
||||
import BorderResize from "./borderResize";
|
||||
import {
|
||||
addZIndex,
|
||||
handleImageResize,
|
||||
handleSignYourselfImageResize
|
||||
} from "../../utils/Utils";
|
||||
@@ -46,7 +47,8 @@ function RenderPdf({
|
||||
setXyPostion,
|
||||
index,
|
||||
containerWH,
|
||||
setIsResize
|
||||
setIsResize,
|
||||
setZIndex
|
||||
}) {
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const newWidth = containerWH.width;
|
||||
@@ -200,7 +202,8 @@ function RenderPdf({
|
||||
? "pointer"
|
||||
: "not-allowed",
|
||||
borderColor: themeColor(),
|
||||
background: data.blockColor
|
||||
background: data.blockColor,
|
||||
zIndex: "1"
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
size={{
|
||||
@@ -337,7 +340,8 @@ function RenderPdf({
|
||||
bounds="parent"
|
||||
style={{
|
||||
cursor: "all-scroll",
|
||||
borderColor: themeColor()
|
||||
borderColor: themeColor(),
|
||||
zIndex: "1"
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
onResize={(
|
||||
@@ -449,7 +453,8 @@ function RenderPdf({
|
||||
style={{
|
||||
cursor: "all-scroll",
|
||||
borderColor: themeColor(),
|
||||
background: data.blockColor
|
||||
background: data.blockColor,
|
||||
zIndex: pos.zIndex
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
onDrag={() =>
|
||||
@@ -482,14 +487,16 @@ function RenderPdf({
|
||||
onResizeStart={() => {
|
||||
setIsResize(true);
|
||||
}}
|
||||
onResizeStop={(
|
||||
onResizeStop={() => {
|
||||
setIsResize && setIsResize(false);
|
||||
}}
|
||||
onResize={(
|
||||
e,
|
||||
direction,
|
||||
ref,
|
||||
delta,
|
||||
position
|
||||
) => {
|
||||
e.stopPropagation();
|
||||
handleImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
@@ -500,37 +507,67 @@ function RenderPdf({
|
||||
setSignerPos,
|
||||
pdfOriginalWidth,
|
||||
containerWH,
|
||||
false,
|
||||
setIsResize
|
||||
false
|
||||
);
|
||||
}}
|
||||
>
|
||||
<BorderResize />
|
||||
|
||||
<div
|
||||
onTouchStart={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(
|
||||
onTouchEnd={() => {
|
||||
const dataNewPlace = addZIndex(
|
||||
signerPos,
|
||||
pos.key,
|
||||
data.signerObjId
|
||||
setZIndex
|
||||
);
|
||||
setSignerPos((prevState) => {
|
||||
const newState = [...prevState];
|
||||
newState.splice(
|
||||
0,
|
||||
signerPos.length,
|
||||
...dataNewPlace
|
||||
);
|
||||
return newState;
|
||||
});
|
||||
}}
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
className="placeholdCloseBtn"
|
||||
>
|
||||
x
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "black",
|
||||
fontWeight: "600",
|
||||
marginTop: "0px"
|
||||
cursor: "all-scroll",
|
||||
borderColor: themeColor(),
|
||||
background: data.blockColor,
|
||||
zIndex: pos.zIndex,
|
||||
height: pos.Height
|
||||
? pos.Height
|
||||
: 60,
|
||||
width: pos.Width ? pos.Width : 150
|
||||
}}
|
||||
>
|
||||
{pos.isStamp ? "stamp" : "signature"}
|
||||
<BorderResize />
|
||||
|
||||
<div
|
||||
onTouchStart={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(
|
||||
pos.key,
|
||||
data.signerObjId
|
||||
);
|
||||
}}
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
className="placeholdCloseBtn"
|
||||
>
|
||||
x
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "black",
|
||||
fontWeight: "600",
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp
|
||||
? "stamp"
|
||||
: "signature"}
|
||||
</div>
|
||||
</div>
|
||||
</Rnd>
|
||||
);
|
||||
@@ -569,7 +606,8 @@ function RenderPdf({
|
||||
key={pos.key}
|
||||
style={{
|
||||
cursor: "all-scroll",
|
||||
borderColor: themeColor()
|
||||
borderColor: themeColor(),
|
||||
zIndex: "1"
|
||||
}}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 151,
|
||||
@@ -772,7 +810,8 @@ function RenderPdf({
|
||||
bounds="parent"
|
||||
style={{
|
||||
cursor: "all-scroll",
|
||||
borderColor: themeColor()
|
||||
borderColor: themeColor(),
|
||||
zIndex: "1"
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
size={{
|
||||
@@ -854,6 +893,22 @@ function RenderPdf({
|
||||
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,
|
||||
@@ -869,15 +924,11 @@ function RenderPdf({
|
||||
style={{
|
||||
cursor: "all-scroll",
|
||||
background: data.blockColor,
|
||||
borderColor: themeColor()
|
||||
borderColor: themeColor(),
|
||||
zIndex: pos.zIndex
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
onDrag={() =>
|
||||
handleTabDrag(
|
||||
pos.key
|
||||
// data.signerObjId
|
||||
)
|
||||
}
|
||||
onDrag={() => handleTabDrag(pos.key)}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
height: pos.Height ? pos.Height : 60
|
||||
@@ -902,7 +953,10 @@ function RenderPdf({
|
||||
onResizeStart={() => {
|
||||
setIsResize(true);
|
||||
}}
|
||||
onResizeStop={(
|
||||
onResizeStop={() => {
|
||||
setIsResize && setIsResize(false);
|
||||
}}
|
||||
onResize={(
|
||||
e,
|
||||
direction,
|
||||
ref,
|
||||
@@ -919,8 +973,7 @@ function RenderPdf({
|
||||
setSignerPos,
|
||||
pdfOriginalWidth,
|
||||
containerWH,
|
||||
false,
|
||||
setIsResize
|
||||
false
|
||||
);
|
||||
}}
|
||||
>
|
||||
@@ -988,7 +1041,8 @@ function RenderPdf({
|
||||
bounds="parent"
|
||||
style={{
|
||||
borderColor: themeColor(),
|
||||
cursor: "all-scroll"
|
||||
cursor: "all-scroll",
|
||||
zIndex: "1"
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
onDrag={() => handleTabDrag(pos.key)}
|
||||
|
||||
@@ -66,6 +66,7 @@ function PlaceHolderSign() {
|
||||
const [selectedEmail, setSelectedEmail] = useState(false);
|
||||
const [isResize, setIsResize] = useState(false);
|
||||
const [isAlreadyPlace, setIsAlreadyPlace] = useState(false);
|
||||
const [zIndex, setZIndex] = useState(1);
|
||||
const [pdfLoadFail, setPdfLoadFail] = useState({
|
||||
status: false,
|
||||
type: "load"
|
||||
@@ -263,6 +264,8 @@ function PlaceHolderSign() {
|
||||
};
|
||||
|
||||
const getSignerPos = (item, monitor) => {
|
||||
const posZIndex = zIndex + 1;
|
||||
setZIndex(posZIndex);
|
||||
const newWidth = containerWH.width;
|
||||
const scale = pdfOriginalWidth / newWidth;
|
||||
const key = Math.floor(1000 + Math.random() * 9000);
|
||||
@@ -282,7 +285,8 @@ function PlaceHolderSign() {
|
||||
isDrag: false,
|
||||
scale: scale,
|
||||
isMobile: isMobile,
|
||||
yBottom: window.innerHeight / 2 - 60
|
||||
yBottom: window.innerHeight / 2 - 60,
|
||||
zIndex: posZIndex
|
||||
};
|
||||
dropData.push(dropObj);
|
||||
xyPos = {
|
||||
@@ -311,9 +315,9 @@ function PlaceHolderSign() {
|
||||
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
|
||||
yBottom: ybottom,
|
||||
scale: scale,
|
||||
isMobile: isMobile
|
||||
isMobile: isMobile,
|
||||
zIndex: posZIndex
|
||||
};
|
||||
|
||||
dropData.push(dropObj);
|
||||
xyPos = {
|
||||
pageNumber: pageNumber,
|
||||
@@ -322,6 +326,7 @@ function PlaceHolderSign() {
|
||||
|
||||
xyPosArr.push(xyPos);
|
||||
}
|
||||
|
||||
//add signers objId first inseretion
|
||||
if (filterSignerPos.length > 0) {
|
||||
const colorIndex = signerPos
|
||||
@@ -403,6 +408,7 @@ function PlaceHolderSign() {
|
||||
setSignerPos((prev) => [...prev, placeHolderPos]);
|
||||
}
|
||||
};
|
||||
|
||||
//function for get pdf page details
|
||||
const pageDetails = async (pdf) => {
|
||||
const load = {
|
||||
@@ -419,7 +425,6 @@ function PlaceHolderSign() {
|
||||
//function for save x and y position and show signature tab on that position
|
||||
const handleTabDrag = (key, signerId) => {
|
||||
setDragKey(key);
|
||||
// setSignerObjId(signerId);
|
||||
};
|
||||
|
||||
//function for set and update x and y postion after drag and drop signature tab
|
||||
@@ -981,6 +986,7 @@ function PlaceHolderSign() {
|
||||
setSignerPos={setSignerPos}
|
||||
containerWH={containerWH}
|
||||
setIsResize={setIsResize}
|
||||
setZIndex={setZIndex}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -176,7 +176,6 @@
|
||||
|
||||
.placeholderBlock {
|
||||
padding: 0px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
border-style: dashed;
|
||||
width: 150px;
|
||||
@@ -185,7 +184,7 @@
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
border-width: 0.2px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.finishBtn {
|
||||
|
||||
@@ -219,6 +219,36 @@ export function onSaveSign(
|
||||
return newUpdateUrl;
|
||||
}
|
||||
|
||||
export const addZIndex = (signerPos, key, setZIndex) => {
|
||||
return signerPos.map((item) => {
|
||||
if (item.placeHolder && item.placeHolder.length > 0) {
|
||||
// If there is a nested array, recursively add the field to the last object
|
||||
return {
|
||||
...item,
|
||||
placeHolder: addZIndex(item.placeHolder, key, setZIndex)
|
||||
};
|
||||
} else if (item.pos && item.pos.length > 0) {
|
||||
// If there is no nested array, add the new field
|
||||
return {
|
||||
...item,
|
||||
pos: addZIndex(item.pos, key, setZIndex)
|
||||
// Adjust this line to add the desired field
|
||||
};
|
||||
} else {
|
||||
if (item.key === key) {
|
||||
setZIndex(item.zIndex);
|
||||
return {
|
||||
...item,
|
||||
zIndex: item.zIndex ? item.zIndex + 1 : 1
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
//function for add default signature or image for all requested location
|
||||
export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
|
||||
let imgWH = { width: "", height: "" };
|
||||
@@ -674,8 +704,7 @@ export const handleImageResize = (
|
||||
setSignerPos,
|
||||
pdfOriginalWidth,
|
||||
containerWH,
|
||||
showResize,
|
||||
setIsResize
|
||||
showResize
|
||||
) => {
|
||||
const filterSignerPos = signerPos.filter(
|
||||
(data) => data.signerObjId === signerId
|
||||
@@ -753,7 +782,6 @@ export const handleImageResize = (
|
||||
}
|
||||
}
|
||||
}
|
||||
setIsResize && setIsResize(false);
|
||||
};
|
||||
|
||||
//function for resize image and update width and height for sign-yourself
|
||||
|
||||
Reference in New Issue
Block a user