mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-09-01 17:10:24 +08:00
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:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user