add(examples/elements): mouse clickable button

README.md

@@ -16,7 +16,7 @@ zig build --release=safe -Dexample=input run
 > [!NOTE]
 > Every example application can be quitted using `ctrl+c`.
 
-See the [wiki](https://gitea.yves-biener/yves-biener/zterm) for a showcase of the examples and the further details.
+See the [wiki](https://gitea.yves-biener/yves-biener/zterm/wiki) for a showcase of the examples and the further details.
 
 ## Usage
 

build.zig

@@ -6,6 +6,7 @@ pub fn build(b: *std.Build) void {
 
     const Examples = enum {
         // elements:
+        button,
         input,
         scrollable,
         // layouts:
@@ -38,9 +39,17 @@ pub fn build(b: *std.Build) void {
     //--- Examples ---
 
     // elements:
+    const button = b.addExecutable(.{
+        .name = "button",
+        .root_source_file = b.path("examples/elements/button.zig"),
+        .target = target,
+        .optimize = optimize,
+    });
+    button.root_module.addImport("zterm", lib);
+
     const input = b.addExecutable(.{
         .name = "input",
-        .root_source_file = b.path("examples/input.zig"),
+        .root_source_file = b.path("examples/elements/input.zig"),
         .target = target,
         .optimize = optimize,
     });
@@ -90,6 +99,7 @@ pub fn build(b: *std.Build) void {
     // mapping of user selected example to compile step
     const exe = switch (example) {
         // elements:
+        .button => button,
         .input => input,
         .scrollable => scrollable,
         // layouts:

examples/elements/button.zig

@@ -0,0 +1,106 @@
+const std = @import("std");
+const zterm = @import("zterm");
+
+const App = zterm.App(union(enum) {
+    click: [:0]const u8,
+});
+
+const log = std.log.scoped(.default);
+
+pub const Clickable = struct {
+    const text = "Press me";
+
+    queue: *App.Queue,
+
+    pub fn element(this: *@This()) App.Element {
+        return .{
+            .ptr = this,
+            .vtable = &.{
+                .handle = handle,
+                .content = content,
+            },
+        };
+    }
+
+    fn handle(ctx: *anyopaque, event: App.Event) !void {
+        const this: *@This() = @ptrCast(@alignCast(ctx));
+        switch (event) {
+            .mouse => |mouse| this.queue.push(.{ .click = @tagName(mouse.button) }),
+            else => {},
+        }
+    }
+
+    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));
+
+        const row: u16 = size.rows / 2 -| @as(u16, @truncate(text.len / 2));
+        const col: u16 = size.cols / 2 -| @as(u16, @truncate(text.len / 2));
+        const anchor = (row * size.cols) + col;
+
+        for (text, 0..) |cp, idx| {
+            cells[anchor + idx].style.fg = .black;
+            cells[anchor + idx].cp = cp;
+
+            // NOTE: do not write over the contents of this `Container`'s `Size`
+            if (anchor + idx == cells.len - 1) break;
+        }
+    }
+};
+
+pub fn main() !void {
+    errdefer |err| log.err("Application Error: {any}", .{err});
+
+    var gpa: std.heap.GeneralPurposeAllocator(.{}) = .init;
+    defer if (gpa.deinit() == .leak) {
+        log.err("memory leak", .{});
+    };
+
+    const allocator = gpa.allocator();
+
+    var app: App = .init;
+    var renderer = zterm.Renderer.Buffered.init(allocator);
+    defer renderer.deinit();
+
+    var clickable: Clickable = .{ .queue = &app.queue };
+    const element = clickable.element();
+
+    var container = try App.Container.init(allocator, .{
+        .rectangle = .{ .fill = .grey },
+        .layout = .{ .padding = .all(5) },
+    }, .{});
+    defer container.deinit();
+
+    try container.append(try App.Container.init(allocator, .{ .rectangle = .{ .fill = .light_grey } }, element));
+
+    try app.start();
+    defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
+
+    // event loop
+    while (true) {
+        const event = app.nextEvent();
+        log.debug("received event: {s}", .{@tagName(event)});
+
+        switch (event) {
+            .init => continue,
+            .quit => break,
+            .resize => |size| try renderer.resize(size),
+            .key => |key| if (key.eql(.{ .cp = 'c', .mod = .{ .ctrl = true } })) app.quit(),
+            .click => |button| {
+                log.info("Clicked with mouse using Button: {s}", .{button});
+            },
+            .err => |err| log.err("Received {s} with message: {s}", .{ @errorName(err.err), err.msg }),
+            else => {},
+        }
+
+        container.handle(event) catch |err| app.postEvent(.{
+            .err = .{
+                .err = err,
+                .msg = "Container Event handling failed",
+            },
+        });
+
+        try renderer.render(@TypeOf(container), &container);
+        try renderer.flush();
+    }
+}

examples/elements/input.zig

@@ -56,13 +56,14 @@ pub const InputField = struct {
 
         const row: u16 = 1;
         const col: u16 = 1;
+        const anchor = (row * size.cols) + col;
 
         for (this.input.items, 0..) |cp, idx| {
-            cells[(row * size.cols) + col + idx].style.fg = .black;
+            cells[anchor + idx].style.fg = .black;
-            cells[(row * size.cols) + col + idx].cp = cp;
+            cells[anchor + idx].cp = cp;
 
             // NOTE: do not write over the contents of this `Container`'s `Size`
-            if ((row * size.cols) + col + idx == cells.len - 1) break;
+            if (anchor + idx == cells.len - 1) break;
         }
     }
 };