Orkuncakilkaya
7d8f34de17
- flex-shrink: a line whose children want more room than it has takes it back from those that shrink, in proportion to shrink times size and never below a min size, a fixed size or the content. A scroll box shrinks (and scrolls), and a box in a column shrinks as far as the scroll boxes inside it let it, so a list in a column takes the room its siblings leave with no height. `flex: grow shrink`, and `flex-shrink` by name. - A row wider than its room measures its texts (and boxes without a width) again in the room the rest leave them, so a line wraps beside an icon. - calc() with + - * / and brackets over px, %, em, rem, vw, vh, plain numbers and var(); a width or height keeps its percentage, taken of the room it is given. Lengths lists (padding, margin) keep a calc()'s spaces. - `order` places a box's children without touching the tree. - width: 0 and height: 0 are 0: an unset size is UI_AUTO now, not 0. - A component root that is itself a component takes each user's class, style and id in turn (the outermost's id wins), and the rules of all their sheets are weighed by specificity together; a user's rule wins a tie. The parent's sheet used to override the child's whatever its specificity, and a middle component's sheet was lost. - The default sheet lays .ui-track out as a row, so a range's fill is as tall as its track and a checked box's knob goes right; a range's thumb is centred on the fill's end. - ui_boxes.ludic. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
86 lines
2.7 KiB
Text
86 lines
2.7 KiB
Text
# layout_box.ludic - a box's content measured: its children in a line along its direction (a
|
|
# row's text wrapped into the room its siblings leave), or a wrapping row's lines
|
|
function ly_measure_box(n: UiNode, inner: float) -> void {
|
|
for i in 0 .. len(n.children) {
|
|
ly_fg_a = n.rfg_a
|
|
ly_measure(n.children[i], inner, n.rsize, n.rfg)
|
|
}
|
|
if n.dir == UI_ROW and inner > 0.0 { ly_row_fit(n, inner) }
|
|
var main = 0.0
|
|
var cross = 0.0
|
|
var count = 0
|
|
for i in 0 .. len(n.children) {
|
|
let c = n.children[i]
|
|
if c.pos < 2 {
|
|
main = main + ly_main(c, n.dir)
|
|
if count > 0 { main = main + n.gap }
|
|
cross = Math.max(cross, ly_cross(c, n.dir))
|
|
count += 1
|
|
}
|
|
}
|
|
if n.dir == UI_ROW {
|
|
n.mw = n.mw + main
|
|
n.mh = n.mh + cross
|
|
} else {
|
|
n.mw = n.mw + cross
|
|
n.mh = n.mh + main
|
|
}
|
|
}
|
|
# a row wider than its room: its texts (and boxes of their own width) measured again in the room the
|
|
# rest leave them, each giving up a share of the excess as wide as it is, so a line wraps beside an icon
|
|
function ly_row_fit(n: UiNode, inner: float) -> void {
|
|
var used = 0.0
|
|
var flex = 0.0
|
|
var count = 0
|
|
for i in 0 .. len(n.children) {
|
|
let c = n.children[i]
|
|
if c.pos >= 2 { continue }
|
|
if count > 0 { used = used + n.gap }
|
|
used = used + ly_main(c, UI_ROW)
|
|
if ly_flexes(c) { flex = flex + ly_main(c, UI_ROW) }
|
|
count += 1
|
|
}
|
|
let over = used - inner
|
|
if over <= 0.0 or flex <= 0.0 { return }
|
|
for i in 0 .. len(n.children) {
|
|
let c = n.children[i]
|
|
let share = ly_main(c, UI_ROW) - over * ly_main(c, UI_ROW) / flex
|
|
if ly_flexes(c) and share > 0.0 {
|
|
ly_fg_a = n.rfg_a
|
|
ly_measure(c, share, n.rsize, n.rfg)
|
|
}
|
|
}
|
|
}
|
|
function ly_flexes(c: UiNode) -> bool {
|
|
if c.pos >= 2 or c.w >= 0.0 or c.w_pct > 0.0 { return false }
|
|
if c.kind == UI_TEXT { return not c.nowrap }
|
|
return c.kind == UI_BOX and c.children != null and len(c.children) > 0
|
|
}
|
|
# a wrapping row: children in lines no wider than `inner`, the lines stacked `gap` apart
|
|
function ly_measure_wrap(n: UiNode, inner: float) -> void {
|
|
var line_w = 0.0
|
|
var line_h = 0.0
|
|
var widest = 0.0
|
|
var total = 0.0
|
|
var count = 0
|
|
for i in 0 .. len(n.children) {
|
|
let c = n.children[i]
|
|
ly_fg_a = n.rfg_a
|
|
ly_measure(c, inner, n.rsize, n.rfg)
|
|
if c.pos >= 2 { continue }
|
|
let cw = ly_main(c, UI_ROW)
|
|
if count > 0 and line_w + n.gap + cw > inner {
|
|
widest = Math.max(widest, line_w)
|
|
total = total + line_h + n.gap
|
|
line_w = 0.0
|
|
line_h = 0.0
|
|
count = 0
|
|
}
|
|
if count > 0 { line_w = line_w + n.gap }
|
|
line_w = line_w + cw
|
|
line_h = Math.max(line_h, ly_cross(c, UI_ROW))
|
|
count += 1
|
|
}
|
|
n.mw = n.mw + Math.max(widest, line_w)
|
|
n.mh = n.mh + total + line_h
|
|
}
|