zterm/examples/elements/input.zig

const QuitText = struct {
    const text = "Press ctrl+c to quit.";

    pub fn element(this: *@This()) App.Element {
        return .{ .ptr = this, .vtable = &.{ .content = content } };
    }

    fn content(ctx: *anyopaque, cells: []zterm.Cell, size: zterm.Point) !void {
        _ = ctx;
        assert(cells.len == @as(usize, size.x) * @as(usize, size.y));

        const row = 2;
        const col = size.x / 2 -| (text.len / 2);
        const anchor = (row * size.x) + col;

        for (text, 0..) |cp, idx| {
            cells[anchor + idx].style.fg = .white;
            cells[anchor + idx].style.bg = .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;
        }
    }
};

// TODO create an own `Element` implementation from this
const InputField = struct {
    /// Offset from the end describing the current position of the cursor.
    cursor_offset: usize = 0,
    /// Configuration for the InputField.
    configuration: Configuration,
    /// Array holding the value of the input.
    input: std.ArrayList(u21),
    /// Reference to the app's queue to issue the associated event to trigger when completing the input.
    queue: *App.Queue,

    /// Configuration for InputField's.
    pub const Configuration = struct {
        color: Color = .default,
    };

    // TODO make the event to trigger user defined (needs to be `comptime`)
    // - can this even be agnostic to `u8` / `u21`?

    pub fn init(allocator: std.mem.Allocator, queue: *App.Queue, configuration: Configuration) @This() {
        return .{
            .configuration = configuration,
            .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,
            },
        };
    }

    fn handle(ctx: *anyopaque, event: App.Event) !void {
        const this: *@This() = @ptrCast(@alignCast(ctx));
        switch (event) {
            .key => |key| {
                assert(this.cursor_offset >= 0 and this.cursor_offset <= this.input.items.len);

                // readline commands
                if (key.eql(.{ .cp = zterm.input.Left }) or key.eql(.{ .cp = zterm.input.KpLeft }) or key.eql(.{ .cp = 'b', .mod = .{ .ctrl = true } })) {
                    if (this.cursor_offset < this.input.items.len) this.cursor_offset += 1;
                }

                if (key.eql(.{ .cp = zterm.input.Right }) or key.eql(.{ .cp = zterm.input.KpRight }) or key.eql(.{ .cp = 'f', .mod = .{ .ctrl = true } }))
                    this.cursor_offset -|= 1;

                if (key.eql(.{ .cp = 'e', .mod = .{ .ctrl = true } })) this.cursor_offset = 0;

                if (key.eql(.{ .cp = 'a', .mod = .{ .ctrl = true } })) this.cursor_offset = this.input.items.len;

                if (key.eql(.{ .cp = 'k', .mod = .{ .ctrl = true } })) {
                    while (this.cursor_offset > 0) {
                        _ = this.input.pop();
                        this.cursor_offset -= 1;
                    }
                }

                if (key.eql(.{ .cp = 'u', .mod = .{ .ctrl = true } })) {
                    const len = this.input.items.len - this.cursor_offset;
                    for (0..len) |_| _ = this.input.orderedRemove(0);
                    this.cursor_offset = this.input.items.len;
                }

                if (key.eql(.{ .cp = 'w', .mod = .{ .ctrl = true } })) {
                    var non_whitespace = false;
                    while (this.cursor_offset < this.input.items.len) {
                        if (non_whitespace and this.input.items[this.input.items.len - this.cursor_offset - 1] == ' ') break;

                        // see backspace
                        const removed = if (this.cursor_offset == 0) this.input.pop() else this.input.orderedRemove(this.input.items.len - this.cursor_offset - 1);
                        if (removed != ' ') non_whitespace = true;
                    }
                }

                if (key.eql(.{ .cp = 'b', .mod = .{ .alt = true } }) or key.eql(.{ .cp = zterm.input.Left, .mod = .{ .ctrl = true } }) or key.eql(.{ .cp = zterm.input.KpLeft, .mod = .{ .ctrl = true } })) {
                    var non_whitespace = false;
                    while (this.cursor_offset < this.input.items.len) {
                        if (non_whitespace and this.input.items[this.input.items.len - this.cursor_offset - 1] == ' ') break;

                        // see backspace
                        this.cursor_offset += 1;
                        if (this.cursor_offset == this.input.items.len) break;
                        const next = this.input.items[this.input.items.len - this.cursor_offset - 1];
                        if (next != ' ') non_whitespace = true;
                    }
                }

                if (key.eql(.{ .cp = 'f', .mod = .{ .alt = true } }) or key.eql(.{ .cp = zterm.input.Right, .mod = .{ .ctrl = true } }) or key.eql(.{ .cp = zterm.input.KpRight, .mod = .{ .ctrl = true } })) {
                    var non_whitespace = false;
                    while (this.cursor_offset > 0) {
                        if (non_whitespace and this.input.items[this.input.items.len - this.cursor_offset - 1] == ' ') {
                            this.cursor_offset += 1; // correct cursor position back again to make sure the cursor is not on the whitespace, but at the end of the jumped word
                            break;
                        }

                        // see backspace
                        this.cursor_offset -= 1;
                        const next = this.input.items[this.input.items.len - this.cursor_offset - 1];
                        if (next != ' ') non_whitespace = true;
                    }
                }

                // usual input keys
                if (key.isAscii()) try this.input.insert(this.input.items.len - this.cursor_offset, key.cp);

                if (key.eql(.{ .cp = zterm.input.Backspace })) {
                    if (this.cursor_offset < this.input.items.len) {
                        _ = if (this.cursor_offset == 0) this.input.pop() else this.input.orderedRemove(this.input.items.len - this.cursor_offset - 1);
                    }
                }

                if (key.eql(.{ .cp = zterm.input.Delete }) or key.eql(.{ .cp = zterm.input.KpDelete })) {
                    if (this.cursor_offset > 0) {
                        _ = this.input.orderedRemove(this.input.items.len - this.cursor_offset);
                        this.cursor_offset -= 1;
                    }
                }

                // TODO enter to accept?
                // - shift+enter is not recognized by the input reader of `zterm`, so currently it is not possible to add newlines into the text box?
                if (key.eql(.{ .cp = zterm.input.Enter }) or key.eql(.{ .cp = zterm.input.KpEnter })) {
                    this.queue.push(.{ .accept = try this.input.toOwnedSlice() });
                    this.cursor_offset = 0;
                }
            },
            else => {},
        }
    }

    fn content(ctx: *anyopaque, cells: []zterm.Cell, size: zterm.Point) !void {
        const this: *@This() = @ptrCast(@alignCast(ctx));
        assert(cells.len == @as(usize, size.x) * @as(usize, size.y));

        const offset = if (this.input.items.len - this.cursor_offset + 1 >= cells.len) this.input.items.len + 1 - cells.len else 0;
        for (this.input.items[offset..], 0..) |cp, idx| {
            cells[idx].style.fg = this.configuration.color;
            cells[idx].cp = cp;
            // display ellipse at the beginning
            if (offset > 0 and idx == 0) cells[idx].cp = '…';

            // NOTE do not write over the contents of this `Container`'s `Size`
            if (idx == cells.len - 1) {
                // display ellipse at the end
                if (this.input.items.len >= cells.len and this.cursor_offset > 0) cells[idx].cp = '…';
                break;
            }
        }
        if (this.input.items.len < cells.len)
            cells[this.input.items.len - this.cursor_offset].style.cursor = true
        else
            cells[this.input.items.len - offset - this.cursor_offset].style.cursor = true;
    }
};

