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

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
@@ -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>
@@ -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>
@@ -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;
File diff suppressed because it is too large Load Diff
@@ -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>
@@ -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>