Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 16:23:06 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve text insertion accuracy

Browse Source 
Previous inserted text would appear a little off center from where the user had selected which could cause some frustration.

We improve upon this by updating the code responsible for centering the text to behave in a more accurate manner. From what I can tell it looks to be quite solid but could do with more rigorous testing with shorter and longer inputs.

You can see the improved accuracy in action here:

https://www.loom.com/share/1095fee7605c4790b8b30f573a04f0f0
This commit is contained in:
Mythie
2023-04-06 23:16:20 +10:00
parent e3db462587
commit ee4ca018d8
1 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/pdf/insertTextInPDF.ts
View File

@ -12,27 +12,36 @@ export async function insertTextInPDF(
): Promise<string> { ): Promise<string> {
const fontBytes = fs.readFileSync("public/fonts/Qwigley-Regular.ttf"); const fontBytes = fs.readFileSync("public/fonts/Qwigley-Regular.ttf");
const existingPdfBytes = pdfAsBase64; const pdfDoc = await PDFDocument.load(pdfAsBase64);
const pdfDoc = await PDFDocument.load(existingPdfBytes);
pdfDoc.registerFontkit(fontkit); pdfDoc.registerFontkit(fontkit);
const customFont = await pdfDoc.embedFont(fontBytes);
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica); const font = await pdfDoc.embedFont(useHandwritingFont ? fontBytes : StandardFonts.Helvetica);
const pages = pdfDoc.getPages(); const pages = pdfDoc.getPages();
const pdfPage = pages[page]; const pdfPage = pages[page];
const textSize = useHandwritingFont ? 50 : 15; const textSize = useHandwritingFont ? 50 : 15;
const textWidth = customFont.widthOfTextAtSize(text, textSize); const textWidth = font.widthOfTextAtSize(text, textSize);
const textHeight = customFont.heightAtSize(textSize); const textHeight = font.heightAtSize(textSize);
const fieldSize = { width: 192, height: 64 }; const fieldSize = { width: 192, height: 64 };
const invertedYPosition = pdfPage.getHeight() - positionY - fieldSize.height;
// Because pdf-lib use a bottom-left coordinate system, we need to invert the y position
// we then center the text in the middle by adding half the height of the text
// plus the height of the field and divide the result by 2
const invertedYPosition =
pdfPage.getHeight() - positionY - (fieldSize.height + textHeight / 2) / 2;
// We center the text by adding the width of the field, subtracting the width of the text
// and dividing the result by 2
const centeredXPosition = positionX + (fieldSize.width - textWidth) / 2;
pdfPage.drawText(text, { pdfPage.drawText(text, {
x: positionX, x: centeredXPosition,
y: invertedYPosition, y: invertedYPosition,
size: textSize, size: textSize,
font: useHandwritingFont ? customFont : helveticaFont,
color: rgb(0, 0, 0), color: rgb(0, 0, 0),
font,
}); });
const pdfAsUint8Array = await pdfDoc.save(); const pdfAsUint8Array = await pdfDoc.save();