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>
2.3 KiB
name, description, metadata
| name | description | metadata | ||
|---|---|---|---|---|
| a4-entry-points | How the two report editors are reached and dispatched between — kind decides the route, and why the A4 editor now needs Router + NomenclatureData context in tests |
|
Phase 7 wired the A4 designer to real operator entry points. Three things here are easy to get wrong later.
Report kind decides the route, never a default. Main.jsx fetches
/api/reports/?name=notice_report and branches: kind === 'a4' → dynamic
import() of a4/print/printReport and printA4Report(report, data);
otherwise the existing ReportPreviewModal. "Design Notice" routes to
/report-editor-a4 or /report-editor by the same field.
Why it matters: a matrix report opened in the mm editor reads its character
x/y as millimetres and looks like a corrupt layout rather than a routing bug —
a slow, confusing failure. The A4 editor's auto-load therefore filters on
?kind=a4&name=..., not name alone; verified against the real DB that
?kind=a4&name=<a matrix report> returns 0 rows.
How to apply: any new entry point that opens a saved report must resolve
kind before choosing an editor or a render path. Never assume a name implies
a kind.
A4ReportEditor now requires two contexts. It calls useLocation/
useNavigate (router-state auto-load) and useNomenclatureData (sample-data
fallback). Both throw outside their providers, so any jsdom test mounting the
whole editor needs <MemoryRouter> plus
vi.mock('../../../../contexts/NomenclatureDataContext', ...). Mocking the
nomenclature hook rather than standing up the provider keeps the SSE client and
auth context out of tests that are really about drag geometry.
Why: adding these deps silently broke four existing a4Guides tests with
"useLocation() may be used only in the context of a " — the component
was fine, the harness was stale.
window.print() is not gated by transient user activation the way
window.open is, so an await before it is safe. The A4 print chunk is still
prefetched on hover/focus of the Print Notice button, purely to shorten the gap
on a slow station. This was reasoned, not verified in a real browser — if Print
Notice is ever reported as doing nothing on click, re-test that assumption
first.
Related: a4-print-path, a4-designer-conventions, testing-react