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

Merge pull request #234 from raktima-opensignlabs/default-signature

Browse Source
This commit is contained in:
Andrew
2023-11-30 13:17:52 +05:30
committed by GitHub
parent 52b17730ef 5d99a4a9c8
commit dfa121fe57
6 changed files with 795 additions and 953 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+15 -127
View File
@@ -1,6 +1,6 @@
import React, { useState, useRef, useEffect } from "react";
import { themeColor } from "../utils/ThemeColor/backColor";
import { PDFDocument, rgb } from "pdf-lib";
import { PDFDocument } from "pdf-lib";
import "../css/signature.css";
import axios from "axios";
import ModalHeader from "react-bootstrap/esm/ModalHeader";
@@ -16,7 +16,9 @@ import {
contractDocument,
getBase64FromIMG,
getBase64FromUrl,
urlValidator
urlValidator,
multiSignEmbed,
embedDocId
} from "../utils/Utils";
import Loader from "./component/loader";
import HandleError from "./component/HandleError";
@@ -319,29 +321,12 @@ function PdfRequestFiles() {
if (isDocId) {
pdfBase64 = await getBase64FromUrl(url);
} else {
for (let i = 0; i < allPages; i++) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 10;
const textContent =
documentId && `OpenSign™ DocumentId: ${documentId}`;
const pages = pdfDoc.getPages();
const page = pages[i];
page.drawText(textContent, {
x: 10,
y: page.getHeight() - 10,
size: fontSize,
font,
color: rgb(0.5, 0.5, 0.5)
});
}
//embed document's object id to all pages in pdf document
await embedDocId(pdfDoc, documentId, allPages);
pdfBase64 = await pdfDoc.saveAsBase64({
useObjectStreams: false
});
}
for (let i = 0; i < pngUrl.length; i++) {
const imgUrlList = pngUrl[i].pos;
const pageNo = pngUrl[i].pageNumber;
@@ -381,112 +366,15 @@ function PdfRequestFiles() {
}
//else if signature is more than one then embed all sign with the use of pdf-lib
else if (pngUrl.length > 0 && pngUrl[0].pos.length > 0) {
for (let i = 0; i < allPages; i++) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 10;
const textContent =
documentId && `OpenSign™ DocumentId: ${documentId} `;
const pages = pdfDoc.getPages();
const page = pages[i];
page.drawText(textContent, {
x: 10,
y: page.getHeight() - 10,
size: fontSize,
font,
color: rgb(0.5, 0.5, 0.5)
});
}
for (let i = 0; i < pngUrl.length; i++) {
const pageNo = pngUrl[i].pageNumber;
const imgUrlList = pngUrl[i].pos;
const pages = pdfDoc.getPages();
const page = pages[pageNo - 1];
const images = await Promise.all(
imgUrlList.map(async (url) => {
let signUrl = url.SignUrl;
if (url.ImageType === "image/png") {
//function for convert signature png base64 url to jpeg base64
const newUrl = await convertPNGtoJPEG(signUrl);
signUrl = newUrl;
}
const checkUrl = urlValidator(signUrl);
if (checkUrl) {
signUrl = signUrl + "?get";
}
const res = await fetch(signUrl);
return res.arrayBuffer();
})
);
images.forEach(async (imgData, id) => {
let img = await pdfDoc.embedJpg(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 = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const xPos = (pos) => {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const x = pos.xPosition * (pos.scale / scale);
return x * scale + 50;
} else {
const x = pos.xPosition / scale;
return x * scale;
}
} 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 x = pos.xPosition * pos.scale + 50;
return x;
} else {
return pos.xPosition;
}
}
};
const yPos = (pos) => {
//checking both condition mobile and desktop view
const y = pos.yPosition / scale;
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);
return page.getHeight() - y * scale - imgHeight;
} 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;
} else {
return page.getHeight() - pos.yPosition - imgHeight;
}
}
};
page.drawImage(img, {
x: xPos(imgUrlList[id]),
y: yPos(imgUrlList[id]),
width: imgWidth,
height: imgHeight
});
});
}
const pdfBytes = await pdfDoc.saveAsBase64({
useObjectStreams: false
});
//embed document's object id to all pages in pdf document
await embedDocId(pdfDoc, documentId, allPages);
//embed multi signature in pdf
const pdfBytes = await multiSignEmbed(
pngUrl,
pdfDoc,
pdfOriginalWidth,
false
);
signPdfFun(pdfBytes, documentId, pngUrl);
}
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+22 -107
View File
@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from "react";
import { PDFDocument, rgb } from "pdf-lib";
import { PDFDocument } from "pdf-lib";
import "../css/./signature.css";
import sign from "../assests/sign3.png";
import stamp from "../assests/stamp2.png";
@@ -18,7 +18,9 @@ import ModalHeader from "react-bootstrap/esm/ModalHeader";
import {
convertPNGtoJPEG,
contractDocument,
getBase64FromIMG
getBase64FromIMG,
embedDocId,
multiSignEmbed
} from "../utils/Utils";
import { useParams } from "react-router-dom";
import Tour from "reactour";
@@ -30,7 +32,7 @@ import Header from "./component/header";
import RenderPdf from "./component/renderPdf";
import { contractUsers, contactBook, urlValidator } from "../utils/Utils";
import { modalAlign } from "../utils/Utils";
import { $ } from "select-dom";
//For signYourself inProgress section signer can add sign and complete doc sign.
function SignYourSelf() {
const [pdfDetails, setPdfDetails] = useState([]);
@@ -422,24 +424,7 @@ function SignYourSelf() {
//checking if signature is only one then send image url in jpeg formate to server
if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
//embed document's object id to all pages in pdf document
for (let i = 0; i < allPages; i++) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 10;
const textContent =
documentId && `OpenSign™ DocumentId: ${documentId}`;
const pages = pdfDoc.getPages();
const page = pages[i];
page.drawText(textContent, {
x: 10,
y: page.getHeight() - 10,
size: fontSize,
font,
color: rgb(0.5, 0.5, 0.5)
});
}
await embedDocId(pdfDoc, documentId, allPages);
const pdfBase64 = await pdfDoc.saveAsBase64({
useObjectStreams: false
});
@@ -475,85 +460,15 @@ function SignYourSelf() {
}
//else if signature is more than one then embed all sign with the use of pdf-lib
else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
for (let i = 0; i < allPages; i++) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 10;
const textContent =
documentId && `OpenSign™ DocumentId: ${documentId} `;
const pages = pdfDoc.getPages();
const page = pages[i];
page.drawText(textContent, {
x: 10,
y: page.getHeight() - 10,
size: fontSize,
font,
color: rgb(0.5, 0.5, 0.5)
});
}
for (let i = 0; i < pngUrl.length; i++) {
const pageNo = pngUrl[i].pageNumber;
const imgUrlList = pngUrl[i].pos;
const pages = pdfDoc.getPages();
const page = pages[pageNo - 1];
const images = await Promise.all(
imgUrlList.map(async (url) => {
let signUrl = url.SignUrl;
if (url.ImageType === "image/png") {
//function for convert signature png base64 url to jpeg base64
const newUrl = await convertPNGtoJPEG(signUrl);
signUrl = newUrl;
}
const checkUrl = urlValidator(signUrl);
if (checkUrl) {
signUrl = signUrl + "?get";
}
const res = await fetch(signUrl);
return res.arrayBuffer();
})
);
images.forEach(async (imgData, id) => {
let img = await pdfDoc.embedJpg(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 = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const posY = () => {
if (isMobile) {
if (id === 0) {
return (
page.getHeight() -
imgUrlList[id].yPosition * scale -
imgHeight
);
} else if (id > 0) {
return page.getHeight() - imgUrlList[id].yPosition * scale;
}
} else {
return page.getHeight() - imgUrlList[id].yPosition - imgHeight;
}
};
page.drawImage(img, {
x: isMobile
? imgUrlList[id].xPosition * scale + imgWidth / 2
: imgUrlList[id].xPosition,
y: posY(),
width: imgWidth,
height: imgHeight
});
});
}
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
//embed document's object id to all pages in pdf document
await embedDocId(pdfDoc, documentId, allPages);
//embed multi signature in pdf
const pdfBytes = await multiSignEmbed(
pngUrl,
pdfDoc,
pdfOriginalWidth,
true
);
signPdfFun(pdfBytes, documentId);
}
setIsSignPad(false);
@@ -574,16 +489,16 @@ function SignYourSelf() {
let singleSign;
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const newWidth = window.innerWidth - 32;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const imgWidth = xyPosData ? xyPosData.Width : 150;
if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
const height = xyPosData.Height ? xyPosData.Height : 60;
const bottomY = xyPosData.isDrag
? xyPosData.yBottom * scale - height
? xyPosData.yBottom * scale - height * scale
: xyPosData.firstYPos
? xyPosData.yBottom * scale - height + xyPosData.firstYPos
: xyPosData.yBottom * scale - height;
? xyPosData.yBottom * scale - height * scale + xyPosData.firstYPos
: xyPosData.yBottom * scale - height * scale;
singleSign = {
pdfFile: pdfBase64Url,
@@ -591,11 +506,11 @@ function SignYourSelf() {
sign: {
Base64: base64Url,
Left: isMobile
? xyPosData.xPosition * scale + imgWidth / 2
? xyPosData.xPosition * scale + 43
: xyPosData.xPosition,
Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width : 150,
Height: height,
Width: xyPosData.Width ? xyPosData.Width * scale : 150 * scale,
Height: height * scale,
Page: pageNo
}
};
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+597 -586
View File
File diff suppressed because it is too large Load Diff
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+15 -125
View File
@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from "react";
import { PDFDocument, rgb } from "pdf-lib";
import { PDFDocument } from "pdf-lib";
import "../css/./signature.css";
import axios from "axios";
import Modal from "react-bootstrap/Modal";
@@ -19,7 +19,9 @@ import {
contractUsers,
contactBook,
contractDocument,
urlValidator
urlValidator,
multiSignEmbed,
embedDocId
} from "../utils/Utils";
import Tour from "reactour";
import Signedby from "./component/signedby";
@@ -424,23 +426,8 @@ function EmbedPdfImage() {
if (isDocId) {
pdfBase64 = await getBase64FromUrl(url);
} else {
for (let i = 0; i < allPages; i++) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 10;
const textContent = docId && `OpenSign™ DocumentId: ${docId} `;
const pages = pdfDoc.getPages();
const page = pages[i];
page.drawText(textContent, {
x: 10,
y: page.getHeight() - 10,
size: fontSize,
font,
color: rgb(0.5, 0.5, 0.5)
});
}
//embed document's object id to all pages in pdf document
await embedDocId(pdfDoc, docId, allPages);
pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false });
}
for (let i = 0; i < xyPostion.length; i++) {
@@ -475,115 +462,18 @@ function EmbedPdfImage() {
}
//else if signature is more than one then embed all sign with the use of pdf-lib
else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
for (let i = 0; i < allPages; i++) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 10;
const textContent = docId && `OpenSign™ DocumentId: ${docId} `;
const pages = pdfDoc.getPages();
const page = pages[i];
page.drawText(textContent, {
x: 10,
y: page.getHeight() - 10,
size: fontSize,
font,
color: rgb(0.5, 0.5, 0.5)
});
}
for (let i = 0; i < pngUrl.length; i++) {
const pageNo = pngUrl[i].pageNumber;
const imgUrlList = pngUrl[i].pos;
const pages = pdfDoc.getPages();
const page = pages[pageNo - 1];
const images = await Promise.all(
imgUrlList.map(async (url) => {
let signUrl = url.SignUrl;
if (url.ImageType === "image/png") {
//function for convert signature png base64 url to jpeg base64
const newUrl = await convertPNGtoJPEG(signUrl);
signUrl = newUrl;
}
const checkUrl = urlValidator(signUrl);
if (checkUrl) {
signUrl = signUrl + "?get";
}
const res = await fetch(signUrl);
return res.arrayBuffer();
})
);
images.forEach(async (imgData, id) => {
let img = await pdfDoc.embedJpg(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 = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const xPos = (pos) => {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const x = pos.xPosition * (pos.scale / scale);
return x * scale + 50;
} else {
const x = pos.xPosition / scale;
return x * scale;
}
} 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 x = pos.xPosition * pos.scale + 50;
return x;
} else {
return pos.xPosition;
}
}
};
const yPos = (pos) => {
//checking both condition mobile and desktop view
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);
return page.getHeight() - y * scale - imgHeight;
} else {
const y = pos.yPosition / scale;
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;
} else {
return page.getHeight() - pos.yPosition - imgHeight;
}
}
};
page.drawImage(img, {
x: xPos(imgUrlList[id]),
y: yPos(imgUrlList[id]),
width: imgWidth,
height: imgHeight
});
});
}
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
//embed document's object id to all pages in pdf document
await embedDocId(pdfDoc, docId, allPages);
//embed multi signature in pdf
const pdfBytes = await multiSignEmbed(
pngUrl,
pdfDoc,
pdfOriginalWidth,
false
);
signPdfFun(pdfBytes, docId);
}
setIsSignPad(false);
setXyPostion([]);
}
}
microfrontends/SignDocuments/src/css/signature.css
+1
View File
@@ -643,6 +643,7 @@ option {
.stickyfooter {
position: fixed;
z-index: 32 !important;
bottom: 0px;
right: 0rem;
}
microfrontends/SignDocuments/src/utils/Utils.js
+145 -8
View File
@@ -1,6 +1,6 @@
import axios from "axios";
import { $ } from 'select-dom';
import { $ } from "select-dom";
import { rgb } from "pdf-lib";
export async function getBase64FromUrl(url) {
const data = await fetch(url);
const blob = await data.blob();
@@ -327,18 +327,155 @@ export const contactBook = async (objectId) => {
export function urlValidator(url) {
try {
const newUrl = new URL(url);
return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
return newUrl.protocol === "http:" || newUrl.protocol === "https:";
} catch (err) {
return false;
}
}
export function modalAlign() {
let modalDialog = $('.modal-dialog').getBoundingClientRect();
let mobileHead = $('.mobileHead').getBoundingClientRect()
let modal = $('.modal-dialog');
let modalDialog = $(".modal-dialog").getBoundingClientRect();
let mobileHead = $(".mobileHead").getBoundingClientRect();
let modal = $(".modal-dialog");
if (modalDialog.left < mobileHead.left) {
let leftOffset = mobileHead.left - modalDialog.left;
modal.style.left = leftOffset + 'px';
modal.style.top = (window.innerHeight/3) + 'px';
modal.style.left = leftOffset + "px";
modal.style.top = window.innerHeight / 3 + "px";
}
}
//function for embed multiple signature using pdf-lib
export const multiSignEmbed = async (
pngUrl,
pdfDoc,
pdfOriginalWidth,
signyourself
) => {
for (let i = 0; i < pngUrl.length; i++) {
const pageNo = pngUrl[i].pageNumber;
const imgUrlList = pngUrl[i].pos;
const pages = pdfDoc.getPages();
const page = pages[pageNo - 1];
const images = await Promise.all(
imgUrlList.map(async (url) => {
let signUrl = url.SignUrl;
if (url.ImageType === "image/png") {
//function for convert signature png base64 url to jpeg base64
const newUrl = await convertPNGtoJPEG(signUrl);
signUrl = newUrl;
}
const checkUrl = urlValidator(signUrl);
if (checkUrl) {
signUrl = signUrl + "?get";
}
const res = await fetch(signUrl);
return res.arrayBuffer();
})
);
images.forEach(async (imgData, id) => {
let img;
if (
(imgUrlList[id].ImageType &&
imgUrlList[id].ImageType === "image/png") ||
imgUrlList[id].ImageType === "image/jpeg"
) {
img = await pdfDoc.embedJpg(imgData);
} else {
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 = window.innerWidth - 32;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const xPos = (pos) => {
if (signyourself) {
if (isMobile) {
return imgUrlList[id].xPosition * scale + 43;
} else {
return imgUrlList[id].xPosition;
}
} else {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const x = pos.xPosition * (pos.scale / scale);
return x * scale + 50;
} else {
const x = pos.xPosition / scale;
return x * scale;
}
} 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 x = pos.xPosition * pos.scale + 50;
return x;
} else {
return pos.xPosition;
}
}
}
};
const yPos = (pos) => {
if (signyourself) {
if (isMobile) {
return (
page.getHeight() -
imgUrlList[id].yPosition * scale -
imgHeight * scale
);
} else {
return page.getHeight() - imgUrlList[id].yPosition - imgHeight;
}
} else {
//checking both condition mobile and desktop view
const y = pos.yPosition / scale;
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);
return page.getHeight() - y * scale - imgHeight;
} 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;
} else {
return page.getHeight() - pos.yPosition - imgHeight;
}
}
}
};
page.drawImage(img, {
x: xPos(imgUrlList[id]),
y: yPos(imgUrlList[id]),
width: signyourself ? imgWidth * scale : imgWidth,
height: signyourself ? imgHeight * scale : imgHeight
});
});
}
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
return pdfBytes;
};
//function for embed document id
export const embedDocId = async (pdfDoc, documentId, allPages) => {
for (let i = 0; i < allPages; i++) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 10;
const textContent = documentId && `OpenSign™ DocumentId: ${documentId} `;
const pages = pdfDoc.getPages();
const page = pages[i];
page.drawText(textContent, {
x: 10,
y: page.getHeight() - 10,
size: fontSize,
font,
color: rgb(0.5, 0.5, 0.5)
});
}
};