zterm/examples/layout.zig

const std = @import("std");
const zterm = @import("zterm");

const App = zterm.App(union(enum) {
    send: []u21,
});

const log = std.log.scoped(.example);

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,
            .vtable = &.{
                .handle = handle,
                .content = content,
            },
        };
    }

    // 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);

                if (key.eql(.{ .cp = zterm.input.Enter }) or key.eql(.{ .cp = zterm.input.KpEnter }))
                    this.queue.push(.{ .send = try this.input.toOwnedSlice() });

                if (key.eql(.{ .cp = zterm.input.Backspace }) or key.eql(.{ .cp = zterm.input.Delete }) or key.eql(.{ .cp = zterm.input.KpDelete }))
                    _ = this.input.pop();
            },
            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;
        }
    }
};

pub fn main() !void {
    errdefer |err| log.err("Application Error: {any}", .{err});

    // TODO: maybe create own allocator as some sort of arena allocator to have consistent memory usage
    var gpa: std.heap.GeneralPurposeAllocator(.{}) = .init;
    defer {
        const deinit_status = gpa.deinit();
        if (deinit_status == .leak) {
            log.err("memory leak", .{});
        }
    }
    const allocator = gpa.allocator();

    var app: App = .init;
    var renderer = zterm.Renderer.Buffered.init(allocator);
    defer renderer.deinit();

    var element_wrapper: InputField = .init(allocator, &app.queue);
    defer element_wrapper.deinit();
    const element = element_wrapper.element();

    var container = try App.Container.init(allocator, .{
        .border = .{
            .separator = .{
                .enabled = true,
                .line = .double,
            },
        },
        .layout = .{
            .gap = 2,
            .padding = .all(5),
            .direction = .vertical,
        },
    }, .{});
    var box = try App.Container.init(allocator, .{
        .rectangle = .{ .fill = .blue },
        .layout = .{
            .gap = 1,
            .direction = .horizontal,
            .padding = .vertical(1),
        },
    }, .{});
    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 = .{
            .color = .light_blue,
            .sides = .vertical,
        },
    }, .{}));
    try container.append(try App.Container.init(allocator, .{
        .rectangle = .{ .fill = .blue },
    }, .{}));
    defer container.deinit(); // also de-initializes the children

    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 => {
                try container.handle(event);
                continue; // do not render
            },
            .quit => break,
            .resize => |size| try renderer.resize(size),
            .key => |key| {
                if (key.eql(.{ .cp = 'q' })) app.quit();

                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 = .{
                            .err = err,
                            .msg = "Spawning $EDITOR failed",
                        },
                    });
                }
            },
            .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 => {},
        }

        // NOTE: returned errors should be propagated back to the application
        container.handle(event) catch |err| app.postEvent(.{
            .err = .{
                .err = err,
                .msg = "Container Event handling failed",
            },
        });
        try renderer.render(@TypeOf(container), &container);
        try renderer.flush();
    }
}