WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-09-08 10:47:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'staging' of https://github.com/OpenSignLabs/OpenSign into feat_template

Browse Source
This commit is contained in:
prafull-opensignlabs
2023-12-26 16:50:21 +05:30
parent 66b65e600b 642ef4f5b7
commit f5f19c9b52
12 changed files with 825 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+71 -151
View File
@@ -21,8 +21,9 @@ import {
embedDocId,
pdfNewWidthFun,
signPdfFun,
calculateImgAspectRatio,
onImageSelect
onImageSelect,
onSaveSign,
onSaveImage
} from "../utils/Utils";
import Loader from "./component/loader";
import HandleError from "./component/HandleError";
@@ -482,181 +483,99 @@ function PdfRequestFiles() {
}
};
//function for upload stamp image
const onSaveImage = () => {
const saveImage = () => {
//get current signers placeholder position data
const currentSigner = signerPos.filter(
(data) => data.signerObjId === signerObjectId
);
const i = currentSigner[0].placeHolder.findIndex((object) => {
//get current pagenumber placeholder index
const getIndex = currentSigner[0].placeHolder.findIndex((object) => {
return object.pageNumber === pageNumber;
});
const updateFilter = currentSigner[0].placeHolder[i].pos.filter(
(data) =>
data.key === signKey && data.Width && data.Height && data.SignUrl
//get current signer placeholder position data
const placeholderPosition = currentSigner[0].placeHolder;
//function of save image and get updated position with image url
const getUpdatePosition = onSaveImage(
placeholderPosition,
getIndex,
signKey,
imgWH,
image
);
let getIMGWH = calculateImgAspectRatio(imgWH);
if (updateFilter.length > 0) {
const getXYdata = currentSigner[0].placeHolder[i].pos;
const getPosData = getXYdata;
const addSign = getPosData.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
}
return url;
});
const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => {
if (ind === i) {
return { ...obj, pos: addSign };
}
return obj;
});
const getPlaceData = currentSigner[0].placeHolder;
getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl);
const indexofSigner = signerPos.findIndex((object) => {
return object.signerObjId === signerObjectId;
});
setSignerPos((prevState) => {
const newState = [...prevState]; // Create a copy of the state
newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy
return newState; // Update the state with the modified copy
});
} else {
const getXYdata = currentSigner[0].placeHolder[i].pos;
const getPosData = getXYdata;
const addSign = getPosData.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
}
return url;
});
const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => {
if (ind === i) {
return { ...obj, pos: addSign };
}
return obj;
});
const getPlaceData = currentSigner[0].placeHolder;
getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl);
const indexofSigner = signerPos.findIndex((object) => {
return object.signerObjId === signerObjectId;
});
setSignerPos((prevState) => {
const newState = [...prevState]; // Create a copy of the state
newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy
return newState; // Update the state with the modified copy
});
}
//replace updated placeholder position with old data
placeholderPosition.splice(
0,
placeholderPosition.length,
...getUpdatePosition
);
//get current signers placeholder position data index number in array
const indexofSigner = signerPos.findIndex((object) => {
return object.signerObjId === signerObjectId;
});
//update current signers data with new placeholder position array data
setSignerPos((prevState) => {
const newState = [...prevState]; // Create a copy of the state
newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy
return newState; // Update the state with the modified copy
});
};
//function for save button to save signature or image url
const onSaveSign = (isDefaultSign) => {
const saveSign = (isDefaultSign) => {
const signatureImg = isDefaultSign ? defaultSignImg : signature;
const isSign = true;
let getIMGWH;
let imgWH = { width: "", height: "" };
setIsSignPad(false);
setIsImageSelect(false);
setImage();
//get current signers placeholder position data
const currentSigner = signerPos.filter(
(data) => data.signerObjId === signerObjectId
);
//get current pagenumber placeholder index
const getIndex = currentSigner[0].placeHolder.findIndex((object) => {
return object.pageNumber === pageNumber;
});
//set default signature image width and height
if (isDefaultSign) {
const img = new Image();
img.src = defaultSignImg;
if (img.complete) {
let imgWH = {
imgWH = {
width: img.width,
height: img.height
};
getIMGWH = calculateImgAspectRatio(imgWH);
}
}
const currentSigner = signerPos.filter(
(data) => data.signerObjId === signerObjectId
//get current signer placeholder position data
const placeholderPosition = currentSigner[0].placeHolder;
//function of save signature image and get updated position with signature image url
const getUpdatePosition = onSaveSign(
placeholderPosition,
getIndex,
signKey,
signatureImg,
imgWH,
isDefaultSign
);
const i = currentSigner[0].placeHolder.findIndex((object) => {
return object.pageNumber === pageNumber;
const updateSignerData = currentSigner.map((obj, ind) => {
if (obj.signerObjId === signerObjectId) {
return { ...obj, placeHolder: getUpdatePosition };
}
return obj;
});
let updateFilter;
updateFilter = currentSigner[0].placeHolder[i].pos.filter(
(data) => data.key === signKey && data.SignUrl
const index = signerPos.findIndex(
(data) => data.signerObjId === signerObjectId
);
const getXYdata = currentSigner[0].placeHolder[i].pos;
const getPosData = getXYdata;
const posWidth = isDefaultSign
? getIMGWH.newWidth
: isSign && getPosData[0].ImageType
? 150
: getPosData[0].Width
? getPosData[0].Width
: 150;
const posHidth = isDefaultSign
? getIMGWH.newHeight
: isSign && getPosData[0].ImageType
? 60
: getPosData[0].Height
? getPosData[0].Height
: 60;
if (updateFilter.length > 0) {
updateFilter[0].SignUrl = signatureImg;
updateFilter[0].Width = posWidth;
updateFilter[0].Height = posHidth;
} else {
const addSign = getPosData.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
SignUrl: signatureImg,
Width: posWidth,
Height: posHidth,
ImageType: "sign"
};
}
return url;
});
const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSign };
}
return obj;
});
const newUpdatePos = currentSigner.map((obj, ind) => {
if (obj.signerObjId === signerObjectId) {
return { ...obj, placeHolder: newUpdateUrl };
}
return obj;
});
const index = signerPos.findIndex(
(data) => data.signerObjId === signerObjectId
);
setSignerPos((prevState) => {
const newState = [...prevState]; // Create a copy of the state
newState.splice(index, 1, ...newUpdatePos); // Modify the copy
return newState; // Update the state with the modified copy
});
}
setSignerPos((prevState) => {
const newState = [...prevState];
newState.splice(index, 1, ...updateSignerData);
return newState;
});
};
const checkSignerBackColor = (obj) => {
@@ -782,6 +701,7 @@ function PdfRequestFiles() {
allPages={allPages}
setAllPages={setAllPages}
setPageNumber={setPageNumber}
pageNumber={pageNumber}
/>
{/* pdf render view */}
@@ -831,8 +751,8 @@ function PdfRequestFiles() {
onImageChange={onImageChange}
setSignature={setSignature}
image={image}
onSaveImage={onSaveImage}
onSaveSign={onSaveSign}
onSaveImage={saveImage}
onSaveSign={saveSign}
defaultSign={defaultSignImg}
/>
{/* pdf header which contain funish back button */}
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+33 -14
View File
@@ -23,7 +23,9 @@ import {
multiSignEmbed,
pdfNewWidthFun,
addDefaultSignatureImg,
onImageSelect
onImageSelect,
placeholderHeight,
placeholderWidth
} from "../utils/Utils";
import { useParams } from "react-router-dom";
import Tour from "reactour";
@@ -36,6 +38,7 @@ import RenderPdf from "./component/renderPdf";
import { contractUsers, contactBook, urlValidator } from "../utils/Utils";
import { modalAlign } from "../utils/Utils";
import AlertComponent from "./component/alertComponent";
import PlaceholderCopy from "./component/PlaceholderCopy";
//For signYourself inProgress section signer can add sign and complete doc sign.
function SignYourSelf() {
@@ -79,6 +82,7 @@ function SignYourSelf() {
const [noData, setNoData] = useState(false);
const [contractName, setContractName] = useState("");
const [containerWH, setContainerWH] = useState({});
const [isPageCopy, setIsPageCopy] = useState(false);
const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
status: false
});
@@ -102,7 +106,6 @@ function SignYourSelf() {
const [{ isDragSign }, dragSignature] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 1,
@@ -115,7 +118,6 @@ function SignYourSelf() {
const [{ isDragStamp }, dragStamp] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 2,
@@ -140,7 +142,6 @@ function SignYourSelf() {
const [{ isDragStampSS }, dragStampSS] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 4,
@@ -329,7 +330,6 @@ function SignYourSelf() {
isDrag: false,
key: key,
isStamp: monitor,
yBottom: window.innerHeight / 2 - 60
};
@@ -516,22 +516,31 @@ function SignYourSelf() {
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
const xPos = () => {
const resizePos = xyPosData.xPosition;
if (isMobile) {
return resizePos * scale;
} else {
return resizePos;
}
};
const height = xyPosData.Height ? xyPosData.Height : 60;
const resizePos = xyPosData.yBottom;
const bottomY = xyPosData.isDrag
? xyPosData.yBottom * scale - height * scale
? resizePos * scale - height * scale
: xyPosData.firstYPos
? xyPosData.yBottom * scale - height * scale + xyPosData.firstYPos
: xyPosData.yBottom * scale - height * scale;
? resizePos * scale - height * scale + xyPosData.firstYPos
: resizePos * scale - height * scale;
singleSign = {
pdfFile: pdfBase64Url,
docId: documentId,
sign: {
Base64: base64Url,
Left: isMobile ? xyPosData.xPosition * scale : xyPosData.xPosition,
Left: xPos(),
Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width * scale : 150 * scale,
Height: height * scale,
Width: placeholderWidth(xyPosData, scale),
Height: placeholderHeight(xyPosData, scale),
Page: pageNo
}
};
@@ -650,7 +659,7 @@ function SignYourSelf() {
//function for save button to save signature or image url
const saveSign = (isDefaultSign) => {
const signatureImg = isDefaultSign ? defaultSignImg : signature;
const signFlag = true;
let imgWH = { width: "", height: "" };
setIsSignPad(false);
setIsImageSelect(false);
@@ -672,8 +681,7 @@ function SignYourSelf() {
signKey,
signatureImg,
imgWH,
isDefaultSign,
signFlag
isDefaultSign
);
setXyPostion(getUpdatePosition);
@@ -826,6 +834,7 @@ function SignYourSelf() {
setAllPages={setAllPages}
setPageNumber={setPageNumber}
setSignBtnPosition={setSignBtnPosition}
pageNumber={pageNumber}
/>
{/* pdf render view */}
@@ -881,6 +890,15 @@ function SignYourSelf() {
)}
</Modal.Footer>
</Modal>
<PlaceholderCopy
isPageCopy={isPageCopy}
setIsPageCopy={setIsPageCopy}
xyPostion={xyPostion}
setXyPostion={setXyPostion}
allPages={allPages}
pageNumber={pageNumber}
signKey={signKey}
/>
{/* this is modal of signature pad */}
<SignPad
isSignPad={isSignPad}
@@ -952,6 +970,7 @@ function SignYourSelf() {
setXyPostion={setXyPostion}
index={index}
containerWH={containerWH}
setIsPageCopy={setIsPageCopy}
/>
)}
</div>
microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+19 -2
View File
@@ -3,7 +3,6 @@ import RenderAllPdfPage from "./component/renderAllPdfPage";
import { useParams, useNavigate } from "react-router-dom";
import axios from "axios";
import "../css/./signature.css";
import Modal from "react-bootstrap/Modal";
import sign from "../assests/sign3.png";
import stamp from "../assests/stamp2.png";
import { themeColor } from "../utils/ThemeColor/backColor";
@@ -32,6 +31,8 @@ import LinkUserModal from "./component/LinkUserModal";
import EditTemplate from "./component/EditTemplate";
import ModalUi from "../premitives/ModalUi";
import AddRoleModal from "./component/AddRoleModal";
import PlaceholderCopy from "./component/PlaceholderCopy";
const TemplatePlaceholder = () => {
const navigate = useNavigate();
const { templateId } = useParams();
@@ -155,6 +156,8 @@ const TemplatePlaceholder = () => {
const [isAddUser, setIsAddUser] = useState({});
const [isCreateDoc, setIsCreateDoc] = useState(false);
const [isEditTemplate, setIsEditTemplate] = useState(false);
const [isPageCopy, setIsPageCopy] = useState(false);
const [signKey, setSignKey] = useState();
const senderUser =
localStorage.getItem(
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -1010,7 +1013,8 @@ const TemplatePlaceholder = () => {
setAllPages={setAllPages}
setPageNumber={setPageNumber}
setSignBtnPosition={setSignBtnPosition}
/>
pageNumber={pageNumber}
/>
{/* pdf render view */}
<div
@@ -1078,6 +1082,16 @@ const TemplatePlaceholder = () => {
)}
</div>
</ModalUi>
<PlaceholderCopy
isPageCopy={isPageCopy}
setIsPageCopy={setIsPageCopy}
xyPostion={signerPos}
setXyPostion={setSignerPos}
allPages={allPages}
pageNumber={pageNumber}
signKey={signKey}
signerObjId={signerObjId}
/>
{/* pdf header which contain funish back button */}
<Header
completeBtnTitle={"Save"}
@@ -1120,6 +1134,9 @@ const TemplatePlaceholder = () => {
handleLinkUser={handleLinkUser}
setUniqueId={setUniqueId}
signersdata={signersdata}
setIsPageCopy={setIsPageCopy}
setSignKey={setSignKey}
setSignerObjId={setSignerObjId}
/>
)}
</div>
microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js
+231
View File
@@ -0,0 +1,231 @@
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 PlaceholderCopy(props) {
const copyType = ["All pages", "All pages but last", "All pages but first"];
const [selectCopyType, setSelectCopyType] = useState("");
//get RandomKey Id
const randomKey = () => {
const randomId = Math.floor(1000 + Math.random() * 9000);
return randomId;
};
//function for get copy placeholder position
const getCopyPlaceholderPosition = (
type,
rest,
newPageNumber,
existPlaceholderPosition
) => {
let obj;
const filterPosition =
existPlaceholderPosition &&
existPlaceholderPosition.filter(
(data) => data.xPosition !== rest.xPosition
);
//copy all page placeholder at requested position except first page
if (newPageNumber === 1 && type === "first") {
if (filterPosition && filterPosition.length > 0) {
return (obj = {
pageNumber: newPageNumber,
pos: [...filterPosition]
});
}
}
//copy all page placeholder at requested position except last page
else if (newPageNumber === props.allPages && type === "last") {
if (existPlaceholderPosition) {
return (obj = {
pageNumber: newPageNumber,
pos: [...filterPosition]
});
}
}
//copy all page placeholder at requested position with existing placeholder position
else if (existPlaceholderPosition) {
return (obj = {
pageNumber: newPageNumber,
pos: [...filterPosition, rest]
});
}
//copy all page placeholder at requested position
else {
return (obj = {
pageNumber: newPageNumber,
pos: [rest]
});
}
};
//function for copy placeholder as per select copy type
const copyPlaceholder = (type) => {
let newPlaceholderPosition = [];
let newPageNumber = 1;
const signerPosition = props.xyPostion;
//handle placeholder array and copy for multiple signers placeholder at requested location
if (props.signerObjId) {
//get current signers data
const filterSignerPosition = signerPosition.filter(
(data) => data.signerObjId === props.signerObjId
);
//get current pagenumber's all placeholder position data
const placeholderPosition = filterSignerPosition[0].placeHolder.filter(
(data) => data.pageNumber === props.pageNumber
);
//get current placeholder position data which user want to copy
const currentPlaceholder = placeholderPosition[0].pos.filter(
(position) => position.key === props.signKey
);
const { key, ...rest } = currentPlaceholder[0];
for (let i = 0; i < props.allPages; i++) {
const newId = randomKey();
rest.key = newId;
//get exist placeholder position for particular page
const existPlaceholder = filterSignerPosition[0].placeHolder.filter(
(data) => data.pageNumber == newPageNumber
);
const existPlaceholderPosition =
existPlaceholder[0] && existPlaceholder[0].pos;
//function for get copy to requested location of placeholder position
const getPlaceholderObj = getCopyPlaceholderPosition(
type,
rest,
newPageNumber,
existPlaceholderPosition
);
if (getPlaceholderObj) {
newPlaceholderPosition.push(getPlaceholderObj);
}
newPageNumber++;
}
const updatedSignerPlaceholder = signerPosition.map(
(signersData, ind) => {
if (signersData.signerObjId === props.signerObjId) {
return {
...signersData,
placeHolder: newPlaceholderPosition
};
}
return signersData;
}
);
const signersData = signerPosition;
signersData.splice(0, signerPosition.length, ...updatedSignerPlaceholder);
props.setXyPostion(signersData);
}
//handle signyourself array and copy for single signers placeholder at requested location
else {
const xyPostion = props.xyPostion;
const placeholderPosition = xyPostion.filter(
(data) => data.pageNumber === props.pageNumber
);
//get current placeholder position data which user want to copy
const currentPlaceholder = placeholderPosition[0].pos.filter(
(pos) => pos.key === props.signKey
);
const { key, ...rest } = currentPlaceholder[0];
for (let i = 0; i < props.allPages; i++) {
//get exist placeholder position for particular page
const existPlaceholder = xyPostion.filter(
(data) => data.pageNumber == newPageNumber
);
const existPlaceholderPosition =
existPlaceholder[0] && existPlaceholder[0].pos;
const newId = randomKey();
rest.key = newId;
//function for get copy to requested location of placeholder position
const getPlaceholderObj = getCopyPlaceholderPosition(
type,
rest,
newPageNumber,
existPlaceholderPosition
);
if (getPlaceholderObj) {
newPlaceholderPosition.push(getPlaceholderObj);
}
newPageNumber++;
}
props.setXyPostion(newPlaceholderPosition);
}
};
//function for getting selected type placeholder copy
const handleApplyCopy = () => {
if (selectCopyType === "All pages") {
copyPlaceholder("all");
} else if (selectCopyType === "All pages but last") {
copyPlaceholder("last");
} else if (selectCopyType === "All pages but first") {
copyPlaceholder("first");
}
};
return (
<Modal show={props.isPageCopy}>
<ModalHeader style={{ background: themeColor() }}>
<span style={{ color: "white" }}>Place All pages</span>
</ModalHeader>
<Modal.Body>
{copyType.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={() => setSelectCopyType(data)}
checked={selectCopyType === data}
/>
{data}
</label>
</div>
);
})}
</Modal.Body>
<Modal.Footer>
<button
style={{
color: "black"
}}
type="button"
className="finishBtn"
onClick={() => props.setIsPageCopy(false)}
>
Cancel
</button>
<button
onClick={() => {
handleApplyCopy();
props.setIsPageCopy(false);
}}
style={{
background: themeColor()
}}
type="button"
disabled={!selectCopyType}
className="finishBtn"
>
Apply
</button>
</Modal.Footer>
</Modal>
);
}
export default PlaceholderCopy;
microfrontends/SignDocuments/src/Component/component/borderResize.js
+3 -3
View File
@@ -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"
}}
microfrontends/SignDocuments/src/Component/component/placeholderBorder.js
+26
View File
@@ -0,0 +1,26 @@
import React from "react";
import { themeColor } from "../../utils/ThemeColor/backColor";
import { resizeBorderExtraWidth } from "../../utils/Utils";
function PlaceholderBorder(props) {
const getResizeBorderExtraWidth = resizeBorderExtraWidth();
return (
<div
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;
microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js
+6 -2
View File
@@ -9,7 +9,8 @@ function RenderAllPdfPage({
allPages,
setAllPages,
setPageNumber,
setSignBtnPosition
setSignBtnPosition,
pageNumber
}) {
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
@@ -58,7 +59,10 @@ function RenderAllPdfPage({
key={index}
style={{
width: "100px",
border: "2px solid #878787",
border:
pageNumber - 1 === index
? "2px solid red"
: "2px solid #878787",
// padding: "5px",
margin: "10px",
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+267 -233
View File
@@ -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`;
@@ -51,7 +52,9 @@ function RenderPdf({
setZIndex,
handleLinkUser,
setUniqueId,
signersdata
signersdata,
setIsPageCopy,
setSignerObjId
}) {
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
@@ -61,65 +64,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(
@@ -128,52 +184,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) => {
@@ -203,11 +214,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)
@@ -291,16 +304,63 @@ 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 PlaceholderDesign = ({ pos, data }) => {
return (
<div>
<i
className="fa-regular fa-copy signCopy"
onClick={(e) => {
console.log("hello console");
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: "12px",
color: "black",
justifyContent: "center"
}}
>
{pos.isStamp ? "stamp" : "signature"}
</div>
)}
</div>
);
};
const handleUserName = (signerId, Role) => {
if (signerId) {
const checkSign = signersdata.filter(
@@ -357,9 +417,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,
@@ -390,9 +455,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);
@@ -469,23 +532,18 @@ 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: posWidth(pos),
height: posHeight(pos)
width: pos.Width ? pos.Width : 150,
height: pos.Height ? pos.Height : 60
}}
// size={{
// width: pos.Width ? pos.Width : 150,
// height: pos.Height ? pos.Height : 60
// }}
lockAspectRatio={
pos.Width
? pos.Width / pos.Height
@@ -502,16 +560,9 @@ function RenderPdf({
// data.signerObjId,
}
default={{
x: xPos(pos),
y: !pos.isMobile
? pos.yPosition / scale
: pos.yPosition *
(pos.scale / scale)
x: pos.xPosition,
y: pos.yPosition
}}
// default={{
// x: pos.xPosition,
// y: pos.yPosition
// }}
onResizeStart={() => {
setIsResize(true);
}}
@@ -525,7 +576,6 @@ function RenderPdf({
delta,
position
) => {
e.stopPropagation();
handleImageResize(
ref,
pos.key,
@@ -540,6 +590,8 @@ function RenderPdf({
);
}}
>
<BorderResize right={-12} top={-11} />
<PlaceholderBorder pos={pos} />
<div
onTouchEnd={() => {
const dataNewPlace = addZIndex(
@@ -557,20 +609,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
className="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
className="fa-regular fa-circle-xmark signCloseBtn"
onTouchStart={(e) => {
e.stopPropagation();
handleDeleteSign(
@@ -580,12 +638,10 @@ function RenderPdf({
// data.signerObjId
}}
style={{
background: themeColor()
color: "#188ae2"
}}
className="placeholdCloseBtn"
>
x
</div>
></i>
<div
style={{
fontSize: "12px",
@@ -634,18 +690,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,
@@ -672,11 +729,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);
@@ -685,41 +755,54 @@ function RenderPdf({
}, 500);
}
}}
style={{
height: "100%"
}}
>
<BorderResize />
<div
ref={nodeRef}
onTouchStart={(e) => {
<i
className="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
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 ? (
<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"
}}
>
@@ -849,9 +932,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)
@@ -859,15 +947,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);
@@ -965,13 +1047,11 @@ function RenderPdf({
bounds="parent"
style={{
cursor: "all-scroll",
// background: data.blockColor,
borderColor: themeColor(),
background: data.blockColor,
zIndex: pos.zIndex
? pos.zIndex
: "1"
}}
className="signWidgetblock"
className="signYourselfBlock"
onDrag={() => handleTabDrag(pos.key)}
size={{
width: pos.Width ? pos.Width : 150,
@@ -984,13 +1064,13 @@ function RenderPdf({
}
onDragStop={
(event, dragElement) =>
handleStop(
event,
dragElement,
data.Id,
pos.key
)
// data.signerObjId,
handleStop(
event,
dragElement,
data.Id,
pos.key
)
// data.signerObjId,
}
default={{
x: pos.xPosition,
@@ -1023,40 +1103,30 @@ function RenderPdf({
);
}}
>
<BorderResize />
<div
style={{
borderColor: themeColor(),
background: data.blockColor,
width: pos.Width
? pos.Width - 20
: 130,
height: pos.Height
? pos.Height - 8
: 52,
border: "1px solid red",
overflow: "hidden"
}}
>
<i
className="fa-regular fa-user signCopy"
<BorderResize right={-12} top={-11} />
<PlaceholderBorder pos={pos} />
<div>
<i
className="fa-regular fa-user signUserIcon"
onClick={(e) => {
e.stopPropagation();
handleLinkUser(data.Id);
setUniqueId(data.Id);
}}
style={{
color: "#188ae2",
right: 45
color: "#188ae2"
}}
></i>
<i
className="fa-regular fa-copy signCopy"
// onClick={(e) => {
// e.stopPropagation();
// setIsPageCopy(true);
// setSignKey(pos.key);
// }}
onClick={(e) => {
e.stopPropagation();
setIsPageCopy(true);
setSignKey(pos.key);
setSignerObjId(
data.signerObjId
);
}}
style={{
color: "#188ae2"
}}
@@ -1079,7 +1149,7 @@ function RenderPdf({
<div
style={{
fontSize: "12px",
color: themeColor(),
color: "black",
justifyContent: "center"
}}
>
@@ -1125,12 +1195,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,
@@ -1168,46 +1239,9 @@ function RenderPdf({
}
}}
>
<BorderResize />
<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>
)}
<BorderResize right={-12} top={-11} />
<PlaceholderBorder pos={pos} />
<PlaceholderDesign pos={pos} />
</Rnd>
)
);
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+17 -4
View File
@@ -28,6 +28,7 @@ import {
import RenderPdf from "./component/renderPdf";
import ModalComponent from "./component/modalComponent";
import { useNavigate } from "react-router-dom";
import PlaceholderCopy from "./component/PlaceholderCopy";
import LinkUserModal from "./component/LinkUserModal";
import Title from "./component/Title";
@@ -70,10 +71,12 @@ function PlaceHolderSign() {
const [selectedEmail, setSelectedEmail] = useState(false);
const [isResize, setIsResize] = useState(false);
const [zIndex, setZIndex] = useState(1);
const [signKey, setSignKey] = useState();
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
});
const [isPageCopy, setIsPageCopy] = useState(false);
const [uniqueId, setUniqueId] = useState("");
const [roleName, setRoleName] = useState("");
const [isAddUser, setIsAddUser] = useState({});
@@ -102,7 +105,6 @@ function PlaceHolderSign() {
});
const [{ isDragSign }, dragSignature] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 1,
@@ -114,7 +116,6 @@ function PlaceHolderSign() {
});
const [{ isDragStamp }, dragStamp] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 2,
@@ -127,7 +128,6 @@ function PlaceHolderSign() {
const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 3,
@@ -140,7 +140,6 @@ function PlaceHolderSign() {
const [{ isDragStampSS }, dragStampSS] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 4,
@@ -975,6 +974,7 @@ function PlaceHolderSign() {
setAllPages={setAllPages}
setPageNumber={setPageNumber}
setSignBtnPosition={setSignBtnPosition}
pageNumber={pageNumber}
/>
{/* pdf render view */}
@@ -1114,6 +1114,16 @@ function PlaceHolderSign() {
type={"signersAlert"}
setIsShowEmail={setIsShowEmail}
/>
<PlaceholderCopy
isPageCopy={isPageCopy}
setIsPageCopy={setIsPageCopy}
xyPostion={signerPos}
setXyPostion={setSignerPos}
allPages={allPages}
pageNumber={pageNumber}
signKey={signKey}
signerObjId={signerObjId}
/>
{/* pdf header which contain funish back button */}
<Header
isPlaceholder={true}
@@ -1151,6 +1161,9 @@ function PlaceHolderSign() {
containerWH={containerWH}
setIsResize={setIsResize}
setZIndex={setZIndex}
setIsPageCopy={setIsPageCopy}
setSignKey={setSignKey}
setSignerObjId={setSignerObjId}
handleLinkUser={handleLinkUser}
setUniqueId={setUniqueId}
/>
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+2 -1
View File
@@ -794,8 +794,9 @@ function EmbedPdfImage() {
allPages={allPages}
setAllPages={setAllPages}
setPageNumber={setPageNumber}
pageNumber={pageNumber}
/>
{/* <div style={{width:"160px",border:"1px solid red"}}>kebjke</div> */}
{/* pdf render view */}
<div
style={{
microfrontends/SignDocuments/src/css/signature.css
+19 -27
View File
@@ -174,51 +174,44 @@
padding: 0px 5.1px 1px 5px;
}
.signCloseBtn{
.signCloseBtn {
position: absolute;
right: -1px;
top: -9px;
border-radius: 100%;
right: -8px;
top: -18px;
font-size: 14px;
cursor: pointer;
padding: 0px 5.1px 1px 5px;
z-index: 2;
background: white;
}
.signCopy {
position: absolute;
right: 24px;
top: -9px;
right: 12px;
top: -18px;
font-size: 13px;
cursor: pointer;
z-index: 2;
background: white;
}
.placeholderBlock {
padding: 0px;
.signUserIcon {
position: absolute;
border-style: dashed;
width: 150px;
height: 60px;
background: #daebe0;
text-align: center;
justify-content: center;
border-width: 0.2px;
right: 32px;
top: -18px;
font-size: 13px;
cursor: pointer;
z-index: 2;
background: white;
}
.signWidgetblock {
.ScrollbarsCustom-Track {
width: 4px !important;
}
.signYourselfBlock {
padding: 0px;
border-style: dashed;
display: flex !important;
display: flex !important;
text-align: center !important;
justify-content: center !important;
align-items: center !important;
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;
@@ -563,7 +556,6 @@
gap: 5px;
border: none;
background-color: #887abf;
width: 200px;
white-space: nowrap;
overflow: hidden !important;
microfrontends/SignDocuments/src/utils/Utils.js
+131 -167
View File
@@ -4,6 +4,9 @@ import { rgb } from "pdf-lib";
const isMobile = window.innerWidth < 767;
export const resizeBorderExtraWidth = () => {
return 20;
};
export async function getBase64FromUrl(url) {
const data = await fetch(url);
const blob = await data.blob();
@@ -77,91 +80,43 @@ export function getHostUrl() {
}
}
export const calculateImgAspectRatio = (imgWH) => {
export const calculateImgAspectRatio = (imgWH, pos) => {
let newWidth, newHeight;
const placeholderHeight = pos && pos.Width ? pos.Height : 60;
const aspectRatio = imgWH.width / imgWH.height;
if (aspectRatio === "2.533333333333333") {
newWidth = 150;
newHeight = 60;
} else if (aspectRatio === 1) {
newWidth = aspectRatio * 100;
newHeight = aspectRatio * 100;
} else if (aspectRatio < 1) {
newWidth = aspectRatio * 70;
newHeight = 70;
} else if (aspectRatio < 2) {
newWidth = aspectRatio * 100;
newHeight = 100;
} else if (aspectRatio > 2 && aspectRatio < 4) {
newWidth = aspectRatio * 70;
newHeight = 70;
} else if (aspectRatio > 4) {
newWidth = aspectRatio * 40;
newHeight = 40;
} else if (aspectRatio > 5) {
newWidth = aspectRatio * 10;
newHeight = 10;
}
newWidth = aspectRatio * placeholderHeight;
newHeight = placeholderHeight;
return { newHeight, newWidth };
};
//function for upload stamp or image
export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
const updateFilter = xyPostion[index].pos.filter(
(data, ind) =>
data.key === signKey && data.Width && data.Height && data.SignUrl
);
let getIMGWH = calculateImgAspectRatio(imgWH);
const getXYdata = xyPostion[index].pos;
if (updateFilter.length > 0) {
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
}
return url;
});
let getIMGWH;
//get current page position
const getXYData = xyPostion[index].pos;
const updateXYData = getXYData.map((url) => {
if (url.key === signKey) {
getIMGWH = calculateImgAspectRatio(imgWH, url);
const newUpdateUrl = xyPostion.map((obj, ind) => {
if (ind === index) {
return { ...obj, pos: addSign };
}
return obj;
});
return newUpdateUrl;
} else {
const getXYdata = xyPostion[index].pos;
return {
...url,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
}
return url;
});
let getPosData = xyPostion[index].pos.filter(
(data) => data.key === signKey
);
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
}
return url;
});
const newUpdateUrl = xyPostion.map((obj, ind) => {
if (ind === index) {
return { ...obj, pos: addSign };
}
return obj;
});
return newUpdateUrl;
}
const updateXYposition = xyPostion.map((obj, ind) => {
if (ind === index) {
return { ...obj, pos: updateXYData };
}
return obj;
});
return updateXYposition;
}
//function for save button to save signature or image url
@@ -171,52 +126,47 @@ export function onSaveSign(
signKey,
signatureImg,
imgWH,
isDefaultSign,
isSign
isDefaultSign
) {
let getXYdata = xyPostion[index].pos;
let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
let getIMGWH;
if (isDefaultSign) {
getIMGWH = calculateImgAspectRatio(imgWH);
}
let getXYdata = xyPostion[index].pos;
const updateXYData = getXYdata.map((position) => {
if (position.key === signKey) {
if (isDefaultSign) {
getIMGWH = calculateImgAspectRatio(imgWH, position);
}
const getSignImgWH = calculateImgAspectRatio(
{ width: 150, height: 60 },
position
);
const posWidth = isDefaultSign
? getIMGWH.newWidth
: position.Width
? getSignImgWH.newWidth
: 150;
const posHeight = isDefaultSign
? getIMGWH.newHeight
: position.Height
? getSignImgWH.newHeight
: 60;
const posWidth = isDefaultSign
? getIMGWH.newWidth
: isSign && getPosData[0].ImageType
? 150
: getPosData[0].Width
? getPosData[0].Width
: 150;
const posHidth = isDefaultSign
? getIMGWH.newHeight
: isSign && getPosData[0].ImageType
? 60
: getPosData[0].Height
? getPosData[0].Height
: 60;
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
...position,
Width: posWidth,
Height: posHidth,
SignUrl: signatureImg,
ImageType: "sign"
Height: posHeight,
SignUrl: signatureImg
};
}
return url;
return position;
});
const newUpdateUrl = xyPostion.map((obj, ind) => {
const updateXYposition = xyPostion.map((obj, ind) => {
if (ind === index) {
return { ...obj, pos: addSign };
return { ...obj, pos: updateXYData };
}
return obj;
});
return newUpdateUrl;
return updateXYposition;
}
export const addZIndex = (signerPos, key, setZIndex) => {
@@ -260,14 +210,16 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
height: img.height
};
}
const getIMGWH = calculateImgAspectRatio(imgWH);
let xyDefaultPos = [];
for (let i = 0; i < xyPostion.length; i++) {
let getIMGWH;
const getXYdata = xyPostion[i].pos;
const getPageNo = xyPostion[i].pageNumber;
const getPosData = getXYdata;
const addSign = getPosData.map((url, ind) => {
getIMGWH = calculateImgAspectRatio(imgWH, url);
if (url) {
return {
...url,
@@ -459,78 +411,87 @@ export function modalAlign() {
modal.style.top = window.innerHeight / 3 + "px";
}
}
export const containerWidth = (pos, scale, signyourself) => {
export const placeholderWidth = (pos, scale, signyourself) => {
let width;
const defaultWidth = 150;
const posWidth = pos.Width ? pos.Width : defaultWidth;
if (signyourself) {
if (isMobile) {
return pos.Width * scale;
return posWidth * scale;
} else {
return pos.Width;
return posWidth;
}
} else {
if (isMobile) {
if (pos.isMobile) {
width = pos.Width ? pos.Width * scale : 150 * scale;
width = posWidth ? posWidth * scale : defaultWidth * scale;
return width;
} else {
if (pos.IsResize) {
width = pos.Width ? pos.Width * scale : 150 * scale;
width = posWidth ? posWidth * scale : 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 ? pos.Width * pos.scale : 150 * pos.scale;
width = posWidth ? posWidth * pos.scale : defaultWidth * pos.scale;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
width = posWidth ? posWidth : defaultWidth;
return width;
}
}
}
};
export const containerHeight = (pos, scale, signyourself) => {
export const placeholderHeight = (pos, scale, signyourself) => {
let height;
const posHeight = pos.Height;
const defaultHeight = 60;
if (signyourself) {
if (isMobile) {
return pos.Height * scale;
return posHeight * scale;
} else {
return pos.Height;
return posHeight;
}
} else {
if (isMobile) {
if (pos.isMobile) {
height = pos.Height ? pos.Height * scale : 60 * scale;
height = posHeight ? posHeight * scale : defaultHeight * scale;
return height;
} else {
if (pos.IsResize) {
height = pos.Height ? pos.Height * scale : 60 * scale;
height = posHeight ? posHeight * scale : 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 ? pos.Height * pos.scale : 60 * pos.scale;
height = posHeight
? posHeight * pos.scale
: defaultHeight * pos.scale;
return height;
}
} else {
height = pos.Height ? pos.Height : 60;
height = posHeight ? posHeight : defaultHeight;
return height;
}
}
@@ -578,78 +539,80 @@ export const multiSignEmbed = async (
} else {
img = await pdfDoc.embedPng(imgData);
}
const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60;
const scaleWidth = containerWidth(imgUrlList[id], scale, signyourself);
const scaleHeight = containerHeight(imgUrlList[id], scale, signyourself);
const scaleWidth = placeholderWidth(imgUrlList[id], scale, signyourself);
const scaleHeight = placeholderHeight(
imgUrlList[id],
scale,
signyourself
);
const xPos = (pos) => {
const resizePos = pos.xPosition;
if (signyourself) {
if (isMobile) {
return imgUrlList[id].xPosition * scale;
return resizePos * scale;
} else {
return imgUrlList[id].xPosition;
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) {
const x = pos.xPosition * (pos.scale / scale);
const x = resizePos * (pos.scale / scale);
return x * scale;
} else {
const x = pos.xPosition / scale;
const x = resizePos / 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;
const x = resizePos * pos.scale;
return x;
} else {
return pos.xPosition;
return resizePos;
}
}
}
};
const yPos = (pos) => {
const resizePos = imgUrlList[id].yPosition;
if (signyourself) {
if (isMobile) {
return (
page.getHeight() -
imgUrlList[id].yPosition * scale -
imgHeight * scale
);
return page.getHeight() - resizePos * scale - scaleHeight;
} else {
return page.getHeight() - imgUrlList[id].yPosition - imgHeight;
return page.getHeight() - resizePos - scaleHeight;
}
} else {
//checking both condition mobile and desktop view
const y = pos.yPosition / scale;
const y = resizePos / scale;
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);
return page.getHeight() - y * scale - imgHeight * scale;
const y = resizePos * (pos.scale / scale);
return page.getHeight() - y * scale - scaleHeight;
} else {
if (pos.IsResize) {
return page.getHeight() - y * scale - imgHeight * scale;
return page.getHeight() - y * scale - scaleHeight;
} else {
return page.getHeight() - y * scale - imgHeight;
return page.getHeight() - y * scale - scaleHeight;
}
}
} 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) {
if (pos.IsResize) {
const y = pos.yPosition * pos.scale;
return page.getHeight() - y - imgHeight;
const y = resizePos * pos.scale;
return page.getHeight() - y - scaleHeight;
} else {
const y = pos.yPosition * pos.scale;
return page.getHeight() - y - imgHeight * pos.scale;
const y = resizePos * pos.scale;
return page.getHeight() - y - scaleHeight;
}
} else {
return page.getHeight() - pos.yPosition - imgHeight;
return page.getHeight() - resizePos - scaleHeight;
}
}
}
@@ -871,34 +834,36 @@ export const signPdfFun = async (
const height = xyPosData.Height ? xyPosData.Height : 60;
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) {
const x = pos.xPosition * (pos.scale / scale);
const x = resizePos * (pos.scale / scale);
return x * scale;
} else {
const x = pos.xPosition / scale;
const x = resizePos / 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;
const x = resizePos * pos.scale;
return x;
} else {
return pos.xPosition;
return resizePos;
}
}
};
const yBottom = (pos) => {
const resizePos = pos.yBottom;
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);
const y = resizePos * (pos.scale / scale);
yPosition = pos.isDrag
? y * scale - height * scale
: pos.firstYPos
@@ -906,7 +871,7 @@ export const signPdfFun = async (
: y * scale - height * scale;
return yPosition;
} else {
const y = pos.yBottom / scale;
const y = resizePos / scale;
if (pos.IsResize) {
yPosition = pos.isDrag
? y * scale - height * scale
@@ -926,7 +891,7 @@ export const signPdfFun = 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 y = pos.yBottom * pos.scale;
const y = resizePos * pos.scale;
if (pos.IsResize) {
yPosition = pos.isDrag
? y - height
@@ -944,16 +909,15 @@ export const signPdfFun = async (
}
} else {
yPosition = pos.isDrag
? pos.yBottom - height
? resizePos - height
: pos.firstYPos
? pos.yBottom - height + pos.firstYPos
: pos.yBottom - height;
? resizePos - height + pos.firstYPos
: resizePos - height;
return yPosition;
}
}
};
const bottomY = yBottom(xyPosData);
singleSign = {
pdfFile: pdfBase64Url,
docId: documentId,
@@ -961,9 +925,9 @@ export const signPdfFun = async (
sign: {
Base64: base64Url,
Left: xPos(xyPosData),
Bottom: bottomY,
Width: containerWidth(xyPosData, scale),
Height: containerHeight(xyPosData, scale),
Bottom: yBottom(xyPosData),
Width: placeholderWidth(xyPosData, scale),
Height: placeholderHeight(xyPosData, scale),
Page: pageNo
}
};