diff --git a/src/main.zig b/src/main.zig index b57d8a8..312854a 100644 --- a/src/main.zig +++ b/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 - // has the fields for those events (ie "key_press", "winsize") + // update widgets + 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 - // terminal and can spawn child windows as logical areas. Child windows - // cannot draw outside of their bounds - const win = vx.window(); + var root_window = vx.window(); + root_window.clear(); + try vx.render(tty.anyWriter()); // re-draw after clear! - // Clear the entire space because we are drawing in immediate mode. - // vaxis double buffers the screen. This new frame will be compared to - // the old and only updated cells will be drawn - win.clear(); + header.draw(root_window.child(.{ + .x_off = 0, + .y_off = 0, + .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(.{ - .x_off = win.width / 2 - 20, - .y_off = win.height / 2 - 3, + const child = root_window.child(.{ + .x_off = root_window.width / 2 - 20, + .y_off = root_window.height / 2 - 3, .width = .{ .limit = 40 }, .height = .{ .limit = 3 }, .border = .{ diff --git a/src/widget.zig b/src/widget.zig new file mode 100644 index 0000000..a566682 --- /dev/null +++ b/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"); diff --git a/src/widget/Header.zig b/src/widget/Header.zig new file mode 100644 index 0000000..25728a6 --- /dev/null +++ b/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, .{}); + } +}