some todos

TODO

@@ -5,9 +5,10 @@
 [ ] Update ARCHITECTURE.md
 [ ] Write a README.md
 [ ] Use an arena allocator for cache
+[ ] Do not redraw if there was no update (no layout and no draw)
 
 ## Commands
-[ ] rect commads should have:
+[x] rect commads should have:
 	* border width
 	* border radius
 [x] add a command to update an atlas
@@ -19,3 +20,11 @@
 ## Fonts
 [ ] Fix the missing alpha channel
 [ ] Fix the allignment
+
+## Raylib
+[ ] Implement type (Rect, Color, Point) conversion functions between rl:: and ugui::
+[ ] Implement pixel radius rounding for border radius
+
+## Widgets
+[ ] Dynamic text box to implement an fps counter
+[ ] Button with label

src/main.c3

@@ -94,7 +94,7 @@ fn int main(String[] args)
 				io::printfn("slider: %f", e.slider.value);
 			}
 
-			ui.text_unbounded("text1", "Ciao Mamma")!!;
+			ui.text_unbounded("text1", "Ciao Mamma\n Sono a Casa")!!;
 		|};
 		ui.div_end()!!;
 
@@ -128,6 +128,7 @@ fn int main(String[] args)
 		// ClearBackground(BLACK);
 
 		rl::Color c;
+		rl::Rectangle r;
 		static rl::Image font_atlas;
 		static rl::Texture2D font_texture;
 		for (Cmd* cmd; (cmd = ui.cmd_queue.dequeue() ?? null) != null;) {
@@ -139,13 +140,15 @@ fn int main(String[] args)
 				    .b = cmd.rect.color.b,
 				    .a = cmd.rect.color.a,
 				};
-				rl::draw_rectangle(
+				r = rl::Rectangle{
-				    cmd.rect.rect.x,
+					.x = cmd.rect.rect.x,
-				    cmd.rect.rect.y,
+					.y = cmd.rect.rect.y,
-				    cmd.rect.rect.w,
+					.height = cmd.rect.rect.h,
-				    cmd.rect.rect.h,
+					.width = cmd.rect.rect.w,
-				    c
+				};
-				);
+				// TODO: find a way to do real pixel-perfec rounding
+				float round = cmd.rect.radius ? 0.2 : 0;
+				rl::draw_rectangle_rounded(r, round, 2, c);
 			case ugui::CmdType.CMD_UPDATE_ATLAS:
 				rl::unload_image(font_atlas);
 				font_atlas.data = cmd.update_atlas.raw_buffer;

src/ugui_button.c3

@@ -34,14 +34,7 @@ fn ElemEvents! Ctx.button(&ctx, String label, Rect size)
 	}
 
 	// Draw the button
-	Cmd cmd = {
+	ctx.push_rect(c_elem.bounds, bg_color, do_border: true, do_radius: true)!;
-	    .type = CMD_RECT,
-	    .rect =	{
-		    .rect  = c_elem.bounds,
-		    .color = bg_color,
-		},
-	};
-	ctx.cmd_queue.enqueue(&cmd)!;
 
 	return c_elem.events;
 }

src/ugui_cmd.c3

@@ -0,0 +1,34 @@
+module ugui;
+
+// FIXME: is this really the best solution?
+// "rect" is the bounding box of the element, which includes the border and the padding (so not just the content)
+fn void! Ctx.push_rect(&ctx, Rect rect, Color color, bool do_border = false, bool do_padding = false, bool do_radius = false)
+{
+	Rect border = ctx.style.border;
+	Rect padding = ctx.style.padding;
+	ushort radius = ctx.style.radius;
+	Color border_color = ctx.style.brcolor;
+
+	if (do_border) {
+		Cmd cmd = {
+			.type = CMD_RECT,
+			.rect.rect = rect,
+			.rect.color = border_color,
+			.rect.radius = do_radius ? radius : 0,
+		};
+		ctx.cmd_queue.enqueue(&cmd)!;
+	}
+	
+	Cmd cmd = {
+		.type = CMD_RECT,
+		.rect.rect = {
+			.x = rect.x + (do_border ? border.x : 0) + (do_padding ? padding.x : 0),
+			.y = rect.y + (do_border ? border.y : 0) + (do_padding ? padding.y : 0),
+			.w = rect.w - (do_border ? border.x+border.w : 0) - (do_padding ? padding.x+padding.w : 0),
+			.h = rect.h - (do_border ? border.y+border.h : 0) - (do_padding ? padding.y+padding.h : 0),
+		},
+		.rect.color = color,
+		.rect.radius = do_radius ? radius : 0,
+	};
+	ctx.cmd_queue.enqueue(&cmd)!;
+}

src/ugui_data.c3

@@ -137,8 +137,10 @@ enum CmdType {
 }
 
 // command to draw a rect
+// TODO: implement radius
 struct CmdRect {
 	Rect rect;
+	ushort radius;
 	Color color;
 }
 
@@ -179,7 +181,8 @@ struct Style { // css box model
 	Rect  margin;
 	Color bgcolor; // background color
 	Color fgcolor; // foreground color
-	Color bcolor;  // border color
+	Color brcolor; // border color
+	ushort radius;
 }
 
 

src/ugui_div.c3

