Repository navigation
fix: align link annotation hitboxes with rendered SVG elements - #372
Conversation
amandeavor
changed the title
There was a problem hiding this comment.
Pull request overview
This PR fixes an origin mismatch between SVG bounding boxes (top-left origin) and PDF link annotations (bottom-left origin) so that anchor link hitboxes align with the rendered SVG elements.
Changes:
- Adjust link-annotation Y coordinate calculation to use the anchor bounding box’s bottom edge.
- Extend the
anchorfixture SVG with a concrete rectangle case that previously reproduced the offset issue. - Add a unit assertion that inspects
jsPDF#linkcalls and validates the exact generated hitbox coordinates.
Reviewed changes
Copilot reviewed 2 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/nodes/anchor.ts | Fixes link hitbox Y-coordinate conversion by anchoring the annotation to the bbox bottom edge. |
| test/specs/anchor/spec.svg | Adds a deterministic rectangle-in-anchor case to validate hitbox placement visually and programmatically. |
| test/unit/all.spec.js | Hooks pdf.link during the anchor test to assert the generated hitbox coordinates. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (name === 'anchor') { | ||
| const hitbox = linkCalls.find(args => args[4].url === 'https://example.com/hitbox') | ||
| expect(hitbox.slice(0, 4)).to.deep.equal([180, 190, 100, 100]) | ||
| } |
HackbrettXXX
left a comment
HackbrettXXX
left a comment
There was a problem hiding this comment.
Thank you for this PR. It correctly fixes the bounding box of the rect link. However the text bounding boxes are incorrect now.
| const linkCalls = [] | ||
|
|
||
| if (name === 'anchor') { | ||
| const link = pdf.link | ||
| pdf.link = (...args) => { | ||
| linkCalls.push(args) | ||
| return link.apply(pdf, args) | ||
| } | ||
| } |
There was a problem hiding this comment.
I don't think we need this. The reference file already ensures that the link hitbox is correct and I don't like having special cases like this in the spec file.
There was a problem hiding this comment.
On the main branch I've switched to vitest, so individual unit test can now be realized much easier.
3e38d09 to
e1532e5
Compare
|
Updated based on the review feedback and the Vitest migration:\n\n- rebased onto current master / v2.8.0\n- moved the rectangular-link regression into an individual Vitest case\n- normalized text bounding boxes to top-left coordinates so the rectangle fix does not shift existing text links\n- added explicit regression coverage for both rectangle and text hitboxes\n\nVerified locally with the two focused browser tests, TypeScript type-checking, oxlint, and the production build. The existing PDF snapshot test remains unchanged. |
Problem
SVG bounding boxes use a top-left origin, while PDF link annotations use a bottom-left origin. The previous conversion inverted the box's top edge without accounting for its height, placing the clickable area one link-height above the rendered element.
Solution
Verification
npm run buildpassedanchor[180, 190, 100, 100]Fixes #363