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

fix: widget's position errors caused by differing page sizes in landscape orientation

Browse Source
This commit is contained in:
RaktimaNXG
2024-06-21 19:28:59 +05:30
parent 56d5091b96
commit e0e7dd5298
7 changed files with 93 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/components/pdf/Placeholder.js
+17 -3
View File
@@ -91,6 +91,7 @@ function Placeholder(props) {
const [placeholderBorder, setPlaceholderBorder] = useState({ w: 0, h: 0 });
const [isDraggingEnabled, setDraggingEnabled] = useState(true);
const [isShowDateFormat, setIsShowDateFormat] = useState(false);
const [containerScale, setContainerScale] = useState();
const [selectDate, setSelectDate] = useState({
date:
props.pos.type === "date"
@@ -120,7 +121,14 @@ function Placeholder(props) {
width: null,
height: null
});
const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
useEffect(() => {
const getPdfPageWidth = props.pdfOriginalWH.find(
(data) => data.pageNumber === props.pageNumber
);
setContainerScale(props.containerWH.width / getPdfPageWidth.width);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.containerWH.width, props.pdfOriginalWH]);
const dateFormatArr = [
"L",
"DD-MM-YYYY",
@@ -558,7 +566,10 @@ function Placeholder(props) {
);
};
const xPos = (pos, signYourself) => {
const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
const getPdfPageWidth = props.pdfOriginalWH.find(
(data) => data.pageNumber === props.pageNumber
);
const containerScale = props.containerWH.width / getPdfPageWidth?.width;
const resizePos = pos.xPosition;
if (signYourself) {
return resizePos * containerScale * props.scale;
@@ -580,7 +591,10 @@ function Placeholder(props) {
}
};
const yPos = (pos, signYourself) => {
const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
const getPdfPageWidth = props.pdfOriginalWH.find(
(data) => data.pageNumber === props.pageNumber
);
const containerScale = props.containerWH.width / getPdfPageWidth.width;
const resizePos = pos.yPosition;
if (signYourself) {
apps/OpenSign/src/components/pdf/RenderPdf.js
+13 -4
View File
@@ -67,7 +67,10 @@ function RenderPdf({
// handle signature block width and height according to screen
const posWidth = (pos, signYourself) => {
const containerScale = containerWH.width / pdfOriginalWH.width;
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
);
const containerScale = containerWH.width / getPdfPageWidth.width || 1;
const defaultWidth = defaultWidthHeight(pos.type).width;
const posWidth = pos.Width ? pos.Width : defaultWidth;
if (signYourself) {
@@ -93,7 +96,10 @@ function RenderPdf({
}
};
const posHeight = (pos, signYourself) => {
const containerScale = containerWH.width / pdfOriginalWH.width;
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
);
const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
const posHeight = pos.Height || defaultWidthHeight(pos.type).height;
if (signYourself) {
@@ -189,6 +195,7 @@ function RenderPdf({
scale={scale}
containerWH={containerWH}
pdfOriginalWH={pdfOriginalWH}
pageNumber={pageNumber}
/>
</React.Fragment>
)
@@ -250,7 +257,6 @@ function RenderPdf({
>
{isLoadPdf &&
containerWH?.width &&
pdfOriginalWH?.width &&
(pdfRequest
? signerPos.map((data, key) => {
return (
@@ -315,6 +321,7 @@ function RenderPdf({
scale={scale}
containerWH={containerWH}
pdfOriginalWH={pdfOriginalWH}
pageNumber={pageNumber}
/>
</React.Fragment>
);
@@ -367,6 +374,7 @@ function RenderPdf({
}
scale={scale}
pdfOriginalWH={pdfOriginalWH}
pageNumber={pageNumber}
/>
)
);
@@ -434,7 +442,6 @@ function RenderPdf({
>
{isLoadPdf &&
containerWH?.width &&
pdfOriginalWH?.width &&
(pdfRequest //pdf request sign flow
? signerPos?.map((data, key) => {
return (
@@ -499,6 +506,7 @@ function RenderPdf({
scale={scale}
containerWH={containerWH}
pdfOriginalWH={pdfOriginalWH}
pageNumber={pageNumber}
/>
</React.Fragment>
);
@@ -556,6 +564,7 @@ function RenderPdf({
scale={scale}
containerWH={containerWH}
pdfOriginalWH={pdfOriginalWH}
pageNumber={pageNumber}
/>
</React.Fragment>
);
apps/OpenSign/src/constant/Utils.js
+2 -15
View File
@@ -1226,7 +1226,6 @@ export const changeImageWH = async (base64Image) => {
export const multiSignEmbed = async (
xyPositionArray,
pdfDoc,
pdfOriginalWH,
signyourself,
scale
) => {
@@ -1287,20 +1286,8 @@ export const multiSignEmbed = async (
}
}
let widgetWidth, widgetHeight;
widgetWidth = placeholderWidth(
position,
scale,
signyourself,
pdfOriginalWH,
scale
);
widgetHeight = placeholderHeight(
position,
scale,
signyourself,
pdfOriginalWH.height,
scale
);
widgetWidth = placeholderWidth(position);
widgetHeight = placeholderHeight(position);
const xPos = (position) => {
const resizePos = position.xPosition;
//first two condition handle to old data already saved from mobile view which scale point diffrent
apps/OpenSign/src/pages/PdfRequestFiles.js
+9 -8
View File
@@ -86,7 +86,7 @@ function PdfRequestFiles() {
const [defaultSignImg, setDefaultSignImg] = useState();
const [isDocId, setIsDocId] = useState(false);
const [pdfNewWidth, setPdfNewWidth] = useState();
const [pdfOriginalWH, setPdfOriginalWH] = useState();
const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
const [signerPos, setSignerPos] = useState([]);
const [signerObjectId, setSignerObjectId] = useState();
const [isUiLoading, setIsUiLoading] = useState(false);
@@ -785,7 +785,6 @@ function PdfRequestFiles() {
const pdfBytes = await multiSignEmbed(
pngUrl,
pdfDoc,
pdfOriginalWH,
isSignYourSelfFlow,
scale
);
@@ -1020,11 +1019,14 @@ function PdfRequestFiles() {
];
//function for get pdf page details
const pageDetails = async (pdf) => {
const firstPage = await pdf.getPage(1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
// console.log("width height", width, height);
setPdfOriginalWH({ width: width, height: height });
let pdfWHObj = [];
for (let index = 0; index < allPages; index++) {
const firstPage = await pdf.getPage(index + 1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
pdfWHObj.push({ pageNumber: index + 1, width, height });
}
setPdfOriginalWH(pdfWHObj);
setPdfLoadFail({
status: true
});
@@ -1555,7 +1557,6 @@ function PdfRequestFiles() {
<PdfZoom
setScale={setScale}
scale={scale}
pdfOriginalWH={pdfOriginalWH}
containerWH={containerWH}
setZoomPercent={setZoomPercent}
zoomPercent={zoomPercent}
apps/OpenSign/src/pages/PlaceHolderSign.js
+17 -11
View File
@@ -87,7 +87,7 @@ function PlaceHolderSign() {
const [checkTourStatus, setCheckTourStatus] = useState(false);
const [tourStatus, setTourStatus] = useState([]);
const [signerUserId, setSignerUserId] = useState();
const [pdfOriginalWH, setPdfOriginalWH] = useState();
const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
const [contractName, setContractName] = useState("");
const [containerWH, setContainerWH] = useState();
const { docId } = useParams();
@@ -467,7 +467,10 @@ function PlaceHolderSign() {
setZIndex(posZIndex);
const signer = signersdata.find((x) => x.Id === uniqueId);
const key = randomId();
const containerScale = containerWH?.width / pdfOriginalWH?.width || 1;
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
);
const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
let dropData = [];
let placeHolder;
const dragTypeValue = item?.text ? item.text : monitor.type;
@@ -514,7 +517,6 @@ function PlaceHolderSign() {
const getYPosition = signBtnPosition[0]
? y - signBtnPosition[0].yPos
: y;
console.log("getxyPos", getXPosition, getYPosition);
const dropObj = {
xPosition: getXPosition / (containerScale * scale),
yPosition: getYPosition / (containerScale * scale),
@@ -661,11 +663,14 @@ function PlaceHolderSign() {
//function for get pdf page details
const pageDetails = async (pdf) => {
const firstPage = await pdf.getPage(1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
// console.log("width height", width, height);
setPdfOriginalWH({ width: width, height: height });
let pdfWHObj = [];
for (let index = 0; index < allPages; index++) {
const firstPage = await pdf.getPage(index + 1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
pdfWHObj.push({ pageNumber: index + 1, width, height });
}
setPdfOriginalWH(pdfWHObj);
setPdfLoadFail({
status: true
});
@@ -685,7 +690,10 @@ function PlaceHolderSign() {
updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace);
const signId = signerId ? signerId : uniqueId; //? signerId : signerObjId;
const keyValue = key ? key : dragKey;
const containerScale = containerWH.width / pdfOriginalWH.width;
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
);
const containerScale = containerWH.width / getPdfPageWidth?.width;
if (keyValue >= 0) {
let filterSignerPos;
@@ -864,7 +872,6 @@ function PlaceHolderSign() {
const pdfBytes = await multiSignEmbed(
placeholder,
pdfDoc,
pdfOriginalWH,
isSignYourSelfFlow,
containerWH
);
@@ -1784,7 +1791,6 @@ function PlaceHolderSign() {
<PdfZoom
setScale={setScale}
scale={scale}
pdfOriginalWH={pdfOriginalWH}
containerWH={containerWH}
setZoomPercent={setZoomPercent}
zoomPercent={zoomPercent}
apps/OpenSign/src/pages/SignyourselfPdf.js
+18 -13
View File
@@ -76,7 +76,7 @@ function SignYourSelf() {
const [signKey, setSignKey] = useState();
const [imgWH, setImgWH] = useState({});
const [pdfNewWidth, setPdfNewWidth] = useState();
const [pdfOriginalWH, setPdfOriginalWH] = useState();
const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
const [successEmail, setSuccessEmail] = useState(false);
const imageRef = useRef(null);
const [myInitial, setMyInitial] = useState("");
@@ -458,7 +458,10 @@ function SignYourSelf() {
const widgetTypeExist = ["name", "company", "job title", "email"].includes(
dragTypeValue
);
const containerScale = containerWH?.width / pdfOriginalWH?.width || 1;
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
);
const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
//adding and updating drop position in array when user drop signature button in div
if (item === "onclick") {
const getWidth = widgetTypeExist
@@ -695,7 +698,6 @@ function SignYourSelf() {
const pdfBytes = await multiSignEmbed(
xyPostion,
pdfDoc,
pdfOriginalWH,
isSignYourSelfFlow,
scale
);
@@ -809,13 +811,14 @@ function SignYourSelf() {
setDragKey(key);
setIsDragging(true);
};
// console.log("xy", pdfOriginalWH);
//function for set and update x and y postion after drag and drop signature tab
const handleStop = (event, dragElement) => {
if (isDragging && dragElement) {
event.preventDefault();
const containerScale = containerWH.width / pdfOriginalWH.width;
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
);
const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
if (dragKey >= 0) {
const filterDropPos = xyPostion.filter(
(data) => data.pageNumber === pageNumber
@@ -848,13 +851,16 @@ function SignYourSelf() {
setIsDragging(false);
}, 200);
};
//function for get pdf page details
const pageDetails = async (pdf) => {
const firstPage = await pdf.getPage(1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
setPdfOriginalWH({ width: width, height: height });
let pdfWHObj = [];
for (let index = 0; index < allPages; index++) {
const firstPage = await pdf.getPage(index + 1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
pdfWHObj.push({ pageNumber: index + 1, width, height });
}
setPdfOriginalWH(pdfWHObj);
setPdfLoadFail({
status: true
});
@@ -1166,7 +1172,7 @@ function SignYourSelf() {
{isUiLoading && (
<div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-center bg-[#e6f2f2] bg-opacity-80">
<Loader />
<span className="text-[13px] text-base-content">
<span style={{ fontSize: "13px", fontWeight: "bold" }}>
This might take some time
</span>
</div>
@@ -1218,7 +1224,6 @@ function SignYourSelf() {
<PdfZoom
setScale={setScale}
scale={scale}
pdfOriginalWH={pdfOriginalWH}
containerWH={containerWH}
setZoomPercent={setZoomPercent}
zoomPercent={zoomPercent}
apps/OpenSign/src/pages/TemplatePlaceholder.js
+17 -9
View File
@@ -70,7 +70,7 @@ const TemplatePlaceholder = () => {
const [checkTourStatus, setCheckTourStatus] = useState(false);
const [tourStatus, setTourStatus] = useState([]);
const [signerUserId, setSignerUserId] = useState();
const [pdfOriginalWH, setPdfOriginalWH] = useState();
const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
const [contractName, setContractName] = useState("");
const [containerWH, setContainerWH] = useState();
const signRef = useRef(null);
@@ -369,7 +369,10 @@ const TemplatePlaceholder = () => {
if (signer) {
const posZIndex = zIndex + 1;
setZIndex(posZIndex);
const containerScale = containerWH.width / pdfOriginalWH.width;
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
);
const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
const key = randomId();
let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
const dragTypeValue = item?.text ? item.text : monitor.type;
@@ -537,11 +540,14 @@ const TemplatePlaceholder = () => {
//function for get pdf page details
const pageDetails = async (pdf) => {
const firstPage = await pdf.getPage(1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
// console.log("width height", width, height);
setPdfOriginalWH({ width: width, height: height });
let pdfWHObj = [];
for (let index = 0; index < allPages; index++) {
const firstPage = await pdf.getPage(index + 1);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
pdfWHObj.push({ pageNumber: index + 1, width, height });
}
setPdfOriginalWH(pdfWHObj);
setPdfLoadFail({
status: true
});
@@ -560,7 +566,10 @@ const TemplatePlaceholder = () => {
updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace);
const signId = signerId; //? signerId : signerObjId;
const keyValue = key ? key : dragKey;
const containerScale = containerWH.width / pdfOriginalWH.width;
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
);
const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
if (keyValue >= 0) {
const filterSignerPos = updateSignPos.filter(
(data) => data.Id === signId
@@ -1343,7 +1352,6 @@ const TemplatePlaceholder = () => {
<PdfZoom
setScale={setScale}
scale={scale}
pdfOriginalWH={pdfOriginalWH}
containerWH={containerWH}
setZoomPercent={setZoomPercent}
zoomPercent={zoomPercent}