From f6a86434e28bc420ba8437319253794f9313c90c Mon Sep 17 00:00:00 2001 From: johan0A Date: Mon, 13 Jan 2025 00:06:27 +0100 Subject: [PATCH 1/4] first pass with unsolved text wrapping bug --- examples/bug/build.zig | 86 +++++ examples/bug/build.zig.zon | 20 ++ examples/bug/src/main.zig | 154 +++++++++ examples/bug/src/raylib_render_clay.zig | 234 ++++++++++++++ .../bug/src/resources/Quicksand-Semibold.ttf | Bin 0 -> 18980 bytes examples/clay-official-website/src/main.zig | 298 ++++++++---------- src/root.zig | 56 +++- test.zig | 16 + 8 files changed, 679 insertions(+), 185 deletions(-) create mode 100644 examples/bug/build.zig create mode 100644 examples/bug/build.zig.zon create mode 100644 examples/bug/src/main.zig create mode 100644 examples/bug/src/raylib_render_clay.zig create mode 100644 examples/bug/src/resources/Quicksand-Semibold.ttf create mode 100644 test.zig diff --git a/examples/bug/build.zig b/examples/bug/build.zig new file mode 100644 index 0000000..464f450 --- /dev/null +++ b/examples/bug/build.zig @@ -0,0 +1,86 @@ +const std = @import("std"); +const B = std.Build; + +pub fn build(b: *B) void { + const target = b.standardTargetOptions(.{}); + const optimize = b.standardOptimizeOption(.{}); + + { + const exe = b.addExecutable(.{ + .name = "debug", + .root_source_file = b.path("src/main.zig"), + .target = target, + .optimize = optimize, + }); + addDependencies(exe, b, target, optimize); + + b.installArtifact(exe); + const run_cmd = b.addRunArtifact(exe); + run_cmd.step.dependOn(b.getInstallStep()); + + if (b.args) |args| { + run_cmd.addArgs(args); + } + + const run_step = b.step("run", "Run the app"); + run_step.dependOn(&run_cmd.step); + } + + { + const exe_unit_tests = b.addTest(.{ + .root_source_file = b.path("src/main.zig"), + .target = target, + .optimize = optimize, + }); + addDependencies(exe_unit_tests, b, target, optimize); + + const run_exe_unit_tests = b.addRunArtifact(exe_unit_tests); + const test_step = b.step("test", "Run unit tests"); + test_step.dependOn(&run_exe_unit_tests.step); + } + + { + const exe_check = b.addExecutable(.{ + .name = "check", + .root_source_file = b.path("src/main.zig"), + .target = target, + .optimize = optimize, + }); + addDependencies(exe_check, b, target, optimize); + + const tests_check = b.addTest(.{ + .name = "check", + .root_source_file = b.path("src/main.zig"), + .target = target, + .optimize = optimize, + }); + addDependencies(tests_check, b, target, optimize); + + const check = b.step("check", "Check if exe and tests compile"); + check.dependOn(&exe_check.step); + check.dependOn(&tests_check.step); + } +} + +fn addDependencies( + compile_step: *B.Step.Compile, + b: *B, + target: B.ResolvedTarget, + optimize: std.builtin.OptimizeMode, +) void { + const zclay_dep = b.dependency("zclay", .{ + .target = target, + .optimize = optimize, + }); + const zclay = zclay_dep.module("zclay"); + compile_step.root_module.addImport("zclay", zclay); + + const raylib_dep = b.dependency("raylib-zig", .{ + .target = target, + .optimize = optimize, + }); + const raylib = raylib_dep.module("raylib"); + compile_step.root_module.addImport("raylib", raylib); + const raylib_artifact = raylib_dep.artifact("raylib"); + compile_step.linkLibrary(raylib_artifact); +} diff --git a/examples/bug/build.zig.zon b/examples/bug/build.zig.zon new file mode 100644 index 0000000..68acf3f --- /dev/null +++ b/examples/bug/build.zig.zon @@ -0,0 +1,20 @@ +.{ + .name = "zig-exe-template", + .version = "0.0.0", + .dependencies = .{ + .zclay = .{ + .path = "../../", + }, + .@"raylib-zig" = .{ + .url = "https://github.com/Not-Nik/raylib-zig/archive/35332edacf2e03236220f12a8dd3410b1c39d9eb.tar.gz", + .hash = "1220c34fe472645e173a7168eb513ca8343af3c3f61b618daedda30ec3932b002637", + }, + }, + .paths = .{ + "build.zig", + "build.zig.zon", + "src", + "LICENSE", + "README.md", + }, +} diff --git a/examples/bug/src/main.zig b/examples/bug/src/main.zig new file mode 100644 index 0000000..177a72d --- /dev/null +++ b/examples/bug/src/main.zig @@ -0,0 +1,154 @@ +const std = @import("std"); +const rl = @import("raylib"); +const cl = @import("zclay"); +const renderer = @import("raylib_render_clay.zig"); + +const FONT_ID_BODY_30 = 6; + +const COLOR_LIGHT = cl.Color{ 244, 235, 230, 255 }; +const COLOR_LIGHT_HOVER = cl.Color{ 224, 215, 210, 255 }; +const COLOR_BUTTON_HOVER = cl.Color{ 238, 227, 225, 255 }; +const COLOR_BROWN = cl.Color{ 61, 26, 5, 255 }; +const COLOR_RED = cl.Color{ 168, 66, 28, 255 }; +const COLOR_RED_HOVER = cl.Color{ 148, 46, 8, 255 }; +const COLOR_ORANGE = cl.Color{ 225, 138, 50, 255 }; +const COLOR_BLUE = cl.Color{ 111, 173, 162, 255 }; +const COLOR_TEAL = cl.Color{ 111, 173, 162, 255 }; +const COLOR_BLUE_DARK = cl.Color{ 2, 32, 82, 255 }; +const COLOR_ZIG_LOGO = cl.Color{ 247, 164, 29, 255 }; + +// Colors for top stripe +const COLORS_TOP_BORDER = [_]cl.Color{ + .{ 240, 213, 137, 255 }, + .{ 236, 189, 80, 255 }, + .{ 225, 138, 50, 255 }, + .{ 223, 110, 44, 255 }, + .{ 168, 66, 28, 255 }, +}; + +const border_data = cl.BorderData{ .width = 2, .color = COLOR_RED }; + +var window_height: isize = 0; +var window_width: isize = 0; + +fn LandingPageBlob_(index: u32, font_size: u16, font_id: u16, color: cl.Color, max_width: f32, text: []const u8) void { + // std.debug.print("\nBLOB START\n", .{}); + if (cl.OPEN(&.{ + .IDI("HeroBlob", index), + .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }), + .border(.outside(color, 2, 0)), + })) { + defer cl.CLOSE(); + cl.text(text, cl.Config.text(.{ .font_size = font_size, .font_id = font_id, .color = color })); + } + // std.debug.print("BLOB END\n\n", .{}); +} + +fn LandingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, max_width: f32, text: []const u8) void { + // std.debug.print("\nBLOB START\n", .{}); + cl.UI(&.{ + .IDI("HeroBlob", index), + .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }), + .border(.outside(color, 2, 0)), + })({ + cl.text(text, cl.Config.text(.{ .font_size = font_size, .font_id = font_id, .color = color })); + }); + // std.debug.print("BLOB END\n\n", .{}); +} + +fn createLayout() cl.ClayArray(cl.RenderCommand) { + cl.beginLayout(); + // cl.UI(&.{ + // .ID("ScrollContainerBackgroundRectangle"), + // .scroll(.{ .vertical = true }), + // .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM, .child_gap = 10 }), + // .rectangle(.{ .color = COLOR_LIGHT }), + // })({ + // LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings"); + // @call(.always_inline, LandingPageBlob, .{ 2, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings" }); + // }); + + if (cl.OPEN(&.{ + .ID("ScrollContainerBackgroundRectangle"), + .scroll(.{ .vertical = true }), + .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM, .child_gap = 10 }), + .rectangle(.{ .color = COLOR_LIGHT }), + })) { + defer cl.CLOSE(); + // LandingPageBlob_(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings"); + // std.debug.print("\n==\n\n", .{}); + @call(.always_inline, LandingPageBlob_, .{ 2, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings" }); + } + + return cl.endLayout(); +} + +fn loadFont(file_data: ?[]const u8, font_id: u16, font_size: i32) void { + renderer.raylib_fonts[font_id] = rl.loadFontFromMemory(".ttf", file_data, font_size * 2, null); + rl.setTextureFilter(renderer.raylib_fonts[font_id].?.texture, .bilinear); +} + +fn loadImage(comptime path: [:0]const u8) rl.Texture2D { + const texture = rl.loadTextureFromImage(rl.loadImageFromMemory(@ptrCast(std.fs.path.extension(path)), @embedFile(path))); + rl.setTextureFilter(texture, .bilinear); + return texture; +} + +pub fn main() anyerror!void { + const allocator = std.heap.page_allocator; + + // init clay + const min_memory_size: u32 = cl.minMemorySize(); + const memory = try allocator.alloc(u8, min_memory_size); + defer allocator.free(memory); + const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(min_memory_size, @ptrCast(memory)); + cl.initialize(arena, .{ .h = 1000, .w = 1000 }); + cl.setMeasureTextFunction(renderer.measureText); + + // init raylib + rl.setConfigFlags(.{ + .msaa_4x_hint = true, + .window_resizable = true, + }); + rl.initWindow(1000, 1000, "Raylib zig Example"); + rl.setWindowMinSize(300, 100); + rl.setTargetFPS(60); + + // load assets + loadFont(@embedFile("resources/Quicksand-Semibold.ttf"), FONT_ID_BODY_30, 30); + + var debug_mode_enabled = false; + while (!rl.windowShouldClose()) { + if (rl.isKeyPressed(.d)) { + debug_mode_enabled = !debug_mode_enabled; + cl.setDebugModeEnabled(debug_mode_enabled); + } + + window_width = rl.getScreenWidth(); + window_height = rl.getScreenHeight(); + + const mouse_pos = rl.getMousePosition(); + cl.setPointerState(.{ + .x = mouse_pos.x, + .y = mouse_pos.y, + }, rl.isMouseButtonDown(.left)); + + const scroll_delta = rl.getMouseWheelMoveV().multiply(.{ .x = 6, .y = 6 }); + cl.updateScrollContainers( + false, + .{ .x = scroll_delta.x, .y = scroll_delta.y }, + rl.getFrameTime(), + ); + + cl.setLayoutDimensions(.{ + .w = @floatFromInt(window_width), + .h = @floatFromInt(window_height), + }); + var render_commands = createLayout(); + + rl.beginDrawing(); + renderer.clayRaylibRender(&render_commands, allocator); + rl.endDrawing(); + // @panic(""); + } +} diff --git a/examples/bug/src/raylib_render_clay.zig b/examples/bug/src/raylib_render_clay.zig new file mode 100644 index 0000000..cb91142 --- /dev/null +++ b/examples/bug/src/raylib_render_clay.zig @@ -0,0 +1,234 @@ +const std = @import("std"); +const rl = @import("raylib"); +const cl = @import("zclay"); +const math = std.math; + +pub fn clayColorToRaylibColor(color: cl.Color) rl.Color { + return rl.Color{ + .r = @intFromFloat(color[0]), + .g = @intFromFloat(color[1]), + .b = @intFromFloat(color[2]), + .a = @intFromFloat(color[3]), + }; +} + +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)); + const bounding_box = render_command.bounding_box; + switch (render_command.command_type) { + .None => {}, + .Text => { + const text = render_command.text.chars[0..@intCast(render_command.text.length)]; + const cloned = allocator.dupeZ(c_char, text) catch unreachable; + defer allocator.free(cloned); + const fontToUse: rl.Font = raylib_fonts[render_command.config.text_element_config.font_id].?; + rl.setTextLineSpacing(render_command.config.text_element_config.line_height); + rl.drawTextEx( + fontToUse, + @ptrCast(@alignCast(cloned.ptr)), + rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y }, + @floatFromInt(render_command.config.text_element_config.font_size), + @floatFromInt(render_command.config.text_element_config.letter_spacing), + clayColorToRaylibColor(render_command.config.text_element_config.color), + ); + }, + .Image => { + const image_texture: *const rl.Texture2D = @ptrCast( + @alignCast(render_command.config.image_element_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, + ); + }, + .ScissorStart => { + rl.beginScissorMode( + @intFromFloat(math.round(bounding_box.x)), + @intFromFloat(math.round(bounding_box.y)), + @intFromFloat(math.round(bounding_box.width)), + @intFromFloat(math.round(bounding_box.height)), + ); + }, + .ScissorEnd => rl.endScissorMode(), + .Rectangle => { + const config = render_command.config.rectangle_element_config; + if (config.corner_radius.top_left > 0) { + const radius: f32 = (config.corner_radius.top_left * 2) / @min(bounding_box.width, bounding_box.height); + rl.drawRectangleRounded( + rl.Rectangle{ + .x = bounding_box.x, + .y = bounding_box.y, + .width = bounding_box.width, + .height = bounding_box.height, + }, + radius, + 8, + clayColorToRaylibColor(config.color), + ); + } else { + rl.drawRectangle( + @intFromFloat(bounding_box.x), + @intFromFloat(bounding_box.y), + @intFromFloat(bounding_box.width), + @intFromFloat(bounding_box.height), + clayColorToRaylibColor(config.color), + ); + } + }, + .Border => { + const config = render_command.config.border_element_config; + if (config.left.width > 0) { + rl.drawRectangle( + @intFromFloat(math.round(bounding_box.x)), + @intFromFloat(math.round(bounding_box.y + config.corner_radius.top_left)), + @intCast(config.left.width), + @intFromFloat(math.round(bounding_box.height - config.corner_radius.top_left - config.corner_radius.bottom_left)), + clayColorToRaylibColor(config.left.color), + ); + } + if (config.right.width > 0) { + rl.drawRectangle( + @intFromFloat(math.round(bounding_box.x + bounding_box.width - @as(f32, @floatFromInt(config.right.width)))), + @intFromFloat(math.round(bounding_box.y + config.corner_radius.top_right)), + @intCast(config.right.width), + @intFromFloat(math.round(bounding_box.height - config.corner_radius.top_right - config.corner_radius.bottom_right)), + clayColorToRaylibColor(config.right.color), + ); + } + if (config.top.width > 0) { + rl.drawRectangle( + @intFromFloat(math.round(bounding_box.x + config.corner_radius.top_left)), + @intFromFloat(math.round(bounding_box.y)), + @intFromFloat(math.round(bounding_box.width - config.corner_radius.top_left - config.corner_radius.top_right)), + @intCast(config.top.width), + clayColorToRaylibColor(config.top.color), + ); + } + if (config.bottom.width > 0) { + rl.drawRectangle( + @intFromFloat(math.round(bounding_box.x + config.corner_radius.bottom_left)), + @intFromFloat(math.round(bounding_box.y + bounding_box.height - @as(f32, @floatFromInt(config.bottom.width)))), + @intFromFloat(math.round(bounding_box.width - config.corner_radius.bottom_left - config.corner_radius.bottom_right)), + @intCast(config.bottom.width), + clayColorToRaylibColor(config.bottom.color), + ); + } + + if (config.corner_radius.top_left > 0) { + rl.drawRing( + rl.Vector2{ + .x = math.round(bounding_box.x + config.corner_radius.top_left), + .y = math.round(bounding_box.y + config.corner_radius.top_left), + }, + math.round(config.corner_radius.top_left - @as(f32, @floatFromInt(config.top.width))), + config.corner_radius.top_left, + 180, + 270, + 10, + clayColorToRaylibColor(config.top.color), + ); + } + if (config.corner_radius.top_right > 0) { + rl.drawRing( + rl.Vector2{ + .x = math.round(bounding_box.x + bounding_box.width - config.corner_radius.top_right), + .y = math.round(bounding_box.y + config.corner_radius.top_right), + }, + math.round(config.corner_radius.top_right - @as(f32, @floatFromInt(config.top.width))), + config.corner_radius.top_right, + 270, + 360, + 10, + clayColorToRaylibColor(config.top.color), + ); + } + if (config.corner_radius.bottom_left > 0) { + rl.drawRing( + rl.Vector2{ + .x = math.round(bounding_box.x + config.corner_radius.bottom_left), + .y = math.round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_left), + }, + math.round(config.corner_radius.bottom_left - @as(f32, @floatFromInt(config.top.width))), + config.corner_radius.bottom_left, + 90, + 180, + 10, + clayColorToRaylibColor(config.bottom.color), + ); + } + if (config.corner_radius.bottom_right > 0) { + rl.drawRing( + rl.Vector2{ + .x = math.round(bounding_box.x + bounding_box.width - config.corner_radius.bottom_right), + .y = math.round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_right), + }, + math.round(config.corner_radius.bottom_right - @as(f32, @floatFromInt(config.top.width))), + config.corner_radius.bottom_right, + 0.1, + 90, + 10, + clayColorToRaylibColor(config.bottom.color), + ); + } + }, + .Custom => { + // Implement custom element rendering here + }, + } + } +} + +pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dimensions { + const font = raylib_fonts[config.font_id].?; + const text: []const u8 = clay_text; + const font_size: f32 = @floatFromInt(config.font_size); + const letter_spacing: f32 = @floatFromInt(config.letter_spacing); + const line_height = config.line_height; + + var temp_byte_counter: usize = 0; + var byte_counter: usize = 0; + var text_width: f32 = 0.0; + var temp_text_width: f32 = 0.0; + var text_height: f32 = font_size; + const scale_factor: f32 = font_size / @as(f32, @floatFromInt(font.baseSize)); + + var utf8 = std.unicode.Utf8View.initUnchecked(text).iterator(); + + while (utf8.nextCodepoint()) |codepoint| { + byte_counter += std.unicode.utf8CodepointSequenceLength(codepoint) catch 1; + const index: usize = @intCast( + rl.getGlyphIndex(font, @as(i32, @intCast(codepoint))), + ); + + if (codepoint != '\n') { + if (font.glyphs[index].advanceX != 0) { + text_width += @floatFromInt(font.glyphs[index].advanceX); + } else { + text_width += font.recs[index].width + @as(f32, @floatFromInt(font.glyphs[index].offsetX)); + } + } else { + if (temp_text_width < text_width) temp_text_width = text_width; + byte_counter = 0; + text_width = 0; + text_height += font_size + @as(f32, @floatFromInt(line_height)); + } + + if (temp_byte_counter < byte_counter) temp_byte_counter = byte_counter; + } + + if (temp_text_width < text_width) temp_text_width = text_width; + + std.debug.print("\"{s}\" => .w = {d}\n", .{ clay_text, temp_text_width * scale_factor + (@as(f32, @floatFromInt(temp_byte_counter)) - 1) * letter_spacing }); + + return cl.Dimensions{ + .h = text_height, + .w = temp_text_width * scale_factor + (@as(f32, @floatFromInt(temp_byte_counter)) - 1) * letter_spacing, + }; +} diff --git a/examples/bug/src/resources/Quicksand-Semibold.ttf b/examples/bug/src/resources/Quicksand-Semibold.ttf new file mode 100644 index 0000000000000000000000000000000000000000..27106d00af73ab0dce2ed14694f8a218788aafeb GIT binary patch literal 18980 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 >$`2U?t54;T${pbFSqEl# z26U_*crxj+h}YuXLZ2lRTe>p#{`ApHa9uK{2FL7Q!;aDXxkU(8pDHx0*?d!_;^`Pw zeo=V>RQX|TuF9{$*Lwg9yjwgf{|@-S#qXyKNBmV`GP__=sPb#8H(L?jz6whG^32s$ zd%OmDU2>qOiFx(y)8`&lo2S}q0Rpg{uK|NRzESxjB-=b{oLhKn_5*G&t*=*J zuiT8j*aKRegVBg_)x0v=zHCB6QMh(g%xKzrf~35BI#p}E&b#gcR`|`KD`fn0>tM{m~0+M zGk#B^c|jT~|6Cp805&g!bB-EBwENM|q$BQaY&3&`AN0P~%N(`9y(+9fb2*!0XSXaJ zUbzL_yt#rLr}7hqHP-!L<$m;t<7sgfkC|_7seFuKhW;;CZpPgoAWg4To~prv6#t>} z9bmpNj=eEg^9NiPtdhCL*8$_TMGJw|&of(fjgf>vpPrB@ob$jJzW=p@>2B4Nu*{`) z^drV8n18hv>&k-zETe!=0Ht1p=9qM4XGFd^fWse?lf}?X_zS!r51> zum%Gb4o8F4r&4C^f6|Bk+M-u&EUrw}YKIwbSnrndxVqk#YNM(%v9Z-zSqnH^U75Mw znteV8AI$YH&dSDCdoR5^{ob1MtTT(@X;m-S|F^`2+(CftP9sju;xBII3<)z^$RqCF zj;x5~3)`VbZa{M)^7OFk9}XYJS=#JG1n)$RPl1;b@LjHsZ_ph0muM`H2%-APqskh? zTvl9}Kx-25e$6hYFnb0W3yW}bm>*veGw{^|+4O(&VE^jaS^>k~I;<;O(c&{}V{5Zl zS0-Xr)XaJC4+PA$)nrsdPY3?k3J_hJbPQspJihmjV66h%ll}j87_52(`=Xa_uP28`rPH8UM4LB>BM1 z#x+S+T|rD{2W$?w+W?yOd z;NX6;@sh){yU6B!d-u$eo%nzB>?3pL`G9#oYM!q#&(|F|w*N5lPKzp5

