examples/container.zig

@@ -26,14 +26,14 @@ pub fn main() !void {
     var container = try App.Container.init(allocator, .{
         .border = .{
             .color = .blue,
-            .sides = .{
-                .left = false,
-                .bottom = false,
-            },
             .corners = .rounded,
             .separator = .{ .enabled = false },
         },
-        .layout = .{ .gap = 3, .direction = .horizontal },
+        .layout = .{
+            .gap = 3,
+            .padding = .all(2),
+            .direction = .horizontal,
+        },
     });
     try container.append(try App.Container.init(allocator, .{
         .border = .{ .color = .light_blue, .corners = .squared },
@@ -42,6 +42,10 @@ pub fn main() !void {
     try container.append(try App.Container.init(allocator, .{
         .border = .{ .color = .light_blue, .corners = .squared },
     }));
+    try container.append(try App.Container.init(allocator, .{
+        .border = .{ .color = .light_blue, .corners = .squared },
+        .rectangle = .{ .fill = .blue },
+    }));
     defer container.deinit();
 
     // NOTE: should the min-size here be required?

src/container.zig

@@ -163,15 +163,11 @@ pub const Rectangle = struct {
     /// NOTE: used as background color when rendering! such that it renders the
     /// children accordingly without removing the coloring of the `Rectangle`
     fill: Color = .default,
-    /// Configure the corners of the `Rectangle`
-    corners: enum(u1) {
-        squared,
-        rounded,
-    } = .squared,
 
     // NOTE: caller owns `cells` slice and ensures that `cells.len == size.cols * size.rows`
     pub fn contents(this: @This(), cells: []Cell, size: Size) void {
         std.debug.assert(cells.len == size.cols * size.rows);
+
         for (0..size.rows) |row| {
             for (0..size.cols) |col| {
                 cells[(row * size.cols) + col].style.bg = this.fill;
@@ -186,6 +182,12 @@ pub const Scroll = packed struct {
     horizontal: bool = false,
     /// Enable vertical scrolling for this element
     vertical: bool = false,
+
+    // TODO: enable changing the anchor position of this container along with its children
+    // - for that the contents need to be layed out in a way that is independent of the actual size of the container
+
+    // TODO: rendering enhancements:
+    // - render corresponding scroll-bars?
 };
 
 /// Layout configuration struct
@@ -283,38 +285,46 @@ pub fn Container(comptime Event: type) type {
                     });
                     this.size = size;
 
-                    if (this.elements.items.len == 0)
+                    if (this.elements.items.len == 0) break :resize;
-                        break :resize;
 
                     const separator = this.properties.border.separator;
                     const sides = this.properties.border.sides;
+                    const padding = this.properties.layout.padding;
                     var gap = this.properties.layout.gap;
                     if (separator.enabled) gap += 1; // the gap will be used for the rendering of the separator line
+
                     const len: u16 = @truncate(this.elements.items.len);
                     const element_cols = blk: {
                         var cols = size.cols - gap * (len - 1);
                         if (sides.left) cols -= 1;
                         if (sides.right) cols -= 1;
+                        cols -= padding.left + padding.right;
                         break :blk @divTrunc(cols, len);
                     };
                     const element_rows = blk: {
                         var rows = size.rows - gap * (len - 1);
                         if (sides.top) rows -= 1;
                         if (sides.bottom) rows -= 1;
+                        rows -= padding.top + padding.bottom;
                         break :blk @divTrunc(rows, len);
                     };
-                    var offset: u16 = 0;
+                    var offset: u16 = switch (this.properties.layout.direction) {
+                        .horizontal => padding.left,
+                        .vertical => padding.top,
+                    };
                     var overflow = switch (this.properties.layout.direction) {
                         .horizontal => blk: {
                             var cols = size.cols - gap * (len - 1);
                             if (sides.left) cols -= 1;
                             if (sides.right) cols -= 1;
+                            cols -= padding.left + padding.right;
                             break :blk cols - element_cols * len;
                         },
                         .vertical => blk: {
                             var rows = size.rows - gap * (len - 1);
                             if (sides.top) rows -= 1;
                             if (sides.bottom) rows -= 1;
+                            rows -= padding.top + padding.bottom;
                             break :blk rows - element_rows * len;
                         },
                     };
@@ -372,6 +382,12 @@ pub fn Container(comptime Event: type) type {
                             element_size.anchor.col += 1;
                         }
 
+                        // padding resizing
+                        element_size.anchor.row += padding.top;
+                        element_size.anchor.col += padding.left;
+                        element_size.rows -= padding.top + padding.bottom;
+                        element_size.cols -= padding.left + padding.right;
+
                         try element.handle(.{ .resize = element_size });
                     }
                 },