imageRef.current.click()}
@@ -300,7 +293,6 @@ function SignPad({
accept="image/*"
ref={imageRef}
hidden
- // style={{ display: "none" }}
/>
Upload
@@ -309,24 +301,25 @@ function SignPad({
<>
@@ -336,36 +329,11 @@ function SignPad({
)
) : (
<>
- {/* {isSignImg ? (
-
@@ -373,17 +341,16 @@ function SignPad({
}
dotSize={1}
/>
- {/* )} */}
- 
-
- ) : ( */}
-
- {!isStamp && !isImageSelect && (
-
- )}
-
-
- */}
);
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
index dc4f36218..6421e8a8b 100644
--- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
@@ -22,7 +22,9 @@ import {
urlValidator,
multiSignEmbed,
embedDocId,
- signPdfFun
+ signPdfFun,
+ addDefaultSignatureImg,
+ onImageSelect
} from "../utils/Utils";
import Tour from "reactour";
import Signedby from "./component/signedby";
@@ -548,60 +550,43 @@ function EmbedPdfImage() {
//function for image upload or update
const onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
- const imageType = event.target.files[0].type;
-
- const reader = new FileReader();
- reader.readAsDataURL(event.target.files[0]);
-
- reader.onloadend = function (e) {
- let width, height;
- const image = new Image();
-
- image.src = e.target.result;
- image.onload = function () {
- width = image.width;
- height = image.height;
- const aspectRatio = 460 / 184;
- const imgR = width / height;
-
- if (imgR > aspectRatio) {
- width = 460;
- height = 460 / imgR;
- } else {
- width = 184 * imgR;
- height = 184;
- }
- setImgWH({ width: width, height: height });
- imageRef.current.style.width = `${width}px`;
- imageRef.current.style.height = `${height}px`;
- };
-
- image.src = reader.result;
-
- setImage({ src: image.src, imgType: imageType });
- };
+ onImageSelect(event, setImgWH, setImage);
}
};
//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);
setImage();
+ if (isDefaultSign) {
+ const img = new Image();
+ img.src = defaultSignImg;
+ if (img.complete) {
+ imgWH = {
+ width: img.width,
+ height: img.height
+ };
+ }
+ }
const getUpdatePosition = onSaveSign(
xyPostion,
index,
signKey,
- signatureImg
+ signatureImg,
+ imgWH,
+ isDefaultSign,
+ signFlag
);
if (getUpdatePosition) {
setXyPostion(getUpdatePosition);
}
};
-
//function for upload stamp image
const saveImage = () => {
const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
@@ -647,27 +632,9 @@ function EmbedPdfImage() {
};
const addDefaultSignature = () => {
- let xyDefaultPos = [];
- for (let i = 0; i < xyPostion.length; i++) {
- const getXYdata = xyPostion[i].pos;
- const getPageNo = xyPostion[i].pageNumber;
- const getPosData = getXYdata;
+ const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg);
- const addSign = getPosData.map((url, ind) => {
- if (url) {
- return { ...url, SignUrl: defaultSignImg };
- }
- return url;
- });
-
- const newXypos = {
- pageNumber: getPageNo,
- pos: addSign
- };
- xyDefaultPos.push(newXypos);
- }
-
- setXyPostion(xyDefaultPos);
+ setXyPostion(getXyData);
setAddDefaultSign({
isShow: false,
alertMessage: ""
diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js
index 27659a704..a1aca4c2e 100644
--- a/microfrontends/SignDocuments/src/utils/Utils.js
+++ b/microfrontends/SignDocuments/src/utils/Utils.js
@@ -77,46 +77,49 @@ export function getHostUrl() {
}
}
+export const calculateImgAspectRatio = (imgWH) => {
+ let newWidth, newHeight;
+ 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;
+ }
+ 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) {
- let newWidth, newHeight;
- const aspectRatio = imgWH.width / imgWH.height;
-
- const getXYdata = xyPostion[index].pos;
-
- if (aspectRatio === 1) {
- newWidth = aspectRatio * 100;
- newHeight = aspectRatio * 100;
- } 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;
- }
-
- let getPosData = xyPostion[index].pos.filter(
- (data) => data.key === signKey
- );
-
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
- Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
- Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
+ Width: getIMGWH.newWidth,
+ Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
@@ -131,39 +134,19 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
return obj;
});
return newUpdateUrl;
- // setXyPostion(newUpdateUrl);
} else {
const getXYdata = xyPostion[index].pos;
let getPosData = xyPostion[index].pos.filter(
(data) => data.key === signKey
);
- const aspectRatio = imgWH.width / imgWH.height;
-
- let newWidth, newHeight;
- if (aspectRatio === 1) {
- newWidth = aspectRatio * 100;
- newHeight = aspectRatio * 100;
- } 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;
- }
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
- Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
- Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
+ Width: getIMGWH.newWidth,
+ Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
@@ -182,17 +165,46 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
}
//function for save button to save signature or image url
-export function onSaveSign(xyPostion, index, signKey, signatureImg) {
+export function onSaveSign(
+ xyPostion,
+ index,
+ signKey,
+ signatureImg,
+ imgWH,
+ isDefaultSign,
+ isSign
+) {
let getXYdata = xyPostion[index].pos;
let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
+ let getIMGWH;
+ if (isDefaultSign) {
+ getIMGWH = calculateImgAspectRatio(imgWH);
+ }
+
+ 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,
- Width: getPosData[0].Width ? getPosData[0].Width : 150,
- Height: getPosData[0].Height ? getPosData[0].Height : 60,
- SignUrl: signatureImg
+ Width: posWidth,
+ Height: posHidth,
+ SignUrl: signatureImg,
+ ImageType: "sign"
};
}
return url;
@@ -207,6 +219,78 @@ export function onSaveSign(xyPostion, index, signKey, signatureImg) {
return newUpdateUrl;
}
+//function for add default signature or image for all requested location
+export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
+ let imgWH = { width: "", height: "" };
+ const img = new Image();
+ img.src = defaultSignImg;
+ if (img.complete) {
+ imgWH = {
+ width: img.width,
+ height: img.height
+ };
+ }
+ const getIMGWH = calculateImgAspectRatio(imgWH);
+ let xyDefaultPos = [];
+ for (let i = 0; i < xyPostion.length; i++) {
+ const getXYdata = xyPostion[i].pos;
+ const getPageNo = xyPostion[i].pageNumber;
+ const getPosData = getXYdata;
+
+ const addSign = getPosData.map((url, ind) => {
+ if (url) {
+ return {
+ ...url,
+ SignUrl: defaultSignImg,
+ Width: getIMGWH.newWidth,
+ Height: getIMGWH.newHeight,
+ ImageType: "default"
+ };
+ }
+ return url;
+ });
+
+ const newXypos = {
+ pageNumber: getPageNo,
+ pos: addSign
+ };
+ xyDefaultPos.push(newXypos);
+ }
+ return xyDefaultPos;
+};
+
+//function for select image and upload image
+export const onImageSelect = (event, setImgWH, setImage) => {
+ const imageType = event.target.files[0].type;
+ const reader = new FileReader();
+ reader.readAsDataURL(event.target.files[0]);
+
+ reader.onloadend = function (e) {
+ let width, height;
+ const image = new Image();
+
+ image.src = e.target.result;
+ image.onload = function () {
+ width = image.width;
+ height = image.height;
+ const aspectRatio = 460 / 184;
+ const imgR = width / height;
+
+ if (imgR > aspectRatio) {
+ width = 460;
+ height = 460 / imgR;
+ } else {
+ width = 184 * imgR;
+ height = 184;
+ }
+ setImgWH({ width: width, height: height });
+ };
+
+ image.src = reader.result;
+
+ setImage({ src: image.src, imgType: imageType });
+ };
+};
//function for getting document details from contract_Documents class
export const contractDocument = async (documentId) => {
const data = {
+
)}
-
- {/*
{allColor.map((data, key) => {
return (
![]()
{
if (key === 0) {
@@ -414,60 +381,14 @@ function SignPad({
width={20}
height={20}
/>
- //
);
})}
-