fix: align anchor link hitboxes (#372)

Co-authored-by: amandeavor <amandeavor@users.noreply.github.com>

Author: amandeavor

src/nodes/anchor.ts

@@ -14,7 +14,7 @@ export class Anchor extends Group {
 
       context.pdf.link(
         scale * (box[0] * context.transform.sx + context.transform.tx),
-        ph - scale * (box[1] * context.transform.sy + context.transform.ty),
+        ph - scale * ((box[1] + box[3]) * context.transform.sy + context.transform.ty),
         scale * box[2],
         scale * box[3],
         { url: href }

src/nodes/text.ts

@@ -164,9 +164,10 @@ export class TextNode extends GraphicsNode {
           renderingMode: textRenderingMode === 'fill' ? void 0 : textRenderingMode,
           charSpace: charSpace === 0 ? void 0 : charSpace
         })
+        const textBottom = textY + dy + 0.1 * pdfFontSize
         this.boundingBox = [
           textX + dx - xOffset,
-          textY + dy + 0.1 * pdfFontSize,
+          textBottom - pdfFontSize,
           context.textMeasure.measureTextWidth(transformedText, context.attributeState),
           pdfFontSize
         ]

test/anchor/anchor.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { svg2pdf } from '../../src/svg2pdf'
 import jsPDF from 'jspdf'
 import { loadSvg } from '../utils/loadSvg'
@@ -8,6 +8,36 @@ describe('anchor', () => {
     const { svgElement, width, height } = await loadSvg('/test/anchor/anchor.svg')
     const pdf = new jsPDF(width > height ? 'l' : 'p', 'pt', [width, height])
     await svg2pdf(svgElement, pdf, { loadExternalStyleSheets: true })
+
     await expect(pdf.output('arraybuffer')).toMatchPdfSnapshot('./anchor.pdf')
   })
+
+  it('aligns rectangular link hitboxes with their SVG bounds', async () => {
+    const { svgElement, width, height } = await loadSvg('/test/anchor/rect-link.svg')
+    const pdf = new jsPDF(width > height ? 'l' : 'p', 'pt', [width, height])
+    const link = vi.spyOn(pdf, 'link')
+    await svg2pdf(svgElement, pdf)
+
+    const rectHitbox = link.mock.calls.find(
+      ([, , , , options]) => options.url === 'https://example.com/hitbox'
+    )
+    expect(rectHitbox).toBeDefined()
+    expect(rectHitbox?.slice(0, 4)).toEqual([180, 190, 100, 100])
+  })
+
+  it('preserves text link hitboxes while normalizing text bounds', async () => {
+    const { svgElement, width, height } = await loadSvg('/test/anchor/anchor.svg')
+    const pdf = new jsPDF(width > height ? 'l' : 'p', 'pt', [width, height])
+    const link = vi.spyOn(pdf, 'link')
+    await svg2pdf(svgElement, pdf, { loadExternalStyleSheets: true })
+
+    const textHitbox = link.mock.calls.find(
+      ([, , , , options]) =>
+        options.url ===
+        'https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline#hanging'
+    )
+    expect(textHitbox).toBeDefined()
+    expect(textHitbox?.[1]).toBeCloseTo(277)
+    expect(textHitbox?.[3]).toBe(30)
+  })
 })