diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
index 053c5ca78..7f17f6e16 100644
--- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
@@ -524,6 +524,87 @@ function PdfRequestFiles() {
alert("something went wrong");
});
};
+
+ //function for resize image and update width and height
+ const handleImageResize = (ref, key, signerId, position) => {
+ const filterSignerPos = signerPos.filter(
+ (data) => data.signerObjId === signerId
+ );
+ if (filterSignerPos.length > 0) {
+ const getPlaceHolder = filterSignerPos[0].placeHolder;
+ const getPageNumer = getPlaceHolder.filter(
+ (data) => data.pageNumber === pageNumber
+ );
+ if (getPageNumer.length > 0) {
+ const getXYdata = getPageNumer[0].pos.filter(
+ (data, ind) => data.key === key && data.Width && data.Height
+ );
+ if (getXYdata.length > 0) {
+ const getXYdata = getPageNumer[0].pos;
+ const getPosData = getXYdata;
+ const addSignPos = getPosData.map((url, ind) => {
+ if (url.key === key) {
+ return {
+ ...url,
+ Width: ref.offsetWidth,
+ Height: ref.offsetHeight,
+ xPosition: position.x
+ };
+ }
+ return url;
+ });
+
+ const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+ if (obj.pageNumber === pageNumber) {
+ return { ...obj, pos: addSignPos };
+ }
+ return obj;
+ });
+
+ const newUpdateSigner = signerPos.map((obj, ind) => {
+ if (obj.signerObjId === signerId) {
+ return { ...obj, placeHolder: newUpdateSignPos };
+ }
+ return obj;
+ });
+
+ setSignerPos(newUpdateSigner);
+ } else {
+ const getXYdata = getPageNumer[0].pos;
+
+ const getPosData = getXYdata;
+
+ const addSignPos = getPosData.map((url, ind) => {
+ if (url.key === key) {
+ return {
+ ...url,
+ Width: ref.offsetWidth,
+ Height: ref.offsetHeight
+ };
+ }
+ return url;
+ });
+
+ const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+ if (obj.pageNumber === pageNumber) {
+ return { ...obj, pos: addSignPos };
+ }
+ return obj;
+ });
+
+ const newUpdateSigner = signerPos.map((obj, ind) => {
+ if (obj.signerObjId === signerId) {
+ return { ...obj, placeHolder: newUpdateSignPos };
+ }
+ return obj;
+ });
+
+ setSignerPos(newUpdateSigner);
+ }
+ }
+ }
+ };
+
//function for get pdf page details
const pageDetails = async (pdf) => {
const load = {
@@ -956,6 +1037,7 @@ function PdfRequestFiles() {
setCurrentSigner={setCurrentSigner}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
+ setSignerPos={setSignerPos}
/>
diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
index e816f99d6..9a1a45f08 100644
--- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
@@ -692,60 +692,6 @@ function SignYourSelf() {
setSignBtnPosition([xySignature]);
};
- //function for resize image and update width and height
- const handleImageResize = (ref, key, direction, position) => {
- const updateFilter = xyPostion[index].pos.filter(
- (data, ind) => data.key === key && data.Width && data.Height
- );
-
- if (updateFilter.length > 0) {
- const getXYdata = xyPostion[index].pos;
- const getPosData = getXYdata;
- const addSign = getPosData.map((url, ind) => {
- if (url.key === key) {
- return {
- ...url,
- Width: ref.offsetWidth,
- Height: ref.offsetHeight,
- xPosition: position.x
- };
- }
- return url;
- });
-
- const newUpdateUrl = xyPostion.map((obj, ind) => {
- if (ind === index) {
- return { ...obj, pos: addSign };
- }
- return obj;
- });
-
- setXyPostion(newUpdateUrl);
- } else {
- const getXYdata = xyPostion[index].pos;
-
- const getPosData = getXYdata;
-
- const addSign = getPosData.map((url, ind) => {
- if (url.key === key) {
- return {
- ...url,
- Width: ref.offsetWidth,
- Height: ref.offsetHeight
- };
- }
- return url;
- });
-
- const newUpdateUrl = xyPostion.map((obj, ind) => {
- if (ind === index) {
- return { ...obj, pos: addSign };
- }
- return obj;
- });
- setXyPostion(newUpdateUrl);
- }
- };
const handleAllDelete = () => {
setXyPostion([]);
};
@@ -1002,7 +948,6 @@ function SignYourSelf() {
nodeRef={nodeRef}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
- handleImageResize={handleImageResize}
isDragging={isDragging}
setIsSignPad={setIsSignPad}
setIsStamp={setIsStamp}
@@ -1017,6 +962,8 @@ function SignYourSelf() {
pageDetails={pageDetails}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
+ setXyPostion={setXyPostion}
+ index={index}
/>
diff --git a/microfrontends/SignDocuments/src/Component/component/borderResize.js b/microfrontends/SignDocuments/src/Component/component/borderResize.js
new file mode 100644
index 000000000..1596d09bb
--- /dev/null
+++ b/microfrontends/SignDocuments/src/Component/component/borderResize.js
@@ -0,0 +1,17 @@
+import React from "react";
+
+function BorderResize() {
+ return (
+
+ );
+}
+
+export default BorderResize;
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
index abe0d34fe..1ef480022 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
@@ -4,6 +4,11 @@ import Toast from "react-bootstrap/Toast";
import { Rnd } from "react-rnd";
import { themeColor } from "../../utils/ThemeColor/backColor";
import { Document, Page, pdfjs } from "react-pdf";
+import BorderResize from "./borderResize";
+import {
+ handleImageResize,
+ handleSignYourselfImageResize
+} from "../../utils/Utils";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
@@ -17,7 +22,6 @@ function RenderPdf({
nodeRef,
handleTabDrag,
handleStop,
- handleImageResize,
isDragging,
setIsSignPad,
setIsStamp,
@@ -37,7 +41,10 @@ function RenderPdf({
signedSigners,
setPdfLoadFail,
placeholder,
- pdfLoadFail
+ pdfLoadFail,
+ setSignerPos,
+ setXyPostion,
+ index
}) {
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
@@ -137,124 +144,101 @@ function RenderPdf({
{placeData.pageNumber === pageNumber &&
placeData.pos.map((pos, index) => {
- return pos && pos.SignUrl ? (
-
- {
- setIsSignPad(true);
- setSignKey(pos.key);
- }}
- >
-
-
![no img]()
{
+ return (
+ pos && (
+
+ {
+ handleImageResize(
+ ref,
+ pos.key,
+ data.signerObjId,
+ position,
+ signerPos,
+ pageNumber,
+ setSignerPos
+ );
+ }}
+ lockAspectRatio={pos.Width && 2.5}
+ default={{
+ x: xPos(pos),
+ y: yPos(pos)
+ }}
+ onClick={() => {
+ if (data.signerObjId === signerObjectId) {
setIsSignPad(true);
setSignKey(pos.key);
- }}
- src={pos.SignUrl}
- style={{
- width: "100%",
- height: "100%",
- objectFit: "contain"
- }}
- />
-
+
+ {data.signerObjId === signerObjectId && (
+
+ )}
+ {pos.SignUrl ? (
+
![no img]()
{
+ setIsSignPad(true);
+ setSignKey(pos.key);
+ }}
+ src={pos.SignUrl}
+ style={{
+ width: "100%",
+ height: "100%",
+ objectFit: "contain"
+ }}
+ />
+ ) : (
+ pdfDetails[0].Signers.map((signerData, key) => {
+ return (
+ signerData.objectId === data.signerObjId && (
+
- {pos.isStamp ? "stamp" : "signature"}
-
-
+ marginTop: "0px"
+ }}
+ >
+ {signerData.Name}
+
+ )
+ );
+ })
+ )}
+
-
![no img]()
{
- setIsSignPad(true);
- setSignKey(pos.key);
- }}
- src={pos.SignUrl}
- style={{
- width: "100%",
- height: "100%",
- objectFit: "contain"
- }}
- />
-
{
+ setIsSignPad(true);
+ setSignKey(pos.key);
}}
>
- {pos.isStamp ? "stamp" : "signature"}
-
-
+
+ {pos.SignUrl ? (
+ ![no img]()
{
+ setIsSignPad(true);
+ setSignKey(pos.key);
+ }}
+ src={pos.SignUrl}
+ style={{
+ width: "100%",
+ height: "100%",
+ objectFit: "contain"
+ }}
+ />
+ ) : (
+
+ {pos.isStamp ? "stamp" : "signature"}
+
+ )}
+
+ )
);
})}
@@ -454,19 +401,10 @@ function RenderPdf({
key={pos.key}
bounds="parent"
style={{
- padding: "0px",
cursor: "all-scroll",
- zIndex: 1,
- position: "absolute",
- borderStyle: "dashed",
- width: "200px",
- height: "30px",
- borderColor: themeColor(),
- background: data.blockColor,
- textAlign: "center",
- justifyContent: "center",
- borderWidth: "0.2px"
+ borderColor: themeColor()
}}
+ className="placeholderBlock"
onDrag={() =>
handleTabDrag(
pos.key,
@@ -482,11 +420,6 @@ function RenderPdf({
? pos.Width / pos.Height
: 2.5
}
- resizeHandleStyles={{
- bottom: { display: "none" },
- right: { display: "none" },
- bottomRight: { display: "block" }
- }}
onDragStop={(event, dragElement) =>
handleStop(
event,
@@ -510,10 +443,15 @@ function RenderPdf({
ref,
pos.key,
data.signerObjId,
- position
+ position,
+ signerPos,
+ pageNumber,
+ setSignerPos
);
}}
>
+
+
{
e.stopPropagation();
@@ -523,14 +461,9 @@ function RenderPdf({
);
}}
style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px",
- zIndex: 10
+ background: themeColor()
}}
+ className="placeholdCloseBtn"
>
x
@@ -539,7 +472,6 @@ function RenderPdf({
fontSize: "12px",
color: "black",
fontWeight: "600",
-
marginTop: "0px"
}}
>
@@ -559,206 +491,115 @@ function RenderPdf({
{data.pageNumber === pageNumber &&
data.pos.map((pos) => {
- return pos && pos.SignUrl ? (
- handleTabDrag(pos.key)}
- onDragStop={handleStop}
- onResize={(
- e,
- direction,
- ref,
- delta,
- position
- ) => {
- handleImageResize(
- ref,
- pos.key,
- direction,
- position
- );
- }}
- >
- {" "}
- {
- if (!isDragging) {
- setTimeout(() => {
- e.stopPropagation();
- setIsSignPad(true);
- setSignKey(pos.key);
- setIsStamp(pos.isStamp);
- }, 500);
- }
- }}
- >
-
{
- e.stopPropagation();
- handleDeleteSign(pos.key);
- setIsStamp(false);
- }}
- style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px"
- }}
- >
- x
-
-
-
![signimg]()
{
- setSignKey(pos.key);
- console.log("Drag 2");
- setIsSignPad(true);
- setIsStamp(pos.isStamp);
- }}
- src={pos.SignUrl}
- style={{
- width: "100%",
- height: "100%",
- objectFit: "contain"
- }}
- />
-
-
{
if (!isDragging) {
setTimeout(() => {
+ e.stopPropagation();
setIsSignPad(true);
setSignKey(pos.key);
setIsStamp(pos.isStamp);
}, 500);
}
}}
- className="dragElm"
style={{
- padding: "0px",
- cursor: "all-scroll",
- zIndex: 20,
- position: "absolute",
- borderStyle: "dashed",
- width: "150px",
- height: "60px",
- borderColor: themeColor(),
- background: "#daebe0",
- textAlign: "center",
- justifyContent: "center",
- borderWidth: "0.2px",
- overflow: "hidden"
+ height: "100%"
}}
>
+
{
e.stopPropagation();
- e.preventDefault();
-
handleDeleteSign(pos.key);
setIsStamp(false);
}}
- onClick={(e) => {
- e.stopPropagation(); // Prevent further event propagation
- }}
style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px"
+ background: themeColor()
}}
+ className="placeholdCloseBtn"
>
x
-
- {pos.isStamp ? "stamp" : "signature"}
-
+ {pos.SignUrl ? (
+
+ ) : (
+
+ {pos.isStamp ? "stamp" : "signature"}
+
+ )}
-
![no img]()
{
- setIsSignPad(true);
- setSignKey(pos.key);
- }}
- src={pos.SignUrl}
- style={{
- width: "100%",
- height: "100%",
- objectFit: "contain"
- }}
- />
-
{
+ handleSignYourselfImageResize(
+ ref,
+ pos.key,
+ direction,
+ position,
+ xyPostion,
+ index,
+ setXyPostion
+ );
+ }}
+ key={pos.key}
+ bounds="parent"
style={{
- fontSize: "12px",
- color: "black",
- fontWeight: "600",
- justifyContent: "center",
- marginTop: "0px"
+ cursor: "all-scroll",
+ borderColor: themeColor()
+ }}
+ className="placeholderBlock"
+ size={{
+ width: pos.Width ? pos.Width : 150,
+ height: pos.Height ? pos.Height : 60
+ }}
+ lockAspectRatio={pos.Width && 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 + 20
+ : pos.xPosition,
+ y: pos.isMobile
+ ? pos.scale && pos.yPosition * pos.scale
+ : pos.yPosition
+ }}
+ onClick={() => {
+ setIsSignPad(true);
+ setSignKey(pos.key);
}}
>
- {pos.isStamp ? "stamp" : "signature"}
-
-
+
+
+ {pos.SignUrl ? (
+
![no img]()
{
+ setIsSignPad(true);
+ setSignKey(pos.key);
+ }}
+ src={pos.SignUrl}
+ style={{
+ width: "100%",
+ height: "100%",
+ objectFit: "contain"
+ }}
+ />
+ ) : (
+
+ {pos.isStamp ? "stamp" : "signature"}
+
+ )}
+
+ // {pos.isStamp ? "stamp" : "signature"}
+ //
+ //
+ )
);
})}
@@ -1003,21 +870,22 @@ function RenderPdf({
return (
handleTabDrag(
pos.key,
@@ -1033,11 +901,6 @@ function RenderPdf({
? pos.Width / pos.Height
: 2.5
}
- resizeHandleStyles={{
- bottom: { display: "none" },
- right: { display: "none" },
- bottomRight: { display: "block" }
- }}
onDragStop={(event, dragElement) =>
handleStop(
event,
@@ -1061,10 +924,14 @@ function RenderPdf({
ref,
pos.key,
data.signerObjId,
- position
+ position,
+ signerPos,
+ pageNumber,
+ setSignerPos
);
}}
>
+
{
e.stopPropagation();
@@ -1074,14 +941,9 @@ function RenderPdf({
);
}}
style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px",
- zIndex: 10
+ background: themeColor()
}}
+ className="placeholdCloseBtn"
>
x
@@ -1112,192 +974,113 @@ function RenderPdf({
{data.pageNumber === pageNumber &&
data.pos.map((pos) => {
- return pos && pos.SignUrl ? (
- handleTabDrag(pos.key)}
- size={{
- width: pos.Width ? pos.Width : 150,
- height: pos.Height ? pos.Height : 60
- }}
- onDragStop={handleStop}
- default={{
- x: pos.xPosition,
- y: pos.yPosition
- }}
- onResize={(
- e,
- direction,
- ref,
- delta,
- position
- ) => {
- handleImageResize(
- ref,
- pos.key,
- direction,
- position
- );
- }}
- onClick={() => {
- if (!isDragging) {
- setIsSignPad(true);
- setSignKey(pos.key);
- setIsStamp(pos.isStamp);
+ return (
+ pos && (
+
- {
- e.stopPropagation();
- handleDeleteSign(pos.key);
- setIsStamp(false);
+ enableResizing={{
+ top: false,
+ right: false,
+ bottom: false,
+ left: false,
+ topRight: false,
+ bottomRight: true,
+ bottomLeft: false,
+ topLeft: false
}}
+ bounds="parent"
style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px"
+ borderColor: themeColor(),
+ cursor: "all-scroll"
}}
- >
- x
-
-
-
![signimg]()
{
- setSignKey(pos.key);
- setIsSignPad(true);
- setIsStamp(pos.isStamp);
- }}
- src={pos.SignUrl}
- style={{
- width: "100%",
- height: "100%",
- objectFit: "contain"
- }}
- />
-
{
+ className="placeholderBlock"
+ onDrag={() => handleTabDrag(pos.key)}
+ size={{
+ width: pos.Width ? pos.Width : 150,
+ height: pos.Height ? pos.Height : 60
+ }}
+ onDragStop={handleStop}
+ default={{
+ x: pos.xPosition,
+ y: pos.yPosition
+ }}
+ onResize={(
+ e,
+ direction,
+ ref,
+ delta,
+ position
+ ) => {
+ handleSignYourselfImageResize(
+ ref,
+ pos.key,
+ direction,
+ position,
+ xyPostion,
+ index,
+ setXyPostion
+ );
+ }}
+ onClick={() => {
if (!isDragging) {
- e.stopPropagation();
setIsSignPad(true);
setSignKey(pos.key);
setIsStamp(pos.isStamp);
}
}}
- style={{
- cursor: "all-scroll",
- zIndex: 10,
- position: "absolute",
- borderStyle: "dashed",
- width: "150px",
- height: "60px",
- borderColor: themeColor(),
- background: "#daebe0",
- textAlign: "center",
- justifyContent: "center",
- alignItems: "center",
- borderWidth: "0.2px"
- }}
>
-
+
+
{
e.stopPropagation();
handleDeleteSign(pos.key);
setIsStamp(false);
}}
style={{
- position: "absolute",
- right: 0,
- display: "inline-block",
- background: themeColor(),
- cursor: "pointer",
- padding: "0px 10px"
+ background: themeColor()
}}
+ className="placeholdCloseBtn"
>
x
-
- {pos.isStamp ? "stamp" : "signature"}
-
-
-
+
+
+ {pos.SignUrl ? (
+
+
+
+ {pos.isStamp ? "stamp" : "signature"}
+
+ )}
+
+ )
);
})}
);
}))}
{/* this component for render pdf document is in middle of the component */}
-
{
if (recipient) {
diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
index 24f49fa17..a3b94e72b 100644
--- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js
+++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
@@ -518,86 +518,6 @@ function PlaceHolderSign() {
}
};
- //function for resize image and update width and height
- const handleImageResize = (ref, key, signerId, position) => {
- const filterSignerPos = signerPos.filter(
- (data) => data.signerObjId === signerId
- );
- if (filterSignerPos.length > 0) {
- const getPlaceHolder = filterSignerPos[0].placeHolder;
- const getPageNumer = getPlaceHolder.filter(
- (data) => data.pageNumber === pageNumber
- );
- if (getPageNumer.length > 0) {
- const getXYdata = getPageNumer[0].pos.filter(
- (data, ind) => data.key === key && data.Width && data.Height
- );
- if (getXYdata.length > 0) {
- const getXYdata = getPageNumer[0].pos;
- const getPosData = getXYdata;
- const addSignPos = getPosData.map((url, ind) => {
- if (url.key === key) {
- return {
- ...url,
- Width: ref.offsetWidth,
- Height: ref.offsetHeight,
- xPosition: position.x
- };
- }
- return url;
- });
-
- const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
- if (obj.pageNumber === pageNumber) {
- return { ...obj, pos: addSignPos };
- }
- return obj;
- });
-
- const newUpdateSigner = signerPos.map((obj, ind) => {
- if (obj.signerObjId === signerId) {
- return { ...obj, placeHolder: newUpdateSignPos };
- }
- return obj;
- });
-
- setSignerPos(newUpdateSigner);
- } else {
- const getXYdata = getPageNumer[0].pos;
-
- const getPosData = getXYdata;
-
- const addSignPos = getPosData.map((url, ind) => {
- if (url.key === key) {
- return {
- ...url,
- Width: ref.offsetWidth,
- Height: ref.offsetHeight
- };
- }
- return url;
- });
-
- const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
- if (obj.pageNumber === pageNumber) {
- return { ...obj, pos: addSignPos };
- }
- return obj;
- });
-
- const newUpdateSigner = signerPos.map((obj, ind) => {
- if (obj.signerObjId === signerId) {
- return { ...obj, placeHolder: newUpdateSignPos };
- }
- return obj;
- });
-
- setSignerPos(newUpdateSigner);
- }
- }
- }
- };
-
//function for change page
function changePage(offset) {
setSignBtnPosition([]);
@@ -1023,9 +943,10 @@ function PlaceHolderSign() {
handleDeleteSign={handleDeleteSign}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
- handleImageResize={handleImageResize}
+ // handleImageResize={handleImageResize}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
+ setSignerPos={setSignerPos}
/>
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
index 0b5595ec0..d49ff5b6a 100644
--- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
@@ -517,7 +517,7 @@ function EmbedPdfImage() {
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);
+ const y = pos.yBottom * (pos.scale / scale);
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
@@ -812,6 +812,60 @@ function EmbedPdfImage() {
);
};
+ // //function for resize image and update width and height
+ // const handleImageResize = (ref, key, direction, position) => {
+ // const updateFilter = xyPostion[index].pos.filter(
+ // (data, ind) => data.key === key && data.Width && data.Height
+ // );
+
+ // if (updateFilter.length > 0) {
+ // const getXYdata = xyPostion[index].pos;
+ // const getPosData = getXYdata;
+ // const addSign = getPosData.map((url, ind) => {
+ // if (url.key === key) {
+ // return {
+ // ...url,
+ // Width: ref.offsetWidth,
+ // Height: ref.offsetHeight,
+ // xPosition: position.x
+ // };
+ // }
+ // return url;
+ // });
+
+ // const newUpdateUrl = xyPostion.map((obj, ind) => {
+ // if (ind === index) {
+ // return { ...obj, pos: addSign };
+ // }
+ // return obj;
+ // });
+
+ // setXyPostion(newUpdateUrl);
+ // } else {
+ // const getXYdata = xyPostion[index].pos;
+
+ // const getPosData = getXYdata;
+
+ // const addSign = getPosData.map((url, ind) => {
+ // if (url.key === key) {
+ // return {
+ // ...url,
+ // Width: ref.offsetWidth,
+ // Height: ref.offsetHeight
+ // };
+ // }
+ // return url;
+ // });
+
+ // const newUpdateUrl = xyPostion.map((obj, ind) => {
+ // if (ind === index) {
+ // return { ...obj, pos: addSign };
+ // }
+ // return obj;
+ // });
+ // setXyPostion(newUpdateUrl);
+ // }
+ // };
return (
{isLoading.isLoad ? (
@@ -966,6 +1020,8 @@ function EmbedPdfImage() {
isAlreadySign={isAlreadySign}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
+ setXyPostion={setXyPostion}
+ index={index}
/>
diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css
index fb97f992e..afe4ae895 100644
--- a/microfrontends/SignDocuments/src/css/signature.css
+++ b/microfrontends/SignDocuments/src/css/signature.css
@@ -9,6 +9,14 @@
width: 460px;
}
+.borderResize {
+ position: absolute;
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+
+}
+
.signatureBtn {
border: 1.5px solid #47a3ad;
margin-bottom: 10px;
@@ -114,6 +122,48 @@
outline: none;
}
+.resizable-box-overlay {
+ position: absolute;
+ border: 2px solid #ddd;
+ overflow: hidden;
+ background-color: white;
+}
+
+.box-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.close-button {
+ align-self: flex-end;
+ margin: 8px;
+ cursor: pointer;
+}
+
+.placeholdCloseBtn {
+ position: absolute;
+ right: -9px;
+ top: -15px;
+ border-radius: 100%;
+ font-size: 10px;
+ cursor: pointer;
+ padding: 0px 5px;
+}
+.placeholderBlock{
+ padding: 0px;
+ z-index: 1;
+ position: absolute;
+ border-style: dashed;
+ width: 150px;
+ height: 60px;
+ background: #daebe0;
+ text-align: center;
+ justify-content: center;
+ 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;
@@ -784,10 +834,13 @@ option {
.signature-backdrop {
position: fixed;
- top: 0; bottom: 0; left: 0; right: 0;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
background-color: #000;
}
.signature-backdrop.fade.in {
opacity: 0.5;
-}
+}
\ No newline at end of file
diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js
index 3c98d56eb..dd5f6161b 100644
--- a/microfrontends/SignDocuments/src/utils/Utils.js
+++ b/microfrontends/SignDocuments/src/utils/Utils.js
@@ -486,3 +486,154 @@ export const pdfNewWidthFun = (divRef) => {
//160 is width of left side, 200 is width of right side component
return pdfWidth;
};
+
+//function for resize image and update width and height for mulitisigners
+export const handleImageResize = (
+ ref,
+ key,
+ signerId,
+ position,
+ signerPos,
+ pageNumber,
+ setSignerPos
+) => {
+ const filterSignerPos = signerPos.filter(
+ (data) => data.signerObjId === signerId
+ );
+ if (filterSignerPos.length > 0) {
+ const getPlaceHolder = filterSignerPos[0].placeHolder;
+ const getPageNumer = getPlaceHolder.filter(
+ (data) => data.pageNumber === pageNumber
+ );
+ if (getPageNumer.length > 0) {
+ const getXYdata = getPageNumer[0].pos.filter(
+ (data, ind) => data.key === key && data.Width && data.Height
+ );
+ if (getXYdata.length > 0) {
+ const getXYdata = getPageNumer[0].pos;
+ const getPosData = getXYdata;
+ const addSignPos = getPosData.map((url, ind) => {
+ if (url.key === key) {
+ return {
+ ...url,
+ Width: ref.offsetWidth,
+ Height: ref.offsetHeight,
+ xPosition: position.x
+ };
+ }
+ return url;
+ });
+
+ const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+ if (obj.pageNumber === pageNumber) {
+ return { ...obj, pos: addSignPos };
+ }
+ return obj;
+ });
+
+ const newUpdateSigner = signerPos.map((obj, ind) => {
+ if (obj.signerObjId === signerId) {
+ return { ...obj, placeHolder: newUpdateSignPos };
+ }
+ return obj;
+ });
+
+ setSignerPos(newUpdateSigner);
+ } else {
+ const getXYdata = getPageNumer[0].pos;
+
+ const getPosData = getXYdata;
+
+ const addSignPos = getPosData.map((url, ind) => {
+ if (url.key === key) {
+ return {
+ ...url,
+ Width: ref.offsetWidth,
+ Height: ref.offsetHeight
+ };
+ }
+ return url;
+ });
+
+ const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+ if (obj.pageNumber === pageNumber) {
+ return { ...obj, pos: addSignPos };
+ }
+ return obj;
+ });
+
+ const newUpdateSigner = signerPos.map((obj, ind) => {
+ if (obj.signerObjId === signerId) {
+ return { ...obj, placeHolder: newUpdateSignPos };
+ }
+ return obj;
+ });
+
+ setSignerPos(newUpdateSigner);
+ }
+ }
+ }
+};
+
+//function for resize image and update width and height for sign-yourself
+export const handleSignYourselfImageResize = (
+ ref,
+ key,
+ direction,
+ position,
+ xyPostion,
+ index,
+ setXyPostion
+) => {
+ const updateFilter = xyPostion[index].pos.filter(
+ (data) => data.key === key && data.Width && data.Height
+ );
+
+ if (updateFilter.length > 0) {
+ const getXYdata = xyPostion[index].pos;
+ const getPosData = getXYdata;
+ const addSign = getPosData.map((url, ind) => {
+ if (url.key === key) {
+ return {
+ ...url,
+ Width: ref.offsetWidth,
+ Height: ref.offsetHeight,
+ xPosition: position.x
+ };
+ }
+ return url;
+ });
+
+ const newUpdateUrl = xyPostion.map((obj, ind) => {
+ if (ind === index) {
+ return { ...obj, pos: addSign };
+ }
+ return obj;
+ });
+
+ setXyPostion(newUpdateUrl);
+ } else {
+ const getXYdata = xyPostion[index].pos;
+
+ const getPosData = getXYdata;
+
+ const addSign = getPosData.map((url, ind) => {
+ if (url.key === key) {
+ return {
+ ...url,
+ Width: ref.offsetWidth,
+ Height: ref.offsetHeight
+ };
+ }
+ return url;
+ });
+
+ const newUpdateUrl = xyPostion.map((obj, ind) => {
+ if (ind === index) {
+ return { ...obj, pos: addSign };
+ }
+ return obj;
+ });
+ setXyPostion(newUpdateUrl);
+ }
+};