add(header): header with configurable title

src/main.zig

@@ -3,15 +3,13 @@ const std = @import("std");
 const vaxis = @import("vaxis");
 const zlog = @import("zlog");
 
+const widget = @import("widget.zig");
+
 const TextInput = vaxis.widgets.TextInput;
+const Event = widget.Event;
 
 pub const std_options = zlog.std_options;
 
-const Event = union(enum) {
-    key_press: vaxis.Key,
-    winsize: vaxis.Winsize,
-};
-
 pub fn main() !void {
     var gpa = std.heap.GeneralPurposeAllocator(.{}){};
     defer {
@@ -60,15 +58,18 @@ pub fn main() !void {
     var text_input = TextInput.init(alloc, &vx.unicode);
     defer text_input.deinit();
 
+    var header = try widget.Header.init(alloc, &vx.unicode);
+    defer header.deinit();
+
     // Sends queries to terminal to detect certain features. This should always
     // be called after entering the alt screen, if you are using the alt screen
     try vx.queryTerminal(tty.anyWriter(), 1 * std.time.ns_per_s);
 
     while (true) {
-        // nextEvent blocks until an event is in the queue
         const event = loop.nextEvent();
-        // exhaustive switching ftw. Vaxis will send events if your Event enum
+        // update widgets
-        // has the fields for those events (ie "key_press", "winsize")
+        header.update(event);
+
         switch (event) {
             .key_press => |key| {
                 color_idx = switch (color_idx) {
@@ -79,37 +80,32 @@ pub fn main() !void {
                     break;
                 } else if (key.matches('l', .{ .ctrl = true })) {
                     vx.queueRefresh();
+                } else if (key.matches(vaxis.Key.enter, .{})) {
+                    const title = alloc.alloc(u8, text_input.buf.buffer.len) catch @panic("OOM");
+                    @memcpy(title, text_input.buf.buffer);
+                    if (loop.tryPostEvent(.{ .title = title })) {
+                        text_input.clearAndFree();
+                    }
                 } else {
                     try text_input.update(.{ .key_press = key });
                 }
             },
-
-            // winsize events are sent to the application to ensure that all
-            // resizes occur in the main thread. This lets us avoid expensive
-            // locks on the screen. All applications must handle this event
-            // unless they aren't using a screen (IE only detecting features)
-            //
-            // The allocations are because we keep a copy of each cell to
-            // optimize renders. When resize is called, we allocated two slices:
-            // one for the screen, and one for our buffered screen. Each cell in
-            // the buffered screen contains an ArrayList(u8) to be able to store
-            // the grapheme for that cell. Each cell is initialized with a size
-            // of 1, which is sufficient for all of ASCII. Anything requiring
-            // more than one byte will incur an allocation on the first render
-            // after it is drawn. Thereafter, it will not allocate unless the
-            // screen is resized
             .winsize => |ws| try vx.resize(alloc, tty.anyWriter(), ws),
+            .title => |*title| {
+                alloc.free(title.*);
+            },
         }
 
-        // vx.window() returns the root window. This window is the size of the
+        var root_window = vx.window();
-        // terminal and can spawn child windows as logical areas. Child windows
+        root_window.clear();
-        // cannot draw outside of their bounds
+        try vx.render(tty.anyWriter()); // re-draw after clear!
-        const win = vx.window();
 
-        // Clear the entire space because we are drawing in immediate mode.
+        header.draw(root_window.child(.{
-        // vaxis double buffers the screen. This new frame will be compared to
+            .x_off = 0,
-        // the old and only updated cells will be drawn
+            .y_off = 0,
-        win.clear();
+            .height = .{ .limit = 2 },
+            .border = .{ .where = .bottom },
+        }));
 
         // Create a style
         const style: vaxis.Style = .{
@@ -117,9 +113,9 @@ pub fn main() !void {
         };
 
         // Create a bordered child window
-        const child = win.child(.{
+        const child = root_window.child(.{
-            .x_off = win.width / 2 - 20,
+            .x_off = root_window.width / 2 - 20,
-            .y_off = win.height / 2 - 3,
+            .y_off = root_window.height / 2 - 3,
             .width = .{ .limit = 40 },
             .height = .{ .limit = 3 },
             .border = .{

src/widget.zig

@@ -0,0 +1,61 @@
+//! Dynamic dispatch for widget implementations
+//! Each widget should at last implement these two methods:
+//! - update(this: *@This(), event: Event) void {}
+//! - draw(this: *@This(), win: vaxis.Window) void {}
+//!
+//! Create a `Widget` using `createFrom(object: anytype)` and use them through
+//! the defined interface. The widget will take care of calling the correct
+//! implementation of the corresponding underlying type.
+
+const vaxis = @import("vaxis");
+
+pub const Event = union(enum) {
+    key_press: vaxis.Key,
+    winsize: vaxis.Winsize,
+    title: []const u8,
+};
+
+const Ptr = usize;
+
+object: Ptr = undefined,
+vtable: *const VTable = undefined,
+
+const VTable = struct {
+    update: *const fn (this: *@This(), event: Event) void,
+    draw: *const fn (this: *@This(), win: vaxis.Window) void,
+};
+
+/// Update loop for a given widget to react to the provided `Event`. It may
+/// change its internal state, update variables, react to user input, etc.
+pub fn update(this: *@This(), event: Event) void {
+    this.vtable.update(this, event);
+}
+
+/// Draw a given widget using the provided `vaxis.Window`. The window controls
+/// the dimension one widget may take on the screen. The widget itself has no
+/// control over this.
+pub fn draw(this: *@This(), win: vaxis.Window) void {
+    this.vtable.draw(this, win);
+}
+
+pub fn createFrom(object: anytype) @This() {
+    return @This(){
+        .object = @intFromPtr(object),
+        .vtable = &.{
+            .update = struct {
+                fn update(this: *@This(), event: Event) void {
+                    const widget: @TypeOf(object) = @ptrFromInt(this.object);
+                    widget.update(event);
+                }
+            }.update,
+            .draw = struct {
+                fn draw(this: *@This(), win: vaxis.Window) void {
+                    const widget: @TypeOf(object) = @ptrFromInt(this.object);
+                    widget.draw(win);
+                }
+            }.draw,
+        },
+    };
+}
+
+pub const Header = @import("widget/Header.zig");

src/widget/Header.zig

@@ -0,0 +1,103 @@
+//! Header widget, which shows the name of the website and the main navigation entries
+const std = @import("std");
+const vaxis = @import("vaxis");
+
+const widget = @import("../widget.zig");
+
+const Event = widget.Event;
+
+allocator: std.mem.Allocator = undefined,
+unicode: *const vaxis.Unicode = undefined,
+title: ?[]const u8 = undefined,
+view: ?vaxis.widgets.View = undefined,
+
+pub fn init(allocator: std.mem.Allocator, unicode: *const vaxis.Unicode) !@This() {
+    return .{
+        .allocator = allocator,
+        .unicode = unicode,
+        .title = null,
+        .view = null,
+    };
+}
+
+pub fn deinit(this: *@This()) void {
+    if (this.view) |*view| {
+        view.*.deinit();
+    }
+    if (this.title) |*title| {
+        this.allocator.free(title.*);
+    }
+    this.* = undefined;
+}
+
+fn fillView(this: *@This()) void {
+    this.view.?.clear();
+
+    const msg = "Yves Biener";
+    for (msg, 0..) |_, i| {
+        const cell: vaxis.Cell = .{
+            // each cell takes a _grapheme_ as opposed to a single
+            // codepoint. This allows Vaxis to handle emoji properly,
+            // particularly with terminals that the Unicode Core extension
+            // (IE Mode 2027)
+            .char = .{ .grapheme = msg[i .. i + 1] },
+            .style = .{
+                .fg = .{ .index = 6 },
+                .bold = true,
+            },
+        };
+        this.view.?.writeCell(i, 0, cell);
+    }
+
+    if (this.title) |title| {
+        // TODO: this could be a static string on the heap (due to the size of `513`)
+        std.log.debug("this.title := {s}({d}) - width: {d}", .{ title, title.len, this.view.?.screen.width });
+        for (title, 0.., this.view.?.screen.width / 2..) |_, i, col| {
+            const cell: vaxis.Cell = .{
+                .char = .{ .grapheme = title[i .. i + 1] },
+                .style = .{
+                    .ul_style = .single,
+                },
+            };
+            this.view.?.writeCell(col, 0, cell);
+        }
+    }
+}
+
+/// Update loop for a given widget to react to the provided `Event`. It may
+/// change its internal state, update variables, react to user input, etc.
+pub fn update(this: *@This(), event: Event) void {
+    switch (event) {
+        .winsize => |ws| {
+            if (this.view) |*view| {
+                if (ws.rows != view.screen.width) {
+                    view.*.deinit();
+                    this.view = vaxis.widgets.View.init(this.allocator, this.unicode, .{ .width = ws.rows, .height = ws.cols }) catch @panic("OOM");
+                    this.fillView();
+                }
+            } else {
+                this.view = vaxis.widgets.View.init(this.allocator, this.unicode, .{ .width = ws.rows, .height = ws.cols }) catch @panic("OOM");
+                this.fillView();
+            }
+        },
+        .title => |title| {
+            if (this.title) |*t| {
+                this.allocator.free(t.*);
+            }
+            const t = this.allocator.alloc(u8, title.len) catch @panic("OOM");
+            @memcpy(t, title);
+            this.title = t;
+            this.fillView();
+        },
+        else => {},
+    }
+}
+
+/// Draw a given widget using the provided `vaxis.Window`. The window controls
+/// the dimension one widget may take on the screen. The widget itself has no
+/// control over this.
+pub fn draw(this: *@This(), win: vaxis.Window) void {
+    if (this.view) |*view| {
+        view.*.draw(win, .{});
+    }
+}