alema/ugui
1
0
Fork 0
Code Issues Pull Requests Activity

minor changes

Browse Source
This commit is contained in:
Alessandro Mauri 2025-09-06 12:50:36 +02:00
parent 3d7be2a2df
commit 869c7871f9
4 changed files with 80 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
lib/ugui.c3l/LAYOUT
View File

@ -85,17 +85,17 @@ layout: the layout direction of the children
COLUMN ROW COLUMN ROW
+--------------------+ +----------------------------------------------------+ +--------------------+ +----------------------------------------------------+
| +----------------+ | |+----------------+ +------------------+| | +----------------+ | |+----------------+ |
| | | | || |+------------+| || | | | | || |+------------+ |
| | | | || || || E3 || | | | | || || |+------------------+|
| | E1 | | || E1 || E2 || || | | E1 | | || E1 || E2 || E3 ||
| | | | || || || || | | | | || || |+------------------+|
| | | | || |+------------++------------------+| | | | | || |+------------+ |
| +----------------+ | |+----------------+ | | +----------------+ | |+----------------+ |
| +------------+ | +----------------------------------------------------+ | +------------+ | +----------------------------------------------------+
| | | | | | | |
| | E2 | | | | E2 | |
| | | | | | | | (both have center alignment)
| +------------+ | | +------------+ |
|+------------------+| |+------------------+|
|| || || ||
@ -218,9 +218,10 @@ at frame end:
Styling Styling
======= =======
+-----------------------------------------+ The element bounds include the whole CSS box model:
+---------------------------------------------+
| MARGIN | | MARGIN |
| |
| +-----------------------------------+ | | +-----------------------------------+ |
| |xxxxxxxxxxx BORDER xxxxxxxxxxxx| | | |xxxxxxxxxxx BORDER xxxxxxxxxxxx| |
| |x+-------------------------------+x| | | |x+-------------------------------+x| |
@ -228,12 +229,15 @@ Styling
| |x| +-----------------------+ |x| | | |x| +-----------------------+ |x| |
| |x| | | |x| | | |x| | | |x| |
| |x| | CONTENT | |x| | | |x| | CONTENT | |x| |
| |x| | | |x| |
| |x| +-----------------------+ |x| | | |x| +-----------------------+ |x| |
| |x| |x| | | |x| |x| |
| |x+-------------------------------+x| | | |x+-------------------------------+x| |
| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| | | |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |
| +-----------------------------------+ | | +-----------------------------------+ |
| | | |
| | +---------------------------------------------+
+-----------------------------------------+
Styling happens via a .css file, the sizing strictly refers to the content, so if the the user
requests an exact size of 100px*100px the content box will have those dimensions, but the element
bounds will be larger.

4
lib/ugui.c3l/src/ugui_font.c3
View File

@ -404,9 +404,5 @@ fn TextSize? Ctx.measure_string(&ctx, String text)
ts.height.min = bounds.h; ts.height.min = bounds.h;
ts.height.max = words * line_height + line_gap * (words-1); ts.height.max = words * line_height + line_gap * (words-1);
//io::print("'");
//io::print(text);
//io::print("': ");
//io::printn(ts);
return ts; return ts;
} }

39
lib/ugui.c3l/src/ugui_layout.c3
View File

