add(layout/padding): layout configuration for padding

With minor code layout fixes
This commit is contained in:
2025-02-08 13:11:27 +01:00
parent d326deac97
commit 29ae75adf5
2 changed files with 33 additions and 13 deletions

View File

@@ -163,15 +163,11 @@ pub const Rectangle = struct {
/// NOTE: used as background color when rendering! such that it renders the
/// children accordingly without removing the coloring of the `Rectangle`
fill: Color = .default,
/// Configure the corners of the `Rectangle`
corners: enum(u1) {
squared,
rounded,
} = .squared,
// NOTE: caller owns `cells` slice and ensures that `cells.len == size.cols * size.rows`
pub fn contents(this: @This(), cells: []Cell, size: Size) void {
std.debug.assert(cells.len == size.cols * size.rows);
for (0..size.rows) |row| {
for (0..size.cols) |col| {
cells[(row * size.cols) + col].style.bg = this.fill;
@@ -186,6 +182,12 @@ pub const Scroll = packed struct {
horizontal: bool = false,
/// Enable vertical scrolling for this element
vertical: bool = false,
// TODO: enable changing the anchor position of this container along with its children
// - for that the contents need to be layed out in a way that is independent of the actual size of the container
// TODO: rendering enhancements:
// - render corresponding scroll-bars?
};
/// Layout configuration struct
@@ -283,38 +285,46 @@ pub fn Container(comptime Event: type) type {
});
this.size = size;
if (this.elements.items.len == 0)
break :resize;
if (this.elements.items.len == 0) break :resize;
const separator = this.properties.border.separator;
const sides = this.properties.border.sides;
const padding = this.properties.layout.padding;
var gap = this.properties.layout.gap;
if (separator.enabled) gap += 1; // the gap will be used for the rendering of the separator line
const len: u16 = @truncate(this.elements.items.len);
const element_cols = blk: {
var cols = size.cols - gap * (len - 1);
if (sides.left) cols -= 1;
if (sides.right) cols -= 1;
cols -= padding.left + padding.right;
break :blk @divTrunc(cols, len);
};
const element_rows = blk: {
var rows = size.rows - gap * (len - 1);
if (sides.top) rows -= 1;
if (sides.bottom) rows -= 1;
rows -= padding.top + padding.bottom;
break :blk @divTrunc(rows, len);
};
var offset: u16 = 0;
var offset: u16 = switch (this.properties.layout.direction) {
.horizontal => padding.left,
.vertical => padding.top,
};
var overflow = switch (this.properties.layout.direction) {
.horizontal => blk: {
var cols = size.cols - gap * (len - 1);
if (sides.left) cols -= 1;
if (sides.right) cols -= 1;
cols -= padding.left + padding.right;
break :blk cols - element_cols * len;
},
.vertical => blk: {
var rows = size.rows - gap * (len - 1);
if (sides.top) rows -= 1;
if (sides.bottom) rows -= 1;
rows -= padding.top + padding.bottom;
break :blk rows - element_rows * len;
},
};
@@ -372,6 +382,12 @@ pub fn Container(comptime Event: type) type {
element_size.anchor.col += 1;
}
// padding resizing
element_size.anchor.row += padding.top;
element_size.anchor.col += padding.left;
element_size.rows -= padding.top + padding.bottom;
element_size.cols -= padding.left + padding.right;
try element.handle(.{ .resize = element_size });
}
},