move to clay 0.14

This commit is contained in:
johan0A 2025-06-08 20:17:50 +02:00
parent 582095c4b7
commit def516294b
10 changed files with 350 additions and 426 deletions

View file

@ -1,5 +1,6 @@
const std = @import("std");
const B = std.Build;
const rl = @import("raylib");
pub fn build(b: *B) void {
const target = b.standardTargetOptions(.{});
@ -10,7 +11,20 @@ pub fn build(b: *B) void {
.target = target,
.optimize = optimize,
});
addDependencies(root_module, b, target, optimize);
const zclay_dep = b.dependency("zclay", .{
.target = target,
.optimize = optimize,
});
root_module.addImport("zclay", zclay_dep.module("zclay"));
const raylib_dep = b.dependency("raylib_zig", .{
.target = target,
.optimize = optimize,
.platform = .rgfw,
});
root_module.addImport("raylib", raylib_dep.module("raylib"));
root_module.linkLibrary(raylib_dep.artifact("raylib"));
{
const exe = b.addExecutable(.{ .name = "zclay-example", .root_module = root_module });
@ -42,23 +56,3 @@ pub fn build(b: *B) void {
check.dependOn(&tests_check.step);
}
}
fn addDependencies(
module: *B.Module,
b: *B,
target: B.ResolvedTarget,
optimize: std.builtin.OptimizeMode,
) void {
const zclay_dep = b.dependency("zclay", .{
.target = target,
.optimize = optimize,
});
module.addImport("zclay", zclay_dep.module("zclay"));
const raylib_dep = b.dependency("raylib_zig", .{
.target = target,
.optimize = optimize,
});
module.addImport("raylib", raylib_dep.module("raylib"));
module.linkLibrary(raylib_dep.artifact("raylib"));
}

View file

@ -6,8 +6,8 @@
.path = "../../",
},
.raylib_zig = .{
.url = "git+https://github.com/Not-Nik/raylib-zig#5bbafa4f86eb3e3f41a107bbec6b8822e0f87c93",
.hash = "raylib_zig-5.6.0-dev-KE8REE0uBQD5Lzuc6qSZPtE5li3iPyU4iGQEMPqOPI11",
.url = "git+https://github.com/Not-Nik/raylib-zig#3bf08a304cfe2baf839705063ff999b8d8bc8c54",
.hash = "raylib_zig-5.6.0-dev-KE8REKAqBQAQugfCOjYYVRFOi7iaEJK1EMDcRUq8AOm2",
},
},
.paths = .{

View file

@ -20,7 +20,7 @@ fn sidebarItemComponent(index: u32) void {
}
// An example function to begin the "root" of your layout tree
fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderCommand) {
fn createLayout(profile_picture: *const rl.Texture2D) []cl.RenderCommand {
cl.beginLayout();
cl.UI()(.{
.id = .ID("OuterContainer"),
@ -46,7 +46,8 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
cl.UI()(.{
.id = .ID("ProfilePicture"),
.layout = .{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } },
.image = .{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @ptrCast(profile_picture) },
.aspect_ratio = .{ .aspect_ratio = 60 / 60 },
.image = .{ .image_data = @ptrCast(profile_picture) },
})({});
cl.text("Clay - UI Library", .{ .font_size = 24, .color = light_grey });
});
@ -93,7 +94,6 @@ pub fn main() !void {
.window_resizable = true,
});
rl.initWindow(1000, 1000, "Raylib zig Example");
rl.setWindowMinSize(300, 100);
rl.setTargetFPS(120);
// load assets
@ -124,10 +124,10 @@ pub fn main() !void {
.w = @floatFromInt(rl.getScreenWidth()),
.h = @floatFromInt(rl.getScreenHeight()),
});
var render_commands = createLayout(&profile_picture);
const render_commands = createLayout(&profile_picture);
rl.beginDrawing();
try renderer.clayRaylibRender(&render_commands, allocator);
try renderer.clayRaylibRender(render_commands, allocator);
rl.endDrawing();
}
}

View file

