fix: in landscape mode pdf after embed image,all text type and dropdown widgets position issue

apps/OpenSign/src/components/pdf/Placeholder.js

@@ -565,6 +565,7 @@ function Placeholder(props) {
   const xPos = (pos, signYourself) => {
     const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
     const resizePos = pos.xPosition;
+    console.log("go here", resizePos, containerScale, props.scale);
     if (signYourself) {
       return resizePos * containerScale * props.scale;
     } else {
@@ -582,6 +583,7 @@ function Placeholder(props) {
       //     return resizePos * pos.scale * containerScale * props.scale;
       //   }
       // }
+      console.log("go here", resizePos, containerScale, props.scale);
       return resizePos * containerScale * props.scale;
     }
   };

apps/OpenSign/src/constant/Utils.js

@@ -1248,6 +1248,7 @@ export const multiSignEmbed = async (
     const newWidth = containerWH.width;
     const scale = newWidth / pdfOriginalWH.width;
     const pageNo = item.pageNumber;
+    console.log("page number", pageNo);
     const imgUrlList = updateItem;
     const pages = pdfDoc.getPages();
     const form = pdfDoc.getForm();
@@ -1261,10 +1262,6 @@ export const multiSignEmbed = async (
             const newUrl = await convertPNGtoJPEG(signUrl);
             signUrl = newUrl;
           }
-          // const checkUrl = urlValidator(signUrl);
-          // if (checkUrl) {
-          //   signUrl = signUrl + "?get";
-          // }
           const res = await fetch(signUrl);
           return res.arrayBuffer();
         }
@@ -1480,21 +1477,23 @@ export const multiSignEmbed = async (
           ? breakTextIntoLines(textContent, fixedWidth)
           : NewbreakTextIntoLines(textContent, fixedWidth);
         // Set initial y-coordinate for the first line
-        const labelDefaultHeight = defaultWidthHeight(position.type).height;
-
-        let y = yPos(position, null, labelDefaultHeight);
         let x = xPos(position);
-        //xPos(position)
+        let y = position.yPosition;
         // Embed each line on the page
         for (const line of lines) {
-          page.drawText(line, {
-            x: x,
+          const correction = compensateRotation(
+            page.getRotation().angle,
+            x,
             y,
+            1,
+            page.getSize(),
+            fontSize,
+            updateColorInRgb,
             font,
-            color: updateColorInRgb,
-            size: fontSize
-          });
-          y -= 18; // Adjust the line height as needed
+            page
+          );
+          page.drawText(line, correction);
+          y += 18; // Adjust the line height as needed
         }
       } else if (position.type === "dropdown") {
         const dropdownRandomId = "dropdown" + randomId();
@@ -1506,13 +1505,23 @@ export const multiSignEmbed = async (
           dropdown.select(position?.options?.defaultValue);
         }
 
-        dropdown.addToPage(page, {
-          x: xPos(position),
-          y: yPos(position),
+        // dropdown.addToPage(page, {
+        //   x: xPos(position),
+        //   y: yPos(position),
+        //   width: scaleWidth,
+        //   height: scaleHeight,
+        //   borderWidth: 0
+        // });
+        const dropdownObj = {
+          x: position.xPosition,
+          y: position.yPosition,
           width: scaleWidth,
-          height: scaleHeight,
-          borderWidth: 0
-        });
+          height: scaleHeight
+        };
+
+        const dropdownOption = getImagePosition(page, dropdownObj, 1);
+        // page.drawImage(img, imageOptions);
+        dropdown.addToPage(page, dropdownOption);
         dropdown.enableReadOnly();
       } else if (position.type === radioButtonWidget) {
         const radioRandomId = "radio" + randomId();
@@ -1535,7 +1544,37 @@ export const multiSignEmbed = async (
               y: yPosition + 2,
               size: 11
             });
+            // const text = {
+            //   x: position.xPosition + 15,
+            //   y: position.yPosition + 2,
+            //   size: 11
+            // };
+            // const correction = compensateRotationRadioFont(
+            //   page.getRotation().angle,
+            //   position.xPosition,
+            //   position.yPosition,
+            //   1,
+            //   page.getSize(),
+            //   11,
+            //   addYPosition,
+            //   i
+            // );
+
+            // // const imageOptions = getImagePosition(page, text, 1);
+            // console.log("correction", correction);
+
+            // page.drawText(data, correction);
           }
+          // const radio = {
+          //   x: position.xPosition,
+          //   y: position.yPosition,
+          //   width: 11,
+          //   height: 11
+          // };
+
+          // const imageOptions = getImagePosition(page, radio, 1);
+          // console.log("imageOptions", imageOptions);
+          // radioGroup.addOptionToPage(data, page, imageOptions);
           radioGroup.addOptionToPage(data, page, {
             x: xPos(position),
             y: yPosition,
@@ -1560,12 +1599,14 @@ export const multiSignEmbed = async (
           width: scaleWidth,
           height: scaleHeight
         };
+
         const imageOptions = getImagePosition(page, signature, 1);
         page.drawImage(img, imageOptions);
       }
     });
   }
   const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
