diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 815ce2cd5..07cade06e 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -42,8 +42,8 @@ function RenderPdf({ const isMobile = window.innerWidth < 767; const newWidth = window.innerWidth; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - //check isGuestSigner is present in local if yes than handle login flow header in mobile view - const isGuestSigner = localStorage.getItem("isGuestSigner"); + //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) => { let width; @@ -75,6 +75,7 @@ function RenderPdf({ return width; } }; + //function for render placeholder block over pdf document const checkSignedSignes = (data) => { @@ -89,7 +90,7 @@ function RenderPdf({ if (isMobile) { //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale if (!pos.isMobile) { - return pos.xPosition / scale + 32; + return pos.xPosition / scale - 20; } //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale else { @@ -433,337 +434,332 @@ function RenderPdf({ ); }) : pdfRequest - ? signerPos.map((data, key) => { - return ( - - {checkSignedSignes(data)} - - ); - }) - : placeholder - ? signerPos.map((data, ind) => { - return ( - - {data.placeHolder.map((placeData, index) => { - return ( - - {placeData.pageNumber === pageNumber && - placeData.pos.map((pos) => { - return ( - - handleTabDrag( - pos.key, - data.signerObjId - ) - } - size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 - }} - lockAspectRatio={ - pos.Width - ? pos.Width / pos.Height - : 2.5 - } - resizeHandleStyles={{ - bottom: { display: "none" }, - right: { display: "none" }, - bottomRight: { display: "block" } - }} - onDragStop={(event, dragElement) => - handleStop( - event, - dragElement, - data.signerObjId, - pos.key - ) - } - default={{ - x: pos.xPosition, - y: pos.yPosition - }} - onResize={( - e, - direction, - ref, - delta, - position - ) => { - handleImageResize( - ref, - pos.key, - data.signerObjId, - position - ); - }} - > -
{ - e.stopPropagation(); - handleDeleteSign( - pos.key, - data.signerObjId - ); - }} - style={{ - position: "absolute", - right: 0, - display: "inline-block", - background: themeColor(), - cursor: "pointer", - padding: "0px 10px", - zIndex: 10 - }} - > - x -
-
- {pos.isStamp ? "stamp" : "signature"} -
- - ); - })} - - ); - })} - - ); - }) - : xyPostion.map((data, ind) => { - return ( - - {data.pageNumber === pageNumber && - data.pos.map((pos) => { - return pos && pos.SignUrl ? ( - handleTabDrag(pos.key)} - onDragStop={handleStop} - onResize={( - e, - direction, - ref, - delta, - position - ) => { - handleImageResize( - ref, - pos.key, - direction, - position - ); - }} - > - {" "} -
{ - if (!isDragging) { - setTimeout(() => { - e.stopPropagation(); - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); - }, 500); - } - }} - > -
{ - e.stopPropagation(); - handleDeleteSign(pos.key); - setIsStamp(false); - }} - style={{ - position: "absolute", - right: 0, - display: "inline-block", - background: themeColor(), - cursor: "pointer", - padding: "0px 10px" - }} - > - x -
-
- signimg { - setSignKey(pos.key); - setIsSignPad(true); - setIsStamp(pos.isStamp); - }} - src={pos.SignUrl} - style={{ - width: "100%", - height: "100%", - objectFit: "contain" - }} - /> -
-
- - ) : ( - <> + ? signerPos.map((data, key) => { + return ( + + {checkSignedSignes(data)} + + ); + }) + : placeholder + ? signerPos.map((data, ind) => { + return ( + + {data.placeHolder.map((placeData, index) => { + return ( + + {placeData.pageNumber === pageNumber && + placeData.pos.map((pos) => { + return ( { - handleTabDrag(pos.key, e); + borderWidth: "0.2px" }} - onDragStop={handleStop} + onDrag={() => + handleTabDrag(pos.key, data.signerObjId) + } size={{ width: pos.Width ? pos.Width : 150, height: pos.Height ? pos.Height : 60 }} + lockAspectRatio={ + pos.Width ? pos.Width / pos.Height : 2.5 + } + resizeHandleStyles={{ + bottom: { display: "none" }, + right: { display: "none" }, + bottomRight: { display: "block" } + }} + onDragStop={(event, dragElement) => + handleStop( + event, + dragElement, + data.signerObjId, + pos.key + ) + } default={{ x: pos.xPosition, y: pos.yPosition }} + onResize={( + e, + direction, + ref, + delta, + position + ) => { + handleImageResize( + ref, + pos.key, + data.signerObjId, + position + ); + }} >
{ - if (!isDragging) { - setTimeout(() => { - setIsSignPad(true); - - setSignKey(pos.key); - setIsStamp(pos.isStamp); - }, 500); - } + e.stopPropagation(); + handleDeleteSign( + pos.key, + data.signerObjId + ); }} - className="dragElm" style={{ - padding: "0px", - cursor: "all-scroll", - zIndex: 20, position: "absolute", - borderStyle: "dashed", - width: "150px", - height: "60px", - borderColor: themeColor(), - background: "#daebe0", - textAlign: "center", - justifyContent: "center", - borderWidth: "0.2px", - overflow: "hidden" + right: 0, + display: "inline-block", + background: themeColor(), + cursor: "pointer", + padding: "0px 10px", + zIndex: 10 }} > -
{ - e.stopPropagation(); - e.preventDefault(); + x +
+
{ - e.stopPropagation(); // Prevent further event propagation - }} - style={{ - position: "absolute", - right: 0, - display: "inline-block", - background: themeColor(), - cursor: "pointer", - padding: "0px 10px" - }} - > - x -
-
- {pos.isStamp ? "stamp" : "signature"} -
+ marginTop: "0px" + }} + > + {pos.isStamp ? "stamp" : "signature"}
- - ); - })} - - ); - }))} + ); + })} + + ); + })} + + ); + }) + : xyPostion.map((data, ind) => { + return ( + + {data.pageNumber === pageNumber && + data.pos.map((pos) => { + return pos && pos.SignUrl ? ( + handleTabDrag(pos.key)} + onDragStop={handleStop} + onResize={( + e, + direction, + ref, + delta, + position + ) => { + handleImageResize( + ref, + pos.key, + direction, + position + ); + }} + > + {" "} +
{ + if (!isDragging) { + setTimeout(() => { + e.stopPropagation(); + setIsSignPad(true); + setSignKey(pos.key); + setIsStamp(pos.isStamp); + }, 500); + } + }} + > +
{ + e.stopPropagation(); + handleDeleteSign(pos.key); + setIsStamp(false); + }} + style={{ + position: "absolute", + right: 0, + display: "inline-block", + background: themeColor(), + cursor: "pointer", + padding: "0px 10px" + }} + > + x +
+
+ signimg { + setSignKey(pos.key); + setIsSignPad(true); + setIsStamp(pos.isStamp); + }} + src={pos.SignUrl} + style={{ + width: "100%", + height: "100%", + objectFit: "contain" + }} + /> +
+
+ + ) : ( + <> + { + handleTabDrag(pos.key, e); + }} + onDragStop={handleStop} + size={{ + width: pos.Width ? pos.Width : 150, + height: pos.Height ? pos.Height : 60 + }} + default={{ + x: pos.xPosition, + y: pos.yPosition + }} + > +
{ + if (!isDragging) { + setTimeout(() => { + setIsSignPad(true); + + setSignKey(pos.key); + setIsStamp(pos.isStamp); + }, 500); + } + }} + className="dragElm" + style={{ + padding: "0px", + cursor: "all-scroll", + zIndex: 20, + position: "absolute", + borderStyle: "dashed", + width: "150px", + height: "60px", + borderColor: themeColor(), + background: "#daebe0", + textAlign: "center", + justifyContent: "center", + borderWidth: "0.2px", + overflow: "hidden" + }} + > +
{ + e.stopPropagation(); + e.preventDefault(); + + handleDeleteSign(pos.key); + setIsStamp(false); + }} + onClick={(e) => { + e.stopPropagation(); // Prevent further event propagation + }} + style={{ + position: "absolute", + right: 0, + display: "inline-block", + background: themeColor(), + cursor: "pointer", + padding: "0px 10px" + }} + > + x +
+
+ {pos.isStamp ? "stamp" : "signature"} +
+
+ + + ); + })} + + ); + }))} {/* this component for render pdf document is in middle of the component */}
{Array.from(new Array(numPages), (el, index) => ( @@ -984,289 +980,89 @@ function RenderPdf({ ); }) : pdfRequest - ? signerPos.map((data, key) => { - return ( - - {checkSignedSignes(data)} - - ); - }) - : placeholder - ? signerPos.map((data, ind) => { - return ( - - {data.placeHolder.map((placeData, index) => { - return ( - - {placeData.pageNumber === pageNumber && - placeData.pos.map((pos) => { - return ( - - handleTabDrag( - pos.key, - data.signerObjId - ) - } - size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 - }} - lockAspectRatio={ - pos.Width - ? pos.Width / pos.Height - : 2.5 - } - resizeHandleStyles={{ - bottom: { display: "none" }, - right: { display: "none" }, - bottomRight: { display: "block" } - }} - onDragStop={(event, dragElement) => - handleStop( - event, - dragElement, - data.signerObjId, - pos.key - ) - } - default={{ - x: pos.xPosition, - y: pos.yPosition - }} - onResize={( - e, - direction, - ref, - delta, - position - ) => { - handleImageResize( - ref, - pos.key, - data.signerObjId, - position - ); - }} - > -
{ - e.stopPropagation(); - handleDeleteSign( - pos.key, - data.signerObjId - ); - }} - style={{ - position: "absolute", - right: 0, - display: "inline-block", - background: themeColor(), - cursor: "pointer", - padding: "0px 10px", - zIndex: 10 - }} - > - x -
-
- {pos.isStamp - ? "stamp" - : "signature"} -
- - ); - })} - - ); - })} - - ); - }) - : xyPostion.map((data, ind) => { - return ( - - {data.pageNumber === pageNumber && - data.pos.map((pos) => { - return pos && pos.SignUrl ? ( - handleTabDrag(pos.key)} - size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 - }} - onDragStop={handleStop} - default={{ - x: pos.xPosition, - y: pos.yPosition - }} - onResize={( - e, - direction, - ref, - delta, - position - ) => { - handleImageResize( - ref, - pos.key, - direction, - position - ); - }} - onClick={() => { - if (!isDragging) { - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); - } - }} - > -
{ - e.stopPropagation(); - handleDeleteSign(pos.key); - setIsStamp(false); - }} - style={{ - position: "absolute", - right: 0, - display: "inline-block", - background: themeColor(), - cursor: "pointer", - padding: "0px 10px" - }} - > - x -
-
- signimg { - setSignKey(pos.key); - setIsSignPad(true); - setIsStamp(pos.isStamp); - }} - src={pos.SignUrl} - style={{ - width: "100%", - height: "100%", - objectFit: "contain" - }} - /> -
- - ) : ( - handleTabDrag(pos.key, e)} - size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 - }} - onDragStop={handleStop} - default={{ - x: pos.xPosition, - y: pos.yPosition - }} - > -
{ - if (!isDragging) { - e.stopPropagation(); - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); - } - }} + ? signerPos.map((data, key) => { + return ( + + {checkSignedSignes(data)} + + ); + }) + : placeholder + ? signerPos.map((data, ind) => { + return ( + + {data.placeHolder.map((placeData, index) => { + return ( + + {placeData.pageNumber === pageNumber && + placeData.pos.map((pos) => { + return ( + + handleTabDrag(pos.key, data.signerObjId) + } + size={{ + width: pos.Width ? pos.Width : 150, + height: pos.Height ? pos.Height : 60 + }} + lockAspectRatio={ + pos.Width ? pos.Width / pos.Height : 2.5 + } + resizeHandleStyles={{ + bottom: { display: "none" }, + right: { display: "none" }, + bottomRight: { display: "block" } + }} + onDragStop={(event, dragElement) => + handleStop( + event, + dragElement, + data.signerObjId, + pos.key + ) + } + default={{ + x: pos.xPosition, + y: pos.yPosition + }} + onResize={( + e, + direction, + ref, + delta, + position + ) => { + handleImageResize( + ref, + pos.key, + data.signerObjId, + position + ); + }} >
{ e.stopPropagation(); - handleDeleteSign(pos.key); - setIsStamp(false); + handleDeleteSign( + pos.key, + data.signerObjId + ); }} style={{ position: "absolute", @@ -1274,7 +1070,8 @@ function RenderPdf({ display: "inline-block", background: themeColor(), cursor: "pointer", - padding: "0px 10px" + padding: "0px 10px", + zIndex: 10 }} > x @@ -1282,20 +1079,212 @@ function RenderPdf({
{pos.isStamp ? "stamp" : "signature"}
-
- - ); - })} - - ); - }))} + + ); + })} + + ); + })} + + ); + }) + : xyPostion.map((data, ind) => { + return ( + + {data.pageNumber === pageNumber && + data.pos.map((pos) => { + return pos && pos.SignUrl ? ( + handleTabDrag(pos.key)} + size={{ + width: pos.Width ? pos.Width : 150, + height: pos.Height ? pos.Height : 60 + }} + onDragStop={handleStop} + default={{ + x: pos.xPosition, + y: pos.yPosition + }} + onResize={( + e, + direction, + ref, + delta, + position + ) => { + handleImageResize( + ref, + pos.key, + direction, + position + ); + }} + onClick={() => { + if (!isDragging) { + setIsSignPad(true); + setSignKey(pos.key); + setIsStamp(pos.isStamp); + } + }} + > +
{ + e.stopPropagation(); + handleDeleteSign(pos.key); + setIsStamp(false); + }} + style={{ + position: "absolute", + right: 0, + display: "inline-block", + background: themeColor(), + cursor: "pointer", + padding: "0px 10px" + }} + > + x +
+
+ signimg { + setSignKey(pos.key); + setIsSignPad(true); + setIsStamp(pos.isStamp); + }} + src={pos.SignUrl} + style={{ + width: "100%", + height: "100%", + objectFit: "contain" + }} + /> +
+ + ) : ( + handleTabDrag(pos.key, e)} + size={{ + width: pos.Width ? pos.Width : 150, + height: pos.Height ? pos.Height : 60 + }} + onDragStop={handleStop} + default={{ + x: pos.xPosition, + y: pos.yPosition + }} + > +
{ + if (!isDragging) { + e.stopPropagation(); + setIsSignPad(true); + setSignKey(pos.key); + setIsStamp(pos.isStamp); + } + }} + style={{ + cursor: "all-scroll", + zIndex: 10, + position: "absolute", + borderStyle: "dashed", + width: "150px", + height: "60px", + borderColor: themeColor(), + background: "#daebe0", + textAlign: "center", + justifyContent: "center", + alignItems: "center", + borderWidth: "0.2px" + }} + > +
{ + e.stopPropagation(); + handleDeleteSign(pos.key); + setIsStamp(false); + }} + style={{ + position: "absolute", + right: 0, + display: "inline-block", + background: themeColor(), + cursor: "pointer", + padding: "0px 10px" + }} + > + x +
+
+ {pos.isStamp ? "stamp" : "signature"} +
+
+ + ); + })} + + ); + }))} {/* this component for render pdf document is in middle of the component */} {Array.from(new Array(numPages), (el, index) => ( @@ -1337,4 +1326,4 @@ function RenderPdf({ ); } -export default RenderPdf; +export default RenderPdf; \ No newline at end of file