X0hln!| z&afHSGm}&+-?gNk;w@`onoF^Ab{4?zIC9O}-!)`2a?NYV-;zi1_dHg`dNI9W+zyy> z&7nTPvg#ycmz^8&w$_W)RN0&?53jW~VC>?P0R3e>b}wy%?yzwK$aq;@maWQ#3I{4j zn3E#MWUvUdkd553(B4#S_n4z6P}{NkSs1gK7}P1$&6qD_t6)F21L81sS%ti&pmn`~ x$X2t=yf&h0z}D4=bJ|=fTOmaYJ2MEZKF7{c!d OPEN ELEMENT\n", .{}); cdefs.Clay__OpenElement(); - nesting_level += 1; for (configs) |config| { switch (config) { - .Layout => |layoutConf| cdefs.Clay__AttachLayoutConfig(layoutConf), + .Layout => |layoutConf| { + std.debug.print("LAYOUT CONF: {}\n", .{layoutConf}); + cdefs.Clay__AttachLayoutConfig(layoutConf); + }, .id => |id| cdefs.Clay__AttachId(id), - inline else => |elem_config| cdefs.Clay__AttachElementConfig(@ptrCast(elem_config), config), + inline else => |elem_config| { + std.debug.print("elem_config CONF: {}\n", .{elem_config}); + cdefs.Clay__AttachElementConfig(@ptrCast(elem_config), config); + }, } } + std.debug.print("-> POST ELEMENT\n", .{}); + cdefs.Clay__ElementPostConfiguration(); + return struct { + fn f(_: void) void { + std.time.sleep(1000); + std.debug.print("-> CLOSE ELEMENT\n", .{}); + cdefs.Clay__CloseElement(); + } + }.f; +} + +pub fn OPEN(configs: []const Config) bool { + std.debug.print("-> OPEN ELEMENT\n", .{}); + cdefs.Clay__OpenElement(); + for (configs) |config| { + switch (config) { + .Layout => |layoutConf| { + std.debug.print("LAYOUT CONF: {}\n", .{layoutConf}); + cdefs.Clay__AttachLayoutConfig(layoutConf); + }, + .id => |id| cdefs.Clay__AttachId(id), + inline else => |elem_config| { + std.debug.print("elem_config CONF: {}\n", .{elem_config}); + cdefs.Clay__AttachElementConfig(@ptrCast(elem_config), config); + }, + } + } + std.debug.print("-> POST ELEMENT\n", .{}); cdefs.Clay__ElementPostConfiguration(); return true; } pub fn CLOSE() void { - nesting_level -= 1; - if (nesting_level < 0) { - std.debug.panic("clay.CLOSE() was called but no clay element is currently open", .{}); - } + std.debug.print("-> CLOSE ELEMENT\n", .{}); cdefs.Clay__CloseElement(); } @@ -434,12 +463,6 @@ pub fn singleElem(configs: []const Config) void { } pub fn endLayout() ClayArray(RenderCommand) { - if (nesting_level > 0) { - std.debug.panic( - \\clay.endLayout() was called but {} clay elements are still currently open. - \\Make sure every call to clay.OPEN() is matched with a call to clay.CLOSE() before the end of the layout. - , .{nesting_level}); - } return cdefs.Clay_EndLayout(); } @@ -467,6 +490,7 @@ pub fn makeClayString(string: []const u8) String { } pub fn text(string: []const u8, config: Config) void { + // std.debug.print("TEXT 2 conf: {}\n", .{config.Text}); cdefs.Clay__OpenTextElement(makeClayString(string), config.Text); } diff --git a/test.zig b/test.zig new file mode 100644 index 0000000..2e46214 --- /dev/null +++ b/test.zig @@ -0,0 +1,16 @@ +const std = @import("std"); + +fn CLOSE(_: void) void { + std.debug.print("CLOSE\n", .{}); +} + +inline fn UI() fn (void) void { + std.debug.print("OPEN\n", .{}); + return CLOSE; +} + +pub fn main() !void { + UI()({ + std.debug.print("INSIDE\n", .{}); + }); +} From 3cf1e2c74e60bfd227fddb235e11099141871f26 Mon Sep 17 00:00:00 2001 From: johan0A Date: Tue, 14 Jan 2025 00:07:44 +0100 Subject: [PATCH 2/4] second pass --- README.md | 80 ++- build.zig.zon | 4 +- examples/bug/build.zig | 86 --- examples/bug/build.zig.zon | 20 - examples/bug/src/main.zig | 154 ----- examples/bug/src/raylib_render_clay.zig | 234 -------- .../bug/src/resources/Quicksand-Semibold.ttf | Bin 18980 -> 0 bytes examples/clay-official-website/src/main.zig | 50 +- .../src/raylib_render_clay.zig | 34 +- .../raylib-sidebar-container/src/main.zig | 42 +- .../src/raylib_render_clay.zig | 36 +- src/root.zig | 535 ++++++++++-------- test.zig | 16 - 13 files changed, 407 insertions(+), 884 deletions(-) delete mode 100644 examples/bug/build.zig delete mode 100644 examples/bug/build.zig.zon delete mode 100644 examples/bug/src/main.zig delete mode 100644 examples/bug/src/raylib_render_clay.zig delete mode 100644 examples/bug/src/resources/Quicksand-Semibold.ttf delete mode 100644 test.zig diff --git a/README.md b/README.md index 71fdd0a..de5a5dd 100644 --- a/README.md +++ b/README.md @@ -14,9 +14,9 @@ This README is abbreviated and applies to using clay in Zig specifically: If you The **most notable difference** between the C API and the Zig bindings is that opening and closing the scope for declaring child elements must be done "manually" using 2 function calls. -other changes include: +other differences include: - minor naming changes - - ability to initialize a parameter by calling a function that is part of its type's namespace for example `.fixed()` or `.layout()` + - ability to initialize a parameter by calling a function that is part of its type's namespace for example `.fixed()` or `.Layout()` - ability to initialize a parameter by using a public constant that is part of its type's namespace for example `.grow` - clay.singleElem() is available to create a clay element without creating a scope @@ -40,7 +40,7 @@ CLAY( In Zig: ```Zig -if (clay.OPEN(&.{ // first function call to open the scope +clay.UI(&.{ // function call to open the scope .ID("SideBar"), .layout(.{ .direction = .TOP_TO_BOTTOM, @@ -50,10 +50,9 @@ if (clay.OPEN(&.{ // first function call to open the scope .child_gap = 16, }), .rectangle(.{ .color = light_grey }), -})) { - defer clay.CLOSE(); // defered second function call to close the scope +})({ // Child elements here -} +}); ``` ## install @@ -81,10 +80,12 @@ compile_step.root_module.addImport("zclay", zclay_dep.module("zclay")); 2. Ask clay for how much static memory it needs using [clay.minMemorySize()](https://github.com/nicbarker/clay/blob/main/README.md#clay_minmemorysize), create an Arena for it to use with [clay.createArenaWithCapacityAndMemory(minMemorySize, memory)](https://github.com/nicbarker/clay/blob/main/README.md#clay_createarenawithcapacityandmemory), and initialize it with [clay.Initialize(arena)](https://github.com/nicbarker/clay/blob/main/README.md#clay_initialize). ```zig -const min_memory_size: u32 = clay.minMemorySize(); +const min_memory_size: u32 = cl.minMemorySize(); const memory = try allocator.alloc(u8, min_memory_size); defer allocator.free(memory); -const arena: clay.Arena = clay.createArenaWithCapacityAndMemory(min_memory_size, @ptrCast(memory)); +const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(memory); +_ = cl.initialize(arena, .{ .h = 1000, .w = 1000 }, .{}); +cl.setMeasureTextFunction(renderer.measureText); ``` 3. Provide a `measureText(text, config)` function with [clay.setMeasureTextFunction(function)](https://github.com/nicbarker/clay/blob/main/README.md#clay_setmeasuretextfunction) so that clay can measure and wrap text. @@ -113,71 +114,66 @@ clay.setPointerState(.{ 5. Call [clay.BeginLayout(screenWidth, screenHeight)](https://github.com/nicbarker/clay/blob/main/README.md#clay_beginlayout) and declare your layout using the provided functions. ```Zig -const light_grey: clay.Color = .{ 224, 215, 210, 255 }; -const red: clay.Color = .{ 168, 66, 28, 255 }; -const orange: clay.Color = .{ 225, 138, 50, 255 }; -const white: clay.Color = .{ 250, 250, 255, 255 }; +const light_grey: cl.Color = .{ 224, 215, 210, 255 }; +const red: cl.Color = .{ 168, 66, 28, 255 }; +const orange: cl.Color = .{ 225, 138, 50, 255 }; +const white: cl.Color = .{ 250, 250, 255, 255 }; -// Layout config is just a struct that can be declared statically, or inline -const sidebar_item_layout: clay.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } }; +const sidebar_item_layout: cl.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } }; // Re-useable components are just normal functions fn sidebarItemComponent(index: usize) void { - clay.singleElem(&.{ + cl.UI(&.{ .IDI("SidebarBlob", @intCast(index)), .layout(sidebar_item_layout), .rectangle(.{ .color = orange }), - }); + })({}); } // An example function to begin the "root" of your layout tree -fn createLayout(profile_picture: *const rl.Texture2D) clay.ClayArray(clay.RenderCommand) { - clay.beginLayout(); - if (clay.OPEN(&.{ +fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderCommand) { + cl.beginLayout(); + cl.UI(&.{ .ID("OuterContainer"), .layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .child_gap = 16 }), .rectangle(.{ .color = white }), - })) { - defer clay.CLOSE(); - if (clay.OPEN(&.{ + })({ + cl.UI(&.{ .ID("SideBar"), .layout(.{ .direction = .TOP_TO_BOTTOM, .sizing = .{ .h = .grow, .w = .fixed(300) }, .padding = .all(16), - .child_gap = 16, .child_alignment = .{ .x = .CENTER, .y = .TOP }, + .child_gap = 16, }), .rectangle(.{ .color = light_grey }), - })) { - defer clay.CLOSE(); - if (clay.OPEN(&.{ + })({ + cl.UI(&.{ .ID("ProfilePictureOuter"), - .rectangle(.{ .color = red }), .layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .child_alignment = .{ .x = .LEFT, .y = .CENTER }, .child_gap = 16 }), - })) { - defer clay.CLOSE(); - clay.singleElem(&.{ + .rectangle(.{ .color = red }), + })({ + cl.UI(&.{ .ID("ProfilePicture"), .layout(.{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } }), .image(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @ptrCast(profile_picture) }), - }); - clay.text("Clay - UI Library", clay.Config.text(.{ .font_size = 24, .color = light_grey })); - } + })({}); + cl.text("Clay - UI Library", .text(.{ .font_size = 24, .color = light_grey })); + }); for (0..5) |i| sidebarItemComponent(i); - } + }); - if (clay.OPEN(&.{ + cl.UI(&.{ .ID("MainContent"), .layout(.{ .sizing = .grow }), .rectangle(.{ .color = light_grey }), - })) { - defer clay.CLOSE(); + })({ //... - } - } - return clay.endLayout(); + }); + }); + return cl.endLayout(); } ``` @@ -191,8 +187,8 @@ while (i < render_commands.length) : (i += 1) { const render_command = clay.renderCommandArrayGet(render_commands, @intCast(i)); const bounding_box = render_command.bounding_box; switch (render_command.command_type) { - .None => {}, - .Text => { + .none => {}, + .text => { ... ``` diff --git a/build.zig.zon b/build.zig.zon index 4783279..52d2e81 100644 --- a/build.zig.zon +++ b/build.zig.zon @@ -3,8 +3,8 @@ .version = "0.0.0", .dependencies = .{ .clay = .{ - .url = "https://github.com/nicbarker/clay/archive/refs/tags/v0.12.tar.gz", - .hash = "122055df7dec6a04ca71af24026f3e7a00b41f39c17c763ef6086adb2eddab3ac17d", + .url = "https://github.com/nicbarker/clay/archive/afba9f0de668c0b63fd94fbd62adb66485b9bc13.tar.gz", + .hash = "122032ed1ca5afaf896850aae7e1f007bf6cbc1d81bc981ed32ccbe0d932674f25f7", }, }, .paths = .{ diff --git a/examples/bug/build.zig b/examples/bug/build.zig deleted file mode 100644 index 464f450..0000000 --- a/examples/bug/build.zig +++ /dev/null @@ -1,86 +0,0 @@ -const std = @import("std"); -const B = std.Build; - -pub fn build(b: *B) void { - const target = b.standardTargetOptions(.{}); - const optimize = b.standardOptimizeOption(.{}); - - { - const exe = b.addExecutable(.{ - .name = "debug", - .root_source_file = b.path("src/main.zig"), - .target = target, - .optimize = optimize, - }); - addDependencies(exe, b, target, optimize); - - b.installArtifact(exe); - const run_cmd = b.addRunArtifact(exe); - run_cmd.step.dependOn(b.getInstallStep()); - - if (b.args) |args| { - run_cmd.addArgs(args); - } - - const run_step = b.step("run", "Run the app"); - run_step.dependOn(&run_cmd.step); - } - - { - const exe_unit_tests = b.addTest(.{ - .root_source_file = b.path("src/main.zig"), - .target = target, - .optimize = optimize, - }); - addDependencies(exe_unit_tests, b, target, optimize); - - const run_exe_unit_tests = b.addRunArtifact(exe_unit_tests); - const test_step = b.step("test", "Run unit tests"); - test_step.dependOn(&run_exe_unit_tests.step); - } - - { - const exe_check = b.addExecutable(.{ - .name = "check", - .root_source_file = b.path("src/main.zig"), - .target = target, - .optimize = optimize, - }); - addDependencies(exe_check, b, target, optimize); - - const tests_check = b.addTest(.{ - .name = "check", - .root_source_file = b.path("src/main.zig"), - .target = target, - .optimize = optimize, - }); - addDependencies(tests_check, b, target, optimize); - - const check = b.step("check", "Check if exe and tests compile"); - check.dependOn(&exe_check.step); - check.dependOn(&tests_check.step); - } -} - -fn addDependencies( - compile_step: *B.Step.Compile, - b: *B, - target: B.ResolvedTarget, - optimize: std.builtin.OptimizeMode, -) void { - const zclay_dep = b.dependency("zclay", .{ - .target = target, - .optimize = optimize, - }); - const zclay = zclay_dep.module("zclay"); - compile_step.root_module.addImport("zclay", zclay); - - const raylib_dep = b.dependency("raylib-zig", .{ - .target = target, - .optimize = optimize, - }); - const raylib = raylib_dep.module("raylib"); - compile_step.root_module.addImport("raylib", raylib); - const raylib_artifact = raylib_dep.artifact("raylib"); - compile_step.linkLibrary(raylib_artifact); -} diff --git a/examples/bug/build.zig.zon b/examples/bug/build.zig.zon deleted file mode 100644 index 68acf3f..0000000 --- a/examples/bug/build.zig.zon +++ /dev/null @@ -1,20 +0,0 @@ -.{ - .name = "zig-exe-template", - .version = "0.0.0", - .dependencies = .{ - .zclay = .{ - .path = "../../", - }, - .@"raylib-zig" = .{ - .url = "https://github.com/Not-Nik/raylib-zig/archive/35332edacf2e03236220f12a8dd3410b1c39d9eb.tar.gz", - .hash = "1220c34fe472645e173a7168eb513ca8343af3c3f61b618daedda30ec3932b002637", - }, - }, - .paths = .{ - "build.zig", - "build.zig.zon", - "src", - "LICENSE", - "README.md", - }, -} diff --git a/examples/bug/src/main.zig b/examples/bug/src/main.zig deleted file mode 100644 index 177a72d..0000000 --- a/examples/bug/src/main.zig +++ /dev/null @@ -1,154 +0,0 @@ -const std = @import("std"); -const rl = @import("raylib"); -const cl = @import("zclay"); -const renderer = @import("raylib_render_clay.zig"); - -const FONT_ID_BODY_30 = 6; - -const COLOR_LIGHT = cl.Color{ 244, 235, 230, 255 }; -const COLOR_LIGHT_HOVER = cl.Color{ 224, 215, 210, 255 }; -const COLOR_BUTTON_HOVER = cl.Color{ 238, 227, 225, 255 }; -const COLOR_BROWN = cl.Color{ 61, 26, 5, 255 }; -const COLOR_RED = cl.Color{ 168, 66, 28, 255 }; -const COLOR_RED_HOVER = cl.Color{ 148, 46, 8, 255 }; -const COLOR_ORANGE = cl.Color{ 225, 138, 50, 255 }; -const COLOR_BLUE = cl.Color{ 111, 173, 162, 255 }; -const COLOR_TEAL = cl.Color{ 111, 173, 162, 255 }; -const COLOR_BLUE_DARK = cl.Color{ 2, 32, 82, 255 }; -const COLOR_ZIG_LOGO = cl.Color{ 247, 164, 29, 255 }; - -// Colors for top stripe -const COLORS_TOP_BORDER = [_]cl.Color{ - .{ 240, 213, 137, 255 }, - .{ 236, 189, 80, 255 }, - .{ 225, 138, 50, 255 }, - .{ 223, 110, 44, 255 }, - .{ 168, 66, 28, 255 }, -}; - -const border_data = cl.BorderData{ .width = 2, .color = COLOR_RED }; - -var window_height: isize = 0; -var window_width: isize = 0; - -fn LandingPageBlob_(index: u32, font_size: u16, font_id: u16, color: cl.Color, max_width: f32, text: []const u8) void { - // std.debug.print("\nBLOB START\n", .{}); - if (cl.OPEN(&.{ - .IDI("HeroBlob", index), - .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }), - .border(.outside(color, 2, 0)), - })) { - defer cl.CLOSE(); - cl.text(text, cl.Config.text(.{ .font_size = font_size, .font_id = font_id, .color = color })); - } - // std.debug.print("BLOB END\n\n", .{}); -} - -fn LandingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, max_width: f32, text: []const u8) void { - // std.debug.print("\nBLOB START\n", .{}); - cl.UI(&.{ - .IDI("HeroBlob", index), - .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }), - .border(.outside(color, 2, 0)), - })({ - cl.text(text, cl.Config.text(.{ .font_size = font_size, .font_id = font_id, .color = color })); - }); - // std.debug.print("BLOB END\n\n", .{}); -} - -fn createLayout() cl.ClayArray(cl.RenderCommand) { - cl.beginLayout(); - // cl.UI(&.{ - // .ID("ScrollContainerBackgroundRectangle"), - // .scroll(.{ .vertical = true }), - // .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM, .child_gap = 10 }), - // .rectangle(.{ .color = COLOR_LIGHT }), - // })({ - // LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings"); - // @call(.always_inline, LandingPageBlob, .{ 2, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings" }); - // }); - - if (cl.OPEN(&.{ - .ID("ScrollContainerBackgroundRectangle"), - .scroll(.{ .vertical = true }), - .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM, .child_gap = 10 }), - .rectangle(.{ .color = COLOR_LIGHT }), - })) { - defer cl.CLOSE(); - // LandingPageBlob_(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings"); - // std.debug.print("\n==\n\n", .{}); - @call(.always_inline, LandingPageBlob_, .{ 2, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings" }); - } - - return cl.endLayout(); -} - -fn loadFont(file_data: ?[]const u8, font_id: u16, font_size: i32) void { - renderer.raylib_fonts[font_id] = rl.loadFontFromMemory(".ttf", file_data, font_size * 2, null); - rl.setTextureFilter(renderer.raylib_fonts[font_id].?.texture, .bilinear); -} - -fn loadImage(comptime path: [:0]const u8) rl.Texture2D { - const texture = rl.loadTextureFromImage(rl.loadImageFromMemory(@ptrCast(std.fs.path.extension(path)), @embedFile(path))); - rl.setTextureFilter(texture, .bilinear); - return texture; -} - -pub fn main() anyerror!void { - const allocator = std.heap.page_allocator; - - // init clay - const min_memory_size: u32 = cl.minMemorySize(); - const memory = try allocator.alloc(u8, min_memory_size); - defer allocator.free(memory); - const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(min_memory_size, @ptrCast(memory)); - cl.initialize(arena, .{ .h = 1000, .w = 1000 }); - cl.setMeasureTextFunction(renderer.measureText); - - // init raylib - rl.setConfigFlags(.{ - .msaa_4x_hint = true, - .window_resizable = true, - }); - rl.initWindow(1000, 1000, "Raylib zig Example"); - rl.setWindowMinSize(300, 100); - rl.setTargetFPS(60); - - // load assets - loadFont(@embedFile("resources/Quicksand-Semibold.ttf"), FONT_ID_BODY_30, 30); - - var debug_mode_enabled = false; - while (!rl.windowShouldClose()) { - if (rl.isKeyPressed(.d)) { - debug_mode_enabled = !debug_mode_enabled; - cl.setDebugModeEnabled(debug_mode_enabled); - } - - window_width = rl.getScreenWidth(); - window_height = rl.getScreenHeight(); - - const mouse_pos = rl.getMousePosition(); - cl.setPointerState(.{ - .x = mouse_pos.x, - .y = mouse_pos.y, - }, rl.isMouseButtonDown(.left)); - - const scroll_delta = rl.getMouseWheelMoveV().multiply(.{ .x = 6, .y = 6 }); - cl.updateScrollContainers( - false, - .{ .x = scroll_delta.x, .y = scroll_delta.y }, - rl.getFrameTime(), - ); - - cl.setLayoutDimensions(.{ - .w = @floatFromInt(window_width), - .h = @floatFromInt(window_height), - }); - var render_commands = createLayout(); - - rl.beginDrawing(); - renderer.clayRaylibRender(&render_commands, allocator); - rl.endDrawing(); - // @panic(""); - } -} diff --git a/examples/bug/src/raylib_render_clay.zig b/examples/bug/src/raylib_render_clay.zig deleted file mode 100644 index cb91142..0000000 --- a/examples/bug/src/raylib_render_clay.zig +++ /dev/null @@ -1,234 +0,0 @@ -const std = @import("std"); -const rl = @import("raylib"); -const cl = @import("zclay"); -const math = std.math; - -pub fn clayColorToRaylibColor(color: cl.Color) rl.Color { - return rl.Color{ - .r = @intFromFloat(color[0]), - .g = @intFromFloat(color[1]), - .b = @intFromFloat(color[2]), - .a = @intFromFloat(color[3]), - }; -} - -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)); - const bounding_box = render_command.bounding_box; - switch (render_command.command_type) { - .None => {}, - .Text => { - const text = render_command.text.chars[0..@intCast(render_command.text.length)]; - const cloned = allocator.dupeZ(c_char, text) catch unreachable; - defer allocator.free(cloned); - const fontToUse: rl.Font = raylib_fonts[render_command.config.text_element_config.font_id].?; - rl.setTextLineSpacing(render_command.config.text_element_config.line_height); - rl.drawTextEx( - fontToUse, - @ptrCast(@alignCast(cloned.ptr)), - rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y }, - @floatFromInt(render_command.config.text_element_config.font_size), - @floatFromInt(render_command.config.text_element_config.letter_spacing), - clayColorToRaylibColor(render_command.config.text_element_config.color), - ); - }, - .Image => { - const image_texture: *const rl.Texture2D = @ptrCast( - @alignCast(render_command.config.image_element_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, - ); - }, - .ScissorStart => { - rl.beginScissorMode( - @intFromFloat(math.round(bounding_box.x)), - @intFromFloat(math.round(bounding_box.y)), - @intFromFloat(math.round(bounding_box.width)), - @intFromFloat(math.round(bounding_box.height)), - ); - }, - .ScissorEnd => rl.endScissorMode(), - .Rectangle => { - const config = render_command.config.rectangle_element_config; - if (config.corner_radius.top_left > 0) { - const radius: f32 = (config.corner_radius.top_left * 2) / @min(bounding_box.width, bounding_box.height); - rl.drawRectangleRounded( - rl.Rectangle{ - .x = bounding_box.x, - .y = bounding_box.y, - .width = bounding_box.width, - .height = bounding_box.height, - }, - radius, - 8, - clayColorToRaylibColor(config.color), - ); - } else { - rl.drawRectangle( - @intFromFloat(bounding_box.x), - @intFromFloat(bounding_box.y), - @intFromFloat(bounding_box.width), - @intFromFloat(bounding_box.height), - clayColorToRaylibColor(config.color), - ); - } - }, - .Border => { - const config = render_command.config.border_element_config; - if (config.left.width > 0) { - rl.drawRectangle( - @intFromFloat(math.round(bounding_box.x)), - @intFromFloat(math.round(bounding_box.y + config.corner_radius.top_left)), - @intCast(config.left.width), - @intFromFloat(math.round(bounding_box.height - config.corner_radius.top_left - config.corner_radius.bottom_left)), - clayColorToRaylibColor(config.left.color), - ); - } - if (config.right.width > 0) { - rl.drawRectangle( - @intFromFloat(math.round(bounding_box.x + bounding_box.width - @as(f32, @floatFromInt(config.right.width)))), - @intFromFloat(math.round(bounding_box.y + config.corner_radius.top_right)), - @intCast(config.right.width), - @intFromFloat(math.round(bounding_box.height - config.corner_radius.top_right - config.corner_radius.bottom_right)), - clayColorToRaylibColor(config.right.color), - ); - } - if (config.top.width > 0) { - rl.drawRectangle( - @intFromFloat(math.round(bounding_box.x + config.corner_radius.top_left)), - @intFromFloat(math.round(bounding_box.y)), - @intFromFloat(math.round(bounding_box.width - config.corner_radius.top_left - config.corner_radius.top_right)), - @intCast(config.top.width), - clayColorToRaylibColor(config.top.color), - ); - } - if (config.bottom.width > 0) { - rl.drawRectangle( - @intFromFloat(math.round(bounding_box.x + config.corner_radius.bottom_left)), - @intFromFloat(math.round(bounding_box.y + bounding_box.height - @as(f32, @floatFromInt(config.bottom.width)))), - @intFromFloat(math.round(bounding_box.width - config.corner_radius.bottom_left - config.corner_radius.bottom_right)), - @intCast(config.bottom.width), - clayColorToRaylibColor(config.bottom.color), - ); - } - - if (config.corner_radius.top_left > 0) { - rl.drawRing( - rl.Vector2{ - .x = math.round(bounding_box.x + config.corner_radius.top_left), - .y = math.round(bounding_box.y + config.corner_radius.top_left), - }, - math.round(config.corner_radius.top_left - @as(f32, @floatFromInt(config.top.width))), - config.corner_radius.top_left, - 180, - 270, - 10, - clayColorToRaylibColor(config.top.color), - ); - } - if (config.corner_radius.top_right > 0) { - rl.drawRing( - rl.Vector2{ - .x = math.round(bounding_box.x + bounding_box.width - config.corner_radius.top_right), - .y = math.round(bounding_box.y + config.corner_radius.top_right), - }, - math.round(config.corner_radius.top_right - @as(f32, @floatFromInt(config.top.width))), - config.corner_radius.top_right, - 270, - 360, - 10, - clayColorToRaylibColor(config.top.color), - ); - } - if (config.corner_radius.bottom_left > 0) { - rl.drawRing( - rl.Vector2{ - .x = math.round(bounding_box.x + config.corner_radius.bottom_left), - .y = math.round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_left), - }, - math.round(config.corner_radius.bottom_left - @as(f32, @floatFromInt(config.top.width))), - config.corner_radius.bottom_left, - 90, - 180, - 10, - clayColorToRaylibColor(config.bottom.color), - ); - } - if (config.corner_radius.bottom_right > 0) { - rl.drawRing( - rl.Vector2{ - .x = math.round(bounding_box.x + bounding_box.width - config.corner_radius.bottom_right), - .y = math.round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_right), - }, - math.round(config.corner_radius.bottom_right - @as(f32, @floatFromInt(config.top.width))), - config.corner_radius.bottom_right, - 0.1, - 90, - 10, - clayColorToRaylibColor(config.bottom.color), - ); - } - }, - .Custom => { - // Implement custom element rendering here - }, - } - } -} - -pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dimensions { - const font = raylib_fonts[config.font_id].?; - const text: []const u8 = clay_text; - const font_size: f32 = @floatFromInt(config.font_size); - const letter_spacing: f32 = @floatFromInt(config.letter_spacing); - const line_height = config.line_height; - - var temp_byte_counter: usize = 0; - var byte_counter: usize = 0; - var text_width: f32 = 0.0; - var temp_text_width: f32 = 0.0; - var text_height: f32 = font_size; - const scale_factor: f32 = font_size / @as(f32, @floatFromInt(font.baseSize)); - - var utf8 = std.unicode.Utf8View.initUnchecked(text).iterator(); - - while (utf8.nextCodepoint()) |codepoint| { - byte_counter += std.unicode.utf8CodepointSequenceLength(codepoint) catch 1; - const index: usize = @intCast( - rl.getGlyphIndex(font, @as(i32, @intCast(codepoint))), - ); - - if (codepoint != '\n') { - if (font.glyphs[index].advanceX != 0) { - text_width += @floatFromInt(font.glyphs[index].advanceX); - } else { - text_width += font.recs[index].width + @as(f32, @floatFromInt(font.glyphs[index].offsetX)); - } - } else { - if (temp_text_width < text_width) temp_text_width = text_width; - byte_counter = 0; - text_width = 0; - text_height += font_size + @as(f32, @floatFromInt(line_height)); - } - - if (temp_byte_counter < byte_counter) temp_byte_counter = byte_counter; - } - - if (temp_text_width < text_width) temp_text_width = text_width; - - std.debug.print("\"{s}\" => .w = {d}\n", .{ clay_text, temp_text_width * scale_factor + (@as(f32, @floatFromInt(temp_byte_counter)) - 1) * letter_spacing }); - - return cl.Dimensions{ - .h = text_height, - .w = temp_text_width * scale_factor + (@as(f32, @floatFromInt(temp_byte_counter)) - 1) * letter_spacing, - }; -} diff --git a/examples/bug/src/resources/Quicksand-Semibold.ttf b/examples/bug/src/resources/Quicksand-Semibold.ttf deleted file mode 100644 index 27106d00af73ab0dce2ed14694f8a218788aafeb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 18980 zcmb_^34CN#neRFGR^3~B-CK97y((3es_d0ilB%S$bdt`}Yr4}3bVDz6x@kHMz0nI> zw++Lh=%}OPIwQ(^z)ul%o{lq$Oar2b_*7&D6dV;5K@gcilvPO8`=5KOlJug_H}h_& zyPSK@cfRxO-*;|9C?Q0`$wtV;=-4=&q=yOVy&0`t6C2h~U+{_5AHnk}LcIStF@4^M z@A&i2pywe%xSQ8c=L9d5adIQf*yY|l>ay{q#9wEgI zc>c<{VCZ$d(|QG5w@VhRX8ON%XMk)xGcNdfckVDAqd-hF6Jc<)Vk@4&N2I3iWv<}T+RAYl?GWSAF(bSj(c zDk;UHQP2%V*Hp8G=Sy`4UGqyJ=+|}1m&J(W4-0SEVgY|h_|>hgG$M1$=AV%QAw_g@ zm&gGckmhf9x%7zQ=R)OUJ9ZGBOaZ4|+$qdePdYGLfk79}<;~jyyUo%Yw_emdJ;>Fq8*OPAS)Z*CEgsi?|1FREp-ice`L^hIq-!YK z!=1YD{MJ=Xv_8x_G1x50=AnPPK-s9-St=-L~1_4Mqzac#%edaoyIQ>a58VhRiM0t`v zOv{krm_C0OLxYL#();p{c3AW!_n7mLD;MCiCEjDf3#y6E#nFuW9hKMU&oClJ$R=pG zNfRizNv5JHWfpeAt9?7;&ZOisTxubaS(Zv_Ms#4WtJv=MYEi#C9I5L~(JwRL<#hv> z3=p>JN`*Vj-A|lEA$5!|Ilg3C4jwR7k>+TTR;7SVA_!cs;d^sk*^`mfu)jPd&;x<; zHjp7`L}`>Nba=A-&yo_1a$ir%0e^YV6?CUEKfII}RT+cOV@|T0%_A(>4>n1TK5mNY z7j=MD6WUHlD>zjp=fiSMBc9>zB{`E*h5|ep4Qo6yU=4FZ7K^F1bQN#%gvD|*<)x6C zh#J9I@~5KiaU0^}!HBL!65PEWcljM0{VM}J`z#|8eM>BV$?2uk>!hn2=6_>yWs?TQ zur%_ou>w=)YxCyllIehsK}E<8w_OdzbeAENcN<|<3&k~eNT46|hq+S`b^g%uJUg670I5tem{$`rXD6t`Mb(nEV@(=K znHJtO@i1JBKUEp9%o%1i&Dmw$7Z!^bc0b@?1dMCXg_|Rh=I}RNFdw};2L^WaNx!a1 za`_9Xp1QhXoxl9Dm&sjoWtf++t_-ZfO2{3P0&8(>L8juDN`~oQOjBOu|8HymWgwOt zSP>mq+tra$f*^D>_RTF{ZLaU_?x{~S`Q(u8&l0B|Mlc(fgYlrpn^cnSmC{H=kLjw* zqtP2`^r~IYpj)NP-2}R|k!7dZOp|_MF3uVF&va1P9P>n`HvmzU&Otnxw0vJM15+9< zURX*NQ|?4tgz|QmH{kR-BT<)Br%KVR@whMOe#vN#^yXf0TiVdQt-oPak56$omePsF zu;^-#Jfhw1svjwaGKO1yNsrOpG~J(V9}buQ9a5Wv$4r3gQ2jAxNi0)Rvm}tFTpJII z%T&oQ)iMQyYZ7L}c_1y&hLwjp-R`I+`LfeJ4J#TN*A)xvd*VX}#+DyQ1!IcOB^3vv ztwX8Ycx!1>e{%GotD((dc$Bz1oe8(ZGWmqtnd}&C9oXEStJ8vkghP%5Ld~&MOT_Jo z=f}JHFGSeGG2P=y4Sb1uJ2|~%pN3x>-F4yBxGt1EGG-cKu^9#V<+5tT{cpYZ%jNY!nSRrql7mvY-<|X*Vb9~G2PE!3 zOy(~?x4sgj+Wc)^IT+TsZ9Ykl%@0ImS*D4p@>>Qd5&*4xFgJ^O*}Q_dXy%PYg6BYR zK}p!{&q{Gci-|vT2EO5i|%x3kkwV928($?d9F!GyUTl>^nmHL`t*c{e#}uu5E9d1;&n-ye@O`IYBZsM zsItK1vTE6LTo|?%!p>%>da7>2v~;H2fUSrpMa;sRapa=8r?2W!L~oGy!f0;nz|heC z70s)Pu|({v`IQX~EAwp=jg1o=3|M&sTi{AQ(9#&0II(`}_;|FXL+7_>@p6CrbZ6Jb z_V$fkozv~WXdKpIgnMQIBSu>2NgJ12>H-+1xk27o4Ara%fBpFWp`m@F+0m{#TO_7g z=t+FCW4X~j(a)9OuI0$2V*^F%inODBew4EUI(wH1+8@r_z`;wzf}obxpUo z&vbT8wKM5Qj8FdqRBAG5WC<43YLO6@cVNEXMAjl3%@=3#s_IiDkGom!Uf0~brV!8i z{FBQ;Dd0V|e9>$@RxqF7RlPB7cTQaP)rx zkD68$%glX&UP+ZEW@HE@w#A1K|d!2h%|MLGD*1 zNU}@$V|t9mzzf+Zm}7=`P#4;#G(>`uDA z6iyl2{8U(FJyc6;dblpEzJm<28LQgC)`%yV0X9S<4sEsDxD>+8Jage_bDK;zXh?I) z6X#u4fRpwlCEexVCGYB?3q`FtV^}=gYVj;T4T%P`C>h780{sH%pzjL`FV~{DMT(j0 z5eIp?er#=m(MZWRx@X$nO>GkElXQZ+(}cRUUKPeS%Xw6 zEGi*)arX;ZmOm1KoInAAk|EsR!3B`-kSiAhJP`5@W>?r$W*S02&!C+fN~KbHvC>cO z)o7>`Rz>>Te=~qC4@VyMu0i)Zduu=g+l=&;%4;Mi<3ZK+Q4 zKfLyvQW~OU(uL_7CnY6SEbj%PEW4h;FUyg_v)sxwQA9 z1?DSak}-ePpj`@gr~7sdRAs=CUY5pxEZ06$BIup0tE2BFRrAT5wa2Bm=8UQ>MQ7qSqp&5$no;bm zOlENWsx@n_nwVhc@rzs5w6(2mX<6IWwx)%O8;*~|iA)`zm^eOFn#$*=O5GdV+BTXV ztOp*cWFD++C54As{5b{>meIH7H^80d^V6N3Q_y;r!S!(G z^7Hb4)z6>9he$|S-*3`fI@5`q2S-10rVnA3=x@La7INeHj zmgE?$h9M$LU-ahH90Mjh=j2ph!WSLuP@Ce(u6S~|tFHUJLTspCckuyF%B}QgmBwgY zF_{?XNc3)M@4bAZuioqAeTfWp$D*OQ;&AHep2qxW)}IV}Gd>sR3c}n(LUGmM(9@-+ zjq?RUckKvR)$p*suTbU%w(CS#&o4M${>S-5nKLSH4;(T=^c91qq*I($D?+| z<+kQ%jB`X(B^*)I@bz#K?ExLrDZ#i9>~5!zo0YKf%Ih3~eT30j68Tkaqpa!(YS<+7 z5iNG~(!EERIT+~cAB=K70DN=q*s(b(GIp2W93C1PX7|i`C6R}UoPruHt6rH|faQ9T zGB7e*q47q4MEIm~t1qEOZ2W!RxIgB&m$OAUMUu)Nand7oG^7e%p*$1kI0W6Fw|SlZ zcoq6j039S_IJ2mmRb0(H#DWfbfk>#uDApBO2=_T9#&Lfq#HE<;a%0XH^CyJAw?zyo zWWUas^VS7a;nK)oxi}?e*j={rj4X3poVIY~A5~{}y0iok`xr;%1d;;;=a(g!XV5BT z`mdY}YZ5Z6qUX#yP(Tn&FCmB`+{DU|M9*_4m7rYyoI9b(NzbjFH%YW#i`d0acHJa% zvR2;cl~tsY|KOFi*!+Kl71{T#jdy9B5(zkD@ms6E#PW~vN)P;afOIWzj|CppxWkl{ zA`3hahn<#Uf~gi)zpqDETt1OmX#`bKOa|$LF(NKwMmOOXX z6?74-LtXE~On}SxYGF$4F6#a{d!$`TgtI%#Z`!toRV9+}dlV1d>0zQA)10!qe4Bts z08t;`%KZvHAFRMmM3R1jusDOY|8k){XSGA8GJMJGcY%`1IxDsgc?4;bot2 zZ;P;~Sy!c(+b&F%Mzyrzb3_8ZurJaa?Akt5ykYrg&AkPdVLiirmDPlYLq5E@=fIHAxS3lH{?XOe9L7#$L;cI&NbyKqX!y&ih zo{%H!>D|&fa%^pOO+@xYuCqHNEj`rI+8Yzah~f#jA5xj|jH_at~; z>N4C)3N&-WV8=jz$eLLZGWavH@&z`~lUg+Jq@C_FiM2kE^wL2TeDx?IcRDYWU-Ytx zVyfb&?{~QtxiVaNlfDIdfIDWjoh_}ia5i1CCd(~?U^hn0RbxMp zyVf>lha2h&4RSava%mn~R&S#8iaY6dHkYC!d;3SO5`#f!)a#2#-avM&t$84&X-1vz zE!kjPbUqPxDc-)hk<|wW;IFzN=N$Jf?8J4m9MIg{;!CFZfj2&06d5YkM$}niAMe@J zmk2bC?U`^n)kILutQ>51h5Y%U#>TY+>481N_1HJ)&F1=3sXkZB+KURg-TN<|(s(Tr zhzOqck*OA&(HzSR&EyC74sJ^i=5mAC?DAY@d4@@J82!b$Xny?@0{oSw6I9AiFFshVt>A9esVDg8)ZR=?rZS(8yTz{@~L3j5BrKY~@yA$ovXnP{x z-(M~cx7T&W<6U*_NJ(qlc^Fl(PUasN#$ZWJlLom`sp=Wdm6C?e;7-T(QBTOHkA>xifW+%YK#lVvI~#Ka;R>IQeWjx}V*+wx=exv|!|Oge?1t1#2mHB+$8 zYX{r&gM<0@L2$et_WB9By~gow*h6cn&<+-Sz#e{4(uHQhCk7Pl0?DNqI@RUh24XgQ z#H)F`L>g4eugE%Jp$6>LRaUgP6TVta@QUcRJRE8g#`Mb_hO4 zK+W{Vo4SH}Mp+?T;a63^F1!7XHQ~;XqRA-ts6I6ptSdx=Ese^MQ}y{((;9<5Ep&E4 z@2k;_X%8*hAj&}_wk0g9Xzokur`f_!N8A01D%qW)5R`-2WY8ayJ*r)}L^;gx_^519 z&n~Y`vS$mShJKgF<<|TfXSaF6QO$5ss(3}ownYomj+NArnXDGKUjpbMMn zp6V_j0t~U#iS?U1%@(Pu{^wOmPoCr-NT;6(L~Oz*ow}$5bq4Rg21ice@Avf>X29>Ez`!Nw+8Jd7sm#`Xp7qRyKm6LPOg! z2q=@+S7{^NOQI}KwdB>buwZ#E3m0S=dRW_~vU^8Ue=^!WoUN}@GY!l6E_r#bYoNYA zgB?FT7>~JI#&c~`eRY~D8v^Yv4tDk~Z_f6mh7&=pE~y(yP@|szs%BjhTT=AR1A0w$V|S(u`D{ zJKhlwrGpNSqahy8ME4+&9p&1}$6A(m~Io-P}EB!PhhzJ!RuZPE;1Gh~_kvIO{ybzK$X z3@#oHC3u}nv6Z>PIDVLQ0& zRnrquD0DKeVnXALNk13UnnxS3AzRm@d+Qa|CZ~3mhA$nA_pEB>D97q*`2}3)3N23K z{jIs)x-eoQpRXy9ZRx*cMcdk*lpR?sYNXFE!I6>}y^#(=I>BF19`-s5QiVmk|lIJHq4p9uc#yJ~a z$X>6+;XOa*#(S4%9nY`xviI&W9`8As-Wc#r^E_8@*gZboo~AaMu?IaKn^@pDe%cpc zuQ{#*uf4iGgV$-n@ObQw0>`u0_{J{@H*hm}$-c;GB*+a>t72cbSqwd6BN%eK5iJ&9m&B3Ub?Ioab+sGW#sG z+r_W)`E=Foe*3FlAJcWCat#;YQ*3vW?afouIRJ#Uol2kes$%&fj*t0$sz7hEC*SG! z^6TtwyJGmgZ-3e4R#9xHq?_{ee0mA1>ND-D8W~9A9wslR%zbhma)$4{R2EfqS9WmM zR=&jgTi&ilv+V)H2+%j!`F|KPyC7JgBwLw)wY`r;A^29v3cstV2fnmpyG~{up0;^i z>n|&n_D#CHsva1eX=<1m3Ix9fm<_m7Sxgf^j^IML-YhvQ&V~t+j&u~!yd(47u z;==X|*f$C0G78wyfmT7?1{lEUriN(%40zm_rsuLr*Vp1c&1(U?qR|6@LI&HOG#ba`-|J+JHIOLJVBG;rB#yMJSoji+I7dW&^(DXinHA z!;pkTv(Bl_6P+PL^5*jrSL)~}aZ)}Xr`mU@zqq!2N46M4tSjqWw3ywITi%v(+e5Nj zu}SHU%xvFkzs+-W$g@HxTSa)tmy00zkrIC@C}wYIp$T5DOP|M0<=*J+OU;2R0G@2PEoGKU-(iL5Pr-? z-zmC3&#v4lBk=Z zYx7WBt1ry$B&;TK6$l?lDG_o)XUZ|n6o&O{%JJST; z`|d`rg`}aD^_f8|g7=yo(>t+;!sL9(r>jNNEQ6VgUwc_GSUvi}u2=i&+%3ss)b8}j zeG{47Xk-2Grq1>;dr;$aBc|Az>=7l|(;OTgZHyaxm^Q1Xr&4(9G`l zU(huDp>G^Ie9QXGii^sR#=06KykE*E)1{o+T#BLIt`~W1B`Sfs8^Teh$pFb5`c5q9#%g*;+ysM{Sbfmt0 zs?br7Jk1|;+2hf!Y+|S{RKI>@zvfbXZa6GTR#Xm=&+t*xqFPZvwXXk}n9e?9)S}y% z73RlT{T6X&4t77mXR$kruOU(8JVO43xIn9BGR>v9^``f$+48DCW3kM_W`S^_>9zij zogXn0NqpHDr?H5phQgW>`QPy%{h$$#8|8yR7VQ_vDK1E#I2Tm=X+HB}<}c{=Z1<;p za`B#C6GhbwPA__26jfn(KxVm1WE1@Zw+6YI8Qa2O)f@E-4$N-yPP7ZcZW(nkx=kqG z;&w*;PR&gxJs!8G{6)92sZMrF;zMg56#{NG?h+pmb)Q!k?-QJWA0?CYhujE*4{gd> zpiA`-mZE8}?Kx`>dY4o4l)ns+9=ZnK^T=_xt9-ki?(n*zlP>WaqT%rx!hQG{IvH@u z!ozESAhOvoLxKE`K1x5zcEon0qQ*o_XW|AA3WsJ?CP*ROqxBAU`Q3iI<_|SxA8q=_##!8&_#=_BPJRIR>v=F}P)q+x31(kKKNWRNG$|5POodv$u z5QMeh-ko-@9bc8jC9m$-;8D1uo$q%Th*CUw^mt{q15t%w6Oga50}hW|OAbOi{{~+p zvZuvEs6H3Tb>y4mRoaXy&1dLOP`6BR+qje5ecbQ)27WvLpe$QZz9hUQ4vW`_PdZdb!clUJIMz8XcYN0IfHUgcAJ)9Gq=NC za-Vdc@;E*Ho|T@ho_(GZo|`@Qcz)qcd#~|+&il4+mG5%jcm0Nc#6Rc%jQ@2hBOR1J zCp|8w<%{Gw`EvOh`3CvD@<-%P$)AzGD1S|U0)HTk5=+9lfiwXbO3*Duh&tN%)W$p{-`#xdj5#*c%p;L+fFgI@^#vq=G-zI*1u z%b&Q&-~TG%`R5sde%yM|BkcOquWx^MWw`vG_7>aw@hHF!nFqI$G;r4wiF-ep;!coe z?t8fQ;n#`Z-FW^1nWApo=Sc_mQCu6y6ko*kXZXE|_ZQ&$M_fOP>nf7tE+Yxj3F4DtkfY(FZkk?@@L%O*T+UiIv*Nr&-AYdm@6WNL?$a$!HybqO* zy{K(WpnWy!7kdC_lBECAet@k}qzL3`R5;%tN%9IArULGNN0xIGa4sM*?oO_Nv$UAQ{uM%2p z*mvlKOk7BIkiFzmat%2N>%hjgLt2K(7BY+0%gAxF751s}b^PwBoT}W5UKG#>dJZR$Vtp| zgzO_%6LL4L-1J4;`xrgv61Ngq22(;KVp z0@^=i-Gd+=`i<(n4gd1)5wZff9|8`Cf%hI@briHHV2vH1Q(B9g9+^@pdSIf^7z{W7_7%JP@)Z^4uTqaP>;bo z3^-R}=kySs_kb#U(K?G3_BMZx`N#2QKYB6xwN)WE;+yIu##pl?$wt6Dg5P0Kf47PA zIOaTHVmoP$XKPEH1Nynzl8F9yn{$o;%09qj@b_Rf`vB`Oc8A(Pw{}#7`%r^ikKY*X z&Zb=JS#ZubaXbRN8FtAfkp7aas9!_qUww|y1F78H%1>I)9` z9QFghdVB>+!N(HLJ;-4>?AZQLd@5jx)aq=Sm-bp?{{+@i1e1$wnp2G9*F@X#J04aq%oQ?3n zm(rv3B?ph4p++P$zbzj7|+Mh4xPt*>}eF^ zY-F(V0&wN=^fbOkc@h1$RepvZgO!)D3OlR7KZ)$*Y4p7pxc$tW ztLY20NI^9)wLfxex9%acyv+6_E*SMI<_9c%6cM%af2?suTS z4hnQ)P3-P1^ekhHUU>y=uairG9W`-h=O5uC#ODEnxT3D7P*=r{{?eoJP6X&w|1pi>-` >$`2U?t54;T${pbFSqEl# z26U_*crxj+h}YuXLZ2lRTe>p#{`ApHa9uK{2FL7Q!;aDXxkU(8pDHx0*?d!_;^`Pw zeo=V>RQX|TuF9{$*Lwg9yjwgf{|@-S#qXyKNBmV`GP__=sPb#8H(L?jz6whG^32s$ zd%OmDU2>qOiFx(y)8`&lo2S}q0Rpg{uK|NRzESxjB-=b{oLhKn_5*G&t*=*J zuiT8j*aKRegVBg_)x0v=zHCB6QMh(g%xKzrf~35BI#p}E&b#gcR`|`KD`fn0>tM{m~0+M zGk#B^c|jT~|6Cp805&g!bB-EBwENM|q$BQaY&3&`AN0P~%N(`9y(+9fb2*!0XSXaJ zUbzL_yt#rLr}7hqHP-!L<$m;t<7sgfkC|_7seFuKhW;;CZpPgoAWg4To~prv6#t>} z9bmpNj=eEg^9NiPtdhCL*8$_TMGJw|&of(fjgf>vpPrB@ob$jJzW=p@>2B4Nu*{`) z^drV8n18hv>&k-zETe!=0Ht1p=9qM4XGFd^fWse?lf}?X_zS!r51> zum%Gb4o8F4r&4C^f6|Bk+M-u&EUrw}YKIwbSnrndxVqk#YNM(%v9Z-zSqnH^U75Mw znteV8AI$YH&dSDCdoR5^{ob1MtTT(@X;m-S|F^`2+(CftP9sju;xBII3<)z^$RqCF zj;x5~3)`VbZa{M)^7OFk9}XYJS=#JG1n)$RPl1;b@LjHsZ_ph0muM`H2%-APqskh? zTvl9}Kx-25e$6hYFnb0W3yW}bm>*veGw{^|+4O(&VE^jaS^>k~I;<;O(c&{}V{5Zl zS0-Xr)XaJC4+PA$)nrsdPY3?k3J_hJbPQspJihmjV66h%ll}j87_52(`=Xa_uP28`rPH8UM4LB>BM1 z#x+S+T|rD{2W$?w+W?yOd z;NX6;@sh){yU6B!d-u$eo%nzB>?3pL`G9#oYM!q#&(|F|w*N5lPKzp5

X0hln!| z&afHSGm}&+-?gNk;w@`onoF^Ab{4?zIC9O}-!)`2a?NYV-;zi1_dHg`dNI9W+zyy> z&7nTPvg#ycmz^8&w$_W)RN0&?53jW~VC>?P0R3e>b}wy%?yzwK$aq;@maWQ#3I{4j zn3E#MWUvUdkd553(B4#S_n4z6P}{NkSs1gK7}P1$&6qD_t6)F21L81sS%ti&pmn`~ x$X2t=yf&h0z}D4=bJ|=fTOmaYJ2MEZKF7{c!d {}, - .Text => { + .none => {}, + .text => { const text = render_command.text.chars[0..@intCast(render_command.text.length)]; - const cloned = allocator.dupeZ(c_char, text) catch unreachable; + const cloned = allocator.dupeZ(u8, text) catch unreachable; defer allocator.free(cloned); - const fontToUse: rl.Font = raylib_fonts[render_command.config.text_element_config.font_id].?; - rl.setTextLineSpacing(render_command.config.text_element_config.line_height); + const fontToUse: rl.Font = raylib_fonts[render_command.config.text_config.font_id].?; + rl.setTextLineSpacing(render_command.config.text_config.line_height); rl.drawTextEx( fontToUse, @ptrCast(@alignCast(cloned.ptr)), rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y }, - @floatFromInt(render_command.config.text_element_config.font_size), - @floatFromInt(render_command.config.text_element_config.letter_spacing), - clayColorToRaylibColor(render_command.config.text_element_config.color), + @floatFromInt(render_command.config.text_config.font_size), + @floatFromInt(render_command.config.text_config.letter_spacing), + clayColorToRaylibColor(render_command.config.text_config.color), ); }, - .Image => { + .image => { const image_texture: *const rl.Texture2D = @ptrCast( - @alignCast(render_command.config.image_element_config.image_data), + @alignCast(render_command.config.image_config.image_data), ); rl.drawTextureEx( image_texture.*, @@ -48,7 +48,7 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca rl.Color.white, ); }, - .ScissorStart => { + .scissor_start => { rl.beginScissorMode( @intFromFloat(math.round(bounding_box.x)), @intFromFloat(math.round(bounding_box.y)), @@ -56,9 +56,9 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca @intFromFloat(math.round(bounding_box.height)), ); }, - .ScissorEnd => rl.endScissorMode(), - .Rectangle => { - const config = render_command.config.rectangle_element_config; + .scissor_end => rl.endScissorMode(), + .rectangle => { + const config = render_command.config.rectangle_config; if (config.corner_radius.top_left > 0) { const radius: f32 = (config.corner_radius.top_left * 2) / @min(bounding_box.width, bounding_box.height); rl.drawRectangleRounded( @@ -82,8 +82,8 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca ); } }, - .Border => { - const config = render_command.config.border_element_config; + .border => { + const config = render_command.config.border_config; if (config.left.width > 0) { rl.drawRectangle( @intFromFloat(math.round(bounding_box.x)), @@ -178,7 +178,7 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca ); } }, - .Custom => { + .custom => { // Implement custom element rendering here }, } diff --git a/examples/raylib-sidebar-container/src/main.zig b/examples/raylib-sidebar-container/src/main.zig index 72332bf..dc93429 100644 --- a/examples/raylib-sidebar-container/src/main.zig +++ b/examples/raylib-sidebar-container/src/main.zig @@ -12,23 +12,22 @@ const sidebar_item_layout: cl.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .f // Re-useable components are just normal functions fn sidebarItemComponent(index: usize) void { - cl.singleElem(&.{ + cl.UI(&.{ .IDI("SidebarBlob", @intCast(index)), .layout(sidebar_item_layout), .rectangle(.{ .color = orange }), - }); + })({}); } // An example function to begin the "root" of your layout tree fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderCommand) { cl.beginLayout(); - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("OuterContainer"), .layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .child_gap = 16 }), .rectangle(.{ .color = white }), - })) { - defer cl.CLOSE(); - if (cl.OPEN(&.{ + })({ + cl.UI(&.{ .ID("SideBar"), .layout(.{ .direction = .TOP_TO_BOTTOM, @@ -38,34 +37,31 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm .child_gap = 16, }), .rectangle(.{ .color = light_grey }), - })) { - defer cl.CLOSE(); - if (cl.OPEN(&.{ + })({ + cl.UI(&.{ .ID("ProfilePictureOuter"), .layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .child_alignment = .{ .x = .LEFT, .y = .CENTER }, .child_gap = 16 }), .rectangle(.{ .color = red }), - })) { - defer cl.CLOSE(); - cl.singleElem(&.{ + })({ + cl.UI(&.{ .ID("ProfilePicture"), .layout(.{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } }), .image(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @ptrCast(profile_picture) }), - }); - cl.text("Clay - UI Library", cl.Config.text(.{ .font_size = 24, .color = light_grey })); - } + })({}); + cl.text("Clay - UI Library", .text(.{ .font_size = 24, .color = light_grey })); + }); for (0..5) |i| sidebarItemComponent(i); - } + }); - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("MainContent"), .layout(.{ .sizing = .grow }), .rectangle(.{ .color = light_grey }), - })) { - defer cl.CLOSE(); + })({ //... - } - } + }); + }); return cl.endLayout(); } @@ -87,8 +83,8 @@ pub fn main() anyerror!void { const min_memory_size: u32 = cl.minMemorySize(); const memory = try allocator.alloc(u8, min_memory_size); defer allocator.free(memory); - const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(min_memory_size, @ptrCast(memory)); - cl.initialize(arena, .{ .h = 1000, .w = 1000 }); + const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(memory); + _ = cl.initialize(arena, .{ .h = 1000, .w = 1000 }, .{}); cl.setMeasureTextFunction(renderer.measureText); // init raylib diff --git a/examples/raylib-sidebar-container/src/raylib_render_clay.zig b/examples/raylib-sidebar-container/src/raylib_render_clay.zig index 735df11..8e60616 100644 --- a/examples/raylib-sidebar-container/src/raylib_render_clay.zig +++ b/examples/raylib-sidebar-container/src/raylib_render_clay.zig @@ -20,25 +20,25 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca const render_command = cl.renderCommandArrayGet(render_commands, @intCast(i)); const bounding_box = render_command.bounding_box; switch (render_command.command_type) { - .None => {}, - .Text => { + .none => {}, + .text => { const text = render_command.text.chars[0..@intCast(render_command.text.length)]; - const cloned = allocator.dupeZ(c_char, text) catch unreachable; + const cloned = allocator.dupeZ(u8, text) catch unreachable; defer allocator.free(cloned); - const fontToUse: rl.Font = raylib_fonts[render_command.config.text_element_config.font_id].?; - rl.setTextLineSpacing(render_command.config.text_element_config.line_height); + const fontToUse: rl.Font = raylib_fonts[render_command.config.text_config.font_id].?; + rl.setTextLineSpacing(render_command.config.text_config.line_height); rl.drawTextEx( fontToUse, @ptrCast(@alignCast(cloned.ptr)), rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y }, - @floatFromInt(render_command.config.text_element_config.font_size), - @floatFromInt(render_command.config.text_element_config.letter_spacing), - clayColorToRaylibColor(render_command.config.text_element_config.color), + @floatFromInt(render_command.config.text_config.font_size), + @floatFromInt(render_command.config.text_config.letter_spacing), + clayColorToRaylibColor(render_command.config.text_config.color), ); }, - .Image => { + .image => { const image_texture: *const rl.Texture2D = @ptrCast( - @alignCast(render_command.config.image_element_config.image_data), + @alignCast(render_command.config.image_config.image_data), ); rl.drawTextureEx( image_texture.*, @@ -48,7 +48,7 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca rl.Color.white, ); }, - .ScissorStart => { + .scissor_start => { rl.beginScissorMode( @intFromFloat(math.round(bounding_box.x)), @intFromFloat(math.round(bounding_box.y)), @@ -56,9 +56,9 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca @intFromFloat(math.round(bounding_box.height)), ); }, - .ScissorEnd => rl.endScissorMode(), - .Rectangle => { - const config = render_command.config.rectangle_element_config; + .scissor_end => rl.endScissorMode(), + .rectangle => { + const config = render_command.config.rectangle_config; if (config.corner_radius.top_left > 0) { const radius: f32 = (config.corner_radius.top_left * 2) / @min(bounding_box.width, bounding_box.height); rl.drawRectangleRounded( @@ -82,8 +82,8 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca ); } }, - .Border => { - const config = render_command.config.border_element_config; + .border => { + const config = render_command.config.border_config; if (config.left.width > 0) { rl.drawRectangle( @intFromFloat(math.round(bounding_box.x)), @@ -178,7 +178,7 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca ); } }, - .Custom => { + .custom => { // Implement custom element rendering here }, } @@ -227,6 +227,6 @@ pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dime return cl.Dimensions{ .h = text_height, - .w = temp_text_width * scale_factor + @as(f32, @floatFromInt(temp_byte_counter - 1)) * letter_spacing, + .w = temp_text_width * scale_factor + (@as(f32, @floatFromInt(temp_byte_counter)) - 1) * letter_spacing, }; } diff --git a/src/root.zig b/src/root.zig index 14128e3..0b4befa 100644 --- a/src/root.zig +++ b/src/root.zig @@ -4,48 +4,70 @@ const builtin = @import("builtin"); /// for direct calls to the clay c library pub const cdefs = struct { // TODO: should use @extern instead but zls does not yet support it well and that is more important - extern "c" fn Clay_MinMemorySize() u32; - extern "c" fn Clay_CreateArenaWithCapacityAndMemory(capacity: u32, offset: [*c]u8) Arena; - extern "c" fn Clay_SetPointerState(position: Vector2, pointer_down: bool) void; - extern "c" fn Clay_Initialize(arena: Arena, layout_dimensions: Dimensions) void; - extern "c" fn Clay_UpdateScrollContainers(is_pointer_active: bool, scroll_delta: Vector2, delta_time: f32) void; - extern "c" fn Clay_SetLayoutDimensions(dimensions: Dimensions) void; - extern "c" fn Clay_BeginLayout() void; - extern "c" fn Clay_EndLayout() ClayArray(RenderCommand); - extern "c" fn Clay_PointerOver(id: ElementId) bool; - extern "c" fn Clay_GetElementId(id: String) ElementId; - extern "c" fn Clay_GetScrollContainerData(id: ElementId) ScrollContainerData; - extern "c" fn Clay_SetMeasureTextFunction(measureTextFunction: *const fn (*String, *TextElementConfig) callconv(.C) Dimensions) void; - extern "c" fn Clay_RenderCommandArray_Get(array: *ClayArray(RenderCommand), index: i32) *RenderCommand; - extern "c" fn Clay_SetDebugModeEnabled(enabled: bool) void; + pub extern fn Clay_MinMemorySize() u32; + pub extern fn Clay_CreateArenaWithCapacityAndMemory(capacity: u32, offset: [*c]u8) Arena; + pub extern fn Clay_SetPointerState(position: Vector2, pointerDown: bool) void; + pub extern fn Clay_Initialize(arena: Arena, layoutDimensions: Dimensions, errorHandler: ErrorHandler) *Context; + pub extern fn Clay_GetCurrentContext() *Context; + pub extern fn Clay_SetCurrentContext(context: *Context) void; + pub extern fn Clay_UpdateScrollContainers(enableDragScrolling: bool, scrollDelta: Vector2, deltaTime: f32) void; + pub extern fn Clay_SetLayoutDimensions(dimensions: Dimensions) void; + pub extern fn Clay_BeginLayout() void; + pub extern fn Clay_EndLayout() ClayArray(RenderCommand); + pub extern fn Clay_GetElementId(idString: String) ElementId; + pub extern fn Clay_GetElementIdWithIndex(idString: String, index: u32) ElementId; + pub extern fn Clay_Hovered() bool; + pub extern fn Clay_OnHover(onHoverFunction: ?*const fn (ElementId, PointerData, isize) callconv(.c) void, userData: isize) void; + pub extern fn Clay_PointerOver(elementId: ElementId) bool; + pub extern fn Clay_GetScrollContainerData(id: ElementId) ScrollContainerData; + pub extern fn Clay_SetMeasureTextFunction(measureTextFunction: *const fn (*String, *TextElementConfig) callconv(.c) Dimensions) void; + pub extern fn Clay_SetQueryScrollOffsetFunction(queryScrollOffsetFunction: ?*const fn (u32) callconv(.c) Vector2) void; + pub extern fn Clay_RenderCommandArray_Get(array: *ClayArray(RenderCommand), index: i32) *RenderCommand; + pub extern fn Clay_SetDebugModeEnabled(enabled: bool) void; + pub extern fn Clay_IsDebugModeEnabled() bool; + pub extern fn Clay_SetCullingEnabled(enabled: bool) void; + pub extern fn Clay_GetMaxElementCount() i32; + pub extern fn Clay_SetMaxElementCount(maxElementCount: i32) void; + pub extern fn Clay_GetMaxMeasureTextCacheWordCount() i32; + pub extern fn Clay_SetMaxMeasureTextCacheWordCount(maxMeasureTextCacheWordCount: i32) void; + pub extern fn Clay_ResetMeasureTextCache() void; - extern "c" fn Clay__OpenElement() void; - extern "c" fn Clay__CloseElement() void; - extern "c" fn Clay__ElementPostConfiguration() void; - extern "c" fn Clay__OpenTextElement(text: String, textConfig: *TextElementConfig) void; - extern "c" fn Clay__AttachId(id: ElementId) void; - extern "c" fn Clay__AttachLayoutConfig(layoutConfig: *LayoutConfig) void; - extern "c" fn Clay__AttachElementConfig(config: *anyopaque, type: ElementConfigType) void; - extern "c" fn Clay__StoreLayoutConfig(config: LayoutConfig) *LayoutConfig; - extern "c" fn Clay__StoreRectangleElementConfig(config: RectangleElementConfig) *RectangleElementConfig; - extern "c" fn Clay__StoreTextElementConfig(config: TextElementConfig) *TextElementConfig; - extern "c" fn Clay__StoreImageElementConfig(config: ImageElementConfig) *ImageElementConfig; - extern "c" fn Clay__StoreFloatingElementConfig(config: FloatingElementConfig) *FloatingElementConfig; - extern "c" fn Clay__StoreCustomElementConfig(config: CustomElementConfig) *CustomElementConfig; - extern "c" fn Clay__StoreScrollElementConfig(config: ScrollElementConfig) *ScrollElementConfig; - extern "c" fn Clay__StoreBorderElementConfig(config: BorderElementConfig) *BorderElementConfig; - extern "c" fn Clay__HashString(toHash: String, index: u32, seed: u32) ElementId; - extern "c" fn Clay__GetOpenLayoutElementId() u32; + pub extern fn Clay__OpenElement() void; + pub extern fn Clay__CloseElement() void; + pub extern fn Clay__StoreLayoutConfig(config: LayoutConfig) *LayoutConfig; + pub extern fn Clay__ElementPostConfiguration() void; + pub extern fn Clay__AttachId(id: ElementId) void; + pub extern fn Clay__AttachLayoutConfig(config: *LayoutConfig) void; + pub extern fn Clay__AttachElementConfig(config: ElementConfigUnion, @"type": ElementConfigType) void; + pub extern fn Clay__StoreRectangleElementConfig(config: RectangleElementConfig) *RectangleElementConfig; + pub extern fn Clay__StoreTextElementConfig(config: TextElementConfig) *TextElementConfig; + pub extern fn Clay__StoreImageElementConfig(config: ImageElementConfig) *ImageElementConfig; + pub extern fn Clay__StoreFloatingElementConfig(config: FloatingElementConfig) *FloatingElementConfig; + pub extern fn Clay__StoreCustomElementConfig(config: CustomElementConfig) *CustomElementConfig; + pub extern fn Clay__StoreScrollElementConfig(config: ScrollElementConfig) *ScrollElementConfig; + pub extern fn Clay__StoreBorderElementConfig(config: BorderElementConfig) *BorderElementConfig; + pub extern fn Clay__HashString(key: String, offset: u32, seed: u32) ElementId; + pub extern fn Clay__OpenTextElement(text: String, textConfig: *TextElementConfig) void; + pub extern fn Clay__GetParentElementId() u32; + + pub extern var CLAY_LAYOUT_DEFAULT: LayoutConfig; + pub extern var Clay__debugViewHighlightColor: Color; + pub extern var Clay__debugViewWidth: u32; }; +pub const EnumBackingType = u8; + pub const String = extern struct { - length: c_int, - chars: [*c]c_char, + length: i32, + chars: [*:0]const u8, }; -pub const Vector2 = extern struct { - x: f32, - y: f32, +pub const Context = opaque {}; + +pub const Arena = extern struct { + nextAllocation: usize, + capacity: usize, + memory: [*]u8, }; pub const Dimensions = extern struct { @@ -53,13 +75,13 @@ pub const Dimensions = extern struct { h: f32, }; -pub const Arena = extern struct { - label: String, - next_allocation: u64, - capacity: u64, - memory: [*c]c_char, +pub const Vector2 = extern struct { + x: f32, + y: f32, }; +pub const Color = [4]f32; + pub const BoundingBox = extern struct { x: f32, y: f32, @@ -67,7 +89,177 @@ pub const BoundingBox = extern struct { height: f32, }; -pub const Color = [4]f32; +pub const SizingMinMax = extern struct { + min: f32 = 0, + max: f32 = 0, +}; + +const SizingConstraint = extern union { + minmax: SizingMinMax, + percent: f32, +}; + +pub const SizingAxis = extern struct { + // Note: `min` is used for CLAY_SIZING_PERCENT, slightly different to clay.h due to lack of C anonymous unions + size: SizingConstraint = .{ .minmax = .{} }, + type: SizingType = .FIT, + + pub const grow = SizingAxis{ .type = .GROW, .size = .{ .minmax = .{ .min = 0, .max = 0 } } }; + pub const fit = SizingAxis{ .type = .FIT, .size = .{ .minmax = .{ .min = 0, .max = 0 } } }; + + pub fn growMinMax(size_minmax: SizingMinMax) SizingAxis { + return .{ .type = .GROW, .size = .{ .minmax = size_minmax } }; + } + + pub fn fitMinMax(size_minmax: SizingMinMax) SizingAxis { + return .{ .type = .FIT, .size = .{ .minmax = size_minmax } }; + } + + pub fn fixed(size: f32) SizingAxis { + return .{ .type = .FIXED, .size = .{ .minmax = .{ .max = size, .min = size } } }; + } + + pub fn percent(size_percent: f32) SizingAxis { + return .{ .type = .PERCENT, .size = .{ .percent = size_percent } }; + } +}; + +pub const Sizing = extern struct { + /// width + w: SizingAxis = .{}, + /// height + h: SizingAxis = .{}, + + pub const grow = Sizing{ .h = .grow, .w = .grow }; +}; + +pub const Padding = extern struct { + x: u16 = 0, + y: u16 = 0, + + pub fn all(size: u16) Padding { + return Padding{ + .x = size, + .y = size, + }; + } +}; + +pub const TextElementConfigWrapMode = enum(c_uint) { + words = 0, + newlines = 1, + none = 2, +}; + +pub const TextElementConfig = extern struct { + color: Color = .{ 0, 0, 0, 255 }, + font_id: u16 = 0, + font_size: u16 = 20, + letter_spacing: u16 = 0, + line_height: u16 = 0, + wrap_mode: TextElementConfigWrapMode = .words, +}; + +pub const FloatingAttachPointType = enum(u8) { + LEFT_TOP = 0, + LEFT_CENTER = 1, + LEFT_BOTTOM = 2, + CENTER_TOP = 3, + CENTER_CENTER = 4, + CENTER_BOTTOM = 5, + RIGHT_TOP = 6, + RIGHT_CENTER = 7, + RIGHT_BOTTOM = 8, +}; + +pub const FloatingAttachPoints = extern struct { + element: FloatingAttachPointType, + parent: FloatingAttachPointType, +}; + +pub const PointerCaptureMode = enum(c_uint) { + CAPTURE = 0, + PASSTHROUGH = 1, +}; + +pub const FloatingElementConfig = extern struct { + offset: Vector2, + expand: Dimensions, + zIndex: u16, + parentId: u32, + attachment: FloatingAttachPoints, + pointerCaptureMode: PointerCaptureMode, +}; + +pub const Border = extern struct { + width: u32, + color: Color, +}; + +pub const ElementConfigUnion = extern union { + rectangle_config: *RectangleElementConfig, + text_config: *TextElementConfig, + image_config: *ImageElementConfig, + floating_config: *FloatingElementConfig, + custom_config: *CustomElementConfig, + scroll_config: *ScrollElementConfig, + border_config: *BorderElementConfig, +}; + +pub const ElementConfig = extern struct { + type: ElementConfigType, + config: ElementConfigUnion, +}; + +pub const RenderCommandType = enum(u8) { + none = 0, + rectangle = 1, + border = 2, + text = 3, + image = 4, + scissor_start = 5, + scissor_end = 6, + custom = 7, +}; + +pub const RenderCommandArray = extern struct { + capacity: i32, + length: i32, + internalArray: [*]RenderCommand, +}; + +pub const PointerDataInteractionState = enum(c_uint) { + pressed_this_frame = 0, + pressed = 1, + released_this_frame = 2, + released = 3, +}; + +pub const PointerData = extern struct { + position: Vector2, + state: PointerDataInteractionState, +}; + +pub const ErrorType = enum(c_uint) { + text_measurement_function_not_provided = 0, + arena_capacity_exceeded = 1, + elements_capacity_exceeded = 2, + text_measurement_capacity_exceeded = 3, + duplicate_id = 4, + floating_container_parent_not_found = 5, + internal_error = 6, +}; + +pub const ErrorData = extern struct { + errorType: ErrorType, + errorText: String, + userData: usize, +}; + +pub const ErrorHandler = extern struct { + error_handler_function: ?*const fn (ErrorData) callconv(.c) void = null, + user_data: usize = 0, +}; pub const CornerRadius = extern struct { top_left: f32 = 0, @@ -97,50 +289,6 @@ pub const ElementId = extern struct { string_id: String, }; -pub const EnumBackingType = u8; - -pub const RenderCommandType = enum(EnumBackingType) { - None, - Rectangle, - Border, - Text, - Image, - ScissorStart, - ScissorEnd, - Custom, -}; - -pub const TextWrapMode = enum(EnumBackingType) { - Words, - Newlines, - None, -}; - -pub const FloatingAttachPointType = enum(EnumBackingType) { - LEFT_TOP, - LEFT_CENTER, - LEFT_BOTTOM, - CENTER_TOP, - CENTER_CENTER, - CENTER_BOTTOM, - RIGHT_TOP, - RIGHT_CENTER, - RIGHT_BOTTOM, -}; - -pub const FloatingAttachPoints = extern struct { - element: FloatingAttachPointType, - parent: FloatingAttachPointType, -}; - -pub const ElementConfigUnion = extern union { - rectangle_element_config: *RectangleElementConfig, - text_element_config: *TextElementConfig, - image_element_config: *ImageElementConfig, - custom_element_config: *CustomElementConfig, - border_element_config: *BorderElementConfig, -}; - pub const RenderCommand = extern struct { bounding_box: BoundingBox, config: ElementConfigUnion, @@ -161,83 +309,32 @@ pub const ScrollContainerData = extern struct { }; pub const SizingType = enum(EnumBackingType) { - FIT, - GROW, - PERCENT, - FIXED, -}; - -pub const SizingConstraintsMinMax = extern struct { - min: f32 = 0, - max: f32 = 0, + FIT = 0, + GROW = 1, + PERCENT = 2, + FIXED = 3, }; pub const SizingConstraints = extern union { - size_minmax: SizingConstraintsMinMax, + size_minmax: SizingMinMax, size_percent: f32, }; -pub const SizingAxis = extern struct { - // Note: `min` is used for CLAY_SIZING_PERCENT, slightly different to clay.h due to lack of C anonymous unions - constraints: SizingConstraints = .{ .size_minmax = .{} }, - type: SizingType = .FIT, - - pub const grow = SizingAxis{ .type = .GROW, .constraints = .{ .size_minmax = .{ .min = 0, .max = 0 } } }; - pub const fit = SizingAxis{ .type = .FIT, .constraints = .{ .size_minmax = .{ .min = 0, .max = 0 } } }; - - pub fn growMinMax(size_minmax: SizingConstraintsMinMax) SizingAxis { - return .{ .type = .GROW, .constraints = .{ .size_minmax = size_minmax } }; - } - - pub fn fitMinMax(size_minmax: SizingConstraintsMinMax) SizingAxis { - return .{ .type = .FIT, .constraints = .{ .size_minmax = size_minmax } }; - } - - pub fn fixed(size: f32) SizingAxis { - return .{ .type = .FIXED, .constraints = .{ .size_minmax = .{ .max = size, .min = size } } }; - } - - pub fn percent(size_percent: f32) SizingAxis { - return .{ .type = .PERCENT, .constraints = .{ .size_percent = size_percent } }; - } -}; - -pub const Sizing = extern struct { - /// width - w: SizingAxis = .{}, - /// height - h: SizingAxis = .{}, - - pub const grow = Sizing{ .h = .grow, .w = .grow }; -}; - -pub const Padding = extern struct { - x: u16 = 0, - y: u16 = 0, - - pub fn all(size: u16) Padding { - return Padding{ - .x = size, - .y = size, - }; - } -}; - pub const LayoutDirection = enum(EnumBackingType) { LEFT_TO_RIGHT = 0, TOP_TO_BOTTOM = 1, }; pub const LayoutAlignmentX = enum(EnumBackingType) { - LEFT, - RIGHT, - CENTER, + LEFT = 0, + RIGHT = 1, + CENTER = 2, }; pub const LayoutAlignmentY = enum(EnumBackingType) { - TOP, - BOTTOM, - CENTER, + TOP = 0, + BOTTOM = 1, + CENTER = 2, }; pub const ChildAlignment = extern struct { @@ -306,28 +403,11 @@ pub const BorderElementConfig = extern struct { } }; -pub const TextElementConfig = extern struct { - color: Color = .{ 0, 0, 0, 255 }, - font_id: u16 = 0, - font_size: u16 = 20, - letter_spacing: u16 = 0, - line_height: u16 = 0, - wrap_mode: TextWrapMode = .Words, -}; - pub const ImageElementConfig = extern struct { image_data: *const anyopaque, source_dimensions: Dimensions, }; -pub const FloatingElementConfig = extern struct { - offset: Vector2, - expand: Dimensions, - z_index: u16, - parent_id: u32, - attachment: FloatingAttachPoints, -}; - pub const CustomElementConfig = extern struct { custom_data: *anyopaque, }; @@ -338,52 +418,49 @@ pub const ScrollElementConfig = extern struct { }; pub const ElementConfigType = enum(EnumBackingType) { - Rectangle = 1, - Border = 2, - Floating = 4, - Scroll = 8, - Image = 16, - Text = 32, - Custom = 64, + rectangle_config = 1, + border_config = 2, + floating_config = 4, + scroll_config = 8, + image_config = 16, + text_config = 32, + custom_config = 64, // zig specific enum types id, - Layout, + layout_config, }; pub const Config = union(ElementConfigType) { - Rectangle: *RectangleElementConfig, - Border: *BorderElementConfig, - Floating: *FloatingElementConfig, - Scroll: *ScrollElementConfig, - Image: *ImageElementConfig, - Text: *TextElementConfig, - Custom: *CustomElementConfig, + rectangle_config: *RectangleElementConfig, + border_config: *BorderElementConfig, + floating_config: *FloatingElementConfig, + scroll_config: *ScrollElementConfig, + image_config: *ImageElementConfig, + text_config: *TextElementConfig, + custom_config: *CustomElementConfig, id: ElementId, - Layout: *LayoutConfig, + layout_config: *LayoutConfig, - pub fn layout(config: LayoutConfig) Config { - return Config{ .Layout = cdefs.Clay__StoreLayoutConfig(config) }; - } pub fn rectangle(config: RectangleElementConfig) Config { - return Config{ .Rectangle = cdefs.Clay__StoreRectangleElementConfig(config) }; - } - pub fn text(config: TextElementConfig) Config { - return Config{ .Text = cdefs.Clay__StoreTextElementConfig(config) }; - } - pub fn image(config: ImageElementConfig) Config { - return Config{ .Image = cdefs.Clay__StoreImageElementConfig(config) }; - } - pub fn floating(config: FloatingElementConfig) Config { - return Config{ .Floating = cdefs.Clay__StoreFloatingElementConfig(config) }; - } - pub fn custom(config: CustomElementConfig) Config { - return Config{ .Custom = cdefs.Clay__StoreCustomElementConfig(config) }; - } - pub fn scroll(config: ScrollElementConfig) Config { - return Config{ .Scroll = cdefs.Clay__StoreScrollElementConfig(config) }; + return Config{ .rectangle_config = cdefs.Clay__StoreRectangleElementConfig(config) }; } pub fn border(config: BorderElementConfig) Config { - return Config{ .Border = cdefs.Clay__StoreBorderElementConfig(config) }; + return Config{ .border_config = cdefs.Clay__StoreBorderElementConfig(config) }; + } + pub fn floating(config: FloatingElementConfig) Config { + return Config{ .floating_config = cdefs.Clay__StoreFloatingElementConfig(config) }; + } + pub fn scroll(config: ScrollElementConfig) Config { + return Config{ .scroll_config = cdefs.Clay__StoreScrollElementConfig(config) }; + } + pub fn image(config: ImageElementConfig) Config { + return Config{ .image_config = cdefs.Clay__StoreImageElementConfig(config) }; + } + pub fn text(config: TextElementConfig) Config { + return Config{ .text_config = cdefs.Clay__StoreTextElementConfig(config) }; + } + pub fn custom(config: CustomElementConfig) Config { + return Config{ .custom_config = cdefs.Clay__StoreCustomElementConfig(config) }; } pub fn ID(string: []const u8) Config { return Config{ .id = hashString(makeClayString(string), 0, 0) }; @@ -391,10 +468,12 @@ pub const Config = union(ElementConfigType) { pub fn IDI(string: []const u8, index: u32) Config { return Config{ .id = hashString(makeClayString(string), index, 0) }; } + pub fn layout(config: LayoutConfig) Config { + return Config{ .layout_config = cdefs.Clay__StoreLayoutConfig(config) }; + } }; pub const minMemorySize = cdefs.Clay_MinMemorySize; -pub const createArenaWithCapacityAndMemory = cdefs.Clay_CreateArenaWithCapacityAndMemory; pub const initialize = cdefs.Clay_Initialize; pub const setLayoutDimensions = cdefs.Clay_SetLayoutDimensions; pub const beginLayout = cdefs.Clay_BeginLayout; @@ -404,64 +483,27 @@ pub const renderCommandArrayGet = cdefs.Clay_RenderCommandArray_Get; pub const setDebugModeEnabled = cdefs.Clay_SetDebugModeEnabled; pub const hashString = cdefs.Clay__HashString; +pub fn createArenaWithCapacityAndMemory(buffer: []u8) Arena { + return cdefs.Clay_CreateArenaWithCapacityAndMemory(@intCast(buffer.len), buffer.ptr); +} + pub inline fn UI(configs: []const Config) fn (void) void { - std.debug.print("-> OPEN ELEMENT\n", .{}); cdefs.Clay__OpenElement(); for (configs) |config| { switch (config) { - .Layout => |layoutConf| { - std.debug.print("LAYOUT CONF: {}\n", .{layoutConf}); - cdefs.Clay__AttachLayoutConfig(layoutConf); - }, + .layout_config => |layoutConf| cdefs.Clay__AttachLayoutConfig(layoutConf), .id => |id| cdefs.Clay__AttachId(id), - inline else => |elem_config| { - std.debug.print("elem_config CONF: {}\n", .{elem_config}); - cdefs.Clay__AttachElementConfig(@ptrCast(elem_config), config); - }, + inline else => |elem_config, tag| cdefs.Clay__AttachElementConfig(@unionInit(ElementConfigUnion, @tagName(tag), elem_config), config), } } - std.debug.print("-> POST ELEMENT\n", .{}); cdefs.Clay__ElementPostConfiguration(); return struct { fn f(_: void) void { - std.time.sleep(1000); - std.debug.print("-> CLOSE ELEMENT\n", .{}); cdefs.Clay__CloseElement(); } }.f; } -pub fn OPEN(configs: []const Config) bool { - std.debug.print("-> OPEN ELEMENT\n", .{}); - cdefs.Clay__OpenElement(); - for (configs) |config| { - switch (config) { - .Layout => |layoutConf| { - std.debug.print("LAYOUT CONF: {}\n", .{layoutConf}); - cdefs.Clay__AttachLayoutConfig(layoutConf); - }, - .id => |id| cdefs.Clay__AttachId(id), - inline else => |elem_config| { - std.debug.print("elem_config CONF: {}\n", .{elem_config}); - cdefs.Clay__AttachElementConfig(@ptrCast(elem_config), config); - }, - } - } - std.debug.print("-> POST ELEMENT\n", .{}); - cdefs.Clay__ElementPostConfiguration(); - return true; -} - -pub fn CLOSE() void { - std.debug.print("-> CLOSE ELEMENT\n", .{}); - cdefs.Clay__CloseElement(); -} - -pub fn singleElem(configs: []const Config) void { - _ = OPEN(configs); - CLOSE(); -} - pub fn endLayout() ClayArray(RenderCommand) { return cdefs.Clay_EndLayout(); } @@ -490,8 +532,7 @@ pub fn makeClayString(string: []const u8) String { } pub fn text(string: []const u8, config: Config) void { - // std.debug.print("TEXT 2 conf: {}\n", .{config.Text}); - cdefs.Clay__OpenTextElement(makeClayString(string), config.Text); + cdefs.Clay__OpenTextElement(makeClayString(string), config.text_config); } pub fn ID(string: []const u8) ElementId { diff --git a/test.zig b/test.zig deleted file mode 100644 index 2e46214..0000000 --- a/test.zig +++ /dev/null @@ -1,16 +0,0 @@ -const std = @import("std"); - -fn CLOSE(_: void) void { - std.debug.print("CLOSE\n", .{}); -} - -inline fn UI() fn (void) void { - std.debug.print("OPEN\n", .{}); - return CLOSE; -} - -pub fn main() !void { - UI()({ - std.debug.print("INSIDE\n", .{}); - }); -} From 0eaf847e30012b94cfd2c4a4326b045e49a9120c Mon Sep 17 00:00:00 2001 From: johan0A Date: Tue, 14 Jan 2025 00:13:58 +0100 Subject: [PATCH 3/4] fixes for the README.md --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index de5a5dd..e8e7c3e 100644 --- a/README.md +++ b/README.md @@ -12,11 +12,9 @@ This repository contains Zig bindings for the [clay UI layout library](https://g This README is abbreviated and applies to using clay in Zig specifically: If you haven't taken a look at the [full documentation for clay](https://github.com/nicbarker/clay/blob/main/README.md), it's recommended that you take a look there first to familiarise yourself with the general concepts. -The **most notable difference** between the C API and the Zig bindings is that opening and closing the scope for declaring child elements must be done "manually" using 2 function calls. - -other differences include: +Some differences between the C API and the Zig bindings include: - minor naming changes - - ability to initialize a parameter by calling a function that is part of its type's namespace for example `.fixed()` or `.Layout()` + - ability to initialize a parameter by calling a function that is part of its type's namespace for example `.fixed()` or `.layout()` - ability to initialize a parameter by using a public constant that is part of its type's namespace for example `.grow` - clay.singleElem() is available to create a clay element without creating a scope @@ -28,8 +26,8 @@ CLAY( CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .height = CLAY_SIZING_GROW(), .width = CLAY_SIZING_FIXED(300) }, - .childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_TOP }, .padding = {16, 16}, + .childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_TOP }, .childGap = 16, }), CLAY_RECTANGLE({ .color = COLOR_LIGHT }) From bc838cd75913cfa00a4dce223acb3f69ccd841f7 Mon Sep 17 00:00:00 2001 From: johan0A Date: Tue, 14 Jan 2025 00:40:40 +0100 Subject: [PATCH 4/4] compatibility with zig 0.14.0-dev.2639+15fe99957 --- README.md | 2 +- examples/clay-official-website/build.zig.zon | 4 ++-- examples/raylib-sidebar-container/build.zig.zon | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index e8e7c3e..7a4fc21 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ ![Screenshot from 2025-01-07 17-05-01](https://github.com/user-attachments/assets/8f38e8bf-00aa-4e16-be96-b7a0d81f4313) > [!IMPORTANT] -> Zig 0.14.0 or higher is required. (tested with zig 0.14.0-dev.2628+5b5c60f4) +> Zig 0.14.0 or higher is required. (tested with zig 0.14.0-dev.2639+15fe99957) > [!NOTE] > This project is currently in beta. diff --git a/examples/clay-official-website/build.zig.zon b/examples/clay-official-website/build.zig.zon index 68acf3f..570cdbc 100644 --- a/examples/clay-official-website/build.zig.zon +++ b/examples/clay-official-website/build.zig.zon @@ -6,8 +6,8 @@ .path = "../../", }, .@"raylib-zig" = .{ - .url = "https://github.com/Not-Nik/raylib-zig/archive/35332edacf2e03236220f12a8dd3410b1c39d9eb.tar.gz", - .hash = "1220c34fe472645e173a7168eb513ca8343af3c3f61b618daedda30ec3932b002637", + .url = "https://github.com/Not-Nik/raylib-zig/archive/ab6f1566bcb21f98b06fbccf17c57a9c4711482b.tar.gz", + .hash = "12207f719c1fa181d79ff174f476281e6b13610e4430d8e5b8453b43d6e62712b45f", }, }, .paths = .{ diff --git a/examples/raylib-sidebar-container/build.zig.zon b/examples/raylib-sidebar-container/build.zig.zon index 68acf3f..570cdbc 100644 --- a/examples/raylib-sidebar-container/build.zig.zon +++ b/examples/raylib-sidebar-container/build.zig.zon @@ -6,8 +6,8 @@ .path = "../../", }, .@"raylib-zig" = .{ - .url = "https://github.com/Not-Nik/raylib-zig/archive/35332edacf2e03236220f12a8dd3410b1c39d9eb.tar.gz", - .hash = "1220c34fe472645e173a7168eb513ca8343af3c3f61b618daedda30ec3932b002637", + .url = "https://github.com/Not-Nik/raylib-zig/archive/ab6f1566bcb21f98b06fbccf17c57a9c4711482b.tar.gz", + .hash = "12207f719c1fa181d79ff174f476281e6b13610e4430d8e5b8453b43d6e62712b45f", }, }, .paths = .{