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

Merge pull request #963 from OpenSignLabs/raktima-opensignlabs-patch-11

Browse Source 
fix: text widget font size issue in large PDF documents
This commit is contained in:
prafull-opensignlabs
2024-07-25 16:23:38 +05:30
committed by GitHub
parent 5fb28feb65 76a11f6ee6
commit 0f515bae01
11 changed files with 127 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/components/pdf/Placeholder.js
+9 -6
View File
@@ -4,6 +4,7 @@ import PlaceholderBorder from "./PlaceholderBorder";
import { Rnd } from "react-rnd";
import {
defaultWidthHeight,
getContainerScale,
handleCopyNextToWidget,
isTabAndMobile,
onChangeInput,
@@ -634,10 +635,11 @@ function Placeholder(props) {
);
};
const xPos = (pos, signYourself) => {
const getPdfPageWidth = props.pdfOriginalWH.find(
(data) => data.pageNumber === props.pageNumber
const containerScale = getContainerScale(
props.pdfOriginalWH,
props.pageNumber,
props.containerWH
);
const containerScale = props.containerWH.width / getPdfPageWidth?.width;
const resizePos = pos.xPosition;
if (signYourself) {
return resizePos * containerScale * props.scale;
@@ -659,10 +661,11 @@ function Placeholder(props) {
}
};
const yPos = (pos, signYourself) => {
const getPdfPageWidth = props.pdfOriginalWH.find(
(data) => data.pageNumber === props.pageNumber
const containerScale = getContainerScale(
props.pdfOriginalWH,
props.pageNumber,
props.containerWH
);
const containerScale = props.containerWH.width / getPdfPageWidth.width;
const resizePos = pos.yPosition;
if (signYourself) {
apps/OpenSign/src/components/pdf/PlaceholderBorder.js
+2 -5
View File
@@ -47,14 +47,11 @@ function PlaceholderBorder(props) {
onTouchEnd={() =>
props.pos.type === textWidget && props?.setDraggingEnabled(true)
}
className="absolute inline-block w-[14px] h-[14px] hover:cursor-sw-resize"
className="absolute inline-block w-[14px] h-[14px] border-[0.2px] overflow-hidden border-dashed"
style={{
borderColor: themeColor,
borderStyle: "dashed",
minWidth: handleMinWidth() || 0,
minHeight: handleMinHeight() || 0,
borderWidth: "0.2px",
overflow: "hidden"
minHeight: handleMinHeight() || 0
}}
></div>
);
apps/OpenSign/src/components/pdf/PlaceholderType.js
+20 -19
View File
@@ -140,8 +140,7 @@ function PlaceholderType(props) {
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
<div
className={`${selectWidgetCls} overflow-hidden`}
style={{ fontSize: calculateFontSize() }}
className={`${selectWidgetCls} text-[12px] overflow-hidden`}
onClick={onClick}
ref={ref}
>
@@ -172,12 +171,6 @@ function PlaceholderType(props) {
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [type]);
const calculateFontSize = () => {
const fontSize = 10 + Math.min(props.pos.Width, props.pos.Height) * 0.1;
const size = fontSize ? fontSize : 12;
return size + "px";
};
//function for show checked checkbox
const selectCheckbox = (ind) => {
const res = props.pos.options?.response;
@@ -427,7 +420,8 @@ function PlaceholderType(props) {
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
color: props.pos.options?.fontColor || "black",
overflow: "hidden"
}}
>
<span>{type}</span>
@@ -466,10 +460,7 @@ function PlaceholderType(props) {
})}
</select>
) : (
<div
className={selectWidgetCls}
style={{ fontSize: calculateFontSize() }}
>
<div className="text-[12px] overflow-hidden">
{props.pos?.options?.name ? props.pos.options.name : type}
</div>
);
@@ -528,7 +519,9 @@ function PlaceholderType(props) {
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
color: props.pos.options?.fontColor || "black",
fontFamily: "Arial, sans-serif",
overflow: "hidden"
}}
>
<span>{type}</span>
@@ -570,7 +563,9 @@ function PlaceholderType(props) {
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
color: props.pos.options?.fontColor || "black",
overflow: "hidden",
fontFamily: "Arial, sans-serif"
}}
>
<span>{type}</span>
@@ -612,7 +607,9 @@ function PlaceholderType(props) {
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
color: props.pos.options?.fontColor || "black",
fontFamily: "Arial, sans-serif",
overflow: "hidden"
}}
>
<span>{type}</span>
@@ -678,7 +675,7 @@ function PlaceholderType(props) {
/>
</div>
) : (
<div className="text-[12px] text-black uppercase items-center">
<div className="text-[12px] text-black items-center overflow-hidden">
<span>
{props.selectDate
? props.selectDate?.format
@@ -733,7 +730,8 @@ function PlaceholderType(props) {
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
color: props.pos.options?.fontColor || "black",
fontFamily: "Arial, sans-serif"
}}
cols="50"
/>
@@ -743,7 +741,9 @@ function PlaceholderType(props) {
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
color: props.pos.options?.fontColor || "black",
fontFamily: "Arial, sans-serif",
overflow: "hidden"
}}
>
<span>{type}</span>
@@ -802,6 +802,7 @@ function PlaceholderType(props) {
}}
className={textWidgetCls}
style={{
fontFamily: "Arial, sans-serif",
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
apps/OpenSign/src/components/pdf/RenderPdf.js
+9 -7
View File
@@ -3,6 +3,7 @@ import RSC from "react-scrollbars-custom";
import { Document, Page } from "react-pdf";
import {
defaultWidthHeight,
getContainerScale,
handleImageResize,
handleSignYourselfImageResize
} from "../../constant/Utils";
@@ -68,10 +69,11 @@ function RenderPdf({
// handle signature block width and height according to screen
const posWidth = (pos, signYourself) => {
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
const containerScale = getContainerScale(
pdfOriginalWH,
pageNumber,
containerWH
);
const containerScale = containerWH.width / getPdfPageWidth.width || 1;
const defaultWidth = defaultWidthHeight(pos.type).width;
const posWidth = pos.Width ? pos.Width : defaultWidth;
if (signYourself) {
@@ -97,11 +99,11 @@ function RenderPdf({
}
};
const posHeight = (pos, signYourself) => {
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
const containerScale = getContainerScale(
pdfOriginalWH,
pageNumber,
containerWH
);
const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
const posHeight = pos.Height || defaultWidthHeight(pos.type).height;
if (signYourself) {
return posHeight * scale * containerScale;
apps/OpenSign/src/constant/Utils.js
+34 -4
View File
@@ -7,7 +7,7 @@ import { appInfo } from "./appinfo";
import { saveAs } from "file-saver";
import printModule from "print-js";
export const fontsizeArr = [7, 8, 9, 10, 11, 12, 13, 14, 15, 18];
export const fontsizeArr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28];
export const fontColorArr = ["red", "black", "blue", "yellow"];
export const isMobile = window.innerWidth < 767;
export const isTabAndMobile = window.innerWidth < 1023;
@@ -1249,14 +1249,30 @@ export const changeImageWH = async (base64Image) => {
});
};
//function to calculate font size of text area widgets
const calculateFontSize = (position, containerScale, signyourself) => {
const font = position?.options?.fontSize || 12;
if (!signyourself && position?.isMobile && position?.scale) {
return font / position?.scale / containerScale;
} else {
return font / containerScale;
}
};
//function for embed multiple signature using pdf-lib
export const multiSignEmbed = async (
xyPositionArray,
pdfDoc,
signyourself,
scale
scale,
pdfOriginalWH,
containerWH
) => {
for (let item of xyPositionArray) {
const containerScale = getContainerScale(
pdfOriginalWH,
item?.pageNumber,
containerWH
);
const typeExist = item.pos.some((data) => data?.type);
let updateItem;
@@ -1416,7 +1432,13 @@ export const multiSignEmbed = async (
}
} else if (widgetTypeExist) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = parseInt(position?.options?.fontSize) || 12;
const fontSize = calculateFontSize(
position,
containerScale,
signyourself
);
parseInt(fontSize);
const color = position?.options?.fontColor;
let updateColorInRgb;
if (color === "red") {
@@ -1591,7 +1613,7 @@ export const multiSignEmbed = async (
});
}
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
// console.log("pdf", pdfBytes);
//console.log("pdf", pdfBytes);
return pdfBytes;
};
@@ -2211,3 +2233,11 @@ function getImagePosition(page, image, sizeRatio) {
rotate: page.getRotation()
};
}
//function to use calculate pdf rendering scale in the container
export const getContainerScale = (pdfOriginalWH, pageNumber, containerWH) => {
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
);
const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
return containerScale;
};
apps/OpenSign/src/pages/PdfRequestFiles.js
+11 -10
View File
@@ -678,7 +678,7 @@ function PdfRequestFiles(props) {
widgetKey,
radioExist,
requiredCheckbox,
pageNumber; // `pageNumber` is used to check on which page user did not fill widget's data then change current pageNumber and show tour message on that page
TourPageNumber; // `pageNumber` is used to check on which page user did not fill widget's data then change current pageNumber and show tour message on that page
for (let i = 0; i < checkUser[0].placeHolder.length; i++) {
for (let j = 0; j < checkUser[0].placeHolder[i].pos.length; j++) {
@@ -726,7 +726,7 @@ function PdfRequestFiles(props) {
) {
showAlert = true;
widgetKey = requiredCheckbox[i].key;
pageNumber = updatePage;
TourPageNumber = updatePage;
setminRequiredCount(parseMin);
}
//else condition to validate minimum required checkbox
@@ -737,8 +737,7 @@ function PdfRequestFiles(props) {
if (!showAlert) {
showAlert = true;
widgetKey = requiredCheckbox[i].key;
pageNumber = updatePage;
TourPageNumber = updatePage;
setminRequiredCount(parseMin);
}
}
@@ -764,7 +763,7 @@ function PdfRequestFiles(props) {
if (!checkDefaultSigned && !showAlert) {
showAlert = true;
widgetKey = requiredRadio[i].key;
pageNumber = updatePage;
TourPageNumber = updatePage;
setminRequiredCount(null);
}
}
@@ -792,7 +791,7 @@ function PdfRequestFiles(props) {
if (!checkDefaultSigned && !showAlert) {
showAlert = true;
widgetKey = requiredWidgets[i].key;
pageNumber = updatePage;
TourPageNumber = updatePage;
setminRequiredCount(null);
}
}
@@ -808,15 +807,15 @@ function PdfRequestFiles(props) {
}
if (checkboxExist && requiredCheckbox && showAlert) {
setUnSignedWidgetId(widgetKey);
setPageNumber(pageNumber);
setPageNumber(TourPageNumber);
setWidgetsTour(true);
} else if (radioExist && showAlert) {
setUnSignedWidgetId(widgetKey);
setPageNumber(pageNumber);
setPageNumber(TourPageNumber);
setWidgetsTour(true);
} else if (showAlert) {
setUnSignedWidgetId(widgetKey);
setPageNumber(pageNumber);
setPageNumber(TourPageNumber);
setWidgetsTour(true);
} else {
setIsUiLoading(true);
@@ -862,7 +861,9 @@ function PdfRequestFiles(props) {
pngUrl,
pdfDoc,
isSignYourSelfFlow,
scale
scale,
pdfOriginalWH,
containerWH
);
// console.log("pdfte", pdfBytes);
//get ExistUserPtr object id of user class to get tenantDetails
apps/OpenSign/src/pages/PlaceHolderSign.js
+12 -9
View File
@@ -33,7 +33,8 @@ import {
replaceMailVaribles,
copytoData,
fetchSubscription,
convertPdfArrayBuffer
convertPdfArrayBuffer,
getContainerScale
} from "../constant/Utils";
import RenderPdf from "../components/pdf/RenderPdf";
import { useNavigate } from "react-router-dom";
@@ -452,10 +453,11 @@ function PlaceHolderSign() {
setZIndex(posZIndex);
const signer = signersdata.find((x) => x.Id === uniqueId);
const key = randomId();
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
const containerScale = getContainerScale(
pdfOriginalWH,
pageNumber,
containerWH
);
const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
let dropData = [];
let placeHolder;
const dragTypeValue = item?.text ? item.text : monitor.type;
@@ -676,11 +678,11 @@ function PlaceHolderSign() {
updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace);
const signId = signerId ? signerId : uniqueId; //? signerId : signerObjId;
const keyValue = key ? key : dragKey;
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
const containerScale = getContainerScale(
pdfOriginalWH,
pageNumber,
containerWH
);
const containerScale = containerWH.width / getPdfPageWidth?.width;
if (keyValue >= 0) {
let filterSignerPos;
if (signId) {
@@ -851,13 +853,14 @@ function PlaceHolderSign() {
const pdfDoc = await PDFDocument.load(existingPdfBytes, {
ignoreEncryption: true
});
const isSignYourSelfFlow = false;
try {
const pdfBytes = await multiSignEmbed(
placeholder,
pdfDoc,
isSignYourSelfFlow,
scale,
pdfOriginalWH,
containerWH
);
apps/OpenSign/src/pages/SignyourselfPdf.js
+14 -8
View File
@@ -32,7 +32,8 @@ import {
textInputWidget,
fetchImageBase64,
changeImageWH,
handleSendOTP
handleSendOTP,
getContainerScale
} from "../constant/Utils";
import { useParams } from "react-router-dom";
import Tour from "reactour";
@@ -442,6 +443,7 @@ function SignYourSelf() {
};
//function for setting position after drop signature button over pdf
const addPositionOfSignature = (item, monitor) => {
setCurrWidgetsDetails({});
const key = randomId();
let dropData = [];
let dropObj = {};
@@ -453,10 +455,11 @@ function SignYourSelf() {
const widgetTypeExist = ["name", "company", "job title", "email"].includes(
dragTypeValue
);
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
const containerScale = getContainerScale(
pdfOriginalWH,
pageNumber,
containerWH
);
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
@@ -694,7 +697,9 @@ function SignYourSelf() {
xyPostion,
pdfDoc,
isSignYourSelfFlow,
scale
scale,
pdfOriginalWH,
containerWH
);
// console.log("pdf", pdfBytes);
//function for call to embed signature in pdf and get digital signature pdf
@@ -812,10 +817,11 @@ function SignYourSelf() {
setFontColor();
if (isDragging && dragElement) {
event.preventDefault();
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
const containerScale = getContainerScale(
pdfOriginalWH,
pageNumber,
containerWH
);
const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
if (dragKey >= 0) {
const filterDropPos = xyPostion.filter(
(data) => data.pageNumber === pageNumber
apps/OpenSign/src/pages/TemplatePlaceholder.js
+10 -7
View File
@@ -24,7 +24,8 @@ import {
addWidgetOptions,
textInputWidget,
radioButtonWidget,
fetchSubscription
fetchSubscription,
getContainerScale
} from "../constant/Utils";
import RenderPdf from "../components/pdf/RenderPdf";
import "../styles/AddUser.css";
@@ -364,10 +365,11 @@ const TemplatePlaceholder = () => {
if (signer) {
const posZIndex = zIndex + 1;
setZIndex(posZIndex);
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
const containerScale = getContainerScale(
pdfOriginalWH,
pageNumber,
containerWH
);
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;
@@ -561,10 +563,11 @@ const TemplatePlaceholder = () => {
updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace);
const signId = signerId; //? signerId : signerObjId;
const keyValue = key ? key : dragKey;
const getPdfPageWidth = pdfOriginalWH.find(
(data) => data.pageNumber === pageNumber
const containerScale = getContainerScale(
pdfOriginalWH,
pageNumber,
containerWH
);
const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
if (keyValue >= 0) {
const filterSignerPos = updateSignPos.filter(
(data) => data.Id === signId
apps/OpenSignServer/cloud/parsefunction/GetPublicTemplate.js
+1
View File
@@ -19,6 +19,7 @@ async function GetPublicTemplate(request) {
});
templatQuery.descending('updatedAt');
templatQuery.equalTo('IsPublic', true);
templatQuery.notEqualTo('IsArchive', true);
const getTemplate = await templatQuery.find({ useMasterKey: true });
const extend_Res = await Parse.Cloud.run('getUserDetails', {
apps/OpenSignServer/cloud/parsefunction/PublicUserLinkContactToDoc.js
+5 -5
View File
@@ -54,10 +54,10 @@ const createDocumentFromTemplate = async (template, existContact, index) => {
object.set('Name', template?.Name);
object.set('Description', template?.Description);
object.set('Note', template?.Note);
object.set('TimeToCompleteDays', template.TimeToCompleteDays || 15);
object.set('TimeToCompleteDays', template?.TimeToCompleteDays || 15);
object.set('SendinOrder', template?.SendinOrder);
object.set('AutomaticReminders', template.AutomaticReminders);
object.set('RemindOnceInEvery', template?.RemindOnceInEvery);
object.set('AutomaticReminders', template?.AutomaticReminders || false);
object.set('RemindOnceInEvery', template?.RemindOnceInEvery || 5);
object.set('URL', template?.URL);
object.set('CreatedBy', template?.CreatedBy);
object.set('ExtUserPtr', template?.ExtUserPtr);
@@ -212,11 +212,11 @@ const sendMailToAllSigners = async docId => {
throw new Parse.Error(Parse.Error.OBJECT_NOT_FOUND, 'User not found.');
}
} catch (e) {
console.log('err in create document from template', err);
console.log('error in get partners_Tenant class details', err);
}
}
} catch (e) {
console.log('err in create document from template', err);
console.log('error in sendMailToAllSigners function', err);
}
};