- {props?.selectDate?.format ||
+ {(defaultData !== "today" && defaultData) ||
+ (response !== "today" && response) ||
+ props?.selectDate?.format ||
props.pos?.options?.validation?.format ||
"MM/dd/yyyy"}
diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.jsx b/apps/OpenSign/src/components/pdf/RenderPdf.jsx
index eb150e6dc..95b44fdac 100644
--- a/apps/OpenSign/src/components/pdf/RenderPdf.jsx
+++ b/apps/OpenSign/src/components/pdf/RenderPdf.jsx
@@ -12,7 +12,9 @@ import {
getContainerScale,
handleImageResize,
handleSignYourselfImageResize,
- isMobile
+ isMobile,
+ textInputWidget,
+ textWidget
} from "../../constant/Utils";
import Placeholder from "./Placeholder";
import Alert from "../../primitives/Alert";
@@ -44,6 +46,20 @@ function RenderPdf(props) {
const isOpen = useSelector((state) => state.sidebar.isOpen);
const scrollRef = useRef(null);
const pdfContainerRef = useRef(null);
+
+ // Refs for drawing Text Input widget — avoids re-rendering the full tree on
+ // every pointermove event. Only isDrawing (a boolean) is kept in React state
+ // so that the overlay div is mounted/unmounted; coordinates are stored in
+ // refs and the overlay style is updated imperatively via drawingOverlayRef.
+ const [isDrawing, setIsDrawing] = useState(false);
+ const isDrawingRef = useRef(false);
+ const drawStartRef = useRef(null);
+ const drawEndRef = useRef(null);
+ const drawingOverlayRef = useRef(null);
+ // Ref flag to suppress the click event that fires after pointerup when a
+ // widget was just drawn, preventing the Document onClick from deselecting it.
+ const justDrewRef = useRef(false);
+
useEffect(() => {
dispatch(toggleSidebar(false));
return () => {
@@ -311,6 +327,125 @@ function RenderPdf(props) {
setScaledHeight(scaleHeight);
}
};
+
+ // Handle drawing Text Input widget on PDF
+ const handlePointerDown = (e) => {
+ // Only allow drawing in placeholder mode when no widget is selected
+ if (
+ !props.placeholder ||
+ props.currWidgetsDetails?.key ||
+ props.isDragging
+ ) {
+ return;
+ }
+
+ // Disable drawing on mobile/touch devices to avoid conflicts with pinch-to-zoom
+ if (isMobile || e.pointerType !== "mouse") {
+ return;
+ }
+
+ // Don't draw if clicking on an existing widget
+ if (e.target.closest(".signYourselfBlock")) {
+ return;
+ }
+
+ const rect = pdfContainerRef.current.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+
+ isDrawingRef.current = true;
+ drawStartRef.current = { x, y };
+ drawEndRef.current = { x, y };
+ setIsDrawing(true); // single setState to mount the overlay div
+ };
+
+ const handlePointerMove = (e) => {
+ if (!isDrawingRef.current || !drawStartRef.current) {
+ return;
+ }
+
+ const rect = pdfContainerRef.current.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+
+ drawEndRef.current = { x, y };
+
+ // Update the overlay position directly via DOM — no setState, no re-render
+ if (drawingOverlayRef.current) {
+ const width = Math.abs(x - drawStartRef.current.x);
+ const height = Math.abs(y - drawStartRef.current.y);
+ const rectX = Math.min(drawStartRef.current.x, x);
+ const rectY = Math.min(drawStartRef.current.y, y);
+ const s = drawingOverlayRef.current.style;
+ s.left = `${rectX}px`;
+ s.top = `${rectY}px`;
+ s.width = `${width}px`;
+ s.height = `${height}px`;
+ }
+ };
+
+ const handlePointerUp = (e) => {
+ if (!isDrawingRef.current || !drawStartRef.current || !drawEndRef.current) {
+ isDrawingRef.current = false;
+ drawStartRef.current = null;
+ drawEndRef.current = null;
+ setIsDrawing(false);
+ return;
+ }
+
+ const width = Math.abs(drawEndRef.current.x - drawStartRef.current.x);
+ const height = Math.abs(drawEndRef.current.y - drawStartRef.current.y);
+
+ // Only create widget if the drawn area is large enough (minimum 30x20 pixels)
+ if (width > 30 && height > 20) {
+ const containerScale = getContainerScale(
+ props.pdfOriginalWH,
+ props.pageNumber,
+ props.containerWH
+ );
+
+ const rectX = Math.min(drawStartRef.current.x, drawEndRef.current.x);
+ const rectY = Math.min(drawStartRef.current.y, drawEndRef.current.y);
+
+ // Convert pixel coordinates to PDF coordinates
+ const xPosition = rectX / (containerScale * props.scale);
+ const yPosition = rectY / (containerScale * props.scale);
+ const widgetWidth = width / (containerScale * props.scale);
+ const widgetHeight = height / (containerScale * props.scale);
+
+ // Create a Text Input widget at the drawn position
+ if (props.addPositionOfSignature) {
+ // Simulate dropping a text input widget
+ const type =
+ props?.roleName === "prefill" ? textWidget : textInputWidget;
+ const textInputItem = { text: type, type: "BOX" };
+
+ const monitor = {
+ type: type,
+ getClientOffset: () => ({ x: rectX, y: rectY }),
+ getSourceClientOffset: () => ({ x: rectX, y: rectY })
+ };
+
+ props.addPositionOfSignature(textInputItem, monitor, {
+ customPosition: {
+ xPosition,
+ yPosition,
+ width: widgetWidth,
+ height: widgetHeight
+ }
+ });
+ // Mark that a widget was just drawn so the subsequent click event
+ // does not deselect it via the Document onClick handler.
+ justDrewRef.current = true;
+ }
+ }
+
+ // Reset drawing state
+ isDrawingRef.current = false;
+ drawStartRef.current = null;
+ drawEndRef.current = null;
+ setIsDrawing(false); // single setState to unmount the overlay div
+ };
return (
<>
{props.successEmail && (
@@ -340,13 +475,28 @@ function RenderPdf(props) {
}
style={{
width:
- props.containerWH?.width && props.containerWH?.width * props.scale
+ props.containerWH?.width &&
+ props.containerWH?.width * props.scale,
+ cursor:
+ props.placeholder &&
+ !props.currWidgetsDetails?.key &&
+ !props.isDragging
+ ? "crosshair"
+ : "default"
}}
ref={(node) => {
pdfContainerRef.current = node;
drop && drop(node);
}}
id="container"
+ onPointerDown={handlePointerDown}
+ onPointerMove={handlePointerMove}
+ onPointerUp={handlePointerUp}
+ onPointerLeave={() => {
+ if (isDrawing) {
+ handlePointerUp();
+ }
+ }}
>
{props.pdfLoad !== false &&
props.containerWH?.width &&
@@ -515,6 +665,10 @@ function RenderPdf(props) {
props.pageDetails(pdf);
}}
onClick={() => {
+ if (justDrewRef.current) {
+ justDrewRef.current = false;
+ return;
+ }
props.setCurrWidgetsDetails && props.setCurrWidgetsDetails({});
showGuidelines(false);
}}
@@ -561,6 +715,23 @@ function RenderPdf(props) {
containerWH={props.containerWH}
scale={props?.scale}
/>
+ {/* Drawing rectangle overlay for Text Input widget */}
+ {isDrawing && (
+
+ )}
diff --git a/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx b/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx
index fe7effa4e..4d4ed88b4 100644
--- a/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx
+++ b/apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx
@@ -27,9 +27,9 @@ import {
getBase64MimeType,
drawWidget,
getBase64FromUrl,
- clearResponse
+ clearResponse,
+ isEmptyValue
} from "../../constant/Utils";
-import CellsWidget from "./CellsWidget";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import moment from "moment";
@@ -61,6 +61,7 @@ import UploadImage from "./tab/UploadImage";
import TypeSignature from "./tab/TypeSignature";
import PenColorComponent from "./tab/PenColorComponent";
import TextInput from "./widgets/TextInput";
+import CellsInput from "./widgets/CellsInput";
const fontOptions = [
{ value: "Fasthand" },
@@ -95,8 +96,6 @@ function WidgetsValueModal(props) {
setXyPosition,
isSave,
signatureTypes,
- setCellCount,
- allowCellResize = true,
penColors
} = props;
const previousWidgetRes = signatureResponse?.find(
@@ -162,45 +161,21 @@ function WidgetsValueModal(props) {
);
});
const blocked = [
- "checkbox",
- "dropdown",
- "date",
- "radio",
];
const blockedTab = ["mysignature", "myinitials", "myStamp"];
const showClearbtn =
(!blocked.includes(type) && !blockedTab.includes(isTab));
- const [cellsValue, setCellsValue] = useState(() => {
- const count = currWidgetsDetails?.options?.cellCount || 5;
- const val =
- currWidgetsDetails?.options?.response ||
- currWidgetsDetails?.options?.defaultValue ||
- "";
- return Array.from({ length: count }, (_, i) => val[i] || "");
- });
const isSignOrInitials = ["signature", "initials"].includes(
currWidgetsDetails?.type
);
const isImageOrStamp = ["image", "stamp"].includes(currWidgetsDetails?.type);
- const cellRefs = useRef([]);
const widgetRef = useRef(null);
- // keep track of the first empty cell to automatically focus it after updates
- useEffect(() => {
- const index = cellsValue.findIndex((v) => !v);
- if (index !== -1) {
- setTimeout(() => {
- cellRefs.current[index]?.focus();
- }, 0);
- }
- }, [cellsValue]);
-
useEffect(() => {
- const count = currWidgetsDetails?.options?.cellCount || 5;
const val =
currWidgetsDetails?.options?.response ||
currWidgetsDetails?.options?.defaultValue ||
"";
- setCellsValue(Array.from({ length: count }, (_, i) => val[i] || ""));
+ setWidgetValue(String(val || ""));
}, [currWidgetsDetails?.key, currWidgetsDetails?.options?.cellCount]);
useEffect(() => {
dispatch(setScrollTriggerId(currWidgetsDetails?.key));
@@ -225,9 +200,14 @@ function WidgetsValueModal(props) {
useEffect(() => {
if (
- ["name", "email", "job title", "company", textInputWidget].includes(
- currWidgetsDetails?.type
- )
+ [
+ "name",
+ "email",
+ "job title",
+ "company",
+ textInputWidget,
+ cellsWidget
+ ].includes(currWidgetsDetails?.type)
) {
if (currWidgetsDetails?.options?.hint) {
setHint(currWidgetsDetails?.options.hint);
@@ -240,6 +220,7 @@ function WidgetsValueModal(props) {
setHint(currWidgetsDetails?.type);
}
}
+
else if (currWidgetsDetails?.type === "date") {
setHint(currWidgetsDetails?.options.hint || "");
} else if (isSignOrInitials) {
@@ -295,6 +276,10 @@ function WidgetsValueModal(props) {
uniqueId,
false,
data?.format,
+ currWidgetsDetails?.options?.fontSize,
+ currWidgetsDetails?.options?.fontColor,
+ null,
+ null,
);
setSelectDate({ date: date, format: data?.format });
};
@@ -608,14 +593,9 @@ function WidgetsValueModal(props) {
}
} else {
if (currWidgetsDetails?.type === cellsWidget) {
- const count =
- currWidgetsDetails?.options?.cellCount || cellsValue.length || 1;
- const cleared = Array.from({ length: count }, () => "");
- setCellsValue(cleared);
- const combined = cleared.join("");
- setWidgetValue(combined);
+ setWidgetValue("");
onChangeInput(
- combined,
+ "",
currWidgetsDetails,
xyPosition,
props.index,
@@ -623,7 +603,9 @@ function WidgetsValueModal(props) {
uniqueId
);
} else {
+ setSelectedCheckbox([]);
setWidgetValue("");
+ setStartDate("");
onChangeInput(
"",
currWidgetsDetails,
@@ -1060,17 +1042,16 @@ function WidgetsValueModal(props) {
uniqueId
);
};
+
const updateCells = (updated) => {
- setCellsValue(updated);
- const combined = updated.join("");
- setWidgetValue(combined);
+ setWidgetValue(updated);
props.setCurrWidgetsDetails?.((prev) =>
prev && prev.key === currWidgetsDetails?.key
- ? { ...prev, options: { ...prev.options, response: combined } }
+ ? { ...prev, options: { ...prev.options, response: updated } }
: prev
);
onChangeInput(
- combined,
+ updated,
currWidgetsDetails,
xyPosition,
props.index,
@@ -1078,37 +1059,11 @@ function WidgetsValueModal(props) {
uniqueId
);
};
- const handleCellsInput = (e, idx) => {
+ const handleCellsInput = (e) => {
+ const value = e.target.value;
setIsShowValidation(false);
- const val = e.target.value.slice(0, 1);
- const updated = [...cellsValue];
- updated[idx] = val;
- updateCells(updated);
+ updateCells(value);
};
- const handleCellsKeyDown = (e, idx) => {
- if (e.key === "Backspace" && !cellsValue[idx] && idx > 0) {
- e.preventDefault();
- cellRefs.current[idx - 1]?.focus();
- }
- };
-
- const handleCellResize = (newCount) => {
- let updated = [...cellsValue];
- if (newCount > updated.length) {
- updated = [...updated, ...Array(newCount - updated.length).fill("")];
- } else if (newCount < updated.length) {
- updated = updated.slice(0, newCount);
- }
- cellRefs.current = cellRefs.current.slice(0, newCount);
- updateCells(updated);
- setCellCount?.(currWidgetsDetails?.key, newCount);
- };
-
- // when focus leaves the cells widget, validate the input
- const handleCellsBlur = (e, idx) => {
- handleInputBlur();
- };
-
//function is used to show widgets on modal according to selected widget type checkbox/date/radio/drodown/textbox/signature/image
const getWidgetType = (type) => {
const isStampOrImage =
@@ -1360,6 +1315,7 @@ function WidgetsValueModal(props) {
)
}
];
+
switch (type) {
case "image":
case "initials":
@@ -1464,24 +1420,18 @@ function WidgetsValueModal(props) {
handleOnchangeTextBox={handleOnchangeTextBox}
textInputcls={textInputcls}
currWidgetsDetails={currWidgetsDetails}
- handleInputBlur={handleInputBlur}
+ handleInputBlur={handleValidation}
/>
);
case cellsWidget:
return (
-