Brings in the A4 (millimetre) report designer alongside the existing matrix editor, migrates the frontend from react-scripts to Vite/Vitest, and fixes four defects found while using the A4 band tools. Layout — layout.js now implements the standard banded-report model: everything prints where it was drawn, and a band growing per data row is the only thing that moves anything. Previously `paginate` re-flowed every band from the top margin, so a band placed halfway down the page previewed at the top, and `header` was treated as a page header and hoisted above the statics drawn before it. A header is a COLUMN header: it prints in place and repeats only on a continuation page. Statics now take part too — one drawn below a band keeps its drawn gap as that band grows, and follows onto the next page rather than vanishing when pushed past the bottom margin. The displacement is keyed on the band's design bottom, not on an instance's laid-out y: every row of a band shares one design position, so keying on the instance measured the gap from row 1 and let the static overlap rows 2..n. Band children — a child's x is relative to its band, as its y already was. layout() emitted it raw, so a field printed measured from the paper edge instead of the band's left margin. Instances now carry bandX. Band placement — a band's x comes from the page margins, so creation takes only the click's Y (the factory's x was being overwritten by the spread order) and dragging is locked to the vertical axis. Bands render as a strip, with top/bottom rules only, matching the matrix editor. fromApiReport reflows on load so reports saved with a stray x straighten themselves. Matrix bands are constrained to vertical too. Drag lifecycle — useElementDrag re-subscribed its document listeners on every render during a drag, because the effect depended on an unmemoized onDrag. Each re-subscribe removed the mouseup listener before adding the next, measured as add/remove/add/remove/add across two mousemoves, and a release landing in that gap was lost: the element kept following the cursor until the next click. Snapping made it routine, since a held guide stops x/y changing and leaves the guide overlay's render sitting between the move and the release. onDrag and dragData now go through refs so the effect depends on [isDragging] alone. Note: the matrix editor has no test coverage, so its band constraint is verified by reading only. The A4 suite is 201 passing tests. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1.8 KiB
A4 smart guides (a4/guides.js)
Pure functions, no React/DOM. buildGuideCandidates(elements, excludeIds, pageSetup)
→ {V, H}; resolveSnap(draftRect, candidates, zoom) → {x, y, guides};
plus unionRect(boxes) and snapToleranceMm(zoom).
The threshold is in SCREEN PIXELS, not mm
SNAP_PX = 6, converted per-call via SNAP_PX / (PX_PER_MM * zoom). This is
load-bearing, not a detail: a fixed mm threshold feels sticky zoomed in and
useless zoomed out. Do not "simplify" it to a constant mm value. The property
worth asserting is tolMm * PX_PER_MM * zoom === SNAP_PX at every zoom.
Integration seams in A4Canvas.jsx
- Candidates are built once in
handleElementDragStartinto auseRef. Rebuilding per mousemove is the one thing that makes dragging laggy. - Multi-select snaps the union rect, then applies one delta to every member. Snapping members independently tears the group apart.
hooks/useElementDrag.jsxis shared with the matrix editor and forwards only pixel deltas — never widen it. Alt-to-suppress is tracked with a window-levelkeydown/keyuplistener in A4Canvas, plus ablurreset (an alt-tab otherwise leaves snapping permanently off, because the keyup lands in another window).- Bands emit no candidates (their edges are the margins, already candidates), but band children do.
Gotcha: snapping breaks drag tests that assume raw deltas
Any pre-existing test that drags an element and asserts the exact px→mm result
can fail once a candidate happens to sit within ~1.6mm of where it lands. This
bit a4Elements.test.js's rect case: it drifted 0.05mm from the 20mm left
margin and legitimately snapped. The fix is to hold Alt around the drag
(withAltHeld helper in that file), not to weaken the assertion — the test is
about unit conversion, so switching the magnet off states its intent.