+  // console.log("pdf", pdfBytes);
   return pdfBytes;
 };
 
@@ -2077,8 +2118,76 @@ export async function findContact(value) {
 }
 
 // `compensateRotation` is used to calculate x and y position of widget on portait, landscape pdf for pdf-lib
-function compensateRotation(pageRotation, x, y, scale, dimensions, fontSize) {
-  //fontsize = imagewidth
+// function compensateRotationRadioFont(
+//   pageRotation,
+//   x,
+//   y,
+//   scale,
+//   dimensions,
+//   fontSize,
+//   addYPosition,
+//   i
+// ) {
+//   //fontsize = imagewidth
+//   let rotationRads = (pageRotation * Math.PI) / 180;
+
+//   //These coords are now from bottom/left
+//   let coordsFromBottomLeft = { x: x / scale };
+//   if (pageRotation === 90 || pageRotation === 270) {
+//     coordsFromBottomLeft.y = dimensions.width - (y + fontSize) / scale;
+//     if (i > 1) {
+//       coordsFromBottomLeft.y = coordsFromBottomLeft.y - addYPosition;
+//     }
+//   } else {
+//     coordsFromBottomLeft.y = dimensions.height - (y + fontSize) / scale;
+//   }
+
+//   let drawX = null;
+//   let drawY = null;
+//   if (pageRotation === 90) {
+//     drawX =
+//       coordsFromBottomLeft.x * Math.cos(rotationRads) -
+//       coordsFromBottomLeft.y * Math.sin(rotationRads) +
+//       dimensions.width;
+//     drawY =
+//       coordsFromBottomLeft.x * Math.sin(rotationRads) +
+//       coordsFromBottomLeft.y * Math.cos(rotationRads);
+//   } else if (pageRotation === 180) {
+//     drawX =
+//       coordsFromBottomLeft.x * Math.cos(rotationRads) -
+//       coordsFromBottomLeft.y * Math.sin(rotationRads) +
+//       dimensions.width;
+//     drawY =
+//       coordsFromBottomLeft.x * Math.sin(rotationRads) +
+//       coordsFromBottomLeft.y * Math.cos(rotationRads) +
+//       dimensions.height;
+//   } else if (pageRotation === 270) {
+//     drawX =
+//       coordsFromBottomLeft.x * Math.cos(rotationRads) -
+//       coordsFromBottomLeft.y * Math.sin(rotationRads);
+//     drawY =
+//       coordsFromBottomLeft.x * Math.sin(rotationRads) +
+//       coordsFromBottomLeft.y * Math.cos(rotationRads) +
+//       dimensions.height;
+//   } else {
+//     //no rotation
+//     drawX = coordsFromBottomLeft.x;
+//     drawY = coordsFromBottomLeft.y;
+//   }
+//   return { x: drawX + 15, y: drawY + 2, size: fontSize };
+// }
+// `compensateRotation` is used to calculate x and y position of widget on portait, landscape pdf for pdf-lib
+function compensateRotation(
+  pageRotation,
+  x,
+  y,
+  scale,
+  dimensions,
+  fontSize,
+  updateColorInRgb,
+  font,
+  page
+) {
   let rotationRads = (pageRotation * Math.PI) / 180;
 
   //These coords are now from bottom/left
@@ -2121,7 +2230,18 @@ function compensateRotation(pageRotation, x, y, scale, dimensions, fontSize) {
     drawX = coordsFromBottomLeft.x;
     drawY = coordsFromBottomLeft.y;
   }
-  return { x: drawX, y: drawY };
+  if (font) {
+    return {
+      x: drawX,
+      y: drawY,
+      font,
+      color: updateColorInRgb,
+      size: fontSize,
+      rotate: page.getRotation()
+    };
+  } else {
+    return { x: drawX, y: drawY };
+  }
 }
 
 // `getImagePosition` is used to calulcate position of image type widget like x, y, width, height for pdf-lib
@@ -2129,9 +2249,11 @@ function getImagePosition(page, image, sizeRatio) {
   let pageWidth;
   // pageHeight;
   if ([90, 270].includes(page.getRotation().angle)) {
+    console.log("go in 90 degree");
     pageWidth = page.getHeight();
     // pageHeight = page.getWidth();
   } else {
+    console.log("go in 180 degree");
     pageWidth = page.getWidth();
     // pageHeight = page.getHeight();
   }

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -1022,15 +1022,13 @@ function PdfRequestFiles() {
 
   //function for get pdf page details
   const pageDetails = async (pdf) => {
-    pdf.getPage(1).then((pdfPage) => {
-      const pageWidth = pdfPage.view[2];
-      const pageHeight = pdfPage.view[3];
-      setPdfOriginalWH({ width: pageWidth, height: pageHeight });
-
-      const load = {
-        status: true
-      };
-      setPdfLoadFail(load);
+    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 });
+    setPdfLoadFail({
+      status: true
     });
   };
   //function for change page
@@ -1241,6 +1239,7 @@ function PdfRequestFiles() {
   const handleDontShow = (isChecked) => {
     setIsDontShow(isChecked);
   };
+  // console.log("signerpos", signerPos);
   //function to close tour and save tour status
   const closeRequestSignTour = async () => {
     setRequestSignTour(true);

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -458,7 +458,7 @@ function PlaceHolderSign() {
   const addPositionOfSignature = (item, monitor) => {
     getSignerPos(item, monitor);
   };
-
+  // console.log("signerpos", signerPos);
   const getSignerPos = (item, monitor) => {
     //  setSignerObjId("");
     // setContractName("");
@@ -467,12 +467,18 @@ function PlaceHolderSign() {
       setZIndex(posZIndex);
       const signer = signersdata.find((x) => x.Id === uniqueId);
       const key = randomId();
-      const containerScale = containerWH.width / pdfOriginalWH.width;
+      const containerScale = containerWH?.width / pdfOriginalWH?.width || 1;
+      console.log(
+        "pdfwh",
+        containerScale,
+        containerWH?.width / pdfOriginalWH?.width
+      );
       let dropData = [];
       let placeHolder;
       const dragTypeValue = item?.text ? item.text : monitor.type;
       const widgetWidth = defaultWidthHeight(dragTypeValue).width;
       const widgetHeight = defaultWidthHeight(dragTypeValue).height;
+      console.log("containerscale", containerScale, scale);
       if (item === "onclick") {
         const dropObj = {
           //onclick put placeholder center on pdf
@@ -514,6 +520,7 @@ 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),
@@ -521,7 +528,6 @@ function PlaceHolderSign() {
             (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
           key: key,
           scale: containerScale,
-          // isMobile: isMobile,
           zIndex: posZIndex,
           type: dragTypeValue,
           options: addWidgetOptions(dragTypeValue),
@@ -661,14 +667,13 @@ function PlaceHolderSign() {
 
   //function for get pdf page details
   const pageDetails = async (pdf) => {
-    pdf.getPage(1).then((pdfPage) => {
-      const pageWidth = pdfPage.view[2];
-      const pageHeight = pdfPage.view[3];
-      setPdfOriginalWH({ width: pageWidth, height: pageHeight });
-      const load = {
-        status: true
-      };
-      setPdfLoadFail(load);
+    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 });
+    setPdfLoadFail({
+      status: true
     });
   };
 

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -460,7 +460,7 @@ function SignYourSelf() {
       dragTypeValue
     );
     const containerScale = containerWH?.width / pdfOriginalWH?.width || 1;
-
+    //adding and updating drop position in array when user drop signature button in div
     if (item === "onclick") {
       const getWidth = widgetTypeExist
         ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth
@@ -489,11 +489,13 @@ function SignYourSelf() {
 
       dropData.push(dropObj);
     } else {
+      //This method returns the offset of the current pointer (mouse) position relative to the client viewport.
       const offset = monitor.getClientOffset();
-      //adding and updating drop position in array when user drop signature button in div
       const containerRect = document
         .getElementById("container")
         .getBoundingClientRect();
+      //`containerRect.left`,  The distance from the left of the viewport to the left side of the element.
+      //`containerRect.top` The distance from the top of the viewport to the top of the element.
 
       const x = offset.x - containerRect.left;
       const y = offset.y - containerRect.top;
@@ -705,7 +707,9 @@ function SignYourSelf() {
             );
             // console.log("pdf", pdfBytes);
             //function for call to embed signature in pdf and get digital signature pdf
-            await signPdfFun(pdfBytes, documentId);
+            if (pdfBytes) {
+              await signPdfFun(pdfBytes, documentId);
+            }
           } catch (err) {
             setIsUiLoading(false);
             if (err && err.message.includes("is encrypted.")) {
@@ -812,6 +816,7 @@ function SignYourSelf() {
     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) {
@@ -852,17 +857,17 @@ function SignYourSelf() {
 
   //function for get pdf page details
   const pageDetails = async (pdf) => {
-    const load = {
+    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 });
+    setPdfLoadFail({
       status: true
-    };
-    setPdfLoadFail(load);
-    pdf.getPage(1).then((pdfPage) => {
-      const pageWidth = pdfPage.view[2];
-      const pageHeight = pdfPage.view[3];
-      setPdfOriginalWH({ width: pageWidth, height: pageHeight });
     });
   };
 
+  console.log("xyPosition", xyPostion);
   //function for change page numver of pdf
   function changePage(offset) {
     setSignBtnPosition([]);

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -537,14 +537,13 @@ const TemplatePlaceholder = () => {
 
   //function for get pdf page details
   const pageDetails = async (pdf) => {
-    pdf.getPage(1).then((pdfPage) => {
-      const pageWidth = pdfPage.view[2];
-      const pageHeight = pdfPage.view[3];
-      setPdfOriginalWH({ width: pageWidth, height: pageHeight });
-      const load = {
-        status: true
-      };
-      setPdfLoadFail(load);
+    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 });
+    setPdfLoadFail({
+      status: true
     });
   };
   //function for save x and y position and show signature  tab on that position