WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-29 03:09:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: placeholder resize issue in mobile view

Browse Source
This commit is contained in:
RaktimaNXG
2023-12-28 17:30:08 +05:30
parent dc40b04a18
commit 92d3a85147
3 changed files with 268 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/component/placeholderBorder.js
+6 -2
View File
@@ -16,8 +16,12 @@ function PlaceholderBorder(props) {
// height: props.pos.Height
// ? props.pos.Height + getResizeBorderExtraWidth
// : 60 + getResizeBorderExtraWidth,
width: props?.posWidth(props.pos) + getResizeBorderExtraWidth,
height: props?.posHeight(props.pos) + getResizeBorderExtraWidth,
width:
props?.posWidth(props.pos, props?.isSignYourself) +
getResizeBorderExtraWidth,
height:
props?.posHeight(props.pos, props?.isSignYourself) +
getResizeBorderExtraWidth,
borderWidth: "0.2px",
overflow: "hidden"
}}
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+181 -139
View File
@@ -63,116 +63,134 @@ function RenderPdf({
const isGuestSigner = localStorage.getItem("isGuestSigner");
// handle signature block width and height according to screen
const posWidth = (pos) => {
const posWidth = (pos, signYourself) => {
const defaultWidth = 150;
const posWidth = pos.Width ? pos.Width : defaultWidth;
let width;
if (isMobile) {
if (!pos.isMobile) {
if (pos.IsResize) {
width = posWidth ? posWidth : defaultWidth;
return width;
} else {
width = (posWidth || defaultWidth) / scale;
return width;
}
} else {
width = posWidth ? posWidth : defaultWidth;
return width;
}
if (signYourself) {
width = posWidth;
return width;
} else {
if (pos.isMobile) {
if (pos.IsResize) {
width = posWidth ? posWidth : defaultWidth;
return width;
if (isMobile) {
if (!pos.isMobile) {
if (pos.IsResize) {
width = posWidth ? posWidth : defaultWidth;
return width;
} else {
width = (posWidth || defaultWidth) / scale;
return width;
}
} else {
width = (posWidth || defaultWidth) * pos.scale;
width = posWidth;
return width;
}
} else {
width = posWidth ? posWidth : defaultWidth;
return width;
if (pos.isMobile) {
if (pos.IsResize) {
width = posWidth ? posWidth : defaultWidth;
return width;
} else {
width = (posWidth || defaultWidth) * pos.scale;
return width;
}
} else {
width = posWidth ? posWidth : defaultWidth;
return width;
}
}
}
};
const posHeight = (pos) => {
const posHeight = (pos, signYourself) => {
let height;
const posHeight = pos.Height;
const defaultHeight = 60;
if (isMobile) {
if (!pos.isMobile) {
if (pos.IsResize) {
height = posHeight ? posHeight : defaultHeight;
return height;
} else {
height = (posHeight || defaultHeight) / scale;
return height;
}
} else {
height = posHeight ? posHeight : defaultHeight;
return height;
}
if (signYourself) {
height = posHeight ? posHeight : defaultHeight;
return height;
} else {
if (pos.isMobile) {
if (pos.IsResize) {
height = posHeight ? posHeight : defaultHeight;
return height;
if (isMobile) {
if (!pos.isMobile) {
if (pos.IsResize) {
height = posHeight ? posHeight : defaultHeight;
return height;
} else {
height = (posHeight || defaultHeight) / scale;
return height;
}
} else {
height = (posHeight || defaultHeight) * pos.scale;
height = posHeight ? posHeight : defaultHeight;
return height;
}
} else {
height = posHeight ? posHeight : defaultHeight;
return height;
if (pos.isMobile) {
if (pos.IsResize) {
height = posHeight ? posHeight : defaultHeight;
return height;
} else {
height = (posHeight || defaultHeight) * pos.scale;
return height;
}
} else {
height = posHeight ? posHeight : defaultHeight;
return height;
}
}
}
};
const xPos = (pos) => {
const xPos = (pos, signYourself) => {
const resizePos = pos.xPosition;
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (!pos.isMobile) {
return resizePos / scale;
}
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
else {
return resizePos * (pos.scale / scale);
}
if (signYourself) {
return resizePos;
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (!pos.isMobile) {
return resizePos / scale;
}
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
else {
return resizePos * (pos.scale / scale);
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
return pos.scale && resizePos * pos.scale;
}
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
else {
return resizePos;
if (pos.isMobile) {
return pos.scale && resizePos * pos.scale;
}
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
else {
return resizePos;
}
}
}
};
const yPos = (pos) => {
const yPos = (pos, signYourself) => {
const resizePos = pos.yPosition;
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (!pos.isMobile) {
return resizePos / scale;
}
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
else {
return resizePos * (pos.scale / scale);
}
if (signYourself) {
return resizePos;
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (!pos.isMobile) {
return resizePos / scale;
}
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
else {
return resizePos * (pos.scale / scale);
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
return pos.scale && resizePos * pos.scale;
}
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
else {
return resizePos;
if (pos.isMobile) {
return pos.scale && resizePos * pos.scale;
}
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
else {
return resizePos;
}
}
}
};
@@ -225,11 +243,19 @@ function RenderPdf({
width: posWidth(pos),
height: posHeight(pos)
}}
onClick={() => {
if (data.signerObjId === signerObjectId) {
setIsSignPad(true);
setSignKey(pos.key);
setIsStamp(pos.isStamp);
}
}}
onResize={(e, direction, ref, delta, position) => {
e.stopPropagation();
handleImageResize(
ref,
pos.key,
data.signerObjId,
data.Id,
position,
signerPos,
pageNumber,
@@ -246,13 +272,6 @@ function RenderPdf({
x: xPos(pos),
y: yPos(pos)
}}
onClick={() => {
if (data.signerObjId === signerObjectId) {
setIsSignPad(true);
setSignKey(pos.key);
setIsStamp(pos.isStamp);
}
}}
>
<div style={{ pointerEvents: "none" }}>
{data.signerObjId === signerObjectId && (
@@ -366,7 +385,9 @@ function RenderPdf({
(sign) => sign.objectId === signerId
);
if (checkSign.length > 0) {
return <p style={{ color: "black", fontSize: 11 }}> {checkSign[0].Name} </p>;
return (
<p style={{ color: "black", fontSize: 11 }}> {checkSign[0].Name} </p>
);
} else {
return <p style={{ color: "black", fontSize: 11 }}> {Role} </p>;
}
@@ -450,8 +471,6 @@ function RenderPdf({
lockAspectRatio={
pos.Width ? pos.Width / pos.Height : 2.5
}
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
default={{
x: xPos(pos),
y: yPos(pos)
@@ -520,6 +539,7 @@ function RenderPdf({
placeData.pos.map((pos) => {
return (
<Rnd
bounds="parent"
enableResizing={{
top: false,
right: false,
@@ -586,19 +606,23 @@ function RenderPdf({
handleImageResize(
ref,
pos.key,
data.signerObjId,
data.Id,
position,
signerPos,
pageNumber,
setSignerPos,
pdfOriginalWidth,
containerWH,
false
true
);
}}
>
<BorderResize right={-12} top={-11} />
<PlaceholderBorder pos={pos} posWidth={posWidth} posHeight={posHeight}/>
<PlaceholderBorder
pos={pos}
posWidth={posWidth}
posHeight={posHeight}
/>
<div
onTouchEnd={() => {
const dataNewPlace = addZIndex(
@@ -618,21 +642,21 @@ function RenderPdf({
}}
>
<i
className="fa-regular fa-user signUserIcon"
onTouchEnd={(e) => {
e.stopPropagation();
handleLinkUser(data.Id);
setUniqueId(data.Id);
}}
onClick={(e) => {
e.stopPropagation();
handleLinkUser(data.Id);
setUniqueId(data.Id);
}}
style={{
color: "#188ae2"
}}
></i>
className="fa-regular fa-user signUserIcon"
onTouchEnd={(e) => {
e.stopPropagation();
handleLinkUser(data.Id);
setUniqueId(data.Id);
}}
onClick={(e) => {
e.stopPropagation();
handleLinkUser(data.Id);
setUniqueId(data.Id);
}}
style={{
color: "#188ae2"
}}
></i>
<i
className="fa-regular fa-copy signCopy"
onTouchEnd={(e) => {
@@ -640,14 +664,14 @@ function RenderPdf({
setIsPageCopy(true);
setSignKey(pos.key);
setSignerObjId(data.signerObjId);
setUniqueId(data.Id)
setUniqueId(data.Id);
}}
onClick={(e) => {
e.stopPropagation();
setIsPageCopy(true);
setSignKey(pos.key);
setSignerObjId(data.signerObjId);
setUniqueId(data.Id)
setUniqueId(data.Id);
}}
style={{
color: "#188ae2"
@@ -735,12 +759,12 @@ function RenderPdf({
background: "#daebe0"
}}
size={{
width: pos.Width ? pos.Width : 150,
height: pos.Height ? pos.Height : 60
width: posWidth(pos, true),
height: posHeight(pos, true)
}}
default={{
x: pos.xPosition,
y: pos.yPosition
x: xPos(pos, true),
y: yPos(pos, true)
}}
onDrag={() => handleTabDrag(pos.key)}
onDragStop={handleStop}
@@ -775,7 +799,12 @@ function RenderPdf({
}}
>
<BorderResize right={-12} top={-11} />
<PlaceholderBorder pos={pos} posWidth={posWidth} posHeight={posHeight}/>
<PlaceholderBorder
pos={pos}
posWidth={posWidth}
isSignYourself={true}
posHeight={posHeight}
/>
<div
onTouchEnd={(e) => {
if (!isDragging && isMobile) {
@@ -1085,8 +1114,8 @@ function RenderPdf({
className="signYourselfBlock"
onDrag={() => handleTabDrag(pos.key)}
size={{
width: pos.Width ? pos.Width : 150,
height: pos.Height ? pos.Height : 60
width: posWidth(pos),
height: posHeight(pos)
}}
lockAspectRatio={
pos.Width
@@ -1095,17 +1124,21 @@ function RenderPdf({
}
onDragStop={
(event, dragElement) =>
handleStop(
event,
dragElement,
data.Id,
pos.key
)
// data.signerObjId,
handleStop(
event,
dragElement,
data.Id,
pos.key
)
// data.signerObjId,
}
// default={{
// x: pos.xPosition,
// y: pos.yPosition
// }}
default={{
x: pos.xPosition,
y: pos.yPosition
x: xPos(pos),
y: yPos(pos)
}}
onResizeStart={() => {
setIsResize(true);
@@ -1120,11 +1153,11 @@ function RenderPdf({
delta,
position
) => {
e.stopPropagation()
e.stopPropagation();
handleImageResize(
ref,
pos.key,
data.Id,//data.signerObjId,
data.Id, //data.signerObjId,
position,
signerPos,
pageNumber,
@@ -1136,9 +1169,13 @@ function RenderPdf({
}}
>
<BorderResize right={-12} top={-11} />
<PlaceholderBorder pos={pos} posWidth={posWidth} posHeight={posHeight}/>
<PlaceholderBorder
pos={pos}
posWidth={posWidth}
posHeight={posHeight}
/>
<div>
<i
<i
className="fa-regular fa-user signUserIcon"
onClick={(e) => {
e.stopPropagation();
@@ -1146,7 +1183,7 @@ function RenderPdf({
setUniqueId(data.Id);
}}
style={{
color: "#188ae2"
color: "#188ae2"
}}
></i>
<i
@@ -1155,7 +1192,7 @@ function RenderPdf({
e.stopPropagation();
setIsPageCopy(true);
setSignKey(pos.key);
setUniqueId(data.Id)
setUniqueId(data.Id);
setSignerObjId(
data.signerObjId
);
@@ -1245,6 +1282,13 @@ function RenderPdf({
x: pos.xPosition,
y: pos.yPosition
}}
onClick={() => {
if (!isDragging) {
setIsSignPad(true);
setSignKey(pos.key);
setIsStamp(pos.isStamp);
}
}}
onResize={(
e,
direction,
@@ -1252,6 +1296,7 @@ function RenderPdf({
delta,
position
) => {
e.stopPropagation();
handleSignYourselfImageResize(
ref,
pos.key,
@@ -1264,16 +1309,13 @@ function RenderPdf({
containerWH
);
}}
onClick={() => {
if (!isDragging) {
setIsSignPad(true);
setSignKey(pos.key);
setIsStamp(pos.isStamp);
}
}}
>
<BorderResize right={-12} top={-11} />
<PlaceholderBorder pos={pos} posWidth={posWidth} posHeight={posHeight}/>
<PlaceholderBorder
pos={pos}
posWidth={posWidth}
posHeight={posHeight}
/>
<PlaceholderDesign pos={pos} />
</Rnd>
)
microfrontends/SignDocuments/src/utils/Utils.js
+81 -82
View File
@@ -673,92 +673,91 @@ export const handleImageResize = (
// (data) => data.signerObjId === signerId
// );
const filterSignerPos = signerPos.filter(
(data) => data.Id === signerId
);
const filterSignerPos = signerPos.filter((data) => data.Id === signerId);
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos.filter(
(data, ind) => data.key === key && data.Width && data.Height
);
if (getXYdata.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === key) {
return {
...url,
Width: ref.offsetWidth,
Height: ref.offsetHeight,
IsResize: showResize ? true : false
};
}
return url;
});
// const getXYdata = getPageNumer[0].pos.filter(
// (data, ind) => data.key === key && data.Width && data.Height
// );
// if (getXYdata.length > 0) {
// const getXYdata = getPageNumer[0].pos;
// const getPosData = getXYdata;
// const addSignPos = getPosData.map((url, ind) => {
// if (url.key === key) {
// return {
// ...url,
// Width: ref.offsetWidth,
// Height: ref.offsetHeight,
// IsResize: showResize ? true : false
// };
// }
// return url;
// });
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
// const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
// if (obj.pageNumber === pageNumber) {
// return { ...obj, pos: addSignPos };
// }
// return obj;
// });
// const newUpdateSigner = signerPos.map((obj, ind) => {
// if (obj.signerObjId === signerId) {
// return { ...obj, placeHolder: newUpdateSignPos };
// }
// return obj;
// });
// // const newUpdateSigner = signerPos.map((obj, ind) => {
// // if (obj.signerObjId === signerId) {
// // return { ...obj, placeHolder: newUpdateSignPos };
// // }
// // return obj;
// // });
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.Id === signerId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
} else {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === key) {
return {
...url,
Width: ref.offsetWidth,
Height: ref.offsetHeight,
IsResize: showResize ? true : false
};
}
return url;
});
// const newUpdateSigner = signerPos.map((obj, ind) => {
// if (obj.Id === signerId) {
// return { ...obj, placeHolder: newUpdateSignPos };
// }
// return obj;
// });
// setSignerPos(newUpdateSigner);
// } else {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === key) {
return {
...url,
Width: ref.offsetWidth,
Height: ref.offsetHeight,
IsResize: showResize ? true : false
};
}
return url;
});
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
// const newUpdateSigner = signerPos.map((obj, ind) => {
// if (obj.signerObjId === signerId) {
// return { ...obj, placeHolder: newUpdateSignPos };
// }
// return obj;
// });
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.Id === signerId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
// const newUpdateSigner = signerPos.map((obj, ind) => {
// if (obj.signerObjId === signerId) {
// return { ...obj, placeHolder: newUpdateSignPos };
// }
// return obj;
// });
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.Id === signerId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
}
setSignerPos(newUpdateSigner);
}
// }
}
};
@@ -987,20 +986,20 @@ export const createDocument = async (template, placeholders, signerData) => {
if (template && template.length > 0) {
const Doc = template[0];
let placeholdersArr = []
if(placeholders?.length > 0 ){
placeholdersArr= placeholders
let placeholdersArr = [];
if (placeholders?.length > 0) {
placeholdersArr = placeholders;
}
let signers = []
if(signerData?.length > 0){
signerData.forEach((x) => {
if(x.objectId){
const obj = {
let signers = [];
if (signerData?.length > 0) {
signerData.forEach((x) => {
if (x.objectId) {
const obj = {
__type: "Pointer",
className: "contracts_Contactbook",
objectId: x.objectId
};
signers.push(obj)
signers.push(obj);
}
});
}