yves-biener/zterm
1
0
Fork 0
Code Issues Pull Requests Actions Wiki Activity

fix(container/border): correct location and rendering of separators between child elements

Browse Source
This commit is contained in:
Yves Biener
2025-02-15 11:10:37 +01:00
parent 26d31a38de
commit a6aa6e5150
2 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/container.zig
View File

@@ -28,10 +28,9 @@ pub fn main() !void {
.color = .blue,
.corners = .rounded,
.sides = .all(),
.separator = .{ .enabled = false },
.separator = .{ .enabled = true },
},
.layout = .{
.gap = 2,
.padding = .all(5),
.direction = .vertical,
},

31
src/container.zig
View File

@@ -95,43 +95,45 @@ pub const Border = packed struct {
}
}
// TODO: the separator should be rendered regardless of the gap
if (this.separator.enabled) {
// calculate where the separator would need to be
const element_cols = blk: {
var cols = size.cols - layout.gap * (len - 1);
if (this.sides.left) cols -= 1;
if (this.sides.right) cols -= 1;
cols -= layout.padding.left + layout.padding.right;
break :blk @divTrunc(cols, len);
};
const element_rows = blk: {
var rows = size.rows - layout.gap * (len - 1);
if (this.sides.top) rows -= 1;
if (this.sides.bottom) rows -= 1;
rows -= layout.padding.top + layout.padding.bottom;
break :blk @divTrunc(rows, len);
};
const gap = blk: {
var gap = layout.gap / 2;
if (layout.gap % 2 > 0) gap += 1;
break :blk gap;
var offset: u16 = switch (layout.direction) {
.horizontal => layout.padding.left,
.vertical => layout.padding.top,
};
var overflow = switch (layout.direction) {
.horizontal => blk: {
var cols = size.cols - layout.gap * (len - 1);
if (this.sides.left) cols -= 1;
if (this.sides.right) cols -= 1;
cols -= layout.padding.left + layout.padding.right;
break :blk cols - element_cols * len;
},
.vertical => blk: {
var rows = size.rows - layout.gap * (len - 1);
if (this.sides.top) rows -= 1;
if (this.sides.bottom) rows -= 1;
rows -= layout.padding.top + layout.padding.bottom;
break :blk rows - element_rows * len;
},
};
switch (layout.direction) {
.horizontal => {
var offset: u16 = gap;
offset += (layout.gap + 1) / 2;
for (0..len - 1) |_| {
var cols = element_cols;
if (overflow > 0) {
@@ -148,7 +150,7 @@ pub const Border = packed struct {
}
},
.vertical => {
var offset: u16 = gap;
offset += (layout.gap + 1) / 2;
for (0..len - 1) |_| {
var rows = element_rows;
if (overflow > 0) {
@@ -283,11 +285,12 @@ pub fn Container(comptime Event: type) type {
if (this.elements.items.len == 0) break :resize;
const separator = this.properties.border.separator;
if (this.properties.border.separator.enabled) this.properties.layout.gap += 1;
const layout = this.properties.layout;
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 padding = layout.padding;
const gap = layout.gap;
const len: u16 = @truncate(this.elements.items.len);
const element_cols = blk: {
@@ -304,11 +307,11 @@ pub fn Container(comptime Event: type) type {
rows -= padding.top + padding.bottom;
break :blk @divTrunc(rows, len);
};
var offset: u16 = switch (this.properties.layout.direction) {
var offset: u16 = switch (layout.direction) {
.horizontal => padding.left,
.vertical => padding.top,
};
var overflow = switch (this.properties.layout.direction) {
var overflow = switch (layout.direction) {
.horizontal => blk: {
var cols = size.cols - gap * (len - 1);
if (sides.left) cols -= 1;
@@ -329,7 +332,7 @@ pub fn Container(comptime Event: type) type {
// - don't render them then accordingly -> avoid index out of bounce accesses!
for (this.elements.items) |*element| {
var element_size: Size = undefined;
switch (this.properties.layout.direction) {
switch (layout.direction) {
.horizontal => {
var cols = element_cols;
if (overflow > 0) {