sirlilpanda/shoots
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added scrollable code

Browse Source
This commit is contained in:
panda
2026-01-22 13:46:52 +13:00
parent 38e37dddc4
commit 8bea8eeda2
1 changed files with 113 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/root.zig
View File

@@ -176,14 +176,15 @@ pub const Colour = struct {
a: u8 = 255, a: u8 = 255,
}; };
const Dir = enum {
x,
y,
};
pub const Scrollable = struct { pub const Scrollable = struct {
offset: *Real, offset: *Pos,
dir: Dir, child_size: Rect = .{},
scroll_amount: f32 = 10.0,
dir: enum {
x,
y,
// both,
},
}; };
pub const MouseState = struct { pub const MouseState = struct {
@@ -191,6 +192,7 @@ pub const MouseState = struct {
left: bool, left: bool,
right: bool, right: bool,
middle: bool, middle: bool,
scroll_delta: Pos,
}; };
pub fn pointinRect(point: Pos, rect_pos: Pos, rect: Rect) bool { pub fn pointinRect(point: Pos, rect_pos: Pos, rect: Rect) bool {
@@ -238,12 +240,12 @@ pub fn Shoots(
try printWithLevel(writer, level + 1, "pos : {any},\n", .{node.element.pos}); try printWithLevel(writer, level + 1, "pos : {any},\n", .{node.element.pos});
try printWithLevel(writer, level + 1, "on_click : {?},\n", .{node.element.on_click}); try printWithLevel(writer, level + 1, "on_click : {?},\n", .{node.element.on_click});
try printWithLevel(writer, level + 1, "rect : {any},\n", .{node.element.rect}); try printWithLevel(writer, level + 1, "rect : {any},\n", .{node.element.rect});
try printWithLevel(writer, level + 1, "style : .{{\n", .{});
try printWithLevel(writer, level + 1, "on_click : {any},\n", .{node.element.on_click}); try printWithLevel(writer, level + 1, "on_click : {any},\n", .{node.element.on_click});
try printWithLevel(writer, level + 1, "allow_on_click_when_occluded : {any},\n", .{node.element.allow_on_click_when_occluded}); try printWithLevel(writer, level + 1, "allow_on_click_when_occluded : {any},\n", .{node.element.allow_on_click_when_occluded});
try printWithLevel(writer, level + 1, "on_hover : {any},\n", .{node.element.on_hover}); try printWithLevel(writer, level + 1, "on_hover : {any},\n", .{node.element.on_hover});
try printWithLevel(writer, level + 1, "allow_on_hover_when_occluded : {any},\n", .{node.element.allow_on_hover_when_occluded}); try printWithLevel(writer, level + 1, "allow_on_hover_when_occluded : {any},\n", .{node.element.allow_on_hover_when_occluded});
try printWithLevel(writer, level + 1, "scrollable : {?},\n", .{node.element.scrollable}); try printWithLevel(writer, level + 1, "scrollable : {?},\n", .{node.element.scrollable});
try printWithLevel(writer, level + 1, "style : .{{\n", .{});
try node.element.style.printStyle(writer, level + 1); try node.element.style.printStyle(writer, level + 1);
try printWithLevel(writer, level + 1, "children : {{\n", .{}); try printWithLevel(writer, level + 1, "children : {{\n", .{});
for (node.element.children, 0..) |_, i| { for (node.element.children, 0..) |_, i| {
@@ -301,8 +303,8 @@ pub fn Shoots(
rect, rect,
text, text,
texture, texture,
// clip_start, clip_start,
// clip_end, clip_end,
}; };
pub const RenderCommand = union(RenderCommandType) { pub const RenderCommand = union(RenderCommandType) {
@@ -323,13 +325,16 @@ pub fn Shoots(
z_index: usize = 0, z_index: usize = 0,
pos: Pos, pos: Pos,
}, },
// clip_start: struct { clip_start: struct {
// pos: Pos, pos: Pos,
// z_index: usize = 0, z_index: usize = 0,
// rect: Rect, rect: Rect,
// rounding: ?Real, // might allow rounded rectangles for clipping,
// }, // hover this would require the user to implement a
// clip_end: struct {}, // stencil buffer and that would be annoying
// rounding: ?Real,
},
clip_end: struct {},
}; };
pub inline fn ElementWborder( pub inline fn ElementWborder(
@@ -420,14 +425,49 @@ pub fn Shoots(
// std.debug.print("parent.element.rect.w : {}\n", .{parent.element.rect.w}); // std.debug.print("parent.element.rect.w : {}\n", .{parent.element.rect.w});
}, },
.texture => { .texture => {
std.debug.print("before {any}\n", .{parent.element.rect});
parent.element.rect.h += node.texture.rect.h; parent.element.rect.h += node.texture.rect.h;
parent.element.rect.w += node.texture.rect.w; parent.element.rect.w += node.texture.rect.w;
std.debug.print("after {any}\n", .{parent.element.rect});
}, },
} }
} }
fn computeSizes(node: *Node, parent: *Node) void {
switch (node.*) {
.element => {
// std.debug.print("before {s} {}\n", .{ node.element.name, node.element.rect });
// std.debug.print("parent name : {s}\n", .{parent.element.name});
const size = node.element.rect;
for (node.element.children, 0..) |_, i| {
computeSizes(@constCast(&node.element.children[i]), node);
}
// cheaters way to beat the fence post problem
// TODO fix this
switch (node.element.style.layout) {
.right_to_left => node.element.rect.w -= node.element.style.child_gap,
.top_to_bottom => node.element.rect.h -= node.element.style.child_gap,
}
if (node.element.scrollable) |scroll| {
// have to remove the parents size
node.element.scrollable.?.child_size = node.element.rect;
node.element.scrollable.?.child_size.w -= size.w;
node.element.scrollable.?.child_size.h -= size.h;
switch (scroll.dir) {
// .both => node.element.rect = size, // retain size
.x => node.element.rect.w = size.w, // scroll in the x then the hieght stays the same
.y => node.element.rect.h = size.h, // scroll in the y then the width stays the same
}
}
// std.debug.print("after {s} {}\n", .{ node.element.name, node.element.rect });
},
else => {},
}
closeElement(node, parent);
}
fn deepCloneHelper(node: Node, node_location: *Node, alloc: std.mem.Allocator) !void { fn deepCloneHelper(node: Node, node_location: *Node, alloc: std.mem.Allocator) !void {
// std.debug.print("nodeloc : {}\n", .{node_location}); // std.debug.print("nodeloc : {}\n", .{node_location});
node_location.* = node; node_location.* = node;
@@ -473,15 +513,26 @@ pub fn Shoots(
switch (node) { switch (node) {
.element => { .element => {
// std.debug.print("parent name : {s}\n", .{parent.element.name}); // std.debug.print("parent name : {s}\n", .{parent.element.name});
try command_list.append(alloc, .{
.rect = .{ if (node.element.scrollable) |_| {
.colour = node.element.style.background_colour, try command_list.append(alloc, .{
.pos = node.element.pos, .clip_start = .{
.rect = node.element.rect, .rect = node.element.rect,
.rounding = node.element.style.rounded, .z_index = node.element.z_index,
.z_index = node.element.z_index, .pos = node.element.pos,
}, },
}); });
} else {
try command_list.append(alloc, .{
.rect = .{
.colour = node.element.style.background_colour,
.pos = node.element.pos,
.rect = node.element.rect,
.rounding = node.element.style.rounded,
.z_index = node.element.z_index,
},
});
}
for (node.element.children, 0..) |_, i| { for (node.element.children, 0..) |_, i| {
switch (node.element.children[i]) { switch (node.element.children[i]) {
@@ -500,6 +551,12 @@ pub fn Shoots(
}), }),
} }
} }
if (node.element.scrollable) |_| {
try command_list.append(alloc, .{
.clip_end = .{},
});
}
}, },
else => return, // the commands get created above, since the text and texture need a pos else => return, // the commands get created above, since the text and texture need a pos
// but they dont have the pos one the parent has it // but they dont have the pos one the parent has it
@@ -512,27 +569,6 @@ pub fn Shoots(
return render_commands; return render_commands;
} }
fn computeSizes(node: *Node, parent: *Node) void {
switch (node.*) {
.element => {
// std.debug.print("parent name : {s}\n", .{parent.element.name});
for (node.element.children, 0..) |_, i| {
computeSizes(@constCast(&node.element.children[i]), node);
}
// cheaters way to beat the fence post problem
// TODO fix this
switch (node.element.style.layout) {
.right_to_left => node.element.rect.w -= node.element.style.child_gap,
.top_to_bottom => node.element.rect.h -= node.element.style.child_gap,
}
},
else => {},
}
closeElement(node, parent);
}
fn filterGrowableChildren(index: *usize, node: Node) ?*Ele { fn filterGrowableChildren(index: *usize, node: Node) ?*Ele {
switch (node) { switch (node) {
.element => { .element => {
@@ -758,6 +794,14 @@ pub fn Shoots(
fn computeChildernsPostions(ele: *Ele) void { fn computeChildernsPostions(ele: *Ele) void {
const layout_style = ele.style.layout; const layout_style = ele.style.layout;
var children = @constCast(ele.children); var children = @constCast(ele.children);
const scroll_offset: Pos = blk: {
if (ele.scrollable) |scroll| {
const scroll_offset = scroll.offset.*;
break :blk scroll_offset;
}
break :blk .{};
};
switch (layout_style) { switch (layout_style) {
.right_to_left => { .right_to_left => {
@@ -767,8 +811,8 @@ pub fn Shoots(
switch (ele.children[i]) { switch (ele.children[i]) {
.element => { .element => {
// off set it by the parent // off set it by the parent
children[i].element.pos.x += ele.pos.x + ele.style.padding.left + off_set_left; children[i].element.pos.x += ele.pos.x + ele.style.padding.left + off_set_left - scroll_offset.x;
children[i].element.pos.y += ele.pos.y + ele.style.padding.top; children[i].element.pos.y += ele.pos.y + ele.style.padding.top - scroll_offset.y;
off_set_left += children[i].element.rect.w + child_gap; off_set_left += children[i].element.rect.w + child_gap;
// add // add
}, },
@@ -783,8 +827,8 @@ pub fn Shoots(
switch (ele.children[i]) { switch (ele.children[i]) {
.element => { .element => {
// off set it by the parent // off set it by the parent
children[i].element.pos.x += ele.pos.x + ele.style.padding.left; children[i].element.pos.x += ele.pos.x + ele.style.padding.left - scroll_offset.x;
children[i].element.pos.y += ele.pos.y + ele.style.padding.top + offset_top; children[i].element.pos.y += ele.pos.y + ele.style.padding.top + offset_top - scroll_offset.y;
offset_top += children[i].element.rect.h + child_gap; offset_top += children[i].element.rect.h + child_gap;
// add // add
}, },
@@ -843,6 +887,22 @@ pub fn Shoots(
.element => |e| { .element => |e| {
// std.debug.print("clicked : {} hovered node name : {s}\n", .{ clicked, e.name }); // std.debug.print("clicked : {} hovered node name : {s}\n", .{ clicked, e.name });
// TODO fix when another scrollable contaier occludes the other one
if (current_node.element.scrollable) |scroll| {
current_node.element.scrollable.?.offset.x += mouse_state.scroll_delta.x * scroll.child_size.w / current_node.element.rect.w;
current_node.element.scrollable.?.offset.y += mouse_state.scroll_delta.y * scroll.child_size.h / current_node.element.rect.h;
// fixes being able to scroll past the min value
if (scroll.offset.x < 0) current_node.element.scrollable.?.offset.x = 0;
if (scroll.offset.y < 0) current_node.element.scrollable.?.offset.y = 0;
// fixes being able to scroll past the max value
if (scroll.offset.x > scroll.child_size.w - current_node.element.rect.w)
current_node.element.scrollable.?.offset.x = scroll.child_size.w - current_node.element.rect.w;
if (scroll.offset.y > scroll.child_size.h - current_node.element.rect.h)
current_node.element.scrollable.?.offset.y = scroll.child_size.h - current_node.element.rect.h;
}
if (e.on_hover != null and e.allow_on_hover_when_occluded) { if (e.on_hover != null and e.allow_on_hover_when_occluded) {
needs_redraw |= node.element.on_hover.?.func(&node.element, mouse_state, node.element.on_click.?.data); needs_redraw |= node.element.on_hover.?.func(&node.element, mouse_state, node.element.on_click.?.data);
} }