From 0eb2c5ecc42bc18d44a2268c30bab36b3290ee8e Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 21 Jun 2024 13:10:51 +0530 Subject: [PATCH] fix: in landscape mode pdf after embed image,all text type and dropdown widgets position issue --- .../src/components/pdf/Placeholder.js | 2 + apps/OpenSign/src/constant/Utils.js | 168 +++++++++++++++--- apps/OpenSign/src/pages/PdfRequestFiles.js | 17 +- apps/OpenSign/src/pages/PlaceHolderSign.js | 27 +-- apps/OpenSign/src/pages/SignyourselfPdf.js | 25 +-- .../OpenSign/src/pages/TemplatePlaceholder.js | 15 +- 6 files changed, 193 insertions(+), 61 deletions(-) diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js index 7db380e2c..0d64485e9 100644 --- a/apps/OpenSign/src/components/pdf/Placeholder.js +++ b/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; } }; diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index 040cee0c2..2ad9d432a 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/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(); } diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index 9bfd292b4..3e1cd0969 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/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); diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 49f4ba31c..7b35b73ef 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/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 }); }; diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index d967d8a8f..741adf30e 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/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([]); diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index 58af80a6f..5f1f6c11e 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/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