fix(element/scrollable): render horizontal directed contents correctly
All checks were successful
Zig Project Action / Lint, Spell-check and test zig project (push) Successful in 46s
All checks were successful
Zig Project Action / Lint, Spell-check and test zig project (push) Successful in 46s
This commit is contained in:
@@ -116,7 +116,7 @@ pub fn main() !void {
|
|||||||
.rectangle = .{ .fill = .blue },
|
.rectangle = .{ .fill = .blue },
|
||||||
.layout = .{
|
.layout = .{
|
||||||
.gap = 1,
|
.gap = 1,
|
||||||
.direction = .vertical,
|
.direction = .horizontal,
|
||||||
.padding = .vertical(1),
|
.padding = .vertical(1),
|
||||||
},
|
},
|
||||||
}, .{});
|
}, .{});
|
||||||
|
|||||||
@@ -113,7 +113,7 @@ pub fn Scrollable(Event: type) type {
|
|||||||
// - how would I determine the required or necessary `Size`?
|
// - how would I determine the required or necessary `Size`?
|
||||||
.resize => |size| {
|
.resize => |size| {
|
||||||
this.size = size;
|
this.size = size;
|
||||||
// TODO: not just pass through the given size, but rather the size that is necessary for scrollable content
|
// TODO: scrollbar space - depending on configuration and only if necessary?
|
||||||
const min_size = this.container.minSize();
|
const min_size = this.container.minSize();
|
||||||
this.container_size = .{
|
this.container_size = .{
|
||||||
.anchor = size.anchor,
|
.anchor = size.anchor,
|
||||||
@@ -122,6 +122,7 @@ pub fn Scrollable(Event: type) type {
|
|||||||
};
|
};
|
||||||
try this.container.handle(.{ .resize = this.container_size });
|
try this.container.handle(.{ .resize = 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 => |mouse| switch (mouse.button) {
|
||||||
Mouse.Button.wheel_up => if (this.vertical) {
|
Mouse.Button.wheel_up => if (this.vertical) {
|
||||||
this.anchor.row -|= 1;
|
this.anchor.row -|= 1;
|
||||||
@@ -163,21 +164,21 @@ pub fn Scrollable(Event: type) type {
|
|||||||
@memcpy(container_cells, container_cells_const);
|
@memcpy(container_cells, container_cells_const);
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: render correct view port into the container_cells
|
|
||||||
for (this.container.elements.items) |*e| {
|
for (this.container.elements.items) |*e| {
|
||||||
const e_size = e.size;
|
const e_size = e.size;
|
||||||
const element_cells = try e.contents();
|
const element_cells = try e.contents();
|
||||||
defer e.allocator.free(element_cells);
|
defer e.allocator.free(element_cells);
|
||||||
|
|
||||||
const anchor = (@as(usize, e_size.anchor.row -| container_size.anchor.row) * @as(usize, container_size.cols)) + @as(usize, e_size.anchor.col -| container_size.anchor.col);
|
const anchor = (@as(usize, e_size.anchor.row -| container_size.anchor.row) * @as(usize, container_size.cols)) +
|
||||||
|
@as(usize, e_size.anchor.col -| container_size.anchor.col);
|
||||||
|
|
||||||
var idx: usize = 0;
|
var idx: usize = 0;
|
||||||
blk: for (0..container_size.rows) |row| {
|
blk: for (0..e_size.rows) |row| {
|
||||||
for (0..container_size.cols) |col| {
|
for (0..e_size.cols) |col| {
|
||||||
const cell = element_cells[idx];
|
const cell = element_cells[idx];
|
||||||
idx += 1;
|
idx += 1;
|
||||||
|
|
||||||
container_cells[anchor + (row * container_size.cols) + col].style = cell.style;
|
container_cells[anchor + (row * container_size.cols) + col] = cell;
|
||||||
container_cells[anchor + (row * container_size.cols) + col].cp = cell.cp;
|
|
||||||
|
|
||||||
if (element_cells.len == idx) break :blk;
|
if (element_cells.len == idx) break :blk;
|
||||||
}
|
}
|
||||||
@@ -185,6 +186,7 @@ pub fn Scrollable(Event: type) type {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const anchor = (@as(usize, this.anchor.row) * @as(usize, container_size.cols)) + @as(usize, this.anchor.col);
|
const anchor = (@as(usize, this.anchor.row) * @as(usize, container_size.cols)) + @as(usize, this.anchor.col);
|
||||||
|
// TODO: render scrollbar according to configuration!
|
||||||
for (0..size.rows) |row| {
|
for (0..size.rows) |row| {
|
||||||
for (0..size.cols) |col| {
|
for (0..size.cols) |col| {
|
||||||
cells[(row * size.cols) + col] = container_cells[anchor + (row * container_size.cols) + col];
|
cells[(row * size.cols) + col] = container_cells[anchor + (row * container_size.cols) + col];
|
||||||
|
|||||||
@@ -79,10 +79,11 @@ pub fn main() !void {
|
|||||||
.rectangle = .{ .fill = .blue },
|
.rectangle = .{ .fill = .blue },
|
||||||
.layout = .{
|
.layout = .{
|
||||||
.gap = 1,
|
.gap = 1,
|
||||||
.direction = .vertical,
|
// FIX: horizontal rendering?
|
||||||
|
.direction = .horizontal,
|
||||||
.padding = .vertical(1),
|
.padding = .vertical(1),
|
||||||
},
|
},
|
||||||
.min_size = .{ .rows = 100 },
|
.min_size = .{ .cols = 150 },
|
||||||
}, .{});
|
}, .{});
|
||||||
try box.append(try App.Container.init(allocator, .{
|
try box.append(try App.Container.init(allocator, .{
|
||||||
.rectangle = .{ .fill = .light_green },
|
.rectangle = .{ .fill = .light_green },
|
||||||
@@ -97,7 +98,7 @@ pub fn main() !void {
|
|||||||
|
|
||||||
var scrollable: App.Scrollable = .{
|
var scrollable: App.Scrollable = .{
|
||||||
.container = box,
|
.container = box,
|
||||||
.vertical = true,
|
.horizontal = true,
|
||||||
};
|
};
|
||||||
|
|
||||||
var container = try App.Container.init(allocator, .{
|
var container = try App.Container.init(allocator, .{
|
||||||
@@ -110,7 +111,7 @@ pub fn main() !void {
|
|||||||
.layout = .{
|
.layout = .{
|
||||||
.gap = 2,
|
.gap = 2,
|
||||||
.padding = .all(5),
|
.padding = .all(5),
|
||||||
.direction = .vertical,
|
.direction = .horizontal,
|
||||||
},
|
},
|
||||||
}, .{});
|
}, .{});
|
||||||
try container.append(try App.Container.init(allocator, .{}, scrollable.element()));
|
try container.append(try App.Container.init(allocator, .{}, scrollable.element()));
|
||||||
|
|||||||
Reference in New Issue
Block a user