@ -118,22 +118,25 @@ macro Point Elem.get_view_off(&elem)
// Assign the width and height of an element in the directions that it doesn't need to grow // Assign the width and height of an element in the directions that it doesn't need to grow
fn void resolve_dimensions(Elem* e, Elem* p) fn void resolve_dimensions(Elem* e, Elem* p)
{ {
Layout* el = &e.layout;
Layout* pl = &p.layout;
// ASSIGN WIDTH // ASSIGN WIDTH
switch { switch {
case e.layout.w.@is_exact(): case el.w.@is_exact():
// if width is exact then assign it to the bounds // if width is exact then assign it to the bounds
e.bounds.w = e.layout.total_width().min; e.bounds.w = el.total_width().min;
case e.layout.w.@is_grow(): case el.w.@is_grow():
// done in another pass // done in another pass
break; break;
case e.layout.w.@is_fit(): // fit the element's children case el.w.@is_fit(): // fit the element's children
Size elem_width = e.layout.w; // the element's content width Size elem_width = el.w; // the element's content width
Size children_width = e.layout.children.w; // element children (content) width Size children_width = el.children.w; // element children (content) width
Size combined = elem_width.combine(children_width); Size combined = elem_width.combine(children_width);
if (combined.min <= combined.max) { // OK! if (combined.min <= combined.max) { // OK!
// the final element width is the content width plus padding and border // the final element width is the content width plus padding and border
e.bounds.w = min(elem_width.max, children_width.max) + e.layout.content_offset.x + e.layout.content_offset.w; e.bounds.w = min(elem_width.max, children_width.max) + el.content_offset.x + el.content_offset.w;
} else { } else {
unreachable("Cannot fit children width: min:%d max:%d", combined.min, combined.max); unreachable("Cannot fit children width: min:%d max:%d", combined.min, combined.max);
} }
@ -142,31 +145,31 @@ fn void resolve_dimensions(Elem* e, Elem* p)
// ASSIGN HEIGHT // ASSIGN HEIGHT
switch { switch {
case e.layout.h.@is_exact(): case el.h.@is_exact():
// if width is exact then assign it to the bounds and add border and paddign // if width is exact then assign it to the bounds and add border and paddign
e.bounds.h = e.layout.total_height().min; e.bounds.h = el.total_height().min;
case e.layout.h.@is_grow(): case el.h.@is_grow():
break; break;
// done in another pass // done in another pass
case e.layout.h.@is_fit(): // fit the element's children case el.h.@is_fit(): // fit the element's children
Size elem_height = e.layout.h; // the element's content width Size elem_height = el.h; // the element's content width
Size children_height = e.layout.children.h; // element children (content) width Size children_height = el.children.h; // element children (content) width
Size combined = elem_height.combine(children_height); Size combined = elem_height.combine(children_height);
if (combined.min <= combined.max) { // OK! if (combined.min <= combined.max) { // OK!
// the final element width is the content width plus padding and border // the final element width is the content width plus padding and border
e.bounds.h = min(elem_height.max, children_height.max) + e.layout.content_offset.y + e.layout.content_offset.h; e.bounds.h = min(elem_height.max, children_height.max) + el.content_offset.y + el.content_offset.h;
} else { } else {
unreachable("Cannot fit children height: min:%d max:%d", combined.min, combined.max); unreachable("Cannot fit children height: min:%d max:%d", combined.min, combined.max);
} }
default: unreachable("width is not exact, grow or fit"); default: unreachable("width is not exact, grow or fit");
} }
switch (p.layout.dir) { switch (pl.dir) {
case ROW: case ROW:
if (!e.layout.w.@is_grow()) p.layout.occupied += e.bounds.w; if (!el.w.@is_grow()) pl.occupied += e.bounds.w;
case COLUMN: case COLUMN:
if (!e.layout.h.@is_grow()) p.layout.occupied += e.bounds.h; if (!el.h.@is_grow()) pl.occupied += e.bounds.h;
} }
} }
@ -295,8 +298,6 @@ fn void resolve_placement(Elem* c, Elem* p)
pl.origin.y += c.bounds.h; pl.origin.y += c.bounds.h;
default: unreachable("unknown layout direction"); default: unreachable("unknown layout direction");
} }
//sprintln("origin: ", p.layout.origin, " bounds: ", c.bounds);
} }
fn void Ctx.layout_element_tree(&ctx) fn void Ctx.layout_element_tree(&ctx)

39
src/main.c3
View File

