//! Interface for Element's which describe the contents of a `Container`. 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; pub fn Element(Event: type) type { return struct { ptr: *anyopaque = undefined, vtable: *const VTable = &.{}, pub const VTable = struct { handle: ?*const fn (ctx: *anyopaque, event: Event) anyerror!void = null, content: ?*const fn (ctx: *anyopaque, cells: []Cell, origin: Point, size: Point) anyerror!void = null, }; /// 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, origin: Point, size: Point) !void { if (this.vtable.content) |content_fn| try content_fn(this.ptr, cells, origin, 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 = .{}, /// Minimal `Size` of the scrollable `Container` to be used. If the /// actual scrollable container's size is larger it will be used instead /// (no scrolling will be necessary for that screen size). min_size: Point = .{}, /// `Size` of the `Container` content that is scrollable and mapped to /// the *size* of the `Scrollable` `Element`. container_size: Point = .{}, container_origin: Point = .{}, /// Anchor of the viewport of the scrollable `Container`. anchor: Point = .{}, /// The actual `Container`, that is scrollable. container: Container(Event), pub fn element(this: *@This()) Element(Event) { return .{ .ptr = this, .vtable = &.{ .handle = handle, .content = content, }, }; } pub fn init(container: Container(Event), min_size: Point) @This() { return .{ .container = container, .min_size = min_size, }; } fn handle(ctx: *anyopaque, event: Event) !void { const this: *@This() = @ptrCast(@alignCast(ctx)); switch (event) { .size => |size| { this.size = size; // TODO scrollbar space - depending on configuration and only if necessary? this.container_size = size.max(this.min_size); this.container_origin = size; // TODO the size should be a provided origin try this.container.handle(.{ .size = this.container_size }); }, // 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_origin: Point, container_size: Point) !void { const size = container.size; const origin = container.origin; const contents = try container.contents(); defer container.allocator.free(contents); const anchor = (@as(usize, origin.y -| container_origin.y) * @as(usize, container_size.x)) + @as(usize, origin.x -| container_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, origin, size); } fn content(ctx: *anyopaque, cells: []Cell, origin: Point, size: Point) !void { const this: *@This() = @ptrCast(@alignCast(ctx)); _ = origin; // this should be used std.debug.assert(cells.len == @as(usize, this.size.x) * @as(usize, this.size.y)); const container_size = this.container.size; const container_origin = this.container.origin; 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.contents(); 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); } // FIX this is not resolving the rendering recursively! This means that the content is only shown for the first children for (this.container.elements.items) |child| try render_container(child, container_cells, container_origin, 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); } }; } // TODO nested scrollable `Container`s?' // TODO reaction only for when the event is actually pushed to the corresponding `Container` rendered container 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), }, }, .{}); 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, .{ .y = size.y + 15 }); 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(); try container.handle(.{ .size = size }); 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), }, }, .{}); 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, .{ .x = size.x + 15 }); 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(); try container.handle(.{ .size = size }); 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); }