WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-22 15:42:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #286 from OpenSignLabs/placeholder

Browse Source 
feat: add copy placeholder feature and change in UI of placeholder
This commit is contained in:
prafull-opensignlabs
2023-12-26 15:33:22 +05:30
committed by GitHub
parent 56bb7d36eb 3b5875e283
commit 642ef4f5b7
11 changed files with 893 additions and 623 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/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
+70 -64
View File
@@ -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>
);
}
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+282 -208
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`;
@@ -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 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>
);
};
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,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>
)
);
@@ -1124,6 +1197,7 @@ function RenderPdf({
</React.Fragment>
);
}))}
{/* this component for render pdf document is in middle of the component */}
<Document
onLoadError={(e) => {
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+17 -4
View File
@@ -27,6 +27,7 @@ import {
import RenderPdf from "./component/renderPdf";
import ModalComponent from "./component/modalComponent";
import { useNavigate } from "react-router-dom";
import PlaceholderCopy from "./component/PlaceholderCopy";
function PlaceHolderSign() {
const navigate = useNavigate();
@@ -68,10 +69,12 @@ function PlaceHolderSign() {
const [isResize, setIsResize] = useState(false);
const [isAlreadyPlace, setIsAlreadyPlace] = 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 color = [
"#93a3db",
"#e6c3db",
@@ -96,7 +99,6 @@ function PlaceHolderSign() {
});
const [{ isDragSign }, dragSignature] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 1,
@@ -108,7 +110,6 @@ function PlaceHolderSign() {
});
const [{ isDragStamp }, dragStamp] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 2,
@@ -121,7 +122,6 @@ function PlaceHolderSign() {
const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 3,
@@ -134,7 +134,6 @@ function PlaceHolderSign() {
const [{ isDragStampSS }, dragStampSS] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 4,
@@ -814,6 +813,7 @@ function PlaceHolderSign() {
setAllPages={setAllPages}
setPageNumber={setPageNumber}
setSignBtnPosition={setSignBtnPosition}
pageNumber={pageNumber}
/>
{/* pdf render view */}
@@ -953,6 +953,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}
@@ -990,6 +1000,9 @@ function PlaceHolderSign() {
containerWH={containerWH}
setIsResize={setIsResize}
setZIndex={setZIndex}
setIsPageCopy={setIsPageCopy}
setSignKey={setSignKey}
setSignerObjId={setSignerObjId}
/>
)}
</div>
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
+27 -11
View File
@@ -3,6 +3,7 @@
background-color: rgb(255, 255, 255);
width: 460px;
height: 184px;
}
.penContainer {
@@ -174,19 +175,35 @@
padding: 0px 5.1px 1px 5px;
}
.placeholderBlock {
padding: 0px;
.signCloseBtn {
position: absolute;
border-style: dashed;
width: 150px;
height: 60px;
background: #daebe0;
text-align: center;
justify-content: center;
border-width: 0.2px;
right: -8px;
top: -18px;
font-size: 14px;
cursor: pointer;
z-index: 2;
background: white;
}
.signCopy {
position: absolute;
right: 12px;
top: -18px;
font-size: 13px;
cursor: pointer;
z-index: 2;
background: white;
}
.ScrollbarsCustom-Track {
width: 4px !important;
}
.signYourselfBlock {
padding: 0px;
display: flex !important;
text-align: center !important;
justify-content: center !important;
align-items: center !important;
}
.finishBtn {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
padding: 3px 30px;
@@ -531,7 +548,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
}
};