const MouseDraw = struct {
    position: ?zterm.Point = null,

    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.position = .{ .x = mouse.x, .y = mouse.y },
            else => this.position = null,
        }
    }

    fn content(ctx: *anyopaque, cells: []zterm.Cell, size: zterm.Point) !void {
        assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
        const this: *@This() = @ptrCast(@alignCast(ctx));

        if (this.position) |pos| {
            const idx = @as(usize, size.x) * @as(usize, pos.y) + @as(usize, pos.x);
            cells[idx].cp = 'x';
            cells[idx].style.fg = .red;
        }
    }
};

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

    var gpa: std.heap.DebugAllocator(.{}) = .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 input_field: InputField = .init(allocator, &app.queue, .{
        .color = .black,
    });
    defer input_field.deinit();

    var mouse_draw: MouseDraw = .{};
    var second_mouse_draw: MouseDraw = .{};
    var quit_text: QuitText = .{};

    var container = try App.Container.init(allocator, .{
        .rectangle = .{ .fill = .grey },
        .layout = .{
            .direction = .vertical,
            .padding = .all(5),
        },
    }, quit_text.element());
    defer container.deinit();

    try container.append(try App.Container.init(allocator, .{
        .rectangle = .{ .fill = .light_grey },
        .size = .{
            .grow = .horizontal,
            .dim = .{ .y = 1 },
        },
    }, input_field.element()));

    var nested_container: App.Container = try .init(allocator, .{
        .border = .{
            .sides = .all,
            .color = .black,
        },
        .rectangle = .{ .fill = .light_grey },
        .layout = .{
            .separator = .{
                .enabled = true,
                .color = .black,
            },
        },
    }, .{});
    try nested_container.append(try .init(allocator, .{
        .rectangle = .{ .fill = .light_grey },
    }, mouse_draw.element()));
    try nested_container.append(try .init(allocator, .{
        .rectangle = .{ .fill = .light_grey },
    }, second_mouse_draw.element()));
    try container.append(nested_container);

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

        // pre event handling
        switch (event) {
            .key => |key| if (key.eql(.{ .cp = 'c', .mod = .{ .ctrl = true } })) app.quit(),
            .accept => |input| {
                defer allocator.free(input);
                var string = try allocator.alloc(u8, input.len);
                defer allocator.free(string);
                for (0.., input) |i, char| string[i] = @intCast(char);
                log.debug("Accepted input '{s}'", .{string});
            },
            .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",
            },
        });

        // post event handling
        switch (event) {
            .quit => break,
            else => {},
        }

        container.resize(try renderer.resize());
        container.reposition(.{});
        try renderer.render(@TypeOf(container), &container);
        try renderer.flush();
    }
}

pub const panic = App.panic_handler;
const log = std.log.scoped(.default);

const std = @import("std");
const assert = std.debug.assert;
const zterm = @import("zterm");
const Color = zterm.Color;

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