zterm/src/element.zig

//! 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);
}