@ -14,10 +14,9 @@ pub fn clayColorToRaylibColor(color: cl.Color) rl.Color {
pub var raylib_fonts: [10]?rl.Font = .{null} ** 10;
pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), allocator: std.mem.Allocator) !void {
var i: usize = 0;
while (i < render_commands.length) : (i += 1) {
const render_command = cl.renderCommandArrayGet(render_commands, @intCast(i));
pub fn clayRaylibRender(render_commands: []cl.RenderCommand, allocator: std.mem.Allocator) !void {
for (0..render_commands.len) |i| {
const render_command = render_commands[i];
const bounding_box = render_command.bounding_box;
switch (render_command.command_type) {
.none => {},
@ -27,6 +26,7 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
// Raylib uses standard C strings so isn't compatible with cheap slices, we need to clone the string to append null terminator
const cloned = try allocator.dupeZ(u8, text);
defer allocator.free(cloned);
const fontToUse: rl.Font = raylib_fonts[config.font_id].?;
rl.setTextLineSpacing(config.line_height);
rl.drawTextEx(
@ -40,16 +40,18 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
},
.image => {
const config = render_command.render_data.image;
var tint = config.background_color;
if (std.mem.eql(f32, &tint, &.{ 0, 0, 0, 0 })) {
tint = .{ 255, 255, 255, 255 };
}
const image_texture: *const rl.Texture2D = @ptrCast(
@alignCast(config.image_data),
);
const image_texture: *const rl.Texture2D = @ptrCast(@alignCast(config.image_data));
rl.drawTextureEx(
image_texture.*,
rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y },
0,
bounding_box.width / @as(f32, @floatFromInt(image_texture.width)),
rl.Color.white,
clayColorToRaylibColor(tint),
);
},
.scissor_start => {
@ -88,102 +90,90 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
},
.border => {
const config = render_command.render_data.border;
// Left border
if (config.width.left > 0) {
rl.drawRectangle(
@intFromFloat(@round(bounding_box.x)),
@intFromFloat(@round(bounding_box.y + config.corner_radius.top_left)),
@intCast(config.width.left),
@intFromFloat(@round(bounding_box.height - config.corner_radius.top_left - config.corner_radius.bottom_left)),
clayColorToRaylibColor(config.color),
);
}
// Right border
if (config.width.right > 0) {
rl.drawRectangle(
@intFromFloat(@round(bounding_box.x + bounding_box.width - @as(f32, @floatFromInt(config.width.right)))),
@intFromFloat(@round(bounding_box.y + config.corner_radius.top_right)),
@intCast(config.width.right),
@intFromFloat(@round(bounding_box.height - config.corner_radius.top_right - config.corner_radius.bottom_right)),
clayColorToRaylibColor(config.color),
);
}
// Top border
if (config.width.top > 0) {
rl.drawRectangle(
@intFromFloat(@round(bounding_box.x + config.corner_radius.top_left)),
@intFromFloat(@round(bounding_box.y)),
@intFromFloat(@round(bounding_box.width - config.corner_radius.top_left - config.corner_radius.top_right)),
@intCast(config.width.top),
clayColorToRaylibColor(config.color),
);
}
// Bottom border
if (config.width.bottom > 0) {
rl.drawRectangle(
@intFromFloat(@round(bounding_box.x + config.corner_radius.bottom_left)),
@intFromFloat(@round(bounding_box.y + bounding_box.height - @as(f32, @floatFromInt(config.width.bottom)))),
@intFromFloat(@round(bounding_box.width - config.corner_radius.bottom_left - config.corner_radius.bottom_right)),
@intCast(config.width.bottom),
clayColorToRaylibColor(config.color),
);
}
if (config.corner_radius.top_left > 0) {
rl.drawRing(
rl.Vector2{
.x = @round(bounding_box.x + config.corner_radius.top_left),
.y = @round(bounding_box.y + config.corner_radius.top_left),
},
@round(config.corner_radius.top_left - @as(f32, @floatFromInt(config.width.top))),
config.corner_radius.top_left,
180,
270,
10,
clayColorToRaylibColor(config.color),
);
}
if (config.corner_radius.top_right > 0) {
rl.drawRing(
rl.Vector2{
.x = @round(bounding_box.x + bounding_box.width - config.corner_radius.top_right),
.y = @round(bounding_box.y + config.corner_radius.top_right),
},
@round(config.corner_radius.top_right - @as(f32, @floatFromInt(config.width.top))),
config.corner_radius.top_right,
270,
360,
10,
clayColorToRaylibColor(config.color),
);
}
if (config.corner_radius.bottom_left > 0) {
rl.drawRing(
rl.Vector2{
.x = @round(bounding_box.x + config.corner_radius.bottom_left),
.y = @round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_left),
},
@round(config.corner_radius.bottom_left - @as(f32, @floatFromInt(config.width.top))),
config.corner_radius.bottom_left,
90,
180,
10,
clayColorToRaylibColor(config.color),
);
}
if (config.corner_radius.bottom_right > 0) {
rl.drawRing(
rl.Vector2{
.x = @round(bounding_box.x + bounding_box.width - config.corner_radius.bottom_right),
.y = @round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_right),
},
@round(config.corner_radius.bottom_right - @as(f32, @floatFromInt(config.width.bottom))),
config.corner_radius.bottom_right,
0.1,
90,
10,
clayColorToRaylibColor(config.color),
);
}
const color = clayColorToRaylibColor(config.color);
const bb = bounding_box;
const corners = config.corner_radius;
const drawRect = struct {
fn draw(x: f32, y: f32, w: f32, h: f32, c: rl.Color) void {
rl.drawRectangle(@intFromFloat(@round(x)), @intFromFloat(@round(y)), @intFromFloat(@round(w)), @intFromFloat(@round(h)), c);
}
}.draw;
drawRect(
bb.x,
bb.y + corners.top_left,
@floatFromInt(config.width.left),
bb.height - corners.top_left - corners.bottom_left,
color,
);
drawRect(
bb.x + bb.width - @as(f32, @floatFromInt(config.width.right)),
bb.y + corners.top_right,
@floatFromInt(config.width.right),
bb.height - corners.top_right - corners.bottom_right,
color,
);
drawRect(
bb.x + corners.top_left,
bb.y,
bb.width - corners.top_left - corners.top_right,
@floatFromInt(config.width.top),
color,
);
drawRect(
bb.x + corners.bottom_left,
bb.y + bb.height - @as(f32, @floatFromInt(config.width.bottom)),
bb.width - corners.bottom_left - corners.bottom_right,
@floatFromInt(config.width.bottom),
color,
);
const drawCorner = struct {
fn draw(center: rl.Vector2, innerRadius: f32, outerRadius: f32, startAngle: f32, endAngle: f32, c: rl.Color) void {
if (outerRadius <= 0) return;
rl.drawRing(center, @round(innerRadius), @round(outerRadius), startAngle, endAngle, 10, c);
}
}.draw;
drawCorner(
rl.Vector2{ .x = @round(bb.x + corners.top_left), .y = @round(bb.y + corners.top_left) },
corners.top_left - @as(f32, @floatFromInt(config.width.top)),
corners.top_left,
180,
270,
color,
);
drawCorner(
rl.Vector2{ .x = @round(bb.x + bb.width - corners.top_right), .y = @round(bb.y + corners.top_right) },
corners.top_right - @as(f32, @floatFromInt(config.width.top)),
corners.top_right,
270,
360,
color,
);
drawCorner(
rl.Vector2{ .x = @round(bb.x + corners.bottom_left), .y = @round(bb.y + bb.height - corners.bottom_left) },
corners.bottom_left - @as(f32, @floatFromInt(config.width.bottom)),
corners.bottom_left,
90,
180,
color,
);
drawCorner(
rl.Vector2{ .x = @round(bb.x + bb.width - corners.bottom_right), .y = @round(bb.y + bb.height - corners.bottom_right) },
corners.bottom_right - @as(f32, @floatFromInt(config.width.bottom)),
corners.bottom_right,
0.1,
90,
color,
);
},
.custom => {
// Implement custom element rendering here