594 lines
23 KiB
Zig
594 lines
23 KiB
Zig
//! 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);
|
|
|
|
// DEBUG render corresponding top left corner of this `Element` *red*
|
|
// - only rendered if the corresponding associated element renders contents into the `Container`
|
|
if (comptime build_options.debug) {
|
|
cells[0].style.fg = .red;
|
|
cells[0].style.bg = .black;
|
|
cells[0].cp = 'e'; // 'e' for *element*
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
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),
|
|
/// Whether the scrollable contents should show a scroll bar or not.
|
|
/// The scroll bar will only be shown if required and enabled. With the
|
|
/// corresponding provided color if to be shown.
|
|
configuration: Configuration,
|
|
|
|
pub const Configuration = packed struct {
|
|
scrollbar: bool,
|
|
color: Color = .default,
|
|
x_axis: bool = false,
|
|
y_axis: bool = false,
|
|
|
|
pub const disabled: @This() = .{ .scrollbar = false };
|
|
|
|
pub fn enabled(color: Color) @This() {
|
|
return .{ .scrollbar = true, .color = color };
|
|
}
|
|
};
|
|
|
|
pub fn init(container: Container(Event), configuration: Configuration) @This() {
|
|
return .{
|
|
.container = container,
|
|
.configuration = configuration,
|
|
};
|
|
}
|
|
|
|
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));
|
|
const last_max_anchor_x = this.container_size.x -| this.size.x;
|
|
const last_max_anchor_y = this.container_size.y -| this.size.y;
|
|
|
|
this.size = size;
|
|
this.container.resize(size);
|
|
if (this.configuration.scrollbar) {
|
|
if (this.container.properties.size.dim.x > this.size.x or this.container.size.x > this.size.x) this.configuration.y_axis = true;
|
|
if (this.container.properties.size.dim.y > this.size.y or this.container.size.y > this.size.y) this.configuration.x_axis = true;
|
|
|
|
if (this.configuration.x_axis or this.configuration.y_axis) this.container.resize(.{
|
|
.x = this.size.x - if (this.configuration.x_axis) @as(u16, 1) else @as(u16, 0),
|
|
.y = this.size.y - if (this.configuration.y_axis) @as(u16, 1) else @as(u16, 0),
|
|
});
|
|
}
|
|
|
|
const new_max_anchor_x = this.container.size.x -| size.x;
|
|
const new_max_anchor_y = this.container.size.y -| size.y;
|
|
|
|
// correct anchor if necessary
|
|
if (new_max_anchor_x < last_max_anchor_x and this.anchor.x > new_max_anchor_x) this.anchor.x = new_max_anchor_x;
|
|
if (new_max_anchor_y < last_max_anchor_y and this.anchor.y > new_max_anchor_y) this.anchor.y = new_max_anchor_y;
|
|
|
|
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_anchor_y = this.container_size.y -| this.size.y;
|
|
this.anchor.y = @min(this.anchor.y + 1, max_anchor_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));
|
|
assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
|
|
assert(cells.len == @as(usize, this.size.x) * @as(usize, this.size.y));
|
|
const offset_x: usize = if (this.configuration.x_axis) 1 else 0;
|
|
const offset_y: usize = if (this.configuration.y_axis) 1 else 0;
|
|
|
|
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);
|
|
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);
|
|
for (0..size.y - offset_y) |row| {
|
|
for (0..size.x - offset_x) |col| {
|
|
cells[(row * size.x) + col] = container_cells[anchor + (row * container_size.x) + col];
|
|
}
|
|
}
|
|
if (this.configuration.scrollbar) {
|
|
if (this.configuration.x_axis) {
|
|
const ratio: f32 = @as(f32, @floatFromInt(this.size.y)) / @as(f32, @floatFromInt(this.container.size.y));
|
|
const scrollbar_size: usize = @intFromFloat(@as(f32, @floatFromInt(this.size.y)) * ratio);
|
|
const pos_ratio: f32 = @as(f32, @floatFromInt(this.anchor.y)) / @as(f32, @floatFromInt(this.container.size.y));
|
|
const scrollbar_starting_pos: usize = @intFromFloat(@as(f32, @floatFromInt(this.size.y)) * pos_ratio);
|
|
for (0..size.y) |row| {
|
|
cells[(row * size.x) + size.x - 1] = .{
|
|
.style = .{
|
|
.fg = this.configuration.color,
|
|
.emphasis = if (row >= scrollbar_starting_pos and row <= scrollbar_starting_pos + scrollbar_size)
|
|
&.{} // scrollbar itself
|
|
else
|
|
&.{.dim}, // background (around scrollbar)
|
|
},
|
|
.cp = '🮋', // 7/8 block right
|
|
};
|
|
}
|
|
}
|
|
if (this.configuration.y_axis) {
|
|
const ratio: f32 = @as(f32, @floatFromInt(this.size.x)) / @as(f32, @floatFromInt(this.container.size.x));
|
|
const scrollbar_size: usize = @intFromFloat(@as(f32, @floatFromInt(this.size.x)) * ratio);
|
|
const pos_ratio: f32 = @as(f32, @floatFromInt(this.anchor.x)) / @as(f32, @floatFromInt(this.container.size.x));
|
|
const scrollbar_starting_pos: usize = @intFromFloat(@as(f32, @floatFromInt(this.size.x)) * pos_ratio);
|
|
for (0..size.x) |col| {
|
|
cells[((size.y - 1) * size.x) + col] = .{
|
|
.style = .{
|
|
.fg = this.configuration.color,
|
|
.emphasis = if (col >= scrollbar_starting_pos and col <= scrollbar_starting_pos + scrollbar_size)
|
|
&.{} // scrollbar itself
|
|
else
|
|
&.{.dim}, // background (around scrollbar)
|
|
},
|
|
.cp = '🮄', // 5/8 block top (to make it look more equivalent to the vertical scrollbar)
|
|
};
|
|
}
|
|
}
|
|
}
|
|
this.container.allocator.free(container_cells);
|
|
}
|
|
};
|
|
}
|
|
|
|
const std = @import("std");
|
|
const assert = std.debug.assert;
|
|
const build_options = @import("build_options");
|
|
const input = @import("input.zig");
|
|
const Container = @import("container.zig").Container;
|
|
const Cell = @import("cell.zig");
|
|
const Color = @import("color.zig").Color;
|
|
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, .disabled);
|
|
|
|
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 vertical with scrollbar" {
|
|
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, .enabled(.white));
|
|
|
|
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.scrollbar.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.scrollbar.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.scrollbar.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, .disabled);
|
|
|
|
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);
|
|
}
|
|
|
|
test "scrollable horizontal with scrollbar" {
|
|
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, .enabled(.white));
|
|
|
|
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.scrollbar.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.scrollbar.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.scrollbar.right.zon"), renderer.screen);
|
|
}
|