alema/ugui
1
0
Fork 0
Code Issues Pull Requests Activity

corrected layout offset

Browse Source
This commit is contained in:
Alessandro Mauri 2025-09-14 20:32:31 +02:00
parent d33d72a074
commit 622b648d26
10 changed files with 51 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/ugui.c3l/src/ugui_core.c3
View File

@ -308,7 +308,8 @@ $if DEBUG == 1:
$endif
// sort the command buffer by the z-index
ctx.cmd_queue.sort()!;
// FIXME: sorting the buffer fucks with scissor commands that have to be kept in place
//ctx.cmd_queue.sort()!;
// foreach (i, c: ctx.cmd_queue) {
// io::printf("[%d]: ", i);

49
lib/ugui.c3l/src/ugui_layout.c3
View File

@ -106,17 +106,6 @@ macro Point Elem.content_space(&e)
};
}
// Update the parent element's grow children counter
fn void update_parent_grow(Elem* child, Elem* parent)
{
switch (parent.layout.dir) {
case ROW:
if (child.layout.w.@is_grow()) parent.layout.grow_children++;
case COLUMN:
if (child.layout.h.@is_grow()) parent.layout.grow_children++;
}
}
// Update the parent element's children size
fn void update_parent_size(Elem* child, Elem* parent)
{
@ -129,9 +118,11 @@ fn void update_parent_size(Elem* child, Elem* parent)
case ROW: // on rows grow the ch width by the child width and only grow ch height if it exceeds
pl.children.w += @exact(child_size.x);
pl.children.h = pl.children.h.comb_max(@exact(child_size.y));
if (child.layout.w.@is_grow()) parent.layout.grow_children++;
case COLUMN: // do the opposite on column
pl.children.w = pl.children.w.comb_max(@exact(child_size.x));
pl.children.h += @exact(child_size.y);
if (child.layout.h.@is_grow()) parent.layout.grow_children++;
}
}
@ -187,8 +178,6 @@ fn void resolve_grow_elements(Elem* e, Elem* p)
if (e.layout.w.@is_grow()) {
if (p.layout.dir == ROW) { // grow along the axis, divide the parent size
short slot = (short)((p.content_space().x - p.layout.occupied) / p.layout.grow_children);
// the space slot accounts for the total size, while the element bounds does not account
// for the margin
e.bounds.w = slot;
p.layout.grow_children--;
p.layout.occupied += slot;
@ -216,8 +205,8 @@ fn void resolve_placement(Elem* c, Elem* p)
Layout* cl = &c.layout;
Point off = {
.x = p.bounds.x + pl.origin.x,
.y = p.bounds.y + pl.origin.y,
.x = p.bounds.x + pl.origin.x + pl.content_offset.x,
.y = p.bounds.y + pl.origin.y + pl.content_offset.y,
};
switch (pl.anchor) {
@ -226,7 +215,7 @@ fn void resolve_placement(Elem* c, Elem* p)
c.bounds.y = off.y;
case LEFT:
c.bounds.x = off.x;
c.bounds.y = off.y + p.bounds.h/2;
c.bounds.y = off.y + p.content_space().y/2;
if (pl.dir == COLUMN) {
c.bounds.y -= pl.occupied/2;
} else if (pl.dir == ROW) {
@ -234,15 +223,15 @@ fn void resolve_placement(Elem* c, Elem* p)
}
case BOTTOM_LEFT:
c.bounds.x = off.x;
c.bounds.y = off.y + p.bounds.h ;
c.bounds.y = off.y + p.content_space().y ;
if (pl.dir == COLUMN) {
c.bounds.y -= pl.occupied;
} else if (pl.dir == ROW) {
c.bounds.y -= c.bounds.h;
}
case BOTTOM:
c.bounds.x = off.x + p.bounds.w/2;
c.bounds.y = off.y + p.bounds.h;
c.bounds.x = off.x + p.content_space().x/2;
c.bounds.y = off.y + p.content_space().y;
if (pl.dir == COLUMN) {
c.bounds.y -= pl.occupied;
c.bounds.x -= c.bounds.w/2;
@ -251,8 +240,8 @@ fn void resolve_placement(Elem* c, Elem* p)
c.bounds.x -= pl.occupied/2;
}
case BOTTOM_RIGHT:
c.bounds.x = off.x + p.bounds.w;
c.bounds.y = off.y + p.bounds.h;
c.bounds.x = off.x + p.content_space().x;
c.bounds.y = off.y + p.content_space().y;
if (pl.dir == COLUMN) {
c.bounds.y -= pl.occupied;
c.bounds.x -= c.bounds.w;
@ -261,8 +250,8 @@ fn void resolve_placement(Elem* c, Elem* p)
c.bounds.x -= pl.occupied;
}
case RIGHT:
c.bounds.x = off.x + p.bounds.w;
c.bounds.y = off.y + p.bounds.h/2;
c.bounds.x = off.x + p.content_space().x;
c.bounds.y = off.y + p.content_space().y/2;
if (pl.dir == COLUMN) {
c.bounds.y -= pl.occupied/2;
c.bounds.x -= c.bounds.w;
@ -271,7 +260,7 @@ fn void resolve_placement(Elem* c, Elem* p)
c.bounds.x -= pl.occupied;
}
case TOP_RIGHT:
c.bounds.x = off.x + p.bounds.w;
c.bounds.x = off.x + p.content_space().x;
c.bounds.y = off.y;
if (pl.dir == COLUMN) {
c.bounds.x -= c.bounds.w;
@ -279,7 +268,7 @@ fn void resolve_placement(Elem* c, Elem* p)
c.bounds.x -= pl.occupied;
}
case TOP:
c.bounds.x = off.x + p.bounds.w/2;
c.bounds.x = off.x + p.content_space().x/2;
c.bounds.y = off.y;
if (pl.dir == COLUMN) {
c.bounds.x -= c.bounds.w/2;
@ -287,8 +276,8 @@ fn void resolve_placement(Elem* c, Elem* p)
c.bounds.x -= pl.occupied/2;
}
case CENTER:
c.bounds.x = off.x + p.bounds.w/2;
c.bounds.y = off.y + p.bounds.h/2;
c.bounds.x = off.x + p.content_space().x/2;
c.bounds.y = off.y + p.content_space().y/2;
if (pl.dir == COLUMN) {
c.bounds.x -= c.bounds.w/2;
c.bounds.y -= pl.occupied/2;
@ -314,9 +303,7 @@ fn void Ctx.layout_element_tree(&ctx)
isz current = ctx.tree.level_order_it(0, &cursor)!!;
for (; current >= 0; current = ctx.tree.level_order_it(0, &cursor)!!) {
Elem* p = ctx.find_elem(ctx.tree.get(current))!!;
// offset the origin by the margin
p.layout.origin.x = p.layout.content_offset.x;
p.layout.origin.y = p.layout.content_offset.y;
//if (ctx.tree.is_root(current)!!) p = &&{};
// RESOLVE KNOWN DIMENSIONS
isz ch_cur = 0;
@ -349,7 +336,7 @@ fn void Ctx.layout_element_tree(&ctx)
Elem* c = ctx.find_elem(ctx.tree.get(ch))!!;
if (ctx.tree.is_root(ch)!!) {
resolve_placement(p, &&{});
update_children_bounds(c, p);
update_children_bounds(p, &&{});
} else {
resolve_placement(c, p);
update_children_bounds(c, p);

2
lib/ugui.c3l/src/ugui_style.c3
View File

@ -24,7 +24,7 @@ const Style DEFAULT_STYLE = {
.margin = {2, 2, 2, 2},
.border = {2, 2, 2, 2},
.padding = {1, 1, 1, 1},
.radius = 12,
.radius = 0,
.size = 16,
.bg = 0x282828ffu.@to_rgba(),

3
lib/ugui.c3l/src/widgets/ugui_button.c3
View File

@ -44,7 +44,6 @@ fn ElemEvents? Ctx.button_id(&ctx, Id id, String label, String icon)
elem.layout.text = ctx.measure_string(label)!;
elem.layout.content_offset = style.margin + style.border + style.padding;
update_parent_grow(elem, parent);
update_parent_size(elem, parent);
elem.events = ctx.get_elem_events(elem);
@ -113,7 +112,6 @@ fn void? Ctx.checkbox_id(&ctx, Id id, String description, bool* active, String t
elem.layout.text = ctx.measure_string(description)!;
elem.layout.content_offset = style.margin + style.border + style.padding;
update_parent_grow(elem, parent);
update_parent_size(elem, parent);
elem.events = ctx.get_elem_events(elem);
@ -188,7 +186,6 @@ fn void? Ctx.toggle_id(&ctx, Id id, String description, bool* active)
elem.layout.text = ctx.measure_string(description)!;
elem.layout.content_offset = style.margin + style.border + style.padding;
update_parent_grow(elem, parent);
update_parent_size(elem, parent);
elem.events = ctx.get_elem_events(elem);

13
lib/ugui.c3l/src/widgets/ugui_div.c3
View File

@ -68,10 +68,6 @@ fn void? Ctx.div_begin_id(&ctx,
elem.div.scroll_size = slider_style.size ? slider_style.size : (style.size ? style.size : DEFAULT_STYLE.size);
elem.div.z_index = parent.div.z_index + 1;
// update the ctx scissor
ctx.div_scissor = elem.bounds;
ctx.push_scissor(elem.bounds, elem.div.z_index)!;
// update layout with correct info
elem.layout = {
.w = width,
@ -81,11 +77,12 @@ fn void? Ctx.div_begin_id(&ctx,
.content_offset = style.margin + style.border + style.padding,
};
// update parent grow children
update_parent_grow(elem, parent);
ctx.push_rect(elem.bounds.pad(style.margin), elem.div.z_index, style)!;
// update the ctx scissor, it HAS to be after drawing the background
ctx.div_scissor = elem.bounds.pad(elem.layout.content_offset);
ctx.push_scissor(elem.bounds.pad(elem.layout.content_offset), elem.div.z_index)!;
elem.events = ctx.get_elem_events(elem);
// TODO: check active
@ -132,7 +129,7 @@ fn Id? Ctx.div_end(&ctx)
// the active_div returns to the parent of the current one
ctx.active_div = ctx.tree.parentof(ctx.active_div)!;
Elem* parent = ctx.get_parent()!;
ctx.div_scissor = parent.bounds;
ctx.div_scissor = parent.bounds.pad(parent.layout.content_offset);
ctx.reset_scissor(elem.div.z_index)!;
update_parent_size(elem, parent);

2
lib/ugui.c3l/src/widgets/ugui_slider.c3
View File

@ -29,7 +29,6 @@ fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Size w, Size h, float* value, floa
elem.layout.w = w;
elem.layout.h = h;
elem.layout.content_offset = style.margin + style.border + style.padding;
update_parent_grow(elem, parent);
update_parent_size(elem, parent);
Rect bg_bounds = elem.bounds.pad(style.margin);
@ -93,7 +92,6 @@ fn ElemEvents? Ctx.slider_ver_id(&ctx, Id id, Size w, Size h, float* value, floa
elem.layout.w = w;
elem.layout.h = h;
elem.layout.content_offset = style.margin + style.border + style.padding;
update_parent_grow(elem, parent);
update_parent_size(elem, parent);
// 2. Layout

1
lib/ugui.c3l/src/widgets/ugui_sprite.c3
View File

@ -19,7 +19,6 @@ fn void? Ctx.sprite_id(&ctx, Id id, String name)
elem.layout.w = elem.layout.children.w = @exact(sprite.w);
elem.layout.h = elem.layout.children.h = @exact(sprite.h);
update_parent_grow(elem, parent);
update_parent_size(elem, parent);
Id tex_id = ctx.sprite_atlas.id;

3
lib/ugui.c3l/src/widgets/ugui_text.c3
View File

@ -29,7 +29,6 @@ fn void? Ctx.text_id(&ctx, Id id, String text)
elem.layout.text = elem.text.size;
elem.layout.content_offset = style.margin + style.border + style.padding;
update_parent_grow(elem, parent);
update_parent_size(elem, parent);
ctx.layout_string(text, elem.bounds.pad(elem.layout.content_offset), TOP_LEFT, parent.div.z_index, style.fg)!;
@ -59,7 +58,6 @@ fn ElemEvents? Ctx.text_box_id(&ctx, Id id, Size w, Size h, TextEdit* te)
elem.layout.text = elem.text.size;
elem.layout.content_offset = style.margin + style.border + style.padding;
update_parent_grow(elem, parent);
update_parent_size(elem, parent);
// check input and update the text
@ -70,6 +68,7 @@ fn ElemEvents? Ctx.text_box_id(&ctx, Id id, Size w, Size h, TextEdit* te)
}
// draw the box
Rect bg_bounds = elem.bounds.pad(style.margin);
Rect text_bounds = elem.bounds.pad(elem.layout.content_offset);
ctx.push_rect(bg_bounds, parent.div.z_index, style)!;

1
resources/style.css
View File

@ -7,6 +7,7 @@ default {
border: 1;
padding: 0;
margin: 0;
radius: 0;
}
button {