mod: change widget interface Widget.content replaced with Widget.render

The .resize `Event` has been adapted to include an _anchor_, which
provide the full necessary information for each widget where to render
on the screen with what requested size. Each Widget can then dynamically
decide how and what to render (i.e. provide placeholder text in case the
size is too small, etc.).

src/layout/VStack.zig

@@ -15,7 +15,7 @@ pub fn Layout(comptime Event: type, comptime Renderer: type) type {
     if (!isTaggedUnion(Event)) {
         @compileError("Provided user event `Event` for `Layout(comptime Event: type)` is not of type `union(enum)`.");
     }
-    const Widget = @import("../widget.zig").Widget(Event);
+    const Widget = @import("../widget.zig").Widget(Event, Renderer);
     const Lay = @import("../layout.zig").Layout(Event, Renderer);
     const Element = union(enum) {
         layout: Lay,
@@ -80,10 +80,16 @@ pub fn Layout(comptime Event: type, comptime Renderer: type) type {
             switch (event) {
                 .resize => |size| {
                     this.size = size;
-                    log.debug("Using size: {{ .cols = {d}, .rows = {d} }}", .{ size.cols, size.rows });
+                    log.debug("Event .resize: {{ .anchor = {{ .col = {d}, .row = {d} }}, .cols = {d}, .rows = {d} }}", .{
+                        size.anchor.col,
+                        size.anchor.row,
+                        size.cols,
+                        size.rows,
+                    });
                     const len: u16 = @truncate(this.elements.items.len);
                     this.element_rows = @divTrunc(size.rows, len);
                     var overflow = this.size.rows % len;
+                    var offset: u16 = 0;
                     // adjust size according to the containing elements
                     for (this.elements.items) |*element| {
                         var rows = this.element_rows;
@@ -93,10 +99,15 @@ pub fn Layout(comptime Event: type, comptime Renderer: type) type {
                         }
                         const sub_event: Event = .{
                             .resize = .{
+                                .anchor = .{
+                                    .col = size.anchor.col,
+                                    .row = size.anchor.row + offset,
+                                },
                                 .cols = size.cols,
                                 .rows = rows,
                             },
                         };
+                        offset += rows;
                         switch (element.*) {
                             .layout => |*layout| {
                                 const events = try layout.handle(sub_event);
@@ -140,8 +151,8 @@ pub fn Layout(comptime Event: type, comptime Renderer: type) type {
                     overflow -|= 1;
                     row += 1;
                 }
+                // TODO: that's the anchor of each component (only necessary for each widget rendering)
                 const pos: terminal.Position = .{ .col = 1, .row = row };
-                log.debug("using position: .{{ .cols = {d}, .rows = {d} }}", .{ pos.col, pos.row });
                 // TODO: do this using the renderer
                 try terminal.setCursorPosition(pos);
                 switch (element.*) {
@@ -150,8 +161,7 @@ pub fn Layout(comptime Event: type, comptime Renderer: type) type {
                     },
                     .widget => |*widget| {
                         // TODO: clear per widget if necesary (i.e. can I query that?)
-                        const content = try widget.content();
-                        _ = try terminal.write(content);
+                        try widget.render(renderer);
                     },
                 }
             }