started work on border radius

src/main.c3

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