feat(element/alignment): alignment Element implementation
You can now align a `Container` using the Alignment `Element` similar to how you make a `Container` scrollable. For usage details please see the example and the corresponding tests.
This commit is contained in:
229
src/element.zig
229
src/element.zig
@@ -67,6 +67,103 @@ pub fn Element(Event: type) type {
|
||||
};
|
||||
}
|
||||
|
||||
pub fn Alignment(Event: type) type {
|
||||
return struct {
|
||||
/// `Size` of the actual contents that should be aligned.
|
||||
size: Point = .{},
|
||||
/// Alignment Configuration to use for aligning the associated contents of this `Element`.
|
||||
configuration: Configuration,
|
||||
/// `Container` to render in alignment. It needs to use the sizing options accordingly to be effective.
|
||||
container: Container(Event),
|
||||
|
||||
/// Configuration for Alignment
|
||||
pub const Configuration = packed struct {
|
||||
h: Align = .start,
|
||||
v: Align = .start,
|
||||
|
||||
/// Alignment Options for configuration for vertical and horizontal orientations
|
||||
pub const Align = enum(u2) { start, center, end };
|
||||
|
||||
/// Configuration for vertical alignment
|
||||
pub fn vertical(a: Align) @This() {
|
||||
return .{ .v = a };
|
||||
}
|
||||
/// Configuration for horizontal alignment
|
||||
pub fn horizontal(a: Align) @This() {
|
||||
return .{ .h = a };
|
||||
}
|
||||
|
||||
pub const center: @This() = .{ .v = .center, .h = .center };
|
||||
};
|
||||
|
||||
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));
|
||||
this.size = size;
|
||||
this.container.resize(size);
|
||||
}
|
||||
|
||||
fn reposition(ctx: *anyopaque, anchor: Point) void {
|
||||
const this: *@This() = @ptrCast(@alignCast(ctx));
|
||||
var origin = anchor;
|
||||
origin.x = switch (this.configuration.h) {
|
||||
.start => origin.x,
|
||||
.center => origin.x + (this.size.x / 2) -| (this.container.size.x / 2),
|
||||
.end => this.size.x -| this.container.size.x,
|
||||
};
|
||||
origin.y = switch (this.configuration.v) {
|
||||
.start => origin.y,
|
||||
.center => origin.y + (this.size.y / 2) -| (this.container.size.y / 2),
|
||||
.end => this.size.y -| this.container.size.y,
|
||||
};
|
||||
this.container.reposition(origin);
|
||||
}
|
||||
|
||||
fn handle(ctx: *anyopaque, event: Event) !void {
|
||||
const this: *@This() = @ptrCast(@alignCast(ctx));
|
||||
try this.container.handle(event);
|
||||
}
|
||||
|
||||
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));
|
||||
const origin = this.container.origin;
|
||||
const csize = this.container.size;
|
||||
|
||||
const container_cells = try this.container.content();
|
||||
defer this.container.allocator.free(container_cells);
|
||||
|
||||
outer: for (0..csize.y) |row| {
|
||||
inner: for (0..csize.x) |col| {
|
||||
// do not read/write out of bounce
|
||||
if (this.size.x < row) break :outer;
|
||||
if (this.size.y < col) break :inner;
|
||||
|
||||
cells[((row + origin.y) * size.x) + col + origin.x] = container_cells[(row * csize.x) + col];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
pub fn Scrollable(Event: type) type {
|
||||
return struct {
|
||||
/// `Size` of the actual contents where the anchor and the size is
|
||||
@@ -591,3 +688,135 @@ test "scrollable horizontal with scrollbar" {
|
||||
try renderer.render(Container(event.SystemEvent), &container);
|
||||
try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.horizontal.scrollbar.right.zon"), renderer.screen);
|
||||
}
|
||||
|
||||
test "alignment center" {
|
||||
const allocator = std.testing.allocator;
|
||||
const event = @import("event.zig");
|
||||
const testing = @import("testing.zig");
|
||||
|
||||
var container: Container(event.SystemEvent) = try .init(allocator, .{}, .{});
|
||||
defer container.deinit();
|
||||
|
||||
const aligned_container: Container(event.SystemEvent) = try .init(allocator, .{
|
||||
.rectangle = .{ .fill = .green },
|
||||
.size = .{
|
||||
.dim = .{ .x = 12, .y = 5 },
|
||||
.grow = .fixed,
|
||||
},
|
||||
}, .{});
|
||||
var alignment: Alignment(event.SystemEvent) = .init(aligned_container, .center);
|
||||
try container.append(try .init(allocator, .{}, alignment.element()));
|
||||
|
||||
try testing.expectContainerScreen(.{
|
||||
.x = 30,
|
||||
.y = 20,
|
||||
}, &container, @import("test/element/alignment.center.zon"));
|
||||
}
|
||||
|
||||
test "alignment left" {
|
||||
const allocator = std.testing.allocator;
|
||||
const event = @import("event.zig");
|
||||
const testing = @import("testing.zig");
|
||||
|
||||
var container: Container(event.SystemEvent) = try .init(allocator, .{}, .{});
|
||||
defer container.deinit();
|
||||
|
||||
const aligned_container: Container(event.SystemEvent) = try .init(allocator, .{
|
||||
.rectangle = .{ .fill = .green },
|
||||
.size = .{
|
||||
.dim = .{ .x = 12, .y = 5 },
|
||||
.grow = .fixed,
|
||||
},
|
||||
}, .{});
|
||||
var alignment: Alignment(event.SystemEvent) = .init(aligned_container, .{
|
||||
.h = .start,
|
||||
.v = .center,
|
||||
});
|
||||
try container.append(try .init(allocator, .{}, alignment.element()));
|
||||
|
||||
try testing.expectContainerScreen(.{
|
||||
.x = 30,
|
||||
.y = 20,
|
||||
}, &container, @import("test/element/alignment.left.zon"));
|
||||
}
|
||||
|
||||
test "alignment right" {
|
||||
const allocator = std.testing.allocator;
|
||||
const event = @import("event.zig");
|
||||
const testing = @import("testing.zig");
|
||||
|
||||
var container: Container(event.SystemEvent) = try .init(allocator, .{}, .{});
|
||||
defer container.deinit();
|
||||
|
||||
const aligned_container: Container(event.SystemEvent) = try .init(allocator, .{
|
||||
.rectangle = .{ .fill = .green },
|
||||
.size = .{
|
||||
.dim = .{ .x = 12, .y = 5 },
|
||||
.grow = .fixed,
|
||||
},
|
||||
}, .{});
|
||||
var alignment: Alignment(event.SystemEvent) = .init(aligned_container, .{
|
||||
.h = .end,
|
||||
.v = .center,
|
||||
});
|
||||
try container.append(try .init(allocator, .{}, alignment.element()));
|
||||
|
||||
try testing.expectContainerScreen(.{
|
||||
.x = 30,
|
||||
.y = 20,
|
||||
}, &container, @import("test/element/alignment.right.zon"));
|
||||
}
|
||||
|
||||
test "alignment top" {
|
||||
const allocator = std.testing.allocator;
|
||||
const event = @import("event.zig");
|
||||
const testing = @import("testing.zig");
|
||||
|
||||
var container: Container(event.SystemEvent) = try .init(allocator, .{}, .{});
|
||||
defer container.deinit();
|
||||
|
||||
const aligned_container: Container(event.SystemEvent) = try .init(allocator, .{
|
||||
.rectangle = .{ .fill = .green },
|
||||
.size = .{
|
||||
.dim = .{ .x = 12, .y = 5 },
|
||||
.grow = .fixed,
|
||||
},
|
||||
}, .{});
|
||||
var alignment: Alignment(event.SystemEvent) = .init(aligned_container, .{
|
||||
.h = .center,
|
||||
.v = .start,
|
||||
});
|
||||
try container.append(try .init(allocator, .{}, alignment.element()));
|
||||
|
||||
try testing.expectContainerScreen(.{
|
||||
.x = 30,
|
||||
.y = 20,
|
||||
}, &container, @import("test/element/alignment.top.zon"));
|
||||
}
|
||||
|
||||
test "alignment bottom" {
|
||||
const allocator = std.testing.allocator;
|
||||
const event = @import("event.zig");
|
||||
const testing = @import("testing.zig");
|
||||
|
||||
var container: Container(event.SystemEvent) = try .init(allocator, .{}, .{});
|
||||
defer container.deinit();
|
||||
|
||||
const aligned_container: Container(event.SystemEvent) = try .init(allocator, .{
|
||||
.rectangle = .{ .fill = .green },
|
||||
.size = .{
|
||||
.dim = .{ .x = 12, .y = 5 },
|
||||
.grow = .fixed,
|
||||
},
|
||||
}, .{});
|
||||
var alignment: Alignment(event.SystemEvent) = .init(aligned_container, .{
|
||||
.h = .center,
|
||||
.v = .end,
|
||||
});
|
||||
try container.append(try .init(allocator, .{}, alignment.element()));
|
||||
|
||||
try testing.expectContainerScreen(.{
|
||||
.x = 30,
|
||||
.y = 20,
|
||||
}, &container, @import("test/element/alignment.bottom.zon"));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user