diff --git a/apps/OpenSign/src/components/RenderDebugPdf.js b/apps/OpenSign/src/components/RenderDebugPdf.js index c204b207a..f33935e4a 100644 --- a/apps/OpenSign/src/components/RenderDebugPdf.js +++ b/apps/OpenSign/src/components/RenderDebugPdf.js @@ -13,11 +13,7 @@ const RenderDebugPdf = (props) => { > { - const load = { - status: false, - type: "failed" - }; - props.setPdfLoadFail(load); + props.setPdfLoadFail(false); }} loading={"Loading Document.."} onLoadSuccess={props.pageDetails} diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js index fade9d933..e5029b11e 100644 --- a/apps/OpenSign/src/components/pdf/Placeholder.js +++ b/apps/OpenSign/src/components/pdf/Placeholder.js @@ -91,6 +91,7 @@ function Placeholder(props) { const [placeholderBorder, setPlaceholderBorder] = useState({ w: 0, h: 0 }); const [isDraggingEnabled, setDraggingEnabled] = useState(true); const [isShowDateFormat, setIsShowDateFormat] = useState(false); + const [containerScale, setContainerScale] = useState(); const [selectDate, setSelectDate] = useState({ date: props.pos.type === "date" @@ -120,7 +121,14 @@ function Placeholder(props) { width: null, height: null }); - const containerScale = props.containerWH.width / props.pdfOriginalWH.width; + + useEffect(() => { + const getPdfPageWidth = props.pdfOriginalWH.find( + (data) => data.pageNumber === props.pageNumber + ); + setContainerScale(props.containerWH.width / getPdfPageWidth.width); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [props.containerWH.width, props.pdfOriginalWH]); const dateFormatArr = [ "L", "DD-MM-YYYY", @@ -558,7 +566,10 @@ function Placeholder(props) { ); }; const xPos = (pos, signYourself) => { - const containerScale = props.containerWH.width / props.pdfOriginalWH.width; + const getPdfPageWidth = props.pdfOriginalWH.find( + (data) => data.pageNumber === props.pageNumber + ); + const containerScale = props.containerWH.width / getPdfPageWidth?.width; const resizePos = pos.xPosition; if (signYourself) { return resizePos * containerScale * props.scale; @@ -580,7 +591,10 @@ function Placeholder(props) { } }; const yPos = (pos, signYourself) => { - const containerScale = props.containerWH.width / props.pdfOriginalWH.width; + const getPdfPageWidth = props.pdfOriginalWH.find( + (data) => data.pageNumber === props.pageNumber + ); + const containerScale = props.containerWH.width / getPdfPageWidth.width; const resizePos = pos.yPosition; if (signYourself) { diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js index de2edbfd7..6c89d4969 100644 --- a/apps/OpenSign/src/components/pdf/RenderPdf.js +++ b/apps/OpenSign/src/components/pdf/RenderPdf.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import RSC from "react-scrollbars-custom"; import { Document, Page } from "react-pdf"; import { @@ -28,7 +28,8 @@ function RenderPdf({ pdfRequest, signerObjectId, signedSigners, - setPdfLoadFail, + pdfLoad, + setPdfLoad, placeholder, setSignerPos, setXyPostion, @@ -55,19 +56,19 @@ function RenderPdf({ handleTextSettingModal, setTempSignerId, uniqueId, - setPdfRenderHeight, pdfOriginalWH, scale }) { - const [isLoadPdf, setIsLoadPdf] = useState(false); - const isMobile = window.innerWidth < 767; //check isGuestSigner is present in local if yes than handle login flow header in mobile view const isGuestSigner = localStorage.getItem("isGuestSigner"); // handle signature block width and height according to screen const posWidth = (pos, signYourself) => { - const containerScale = containerWH.width / pdfOriginalWH.width; + const getPdfPageWidth = pdfOriginalWH.find( + (data) => data.pageNumber === pageNumber + ); + const containerScale = containerWH.width / getPdfPageWidth.width || 1; const defaultWidth = defaultWidthHeight(pos.type).width; const posWidth = pos.Width ? pos.Width : defaultWidth; if (signYourself) { @@ -93,7 +94,10 @@ function RenderPdf({ } }; const posHeight = (pos, signYourself) => { - const containerScale = containerWH.width / pdfOriginalWH.width; + const getPdfPageWidth = pdfOriginalWH.find( + (data) => data.pageNumber === pageNumber + ); + const containerScale = containerWH.width / getPdfPageWidth?.width || 1; const posHeight = pos.Height || defaultWidthHeight(pos.type).height; if (signYourself) { @@ -189,6 +193,7 @@ function RenderPdf({ scale={scale} containerWH={containerWH} pdfOriginalWH={pdfOriginalWH} + pageNumber={pageNumber} /> ) @@ -248,9 +253,8 @@ function RenderPdf({ ref={drop} id="container" > - {isLoadPdf && - containerWH?.width && - pdfOriginalWH?.width && + {containerWH?.width && + pdfOriginalWH.length > 0 && (pdfRequest ? signerPos.map((data, key) => { return ( @@ -315,6 +319,7 @@ function RenderPdf({ scale={scale} containerWH={containerWH} pdfOriginalWH={pdfOriginalWH} + pageNumber={pageNumber} /> ); @@ -367,6 +372,7 @@ function RenderPdf({ } scale={scale} pdfOriginalWH={pdfOriginalWH} + pageNumber={pageNumber} /> ) ); @@ -379,7 +385,7 @@ function RenderPdf({
{ - setPdfLoadFail(true); + setPdfLoad(false); }} loading={"Loading Document.."} onLoadSuccess={pageDetails} @@ -398,10 +404,6 @@ function RenderPdf({ } > { - setPdfRenderHeight && setPdfRenderHeight(height); - setIsLoadPdf(true); - }} key={index} pageNumber={pageNumber} width={containerWH.width} @@ -432,9 +434,9 @@ function RenderPdf({ ref={drop} id="container" > - {isLoadPdf && + {pdfLoad && containerWH?.width && - pdfOriginalWH?.width && + pdfOriginalWH.length > 0 && (pdfRequest //pdf request sign flow ? signerPos?.map((data, key) => { return ( @@ -499,6 +501,7 @@ function RenderPdf({ scale={scale} containerWH={containerWH} pdfOriginalWH={pdfOriginalWH} + pageNumber={pageNumber} /> ); @@ -556,6 +559,7 @@ function RenderPdf({ scale={scale} containerWH={containerWH} pdfOriginalWH={pdfOriginalWH} + pageNumber={pageNumber} /> ); @@ -567,11 +571,7 @@ function RenderPdf({ {/* this component for render pdf document is in middle of the component */} { - const load = { - status: false, - type: "failed" - }; - setPdfLoadFail(load); + pdfLoad(false); }} loading={"Loading Document.."} onLoadSuccess={pageDetails} @@ -590,10 +590,6 @@ function RenderPdf({ } > { - setPdfRenderHeight && setPdfRenderHeight(height); - setIsLoadPdf(true); - }} key={index} width={containerWH.width} scale={scale || 1} diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index d6a244cd1..58e6941ee 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/apps/OpenSign/src/constant/Utils.js @@ -1226,7 +1226,6 @@ export const changeImageWH = async (base64Image) => { export const multiSignEmbed = async ( xyPositionArray, pdfDoc, - pdfOriginalWH, signyourself, scale ) => { @@ -1287,20 +1286,8 @@ export const multiSignEmbed = async ( } } let widgetWidth, widgetHeight; - widgetWidth = placeholderWidth( - position, - scale, - signyourself, - pdfOriginalWH, - scale - ); - widgetHeight = placeholderHeight( - position, - scale, - signyourself, - pdfOriginalWH.height, - scale - ); + widgetWidth = placeholderWidth(position); + widgetHeight = placeholderHeight(position); const xPos = (position) => { const resizePos = position.xPosition; //first two condition handle to old data already saved from mobile view which scale point diffrent diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index a8e824cd2..ea9617b29 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -86,7 +86,7 @@ function PdfRequestFiles() { const [defaultSignImg, setDefaultSignImg] = useState(); const [isDocId, setIsDocId] = useState(false); const [pdfNewWidth, setPdfNewWidth] = useState(); - const [pdfOriginalWH, setPdfOriginalWH] = useState(); + const [pdfOriginalWH, setPdfOriginalWH] = useState([]); const [signerPos, setSignerPos] = useState([]); const [signerObjectId, setSignerObjectId] = useState(); const [isUiLoading, setIsUiLoading] = useState(false); @@ -110,10 +110,7 @@ function PdfRequestFiles() { }); const [myInitial, setMyInitial] = useState(""); const [isInitial, setIsInitial] = useState(false); - const [pdfLoadFail, setPdfLoadFail] = useState({ - status: false, - type: "load" - }); + const [pdfLoad, setPdfLoad] = useState(false); const [isSigned, setIsSigned] = useState(false); const [isExpired, setIsExpired] = useState(false); const [alreadySign, setAlreadySign] = useState(false); @@ -129,7 +126,6 @@ function PdfRequestFiles() { const [isVerifyModal, setIsVerifyModal] = useState(false); const [otp, setOtp] = useState(""); const [contractName, setContractName] = useState(""); - const [pdfRenderHeight, setPdfRenderHeight] = useState(); const [zoomPercent, setZoomPercent] = useState(0); const [totalZoomPercent, setTotalZoomPercent] = useState(); const [scale, setScale] = useState(1); @@ -785,7 +781,6 @@ function PdfRequestFiles() { const pdfBytes = await multiSignEmbed( pngUrl, pdfDoc, - pdfOriginalWH, isSignYourSelfFlow, scale ); @@ -1020,14 +1015,16 @@ function PdfRequestFiles() { ]; //function for get pdf page details const pageDetails = async (pdf) => { - 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 - }); + let pdfWHObj = []; + const totalPages = pdf.numPages; // Get the total number of pages + for (let index = 0; index < totalPages; index++) { + const getPage = await pdf.getPage(index + 1); + const scale = 1; + const { width, height } = getPage.getViewport({ scale }); + pdfWHObj.push({ pageNumber: index + 1, width, height }); + } + setPdfOriginalWH(pdfWHObj); + setPdfLoad(true); }; //function for change page function changePage(offset) { @@ -1555,7 +1552,6 @@ function PdfRequestFiles() { state.showHeader); - const [pdfRenderHeight, setPdfRenderHeight] = useState(); const [activeMailAdapter, setActiveMailAdapter] = useState(""); const [isAlreadyPlace, setIsAlreadyPlace] = useState({ status: false, @@ -467,7 +463,10 @@ function PlaceHolderSign() { setZIndex(posZIndex); const signer = signersdata.find((x) => x.Id === uniqueId); const key = randomId(); - const containerScale = containerWH?.width / pdfOriginalWH?.width || 1; + const getPdfPageWidth = pdfOriginalWH.find( + (data) => data.pageNumber === pageNumber + ); + const containerScale = containerWH?.width / getPdfPageWidth?.width || 1; let dropData = []; let placeHolder; const dragTypeValue = item?.text ? item.text : monitor.type; @@ -514,7 +513,6 @@ 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), @@ -661,14 +659,16 @@ function PlaceHolderSign() { //function for get pdf page details const pageDetails = async (pdf) => { - 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 - }); + let pdfWHObj = []; + const totalPages = pdf?.numPages; + for (let index = 0; index < totalPages; index++) { + const getPage = await pdf.getPage(index + 1); + const scale = 1; + const { width, height } = getPage.getViewport({ scale }); + pdfWHObj.push({ pageNumber: index + 1, width, height }); + } + setPdfOriginalWH(pdfWHObj); + setPdfLoad(true); }; //function for save x and y position and show signature tab on that position @@ -685,7 +685,10 @@ function PlaceHolderSign() { updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace); const signId = signerId ? signerId : uniqueId; //? signerId : signerObjId; const keyValue = key ? key : dragKey; - const containerScale = containerWH.width / pdfOriginalWH.width; + const getPdfPageWidth = pdfOriginalWH.find( + (data) => data.pageNumber === pageNumber + ); + const containerScale = containerWH.width / getPdfPageWidth?.width; if (keyValue >= 0) { let filterSignerPos; @@ -864,7 +867,6 @@ function PlaceHolderSign() { const pdfBytes = await multiSignEmbed( placeholder, pdfDoc, - pdfOriginalWH, isSignYourSelfFlow, containerWH ); @@ -1784,7 +1786,6 @@ function PlaceHolderSign() { state.showHeader); const [scale, setScale] = useState(1); @@ -458,7 +454,10 @@ function SignYourSelf() { const widgetTypeExist = ["name", "company", "job title", "email"].includes( dragTypeValue ); - const containerScale = containerWH?.width / pdfOriginalWH?.width || 1; + const getPdfPageWidth = pdfOriginalWH.find( + (data) => data.pageNumber === pageNumber + ); + const containerScale = containerWH?.width / getPdfPageWidth?.width || 1; //adding and updating drop position in array when user drop signature button in div if (item === "onclick") { const getWidth = widgetTypeExist @@ -695,7 +694,6 @@ function SignYourSelf() { const pdfBytes = await multiSignEmbed( xyPostion, pdfDoc, - pdfOriginalWH, isSignYourSelfFlow, scale ); @@ -809,13 +807,14 @@ function SignYourSelf() { setDragKey(key); 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) { event.preventDefault(); - const containerScale = containerWH.width / pdfOriginalWH.width; + const getPdfPageWidth = pdfOriginalWH.find( + (data) => data.pageNumber === pageNumber + ); + const containerScale = containerWH.width / getPdfPageWidth?.width || 1; if (dragKey >= 0) { const filterDropPos = xyPostion.filter( (data) => data.pageNumber === pageNumber @@ -848,16 +847,18 @@ function SignYourSelf() { setIsDragging(false); }, 200); }; - //function for get pdf page details const pageDetails = async (pdf) => { - const firstPage = await pdf.getPage(1); - const scale = 1; - const { width, height } = firstPage.getViewport({ scale }); - setPdfOriginalWH({ width: width, height: height }); - setPdfLoadFail({ - status: true - }); + let pdfWHObj = []; + const totalPages = pdf?.numPages; + for (let index = 0; index < totalPages; index++) { + const getPage = await pdf.getPage(index + 1); + const scale = 1; + const { width, height } = getPage.getViewport({ scale }); + pdfWHObj.push({ pageNumber: index + 1, width, height }); + } + setPdfOriginalWH(pdfWHObj); + setPdfLoad(true); }; //function for change page numver of pdf function changePage(offset) { @@ -1166,7 +1167,7 @@ function SignYourSelf() { {isUiLoading && (
- + This might take some time
@@ -1191,7 +1192,7 @@ function SignYourSelf() { /> )} {/* this component used for UI interaction and show their functionality */} - {pdfLoadFail && !checkTourStatus && ( + {pdfLoad && !checkTourStatus && ( diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index 928c51f26..d5aee2e9d 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -70,7 +70,7 @@ const TemplatePlaceholder = () => { const [checkTourStatus, setCheckTourStatus] = useState(false); const [tourStatus, setTourStatus] = useState([]); const [signerUserId, setSignerUserId] = useState(); - const [pdfOriginalWH, setPdfOriginalWH] = useState(); + const [pdfOriginalWH, setPdfOriginalWH] = useState([]); const [contractName, setContractName] = useState(""); const [containerWH, setContainerWH] = useState(); const signRef = useRef(null); @@ -87,12 +87,8 @@ const TemplatePlaceholder = () => { const [blockColor, setBlockColor] = useState(""); const [selectWidgetId, setSelectWidgetId] = useState(""); const [isNameModal, setIsNameModal] = useState(false); - const [pdfRenderHeight, setPdfRenderHeight] = useState(); const [isTextSetting, setIsTextSetting] = useState(false); - const [pdfLoadFail, setPdfLoadFail] = useState({ - status: false, - type: "load" - }); + const [pdfLoad, setPdfLoad] = useState(false); const color = [ "#93a3db", "#e6c3db", @@ -369,7 +365,10 @@ const TemplatePlaceholder = () => { if (signer) { const posZIndex = zIndex + 1; setZIndex(posZIndex); - const containerScale = containerWH.width / pdfOriginalWH.width; + const getPdfPageWidth = pdfOriginalWH.find( + (data) => data.pageNumber === pageNumber + ); + const containerScale = containerWH.width / getPdfPageWidth?.width || 1; const key = randomId(); let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); const dragTypeValue = item?.text ? item.text : monitor.type; @@ -537,14 +536,16 @@ const TemplatePlaceholder = () => { //function for get pdf page details const pageDetails = async (pdf) => { - 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 - }); + let pdfWHObj = []; + const totalPages = pdf?.numPages; + for (let index = 0; index < totalPages; index++) { + const getPage = await pdf.getPage(index + 1); + const scale = 1; + const { width, height } = getPage.getViewport({ scale }); + pdfWHObj.push({ pageNumber: index + 1, width, height }); + } + setPdfOriginalWH(pdfWHObj); + setPdfLoad(true); }; //function for save x and y position and show signature tab on that position const handleTabDrag = (key) => { @@ -560,7 +561,10 @@ const TemplatePlaceholder = () => { updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace); const signId = signerId; //? signerId : signerObjId; const keyValue = key ? key : dragKey; - const containerScale = containerWH.width / pdfOriginalWH.width; + const getPdfPageWidth = pdfOriginalWH.find( + (data) => data.pageNumber === pageNumber + ); + const containerScale = containerWH.width / getPdfPageWidth?.width || 1; if (keyValue >= 0) { const filterSignerPos = updateSignPos.filter( (data) => data.Id === signId @@ -1343,7 +1347,6 @@ const TemplatePlaceholder = () => { { handleDeleteSign={handleDeleteSign} handleTabDrag={handleTabDrag} handleStop={handleStop} - setPdfLoadFail={setPdfLoadFail} - pdfLoadFail={pdfLoadFail} + setPdfLoad={setPdfLoad} + pdfLoad={pdfLoad} setSignerPos={setSignerPos} containerWH={containerWH} setIsResize={setIsResize} @@ -1529,8 +1532,6 @@ const TemplatePlaceholder = () => { selectWidgetId={selectWidgetId} setIsCheckbox={setIsCheckbox} handleNameModal={setIsNameModal} - setPdfRenderHeight={setPdfRenderHeight} - pdfRenderHeight={pdfRenderHeight} handleTextSettingModal={handleTextSettingModal} pdfOriginalWH={pdfOriginalWH} setScale={setScale}