diff --git a/lib/ugui.c3l/LAYOUT b/lib/ugui.c3l/LAYOUT index 717ac05..700b43d 100644 --- a/lib/ugui.c3l/LAYOUT +++ b/lib/ugui.c3l/LAYOUT @@ -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. diff --git a/lib/ugui.c3l/src/ugui_font.c3 b/lib/ugui.c3l/src/ugui_font.c3 index 51ff0b9..ed9c112 100644 --- a/lib/ugui.c3l/src/ugui_font.c3 +++ b/lib/ugui.c3l/src/ugui_font.c3 @@ -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; } diff --git a/lib/ugui.c3l/src/ugui_layout.c3 b/lib/ugui.c3l/src/ugui_layout.c3 index c950485..b6854b7 100644 --- a/lib/ugui.c3l/src/ugui_layout.c3 +++ b/lib/ugui.c3l/src/ugui_layout.c3 @@ -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) diff --git a/src/main.c3 b/src/main.c3 index 271f696..83848bb 100644 --- a/src/main.c3 +++ b/src/main.c3 @@ -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; + } + }!!; }!!; }