added another demo ui

TODO

@@ -20,7 +20,7 @@ to maintain focus until mouse release (fix scroll bars)
 [x] The id combination in gen_id() uses an intger division, which is costly, use another combination 
     function that is non-linear and doesn't use division
 [ ] Animations, somehow
-[ ] Maybe cache codepoint converted strings
+[x] Maybe cache codepoint converted strings
 [x] Fix scroll wheel when div is scrolled
 [ ] Be consistent with the initialization methods some are foo.new() and some are foo.init()
 [ ] Implement image loading (.bmp, .ff, .qoi and .png), in the future even lossy images like .jpg
@@ -44,7 +44,7 @@ to maintain focus until mouse release (fix scroll bars)
 [x] Fix how padding is applied in push_rect. In CSS padding is applied between the border and the
     content, the background color is applied starting from the border. Right now push_rect() offsets
     the background rect by both border and padding
-
+[ ] Investigate why the debug pointer (cyan rectangle) disappears... 
 
 ## Layout
 
@@ -55,6 +55,13 @@ to maintain focus until mouse release (fix scroll bars)
 [ ] Correct whitespace handling in text (\t \r etc)
 [ ] Consider a multi-pass recursive approach to layout (like https://github.com/nicbarker/clay)
     instead of the curren multi-frame approach.
+[ ] Implement column/row sizing (min, max)
+[ ] Find a way to concile pixel measurements to the mm ones used in css, for example in min/max sizing
+    of elements
+[ ] Center elements to div (center children_bounds to the center of the div bounds and shift the origin accordingly)
+[ ] Use containing_rect() in position_element() to skip some computing and semplify the function
+[ ] Rename position_element() to layout_element()
+[ ] Make functions to mark rows/columns as full, to fix the calculator demo
 
 ## Input
 
@@ -75,6 +82,7 @@ to maintain focus until mouse release (fix scroll bars)
 [ ] New window command, useful for popups
 [x] Text command returns the text bounds, this way we can avoid the pattern 
     draw_text(a, pos) -> off = compute_bounds(a) -> draw_text(b, pos+off) -> ...
+[ ] Rounded rectangle with different radius for each corner
 
 ## Atlas
 

resources/style.css

@@ -4,12 +4,13 @@ default {
 	primary: #cc241dff;
 	secondary: #458588ff;
 	accent: #fabd2fff;
+	border: 1;
 }
 
 button {
-	margin: 2 2 2 2;
+	margin: 2;
-	border: 2 2 2 2;
+	border: 2;
-	padding: 2 2 2 2;
+	padding: 2;
 	radius: 10;
 	size: 32;
 
@@ -21,9 +22,9 @@ button {
 }
 
 checkbox {
-	margin: 2 2 2 2;
+	margin: 2;
-	border: 2 2 2 2;
+	border: 2;
-	padding: 1 1 1 1;
+	padding: 1;
 	radius: 10;
 	size: 16;
 	bg: #3c3836ff;
@@ -34,9 +35,9 @@ checkbox {
 }
 
 toggle {
-	margin: 2 2 2 2;
+	margin: 2;
-	border: 2 2 2 2;
+	border: 2;
-	padding: 1 1 1 1;
+	padding: 1;
 	radius: 10;
 	size: 16;
 	bg: #3c3836ff;
@@ -47,9 +48,9 @@ toggle {
 }
 
 slider {
-	margin: 2 2 2 2;
+	margin: 2;
-	padding: 2 2 2 2;
+	padding: 2;
-	border: 1 1 1 1;
+	border: 1;
 	radius: 4;
 	size: 8;
 	bg: #3c3836ff;

src/main.c3

@@ -119,7 +119,6 @@ fn int main(String[] args)
 
 	isz frame;
 	double fps;
-	bool toggle = true;
 	time::Clock clock;
 	time::Clock fps_clock;
 	time::Clock sleep_clock;
@@ -199,74 +198,13 @@ fn int main(String[] args)
 
 		if (ui.check_key_combo(ugui::KMOD_CTRL, "q")) quit = true;
 
-		ui.div_begin({.w=-100})!!;
+const String APPLICATION = "calculator";
-		{
+$if APPLICATION == "debug":
-			ui.layout_set_column()!!;
+		debug_app(&ui);
-			if (ui.button(icon: "tux")!!.mouse_press) {
+$endif
-				io::printn("press button0");
+$if APPLICATION == "calculator":
-				toggle = !toggle;
+		calculator(&ui);
-			}
+$endif
-			//ui.layout_next_column()!!;
-			if (ui.button(label: "ciao", icon: "tick")!!.mouse_press) {
-				io::printn("press button1");
-			}
-			//ui.layout_next_column()!!;
-			if (ui.button()!!.mouse_release) {
-				io::printn("release button2");
-			}
-
-			ui.layout_set_row()!!;
-			ui.layout_next_row()!!;
-			static float rf, gf, bf, af;
-			ui.slider_ver({0,0,30,100}, &rf)!!;
-			ui.slider_ver({0,0,30,100}, &gf)!!;
-			ui.slider_ver({0,0,30,100}, &bf)!!;
-			ui.slider_ver({0,0,30,100}, &af)!!;
-
-			ui.layout_next_column()!!;
-			ui.text_unbounded("Ciao Mamma\nAbilità ⚡\n'\udb80\udd2c'")!!;
-
-			ui.layout_next_column()!!;
-			ui.button("Continua!")!!;
-
-			ui.layout_next_row()!!;
-			static bool check;
-			ui.checkbox("", {}, &check, "tick")!!;
-			ui.checkbox("", {}, &check)!!;
-			ui.toggle("", {}, &toggle)!!;
-		};
-		ui.sprite("tux")!!;
-		
-		static char[128] text_box = "ciao mamma";
-		static usz text_len = "ciao mamma".len;
-		ui.text_box({0,0,200,200}, text_box[..], &text_len)!!;
-
-		ui.div_end()!!;
-
-		ui.div_begin(ugui::DIV_FILL, scroll_x: true, scroll_y: true)!!;
-		{
-			ui.layout_set_column()!!;
-			static float slider2 = 0.5;
-			if (ui.slider_ver({0,0,30,100}, &slider2)!!.update) {
-				io::printfn("other slider: %f", slider2);
-			}
-			ui.button()!!;
-			ui.button()!!;
-			ui.button()!!;
-			ui.button()!!;
-			if (toggle) {
-				ui.button()!!;
-				ui.button()!!;
-				ui.button()!!;
-				ui.button()!!;
-			}
-			ui.layout_next_column()!!;
-			ui.layout_set_row()!!;
-			static float f1, f2;
-			ui.slider_hor({0,0,100,30}, &f1)!!;
-			ui.slider_hor({0,0,100,30}, &f2)!!;
-		};
-		ui.div_end()!!;
 
 		// Timings counter
 		TimeStats dts = draw_times.get_stats();
@@ -310,3 +248,112 @@ fn int main(String[] args)
 
 	return 0;
 }
+
+fn void debug_app(ugui::Ctx* ui)
+{
+	static bool toggle;
+	ui.div_begin({.w=-100})!!;
+	{
+		ui.layout_set_column()!!;
+		if (ui.button(icon:"tux")!!.mouse_press) {
+			io::printn("press button0");
+			toggle = !toggle;
+		}
+		//ui.layout_next_column()!!;
+		if (ui.button(label: "ciao", icon: "tick")!!.mouse_press) {
+			io::printn("press button1");
+		}
+		//ui.layout_next_column()!!;
+		if (ui.button()!!.mouse_release) {
+			io::printn("release button2");
+		}
+
+		ui.layout_set_row()!!;
+		ui.layout_next_row()!!;
+		static float rf, gf, bf, af;
+		ui.slider_ver({0,0,30,100}, &rf)!!;
+		ui.slider_ver({0,0,30,100}, &gf)!!;
+		ui.slider_ver({0,0,30,100}, &bf)!!;
+		ui.slider_ver({0,0,30,100}, &af)!!;
+
+		ui.layout_next_column()!!;
+		ui.text_unbounded("Ciao Mamma\nAbilità ⚡\n'\udb80\udd2c'")!!;
+
+		ui.layout_next_column()!!;
+		ui.button("Continua!")!!;
+
+		ui.layout_next_row()!!;
+		static bool check;
+		ui.checkbox("", {}, &check, "tick")!!;
+		ui.checkbox("", {}, &check)!!;
+		ui.toggle("", {}, &toggle)!!;
+	};
+	ui.sprite("tux")!!;
+	
+	static char[128] text_box = "ciao mamma";
+	static usz text_len = "ciao mamma".len;
+	ui.text_box({0,0,200,200}, text_box[..], &text_len)!!;
+
+	ui.div_end()!!;
+
+	ui.div_begin(ugui::DIV_FILL, scroll_x: true, scroll_y: true)!!;
+	{
+		ui.layout_set_column()!!;
+		static float slider2 = 0.5;
+		if (ui.slider_ver({0,0,30,100}, &slider2)!!.update) {
+			io::printfn("other slider: %f", slider2);
+		}
+		ui.button()!!;
+		ui.button()!!;
+		ui.button()!!;
+		ui.button()!!;
+		if (toggle) {
+			ui.button()!!;
+			ui.button()!!;
+			ui.button()!!;
+			ui.button()!!;
+		}
+		ui.layout_next_column()!!;
+		ui.layout_set_row()!!;
+		static float f1, f2;
+		ui.slider_hor({0,0,100,30}, &f1)!!;
+		ui.slider_hor({0,0,100,30}, &f2)!!;
+	};
+	ui.div_end()!!;
+}
+
+fn void calculator(ugui::Ctx* ui)
+{
+	ui.div_begin(ugui::DIV_FILL)!!;
+
+	ui.layout_set_row()!!;
+	ui.div_begin({0,0,-300,50})!!;
+	ui.text_unbounded("80085")!!;
+	ui.div_end()!!;
+	ui.layout_next_row()!!;
+	
+	ui.button("7")!!;
+	ui.button("8")!!;
+	ui.button("9")!!;
+	ui.layout_next_row()!!;
+	ui.button("4")!!;
+	ui.button("5")!!;
+	ui.button("6")!!;
+	ui.layout_next_row()!!;
+	ui.button("3")!!;
+	ui.button("2")!!;
+	ui.button("1")!!;
+	ui.layout_next_row()!!;
+	ui.button(".")!!;
+	ui.button("0")!!;
+	ui.button("")!!;
+	
+	ui.layout_next_column()!!;
+	ui.layout_set_column()!!;
+	ui.button("+")!!;
+	ui.button("-")!!;
+	ui.button("*")!!;
+	ui.button("/")!!;
+	
+	ui.div_end()!!;
+}