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: mobile to desktop and desktop to mobile view placeholder location issue

Browse Source
This commit is contained in:
RaktimaNXG
2023-12-07 20:01:15 +05:30
parent dec13e8b5f
commit d224a44e54
7 changed files with 302 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+6 -6
View File
@@ -296,7 +296,7 @@ function PdfRequestFiles() {
}
}
if (checkSignUrl && checkSignUrl.length > 0) {
if (checkSignUrl && checkSignUrl.length == 0) {
alert("Please complete your signature!");
} else {
setIsUiLoading(true);
@@ -348,17 +348,16 @@ function PdfRequestFiles() {
);
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(
newImgUrl,
documentId,
signerObjectId,
pdfOriginalWidth,
pngUrl,
containerWH,
data,
pdfBase64,
pageNo,
containerWH
pageNo
)
.then((res) => {
if (res && res.status === "success") {
@@ -390,9 +389,10 @@ function PdfRequestFiles() {
pngUrl,
pdfDoc,
pdfOriginalWidth,
false
false,
containerWH
);
// console.log(pdfBytes)
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(
pdfBytes,
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+2 -2
View File
@@ -407,7 +407,7 @@ function SignYourSelf() {
}
}
if (checkSignUrl && checkSignUrl.length > 0) {
if (checkSignUrl && checkSignUrl.length == 0) {
alert("Please complete your signature!");
} else {
setIsCeleb(true);
@@ -479,7 +479,7 @@ function SignYourSelf() {
true,
containerWH
);
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(pdfBytes, documentId);
}
setIsSignPad(false);
microfrontends/SignDocuments/src/Component/component/modalComponent.js
+35 -14
View File
@@ -1,13 +1,16 @@
import React from "react";
import Modal from "react-bootstrap/Modal";
import ModalHeader from "react-bootstrap/esm/ModalHeader";
import { useNavigate } from "react-router-dom";
function ModalComponent({ isShow, type, setIsShowEmail }) {
const navigate = useNavigate();
return (
<Modal show={isShow}>
<ModalHeader className="bg-danger" style={{ color: "white" }}>
{type === "signersAlert" ? (
<span>Select signers</span>
) : type === "alreadyPlace" ? (
<span>Already Placed!</span>
) : (
<span>Document Expired!</span>
)}
@@ -16,24 +19,42 @@ function ModalComponent({ isShow, type, setIsShowEmail }) {
<Modal.Body>
{type === "signersAlert" ? (
<p>Please select signer for add placeholder!</p>
) : type === "alreadyPlace" ? (
<p>Already set placeHolder for this document.</p>
) : (
<p>This Document is no longer available.</p>
)}
</Modal.Body>
<Modal.Footer>
{type === "signersAlert" &&(
<button
onClick={() => {
setIsShowEmail(false);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
>
Ok
</button>)}
{type === "signersAlert" ? (
<button
onClick={() => {
setIsShowEmail(false);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
>
Ok
</button>
) : (
type === "alreadyPlace" && (
<button
onClick={() => {
navigate(-1);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
>
Ok
</button>
)
)}
</Modal.Footer>
</Modal>
);
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+97 -17
View File
@@ -59,30 +59,64 @@ function RenderPdf({
let width;
if (isMobile) {
if (!pos.isMobile) {
width = pos.Width / scale ? pos.Width / scale : 150 / scale;
return width;
if (pos.IsResize) {
width = pos.Width ? pos.Width : 150;
return width;
} else {
width = pos.Width / scale ? pos.Width / scale : 150 / scale;
// width =
// pos.Width * pos.scale ? pos.Width * pos.scale : 150 * pos.scale;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
if (pos.isMobile) {
if (pos.IsResize) {
width = pos.Width ? pos.Width : 150;
return width;
} else {
width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
}
};
const posHeight = (pos) => {
let width;
let height;
if (isMobile) {
if (!pos.isMobile) {
width = pos.Height / scale ? pos.Height / scale : 60 / scale;
return width;
if (pos.IsResize) {
// height = pos.Height ? pos.Height / scale : 60 / scale;
height = pos.Height ? pos.Height : 60;
return height;
} else {
height = pos.Height ? pos.Height / scale : 60 / scale;
// height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale;
return height;
}
} else {
width = pos.Height ? pos.Height : 60;
return width;
height = pos.Height ? pos.Height : 60;
return height;
}
} else {
width = pos.Height ? pos.Height : 60;
return width;
if (pos.isMobile) {
if (pos.IsResize) {
height = pos.Height ? pos.Height : 60;
return height;
} else {
height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale;
return height;
}
} else {
height = pos.Height ? pos.Height : 60;
return height;
}
}
};
@@ -99,7 +133,7 @@ function RenderPdf({
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (!pos.isMobile) {
return pos.xPosition / scale - 32;
return pos.xPosition / scale;
}
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
else {
@@ -169,7 +203,8 @@ function RenderPdf({
data.signerObjId === signerObjectId
? "pointer"
: "not-allowed",
borderColor: themeColor()
borderColor: themeColor(),
background: data.blockColor
}}
className="placeholderBlock"
size={{
@@ -186,7 +221,8 @@ function RenderPdf({
pageNumber,
setSignerPos,
pdfOriginalWidth,
containerWH
containerWH,
true
);
}}
lockAspectRatio={pos.Width && 2.5}
@@ -262,6 +298,46 @@ function RenderPdf({
}
};
const calculateWidth = (pos) => {
let width;
if (isMobile) {
width = pos.Width ? pos.Width * scale : 150 * scale;
return width;
} else {
if (pos.isMobile) {
if (pos.IsResize) {
width = pos.Width ? pos.Width : 150;
return width;
} else {
width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
}
};
const calculateHeight = (pos) => {
let height;
if (isMobile) {
height = pos.Height ? pos.Height * scale : 60 * scale;
return height;
} else {
if (pos.isMobile) {
if (pos.IsResize) {
height = pos.Height ? pos.Height : 60;
return height;
} else {
height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale;
return height;
}
} else {
height = pos.Height ? pos.Height : 60;
return height;
}
}
};
return (
<>
{isMobile && scale ? (
@@ -413,7 +489,8 @@ function RenderPdf({
bounds="parent"
style={{
cursor: "all-scroll",
borderColor: themeColor()
borderColor: themeColor(),
background: data.blockColor
}}
className="placeholderBlock"
onDrag={() =>
@@ -464,6 +541,7 @@ function RenderPdf({
setSignerPos,
pdfOriginalWidth,
containerWH,
false,
setIsResize
);
}}
@@ -739,8 +817,8 @@ function RenderPdf({
}}
className="placeholderBlock"
size={{
width: pos.Width ? pos.Width : 150,
height: pos.Height ? pos.Height : 60
width: calculateWidth(pos),
height: calculateHeight(pos)
}}
lockAspectRatio={pos.Width && 2.5}
//if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale
@@ -828,6 +906,7 @@ function RenderPdf({
bounds="parent"
style={{
cursor: "all-scroll",
background: data.blockColor,
borderColor: themeColor()
}}
className="placeholderBlock"
@@ -878,6 +957,7 @@ function RenderPdf({
setSignerPos,
pdfOriginalWidth,
containerWH,
false,
setIsResize
);
}}
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+7 -1
View File
@@ -65,6 +65,7 @@ function PlaceHolderSign() {
const [isShowEmail, setIsShowEmail] = useState(false);
const [selectedEmail, setSelectedEmail] = useState(false);
const [isResize, setIsResize] = useState(false);
const [isAlreadyPlace, setIsAlreadyPlace] = useState(false);
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
@@ -181,8 +182,12 @@ function PlaceHolderSign() {
//getting document details
const documentData = await contractDocument(documentId);
if (documentData && documentData.length > 0) {
const alreadyPlaceholder =
documentData[0].Placeholders && documentData[0].Placeholders;
if (alreadyPlaceholder && alreadyPlaceholder.length > 0) {
setIsAlreadyPlace(true);
}
setPdfDetails(documentData);
const currEmail = documentData[0].ExtUserPtr.Email;
const filterCurrEmail = documentData[0].Signers.filter(
(data) => data.Email === currEmail
@@ -916,6 +921,7 @@ function PlaceHolderSign() {
)}
</Modal.Footer>
</Modal>
<ModalComponent isShow={isAlreadyPlace} type={"alreadyPlace"} />
<ModalComponent
isShow={isShowEmail}
type={"signersAlert"}
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+4 -4
View File
@@ -396,7 +396,7 @@ function EmbedPdfImage() {
}
}
if (checkSignUrl && checkSignUrl.length > 0) {
if (checkSignUrl && checkSignUrl.length == 0) {
alert("Please complete your signature!");
} else {
const loadObj = {
@@ -456,10 +456,10 @@ function EmbedPdfImage() {
signerUserId,
pdfOriginalWidth,
xyPostion,
containerWH,
data,
pdfBase64,
pageNo,
containerWH
pageNo
)
.then((res) => {
if (res && res.status === "success") {
@@ -508,7 +508,7 @@ function EmbedPdfImage() {
}
})
.catch((err) => {
alert("something went wrong in query");
alert("something went wrong in query", err);
});
}
setIsSignPad(false);
microfrontends/SignDocuments/src/utils/Utils.js
+151 -46
View File
@@ -1,6 +1,7 @@
import axios from "axios";
import { $ } from "select-dom";
import { rgb } from "pdf-lib";
const isMobile = window.innerWidth < 767;
export async function getBase64FromUrl(url) {
const data = await fetch(url);
const blob = await data.blob();
@@ -342,7 +343,83 @@ export function modalAlign() {
modal.style.top = window.innerHeight / 3 + "px";
}
}
export const containerWidth = (pos, scale, signyourself) => {
let width;
if (signyourself) {
if (isMobile) {
return pos.Width * scale;
} else {
return pos.Width;
}
} else {
if (isMobile) {
if (pos.isMobile) {
width = pos.Width ? pos.Width * scale : 150 * scale;
return width;
} else {
if (pos.IsResize) {
width = pos.Width ? pos.Width * scale : 150 * scale;
return width;
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
}
} else {
if (pos.isMobile) {
if (pos.IsResize) {
width = pos.Width ? pos.Width : 150;
return width;
} else {
width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
}
}
};
export const containerHeight = (pos, scale, signyourself) => {
let height;
if (signyourself) {
if (isMobile) {
return pos.Height * scale;
} else {
return pos.Height;
}
} else {
if (isMobile) {
if (pos.isMobile) {
height = pos.Height ? pos.Height * scale : 60 * scale;
return height;
} else {
if (pos.IsResize) {
height = pos.Height ? pos.Height * scale : 60 * scale;
return height;
} else {
height = pos.Height ? pos.Height : 60;
return height;
}
}
} else {
if (pos.isMobile) {
if (pos.IsResize) {
height = pos.Height ? pos.Height : 60;
return height;
} else {
height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale;
return height;
}
} else {
height = pos.Height ? pos.Height : 60;
return height;
}
}
}
};
//function for embed multiple signature using pdf-lib
export const multiSignEmbed = async (
pngUrl,
@@ -352,6 +429,9 @@ export const multiSignEmbed = async (
containerWH
) => {
for (let i = 0; i < pngUrl.length; i++) {
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const pageNo = pngUrl[i].pageNumber;
const imgUrlList = pngUrl[i].pos;
const pages = pdfDoc.getPages();
@@ -384,10 +464,9 @@ export const multiSignEmbed = async (
img = await pdfDoc.embedPng(imgData);
}
const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60;
const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150;
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const scaleWidth = containerWidth(imgUrlList[id], scale, signyourself);
const scaleHeight = containerHeight(imgUrlList[id], scale, signyourself);
const xPos = (pos) => {
if (signyourself) {
if (isMobile) {
@@ -438,13 +517,22 @@ export const multiSignEmbed = async (
const y = pos.yPosition * (pos.scale / scale);
return page.getHeight() - y * scale - imgHeight * scale;
} else {
return page.getHeight() - y * scale - imgHeight * scale;
if (pos.IsResize) {
return page.getHeight() - y * scale - imgHeight * scale;
} else {
return page.getHeight() - y * scale - imgHeight;
}
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const y = pos.yPosition * pos.scale;
return page.getHeight() - y - imgHeight;
if (pos.IsResize) {
const y = pos.yPosition * pos.scale;
return page.getHeight() - y - imgHeight;
} else {
const y = pos.yPosition * pos.scale;
return page.getHeight() - y - imgHeight * pos.scale;
}
} else {
return page.getHeight() - pos.yPosition - imgHeight;
}
@@ -455,12 +543,14 @@ export const multiSignEmbed = async (
page.drawImage(img, {
x: xPos(imgUrlList[id]),
y: yPos(imgUrlList[id]),
width: imgWidth * scale,
height: imgHeight * scale
width: scaleWidth,
height: scaleHeight
});
});
}
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
return pdfBytes;
};
//function for embed document id
@@ -499,6 +589,7 @@ export const handleImageResize = (
setSignerPos,
pdfOriginalWidth,
containerWH,
showResize,
setIsResize
) => {
const filterSignerPos = signerPos.filter(
@@ -523,11 +614,9 @@ export const handleImageResize = (
if (url.key === key) {
return {
...url,
Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
Height: !url.isMobile
? ref.offsetHeight * scale
: ref.offsetHeight
// xPosition: position.x
Width: ref.offsetWidth,
Height: ref.offsetHeight,
IsResize: showResize ? true : false
};
}
return url;
@@ -550,17 +639,14 @@ export const handleImageResize = (
setSignerPos(newUpdateSigner);
} else {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === key) {
return {
...url,
Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
Height: !url.isMobile
? ref.offsetHeight * scale
: ref.offsetHeight
Width: ref.offsetWidth,
Height: ref.offsetHeight,
IsResize: showResize ? true : false
};
}
return url;
@@ -603,7 +689,8 @@ export const handleSignYourselfImageResize = (
(data) => data.key === key && data.Width && data.Height
);
const isMobile = window.innerWidth < 767;
const newWidth = containerWH;
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
if (updateFilter.length > 0) {
@@ -613,11 +700,11 @@ export const handleSignYourselfImageResize = (
if (url.key === key) {
return {
...url,
// Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
// Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight,
// Width: !url.isMobile ? scaleWidth : ref.offsetWidth,
// Height: !url.isMobile ? scaleHeight : ref.offsetHeight,
Width: ref.offsetWidth,
Height: ref.offsetHeight
// xPosition: position.xpos
Height: ref.offsetHeight,
IsResize: true
};
}
return url;
@@ -643,7 +730,8 @@ export const handleSignYourselfImageResize = (
// Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
// Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight
Width: ref.offsetWidth,
Height: ref.offsetHeight
Height: ref.offsetHeight,
IsResize: true
};
}
return url;
@@ -666,14 +754,15 @@ export const signPdfFun = async (
signerObjectId,
pdfOriginalWidth,
signerData,
containerWH,
xyPosData,
pdfBase64Url,
pageNo,
containerWH
pageNo
) => {
let signgleSign;
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
if (signerData && signerData.length === 1 && signerData[0].pos.length === 1) {
const height = xyPosData.Height ? xyPosData.Height : 60;
@@ -715,24 +804,41 @@ export const signPdfFun = async (
return yPosition;
} else {
const y = pos.yBottom / scale;
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
if (pos.IsResize) {
yPosition = pos.isDrag
? y * scale - height * scale
: pos.firstYPos
? y * scale - height * scale + pos.firstYPos
: y * scale - height * scale;
return yPosition;
} else {
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
}
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const y = pos.yBottom * pos.scale;
yPosition = pos.isDrag
? y - height
: pos.firstYPos
? y - height + pos.firstYPos
: y - height;
return yPosition;
if (pos.IsResize) {
yPosition = pos.isDrag
? y - height
: pos.firstYPos
? y - height + pos.firstYPos
: y - height;
return yPosition;
} else {
yPosition = pos.isDrag
? y - height * pos.scale
: pos.firstYPos
? y - height * pos.scale + pos.firstYPos
: y - height * pos.scale;
return yPosition;
}
} else {
yPosition = pos.isDrag
? pos.yBottom - height
@@ -743,8 +849,7 @@ export const signPdfFun = async (
}
}
};
const imgWidth = xyPosData.Width ? xyPosData.Width * scale : 150 * scale;
const imgHeight = height * scale;
const bottomY = yBottom(xyPosData);
signgleSign = {
pdfFile: pdfBase64Url,
@@ -754,8 +859,8 @@ export const signPdfFun = async (
Base64: base64Url,
Left: xPos(xyPosData),
Bottom: bottomY,
Width: imgWidth,
Height: imgHeight,
Width: containerWidth(xyPosData, scale),
Height: containerHeight(xyPosData, scale),
Page: pageNo
}
};