From d35ef7ddaf2a3fc540d9b480c44e8b3fbf13e630 Mon Sep 17 00:00:00 2001 From: Alessandro Mauri Date: Fri, 12 Sep 2025 22:32:47 +0200 Subject: [PATCH] re-implemented toggles --- lib/ugui.c3l/src/ugui_core.c3 | 2 +- lib/ugui.c3l/src/widgets/ugui_button.c3 | 87 ++++++++++++++++++------- lib/ugui.c3l/src/widgets/ugui_div.c3 | 42 ++---------- resources/style.css | 2 +- src/main.c3 | 5 +- 5 files changed, 74 insertions(+), 64 deletions(-) diff --git a/lib/ugui.c3l/src/ugui_core.c3 b/lib/ugui.c3l/src/ugui_core.c3 index f23560c..14ff119 100644 --- a/lib/ugui.c3l/src/ugui_core.c3 +++ b/lib/ugui.c3l/src/ugui_core.c3 @@ -131,7 +131,7 @@ fn Elem*? Ctx.get_parent(&ctx) Elem*? parent = ctx.cache.search(parent_id); if (catch parent) return parent; if (parent.type != ETYPE_DIV) return WRONG_ELEMENT_TYPE?; - return parent; + return parent; } macro @bits(#a) => $typeof(#a).sizeof*8; diff --git a/lib/ugui.c3l/src/widgets/ugui_button.c3 b/lib/ugui.c3l/src/widgets/ugui_button.c3 index 7c69379..dc414da 100644 --- a/lib/ugui.c3l/src/widgets/ugui_button.c3 +++ b/lib/ugui.c3l/src/widgets/ugui_button.c3 @@ -16,14 +16,14 @@ fn ElemEvents? Ctx.button_id(&ctx, Id id, String label, String icon) Elem *parent = ctx.get_parent()!; Elem *elem = ctx.get_elem(id, ETYPE_BUTTON)!; Style* style = ctx.styles.get_style(@str_hash("button")); - + Sprite* sprite = icon != "" ? ctx.sprite_atlas.get(icon)! : &&(Sprite){}; Rect icon_size = sprite.rect(); - - ushort min_size = style.size; + + ushort min_size = style.size; ushort half_lh = (ushort)(ctx.font.line_height() / 2); ushort inner_pad = label != "" && icon != "" ? half_lh : 0; - /* + /* * +--------------------------------------+ * | +--------+ | * | | | +-----------------+ | @@ -105,7 +105,7 @@ fn void? Ctx.checkbox_id(&ctx, Id id, String description, bool* active, String t * +-------------------------|-------|---+ * |<----->| style.size */ - + elem.layout.w = @fit(style.size); elem.layout.h = @fit(style.size); elem.layout.children.w = @exact(style.size + inner_pad); @@ -139,7 +139,7 @@ fn void? Ctx.checkbox_id(&ctx, Id id, String description, bool* active, String t s.secondary = style.secondary; s.border = style.border; s.radius = style.radius; - + ctx.layout_string(description, text_bounds, CENTER, parent.div.z_index, style.fg)!; if (tick_sprite != "") { ctx.push_rect(check_bounds, parent.div.z_index, &s)!; @@ -158,11 +158,9 @@ fn void? Ctx.checkbox_id(&ctx, Id id, String description, bool* active, String t } } -/* -// FIXME: this should be inside the style -macro Ctx.toggle(&ctx, String desc, Point off, bool* active) - => ctx.toggle_id(@compute_id($vasplat), desc, off, active); -fn void? Ctx.toggle_id(&ctx, Id id, String description, Point off, bool* active) +macro Ctx.toggle(&ctx, String desc, bool* active) + => ctx.toggle_id(@compute_id($vasplat), desc, active); +fn void? Ctx.toggle_id(&ctx, Id id, String description, bool* active) { id = ctx.gen_id(id)!; @@ -170,22 +168,61 @@ fn void? Ctx.toggle_id(&ctx, Id id, String description, Point off, bool* active) Elem *elem = ctx.get_elem(id, ETYPE_BUTTON)!; Style* style = ctx.styles.get_style(@str_hash("toggle")); - Rect size = {off.x, off.y, style.size*2, style.size}; - elem.bounds = ctx.layout_element(parent, size, style); + short inner_pad = description != "" ? style.size/2 : 0; + /* + * |< >| style.size/2 + * +---------------------|---|-----------------+ + * | | .-----------. ---|-- + * | +-----------------+ ' ##### ' | ^ + * | | description | | ##### | | style.size + * | +-----------------+ . ##### . | v + * | '-----------' ---|-- + * +-------------------------|-------------|---+ + * |<----->| style.size*2 + */ - // if the bounds are null the element is outside the div view, - // no interaction should occur so just return - if (elem.bounds.is_null()) return; + elem.layout.w = @fit(style.size*2); + elem.layout.h = @fit(style.size); + elem.layout.children.w = @exact(style.size*2 + inner_pad); + elem.layout.children.h = @exact(style.size); + elem.layout.text = ctx.measure_string(description)!; + elem.layout.content_offset = style.margin + style.border + style.padding; + + update_parent_grow(elem, parent); + update_parent_size(elem, parent); elem.events = ctx.get_elem_events(elem); if (elem.events.mouse_hover && elem.events.mouse_release) *active = !(*active); - // Draw the button - // FIXME: THIS IS SHIT - ctx.push_rect(elem.bounds, parent.div.z_index, style)!; - Rect t = elem.bounds.add({*active ? (style.size+3) : +3, +3, -style.size-6, -6}); - Style s = *style; - s.bg = s.primary; - s.margin = s.border = s.padding = {}; - ctx.push_rect(t, parent.div.z_index, &s)!; -} \ No newline at end of file + Rect content_bounds = elem.bounds.pad(elem.layout.content_offset); + Rect text_bounds = { + .x = content_bounds.x, + .y = content_bounds.y, + .w = content_bounds.w - inner_pad - style.size*2, + .h = content_bounds.h + }; + Rect toggle_bounds = { + .x = content_bounds.x + text_bounds.w + inner_pad, + .y = content_bounds.y + (content_bounds.h - style.size)/2, + .w = style.size*2, + .h = style.size, + }; + Rect toggle = { + .x = toggle_bounds.x + (*active ? style.size : 0), + .y = toggle_bounds.y, + .w = style.size, + .h = style.size + }; + + Style s; + s.bg = style.bg; + s.secondary = style.secondary; + s.border = style.border; + s.radius = style.radius; + ctx.layout_string(description, text_bounds, CENTER, parent.div.z_index, style.fg)!; + ctx.push_rect(toggle_bounds, parent.div.z_index, &s)!; + s.bg = style.primary; + s.border = {}; + ctx.push_rect(toggle.pad(style.border), parent.div.z_index, &s)!; + +} diff --git a/lib/ugui.c3l/src/widgets/ugui_div.c3 b/lib/ugui.c3l/src/widgets/ugui_div.c3 index c5667d2..6d4985b 100644 --- a/lib/ugui.c3l/src/widgets/ugui_div.c3 +++ b/lib/ugui.c3l/src/widgets/ugui_div.c3 @@ -26,7 +26,7 @@ macro Ctx.@div(&ctx, LayoutDirection dir = ROW, Anchor anchor = TOP_LEFT, bool scroll_x = false, bool scroll_y = false, - ...; + ...; @body() ) { @@ -80,7 +80,7 @@ fn void? Ctx.div_begin_id(&ctx, .anchor = anchor, .content_offset = style.margin + style.border + style.padding, }; - + // update parent grow children update_parent_grow(elem, parent); @@ -96,20 +96,10 @@ fn void? Ctx.div_end(&ctx) { Elem* elem = ctx.get_active_div()!; -/* FIXME: Redo slider functionality - Rect cb = elem.div.pcb; - // children bounds bottom-right corner - Point cbc = { - .x = cb.x + cb.w, - .y = cb.y + cb.h, - }; - // div bounds bottom-right corner - Point bc = { - .x = elem.bounds.x + elem.bounds.w, - .y = elem.bounds.y + elem.bounds.h, - }; - +/* FIXME: this needs the absolute positioning to work // set the scrollbar flag, is used in layout + Point cbc = elem.children_bounds.bottom_right(); + Point bc = elem.bounds.bottom_right(); // horizontal overflow elem.div.scroll_x.on = cbc.x > bc.x && elem.div.scroll_x.enabled; // vertical overflow @@ -127,16 +117,7 @@ fn void? Ctx.div_end(&ctx) elem.div.scroll_y.value += ctx.input.mouse.scroll.y * 0.07f; elem.div.scroll_y.value = math::clamp(elem.div.scroll_y.value, 0.0f, 1.0f); } - Rect vslider = { - .x = elem.bounds.x + elem.bounds.w - wdim, - .y = elem.bounds.y, - .w = wdim, - .h = elem.bounds.h - hdim, - }; - Layout prev_l = elem.div.layout; - elem.div.layout = LAYOUT_ABSOLUTE; - ctx.slider_ver_id(vsid_raw, vslider, &elem.div.scroll_y.value, max((float)bc.y / cbc.y, (float)0.15))!; - elem.div.layout = prev_l; + ctx.slider_ver_id(vsid_raw, @exact(wdim), @exact(elem.bounds.h - hdim), &elem.div.scroll_y.value, max((float)bc.y / cbc.y, (float)0.15))!; } if (elem.div.scroll_x.on) { @@ -144,16 +125,7 @@ fn void? Ctx.div_end(&ctx) elem.div.scroll_x.value += ctx.input.mouse.scroll.x * 0.07f; elem.div.scroll_x.value = math::clamp(elem.div.scroll_x.value, 0.0f, 1.0f); } - Rect hslider = { - .x = elem.bounds.x, - .y = elem.bounds.y + elem.bounds.h - hdim, - .w = elem.bounds.w - wdim, - .h = hdim, - }; - Layout prev_l = elem.div.layout; - elem.div.layout = LAYOUT_ABSOLUTE; - ctx.slider_hor_id(hsid_raw, hslider, &elem.div.scroll_x.value, max((float)bc.x / cbc.x, (float)0.15))!; - elem.div.layout = prev_l; + ctx.slider_hor_id(hsid_raw, @exact(elem.bounds.w - wdim), @exact(hdim), &elem.div.scroll_x.value, max((float)bc.x / cbc.x, (float)0.15))!; } */ diff --git a/resources/style.css b/resources/style.css index 37f17fc..3db3269 100644 --- a/resources/style.css +++ b/resources/style.css @@ -41,7 +41,7 @@ toggle { border: 2; padding: 1; radius: 10; - size: 16; + size: 20; bg: #3c3836ff; fg: #fbf1c7ff; primary: #cc241dff; diff --git a/src/main.c3 b/src/main.c3 index e8042c0..b062c08 100644 --- a/src/main.c3 +++ b/src/main.c3 @@ -414,10 +414,11 @@ fn void calculator(ugui::Ctx* ui) static bool state; ui.checkbox("boolean", &state, "tick")!!; ui.sprite("tux")!!; + ui.toggle("lmao", &state)!!; }!!; - ui.@div(ugui::@grow(), ugui::@fit(), anchor: CENTER) { + ui.@div(ugui::@grow(), ugui::@exact(50), anchor: CENTER, scroll_y: true) { static float f; - ui.slider_hor(ugui::@grow(), ugui::@exact(20), &f)!!; + ui.slider_hor(ugui::@exact(100), ugui::@exact(20), &f)!!; ui.slider_ver(ugui::@exact(20), ugui::@exact(100), &f)!!; }!!;