From a4812690228c193c48e458c5147e224831530799 Mon Sep 17 00:00:00 2001 From: Alessandro Mauri Date: Wed, 18 Dec 2024 20:04:23 +0100 Subject: [PATCH] work on div sliders, major changes * Ids are now keyed based on the parent's id, this means that an element can have the same label when placed in different divs * Divs now enable the scissor test, this way the elements cannot draw outside of the parent div bounds * Introduced a LAYOUT_ABSOLUTE that disables all layout logic, for internal use * Divs now draw scrollbars using the slider_hor and slider_ver elements --- src/main.c3 | 18 ++++----- src/ugui_button.c3 | 14 ++----- src/ugui_cmd.c3 | 2 +- src/ugui_core.c3 | 17 ++++---- src/ugui_div.c3 | 98 +++++++++++++++------------------------------- src/ugui_layout.c3 | 8 ++-- src/ugui_slider.c3 | 48 ++++++++++++----------- src/ugui_text.c3 | 2 +- 8 files changed, 86 insertions(+), 121 deletions(-) diff --git a/src/main.c3 b/src/main.c3 index c2dd11d..1d678b7 100644 --- a/src/main.c3 +++ b/src/main.c3 @@ -150,18 +150,18 @@ fn int main(String[] args) {| ui.layout_set_column()!!; static float slider2 = 0.5; - if (ui.slider_ver("slider_other", ugui::Rect{0,0,30,100}, &slider2)!!.update) { + if (ui.slider_ver("slider", ugui::Rect{0,0,30,100}, &slider2)!!.update) { io::printfn("other slider: %f", slider2); } - ui.button("button10", ugui::Rect{0,0,50,50})!!; - ui.button("button11", ugui::Rect{0,0,50,50})!!; - ui.button("button12", ugui::Rect{0,0,50,50})!!; - ui.button("button13", ugui::Rect{0,0,50,50})!!; + ui.button("button0", ugui::Rect{0,0,50,50})!!; + ui.button("button1", ugui::Rect{0,0,50,50})!!; + ui.button("button2", ugui::Rect{0,0,50,50})!!; + ui.button("button3", ugui::Rect{0,0,50,50})!!; if (toggle) { - ui.button("button14", ugui::Rect{0,0,50,50})!!; - ui.button("button15", ugui::Rect{0,0,50,50})!!; - ui.button("button16", ugui::Rect{0,0,50,50})!!; - ui.button("button17", ugui::Rect{0,0,50,50})!!; + ui.button("button4", ugui::Rect{0,0,50,50})!!; + ui.button("button5", ugui::Rect{0,0,50,50})!!; + ui.button("button6", ugui::Rect{0,0,50,50})!!; + ui.button("button7", ugui::Rect{0,0,50,50})!!; } ui.layout_next_column()!!; ui.layout_set_row()!!; diff --git a/src/ugui_button.c3 b/src/ugui_button.c3 index 7db15c1..4572ed0 100644 --- a/src/ugui_button.c3 +++ b/src/ugui_button.c3 @@ -8,27 +8,19 @@ struct ElemButton { bool active; } -const Elem BUTTON_DEFAULTS = { - .type = ETYPE_BUTTON, - .button = { - .color = uint_to_rgba(0x0000ffff), - }, -}; - // draw a button, return the events on that button fn ElemEvents! Ctx.button(&ctx, String label, Rect size, bool state = false) { - Id id = label.hash(); + Id id = ctx.gen_id(label)!; Elem *parent = ctx.get_parent()!; Elem *c_elem = ctx.get_elem(id)!; // add it to the tree ctx.tree.add(id, ctx.active_div)!; - bool needs_layout = c_elem.flags.is_new || parent.flags.updated; - if (c_elem.flags.is_new) { - *c_elem = BUTTON_DEFAULTS; + c_elem.type = ETYPE_BUTTON; + c_elem.button.color = uint_to_rgba(0x0000ffff); } else if (c_elem.type != ETYPE_BUTTON) { return UgError.WRONG_ELEMENT_TYPE?; } diff --git a/src/ugui_cmd.c3 b/src/ugui_cmd.c3 index 7599d35..ba6c208 100644 --- a/src/ugui_cmd.c3 +++ b/src/ugui_cmd.c3 @@ -171,7 +171,7 @@ fn void! Ctx.push_scissor(&ctx, Rect rect) { Cmd sc = { .type = CMD_SCISSOR, - .scissor.rect = rect, + .scissor.rect = rect.intersection(ctx.div_scissor), }; ctx.cmd_queue.enqueue(&sc)!; } diff --git a/src/ugui_core.c3 b/src/ugui_core.c3 index edc29b8..8a54b29 100644 --- a/src/ugui_core.c3 +++ b/src/ugui_core.c3 @@ -99,12 +99,6 @@ const uint MAX_ELEMS = 128; const uint MAX_CMDS = 256; const uint ROOT_ID = 1; -enum Layout { - ROW, - COLUMN, - FLOATING -} - // global style, similar to the css box model struct Style { // css box model Rect padding; @@ -118,7 +112,6 @@ struct Style { // css box model struct Ctx { - Layout layout; IdTree tree; ElemCache cache; CmdQueue cmd_queue; @@ -141,6 +134,7 @@ struct Ctx { } } + Rect div_scissor; isz active_div; // tree node indicating the current active div } @@ -180,6 +174,12 @@ fn Elem*! Ctx.get_parent(&ctx) return ctx.cache.search(parent_id); } +macro Id! Ctx.gen_id(&ctx, String label) +{ + Id parent_id = ctx.tree.get(ctx.active_div)!; + return parent_id ^ label.hash(); +} + // get or push an element from the cache, return a pointer to it // resets all flags except is_new which is set accordingly macro Ctx.get_elem(&ctx, Id id) @@ -218,7 +218,6 @@ fn void! Ctx.init(&ctx) ctx.cmd_queue.init(MAX_ELEMENTS)!; defer catch { (void)ctx.cmd_queue.free(); } - ctx.layout = Layout.ROW; ctx.active_div = 0; // TODO: add style config @@ -275,6 +274,8 @@ fn void! Ctx.frame_begin(&ctx) // 3. Push the root element into the element tree ctx.active_div = ctx.tree.add(ROOT_ID, 0)!; + ctx.div_scissor = {0, 0, ctx.width, ctx.height}; + // The root element does not push anything to the stack // TODO: add a background color taken from a theme or config } diff --git a/src/ugui_div.c3 b/src/ugui_div.c3 index fd43738..6d636d6 100644 --- a/src/ugui_div.c3 +++ b/src/ugui_div.c3 @@ -7,6 +7,7 @@ enum DivLayout { LAYOUT_ROW, LAYOUT_COLUMN, LAYOUT_FLOATING, + LAYOUT_ABSOLUTE, } // div element @@ -26,19 +27,9 @@ struct ElemDiv { Color bgcolor; } -const Elem DIV_DEFAULTS = { - .type = ETYPE_DIV, - .div = { - .scroll.can_x = false, - .scroll.can_y = false, - .scroll.value_x = 0, - .scroll.value_y = 0, - }, -}; - fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, bool scroll_y = false) { - Id id = label.hash(); + Id id = ctx.gen_id(label)!; Elem* parent = ctx.get_parent()!; Elem* c_elem = ctx.get_elem(id)!; @@ -48,7 +39,7 @@ fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, boo bool is_new = c_elem.flags.is_new; if (c_elem.flags.is_new) { - *c_elem = DIV_DEFAULTS; + c_elem.type = ETYPE_DIV; } else if (c_elem.type != ETYPE_DIV) { return UgError.WRONG_ELEMENT_TYPE?; } @@ -60,6 +51,10 @@ fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, boo c_elem.div.children_bounds = c_elem.bounds; c_elem.div.bgcolor = ctx.style.bgcolor; + // update the ctx scissor + ctx.div_scissor = c_elem.bounds; + ctx.push_scissor(c_elem.bounds)!; + // 4. Fill the div fields c_elem.div.origin_c = Point{ .x = c_elem.bounds.x, @@ -77,8 +72,23 @@ fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, boo // TODO: check active // TODO: check resizeable - // FIXME: we cannot use slider elements as scrollbars because of id management - // scrollbars + if (parent.flags.has_focus) { + if (point_in_rect(ctx.input.mouse.pos, c_elem.bounds)) { + c_elem.flags.has_focus = true; + } + } + +} + +fn void! Ctx.div_end(&ctx) +{ + // swap the children bounds + Elem* parent = ctx.get_parent()!; + Elem* c_elem = ctx.get_elem_by_tree_idx(ctx.active_div)!; + c_elem.div.pcb = c_elem.div.children_bounds; + + c_elem.events = ctx.get_elem_events(c_elem); + Rect cb = c_elem.div.pcb; // children bounds bottom-right corner Point cbc = { @@ -105,25 +115,10 @@ fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, boo .w = 10, .h = c_elem.bounds.h, }; - - short hh = (short)(max((float)bc.y / cbc.y, (float)0.15) * c_elem.bounds.h); - Rect vhandle = { - .x = c_elem.bounds.x + c_elem.bounds.w - 10, - .y = calc_slider(c_elem.bounds.y, c_elem.bounds.h-hh, c_elem.div.scroll.value_y), - .w = 10, - .h = hh, - }; - - Point m = ctx.input.mouse.pos; - if (parent.flags.has_focus && c_elem.events.mouse_hover && - c_elem.events.mouse_hold && point_in_rect(m, vhandle)) { - vhandle.y = calc_slider(c_elem.bounds.y, c_elem.bounds.h-hh, c_elem.div.scroll.value_y); - c_elem.div.scroll.value_y = calc_value(c_elem.bounds.y, m.y, c_elem.bounds.h, hh); - c_elem.flags.updated = true; - } - - ctx.push_rect(vslider, uint_to_rgba(0x999999ff))!; - ctx.push_rect(vhandle, uint_to_rgba(0x9999ffff))!; + DivLayout prev_l = c_elem.div.layout; + c_elem.div.layout = LAYOUT_ABSOLUTE; + ctx.slider_ver("div_scrollbar_vertical", vslider, &c_elem.div.scroll.value_y, max((float)bc.y / cbc.y, (float)0.15))!; + c_elem.div.layout = prev_l; } if (c_elem.div.scroll.on_x) { @@ -133,41 +128,12 @@ fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, boo .w = c_elem.bounds.w, .h = 10, }; - - short hw = (short)(max((float)bc.x / cbc.x, (float)0.15) * c_elem.bounds.w); - Rect hhandle = { - .x = calc_slider(c_elem.bounds.x, c_elem.bounds.w-hw, c_elem.div.scroll.value_x), - .y = c_elem.bounds.y + c_elem.bounds.h - 10, - .w = hw, - .h = 10, - }; - - Point m = ctx.input.mouse.pos; - if (parent.flags.has_focus && c_elem.events.mouse_hover && - c_elem.events.mouse_hold && point_in_rect(m, hhandle)) { - hhandle.x = calc_slider(c_elem.bounds.x, c_elem.bounds.w-hw, c_elem.div.scroll.value_x); - c_elem.div.scroll.value_x = calc_value(c_elem.bounds.x, m.x, c_elem.bounds.w, hw); - c_elem.flags.updated = true; - } - - ctx.push_rect(hslider, uint_to_rgba(0x999999ff))!; - ctx.push_rect(hhandle, uint_to_rgba(0x9999ffff))!; + DivLayout prev_l = c_elem.div.layout; + c_elem.div.layout = LAYOUT_ABSOLUTE; + ctx.slider_hor("div_scrollbar_horizontal", hslider, &c_elem.div.scroll.value_x, max((float)bc.x / cbc.x, (float)0.15))!; + c_elem.div.layout = prev_l; } - if (parent.flags.has_focus) { - if (point_in_rect(ctx.input.mouse.pos, c_elem.bounds)) { - c_elem.flags.has_focus = true; - } - } - -} - -fn void! Ctx.div_end(&ctx) -{ - // swap the children bounds - Elem* c_elem = ctx.get_elem_by_tree_idx(ctx.active_div)!; - c_elem.div.pcb = c_elem.div.children_bounds; - // the active_div returns to the parent of the current one ctx.active_div = ctx.tree.parentof(ctx.active_div)!; } diff --git a/src/ugui_layout.c3 b/src/ugui_layout.c3 index 59e6c9a..a65ee78 100644 --- a/src/ugui_layout.c3 +++ b/src/ugui_layout.c3 @@ -94,9 +94,11 @@ fn Rect Ctx.position_element(&ctx, Elem *parent, Rect rect, bool style = false) origin = div.origin_r; case LAYOUT_COLUMN: origin = div.origin_c; - case LAYOUT_FLOATING: // none - default: - // Error + case LAYOUT_FLOATING: // none, relative to zero zero + case LAYOUT_ABSOLUTE: // absolute position, this is a no-op, return the rect + return rect; + default: // error + return Rect{}; } // the bottom-right border of the element box diff --git a/src/ugui_slider.c3 b/src/ugui_slider.c3 index 7d15450..28fd6a4 100644 --- a/src/ugui_slider.c3 +++ b/src/ugui_slider.c3 @@ -8,10 +8,6 @@ struct ElemSlider { Rect handle; } -const Elem SLIDER_DEFAULT = { - .type = ETYPE_SLIDER, -}; - /* handle * +----+-----+---------------------+ * | |#####| | @@ -20,9 +16,15 @@ const Elem SLIDER_DEFAULT = { <* @require value != null *> -fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size, float* value) +fn ElemEvents! Ctx.slider_hor(&ctx, + String label, + Rect size, + float* value, + float hpercent = 0.25, + Color bgcolor = uint_to_rgba(0x0000ffff), + Color handlecolor = uint_to_rgba(0x0ff000ff)) { - Id id = label.hash(); + Id id = ctx.gen_id(label)!; Elem *parent = ctx.get_parent()!; Elem *c_elem = ctx.get_elem(id)!; @@ -31,8 +33,8 @@ fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size, float* value) // 1. Fill the element fields if (c_elem.flags.is_new) { - *c_elem = SLIDER_DEFAULT; - } else if (c_elem.type != SLIDER_DEFAULT.type) { + c_elem.type = ETYPE_SLIDER; + } else if (c_elem.type != ETYPE_SLIDER) { return UgError.WRONG_ELEMENT_TYPE?; } @@ -40,7 +42,7 @@ fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size, float* value) c_elem.bounds = ctx.position_element(parent, size, true); // handle width - short hw = (short)(c_elem.bounds.w * 0.25); + short hw = (short)(c_elem.bounds.w * hpercent); Rect handle = { .x = calc_slider(c_elem.bounds.x, c_elem.bounds.w-hw, *value), .y = c_elem.bounds.y, @@ -60,10 +62,8 @@ fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size, float* value) } // Draw the slider background and handle - Color bg_color = uint_to_rgba(0x0000ffff); - Color handle_color = uint_to_rgba(0x0ff000ff); - ctx.push_rect(c_elem.bounds, bg_color)!; - ctx.push_rect(c_elem.slider.handle, handle_color)!; + ctx.push_rect(c_elem.bounds, bgcolor)!; + ctx.push_rect(c_elem.slider.handle, handlecolor)!; return c_elem.events; } @@ -80,9 +80,15 @@ fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size, float* value) * | | * +-+ */ -fn ElemEvents! Ctx.slider_ver(&ctx, String label, Rect size, float* value) +fn ElemEvents! Ctx.slider_ver(&ctx, + String label, + Rect size, + float* value, + float hpercent = 0.25, + Color bgcolor = uint_to_rgba(0x0000ffff), + Color handlecolor = uint_to_rgba(0x0ff000ff)) { - Id id = label.hash(); + Id id = ctx.gen_id(label)!; Elem *parent = ctx.get_parent()!; Elem *c_elem = ctx.get_elem(id)!; @@ -91,8 +97,8 @@ fn ElemEvents! Ctx.slider_ver(&ctx, String label, Rect size, float* value) // 1. Fill the element fields if (c_elem.flags.is_new) { - *c_elem = SLIDER_DEFAULT; - } else if (c_elem.type != SLIDER_DEFAULT.type) { + c_elem.type = ETYPE_SLIDER; + } else if (c_elem.type != ETYPE_SLIDER) { return UgError.WRONG_ELEMENT_TYPE?; } @@ -100,7 +106,7 @@ fn ElemEvents! Ctx.slider_ver(&ctx, String label, Rect size, float* value) c_elem.bounds = ctx.position_element(parent, size, true); // handle height - short hh = (short)(c_elem.bounds.h * 0.25); + short hh = (short)(c_elem.bounds.h * hpercent); Rect handle = { .x = c_elem.bounds.x, .y = calc_slider(c_elem.bounds.y, c_elem.bounds.h-hh, *value), @@ -121,10 +127,8 @@ fn ElemEvents! Ctx.slider_ver(&ctx, String label, Rect size, float* value) } // Draw the slider background and handle - Color bg_color = uint_to_rgba(0x0000ffff); - Color handle_color = uint_to_rgba(0x0ff000ff); - ctx.push_rect(c_elem.bounds, bg_color)!; - ctx.push_rect(c_elem.slider.handle, handle_color)!; + ctx.push_rect(c_elem.bounds, bgcolor)!; + ctx.push_rect(c_elem.slider.handle, handlecolor)!; return c_elem.events; } diff --git a/src/ugui_text.c3 b/src/ugui_text.c3 index 300825a..58da02f 100644 --- a/src/ugui_text.c3 +++ b/src/ugui_text.c3 @@ -4,7 +4,7 @@ import std::io; fn void! Ctx.text_unbounded(&ctx, String label, String text) { - Id id = label.hash(); + Id id = ctx.gen_id(label)!; Elem *parent = ctx.get_parent()!; Elem *c_elem = ctx.get_elem(id)!;