From b35bb427a77f6096dff0abd4390e5d0de2e1618b Mon Sep 17 00:00:00 2001 From: Alessandro Mauri Date: Mon, 7 Jul 2025 13:53:12 +0200 Subject: [PATCH 1/4] mostly correct padding rendering --- lib/ugui.c3l/src/ugui_cmd.c3 | 3 +++ resources/shaders/source/rect.frag.glsl | 11 ++++++++--- resources/shaders/source/rect.vert.glsl | 2 ++ src/renderer.c3 | 6 +++--- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/lib/ugui.c3l/src/ugui_cmd.c3 b/lib/ugui.c3l/src/ugui_cmd.c3 index 2919436..3bd2d0d 100644 --- a/lib/ugui.c3l/src/ugui_cmd.c3 +++ b/lib/ugui.c3l/src/ugui_cmd.c3 @@ -14,6 +14,7 @@ enum CmdType { // command to draw a rect struct CmdRect { Rect rect; + ushort thickness; ushort radius; Color color; } @@ -104,6 +105,7 @@ fn void? Ctx.push_rect(&ctx, Rect rect, int z_index, Style* style) .rect.rect = rect, .rect.color = border_color, .rect.radius = radius, + .rect.thickness = border.x, }; ctx.push_cmd(&cmd, z_index)!; } @@ -118,6 +120,7 @@ fn void? Ctx.push_rect(&ctx, Rect rect, int z_index, Style* style) }, .rect.color = bg, .rect.radius = radius, + .rect.thickness = max(rect.w, rect.h), }; if (cull_rect(cmd.rect.rect, ctx.div_scissor)) return; ctx.push_cmd(&cmd, z_index)!; diff --git a/resources/shaders/source/rect.frag.glsl b/resources/shaders/source/rect.frag.glsl index 4ae4ea4..5c5e5c1 100644 --- a/resources/shaders/source/rect.frag.glsl +++ b/resources/shaders/source/rect.frag.glsl @@ -7,6 +7,7 @@ layout(set = 3, binding = 0) uniform Viewport { layout(location = 0) in vec4 in_color; layout(location = 1) in vec4 in_quad_size; // x,y, w,h layout(location = 2) in float in_radius; +layout(location = 3) in float thickness; layout(location = 0) out vec4 fragColor; @@ -16,12 +17,16 @@ float sdf_rr(vec2 p, vec2 half_size, float radius) { return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius; } +const float smoothness = 1.5; + void main() { vec2 centerpoint = in_quad_size.xy + in_quad_size.zw * 0.5; vec2 half_size = in_quad_size.zw * 0.5; - float distance = sdf_rr(vec2(gl_FragCoord) - centerpoint, half_size, in_radius); - float alpha = 1.0 - smoothstep(0.0, 1.5, distance); + float distance = -sdf_rr(vec2(gl_FragCoord) - centerpoint, half_size, in_radius); - fragColor = vec4(in_color.rgb, in_color.a * alpha); + float alpha_out = smoothstep(0.0, smoothness, distance); + float alpha_in = 1.0 - smoothstep(thickness, thickness+smoothness, distance); + + fragColor = vec4(in_color.rgb, in_color.a * alpha_out * alpha_in); } \ No newline at end of file diff --git a/resources/shaders/source/rect.vert.glsl b/resources/shaders/source/rect.vert.glsl index 00785db..3eb6bd4 100644 --- a/resources/shaders/source/rect.vert.glsl +++ b/resources/shaders/source/rect.vert.glsl @@ -12,6 +12,7 @@ layout(location = 3) in uvec4 color; layout(location = 0) out vec4 out_color; layout(location = 1) out vec4 out_quad_size; layout(location = 2) out float out_radius; +layout(location = 3) out float out_thickness; void main() { @@ -26,4 +27,5 @@ void main() out_color = vec4(color) / 255.0; out_quad_size = vec4(attr); out_radius = float(abs(uv.x)); + out_thickness = float(uv.y - uv.x); } diff --git a/src/renderer.c3 b/src/renderer.c3 index eae3b8b..0b286c9 100644 --- a/src/renderer.c3 +++ b/src/renderer.c3 @@ -651,11 +651,11 @@ fn bool Renderer.push_sprite(&self, short x, short y, short w, short h, short u, return self.map_quad(qa); } -fn bool Renderer.push_quad(&self, short x, short y, short w, short h, uint color, ushort radius = 0) +fn bool Renderer.push_quad(&self, short x, short y, short w, short h, uint color, ushort radius = 0, ushort thickness = 0) { QuadAttributes qa = { .pos = {.x = x, .y = y, .w = w, .h = h}, - .uv = {.u = radius, .v = radius}, + .uv = {.u = radius, .v = radius+thickness}, .color = color }; @@ -866,7 +866,7 @@ fn void Renderer.render_ugui(&self, CmdQueue* queue) foreach (&c : queue) { if (c.type == CMD_RECT) { CmdRect r = c.rect; - self.push_quad(r.rect.x, r.rect.y, r.rect.w, r.rect.h, r.color.to_uint(), r.radius); + self.push_quad(r.rect.x, r.rect.y, r.rect.w, r.rect.h, r.color.to_uint(), r.radius, r.thickness); } else if (c.type == CMD_SPRITE) { CmdSprite s = c.sprite; self.push_sprite(s.rect.x, s.rect.y, s.texture_rect.w, s.texture_rect.h, s.texture_rect.x, s.texture_rect.y, s.hue.to_uint()); From fa334ed1546bcc0a2f081678865274613db5e27d Mon Sep 17 00:00:00 2001 From: Alessandro Mauri Date: Mon, 7 Jul 2025 14:28:08 +0200 Subject: [PATCH 2/4] changed border to uint --- lib/ugui.c3l/src/ugui_button.c3 | 6 +++-- lib/ugui.c3l/src/ugui_cmd.c3 | 16 +++++------ lib/ugui.c3l/src/ugui_layout.c3 | 10 +++---- lib/ugui.c3l/src/ugui_style.c3 | 48 ++++++++++++++++++--------------- resources/style.css | 15 +++++------ src/main.c3 | 6 +++-- 6 files changed, 54 insertions(+), 47 deletions(-) diff --git a/lib/ugui.c3l/src/ugui_button.c3 b/lib/ugui.c3l/src/ugui_button.c3 index 7635973..344cea5 100644 --- a/lib/ugui.c3l/src/ugui_button.c3 +++ b/lib/ugui.c3l/src/ugui_button.c3 @@ -147,7 +147,8 @@ fn void? Ctx.checkbox_id(&ctx, Id id, String description, Point off, bool* activ Rect check = elem.bounds.add({x, x, -x*2, -x*2}); Style s = *style; s.bg = s.primary; - s.margin = s.border = s.padding = {}; + s.margin = s.padding = {}; + s.border = 0; ctx.push_rect(check, parent.div.z_index, &s)!; } } @@ -180,6 +181,7 @@ fn void? Ctx.toggle_id(&ctx, Id id, String description, Point off, bool* active) Rect t = elem.bounds.add({*active ? (style.size+3) : +3, +3, -style.size-6, -6}); Style s = *style; s.bg = s.primary; - s.margin = s.border = s.padding = {}; + s.margin = s.padding = {}; + s.border = 0; ctx.push_rect(t, parent.div.z_index, &s)!; } diff --git a/lib/ugui.c3l/src/ugui_cmd.c3 b/lib/ugui.c3l/src/ugui_cmd.c3 index 3bd2d0d..6b9b49b 100644 --- a/lib/ugui.c3l/src/ugui_cmd.c3 +++ b/lib/ugui.c3l/src/ugui_cmd.c3 @@ -93,19 +93,19 @@ fn void? Ctx.push_scissor(&ctx, Rect rect, int z_index) fn void? Ctx.push_rect(&ctx, Rect rect, int z_index, Style* style) { - Rect border = style.border; Rect padding = style.padding; + ushort border = style.border; ushort radius = style.radius; Color bg = style.bg; Color border_color = style.secondary; - if (!border.is_null()) { + if (border != 0) { Cmd cmd = { .type = CMD_RECT, .rect.rect = rect, .rect.color = border_color, - .rect.radius = radius, - .rect.thickness = border.x, + .rect.radius = radius+border, + .rect.thickness = border, }; ctx.push_cmd(&cmd, z_index)!; } @@ -113,10 +113,10 @@ fn void? Ctx.push_rect(&ctx, Rect rect, int z_index, Style* style) Cmd cmd = { .type = CMD_RECT, .rect.rect = { - .x = rect.x + border.x + padding.x, - .y = rect.y + border.y + padding.y, - .w = rect.w - (border.x+border.w) - (padding.x+padding.w), - .h = rect.h - (border.y+border.h) - (padding.y+padding.h), + .x = rect.x + border + padding.x, + .y = rect.y + border + padding.y, + .w = rect.w - (border*2) - (padding.x+padding.w), + .h = rect.h - (border*2) - (padding.y+padding.h), }, .rect.color = bg, .rect.radius = radius, diff --git a/lib/ugui.c3l/src/ugui_layout.c3 b/lib/ugui.c3l/src/ugui_layout.c3 index ab7db01..84eaf8b 100644 --- a/lib/ugui.c3l/src/ugui_layout.c3 +++ b/lib/ugui.c3l/src/ugui_layout.c3 @@ -144,22 +144,22 @@ fn Rect Ctx.position_element(&ctx, Elem *parent, Rect rect, Style* style) child_occupied = child_occupied.off(origin.add(rect.position())); Rect margin = style.margin; - Rect border = style.border; Rect padding = style.padding; + ushort border = style.border; // padding, grows both the placement and occupied area child_placement = child_placement.grow(padding.position().add(padding.size())); child_occupied = child_occupied.grow(padding.position().add(padding.size())); // border, grows both the placement and occupied area - child_placement = child_placement.grow(border.position().add(border.size())); - child_occupied = child_occupied.grow(border.position().add(border.size())); + child_placement = child_placement.grow({border*2, border*2}); + child_occupied = child_occupied.grow({border*2, border*2}); // margin, offsets the placement and grows the occupied area child_placement = child_placement.off(margin.position()); child_occupied = child_occupied.grow(margin.position().add(margin.size())); // oh yeah also adjust the rect if i was to grow - if (adapt_x) rect.w -= padding.x+padding.w + border.x+border.w + margin.x+margin.w; - if (adapt_y) rect.h -= padding.y+padding.h + border.y+border.h + margin.y+margin.h; + if (adapt_x) rect.w -= padding.x+padding.w + border*2 + margin.x+margin.w; + if (adapt_y) rect.h -= padding.y+padding.h + border*2 + margin.y+margin.h; // set the size child_placement = child_placement.grow(rect.size()); diff --git a/lib/ugui.c3l/src/ugui_style.c3 b/lib/ugui.c3l/src/ugui_style.c3 index 9e9727e..aa5d20b 100644 --- a/lib/ugui.c3l/src/ugui_style.c3 +++ b/lib/ugui.c3l/src/ugui_style.c3 @@ -7,8 +7,10 @@ import std::io; // global style, similar to the css box model struct Style { // css box model Rect padding; - Rect border; Rect margin; + ushort border; + ushort radius; + ushort size; Color bg; // background color Color fg; // foreground color @@ -16,14 +18,12 @@ struct Style { // css box model Color secondary; // secondary color Color accent; // accent color - ushort radius; - short size; } const Style DEFAULT_STYLE = { .margin = {2, 2, 2, 2}, - .border = {2, 2, 2, 2}, - .padding = {1, 1, 1, 1}, + .padding = {}, + .border = 2, .radius = 12, .size = 16, @@ -89,8 +89,8 @@ fn int Ctx.import_style_from_file(&ctx, String path) * Style can be serialized and deserialized with a subset of CSS *