WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-20 06:35:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: widget's position issue after zoomin and zoomout

Browse Source
This commit is contained in:
RaktimaNXG
2024-06-18 14:38:44 +05:30
parent 3642d4f3a3
commit 93d9a761ca
5 changed files with 106 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/components/pdf/Placeholder.js
+53 -4
View File
@@ -562,6 +562,55 @@ function Placeholder(props) {
)
);
};
const xPos = (pos, signYourself) => {
const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
const resizePos = pos.xPosition;
if (signYourself) {
return resizePos * containerScale * props.scale;
} else {
//checking both condition mobile and desktop view
// if (pos.isMobile && pos.scale) {
// if (props.scale > 1) {
// return resizePos * pos.scale * containerScale * props.scale;
// } else {
// return resizePos * pos.scale * containerScale;
// }
// } else {
// if (pos.scale === containerScale) {
// return resizePos * pos.scale * props.scale;
// } else {
// return resizePos * pos.scale * containerScale * props.scale;
// }
// }
return resizePos * containerScale * props.scale;
}
};
const yPos = (pos, signYourself) => {
const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
const resizePos = pos.yPosition;
if (signYourself) {
return resizePos * containerScale * props.scale;
} else {
// checking both condition mobile and desktop view
// if (pos.isMobile && pos.scale) {
// if (props.scale > 1) {
// return resizePos * pos.scale * containerScale * props.scale;
// } else {
// return resizePos * pos.scale * containerScale;
// }
// } else if (pos.scale === containerScale) {
// if (props.scale > 1) {
// return resizePos * pos.scale * props.scale;
// } else {
// return resizePos * pos.scale;
// }
// } else {
// return resizePos * containerScale;
// }
return resizePos * containerScale * props.scale;
}
};
return (
<Rnd
@@ -674,8 +723,8 @@ function Placeholder(props) {
props.handleStop(event, dragElement, props.data?.Id, props.pos?.key)
}
position={{
x: props.xPos(props.pos, props.isSignYourself),
y: props.yPos(props.pos, props.isSignYourself)
x: xPos(props.pos, props.isSignYourself),
y: yPos(props.pos, props.isSignYourself)
}}
onResize={(e, direction, ref) => {
setPlaceholderBorder({
@@ -719,8 +768,8 @@ function Placeholder(props) {
<div
// className="sm:inline-block md:inline-block lg:hidden "
style={{
left: props.xPos(props.pos, props.isSignYourself),
top: props.yPos(props.pos, props.isSignYourself),
left: xPos(props.pos, props.isSignYourself),
top: yPos(props.pos, props.isSignYourself),
width:
props.pos.type === radioButtonWidget ||
props.pos.type === "checkbox"
apps/OpenSign/src/components/pdf/PlaceholderType.js
+21 -22
View File
@@ -150,27 +150,27 @@ function PlaceholderType(props) {
));
ExampleCustomInput.displayName = "ExampleCustomInput";
// useEffect(() => {
// if (
// ["name", "email", "job title", "company"].includes(type) &&
// props.isNeedSign &&
// props.data?.signerObjId === props.signerObjId
// ) {
// const isDefault = true;
// const senderUser = localStorage.getItem(`Extand_Class`);
// const jsonSender = JSON.parse(senderUser);
// onChangeInput(
// jsonSender && jsonSender[0],
// null,
// props.xyPostion,
// null,
// props.setXyPostion,
// props.data.Id,
// isDefault
// );
// }
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [type]);
useEffect(() => {
if (
["name", "email", "job title", "company"].includes(type) &&
props.isNeedSign &&
props.data?.signerObjId === props.signerObjId
) {
const isDefault = true;
const senderUser = localStorage.getItem(`Extand_Class`);
const jsonSender = JSON.parse(senderUser);
onChangeInput(
jsonSender && jsonSender[0],
null,
props.xyPostion,
null,
props.setXyPostion,
props.data.Id,
isDefault
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [type]);
const calculateFontSize = () => {
const fontSize = 10 + Math.min(props.pos.Width, props.pos.Height) * 0.1;
@@ -319,7 +319,6 @@ function PlaceholderType(props) {
props?.data?.Role,
props?.pos?.type
)}
{/* {props.xPos(props.pos, props.isSignYourself)} */}
</div>
);
case "stamp":
apps/OpenSign/src/components/pdf/RenderPdf.js
+20 -93
View File
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState } from "react";
import RSC from "react-scrollbars-custom";
import { Document, Page } from "react-pdf";
import {
@@ -58,7 +58,6 @@ function RenderPdf({
setTempSignerId,
uniqueId,
setPdfRenderHeight,
isResize,
pdfOriginalWH,
scale
}) {
@@ -121,90 +120,24 @@ function RenderPdf({
}
}
};
const xPos = (pos, signYourself) => {
const containerScale = containerWH.width / pdfOriginalWH.width;
const resizePos = pos.xPosition;
if (signYourself) {
return resizePos * containerScale * scale;
} else {
//checking both condition mobile and desktop view
if (pos.isMobile && pos.scale) {
if (scale > 1) {
return resizePos * pos.scale * containerScale * scale;
} else {
return resizePos * pos.scale * containerScale;
}
} else if (pos.scale === containerScale) {
if (scale > 1) {
return resizePos * pos.scale * scale;
} else {
return resizePos * pos.scale;
}
} else {
if (pos.scale === containerScale) {
if (scale > 1) {
return resizePos * pos.scale * scale;
} else {
return resizePos * pos.scale;
}
} else {
return resizePos * containerScale;
}
}
}
};
const yPos = (pos, signYourself) => {
const containerScale = containerWH.width / pdfOriginalWH.width;
const resizePos = pos.yPosition;
if (signYourself) {
// if (pos.scale === containerScale) {
// if (scale > 1) {
// return resizePos * pos.scale * scale;
// } else {
// return resizePos * pos.scale;
// }
// } else {
return resizePos * containerScale * scale;
// }
} else {
// checking both condition mobile and desktop view
if (pos.isMobile && pos.scale) {
if (scale > 1) {
return resizePos * pos.scale * containerScale * scale;
} else {
return resizePos * pos.scale * containerScale;
}
} else if (pos.scale === containerScale) {
if (scale > 1) {
return resizePos * pos.scale * scale;
} else {
return resizePos * pos.scale;
}
} else {
return resizePos * containerScale;
}
}
};
//function for render placeholder block over pdf document
const CheckSignedSignes = ({ data }) => {
const checkSignedSignes = (data) => {
let checkSign = [];
//condition to handle quick send flow and using normal request sign flow
checkSign = signedSigners.filter(
(sign) => sign?.Id === data?.Id || sign?.objectId === data?.signerObjId
);
useEffect(() => {
if (data.signerObjId === signerObjectId) {
setCurrentSigner(true);
}
}, [data.signerObjId]);
checkSign = signedSigners
? signedSigners?.filter(
(sign) =>
sign?.Id === data?.Id || sign?.objectId === data?.signerObjId
)
: [];
if (data.signerObjId === signerObjectId) {
setCurrentSigner(true);
}
const handleAllUserName = (Id, Role, type) => {
return (
<React.Fragment>
<div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
<div className="text-black text-[8px] font-bold">
{
pdfDetails[0].Signers?.find(
(signer) => signer.objectId === data.signerObjId
@@ -241,14 +174,11 @@ function RenderPdf({
setXyPostion={setSignerPos}
data={data}
setIsResize={setIsResize}
isResize={isResize}
isShowBorder={false}
signerObjId={signerObjectId}
isShowDropdown={true}
isNeedSign={true}
isSignYourself={false}
xPos={xPos}
yPos={yPos}
posWidth={posWidth}
posHeight={posHeight}
handleUserName={handleAllUserName}
@@ -260,6 +190,7 @@ function RenderPdf({
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
setCurrWidgetsDetails={setCurrWidgetsDetails}
uniqueId={uniqueId}
scale={scale}
containerWH={containerWH}
pdfOriginalWH={pdfOriginalWH}
@@ -273,7 +204,6 @@ function RenderPdf({
})
);
};
//function for render placeholder block over pdf document
const handleUserName = (Id, Role, type) => {
@@ -324,11 +254,13 @@ function RenderPdf({
id="container"
>
{isLoadPdf &&
containerWH?.width &&
pdfOriginalWH?.width &&
(pdfRequest
? signerPos.map((data, key) => {
return (
<React.Fragment key={key}>
<CheckSignedSignes data={data} />
{checkSignedSignes(data)}
</React.Fragment>
);
})
@@ -367,8 +299,6 @@ function RenderPdf({
handleLinkUser={handleLinkUser}
handleUserName={handleUserName}
isSignYourself={false}
xPos={xPos}
yPos={yPos}
posWidth={posWidth}
posHeight={posHeight}
isDragging={isDragging}
@@ -387,6 +317,7 @@ function RenderPdf({
handleTextSettingModal={
handleTextSettingModal
}
scale={scale}
containerWH={containerWH}
pdfOriginalWH={pdfOriginalWH}
/>
@@ -424,8 +355,6 @@ function RenderPdf({
setIsSignPad={setIsSignPad}
isShowBorder={true}
isSignYourself={true}
xPos={xPos}
yPos={yPos}
posWidth={posWidth}
posHeight={posHeight}
pdfDetails={pdfDetails[0]}
@@ -511,11 +440,13 @@ function RenderPdf({
id="container"
>
{isLoadPdf &&
containerWH?.width &&
pdfOriginalWH?.width &&
(pdfRequest
? signerPos?.map((data, key) => {
return (
<React.Fragment key={key}>
<CheckSignedSignes data={data} />
{checkSignedSignes(data)}
</React.Fragment>
);
})
@@ -554,8 +485,6 @@ function RenderPdf({
handleLinkUser={handleLinkUser}
handleUserName={handleUserName}
isSignYourself={false}
xPos={xPos}
yPos={yPos}
posWidth={posWidth}
posHeight={posHeight}
isDragging={isDragging}
@@ -612,8 +541,6 @@ function RenderPdf({
setIsSignPad={setIsSignPad}
isShowBorder={true}
isSignYourself={true}
xPos={xPos}
yPos={yPos}
posWidth={posWidth}
posHeight={posHeight}
pdfDetails={pdfDetails[0]}
apps/OpenSign/src/components/pdf/Signedby.js
+3 -7
View File
@@ -7,18 +7,14 @@ function Signedby({ pdfDetails }) {
};
return (
<div className="hidden md:block w-[180px] h-full bg-base-100">
<div className="hidden md:block w-full h-full bg-base-100">
<div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
Signed By
</div>
<div className="mt-[2px] bg-base-100">
<div className="bg-[#93a3db] rounded-xl mx-1 flex flex-row items-center py-[10px]">
<div
className=" bg-[#abd1d0] w-[15px] h-[15px] 2xl:w-[30px] 2xl:h-[30px] flex rounded-full ring-[1px] ring-offset-1 justify-center items-center
mr-[0px] mt-[7px] 2xl:mt-[12px]
"
>
<span className="text-[12px] text-center font-bold text-white 2xl:text-[20px] uppercase">
<div className="bg-[#576081] flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1">
<span className="text-[12px] text-center font-bold text-white uppercase">
{getFirstLetter(pdfDetails.ExtUserPtr.Name)}
</span>
</div>
apps/OpenSign/src/pages/SignyourselfPdf.js
+9 -5
View File
@@ -1181,7 +1181,7 @@ function SignYourSelf() {
</div>
)}
{/* <div className="min-h-screen relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"> */}
<div className="flex min-h-screen flex-row justify-center bg-[#EBEBEB]">
<div className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300">
{!isEmailVerified && (
<VerifyEmail
isVerifyModal={isVerifyModal}
@@ -1218,7 +1218,7 @@ function SignYourSelf() {
pageNumber={pageNumber}
containerWH={containerWH}
/>
<div className="min-h-screen w-full md:w-[57%] flex mr-4">
<div className=" w-full md:w-[57%] flex mr-4">
<PdfZoom
setScale={setScale}
scale={scale}
@@ -1227,7 +1227,7 @@ function SignYourSelf() {
setZoomPercent={setZoomPercent}
zoomPercent={zoomPercent}
/>
<div className="min-h-screen w-full md:w-[95%] ">
<div className=" w-full md:w-[95%] ">
<ModalUi
isOpen={isAlert.isShow}
title={isAlert?.header || "Alert"}
@@ -1333,7 +1333,11 @@ function SignYourSelf() {
setIsEmail={setIsEmail}
isCompleted={isCompleted}
/>
<div ref={divRef} data-tut="reactourSecond" className="h-[95%]">
<div
ref={divRef}
data-tut="reactourSecond"
className="h-full md:h-[95%]"
>
{containerWH?.width && containerWH?.height && (
<RenderPdf
pageNumber={pageNumber}
@@ -1381,7 +1385,7 @@ function SignYourSelf() {
</div>
<div
className={` md:w-[23%] bg-[#FFFFFF] min-h-screen overflow-y-auto hide-scrollbar`}
className={`w-full md:w-[23%] bg-[#FFFFFF] min-h-screen overflow-y-auto hide-scrollbar`}
>
<div className={`max-h-screen`}>
{!isCompleted ? (