From 7595e3b5bbd07ebd66d19dd4f77cee1daaa54dbe Mon Sep 17 00:00:00 2001 From: Yves Biener Date: Sun, 29 Jun 2025 11:19:09 +0200 Subject: [PATCH] feat(element/input): text input element implementation Moved implementation from example/input as a standalone `Element` implementation, which is directly used by the example instead. The provided argument is the `App.Event`'s event that should be triggered on acceptance for the contents of the Input `Element`. Currently only `[]u21` strings are supported, but in the future also `[]u8` strings shall be supported and automatically converted when pushed as an `App.Event` into the app's queue. --- examples/elements/input.zig | 167 +----------------------- src/app.zig | 1 + src/element.zig | 253 ++++++++++++++++++++++++++++++++++++ 3 files changed, 255 insertions(+), 166 deletions(-) diff --git a/examples/elements/input.zig b/examples/elements/input.zig index 090a61a..4c8d3e8 100644 --- a/examples/elements/input.zig +++ b/examples/elements/input.zig @@ -24,169 +24,6 @@ const QuitText = struct { } }; -// 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, @@ -232,9 +69,7 @@ pub fn main() !void { var renderer = zterm.Renderer.Buffered.init(allocator); defer renderer.deinit(); - var input_field: InputField = .init(allocator, &app.queue, .{ - .color = .black, - }); + var input_field: App.Input(.accept) = .init(allocator, &app.queue, .init(.black)); defer input_field.deinit(); var mouse_draw: MouseDraw = .{}; diff --git a/src/app.zig b/src/app.zig index 8d13b1c..80d214a 100644 --- a/src/app.zig +++ b/src/app.zig @@ -418,6 +418,7 @@ pub fn App(comptime E: type) type { pub const Element = element.Element(Event); pub const Alignment = element.Alignment(Event); pub const Scrollable = element.Scrollable(Event); + pub const Input = element.Input(Event, Queue); pub const Queue = queue.Queue(Event, 256); }; } diff --git a/src/element.zig b/src/element.zig index 328ed3d..31c33e0 100644 --- a/src/element.zig +++ b/src/element.zig @@ -365,8 +365,190 @@ pub fn Scrollable(Event: type) type { }; } +pub fn Input(Event: type, Queue: type) fn (accept_event: meta.FieldEnum(Event)) type { + const input_struct = struct { + pub fn input_fn(accept_event: meta.FieldEnum(Event)) type { + // TODO create `comptime` check for `accept_event` that checks for the associated type of the field (of the `App.Event` union) which would need to be a `[]u8` or `[]u21` + // -> for the corresponding type generate the corresponding conversion calls to trigger the correct event automatically! + return 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: *Queue, + + /// Configuration for InputField's. + pub const Configuration = struct { + color: Color, + + pub fn init(color: Color) @This() { + return .{ + .color = color, + }; + } + }; + + // 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: *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()) Element(Event) { + return .{ + .ptr = this, + .vtable = &.{ + .handle = handle, + .content = content, + }, + }; + } + + fn handle(ctx: *anyopaque, event: 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 = input.Left }) or key.eql(.{ .cp = 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 = input.Right }) or key.eql(.{ .cp = 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 = input.Left, .mod = .{ .ctrl = true } }) or key.eql(.{ .cp = 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 = input.Right, .mod = .{ .ctrl = true } }) or key.eql(.{ .cp = 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 = 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 = input.Delete }) or key.eql(.{ .cp = 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 = input.Enter }) or key.eql(.{ .cp = input.KpEnter })) { + this.queue.push(@unionInit( + Event, + @tagName(accept_event), + try this.input.toOwnedSlice(), + )); + this.cursor_offset = 0; + } + }, + else => {}, + } + } + + fn content(ctx: *anyopaque, cells: []Cell, size: 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; + } + }; + } + }; + return input_struct.input_fn; +} + const std = @import("std"); const assert = std.debug.assert; +const meta = std.meta; const build_options = @import("build_options"); const input = @import("input.zig"); const Container = @import("container.zig").Container; @@ -820,3 +1002,74 @@ test "alignment bottom" { .y = 20, }, &container, @import("test/element/alignment.bottom.zon")); } + +test "input element" { + // FIX correctly generate the `.zon` files for the cell equivalence test (see below) + const allocator = std.testing.allocator; + const event = @import("event.zig"); + const Event = event.mergeTaggedUnions(event.SystemEvent, union(enum) { + accept: []u21, + }); + const testing = @import("testing.zig"); + const Queue = @import("queue").Queue(Event, 256); + + var container: Container(Event) = try .init(allocator, .{}, .{}); + defer container.deinit(); + + const size: Point = .{ + .x = 30, + .y = 20, + }; + var queue: Queue = .{}; + + const input_container: Container(Event) = try .init(allocator, .{ + .rectangle = .{ .fill = .green }, + .size = .{ + .dim = .{ .x = 12, .y = 2 }, + .grow = .fixed, + }, + }, .{}); + var input_element: Input(Event, Queue)(.accept) = .init(input_container, &queue, .{.black}); + defer input_element.deinit(); + + try container.append(try .init(allocator, .{}, input_element.element())); + + var renderer: testing.Renderer = .init(allocator, size); + defer renderer.deinit(); + + container.resize(size); + container.reposition(.{}); + try renderer.render(Container(event.SystemEvent), &container); + // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/input.without.text.zon"), renderer.screen); + + // press 'a' 15 times + for (0..15) |_| try container.handle(.{ + .key = .{ .cp = 'a' }, + }); + try renderer.render(Container(event.SystemEvent), &container); + // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/input.with.text.zon"), renderer.screen); + + // press 'a' 15 times + for (0..15) |_| try container.handle(.{ + .key = .{ .cp = 'a' }, + }); + try renderer.render(Container(event.SystemEvent), &container); + // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/input.with.text.overflow.zon"), renderer.screen); + + // test the accepting of the `Element` + try container.handle(.{ + .key = .{ .cp = input.Enter }, + }); + const accept_event = queue.pop(); + try std.testing.expectEqual(.accept, std.meta.activeTag(accept_event)); + try std.testing.expectEqual(30, switch (accept_event) { + .accept => |input_content| input_content.len, + else => unreachable, + }); + + // free allocated resources + switch (accept_event) { + .accept => |slice| allocator.free(slice), + else => unreachable, + } +}