re-implemented toggles

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;

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
 	}
 }
 
-/*
+macro Ctx.toggle(&ctx, String desc, bool* active)
-// FIXME: this should be inside the style
+	=> ctx.toggle_id(@compute_id($vasplat), desc, active);
-macro Ctx.toggle(&ctx, String desc, Point off, bool* active)
+fn void? Ctx.toggle_id(&ctx, Id id, String description, 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)
 {
 	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};
+	short inner_pad = description != "" ? style.size/2 : 0;
-	elem.bounds = ctx.layout_element(parent, size, style);
+	/*
+	 *                       |< >| style.size/2
+	 * +---------------------|---|-----------------+
+	 * |                     |    .-----------. ---|--
+	 * |   +-----------------+   ' #####       '   | ^
+	 * |   |   description   |   | #####       |   | style.size
+	 * |   +-----------------+   . #####       .   | v
+	 * |                          '-----------' ---|--
+	 * +-------------------------|-------------|---+
+	 *                           |<----->| style.size*2
+	 */
 
-	// if the bounds are null the element is outside the div view,
+	elem.layout.w = @fit(style.size*2);
-	//  no interaction should occur so just return
+	elem.layout.h = @fit(style.size);
-	if (elem.bounds.is_null()) return;
+	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
+	Rect content_bounds = elem.bounds.pad(elem.layout.content_offset);
-	// FIXME: THIS IS SHIT
+	Rect text_bounds = {
-	ctx.push_rect(elem.bounds, parent.div.z_index, style)!;
+		.x = content_bounds.x,
-	Rect t = elem.bounds.add({*active ? (style.size+3) : +3, +3, -style.size-6, -6});
+		.y = content_bounds.y,
-	Style s = *style;
+		.w = content_bounds.w - inner_pad - style.size*2,
-	s.bg = s.primary;
+		.h = content_bounds.h
-	s.margin = s.border = s.padding = {};
+	};
-	ctx.push_rect(t, parent.div.z_index, &s)!;
+	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)!;
+
+}

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
+/* FIXME: this needs the absolute positioning to work
-	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,
-	};
-
 	// 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 = {
+		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))!;
-			.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;
 	}
 
 	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 = {
+		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))!;
-			.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;
 	}
 */
 

resources/style.css

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

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