fix(diagram-engine): slack packs to column top; paragraphs set flush-left

The poster's two ugliest defects were engine policy, not model declarations:

- A column stretched by its siblings distributed the slack into gaps (and,
  via grow, into boxes), producing huge panels with three lines floating in
  the middle. Slack policy now differs by axis: a ROW still spreads and
  centres (a flowchart layer reads as a pyramid), a COLUMN packs to the top
  and leaves leftover space at the bottom — where a reader expects it.
- Multi-line body text rendered dead-centre (FALLBACK_BOX's
  verticalAlign=middle). Typography's basic rule, applied by content: a
  paragraph (explicit breaks or wrap-length text) sets align=left,
  verticalAlign=top with padding; a short label stays centred. Rectangles
  only — inside a rhombus or cloud the safe text area IS the middle.
- Prompts corrected: stretch is about width, content keeps natural height,
  and columns are balanced by moving content — not by inflating boxes.

565 tests green; the same poster declaration re-rendered without the giant
hollow panels.
This commit is contained in:
dayuan.jiang
2026-08-09 22:22:08 +09:00
parent 78e31ebb2a
commit 8687e8f04b
4 changed files with 35 additions and 5 deletions

View File

@@ -114,8 +114,11 @@ Use restructure_diagram ALSO for poster-style layouts — paper summaries, cheat
freely, and a box with INTERNAL structure is just an invisible col container (pad 10-14)
holding smaller boxes. Three knobs, use them everywhere:
- grow: columns split leftover width by weight (grow 3 / grow 2 makes a 3:2 page).
- align "stretch": a child fills its parent's cross axis — headings, highlight bars and
body boxes should almost always stretch, or the column looks ragged.
- align "stretch": a child fills its parent's cross axis (width, in a column). Use it on
headings, highlight bars and body boxes so a column's edges line up. Note stretch is
about WIDTH — content keeps its natural height and packs to the top of its column; the
engine leaves leftover vertical space at the bottom, never inflates boxes to fill it.
So do NOT give leaf boxes grow to "fill" a column — balance columns by moving content.
- pad: small (8-14) for tight cards, default 24 for roomy sections.
Labels take inline HTML — <b>, <i>, <font color="#1B5E20">, <br> — so one box can hold a
bold keyword, a second paragraph, a coloured verdict line. Emoji in headings (💡 Core Idea)