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

@@ -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("button0", ugui::Rect{0,0,50,50})!!;
-			ui.button("button11", ugui::Rect{0,0,50,50})!!;
+			ui.button("button1", ugui::Rect{0,0,50,50})!!;
-			ui.button("button12", ugui::Rect{0,0,50,50})!!;
+			ui.button("button2", ugui::Rect{0,0,50,50})!!;
-			ui.button("button13", 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("button4", ugui::Rect{0,0,50,50})!!;
-				ui.button("button15", ugui::Rect{0,0,50,50})!!;
+				ui.button("button5", ugui::Rect{0,0,50,50})!!;
-				ui.button("button16", ugui::Rect{0,0,50,50})!!;
+				ui.button("button6", ugui::Rect{0,0,50,50})!!;
-				ui.button("button17", ugui::Rect{0,0,50,50})!!;
+				ui.button("button7", ugui::Rect{0,0,50,50})!!;
 			}
 			ui.layout_next_column()!!;
 			ui.layout_set_row()!!;

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?;
 	}

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

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
 }

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
+	if (parent.flags.has_focus) {
-	// scrollbars
+		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,
 		};
-
+		DivLayout prev_l = c_elem.div.layout;
-		short hh = (short)(max((float)bc.y / cbc.y, (float)0.15) * c_elem.bounds.h);
+		c_elem.div.layout = LAYOUT_ABSOLUTE;
-		Rect vhandle = {
+		ctx.slider_ver("div_scrollbar_vertical", vslider, &c_elem.div.scroll.value_y, max((float)bc.y / cbc.y, (float)0.15))!;
-			.x = c_elem.bounds.x + c_elem.bounds.w - 10,
+		c_elem.div.layout = prev_l;
-			.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))!;
 	}
 
 	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,
 		};
-
+		DivLayout prev_l = c_elem.div.layout;
-		short hw = (short)(max((float)bc.x / cbc.x, (float)0.15) * c_elem.bounds.w);
+		c_elem.div.layout = LAYOUT_ABSOLUTE;
-		Rect hhandle = {
+		ctx.slider_hor("div_scrollbar_horizontal", hslider, &c_elem.div.scroll.value_x, max((float)bc.x / cbc.x, (float)0.15))!;
-			.x = calc_slider(c_elem.bounds.x, c_elem.bounds.w-hw, c_elem.div.scroll.value_x),
+		c_elem.div.layout = prev_l;
-			.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))!;
 	}
 
-	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)!;
 }

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
+	case LAYOUT_FLOATING: // none, relative to zero zero
-	default:
+	case LAYOUT_ABSOLUTE: // absolute position, this is a no-op, return the rect
-		// Error
+		return rect;
+	default: // error
+		return Rect{};
 	}
 
 	// the bottom-right border of the element box

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;
+		c_elem.type = ETYPE_SLIDER;
-	} else if (c_elem.type != SLIDER_DEFAULT.type) {
+	} 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);
+	ctx.push_rect(c_elem.bounds, bgcolor)!;
-	Color handle_color = uint_to_rgba(0x0ff000ff);
+	ctx.push_rect(c_elem.slider.handle, handlecolor)!;
-	ctx.push_rect(c_elem.bounds, bg_color)!;
-	ctx.push_rect(c_elem.slider.handle, handle_color)!;
 
 	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;
+		c_elem.type = ETYPE_SLIDER;
-	} else if (c_elem.type != SLIDER_DEFAULT.type) {
+	} 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);
+	ctx.push_rect(c_elem.bounds, bgcolor)!;
-	Color handle_color = uint_to_rgba(0x0ff000ff);
+	ctx.push_rect(c_elem.slider.handle, handlecolor)!;
-	ctx.push_rect(c_elem.bounds, bg_color)!;
-	ctx.push_rect(c_elem.slider.handle, handle_color)!;
 
 	return c_elem.events;
 }

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