add(example/elements): distinct different scrollable containers

examples/elements/scrollable.zig

@@ -23,7 +23,7 @@ pub const HelloWorldText = packed struct {
         // 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 -| (text.len / 2);
-        const anchor = (row * size.rows) + col;
+        const anchor = (row * size.cols) + col;
 
         for (0.., text) |idx, char| {
             cells[anchor + idx].style.fg = .black;
@@ -52,7 +52,7 @@ pub fn main() !void {
     var element_wrapper: HelloWorldText = .{};
     const element = element_wrapper.element();
 
-    var box = try App.Container.init(allocator, .{
+    var top_box = try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .blue },
         .layout = .{
             .gap = 1,
@@ -61,21 +61,36 @@ pub fn main() !void {
         },
         .min_size = .{ .rows = 50 },
     }, .{});
-    try box.append(try App.Container.init(allocator, .{
+    try top_box.append(try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .light_green },
     }, .{}));
-    try box.append(try App.Container.init(allocator, .{
+    try top_box.append(try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .light_green },
     }, element));
-    try box.append(try App.Container.init(allocator, .{
+    try top_box.append(try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .light_green },
     }, .{}));
-    defer box.deinit();
+    defer top_box.deinit();
 
-    var scrollable: App.Scrollable = .{
-        .container = box,
-        .vertical = true,
-    };
+    var bottom_box = try App.Container.init(allocator, .{
+        .border = .{ .separator = .{ .enabled = true } },
+        .rectangle = .{ .fill = .blue },
+        .layout = .{
+            .direction = .vertical,
+            .padding = .vertical(1),
+        },
+        .min_size = .{ .rows = 30 },
+    }, .{});
+    try bottom_box.append(try App.Container.init(allocator, .{
+        .rectangle = .{ .fill = .grey },
+    }, .{}));
+    try bottom_box.append(try App.Container.init(allocator, .{
+        .rectangle = .{ .fill = .grey },
+    }, element));
+    try bottom_box.append(try App.Container.init(allocator, .{
+        .rectangle = .{ .fill = .grey },
+    }, .{}));
+    defer bottom_box.deinit();
 
     var container = try App.Container.init(allocator, .{
         .border = .{
@@ -87,21 +102,17 @@ pub fn main() !void {
         .layout = .{
             .gap = 2,
             .padding = .all(5),
-            .direction = .horizontal,
+            .direction = .vertical,
         },
     }, .{});
-    try container.append(try App.Container.init(allocator, .{}, scrollable.element()));
+    defer container.deinit();
 
-    try container.append(try App.Container.init(allocator, .{
-        .border = .{
-            .color = .light_blue,
-            .sides = .vertical,
-        },
-    }, .{}));
-    try container.append(try App.Container.init(allocator, .{
-        .rectangle = .{ .fill = .blue },
-    }, .{}));
-    defer container.deinit(); // also de-initializes the children
+    // place empty container containing the element of the scrollable Container.
+    var scrollable_top: App.Scrollable = .init(top_box);
+    try container.append(try App.Container.init(allocator, .{}, scrollable_top.element()));
+
+    var scrollable_bottom: App.Scrollable = .init(bottom_box);
+    try container.append(try App.Container.init(allocator, .{}, scrollable_bottom.element()));
 
     try app.start();
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
@@ -112,37 +123,14 @@ pub fn main() !void {
         log.debug("received event: {s}", .{@tagName(event)});
 
         switch (event) {
-            .init => {
-                try container.handle(event);
-                continue; // do not render
-            },
+            .init => continue,
             .quit => break,
             .resize => |size| try renderer.resize(size),
-            .key => |key| {
-                if (key.eql(.{ .cp = 'q' })) app.quit();
-
-                // corresponding element could even be changed from the 'outside' (not forced through the event system)
-                // event system however allows for cross element communication (i.e. broadcasting messages, etc.)
-                if (key.eql(.{ .cp = input.Escape })) element_wrapper.text_color = .black;
-
-                if (key.eql(.{ .cp = 'n', .mod = .{ .ctrl = true } })) {
-                    try app.interrupt();
-                    defer app.start() catch @panic("could not start app event loop");
-                    var child = std.process.Child.init(&.{"hx"}, allocator);
-                    _ = child.spawnAndWait() catch |err| app.postEvent(.{
-                        .err = .{
-                            .err = err,
-                            .msg = "Spawning $EDITOR failed",
-                        },
-                    });
-                }
-            },
-            // NOTE: errors could be displayed in another container in case one was received, etc. to provide the user with feedback
+            .key => |key| if (key.eql(.{ .cp = 'c', .mod = .{ .ctrl = true } })) app.quit(),
             .err => |err| log.err("Received {s} with message: {s}", .{ @errorName(err.err), err.msg }),
             else => {},
         }
 
-        // NOTE: returned errors should be propagated back to the application
         container.handle(event) catch |err| app.postEvent(.{
             .err = .{
                 .err = err,