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

54
lib/ugui.c3l/LAYOUT
View File

@ -85,17 +85,17 @@ layout: the layout direction of the children
COLUMN ROW
+--------------------+ +----------------------------------------------------+
| +----------------+ | |+----------------+ +------------------+|
| | | | || |+------------+| ||
| | | | || || || E3 ||
| | E1 | | || E1 || E2 || ||
| | | | || || || ||
| | | | || |+------------++------------------+|
| +----------------+ | |+----------------+ |
| | | | || |+------------+ |
| | | | || || |+------------------+|
| | E1 | | || E1 || E2 || E3 ||
| | | | || || |+------------------+|
| | | | || |+------------+ |
| +----------------+ | |+----------------+ |
| +------------+ | +----------------------------------------------------+
| | | |
| | E2 | |
| | | |
| | | | (both have center alignment)
| +------------+ |
|+------------------+|
|| ||
@ -218,22 +218,26 @@ at frame end:
Styling
=======
+-----------------------------------------+
| MARGIN |
| |
| +-----------------------------------+ |
| |xxxxxxxxxxx BORDER xxxxxxxxxxxx| |
| |x+-------------------------------+x| |
| |x| PADDING |x| |
| |x| +-----------------------+ |x| |
| |x| | | |x| |
| |x| | CONTENT | |x| |
| |x| +-----------------------+ |x| |
| |x| |x| |
| |x+-------------------------------+x| |
| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |
| +-----------------------------------+ |
| |
| |
+-----------------------------------------+
The element bounds include the whole CSS box model:
+---------------------------------------------+
| MARGIN |
| +-----------------------------------+ |
| |xxxxxxxxxxx BORDER xxxxxxxxxxxx| |
| |x+-------------------------------+x| |
| |x| PADDING |x| |
| |x| +-----------------------+ |x| |
| |x| | | |x| |
| |x| | CONTENT | |x| |
| |x| | | |x| |
| |x| +-----------------------+ |x| |
| |x| |x| |
| |x+-------------------------------+x| |
| |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.max = words * line_height + line_gap * (words-1);
//io::print("'");
//io::print(text);
//io::print("': ");
//io::printn(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
fn void resolve_dimensions(Elem* e, Elem* p)
{
Layout* el = &e.layout;
Layout* pl = &p.layout;
// ASSIGN WIDTH
switch {
case e.layout.w.@is_exact():
case el.w.@is_exact():
// if width is exact then assign it to the bounds
e.bounds.w = e.layout.total_width().min;
case e.layout.w.@is_grow():
e.bounds.w = el.total_width().min;
case el.w.@is_grow():
// done in another pass
break;
case e.layout.w.@is_fit(): // fit the element's children
Size elem_width = e.layout.w; // the element's content width
Size children_width = e.layout.children.w; // element children (content) width
case el.w.@is_fit(): // fit the element's children
Size elem_width = el.w; // the element's content width
Size children_width = el.children.w; // element children (content) width
Size combined = elem_width.combine(children_width);
if (combined.min <= combined.max) { // OK!
// 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 {
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
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
e.bounds.h = e.layout.total_height().min;
case e.layout.h.@is_grow():
e.bounds.h = el.total_height().min;
case el.h.@is_grow():
break;
// done in another pass
case e.layout.h.@is_fit(): // fit the element's children
Size elem_height = e.layout.h; // the element's content width
Size children_height = e.layout.children.h; // element children (content) width
case el.h.@is_fit(): // fit the element's children
Size elem_height = el.h; // the element's content width
Size children_height = el.children.h; // element children (content) width
Size combined = elem_height.combine(children_height);
if (combined.min <= combined.max) { // OK!
// 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 {
unreachable("Cannot fit children height: min:%d max:%d", combined.min, combined.max);
}
default: unreachable("width is not exact, grow or fit");
}
switch (p.layout.dir) {
switch (pl.dir) {
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:
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;
default: unreachable("unknown layout direction");
}
//sprintln("origin: ", p.layout.origin, " bounds: ", c.bounds);
}
fn void Ctx.layout_element_tree(&ctx)

65
src/main.c3
View File

@ -218,7 +218,6 @@ $endswitch
/*
ui.layout_set_floating()!!;
// FIXME: I cannot anchor shit to the bottom of the screen
ui.@div({0, ui.height-150, -300, 150}) {
ui.layout_set_column()!!;
ui.text_unbounded(string::tformat("frame %d, fps = %.2f", frame, fps))!!;
@ -374,46 +373,44 @@ fn void calculator(ugui::Ctx* ui)
ui.@div(ugui::@fit(), ugui::@fit(), COLUMN) {
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("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("0")!!.mouse_press ? buffer[len++] = '0' : 0;
}!!;
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.@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.@div(ugui::@exact(10), ugui::@exact(10)) {}!!;
/*
ui.@div({0,0,0,-1}) {
ui.button("C")!!.mouse_press ? len = 0 : 0;
ui.button("D")!!.mouse_press ? len-- : 0;
ui.layout_next_row()!!;
ui.button("x")!!.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.layout_next_row()!!;
ui.button(")")!!.mouse_press ? buffer[len++] = ')' : 0;
// eval the expression with 'bc'
if (ui.button("=")!!.mouse_press || eval) {
char[128] out;
String y = string::tformat("echo '%s' | bc", (String)buffer[:len]);
String x = process::execute_stdout_to_buffer(out[:128], (String[]){"sh", "-c", y}) ?? "";
buffer[:x.len] = x[..];
len = x.len;
}
*/
ui.@div(ugui::@fit(), ugui::@fit(), COLUMN) {
ui.button("x")!!.mouse_press ? buffer[len++] = '*' : 0;
ui.button("/")!!.mouse_press ? buffer[len++] = '/' : 0;
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'
if (ui.button("=")!!.mouse_press || eval) {
char[128] out;
String y = string::tformat("echo '%s' | bc", (String)buffer[:len]);
String x = process::execute_stdout_to_buffer(out[:128], (String[]){"sh", "-c", y}) ?? "";
buffer[:x.len] = x[..];
len = x.len;
}
}!!;
}!!;
}