fix(element/scrollable): render horizontal directed contents correctly
All checks were successful
Zig Project Action / Lint, Spell-check and test zig project (push) Successful in 46s

This commit is contained in:
2025-02-19 22:23:32 +01:00
parent 86b3e7d4ed
commit cc831a5cdf
3 changed files with 15 additions and 12 deletions

View File

@@ -116,7 +116,7 @@ pub fn main() !void {
.rectangle = .{ .fill = .blue }, .rectangle = .{ .fill = .blue },
.layout = .{ .layout = .{
.gap = 1, .gap = 1,
.direction = .vertical, .direction = .horizontal,
.padding = .vertical(1), .padding = .vertical(1),
}, },
}, .{}); }, .{});

View File

@@ -113,7 +113,7 @@ pub fn Scrollable(Event: type) type {
// - how would I determine the required or necessary `Size`? // - how would I determine the required or necessary `Size`?
.resize => |size| { .resize => |size| {
this.size = size; this.size = size;
// TODO: not just pass through the given size, but rather the size that is necessary for scrollable content // TODO: scrollbar space - depending on configuration and only if necessary?
const min_size = this.container.minSize(); const min_size = this.container.minSize();
this.container_size = .{ this.container_size = .{
.anchor = size.anchor, .anchor = size.anchor,
@@ -122,6 +122,7 @@ pub fn Scrollable(Event: type) type {
}; };
try this.container.handle(.{ .resize = this.container_size }); try this.container.handle(.{ .resize = this.container_size });
}, },
// TODO: other means to scroll except with the mouse? (i.e. Ctrl-u/d, k/j, etc.?)
.mouse => |mouse| switch (mouse.button) { .mouse => |mouse| switch (mouse.button) {
Mouse.Button.wheel_up => if (this.vertical) { Mouse.Button.wheel_up => if (this.vertical) {
this.anchor.row -|= 1; this.anchor.row -|= 1;
@@ -163,21 +164,21 @@ pub fn Scrollable(Event: type) type {
@memcpy(container_cells, container_cells_const); @memcpy(container_cells, container_cells_const);
} }
// TODO: render correct view port into the container_cells
for (this.container.elements.items) |*e| { for (this.container.elements.items) |*e| {
const e_size = e.size; const e_size = e.size;
const element_cells = try e.contents(); const element_cells = try e.contents();
defer e.allocator.free(element_cells); defer e.allocator.free(element_cells);
const anchor = (@as(usize, e_size.anchor.row -| container_size.anchor.row) * @as(usize, container_size.cols)) + @as(usize, e_size.anchor.col -| container_size.anchor.col); const anchor = (@as(usize, e_size.anchor.row -| container_size.anchor.row) * @as(usize, container_size.cols)) +
@as(usize, e_size.anchor.col -| container_size.anchor.col);
var idx: usize = 0; var idx: usize = 0;
blk: for (0..container_size.rows) |row| { blk: for (0..e_size.rows) |row| {
for (0..container_size.cols) |col| { for (0..e_size.cols) |col| {
const cell = element_cells[idx]; const cell = element_cells[idx];
idx += 1; idx += 1;
container_cells[anchor + (row * container_size.cols) + col].style = cell.style; container_cells[anchor + (row * container_size.cols) + col] = cell;
container_cells[anchor + (row * container_size.cols) + col].cp = cell.cp;
if (element_cells.len == idx) break :blk; if (element_cells.len == idx) break :blk;
} }
@@ -185,6 +186,7 @@ pub fn Scrollable(Event: type) type {
} }
const anchor = (@as(usize, this.anchor.row) * @as(usize, container_size.cols)) + @as(usize, this.anchor.col); const anchor = (@as(usize, this.anchor.row) * @as(usize, container_size.cols)) + @as(usize, this.anchor.col);
// TODO: render scrollbar according to configuration!
for (0..size.rows) |row| { for (0..size.rows) |row| {
for (0..size.cols) |col| { for (0..size.cols) |col| {
cells[(row * size.cols) + col] = container_cells[anchor + (row * container_size.cols) + col]; cells[(row * size.cols) + col] = container_cells[anchor + (row * container_size.cols) + col];

View File

@@ -79,10 +79,11 @@ pub fn main() !void {
.rectangle = .{ .fill = .blue }, .rectangle = .{ .fill = .blue },
.layout = .{ .layout = .{
.gap = 1, .gap = 1,
.direction = .vertical, // FIX: horizontal rendering?
.direction = .horizontal,
.padding = .vertical(1), .padding = .vertical(1),
}, },
.min_size = .{ .rows = 100 }, .min_size = .{ .cols = 150 },
}, .{}); }, .{});
try box.append(try App.Container.init(allocator, .{ try box.append(try App.Container.init(allocator, .{
.rectangle = .{ .fill = .light_green }, .rectangle = .{ .fill = .light_green },
@@ -97,7 +98,7 @@ pub fn main() !void {
var scrollable: App.Scrollable = .{ var scrollable: App.Scrollable = .{
.container = box, .container = box,
.vertical = true, .horizontal = true,
}; };
var container = try App.Container.init(allocator, .{ var container = try App.Container.init(allocator, .{
@@ -110,7 +111,7 @@ pub fn main() !void {
.layout = .{ .layout = .{
.gap = 2, .gap = 2,
.padding = .all(5), .padding = .all(5),
.direction = .vertical, .direction = .horizontal,
}, },
}, .{}); }, .{});
try container.append(try App.Container.init(allocator, .{}, scrollable.element())); try container.append(try App.Container.init(allocator, .{}, scrollable.element()));