@@ -20,7 +20,7 @@ fn void! Ctx.div_begin(&ctx, String label, Rect size)
 		c_elem.bounds = ctx.position_element(parent, size);
 		if (c_elem.flags.is_new) {
 			c_elem.div.children_bounds = c_elem.bounds;
-			c_elem.div.color_bg = uint_to_rgba(0xff0000ff);
+			c_elem.div.color_bg = ctx.style.bgcolor;
 			c_elem.div.scroll.can_x = false;
 			c_elem.div.scroll.can_y = false;
 			c_elem.div.scroll.value_x = 0;

src/ugui_impl.c3

@@ -53,7 +53,13 @@ fn void! Ctx.init(&ctx)
 	ctx.active_div = 0;
 
 	// TODO: add style config
-	ctx.style.margin  = Rect{1, 1, 1, 1};
+	ctx.style.margin  = Rect{2, 2, 2, 2};
+	ctx.style.border  = Rect{2, 2, 2, 2};
+	ctx.style.padding = Rect{1, 1, 1, 1};
+	ctx.style.radius  = 4;
+	ctx.style.bgcolor = uint_to_rgba(0x282828ff);
+	ctx.style.fgcolor = uint_to_rgba(0xfbf1c7ff);
+	ctx.style.brcolor = uint_to_rgba(0xd79921ff);
 }
 
 fn void Ctx.free(&ctx)

src/ugui_layout.c3

@@ -119,8 +119,8 @@ fn Rect Ctx.position_element(&ctx, Elem *parent, Rect rect, bool style = false)
 
 		placement.x += margin.x;
 		placement.y += margin.y;
-		if (rect.w != 0) { placement.w += margin.x+margin.w + padding.x+padding.w; }
+		if (rect.w != 0) { placement.w += border.x+border.w + padding.x+padding.w; }
-		if (rect.h != 0) { placement.h += margin.y+margin.h + padding.y+padding.h; }
+		if (rect.h != 0) { placement.h += border.y+border.h + padding.y+padding.h; }
 
 		pl_corner.x = placement.x + placement.w + margin.w;
 		pl_corner.y = placement.y + placement.h + margin.h;

src/ugui_text.c3

@@ -2,6 +2,35 @@ module ugui;
 
 import std::io;
 
+fn Rect! Ctx.get_text_bounds(&ctx, String text, bool* update_atlas)
+{
+	Rect text_bounds;
+	short line_height = (short)ctx.font.ascender - (short)ctx.font.descender;
+	short line_gap = (short)ctx.font.linegap;
+	text_bounds.h = line_height;
+	Glyph* gp;
+
+	// TODO: account for unicode codepoints
+	short line_len;
+	foreach (c: text) {
+		Codepoint cp = (Codepoint)c;
+		bool n;
+		if (cp != '\n') {
+			gp = ctx.font.get_glyph(cp, &n)!;
+			line_len += gp.adv;
+			if (n) { *update_atlas = true; }
+		} else {
+			text_bounds.h += line_height + line_gap;
+			if (line_len > text_bounds.w) {
+				text_bounds.w = line_len;
+			}
+			line_len = 0;
+		}
+	}
+
+	return text_bounds;
+}
+
 fn void! Ctx.text_unbounded(&ctx, String label, String text)
 {
 	Id id = label.hash();
@@ -15,23 +44,13 @@ fn void! Ctx.text_unbounded(&ctx, String label, String text)
 	// this resets the flags
 	c_elem.type     = ETYPE_TEXT;
 
-	short line_height = (short)ctx.font.ascender - (short)ctx.font.descender;
 	short baseline = (short)ctx.font.ascender;
+	short line_height = (short)ctx.font.ascender - (short)ctx.font.descender;
+	short line_gap = (short)ctx.font.linegap;
 	bool update_atlas;
 	// if the element is new or the parent was updated then redo layout
 	if (c_elem.flags.is_new || parent.flags.updated) {
-		Rect text_size;
+		Rect text_size = ctx.get_text_bounds(text, &update_atlas)!;
-		Glyph* gp;
-
-		// FIXME: newlines are not counted
-		foreach (c: text) {
-			Codepoint cp = (Codepoint)c;
-			bool n;
-			gp = ctx.font.get_glyph(cp, &n)!;
-			text_size.w += gp.adv;
-			text_size.h += line_height;
-			if (n) { update_atlas = true; }
-		}
 
 		// 2. Layout
 		c_elem.bounds = ctx.position_element(parent, text_size, true);
@@ -53,19 +72,27 @@ fn void! Ctx.text_unbounded(&ctx, String label, String text)
 		ctx.cmd_queue.enqueue(&up)!;
 	}
 
+	Cmd bounds = {
+		.type = CMD_RECT,
+		.rect.rect = c_elem.bounds,
+		.rect.color = uint_to_rgba(0x000000ff),
+	};
+	ctx.cmd_queue.enqueue(&bounds)!;
+	
 	Point orig = {
 		.x = c_elem.bounds.x,
 		.y = c_elem.bounds.y,
 	};
+	short line_len;
 	foreach (c: text) {
 		Glyph* gp;
 		Codepoint cp = (Codepoint)c;
+		if (cp != '\n') {
 			gp = ctx.font.get_glyph(cp)!;
-		
 			Cmd cmd = {
 				.type = CMD_SPRITE,
 				.sprite.rect = {
-				.x = orig.x + gp.ox,
+					.x = orig.x + line_len + gp.ox,
 					.y = orig.y + gp.oy + baseline,
 					.w = gp.w,
 					.h = gp.h,
@@ -77,7 +104,11 @@ fn void! Ctx.text_unbounded(&ctx, String label, String text)
 					.h = gp.h,
 				},
 			};
-		orig.x += gp.adv;
+			line_len += gp.adv;
 			ctx.cmd_queue.enqueue(&cmd)!;
+		} else {
+			orig.y += line_height + line_gap;
+			line_len = 0;
+		}
 	}
 }