started work on border radius
This commit is contained in:
parent
f0aa59ef0b
commit
328cac871a
17
src/main.c3
17
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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
34
src/ugui_cmd.c3
Normal file
34
src/ugui_cmd.c3
Normal file
@ -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)!;
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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)
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user