add(example/elements): distinct different scrollable containers
All checks were successful
Zig Project Action / Lint, Spell-check and test zig project (push) Successful in 46s

This commit is contained in:
2025-02-21 15:58:42 +01:00
parent 44e92735cf
commit 16724f6a52
3 changed files with 51 additions and 60 deletions

View File

@@ -91,10 +91,6 @@ pub fn Scrollable(Event: type) type {
anchor: Position = .{},
/// The actual container, that is scrollable.
container: Container(Event),
/// Enable horizontal scrolling. This also renders a scrollbar (along the bottom of the viewport).
horizontal: bool = false,
/// Enable vertical scrolling. This also renders a scrollbar (along the right of the viewport).
vertical: bool = false,
pub fn element(this: *@This()) Element(Event) {
return .{
@@ -106,11 +102,13 @@ pub fn Scrollable(Event: type) type {
};
}
pub fn init(container: Container(Event)) @This() {
return .{ .container = container };
}
fn handle(ctx: *anyopaque, event: Event) !void {
const this: *@This() = @ptrCast(@alignCast(ctx));
switch (event) {
// TODO: emit `.resize` event for the container to set the size for the scrollable `Container`
// - how would I determine the required or necessary `Size`?
.resize => |size| {
this.size = size;
// TODO: scrollbar space - depending on configuration and only if necessary?
@@ -124,17 +122,17 @@ pub fn Scrollable(Event: type) type {
},
// TODO: other means to scroll except with the mouse? (i.e. Ctrl-u/d, k/j, etc.?)
.mouse => |mouse| switch (mouse.button) {
Mouse.Button.wheel_up => if (this.vertical) {
Mouse.Button.wheel_up => if (this.container_size.rows > this.size.rows) {
this.anchor.row -|= 1;
},
Mouse.Button.wheel_down => if (this.vertical) {
Mouse.Button.wheel_down => if (this.container_size.rows > this.size.rows) {
const max_anchor_row = this.container_size.rows -| this.size.rows;
this.anchor.row = @min(this.anchor.row + 1, max_anchor_row);
},
Mouse.Button.wheel_left => if (this.horizontal) {
Mouse.Button.wheel_left => if (this.container_size.cols > this.size.cols) {
this.anchor.col -|= 1;
},
Mouse.Button.wheel_right => if (this.horizontal) {
Mouse.Button.wheel_right => if (this.container_size.cols > this.size.cols) {
const max_anchor_col = this.container_size.cols -| this.size.cols;
this.anchor.col = @min(this.anchor.col + 1, max_anchor_col);
},