diff --git a/frontend/src/components/annotation/shared/DrawingCanvas.tsx b/frontend/src/components/annotation/shared/DrawingCanvas.tsx index d4ae74ad0..2baecbf19 100644 --- a/frontend/src/components/annotation/shared/DrawingCanvas.tsx +++ b/frontend/src/components/annotation/shared/DrawingCanvas.tsx @@ -11,6 +11,7 @@ interface DrawingCanvasProps { onPenSizeChange: (size: number) => void; onPenSizeInputChange: (input: string) => void; onSignatureDataChange: (data: string | null) => void; + onDrawingComplete?: () => void; // Called when user finishes drawing disabled?: boolean; width?: number; height?: number; @@ -27,6 +28,7 @@ export const DrawingCanvas: React.FC = ({ onPenSizeChange, onPenSizeInputChange, onSignatureDataChange, + onDrawingComplete, disabled = false, width = 400, height = 150, @@ -89,8 +91,15 @@ export const DrawingCanvas: React.FC = ({ if (canvasRef.current) { const dataURL = canvasRef.current.toDataURL('image/png'); onSignatureDataChange(dataURL); + + // Trigger drawing complete callback after a brief delay to ensure signature data is processed + if (onDrawingComplete) { + setTimeout(() => { + onDrawingComplete(); + }, 100); + } } - }, [isDrawing, disabled, onSignatureDataChange]); + }, [isDrawing, disabled, onSignatureDataChange, onDrawingComplete]); // Modal canvas drawing functions const startModalDrawing = useCallback((e: React.MouseEvent) => { @@ -161,8 +170,15 @@ export const DrawingCanvas: React.FC = ({ img.src = dataURL; } } + + // Trigger drawing complete callback after a brief delay to ensure signature data is processed + if (onDrawingComplete) { + setTimeout(() => { + onDrawingComplete(); + }, 100); + } } - }, [isModalDrawing]); + }, [isModalDrawing, onSignatureDataChange, onDrawingComplete]); // Clear canvas functions const clearCanvas = useCallback(() => { @@ -231,7 +247,14 @@ export const DrawingCanvas: React.FC = ({ } setIsModalOpen(false); - }, []); + + // Trigger drawing complete callback after closing modal + if (onDrawingComplete) { + setTimeout(() => { + onDrawingComplete(); + }, 100); + } + }, [onSignatureDataChange, onDrawingComplete]); const openModal = useCallback(() => { setIsModalOpen(true); diff --git a/frontend/src/components/tools/sign/SignSettings.tsx b/frontend/src/components/tools/sign/SignSettings.tsx index 74dc83d39..9a7e50dc4 100644 --- a/frontend/src/components/tools/sign/SignSettings.tsx +++ b/frontend/src/components/tools/sign/SignSettings.tsx @@ -183,21 +183,13 @@ const SignSettings = ({ onPenSizeChange={setPenSize} onPenSizeInputChange={setPenSizeInput} onSignatureDataChange={handleCanvasSignatureChange} + onDrawingComplete={() => { + // Automatically activate placement mode when drawing is complete + if (onActivateSignaturePlacement) { + onActivateSignaturePlacement(); + } + }} disabled={disabled} - additionalButtons={ - - } /> )} @@ -224,7 +216,7 @@ const SignSettings = ({ {/* Instructions for placing signature */} - {parameters.signatureType === 'canvas' && 'After drawing your signature in the canvas above, click "Update and Place" then click anywhere on the PDF to place it.'} + {parameters.signatureType === 'canvas' && 'After drawing your signature in the canvas above, click anywhere on the PDF to place it.'} {parameters.signatureType === 'image' && 'After uploading your signature image above, click anywhere on the PDF to place it.'} {parameters.signatureType === 'text' && 'After entering your name above, click anywhere on the PDF to place your signature.'}