add(style): cursor style to indicate a cursor position

No event-based re-sizing, instead each re-render resizes by default.

examples/demo.zig

@@ -75,7 +75,7 @@ pub fn main() !void {
     }, .{}));
     defer box.deinit();
 
-    var scrollable: App.Scrollable = .{ .container = box };
+    var scrollable: App.Scrollable = .init(box);
 
     var container = try App.Container.init(allocator, .{
         .layout = .{
@@ -87,15 +87,54 @@ pub fn main() !void {
     }, quit_text.element());
     try container.append(try App.Container.init(allocator, .{}, scrollable.element()));
 
-    try container.append(try App.Container.init(allocator, .{
+    var nested_container: App.Container = try .init(allocator, .{
+        .layout = .{
+            .direction = .vertical,
+            .separator = .{
+                .enabled = true,
+            },
+        },
+    }, .{});
+    var inner_container: App.Container = try .init(allocator, .{
+        .layout = .{
+            .direction = .vertical,
+        },
         .border = .{
             .color = .light_blue,
             .sides = .all,
         },
+    }, .{});
+    try inner_container.append(try .init(allocator, .{
+        .rectangle = .{
+            .fill = .blue,
+        },
         .size = .{
-            .dim = .{ .x = 100 },
+            .grow = .horizontal,
+            .dim = .{ .y = 5 },
         },
     }, .{}));
+    try inner_container.append(try .init(allocator, .{
+        .rectangle = .{
+            .fill = .red,
+        },
+        .size = .{
+            .grow = .horizontal,
+            .dim = .{ .y = 5 },
+        },
+    }, .{}));
+    try inner_container.append(try .init(allocator, .{
+        .rectangle = .{
+            .fill = .green,
+        },
+    }, .{}));
+    try nested_container.append(inner_container);
+    try nested_container.append(try .init(allocator, .{
+        .size = .{
+            .grow = .horizontal,
+            .dim = .{ .y = 1 },
+        },
+    }, .{}));
+    try container.append(nested_container);
     try container.append(try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .blue },
         .size = .{

examples/elements/input.zig

@@ -86,10 +86,46 @@ const InputField = struct {
 
         for (this.input.items, 0..) |cp, idx| {
             cells[anchor + idx].style.fg = .black;
+            cells[anchor + idx].style.cursor = false;
             cells[anchor + idx].cp = cp;
 
             // NOTE do not write over the contents of this `Container`'s `Size`
             if (anchor + idx == cells.len - 1) break;
+
+            if (idx == this.input.items.len - 1) cells[anchor + idx + 1].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 {
+        std.debug.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;
         }
     }
 };
@@ -109,17 +145,47 @@ pub fn main() !void {
     var input_field: InputField = .init(allocator, &app.queue);
     defer input_field.deinit();
 
+    var mouse_draw: MouseDraw = .{};
+    var second_mouse_draw: MouseDraw = .{};
     var quit_text: QuitText = .{};
 
-    const element = input_field.element();
-
     var container = try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .grey },
-        .layout = .{ .padding = .all(5) },
+        .layout = .{
+            .direction = .vertical,
+            .padding = .all(5),
+        },
     }, quit_text.element());
     defer container.deinit();
 
-    try container.append(try App.Container.init(allocator, .{ .rectangle = .{ .fill = .light_grey } }, element));
+    try container.append(try App.Container.init(allocator, .{
+        .rectangle = .{ .fill = .light_grey },
+        .size = .{
+            .grow = .horizontal,
+            .dim = .{ .y = 10 },
+        },
+    }, 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});

examples/elements/scrollable.zig

@@ -156,10 +156,10 @@ pub fn main() !void {
     defer container.deinit();
 
     // place empty container containing the element of the scrollable Container.
-    var scrollable_top: App.Scrollable = .{ .container = top_box };
+    var scrollable_top: App.Scrollable = .init(top_box);
     try container.append(try App.Container.init(allocator, .{}, scrollable_top.element()));
 
-    var scrollable_bottom: App.Scrollable = .{ .container = bottom_box };
+    var scrollable_bottom: App.Scrollable = .init(bottom_box);
     try container.append(try App.Container.init(allocator, .{}, scrollable_bottom.element()));
 
     try app.start();

examples/styles/palette.zig

@@ -63,7 +63,7 @@ pub fn main() !void {
         if (comptime field.value == 0) continue; // zterm.Color.default == 0 -> skip
         try box.append(try App.Container.init(allocator, .{ .rectangle = .{ .fill = @enumFromInt(field.value) } }, .{}));
     }
-    var scrollable: App.Scrollable = .{ .container = box };
+    var scrollable: App.Scrollable = .init(box);
     try container.append(try App.Container.init(allocator, .{}, scrollable.element()));
 
     try app.start();

examples/styles/text.zig

@@ -118,7 +118,7 @@ pub fn main() !void {
     }, text_styles.element());
     defer box.deinit();
 
-    var scrollable: App.Scrollable = .{ .container = box };
+    var scrollable: App.Scrollable = .init(box);
     try container.append(try App.Container.init(allocator, .{}, scrollable.element()));
 
     try app.start();

src/app.zig

@@ -44,13 +44,13 @@ pub fn App(comptime E: type) type {
         const element = @import("element.zig");
         pub const Element = element.Element(Event);
         pub const Scrollable = element.Scrollable(Event);
+        pub const Exec = element.Exec(Event, Queue);
         pub const Queue = queue.Queue(Event, 256);
 
         queue: Queue,
-        thread: ?std.Thread,
+        thread: ?std.Thread = null,
         quit_event: std.Thread.ResetEvent,
         termios: ?std.posix.termios = null,
-        attached_handler: bool = false,
 
         pub const SignalHandler = struct {
             context: *anyopaque,
@@ -59,32 +59,14 @@ pub fn App(comptime E: type) type {
 
         pub const init: @This() = .{
             .queue = .{},
-            .thread = null,
             .quit_event = .{},
-            .termios = null,
-            .attached_handler = false,
         };
 
         pub fn start(this: *@This()) !void {
             if (this.thread) |_| return;
 
-            if (!this.attached_handler) {
-                var winch_act = std.posix.Sigaction{
-                    .handler = .{ .handler = @This().handleWinch },
-                    .mask = std.posix.empty_sigset,
-                    .flags = 0,
-                };
-                std.posix.sigaction(std.posix.SIG.WINCH, &winch_act, null);
-
-                try registerWinch(.{
-                    .context = this,
-                    .callback = @This().winsizeCallback,
-                });
-                this.attached_handler = true;
-
-                // post init event (as the very first element to be in the queue - event loop)
-                this.postEvent(.init);
-            }
+            // post init event (as the very first element to be in the queue - event loop)
+            this.postEvent(.init);
 
             this.quit_event.reset();
             this.thread = try std.Thread.spawn(.{}, @This().run, .{this});
@@ -139,27 +121,6 @@ pub fn App(comptime E: type) type {
             this.queue.push(e);
         }
 
-        fn winsizeCallback(ptr: *anyopaque) void {
-            const this: *@This() = @ptrCast(@alignCast(ptr));
-            _ = this;
-            // this.postEvent(.{ .size = terminal.getTerminalSize() });
-        }
-
-        var winch_handler: ?SignalHandler = null;
-
-        fn registerWinch(handler: SignalHandler) !void {
-            if (winch_handler) |_| {
-                @panic("Cannot register another WINCH handler.");
-            }
-            winch_handler = handler;
-        }
-
-        fn handleWinch(_: c_int) callconv(.C) void {
-            if (winch_handler) |handler| {
-                handler.callback(handler.context);
-            }
-        }
-
         fn run(this: *@This()) !void {
             // thread to read user inputs
             var buf: [256]u8 = undefined;

src/color.zig

@@ -20,6 +20,8 @@ pub const Color = enum(u8) {
     white,
     // TODO add further colors as described in https://gist.github.com/ConnerWill/d4b6c776b509add763e17f9f113fd25b # Color / Graphics Mode - 256 Colors
 
+    // TODO might be useful to use the std.ascii stuff!
+
     pub inline fn write(this: Color, writer: anytype, comptime coloring: enum { fg, bg, ul }) !void {
         if (this == .default) {
             switch (coloring) {

src/container.zig

@@ -1,4 +1,5 @@
 const std = @import("std");
+const input = @import("input.zig");
 
 const isTaggedUnion = @import("event.zig").isTaggedUnion;
 
@@ -697,13 +698,11 @@ pub fn Container(comptime Event: type) type {
                     .y = @max(size.y, this.properties.size.dim.y),
                 },
             };
-            log.debug("fit_size returning: {any}", .{this.size});
             return this.size;
         }
 
         /// growable implicitly requires the root `Container` to have a set a size property to the size of the available terminal screen
         fn grow_resize(this: *@This(), max_size: Point) void {
-            log.debug("grow_size: {any}", .{this.size});
             const layout = this.properties.layout;
             var remainder = switch (layout.direction) {
                 .horizontal => max_size.x -| (layout.padding.left + layout.padding.right),
@@ -787,6 +786,10 @@ pub fn Container(comptime Event: type) type {
 
                 for (this.elements.items) |child| {
                     if (child.properties.size.grow == .fixed) continue;
+                    switch (layout.direction) {
+                        .horizontal => if (child.properties.size.grow == .vertical) continue,
+                        .vertical => if (child.properties.size.grow == .horizontal) continue,
+                    }
 
                     const size = switch (layout.direction) {
                         .horizontal => child.size.x,
@@ -817,9 +820,11 @@ pub fn Container(comptime Event: type) type {
                         switch (layout.direction) {
                             .horizontal => if (child.properties.size.grow != .vertical) {
                                 child.size.x += size_to_correct;
+                                remainder -|= size_to_correct;
                             },
                             .vertical => if (child.properties.size.grow != .horizontal) {
                                 child.size.y += size_to_correct;
+                                remainder -|= size_to_correct;
                             },
                         }
                         if (overflow > 0) {
@@ -836,7 +841,6 @@ pub fn Container(comptime Event: type) type {
                                 },
                             }
                         }
-                        remainder -|= size_to_correct;
                     }
                 }
             }
@@ -867,7 +871,12 @@ pub fn Container(comptime Event: type) type {
         pub fn handle(this: *@This(), event: Event) !void {
             switch (event) {
                 .mouse => |mouse| if (mouse.in(this.origin, this.size)) {
-                    try this.element.handle(event);
+                    // the element receives the mouse event with relative position
+                    std.debug.assert(mouse.x >= this.origin.x and mouse.y >= this.origin.y);
+                    var relative_mouse: input.Mouse = mouse;
+                    relative_mouse.x -= this.origin.x;
+                    relative_mouse.y -= this.origin.y;
+                    try this.element.handle(.{ .mouse = relative_mouse });
                     for (this.elements.items) |*element| try element.handle(event);
                 },
                 else => {

src/element.zig

@@ -78,6 +78,10 @@ pub fn Scrollable(Event: type) type {
         /// The actual `Container`, that is scrollable.
         container: Container(Event),
 
+        pub fn init(container: Container(Event)) @This() {
+            return .{ .container = container };
+        }
+
         pub fn element(this: *@This()) Element(Event) {
             return .{
                 .ptr = this,
@@ -222,7 +226,7 @@ test "scrollable vertical" {
     }, .{}));
     defer box.deinit();
 
-    var scrollable: Scrollable(event.SystemEvent) = .{ .container = box };
+    var scrollable: Scrollable(event.SystemEvent) = .init(box);
 
     var container: Container(event.SystemEvent) = try .init(allocator, .{
         .border = .{
@@ -300,7 +304,7 @@ test "scrollable horizontal" {
     }, .{}));
     defer box.deinit();
 
-    var scrollable: Scrollable(event.SystemEvent) = .{ .container = box };
+    var scrollable: Scrollable(event.SystemEvent) = .init(box);
 
     var container: Container(event.SystemEvent) = try .init(allocator, .{
         .border = .{

src/input.zig

@@ -68,6 +68,8 @@ pub const Key = packed struct {
         return std.meta.eql(this, other);
     }
 
+    // TODO might be useful to use the std.ascii stuff!
+
     /// Determine if the `Key` is an ascii character that can be printed to
     /// the screen. This means that the code point of the `Key` is an ascii
     /// character between 32 - 255 (with the exception of 127 = Delete) and no

src/render.zig

@@ -88,7 +88,9 @@ pub const Buffered = struct {
 
     /// Write *virtual screen* to alternate screen (should be called once and last during each render loop iteration in the main loop).
     pub fn flush(this: *@This()) !void {
+        try terminal.hideCursor();
         // TODO measure timings of rendered frames?
+        var cursor_position: ?Point = null;
         const writer = terminal.writer();
         const s = this.screen;
         const vs = this.virtual_screen;
@@ -99,12 +101,20 @@ pub const Buffered = struct {
                 const cvs = vs[idx];
                 if (cs.eql(cvs)) continue;
 
+                if (cvs.style.cursor) cursor_position = .{
+                    .x = @truncate(col),
+                    .y = @truncate(row),
+                };
                 // render differences found in virtual screen
-                try terminal.setCursorPosition(.{ .y = @truncate(row + 1), .x = @truncate(col + 1) });
+                try terminal.setCursorPosition(.{ .y = @truncate(row), .x = @truncate(col) });
                 try cvs.value(writer);
                 // update screen to be the virtual screen for the next frame
                 s[idx] = vs[idx];
             }
         }
+        if (cursor_position) |point| {
+            try terminal.showCursor();
+            try terminal.setCursorPosition(point);
+        }
     }
 };

src/style.zig

@@ -37,6 +37,7 @@ pub const Emphasis = enum(u8) {
 fg: Color = .default,
 bg: Color = .default,
 ul: Color = .default,
+cursor: bool = false,
 ul_style: Underline = .off,
 emphasis: []const Emphasis,
 
@@ -44,6 +45,8 @@ pub fn eql(this: Style, other: Style) bool {
     return std.meta.eql(this, other);
 }
 
+// TODO might be useful to use the std.ascii stuff!
+
 pub fn value(this: Style, writer: anytype, cp: u21) !void {
     var buffer: [4]u8 = undefined;
     const bytes = try std.unicode.utf8Encode(cp, &buffer);

src/terminal.zig

@@ -91,7 +91,7 @@ pub fn writer() Writer {
 
 pub fn setCursorPosition(pos: Point) !void {
     var buf: [64]u8 = undefined;
-    const value = try std.fmt.bufPrint(&buf, "\x1b[{d};{d}H", .{ pos.y, pos.x });
+    const value = try std.fmt.bufPrint(&buf, "\x1b[{d};{d}H", .{ pos.y + 1, pos.x + 1 });
     _ = try std.posix.write(std.posix.STDIN_FILENO, value);
 }