feat: sign document with text

This commit is contained in:
Ephraim Atta-Duncan
2023-12-11 12:03:22 +00:00
parent e4b7747f66
commit 6ad3edb6c8
10 changed files with 112 additions and 21 deletions

View File

@ -1,7 +1,7 @@
import { APP_BASE_URL } from './app';
export const DEFAULT_STANDARD_FONT_SIZE = 15;
export const DEFAULT_HANDWRITING_FONT_SIZE = 50;
export const DEFAULT_HANDWRITING_FONT_SIZE = 30;
export const MIN_STANDARD_FONT_SIZE = 8;
export const MIN_HANDWRITING_FONT_SIZE = 20;

View File

@ -69,6 +69,8 @@ export const sealDocument = async ({ documentId, sendEmail = true }: SealDocumen
const doc = await PDFDocument.load(pdfData);
console.log('Fields to insert into PDF: ', fields);
for (const field of fields) {
await insertFieldInPDF(doc, field);
}

View File

@ -46,8 +46,12 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
await pdf.embedFont(fontCaveat);
}
const CUSTOM_TEXT = field.customText || field.Signature?.typedSignature || '';
const isInsertingImage =
isSignatureField && typeof field.Signature?.signatureImageAsBase64 === 'string';
isSignatureField &&
typeof field.Signature?.signatureImageAsBase64 === 'string' &&
field.Signature?.signatureImageAsBase64.startsWith('data:image/png;base64,');
if (isSignatureField && isInsertingImage) {
const image = await pdf.embedPng(field.Signature?.signatureImageAsBase64 ?? '');
@ -73,13 +77,13 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
height: imageHeight,
});
} else {
let textWidth = font.widthOfTextAtSize(field.customText, fontSize);
let textWidth = font.widthOfTextAtSize(CUSTOM_TEXT, fontSize);
const textHeight = font.heightAtSize(fontSize);
const scalingFactor = Math.min(fieldWidth / textWidth, fieldHeight / textHeight, 1);
fontSize = Math.max(Math.min(fontSize * scalingFactor, maxFontSize), minFontSize);
textWidth = font.widthOfTextAtSize(field.customText, fontSize);
textWidth = font.widthOfTextAtSize(CUSTOM_TEXT, fontSize);
const textX = fieldX + (fieldWidth - textWidth) / 2;
let textY = fieldY + (fieldHeight - textHeight) / 2;
@ -87,7 +91,7 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
// Invert the Y axis since PDFs use a bottom-left coordinate system
textY = pageHeight - textY - textHeight;
page.drawText(field.customText, {
page.drawText(CUSTOM_TEXT, {
x: textX,
y: textY,
size: fontSize,

View File

@ -15,12 +15,14 @@ const DPI = 2;
export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
onChange?: (_signatureDataUrl: string | null) => void;
containerClassName?: string;
clearSignatureClassName?: string;
};
export const SignaturePad = ({
className,
containerClassName,
defaultValue,
clearSignatureClassName,
onChange,
...props
}: SignaturePadProps) => {
@ -217,7 +219,7 @@ export const SignaturePad = ({
{...props}
/>
<div className="absolute bottom-4 right-4">
<div className={cn('absolute bottom-4 right-4', clearSignatureClassName)}>
<button
type="button"
className="focus-visible:ring-ring ring-offset-background text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"