@ -218,7 +218,6 @@ $endswitch
/* /*
ui.layout_set_floating()!!; ui.layout_set_floating()!!;
// FIXME: I cannot anchor shit to the bottom of the screen
ui.@div({0, ui.height-150, -300, 150}) { ui.@div({0, ui.height-150, -300, 150}) {
ui.layout_set_column()!!; ui.layout_set_column()!!;
ui.text_unbounded(string::tformat("frame %d, fps = %.2f", frame, fps))!!; ui.text_unbounded(string::tformat("frame %d, fps = %.2f", frame, fps))!!;
@ -374,37 +373,35 @@ fn void calculator(ugui::Ctx* ui)
ui.@div(ugui::@fit(), ugui::@fit(), COLUMN) { ui.@div(ugui::@fit(), ugui::@fit(), COLUMN) {
ui.button("7")!!.mouse_press ? buffer[len++] = '7' : 0; ui.button("7")!!.mouse_press ? buffer[len++] = '7' : 0;
ui.button("8")!!.mouse_press ? buffer[len++] = '8' : 0;
ui.button("9")!!.mouse_press ? buffer[len++] = '9' : 0;
}!!;
ui.@div(ugui::@fit(), ugui::@fit(), COLUMN) {
ui.button("4")!!.mouse_press ? buffer[len++] = '4' : 0; ui.button("4")!!.mouse_press ? buffer[len++] = '4' : 0;
ui.button("5")!!.mouse_press ? buffer[len++] = '5' : 0;
ui.button("6")!!.mouse_press ? buffer[len++] = '6' : 0;
}!!;
ui.@div(ugui::@fit(), ugui::@fit(), COLUMN) {
ui.button("3")!!.mouse_press ? buffer[len++] = '3' : 0;
ui.button("2")!!.mouse_press ? buffer[len++] = '2' : 0;
ui.button("1")!!.mouse_press ? buffer[len++] = '1' : 0; ui.button("1")!!.mouse_press ? buffer[len++] = '1' : 0;
ui.button("0")!!.mouse_press ? buffer[len++] = '0' : 0;
}!!; }!!;
ui.@div(ugui::@fit(), ugui::@fit(), COLUMN) { ui.@div(ugui::@fit(), ugui::@fit(), COLUMN) {
ui.button("0")!!.mouse_press ? buffer[len++] = '0' : 0; ui.button("8")!!.mouse_press ? buffer[len++] = '8' : 0;
ui.button("5")!!.mouse_press ? buffer[len++] = '5' : 0;
ui.button("2")!!.mouse_press ? buffer[len++] = '2' : 0;
ui.button(".")!!.mouse_press ? buffer[len++] = '.' : 0; ui.button(".")!!.mouse_press ? buffer[len++] = '.' : 0;
}!!;
ui.@div(ugui::@fit(), ugui::@fit(), COLUMN) {
ui.button("9")!!.mouse_press ? buffer[len++] = '9' : 0;
ui.button("6")!!.mouse_press ? buffer[len++] = '6' : 0;
ui.button("3")!!.mouse_press ? buffer[len++] = '3' : 0;
ui.button("(")!!.mouse_press ? buffer[len++] = '(' : 0; ui.button("(")!!.mouse_press ? buffer[len++] = '(' : 0;
}!!; }!!;
/* ui.@div(ugui::@exact(10), ugui::@exact(10)) {}!!;
ui.@div({0,0,0,-1}) {
ui.button("C")!!.mouse_press ? len = 0 : 0; ui.@div(ugui::@fit(), ugui::@fit(), COLUMN) {
ui.button("D")!!.mouse_press ? len-- : 0;
ui.layout_next_row()!!;
ui.button("x")!!.mouse_press ? buffer[len++] = '*' : 0; ui.button("x")!!.mouse_press ? buffer[len++] = '*' : 0;
ui.button("/")!!.mouse_press ? buffer[len++] = '/' : 0; ui.button("/")!!.mouse_press ? buffer[len++] = '/' : 0;
ui.layout_next_row()!!;
ui.button("+")!!.mouse_press ? buffer[len++] = '+' : 0; ui.button("+")!!.mouse_press ? buffer[len++] = '+' : 0;
ui.button("-")!!.mouse_press ? buffer[len++] = '-' : 0;
ui.layout_next_row()!!;
ui.button(")")!!.mouse_press ? buffer[len++] = ')' : 0; ui.button(")")!!.mouse_press ? buffer[len++] = ')' : 0;
}!!;
ui.@div(ugui::@fit(), ugui::@fit(), COLUMN) {
ui.button("C")!!.mouse_press ? len = 0 : 0;
ui.button("D")!!.mouse_press ? len-- : 0;
ui.button("-")!!.mouse_press ? buffer[len++] = '-' : 0;
// eval the expression with 'bc' // eval the expression with 'bc'
if (ui.button("=")!!.mouse_press || eval) { if (ui.button("=")!!.mouse_press || eval) {
@ -414,6 +411,6 @@ fn void calculator(ugui::Ctx* ui)
buffer[:x.len] = x[..]; buffer[:x.len] = x[..];
len = x.len; len = x.len;
} }
*/ }!!;
}!!; }!!;
} }