diff --git a/apps/OpenSign/src/components/pdf/PdfZoom.js b/apps/OpenSign/src/components/pdf/PdfZoom.js index 4a0c54927..51aee5ad0 100644 --- a/apps/OpenSign/src/components/pdf/PdfZoom.js +++ b/apps/OpenSign/src/components/pdf/PdfZoom.js @@ -18,6 +18,7 @@ function PdfZoom(props) { props.setZoomPercent(props.zoomPercent - 10); } }; + //`handleRotationFun` function is used to roatate pdf particular page const handleRotationFun = async (rotateDegree) => { const urlDetails = await rotatePdfPage( props.file, @@ -28,34 +29,8 @@ function PdfZoom(props) { props.setPdfArrayBuffer(urlDetails.arrayBuffer); props.setPdfRotatese64(urlDetails.base64); }; - - const handleRotateRight = () => { - let rotateDegree; - if (props.rotateDegree < 360) { - rotateDegree = props.rotateDegree + 90; - props.setRotateDegree(rotateDegree); - handleRotationFun(rotateDegree); - } else { - rotateDegree = 90; - props.setRotateDegree(rotateDegree); - handleRotationFun(rotateDegree); - } - }; - const handleRotateLeft = () => { - let rotateDegree; - if (props.rotateDegree > -360) { - rotateDegree = props.rotateDegree - 90; - props.setRotateDegree(rotateDegree); - handleRotationFun(rotateDegree); - } else { - rotateDegree = -90; - props.setRotateDegree(rotateDegree); - handleRotationFun(rotateDegree); - } - }; return ( - // md:mt-[41px] xl:mt-[63px]mt=[] - + - handleRotateRight()} - title={t("Rotate right")} - > - - - - {/* - - */} - handleRotateLeft()} - > - - + {!props?.isDisableRotate && ( + <> + handleRotationFun(90)} + title={t("Rotate right")} + > + + + handleRotationFun(-90)} + > + + + + )} { setPageNumber(index + 1); - setRotateDegree(0); if (setSignBtnPosition) { setSignBtnPosition([]); } diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js index dc9ec6386..39d1bece2 100644 --- a/apps/OpenSign/src/components/pdf/RenderPdf.js +++ b/apps/OpenSign/src/components/pdf/RenderPdf.js @@ -600,7 +600,6 @@ function RenderPdf({ } > { 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, + const getObj = compensateRotation( + page.getRotation().angle, + 10, + 5, + 1, + page.getSize(), + fontSize, + rgb(0.5, 0.5, 0.5), font, - color: rgb(0.5, 0.5, 0.5) - }); + page + ); + page.drawText(textContent, getObj); } }; @@ -2324,23 +2329,33 @@ export async function rotatePdfPage( pdfRotateBase64 ) { let file; + + //condition to handle pdf base64 in arrayBuffer format if (pdfRotateBase64) { file = base64ToArrayBuffer(pdfRotateBase64); } else { - file = await convertPdfArrayBuffer(pdfRotateBase64 || url); + //condition to handle pdf url in arrayBuffer format + file = await convertPdfArrayBuffer(url); } // Load the existing PDF const pdfDoc = await PDFDocument.load(file); // Get the page according to page number const page = pdfDoc.getPage(pageNumber); - // Rotate the page - page.setRotation(degrees(rotateDegree)); - // Serialize the PDFDocument to bytes (a Uint8Array) - const base64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); - // console.log("pdfBytes",base64) - //convert base64 to arraybuffer - const arrayBuffer = base64ToArrayBuffer(base64); - return { arrayBuffer: arrayBuffer, base64: base64 }; + //get current page rotation angle + const currentRotation = page.getRotation().angle; + // Apply the rotation in the counterclockwise direction + let newRotation = (currentRotation + rotateDegree) % 360; + // Adjust for negative angles to keep within 0-359 range + if (newRotation < 0) { + newRotation += 360; + } + page.setRotation(degrees(newRotation)); + const pdfbase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); + //convert base64 to arraybuffer is used in pdf-lib + //pdfbase64 is used to show pdf rotated format + const arrayBuffer = base64ToArrayBuffer(pdfbase64); + //`base64` is used to show pdf + return { arrayBuffer: arrayBuffer, base64: pdfbase64 }; } function base64ToArrayBuffer(base64) { // Decode the base64 string to a binary string @@ -2355,3 +2370,12 @@ function base64ToArrayBuffer(base64) { // Return the ArrayBuffer return bytes.buffer; } + +export const convertBase64ToFile = async (pdfName, pdfBase64) => { + const fileName = sanitizeFileName(pdfName) + ".pdf"; + const pdfFile = new Parse.File(fileName, { base64: pdfBase64 }); + // Save the Parse File if needed + const pdfData = await pdfFile.save(); + const pdfUrl = pdfData.url(); + return pdfUrl; +}; diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index d3dbbcf43..e27ee68b1 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -132,8 +132,6 @@ function PdfRequestFiles(props) { const [res, setRes] = useState({}); const [documentId, setDocumentId] = useState(""); const [isPublicContact, setIsPublicContact] = useState(false); - const [rotateDegree, setRotateDegree] = useState(0); - const [pdfRotateBase64, setPdfRotatese64] = useState(""); const [pdfArrayBuffer, setPdfArrayBuffer] = useState(""); const isHeader = useSelector((state) => state.showHeader); const divRef = useRef(null); @@ -674,7 +672,6 @@ function PdfRequestFiles(props) { } }; - console.log("base64", pdfRotateBase64); //function for embed signature or image url in pdf async function embedWidgetsData() { //for emailVerified data checking first in localstorage @@ -1122,7 +1119,6 @@ function PdfRequestFiles(props) { //function for change page function changePage(offset) { setPageNumber((prevPageNumber) => prevPageNumber + offset); - setRotateDegree(0); } //function for image upload or update @@ -1923,8 +1919,6 @@ function PdfRequestFiles(props) { setPageNumber={setPageNumber} pageNumber={pageNumber} containerWH={containerWH} - setRotateDegree={setRotateDegree} - pdfRotateBase64={pdfRotateBase64} /> {/* pdf render view */}
@@ -1934,16 +1928,7 @@ function PdfRequestFiles(props) { containerWH={containerWH} setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} - setRotateDegree={setRotateDegree} - rotateDegree={rotateDegree} - file={ - pdfDetails[0] && - (pdfDetails[0].SignedUrl || pdfDetails[0].URL) - } - setPdfArrayBuffer={setPdfArrayBuffer} - setPdfRotatese64={setPdfRotatese64} - pageNumber={pageNumber} - pdfRotateBase64={pdfRotateBase64} + isDisableRotate={true} />
{/* this modal is used show this document is already sign */} @@ -2132,7 +2117,6 @@ function PdfRequestFiles(props) { uniqueId={uniqueId} ispublicTemplate={isPublicTemplate} handleUserDetails={handleUserDetails} - pdfRotateBase64={pdfRotateBase64} /> )}
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 59cbeb693..f1741a8b1 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -35,7 +35,8 @@ import { fetchSubscription, convertPdfArrayBuffer, getContainerScale, - openInNewTab + openInNewTab, + convertBase64ToFile } from "../constant/Utils"; import RenderPdf from "../components/pdf/RenderPdf"; import { useNavigate } from "react-router-dom"; @@ -141,7 +142,7 @@ function PlaceHolderSign() { const [isCustomize, setIsCustomize] = useState(false); const [zoomPercent, setZoomPercent] = useState(0); const [scale, setScale] = useState(1); - const [rotateDegree, setRotateDegree] = useState(0); + const [pdfRotateBase64, setPdfRotatese64] = useState(""); const isMobile = window.innerWidth < 767; const [, drop] = useDrop({ @@ -807,7 +808,6 @@ function PlaceHolderSign() { function changePage(offset) { setSignBtnPosition([]); setPageNumber((prevPageNumber) => prevPageNumber + offset); - setRotateDegree(0); } //function for capture position on hover or touch widgets @@ -840,11 +840,6 @@ function PlaceHolderSign() { const handleMouseLeave = () => { setSignBtnPosition([xySignature]); }; - - function sanitizeFileName(fileName) { - // Remove spaces and invalid characters - return fileName.replace(/[^a-zA-Z0-9._-]/g, ""); - } //embed prefill label widget data const embedPrefilllData = async () => { const prefillExist = signerPos.filter((data) => data.Role === "prefill"); @@ -864,31 +859,27 @@ function PlaceHolderSign() { pdfOriginalWH, containerWH ); - - const fileName = sanitizeFileName(pdfDetails[0].Name) + ".pdf"; - const pdfFile = new Parse.File(fileName, { base64: pdfBase64 }); - - // Save the Parse File if needed - const pdfData = await pdfFile.save(); - const pdfUrl = pdfData.url(); + const pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64); const tenantId = localStorage.getItem("TenantId"); const buffer = atob(pdfBase64); SaveFileSize(buffer.length, pdfUrl, tenantId); return pdfUrl; } catch (e) { - console.log("error", e); + console.log("error to convertBase64ToFile in placeholder flow", e); } } else if (pdfRotateBase64) { - const fileName = sanitizeFileName(pdfDetails[0].Name) + ".pdf"; - const pdfFile = new Parse.File(fileName, { base64: pdfRotateBase64 }); - - // Save the Parse File if needed - const pdfData = await pdfFile.save(); - const pdfUrl = pdfData.url(); - const tenantId = localStorage.getItem("TenantId"); - const buffer = atob(pdfRotateBase64); - SaveFileSize(buffer.length, pdfUrl, tenantId); - return pdfUrl; + try { + const pdfUrl = await convertBase64ToFile( + pdfDetails[0].Name, + pdfRotateBase64 + ); + const tenantId = localStorage.getItem("TenantId"); + const buffer = atob(pdfRotateBase64); + SaveFileSize(buffer.length, pdfUrl, tenantId); + return pdfUrl; + } catch (e) { + console.log("error to convertBase64ToFile in placeholder flow", e); + } } else { return pdfDetails[0].URL; } @@ -1753,7 +1744,6 @@ function PlaceHolderSign() { setPageNumber={setPageNumber} setSignBtnPosition={setSignBtnPosition} pageNumber={pageNumber} - setRotateDegree={setRotateDegree} pdfRotateBase64={pdfRotateBase64} /> {/* pdf render view */} @@ -1764,8 +1754,6 @@ function PlaceHolderSign() { containerWH={containerWH} setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} - setRotateDegree={setRotateDegree} - rotateDegree={rotateDegree} file={ pdfDetails[0] && (pdfDetails[0].SignedUrl || pdfDetails[0].URL) diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index f8bc6d573..4707c4aac 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -123,7 +123,6 @@ function SignYourSelf() { const [zoomPercent, setZoomPercent] = useState(0); const isHeader = useSelector((state) => state.showHeader); const [scale, setScale] = useState(1); - const [rotateDegree, setRotateDegree] = useState(0); const [pdfRotateBase64, setPdfRotatese64] = useState(""); const divRef = useRef(null); const nodeRef = useRef(null); @@ -864,7 +863,6 @@ function SignYourSelf() { function changePage(offset) { setSignBtnPosition([]); setPageNumber((prevPageNumber) => prevPageNumber + offset); - setRotateDegree(0); } //function for image upload or update const onImageChange = (event) => { @@ -1216,7 +1214,6 @@ function SignYourSelf() { setSignBtnPosition={setSignBtnPosition} pageNumber={pageNumber} containerWH={containerWH} - setRotateDegree={setRotateDegree} pdfRotateBase64={pdfRotateBase64} />
@@ -1226,8 +1223,6 @@ function SignYourSelf() { containerWH={containerWH} setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} - setRotateDegree={setRotateDegree} - rotateDegree={rotateDegree} file={ pdfDetails[0] && (pdfDetails[0].SignedUrl || pdfDetails[0].URL) diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index 3dc2b9258..c3442f9fb 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -27,7 +27,7 @@ import { fetchSubscription, getContainerScale, openInNewTab, - convertPdfArrayBuffer + convertBase64ToFile } from "../constant/Utils"; import RenderPdf from "../components/pdf/RenderPdf"; import "../styles/AddUser.css"; @@ -94,9 +94,7 @@ const TemplatePlaceholder = () => { const [isNameModal, setIsNameModal] = useState(false); const [isTextSetting, setIsTextSetting] = useState(false); const [pdfLoad, setPdfLoad] = useState(false); - const [rotateDegree, setRotateDegree] = useState(0); const [pdfRotateBase64, setPdfRotatese64] = useState(""); - const [pdfArrayBuffer, setPdfArrayBuffer] = useState(""); const color = [ "#93a3db", "#e6c3db", @@ -234,18 +232,6 @@ const TemplatePlaceholder = () => { : []; if (documentData && documentData.length > 0) { - const url = documentData[0] && documentData[0]?.URL; - if (url) { - //convert document url in array buffer format to use embed widgets in pdf using pdf-lib - const arrayBuffer = await convertPdfArrayBuffer(url); - if (arrayBuffer === "Error") { - setHandleError(t("something-went-wrong-mssg")); - } else { - setPdfArrayBuffer(arrayBuffer); - } - } else { - setHandleError(t("something-went-wrong-mssg")); - } if (isEnableSubscription) { checkIsSubscribed(documentData[0]?.ExtUserPtr?.Email); } @@ -707,7 +693,6 @@ const TemplatePlaceholder = () => { function changePage(offset) { setSignBtnPosition([]); setPageNumber((prevPageNumber) => prevPageNumber + offset); - setRotateDegree(0); } //function for capture position on hover or touch widgets @@ -748,6 +733,7 @@ const TemplatePlaceholder = () => { handleSaveTemplate(); } }; + const handleSaveTemplate = async () => { if (signersdata?.length) { const loadObj = { @@ -769,6 +755,17 @@ const TemplatePlaceholder = () => { } }); } + let pdfUrl = pdfDetails[0]?.URL; + if (pdfRotateBase64) { + try { + pdfUrl = await convertBase64ToFile( + pdfDetails[0].Name, + pdfRotateBase64 + ); + } catch (e) { + console.log("error to convertBase64ToFile in placeholder flow", e); + } + } try { const data = { Placeholders: signerPos, @@ -779,7 +776,8 @@ const TemplatePlaceholder = () => { SendinOrder: pdfDetails[0]?.SendinOrder || false, AutomaticReminders: pdfDetails[0]?.AutomaticReminders, RemindOnceInEvery: parseInt(pdfDetails[0]?.RemindOnceInEvery), - NextReminderDate: pdfDetails[0]?.NextReminderDate + NextReminderDate: pdfDetails[0]?.NextReminderDate, + URL: pdfUrl }; const updateTemplate = new Parse.Object("contracts_Template"); updateTemplate.id = templateId; @@ -1338,13 +1336,10 @@ const TemplatePlaceholder = () => { containerWH={containerWH} setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} - setRotateDegree={setRotateDegree} - rotateDegree={rotateDegree} file={ pdfDetails[0] && (pdfDetails[0].SignedUrl || pdfDetails[0].URL) } - setPdfArrayBuffer={setPdfArrayBuffer} setPdfRotatese64={setPdfRotatese64} pageNumber={pageNumber} pdfRotateBase64={pdfRotateBase64}