-
{
- setIsChecked(e.target.checked);
- if (e.target.checked) {
- props.setIsAgreeTour(false);
- }
- props.showFirstWidget();
- }}
- />
+
{t("agree-p1")}
)}
- {props.type !== "checkbox" && props.type !== radioButtonWidget && (
+ {props.type !== "checkbox" && (
<>
{statusArr.map((data, ind) => {
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.jsx b/apps/OpenSign/src/components/pdf/WidgetComponent.jsx
index 4e6671a1c4..2cc92381d1 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.jsx
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.jsx
@@ -241,6 +241,7 @@ function WidgetComponent(props) {
handleDivClick={props.handleDivClick}
handleMouseLeave={props.handleMouseLeave}
signRef={signRef}
+ addPositionOfSignature={props.addPositionOfSignature}
/>
diff --git a/apps/OpenSign/src/components/pdf/WidgetNameModal.jsx b/apps/OpenSign/src/components/pdf/WidgetNameModal.jsx
index 33ce83a0db..a9779c90ec 100644
--- a/apps/OpenSign/src/components/pdf/WidgetNameModal.jsx
+++ b/apps/OpenSign/src/components/pdf/WidgetNameModal.jsx
@@ -83,6 +83,19 @@ const WidgetNameModal = (props) => {
props.handleData(data, props.defaultdata?.type);
}
} else {
+ const isTextInput = props.defaultdata?.type === textInputWidget;
+ const { isReadOnly, defaultValue, status } = formdata;
+ // If it’s a text‐input widget, enforce that read-only fields have
+ // either a defaultValue or an "optional" status.
+ if (isTextInput) {
+ const readOnlyWithoutValue =
+ isReadOnly && !defaultValue && status !== "optional";
+
+ if (readOnlyWithoutValue) {
+ alert(t("readonly-textinput-error"));
+ return;
+ }
+ }
props.handleData(formdata);
}
setFormdata({
diff --git a/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx b/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx
index f7e1ab2c4a..44d78d2d72 100644
--- a/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx
+++ b/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx
@@ -14,7 +14,6 @@ import {
onSaveSign,
radioButtonWidget,
selectCheckbox,
- signatureTypes,
textInputWidget,
textWidget,
years
@@ -85,7 +84,8 @@ function WidgetsValueModal(props) {
setXyPosition,
isSave,
setUniqueId,
- tempSignerId
+ tempSignerId,
+ signatureTypes
} = props;
const [penColor, setPenColor] = useState("blue");
const [isOptional, setIsOptional] = useState(true);
@@ -400,7 +400,7 @@ function WidgetsValueModal(props) {
if (getIndex !== -1) {
setIsSignTypes(true);
- const tab = signatureTypes[getIndex].name;
+ const tab = signatureTypes?.[getIndex].name;
if (tab === "draw") {
setIsTab("draw");
setSignatureType("draw");
@@ -427,7 +427,7 @@ function WidgetsValueModal(props) {
}
}
function isTabEnabled(tabName) {
- const isEnabled = signatureTypes.find((x) => x.name === tabName)?.enabled;
+ const isEnabled = signatureTypes?.find((x) => x.name === tabName)?.enabled;
return isEnabled;
}
@@ -683,51 +683,64 @@ function WidgetsValueModal(props) {
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isTab]);
- //function for convert input text value in image
+ // function for convert input text value in image
const convertToImg = async (fontStyle, text, color) => {
- //get text content to convert in image
- const textContent = text;
- const fontfamily = fontStyle
- ? fontStyle
- : fontSelect
- ? fontSelect
- : "Fasthand";
- const fontSizeValue = "40px";
- //creating span for getting text content width
+ // 1) Read the max widget dimensions:
+ const maxWidth = currWidgetsDetails.Width; // e.g. 150 px
+ const maxHeight = currWidgetsDetails.Height; // e.g. 40 px
+
+ // 2) Pick a “baseline” font size for measurement:
+ const baselineFontSizePx = 40;
+ const chosenFontFamily = fontStyle || fontSelect || "Fasthand";
+ const fillColor = color || penColor;
+
+ // 3) Create a temporary
(hidden) to measure the text at 40px:
const span = document.createElement("span");
- span.textContent = textContent;
- span.style.font = `${fontSizeValue} ${fontfamily}`; // here put your text size and font family
- span.style.color = color ? color : penColor;
- span.style.display = "hidden";
- document.body.appendChild(span); // Replace 'container' with the ID of the container element
+ span.textContent = text;
+ span.style.font = `${baselineFontSizePx}px ${chosenFontFamily}`;
+ span.style.visibility = "hidden"; // keep it in the DOM so offsetWidth/Height works
+ span.style.whiteSpace = "nowrap"; // so we measure a single line
+ document.body.appendChild(span);
+
+ // Measured size at 40px:
+ const measuredWidth = span.offsetWidth;
+ const measuredHeight = span.offsetHeight;
+ document.body.removeChild(span);
- //create canvas to render text in canvas and convert in image
- const canvasElement = document.createElement("canvas");
- // Draw the text content on the canvas
- const ctx = canvasElement.getContext("2d");
+ // 4) Compute uniform scale so that 40px‐sized text fits inside (maxWidth × maxHeight):
+ const scaleX = maxWidth / measuredWidth;
+ const scaleY = maxHeight / measuredHeight;
+ const scale = Math.min(scaleX, scaleY, 1); // never scale up beyond 1
+
+ // 5) Final text size in **CSS px**:
+ const finalFontSizePx = baselineFontSizePx * scale;
+
+ // 6) Create a