//! Interface for Element's which describe the contents of a `Container`. pub fn Element(Event: type) type { return struct { ptr: *anyopaque = undefined, vtable: *const VTable = &.{}, pub const VTable = struct { resize: ?*const fn (ctx: *anyopaque, size: Point) void = null, reposition: ?*const fn (ctx: *anyopaque, origin: Point) void = null, handle: ?*const fn (ctx: *anyopaque, event: Event) anyerror!void = null, content: ?*const fn (ctx: *anyopaque, cells: []Cell, size: Point) anyerror!void = null, }; /// Resize the corresponding `Element` with the given *size*. pub inline fn resize(this: @This(), size: Point) void { if (this.vtable.resize) |resize_fn| resize_fn(this.ptr, size); } /// Reposition the corresponding `Element` with the given *origin*. pub inline fn reposition(this: @This(), origin: Point) void { if (this.vtable.reposition) |reposition_fn| reposition_fn(this.ptr, origin); } /// Handle the received event. The event is one of the user provided /// events or a system event, with the exception of the `.size` /// `Event` as every `Container` already handles that event. /// /// In case of user errors this function should return an error. This /// error may then be used by the application to display information /// about the user error. pub inline fn handle(this: @This(), event: Event) !void { if (this.vtable.handle) |handle_fn| try handle_fn(this.ptr, event); } /// Write content into the `cells` of the `Container`. The associated /// `cells` slice has the size of (`size.x * size.y`). The /// renderer will know where to place the contents on the screen. /// /// # Note /// /// - Caller owns `cells` slice and ensures that the size usually by assertion: /// ```zig /// std.debug.assert(cells.len == @as(usize, size.x) * @as(usize, size.y)); /// ``` /// /// - This function should only fail with an error if the error is /// non-recoverable (i.e. an allocation error, system error, etc.). /// Otherwise user specific errors should be caught using the `handle` /// function before the rendering of the `Container` happens. pub inline fn content(this: @This(), cells: []Cell, size: Point) !void { if (this.vtable.content) |content_fn| try content_fn(this.ptr, cells, size); } }; } pub fn Scrollable(Event: type) type { return struct { /// `Size` of the actual contents where the anchor and the size is /// representing the size and location on screen. size: Point = .{}, /// `Size` of the `Container` content that is scrollable and mapped to /// the *size* of the `Scrollable` `Element`. container_size: Point = .{}, /// Anchor of the viewport of the scrollable `Container`. anchor: Point = .{}, /// The actual `Container`, that is scrollable. container: Container(Event), pub fn init(container: Container(Event)) @This() { return .{ .container = container }; } pub fn element(this: *@This()) Element(Event) { return .{ .ptr = this, .vtable = &.{ .resize = resize, .reposition = reposition, .handle = handle, .content = content, }, }; } fn resize(ctx: *anyopaque, size: Point) void { const this: *@This() = @ptrCast(@alignCast(ctx)); this.size = size; // TODO scrollbar space - depending on configuration and only if necessary? this.container.resize(this.size); this.container_size = this.container.size; } fn reposition(ctx: *anyopaque, _: Point) void { const this: *@This() = @ptrCast(@alignCast(ctx)); this.container.reposition(.{}); } fn handle(ctx: *anyopaque, event: Event) !void { const this: *@This() = @ptrCast(@alignCast(ctx)); switch (event) { // 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.container_size.y > this.size.y) { this.anchor.y -|= 1; }, Mouse.Button.wheel_down => if (this.container_size.y > this.size.y) { const max_origin_y = this.container_size.y -| this.size.y; this.anchor.y = @min(this.anchor.y + 1, max_origin_y); }, Mouse.Button.wheel_left => if (this.container_size.x > this.size.x) { this.anchor.x -|= 1; }, Mouse.Button.wheel_right => if (this.container_size.x > this.size.x) { const max_anchor_x = this.container_size.x -| this.size.x; this.anchor.x = @min(this.anchor.x + 1, max_anchor_x); }, else => try this.container.handle(.{ .mouse = .{ .x = mouse.x + this.anchor.x, .y = mouse.y + this.anchor.y, .button = mouse.button, .kind = mouse.kind, }, }), }, else => try this.container.handle(event), } } fn render_container(container: Container(Event), cells: []Cell, container_size: Point) !void { const size = container.size; const origin = container.origin; const contents = try container.content(); defer container.allocator.free(contents); const anchor = (@as(usize, origin.y) * @as(usize, container_size.x)) + @as(usize, origin.x); var idx: usize = 0; blk: for (0..size.y) |row| { for (0..size.x) |col| { cells[anchor + (row * container_size.x) + col] = contents[idx]; idx += 1; if (contents.len == idx) break :blk; } } for (container.elements.items) |child| try render_container(child, cells, size); } fn content(ctx: *anyopaque, cells: []Cell, size: Point) !void { const this: *@This() = @ptrCast(@alignCast(ctx)); std.debug.assert(cells.len == @as(usize, this.size.x) * @as(usize, this.size.y)); const container_size = this.container.size; const container_cells = try this.container.allocator.alloc(Cell, @as(usize, container_size.x) * @as(usize, container_size.y)); { const container_cells_const = try this.container.content(); defer this.container.allocator.free(container_cells_const); std.debug.assert(container_cells_const.len == @as(usize, container_size.x) * @as(usize, container_size.y)); @memcpy(container_cells, container_cells_const); } for (this.container.elements.items) |child| try render_container(child, container_cells, container_size); const anchor = (@as(usize, this.anchor.y) * @as(usize, container_size.x)) + @as(usize, this.anchor.x); // TODO render scrollbar according to configuration! for (0..size.y) |row| { for (0..size.x) |col| { cells[(row * size.x) + col] = container_cells[anchor + (row * container_size.x) + col]; } } this.container.allocator.free(container_cells); } }; } const std = @import("std"); const input = @import("input.zig"); const Container = @import("container.zig").Container; const Cell = @import("cell.zig"); const Mouse = input.Mouse; const Point = @import("point.zig").Point; // TODO nested scrollable `Container`s?' test "scrollable vertical" { const event = @import("event.zig"); const testing = @import("testing.zig"); const allocator = std.testing.allocator; const size: Point = .{ .x = 30, .y = 20, }; var box: Container(event.SystemEvent) = try .init(allocator, .{ .border = .{ .sides = .all, .color = .red, }, .layout = .{ .separator = .{ .enabled = true, .color = .red, }, .direction = .vertical, .padding = .all(1), }, .size = .{ .dim = .{ .y = size.y + 15 }, }, }, .{}); try box.append(try .init(allocator, .{ .rectangle = .{ .fill = .grey }, }, .{})); try box.append(try .init(allocator, .{ .rectangle = .{ .fill = .grey }, }, .{})); defer box.deinit(); var scrollable: Scrollable(event.SystemEvent) = .init(box); var container: Container(event.SystemEvent) = try .init(allocator, .{ .border = .{ .color = .green, .sides = .vertical, }, }, scrollable.element()); defer container.deinit(); var renderer: testing.Renderer = .init(allocator, size); defer renderer.deinit(); container.resize(size); container.reposition(.{}); try renderer.render(Container(event.SystemEvent), &container); try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.vertical.top.zon"), renderer.screen); // scroll down 15 times (exactly to the end) for (0..15) |_| try container.handle(.{ .mouse = .{ .button = .wheel_down, .kind = .press, .x = 5, .y = 5, }, }); try renderer.render(Container(event.SystemEvent), &container); try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.vertical.bottom.zon"), renderer.screen); // further scrolling down will not change anything try container.handle(.{ .mouse = .{ .button = .wheel_down, .kind = .press, .x = 5, .y = 5, }, }); try renderer.render(Container(event.SystemEvent), &container); try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.vertical.bottom.zon"), renderer.screen); } test "scrollable horizontal" { const event = @import("event.zig"); const testing = @import("testing.zig"); const allocator = std.testing.allocator; const size: Point = .{ .x = 30, .y = 20, }; var box: Container(event.SystemEvent) = try .init(allocator, .{ .border = .{ .sides = .all, .color = .red, }, .layout = .{ .separator = .{ .enabled = true, .color = .red, }, .direction = .horizontal, .padding = .all(1), }, .size = .{ .dim = .{ .x = size.x + 15 }, }, }, .{}); try box.append(try .init(allocator, .{ .rectangle = .{ .fill = .grey }, }, .{})); try box.append(try .init(allocator, .{ .rectangle = .{ .fill = .grey }, }, .{})); defer box.deinit(); var scrollable: Scrollable(event.SystemEvent) = .init(box); var container: Container(event.SystemEvent) = try .init(allocator, .{ .border = .{ .color = .green, .sides = .horizontal, }, }, scrollable.element()); defer container.deinit(); var renderer: testing.Renderer = .init(allocator, size); defer renderer.deinit(); container.resize(size); container.reposition(.{}); try renderer.render(Container(event.SystemEvent), &container); try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.horizontal.left.zon"), renderer.screen); // scroll right 15 times (exactly to the end) for (0..15) |_| try container.handle(.{ .mouse = .{ .button = .wheel_right, .kind = .press, .x = 5, .y = 5, }, }); try renderer.render(Container(event.SystemEvent), &container); try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.horizontal.right.zon"), renderer.screen); // further scrolling right will not change anything try container.handle(.{ .mouse = .{ .button = .wheel_right, .kind = .press, .x = 5, .y = 5, }, }); try renderer.render(Container(event.SystemEvent), &container); try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.horizontal.right.zon"), renderer.screen); }