diff --git a/src/main.c3 b/src/main.c3 index 269e837..67eb227 100644 --- a/src/main.c3 +++ b/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( - cmd.rect.rect.x, - cmd.rect.rect.y, - cmd.rect.rect.w, - cmd.rect.rect.h, - c - ); + r = rl::Rectangle{ + .x = cmd.rect.rect.x, + .y = cmd.rect.rect.y, + .height = cmd.rect.rect.h, + .width = cmd.rect.rect.w, + }; + // 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; diff --git a/src/ugui_button.c3 b/src/ugui_button.c3 index ac90857..d9abc64 100644 --- a/src/ugui_button.c3 +++ b/src/ugui_button.c3 @@ -34,14 +34,7 @@ fn ElemEvents! Ctx.button(&ctx, String label, Rect size) } // Draw the button - Cmd cmd = { - .type = CMD_RECT, - .rect = { - .rect = c_elem.bounds, - .color = bg_color, - }, - }; - ctx.cmd_queue.enqueue(&cmd)!; + ctx.push_rect(c_elem.bounds, bg_color, do_border: true, do_radius: true)!; return c_elem.events; } diff --git a/src/ugui_cmd.c3 b/src/ugui_cmd.c3 new file mode 100644 index 0000000..14919ca --- /dev/null +++ b/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)!; +} diff --git a/src/ugui_data.c3 b/src/ugui_data.c3 index 33f0395..e61b16f 100644 --- a/src/ugui_data.c3 +++ b/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; } diff --git a/src/ugui_div.c3 b/src/ugui_div.c3 index 1d3f57f..952a4c7 100644 --- a/src/ugui_div.c3 +++ b/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; diff --git a/src/ugui_impl.c3 b/src/ugui_impl.c3 index 975612d..736877e 100644 --- a/src/ugui_impl.c3 +++ b/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) diff --git a/src/ugui_layout.c3 b/src/ugui_layout.c3 index aec6b1e..d403051 100644 --- a/src/ugui_layout.c3 +++ b/src/ugui_layout.c3 @@ -113,14 +113,14 @@ fn Rect Ctx.position_element(&ctx, Elem *parent, Rect rect, bool style = false) // 2.1 apply style, css box model if (style) { - Rect margin = ctx.style.margin; - Rect border = ctx.style.border; + Rect margin = ctx.style.margin; + Rect border = ctx.style.border; Rect padding = ctx.style.padding; placement.x += margin.x; placement.y += margin.y; - if (rect.w != 0) { placement.w += margin.x+margin.w + padding.x+padding.w; } - if (rect.h != 0) { placement.h += margin.y+margin.h + padding.y+padding.h; } + if (rect.w != 0) { placement.w += border.x+border.w + padding.x+padding.w; } + 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;