Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-12-18 20:04:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Auto update canvas signature

Browse Source
This commit is contained in:
Reece 2025-09-26 19:14:40 +01:00
parent b486d1270e
commit 708a296f8d
2 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/annotation/shared/DrawingCanvas.tsx
View File

@ -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<DrawingCanvasProps> = ({
onPenSizeChange,
onPenSizeInputChange,
onSignatureDataChange,
onDrawingComplete,
disabled = false,
width = 400,
height = 150,
@ -89,8 +91,15 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
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<HTMLCanvasElement>) => {
@ -161,8 +170,15 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
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<DrawingCanvasProps> = ({
}
setIsModalOpen(false);
}, []);
// Trigger drawing complete callback after closing modal
if (onDrawingComplete) {
setTimeout(() => {
onDrawingComplete();
}, 100);
}
}, [onSignatureDataChange, onDrawingComplete]);
const openModal = useCallback(() => {
setIsModalOpen(true);

22
frontend/src/components/tools/sign/SignSettings.tsx
View File

@ -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={
<Button
onClick={() => {
if (onActivateSignaturePlacement) {
onActivateSignaturePlacement();
}
}}
color="blue"
variant="filled"
disabled={disabled || !canvasSignatureData}
>
Update and Place
</Button>
}
/>
)}
@ -224,7 +216,7 @@ const SignSettings = ({
{/* Instructions for placing signature */}
<Alert color="blue" title={t('sign.instructions.title', 'How to add signature')}>
<Text size="sm">
{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.'}
</Text>