From ef950809a6564433332db1683224f0012dbe99eb Mon Sep 17 00:00:00 2001 From: Yves Biener Date: Sun, 9 Feb 2025 12:59:55 +0100 Subject: [PATCH] add(container/layout): sizing:fixed option --- README.md | 44 ++++++++++++++++++++++++++++++++++++++ examples/container.zig | 8 +++++-- src/container.zig | 48 +++++++++++++++++++++++++++++++++++++++++- 3 files changed, 97 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3ec22c0..6b61a45 100644 --- a/README.md +++ b/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) diff --git a/examples/container.zig b/examples/container.zig index cadd946..4a5d038 100644 --- a/examples/container.zig +++ b/examples/container.zig @@ -31,8 +31,12 @@ pub fn main() !void { .separator = .{ .enabled = false }, }, .layout = .{ - .gap = 3, - .padding = .all(2), + // .gap = 1, + .sizing = .{ + .width = .{ .fixed = 100 }, + .height = .{ .fixed = 50 }, + }, + .padding = .all(5), .direction = .horizontal, }, }); diff --git a/src/container.zig b/src/container.zig index f4fde55..a0dbf28 100644 --- a/src/container.zig +++ b/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,