yves-biener/zterm
1
0
Fork 0
Code Issues Pull Requests Actions Wiki Activity

feat(element/input): text input element implementation
Some checks failed
Zig Project Action / Lint, Spell-check and test zig project (push) Failing after 14s
Details

Browse Source 
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.
This commit is contained in:
Yves Biener
2025-06-29 11:19:09 +02:00
parent 2ba0ed85fb
commit 7595e3b5bb
3 changed files with 255 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
examples/elements/input.zig
View File

@@ -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 = .{};

1
src/app.zig
View File

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

253
src/element.zig
View File

@@ -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,
}
}