re-implemented toggles

This commit is contained in:
Alessandro Mauri 2025-09-12 22:32:47 +02:00
parent 48a333e501
commit d35ef7ddaf
5 changed files with 74 additions and 64 deletions

View File

@ -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;

View File

@ -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)!;
}
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)!;
}

View File

@ -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))!;
}
*/

View File

@ -41,7 +41,7 @@ toggle {
border: 2;
padding: 1;
radius: 10;
size: 16;
size: 20;
bg: #3c3836ff;
fg: #fbf1c7ff;
primary: #cc241dff;

View File

@ -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)!!;
}!!;