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