feat(scrollable): make Container scrollable through Element Scrollable

examples/container.zig

@@ -1,11 +1,32 @@
 const std = @import("std");
 const zterm = @import("zterm");
 
-const App = zterm.App(union(enum) {});
+const App = zterm.App(union(enum) {
+    send: []u21,
+});
 
 const log = std.log.scoped(.example);
 
-pub const ExampleElement = packed struct {
+pub const InputField = struct {
+    // TODO: I would need the following features:
+    // - current position of the input (i.e. a cursor)
+    // - gnu readline keybindings
+    // - truncate inputs?
+    input: std.ArrayList(u21),
+    /// The thread safe `App.Event` queue used to send events to the application's event loop.
+    queue: *App.Queue,
+
+    pub fn init(allocator: std.mem.Allocator, queue: *App.Queue) @This() {
+        return .{
+            .input = .init(allocator),
+            .queue = queue,
+        };
+    }
+
+    pub fn deinit(this: *@This()) void {
+        this.input.deinit();
+    }
+
     pub fn element(this: *@This()) App.Element {
         return .{
             .ptr = this,
@@ -16,27 +37,43 @@ pub const ExampleElement = packed struct {
         };
     }
 
-    // example function to render contents for a `Container`
-    fn content(ctx: *anyopaque, cells: []zterm.Cell, size: zterm.Size) !void {
-        _ = ctx;
-        std.debug.assert(cells.len == @as(usize, size.cols) * @as(usize, size.rows));
+    // example function to handle events for a `Container`
+    fn handle(ctx: *anyopaque, event: App.Event) !void {
+        const this: *@This() = @ptrCast(@alignCast(ctx));
+        switch (event) {
+            .key => |key| {
+                if (key.isAscii()) try this.input.append(key.cp);
 
-        // NOTE: error should only be returned here in case an in-recoverable exception has occurred
-        const row = size.rows / 2;
-        const col = size.cols / 2 -| 3;
+                if (key.eql(.{ .cp = zterm.input.Enter }) or key.eql(.{ .cp = zterm.input.KpEnter }))
+                    this.queue.push(.{ .send = try this.input.toOwnedSlice() });
 
-        for (0..5) |c| {
-            cells[(row * size.cols) + col + c].style.fg = .black;
-            cells[(row * size.cols) + col + c].cp = '-';
+                if (key.eql(.{ .cp = zterm.input.Backspace }) or key.eql(.{ .cp = zterm.input.Delete }) or key.eql(.{ .cp = zterm.input.KpDelete }))
+                    _ = this.input.popOrNull();
+            },
+            else => {},
         }
     }
 
-    // example function to handle events for a `Container`
-    fn handle(ctx: *anyopaque, event: App.Event) !void {
-        _ = ctx;
-        switch (event) {
-            .init => log.debug(".init event", .{}),
-            else => {},
+    // example function to render contents for a `Container`
+    fn content(ctx: *anyopaque, cells: []zterm.Cell, size: zterm.Size) !void {
+        const this: *@This() = @ptrCast(@alignCast(ctx));
+        std.debug.assert(cells.len == @as(usize, size.cols) * @as(usize, size.rows));
+
+        if (this.input.items.len == 0) return;
+
+        const row = size.rows / 2;
+        const col: u16 = 5;
+
+        for (this.input.items, 0..) |cp, idx| {
+            cells[(row * size.cols) + col + idx].style.fg = .black;
+            cells[(row * size.cols) + col + idx].cp = cp;
+            // NOTE: line wrapping happens automatically due to the way the container cells are constructed
+            // - it would also be possible to limit the line to cols you want to display (i.e. then only for a single row)
+            // - for areas you would rather go ahead and create another
+            //   container and fit the text inside of that container (so it is dynamic to the screen size, etc.)
+
+            // NOTE: do not write over the contents of this `Container`'s `Size`
+            if ((row * size.cols) + col + idx == cells.len - 1) break;
         }
     }
 };
@@ -58,7 +95,8 @@ pub fn main() !void {
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
-    var element_wrapper = ExampleElement{};
+    var element_wrapper: InputField = .init(allocator, &app.queue);
+    defer element_wrapper.deinit();
     const element = element_wrapper.element();
 
     var container = try App.Container.init(allocator, .{
@@ -73,7 +111,7 @@ pub fn main() !void {
             .padding = .all(5),
             .direction = .vertical,
         },
-    }, element);
+    }, .{});
     var box = try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .blue },
         .layout = .{
@@ -82,15 +120,15 @@ pub fn main() !void {
             .padding = .vertical(1),
         },
     }, .{});
-    try box.append(try App.Container.init(allocator, .{
-        .rectangle = .{ .fill = .light_green },
-    }, element));
     try box.append(try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .light_green },
     }, .{}));
     try box.append(try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .light_green },
     }, element));
+    try box.append(try App.Container.init(allocator, .{
+        .rectangle = .{ .fill = .light_green },
+    }, .{}));
     try container.append(box);
     try container.append(try App.Container.init(allocator, .{
         .border = .{
@@ -124,6 +162,7 @@ pub fn main() !void {
                 if (key.eql(.{ .cp = 'n', .mod = .{ .ctrl = true } })) {
                     try app.interrupt();
                     defer app.start() catch @panic("could not start app event loop");
+                    // FIX: the rendering is afterwards incorrect (wrong state of the double buffered renderer?)
                     var child = std.process.Child.init(&.{"hx"}, allocator);
                     _ = child.spawnAndWait() catch |err| app.postEvent(.{
                         .err = .{
@@ -133,6 +172,12 @@ pub fn main() !void {
                     });
                 }
             },
+            .send => |input| {
+                // NOTE: as the input in owned by the caller, this means that it still needs to be freed
+                defer allocator.free(input);
+
+                log.info("accepted user input: {any}", .{input});
+            },
             // NOTE: errors could be displayed in another container in case one was received, etc. to provide the user with feedback
             .err => |err| log.err("Received {s} with message: {s}", .{ @errorName(err.err), err.msg }),
             else => {},