WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-17 21:25:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: resize placeholder design and adding resize option for recipients, added signers's name on placeholder

Browse Source
This commit is contained in:
RaktimaNXG
2023-12-01 20:09:22 +05:30
parent c1621f64e6
commit 1cc4cf93cb
8 changed files with 883 additions and 873 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+82
View File
@@ -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}
/>
</div>
<div>
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+2 -55
View File
@@ -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}
/>
</div>
</div>
microfrontends/SignDocuments/src/Component/component/borderResize.js
+17
View File
@@ -0,0 +1,17 @@
import React from "react";
function BorderResize() {
return (
<div
className="borderResize"
style={{
right: "-1px",
bottom: "-1px",
borderRight: "3px solid #188ae2",
borderBottom: "3px solid #188ae2"
}}
></div>
);
}
export default BorderResize;
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+517 -734
View File
File diff suppressed because it is too large Load Diff
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+2 -81
View File
@@ -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}
/>
</div>
</div>
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+57 -1
View File
@@ -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 (
<DndProvider backend={HTML5Backend}>
{isLoading.isLoad ? (
@@ -966,6 +1020,8 @@ function EmbedPdfImage() {
isAlreadySign={isAlreadySign}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setXyPostion={setXyPostion}
index={index}
/>
</div>
microfrontends/SignDocuments/src/css/signature.css
+55 -2
View File
@@ -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;
}
}
microfrontends/SignDocuments/src/utils/Utils.js
+151
View File
@@ -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);
}
};