README.md

@@ -68,3 +68,47 @@ such that an application created using this library can be accessed directly
 via ssh. This provides security through the ssh protocol and can defer the
 synchronization process, as users may access the same running instance. Which is
 the primary use-case for myself to create this library in the first place.
+
+---
+## Roadmap
+
+- [ ] Container rendering
+  - [ ] Layout
+    - [x] direction
+      - [x] vertical
+      - [x] horizontal
+    - [x] padding
+    - [x] gap
+    - [ ] alignment
+      - [ ] center
+      - [ ] left
+      - [ ] right
+    - [ ] sizing
+      - [ ] width
+      - [ ] height
+      - [ ] options
+        - [ ] fit
+        - [ ] grow
+        - [x] fixed
+        - [ ] percent
+  - [ ] Border
+    - [x] sides
+    - [x] corners
+    - [ ] separators
+  - [x] Rectangle
+  - [ ] Scroll
+    - [ ] vertical
+    - [ ] horizontal
+    - [ ] scroll bar(s)
+
+For the correct rendering of the corresponding layout's that extend the view
+port I need to figure out a way to render what would be visible at a given
+frame. I would need to separate the between the Layout size -> i.e. the size the
+container uses in virtual space and the real screen!
+
+Here the sizing options are relevant!
+- *fit*:   adjust virtual space of container by the size of its children (i.e. a
+           container needs to be able to get the necessary size of its children)
+- *grow*:  use as much space as available (what exactly would be the difference
+           between this option and *fit*?)
+- *fixed*: use exactly as much cells (in the specified direction)

examples/container.zig

@@ -31,8 +31,12 @@ pub fn main() !void {
             .separator = .{ .enabled = false },
         },
         .layout = .{
-            .gap = 3,
+            // .gap = 1,
-            .padding = .all(2),
+            .sizing = .{
+                .width = .{ .fixed = 100 },
+                .height = .{ .fixed = 50 },
+            },
+            .padding = .all(5),
             .direction = .horizontal,
         },
     });

src/container.zig

@@ -30,6 +30,14 @@ pub const Border = struct {
         pub fn all() @This() {
             return .{ .top = true, .bottom = true, .left = true, .right = true };
         }
+
+        pub fn horizontal() @This() {
+            return .{ .left = true, .right = true };
+        }
+
+        pub fn vertical() @This() {
+            return .{ .top = true, .bottom = true };
+        }
     } = .{},
     /// Configure separator borders between child element to added to the layout
     separator: struct {
@@ -280,7 +288,45 @@ pub fn Container(comptime Event: type) type {
         pub fn handle(this: *@This(), event: Event) !void {
             switch (event) {
                 .init => log.debug(".init event", .{}),
-                .resize => |size| resize: {
+                .resize => |s| resize: {
+                    // sizing
+                    var size = s;
+                    const sizing = this.properties.layout.sizing;
+                    switch (sizing.width) {
+                        .fit => {
+                            // use as much space as necessary (but nothing more than necessary)
+                        },
+                        .grow => {
+                            // grow use as much space as available by the parent (i.e. the entire width)
+                            // NOTE: this is pretty much the current implementation
+                        },
+                        .fixed => |fix| {
+                            std.debug.assert(fix <= size.cols);
+                            size.cols = fix;
+                        },
+                        .percent => |percent| {
+                            // use a percentage unit calculated from the available space
+                            size.cols = @divTrunc(size.cols * percent, 100);
+                        },
+                    }
+                    switch (sizing.height) {
+                        .fit => {
+                            // use as much space as necessary (but nothing more than necessary)
+                        },
+                        .grow => {
+                            // grow use as much space as available by the parent (i.e. the entire width)
+                            // NOTE: this is pretty much the current implementation
+                        },
+                        .fixed => |fix| {
+                            std.debug.assert(fix <= size.rows);
+                            size.rows = fix;
+                        },
+                        .percent => |percent| {
+                            // use a percentage unit calculated from the available space
+                            size.rows = @divTrunc(size.rows * percent, 100);
+                        },
+                    }
+
                     log.debug("Event .resize: {{ .anchor = {{ .col = {d}, .row = {d} }}, .cols = {d}, .rows = {d} }}", .{
                         size.anchor.col,
                         size.anchor.row,