fix(elements/scrollable): nested container rendering

src/element.zig

@@ -126,6 +126,27 @@ pub fn Scrollable(Event: type) type {
             }
         }
 
+        fn render_container(container: Container(Event), cells: []Cell, container_size: Size) !void {
+            const size = container.size;
+            const contents = try container.contents();
+            defer container.allocator.free(contents);
+
+            const anchor = (@as(usize, size.anchor.row -| container_size.anchor.row) * @as(usize, container_size.cols)) +
+                @as(usize, size.anchor.col -| container_size.anchor.col);
+
+            var idx: usize = 0;
+            blk: for (0..size.rows) |row| {
+                for (0..size.cols) |col| {
+                    cells[anchor + (row * container_size.cols) + col] = contents[idx];
+                    idx += 1;
+
+                    if (contents.len == idx) break :blk;
+                }
+            }
+
+            for (container.elements.items) |child| try render_container(child, cells, size);
+        }
+
         fn content(ctx: *anyopaque, cells: []Cell, size: Size) !void {
             const this: *@This() = @ptrCast(@alignCast(ctx));
             std.debug.assert(cells.len == @as(usize, this.size.cols) * @as(usize, this.size.rows));
@@ -139,26 +160,8 @@ pub fn Scrollable(Event: type) type {
                 @memcpy(container_cells, container_cells_const);
             }
 
-            for (this.container.elements.items) |*e| {
+            // FIX this is not resolving the rendering recursively! This means that the content is only shown for the first children
-                const e_size = e.size;
+            for (this.container.elements.items) |child| try render_container(child, container_cells, container_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);
-
-                var idx: usize = 0;
-                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] = cell;
-
-                        if (element_cells.len == idx) break :blk;
-                    }
-                }
-            }
 
             const anchor = (@as(usize, this.anchor.row) * @as(usize, container_size.cols)) + @as(usize, this.anchor.col);
             // TODO: render scrollbar according to configuration!

src/render.zig

@@ -71,12 +71,9 @@ pub const Buffered = struct {
 
         blk: for (0..size.rows) |row| {
             for (0..size.cols) |col| {
-                const cell = cells[idx];
+                vs[anchor + (row * this.size.cols) + col] = cells[idx];
                 idx += 1;
 
-                vs[anchor + (row * this.size.cols) + col].style = cell.style;
-                vs[anchor + (row * this.size.cols) + col].cp = cell.cp;
-
                 if (cells.len == idx) break :blk;
             }
         }