gitea
122480cd46
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.4 KiB
name, description, metadata
| name | description | metadata | ||
|---|---|---|---|---|
| a4-designer-conventions | Non-obvious invariants of the A4 report designer — line element shape, mm-vs-px flooring, and why matrix inspector panels must not be imported |
|
Conventions in frontend/src/components/ReportEditor/a4/ that are easy to get
wrong because they contradict the matrix editor sitting next to them.
Lines carry only one dimension. An a4-hline has width + thickness
and NO height; an a4-vline has height + thickness and NO width.
Anything computing a box from an element must substitute thickness for the
missing axis — getA4Bounds in geometry.js does this, and it is the
function to reach for rather than reading el.width/el.height directly.
Reading the raw props for a line compares against undefined and passes
vacuously in tests while being wrong in the product.
Screen floors hairlines, print must never. Screen renderers clamp a line's
painted thickness and a rect's border to Math.max(1, …) px, because 0.3mm at
50% zoom is 0.57px and browsers can round it away to nothing. PrintDocument
deliberately does no such thing — the printed thickness is what a steel rule
measures. If a test asserts a floored value on the print path, the test is
wrong, not the code.
Do not import the matrix inspector panels. ExpressionEditorPanel.jsx
looks tempting for the A4 expression section but is coupled two ways: it finds
a parent band with el.type === 'band' (A4 bands are a4-band) and its
alignment select writes element.alignment, whereas every A4 element and
renderer reads element.align. Reusing it silently creates a dead second
alignment property. The duplication between the two inspectors is accepted
deliberately — see the plan's "matrix editor is not modified" section.
fillColor: null means no fill, distinct from white, which would hide
whatever a rect is framing. A colour input cannot express null, so a checkbox
owns that state. It round-trips through Django's JSONField as SQL null.
Float inputs use MmInput, never <input type="number">: a number input
returns "" for the intermediate value "12.", so the decimal point appears
not to type. MmInput (in A4Inspector.jsx) holds a draft string while
focused. Font size in pt is the one exception — its step is 0.5 and users
never type a long decimal tail there.
Related: vite-vitest-migration