can now scroll

This commit is contained in:
2026-01-22 13:46:30 +13:00
parent 61b278ac8f
commit 38e37dddc4

View File

@@ -1,6 +1,6 @@
const std = @import("std"); const std = @import("std");
const rl = @import("rl"); const rl = @import("rl");
const shoots = @import("shoots"); const shoots = @import("root.zig");
fn getTextWidth(string: []const u8, font: rl.Font) shoots.Real { fn getTextWidth(string: []const u8, font: rl.Font) shoots.Real {
var width: c_int = 0; var width: c_int = 0;
@@ -117,6 +117,8 @@ pub fn main() anyerror!void {
std.debug.print("shoots version :{s}\n", .{shoots.VERSION}); std.debug.print("shoots version :{s}\n", .{shoots.VERSION});
std.debug.print("raylib time : {}\n", .{@divTrunc(timer.lap(), std.time.ns_per_ms)}); std.debug.print("raylib time : {}\n", .{@divTrunc(timer.lap(), std.time.ns_per_ms)});
var scroll_offset: shoots.Pos = .{};
const child = &[_]UI.Node{ const child = &[_]UI.Node{
sideBar(), sideBar(),
button(), button(),
@@ -153,178 +155,193 @@ pub fn main() anyerror!void {
}, },
}), }),
// UI.Element(.{ UI.Element(.{
// .name = "child", .name = "child",
// .style = .{ .background_colour = .{ .style = .{ .background_colour = .{
// .b = 255, .b = 255,
// }, .padding = .{ .bottom = 5 } }, }, .padding = .{ .bottom = 5 } },
// .children = &[_]UI.Node{ .children = &[_]UI.Node{
// UI.Element(.{ UI.Element(.{
// .name = "branch1", .name = "branch1",
// // .rect = .{ .w = 200 }, // .rect = .{ .w = 200 },
// .style = .{ .style = .{
// .size_x = .grow, .size_x = .grow,
// .padding = .{ .padding = .{
// .bottom = 5, .bottom = 5,
// .left = 5, .left = 5,
// .top = 5, .top = 5,
// .right = 5, .right = 5,
// }, },
// // .layout = .right_to_left,
// .child_gap = 5,
// },
// .children = &[_]UI.Node{
// UI.Element(.{
// .name = "branch11",
// .style = .{
// .background_colour = .{
// .g = 128,
// .b = 128,
// .r = 128,
// },
// .size_x = .grow,
// },
// .rect = .{
// .h = 40,
// .w = 40,
// },
// }),
// UI.Element(.{
// .name = "branch12",
// .style = .{
// .background_colour = .{
// .g = 128,
// .r = 128,
// },
// .size_x = .grow,
// },
// .rect = .{
// .h = 40,
// .w = 40,
// },
// }),
// UI.Element(.{
// .name = "branch13",
// .rect = .{
// .h = 40,
// .w = 40,
// },
// .style = .{
// .background_colour = .{
// .g = 90,
// .b = 150,
// },
// },
// }),
// },
// }),
// UI.Element(.{
// .name = "branch2",
// .style = .{
// .background_colour = .{
// .r = 255,
// .g = 128,
// },
// .layout = .right_to_left, // .layout = .right_to_left,
// .child_gap = 4, .child_gap = 5,
// .padding = .{ },
// .left = 10, .children = &[_]UI.Node{
// .bottom = 10, UI.Element(.{
// .right = 10, .name = "branch11",
// .top = 10, .style = .{
// }, .background_colour = .{
// }, .g = 128,
// .children = &[_]UI.Node{ .b = 128,
// UI.Element(.{ .r = 128,
// .name = "branch21", },
// .rect = .{ .size_x = .grow,
// .h = 30, },
// .w = 30, .rect = .{
// }, .h = 40,
// .style = .{ .w = 40,
// .rounded = 40, },
// .background_colour = .{ }),
// .r = 255, UI.Element(.{
// .b = 150, .name = "branch12",
// }, .style = .{
// }, .background_colour = .{
// }), .g = 128,
// UI.Element(.{ .r = 128,
// .name = "branch22", },
// .rect = .{ .size_x = .grow,
// .h = 30, },
// .w = 30, .rect = .{
// }, .h = 40,
// .style = .{ .w = 40,
// .rounded = 40, },
// .background_colour = .{ }),
// .r = 90, UI.Element(.{
// .b = 150, .name = "branch13",
// }, .rect = .{
// }, .h = 40,
// }), .w = 40,
// UI.Element(.{ },
// .name = "branch21", .style = .{
// .rect = .{ .background_colour = .{
// .h = 30, .g = 90,
// .w = 30, .b = 150,
// }, },
// .style = .{ },
// .rounded = 40, }),
// .background_colour = .{ },
// .r = 255, }),
// .b = 150, UI.Element(.{
// }, .name = "branch2",
// }, .style = .{
// }), .background_colour = .{
// UI.Element(.{ .r = 255,
// .name = "branch22", .g = 128,
// .rect = .{ },
// .h = 30, .layout = .right_to_left,
// .w = 30, .child_gap = 4,
// }, .padding = .{
// .style = .{ .left = 10,
// .rounded = 40, .bottom = 10,
// .background_colour = .{ .right = 10,
// .r = 90, .top = 10,
// .b = 150, },
// }, },
// }, .children = &[_]UI.Node{
// }), UI.Element(.{
// UI.Element(.{ .name = "branch21",
// .name = "branch21", .rect = .{
// .rect = .{ .h = 30,
// .h = 30, .w = 30,
// .w = 30, },
// }, .style = .{
// .style = .{ .rounded = 40,
// .rounded = 40, .background_colour = .{
// .background_colour = .{ .r = 255,
// .r = 255, .b = 150,
// .b = 150, },
// }, },
// }, }),
// }), UI.Element(.{
// UI.Element(.{ .name = "branch22",
// .name = "branch22", .rect = .{
// .rect = .{ .h = 30,
// .h = 30, .w = 30,
// .w = 30, },
// }, .style = .{
// .style = .{ .rounded = 40,
// .rounded = 40, .background_colour = .{
// .background_colour = .{ .r = 90,
// .r = 90, .b = 150,
// .b = 150, },
// }, },
// }, }),
// }), UI.Element(.{
// }, .name = "branch21",
// }), .rect = .{
// }, .h = 30,
// }), .w = 30,
button(), },
button(), .style = .{
.rounded = 40,
.background_colour = .{
.r = 255,
.b = 150,
},
},
}),
UI.Element(.{
.name = "branch22",
.rect = .{
.h = 30,
.w = 30,
},
.style = .{
.rounded = 40,
.background_colour = .{
.r = 90,
.b = 150,
},
},
}),
UI.Element(.{
.name = "branch21",
.rect = .{
.h = 30,
.w = 30,
},
.style = .{
.rounded = 40,
.background_colour = .{
.r = 255,
.b = 150,
},
},
}),
UI.Element(.{
.name = "branch22",
.rect = .{
.h = 30,
.w = 30,
},
.style = .{
.rounded = 40,
.background_colour = .{
.r = 90,
.b = 150,
},
},
}),
},
}),
},
}),
UI.Element(.{
.name = "scrollable",
.scrollable = .{
.dir = .y,
.offset = &scroll_offset,
},
.rect = .{ .h = 250 },
.children = &[_]UI.Node{
UI.Element(
.{
.style = .{
.background_colour = .{
.r = 255,
},
},
.children = &[_]UI.Node{
UI.Image(.{ UI.Image(.{
.texture = image_texture, .texture = image_texture,
.rect = .{ .rect = .{
@@ -332,6 +349,13 @@ pub fn main() anyerror!void {
.w = @floatFromInt(image_texture.width), .w = @floatFromInt(image_texture.width),
}, },
}), }),
button(),
button(),
},
},
),
},
}),
}; };
// root.Shoots(root.TextType(raylib.Font,(function 'getTextWidth'),(function 'getTextheight')),root.TextureType(raylib.Texture)).NodeTypes // root.Shoots(root.TextType(raylib.Font,(function 'getTextWidth'),(function 'getTextheight')),root.TextureType(raylib.Texture)).NodeTypes
@@ -391,16 +415,21 @@ pub fn main() anyerror!void {
.left = rl.isMouseButtonDown(.left), .left = rl.isMouseButtonDown(.left),
.middle = rl.isMouseButtonDown(.middle), .middle = rl.isMouseButtonDown(.middle),
.right = rl.isMouseButtonDown(.right), .right = rl.isMouseButtonDown(.right),
.scroll_delta = .{
.y = rl.getMouseWheelMoveV().y,
.x = rl.getMouseWheelMoveV().x,
},
}); });
const commands = try UI.getRenderCommands(sized, al.allocator()); const commands = try UI.getRenderCommands(sized, al.allocator());
std.debug.print("{f}\n", .{sized}); // std.debug.print("{f}\n", .{sized});
// std.debug.print("layout time : {}ms\n", .{ std.debug.print("layout time : {}ms\n", .{
// @as(f32, @floatFromInt(timer.lap())) / @as(f32, @floatFromInt(std.time.ns_per_ms)), @as(f32, @floatFromInt(timer.lap())) / @as(f32, @floatFromInt(std.time.ns_per_ms)),
// }); });
for (commands.items) |command| { for (commands.items) |command| {
// std.debug.print("command : {any}\n", .{command}); // std.debug.print("command : {any}\n", .{command});
rl.clearBackground(.white);
switch (command) { switch (command) {
.rect => |r| { .rect => |r| {
if (r.rounding) |rounding| { if (r.rounding) |rounding| {
@@ -436,15 +465,22 @@ pub fn main() anyerror!void {
}, },
.text => |t| { .text => |t| {
const string = @as([:0]const u8, @ptrCast(t.text.string)); const string = @as([:0]const u8, @ptrCast(t.text.string));
rl.drawText(string, @as(i32, @intFromFloat(t.pos.x)), @as(i32, @intFromFloat(t.pos.y)), @as(i32, @intFromFloat(t.text.getTextHeight())), rl.Color.init( rl.drawText(
string,
@as(i32, @intFromFloat(t.pos.x)),
@as(i32, @intFromFloat(t.pos.y)),
@as(i32, @intFromFloat(t.text.getTextHeight())),
rl.Color.init(
t.text.colour.r, t.text.colour.r,
t.text.colour.g, t.text.colour.g,
t.text.colour.b, t.text.colour.b,
t.text.colour.a, t.text.colour.a,
)); ),
);
}, },
.texture => |tex| { .texture => |tex| {
// std.debug.print("{}\n", .{tex.texture.texture}); // std.debug.print("{}\n", .{tex.texture.texture});
// std.debug.print("texture {}\n", .{tex});
rl.drawTexture( rl.drawTexture(
tex.texture.texture, tex.texture.texture,
@as(i32, @intFromFloat(tex.pos.x)), @as(i32, @intFromFloat(tex.pos.x)),
@@ -452,10 +488,28 @@ pub fn main() anyerror!void {
.white, .white,
); );
}, },
.clip_start => |clip| {
// std.debug.print("clip {}\n", .{clip});
rl.beginScissorMode(
@as(i32, @intFromFloat(clip.pos.x)),
@as(i32, @intFromFloat(clip.pos.y)),
@as(i32, @intFromFloat(clip.rect.w)),
@as(i32, @intFromFloat(clip.rect.h)),
);
// rl.drawRectangleRec(rl.Rectangle.init(
// clip.pos.x,
// clip.pos.y,
// clip.rect.w,
// clip.rect.h,
// ), .blue);
},
.clip_end => |_| {
rl.endScissorMode();
},
} }
} }
rl.clearBackground(.white);
_ = al.reset(.retain_capacity); _ = al.reset(.retain_capacity);
// rl.drawRectangle(0, 0, 200, 100, .blue); // rl.drawRectangle(0, 0, 200, 100, .blue);