From 38e37dddc4d4412dae068c9b98f7d9ff6341095c Mon Sep 17 00:00:00 2001 From: sirlilpanda Date: Thu, 22 Jan 2026 13:46:30 +1300 Subject: [PATCH] can now scroll --- examples/raylib-example/src/main.zig | 432 +++++++++++++++------------ 1 file changed, 243 insertions(+), 189 deletions(-) diff --git a/examples/raylib-example/src/main.zig b/examples/raylib-example/src/main.zig index aa0c3fd..b42dc41 100644 --- a/examples/raylib-example/src/main.zig +++ b/examples/raylib-example/src/main.zig @@ -1,6 +1,6 @@ const std = @import("std"); const rl = @import("rl"); -const shoots = @import("shoots"); +const shoots = @import("root.zig"); fn getTextWidth(string: []const u8, font: rl.Font) shoots.Real { 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("raylib time : {}\n", .{@divTrunc(timer.lap(), std.time.ns_per_ms)}); + var scroll_offset: shoots.Pos = .{}; + const child = &[_]UI.Node{ sideBar(), button(), @@ -153,183 +155,205 @@ pub fn main() anyerror!void { }, }), - // UI.Element(.{ - // .name = "child", - // .style = .{ .background_colour = .{ - // .b = 255, - // }, .padding = .{ .bottom = 5 } }, - // .children = &[_]UI.Node{ - // UI.Element(.{ - // .name = "branch1", - // // .rect = .{ .w = 200 }, - // .style = .{ - // .size_x = .grow, - // .padding = .{ - // .bottom = 5, - // .left = 5, - // .top = 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, - // .child_gap = 4, - // .padding = .{ - // .left = 10, - // .bottom = 10, - // .right = 10, - // .top = 10, - // }, - // }, - // .children = &[_]UI.Node{ - // 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 = "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 = "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, - // }, - // }, - // }), - // }, - // }), - // }, - // }), - button(), - button(), - UI.Image(.{ - .texture = image_texture, - .rect = .{ - .h = @floatFromInt(image_texture.height), - .w = @floatFromInt(image_texture.width), + UI.Element(.{ + .name = "child", + .style = .{ .background_colour = .{ + .b = 255, + }, .padding = .{ .bottom = 5 } }, + .children = &[_]UI.Node{ + UI.Element(.{ + .name = "branch1", + // .rect = .{ .w = 200 }, + .style = .{ + .size_x = .grow, + .padding = .{ + .bottom = 5, + .left = 5, + .top = 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, + .child_gap = 4, + .padding = .{ + .left = 10, + .bottom = 10, + .right = 10, + .top = 10, + }, + }, + .children = &[_]UI.Node{ + 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 = "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 = "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(.{ + .texture = image_texture, + .rect = .{ + .h = @floatFromInt(image_texture.height), + .w = @floatFromInt(image_texture.width), + }, + }), + button(), + button(), + }, + }, + ), }, }), }; @@ -391,16 +415,21 @@ pub fn main() anyerror!void { .left = rl.isMouseButtonDown(.left), .middle = rl.isMouseButtonDown(.middle), .right = rl.isMouseButtonDown(.right), + .scroll_delta = .{ + .y = rl.getMouseWheelMoveV().y, + .x = rl.getMouseWheelMoveV().x, + }, }); const commands = try UI.getRenderCommands(sized, al.allocator()); - std.debug.print("{f}\n", .{sized}); - // std.debug.print("layout time : {}ms\n", .{ - // @as(f32, @floatFromInt(timer.lap())) / @as(f32, @floatFromInt(std.time.ns_per_ms)), - // }); + // std.debug.print("{f}\n", .{sized}); + std.debug.print("layout time : {}ms\n", .{ + @as(f32, @floatFromInt(timer.lap())) / @as(f32, @floatFromInt(std.time.ns_per_ms)), + }); for (commands.items) |command| { // std.debug.print("command : {any}\n", .{command}); + rl.clearBackground(.white); switch (command) { .rect => |r| { if (r.rounding) |rounding| { @@ -436,15 +465,22 @@ pub fn main() anyerror!void { }, .text => |t| { 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( - t.text.colour.r, - t.text.colour.g, - t.text.colour.b, - t.text.colour.a, - )); + 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.g, + t.text.colour.b, + t.text.colour.a, + ), + ); }, .texture => |tex| { // std.debug.print("{}\n", .{tex.texture.texture}); + // std.debug.print("texture {}\n", .{tex}); rl.drawTexture( tex.texture.texture, @as(i32, @intFromFloat(tex.pos.x)), @@ -452,10 +488,28 @@ pub fn main() anyerror!void { .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); // rl.drawRectangle(0, 0, 200, 100, .blue);