fix(element/scrollable): render horizontal directed contents correctly

examples/container.zig

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

src/element.zig

@@ -113,7 +113,7 @@ pub fn Scrollable(Event: type) type {
                 // - how would I determine the required or necessary `Size`?
                 .resize => |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();
                     this.container_size = .{
                         .anchor = size.anchor,
@@ -122,6 +122,7 @@ pub fn Scrollable(Event: type) type {
                     };
                     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.Button.wheel_up => if (this.vertical) {
                         this.anchor.row -|= 1;
@@ -163,21 +164,21 @@ pub fn Scrollable(Event: type) type {
                 @memcpy(container_cells, container_cells_const);
             }
 
-            // TODO: render correct view port into the container_cells
             for (this.container.elements.items) |*e| {
                 const e_size = e.size;
                 const element_cells = try e.contents();
                 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;
-                blk: for (0..container_size.rows) |row| {
-                    for (0..container_size.cols) |col| {
+                blk: for (0..e_size.rows) |row| {
+                    for (0..e_size.cols) |col| {
                         const cell = element_cells[idx];
                         idx += 1;
 
-                        container_cells[anchor + (row * container_size.cols) + col].style = cell.style;
-                        container_cells[anchor + (row * container_size.cols) + col].cp = cell.cp;
+                        container_cells[anchor + (row * container_size.cols) + col] = cell;
 
                         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);
+            // TODO: render scrollbar according to configuration!
             for (0..size.rows) |row| {
                 for (0..size.cols) |col| {
                     cells[(row * size.cols) + col] = container_cells[anchor + (row * container_size.cols) + col];

src/main.zig

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