fix: multiple default signature error,sign-yourself placeholder location issue in mobile view

microfrontends/SignDocuments/src/utils/Utils.js

@@ -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)
+    });
   }
 };