diff --git a/README.md b/README.md index 0ec0110..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. @@ -12,9 +12,7 @@ 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 changes 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 using a public constant that is part of its type's namespace for example `.grow` @@ -40,7 +38,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 +48,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 +78,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 +112,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 +185,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/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/clay-official-website/src/main.zig b/examples/clay-official-website/src/main.zig index 03a0e94..810f45f 100644 --- a/examples/clay-official-website/src/main.zig +++ b/examples/clay-official-website/src/main.zig @@ -54,24 +54,23 @@ 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, image_size: f32, max_width: f32, text: []const u8, image: *rl.Texture2D) void { - if (cl.OPEN(&.{ +fn landingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, image_size: f32, max_width: f32, text: []const u8, image: *rl.Texture2D) void { + 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, 10)), - })) { - defer cl.CLOSE(); - cl.singleElem(&.{ + })({ + cl.UI(&.{ .IDI("CheckImage", index), .layout(.{ .sizing = .{ .w = .fixed(image_size) } }), .image(.{ .image_data = image, .source_dimensions = .{ .w = 128, .h = 128 } }), - }); - cl.text(text, cl.Config.text(.{ .font_size = font_size, .font_id = font_id, .color = color })); - } + })({}); + cl.text(text, .text(.{ .font_size = font_size, .font_id = font_id, .color = color })); + }); } fn landingPageDesktop() void { - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("LandingPage1Desktop"), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) }, @@ -79,9 +78,8 @@ fn landingPageDesktop() void { .padding = .{ .x = 50 }, .child_gap = 16, }), - })) { - defer cl.CLOSE(); - if (cl.OPEN(&.{ + })({ + cl.UI(&.{ .ID("LandingPage1"), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) }, @@ -91,53 +89,49 @@ fn landingPageDesktop() void { .child_gap = 32, }), .border(.{ .left = border_data, .right = border_data }), - })) { - defer cl.CLOSE(); - LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6); + })({ + landingPageBlob(0, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6); - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("ClayPresentation"), .layout(.{ .sizing = .grow, .child_alignment = .{ .y = .CENTER }, .child_gap = 16, }), - })) { - defer cl.CLOSE(); - if (cl.OPEN(&.{ + })({ + cl.UI(&.{ .ID("LeftText"), .layout(.{ .sizing = .{ .w = .percent(0.55) }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }), - })) { - defer cl.CLOSE(); + })({ cl.text( "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.", - cl.Config.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }), + .text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }), ); - cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) }); + cl.UI(&.{ .ID("ClayPresentation_Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) })({}); cl.text( - "Clay is laying out this webpage .right now!", - cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }), + "Clay is laying out this webpage right now!", + .text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }), ); - } + }); - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("HeroImageOuter"), .layout(.{ .sizing = .{ .w = .percent(0.45) }, .direction = .TOP_TO_BOTTOM, .child_alignment = .{ .x = .CENTER }, .child_gap = 16 }), - })) { - defer cl.CLOSE(); - LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, 32, 480, "High performance", &checkImage5); - LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, 32, 480, "Flexbox-style responsive layout", &checkImage4); - LandingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, 32, 480, "Declarative syntax", &checkImage3); - LandingPageBlob(4, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_2, 32, 480, "Single .h file for C/C++", &checkImage2); - LandingPageBlob(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, 32, 480, "Compile to 15kb .wasm", &checkImage1); - } - } - } - } + })({ + landingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, 32, 480, "High performance", &checkImage5); + landingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, 32, 480, "Flexbox-style responsive layout", &checkImage4); + landingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, 32, 480, "Declarative syntax", &checkImage3); + landingPageBlob(4, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_2, 32, 480, "Single .h file for C/C++", &checkImage2); + landingPageBlob(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, 32, 480, "Compile to 15kb .wasm", &checkImage1); + }); + }); + }); + }); } fn landingPageMobile() void { - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("LandingPage1Mobile"), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) }, @@ -146,42 +140,39 @@ fn landingPageMobile() void { .padding = .{ .x = 16, .y = 32 }, .child_gap = 16, }), - })) { - defer cl.CLOSE(); - LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6); - if (cl.OPEN(&.{ + })({ + landingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6); + cl.UI(&.{ .ID("LeftText"), .layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }), - })) { - defer cl.CLOSE(); + })({ cl.text( "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.", - cl.Config.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }), + .text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }), ); - cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) }); + cl.UI(&.{ .ID("LeftText_Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) })({}); cl.text( "Clay is laying out this webpage .right now!", - cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }), + .text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }), ); - } + }); - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("HeroImageOuter"), .layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .child_alignment = .{ .x = .CENTER }, .child_gap = 16 }), - })) { - defer cl.CLOSE(); - LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, 32, 480, "High performance", &checkImage5); - LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, 32, 480, "Flexbox-style responsive layout", &checkImage4); - LandingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, 32, 480, "Declarative syntax", &checkImage3); - LandingPageBlob(4, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_2, 32, 480, "Single .h file for C/C++", &checkImage2); - LandingPageBlob(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, 32, 480, "Compile to 15kb .wasm", &checkImage1); - } - } + })({ + landingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, 32, 480, "High performance", &checkImage5); + landingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, 32, 480, "Flexbox-style responsive layout", &checkImage4); + landingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, 32, 480, "Declarative syntax", &checkImage3); + landingPageBlob(4, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_2, 32, 480, "Single .h file for C/C++", &checkImage2); + landingPageBlob(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, 32, 480, "Compile to 15kb .wasm", &checkImage1); + }); + }); } fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void { const text_config = cl.Config.text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_RED }); - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("HFileBoxOuter"), .layout(.{ .direction = .TOP_TO_BOTTOM, @@ -190,20 +181,18 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void { .padding = .{ .x = outer_padding, .y = 32 }, .child_gap = 8, }), - })) { - defer cl.CLOSE(); - if (cl.OPEN(&.{ + })({ + cl.UI(&.{ .ID("HFileIncludeOuter"), .layout(.{ .padding = .{ .x = 8, .y = 4 } }), .rectangle(.{ .color = COLOR_RED, .corner_radius = .all(8) }), - })) { - defer cl.CLOSE(); + })({ cl.text("#include cl.h", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_LIGHT })); - } + }); cl.text("~2000 lines of C99.", text_config); cl.text("Zero dependencies, including no C standard library", text_config); - } - if (cl.OPEN(&.{ + }); + cl.UI(&.{ .ID("BringYourOwnRendererOuter"), .layout(.{ .direction = .TOP_TO_BOTTOM, @@ -212,84 +201,77 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void { .padding = .{ .x = outer_padding, .y = 32 }, .child_gap = 8, }), - })) { - defer cl.CLOSE(); + })({ cl.text("Renderer agnostic.", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_ORANGE })); cl.text("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", text_config); cl.text("Flexible output for easy compositing in your custom engine or environment.", text_config); - } + }); } fn featureBlocksDesktop() void { - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("FeatureBlocksOuter"), .layout(.{ .sizing = .{ .w = .grow }, .child_alignment = .{ .y = .CENTER }, }), .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }), - })) { - defer cl.CLOSE(); + })({ featureBlocks(.percent(0.5), 50); - } + }); } fn featureBlocksMobile() void { - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("FeatureBlocksOuter"), .layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, }), .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }), - })) { - defer cl.CLOSE(); + })({ featureBlocks(.grow, 16); - } + }); } fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void { - if (cl.OPEN(&.{ .ID("SyntaxPageLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })) { - defer cl.CLOSE(); + cl.UI(&.{ .ID("SyntaxPageLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({ cl.text("Declarative Syntax", .text(title_text_config)); - cl.singleElem(&.{ + cl.UI(&.{ .ID("SyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }), - }); + })({}); const text_conf = cl.Config.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED }); cl.text("Flexible and readable declarative syntax with nested UI element hierarchies.", text_conf); cl.text("Mix elements with standard C code like loops, conditionals and functions.", text_conf); cl.text("Create your own library of re-usable components from UI primitives like text, images and rectangles.", text_conf); - } - if (cl.OPEN(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })) { - defer cl.CLOSE(); - cl.singleElem(&.{ + }); + cl.UI(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({ + cl.UI(&.{ .ID("SyntaxPageRightImage"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 568 }) } }), .image(.{ .image_data = &syntaxImage, .source_dimensions = .{ .h = 1136, .w = 1194 } }), - }); - } + })({}); + }); } fn declarativeSyntaxPageDesktop() void { - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("SyntaxPageDesktop"), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .child_alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 } }), - })) { - defer cl.CLOSE(); - if (cl.OPEN(&.{ + })({ + cl.UI(&.{ .ID("SyntaxPage"), .layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(32), .child_gap = 32 }), .border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }), - })) { - defer cl.CLOSE(); + })({ declarativeSyntaxPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .percent(0.5)); - } - } + }); + }); } fn declarativeSyntaxPageMobile() void { - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("SyntaxPageMobile"), .layout(.{ .direction = .TOP_TO_BOTTOM, @@ -298,10 +280,9 @@ fn declarativeSyntaxPageMobile() void { .padding = .{ .x = 16, .y = 32 }, .child_gap = 16, }), - })) { - defer cl.CLOSE(); + })({ declarativeSyntaxPage(.{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_RED }, .grow); - } + }); } fn colorLerp(a: cl.Color, b: cl.Color, amount: f32) cl.Color { @@ -311,10 +292,9 @@ fn colorLerp(a: cl.Color, b: cl.Color, amount: f32) cl.Color { const LOREM_IPSUM_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."; fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig, width_sizing: cl.SizingAxis) void { - if (cl.OPEN(&.{ .ID("PerformanceLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })) { - defer cl.CLOSE(); + cl.UI(&.{ .ID("PerformanceLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({ cl.text("High Performance", .text(title_text_tonfig)); - cl.singleElem(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) }); + cl.UI(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) })({}); cl.text( "Fast enough to recompute your entire UI every frame.", .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }), @@ -327,37 +307,33 @@ fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig, "Simplify animations and reactive UI design by avoiding the standard performance hacks.", .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }), ); - } - if (cl.OPEN(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })) { - defer cl.CLOSE(); - if (cl.OPEN(&.{ + }); + cl.UI(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({ + cl.UI(&.{ .ID("PerformanceRightBorder"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(400) } }), .border(.all(COLOR_LIGHT, 2, 0)), - })) { - defer cl.CLOSE(); - if (cl.OPEN(&.{ + })({ + cl.UI(&.{ .ID("AnimationDemoContainerLeft"), .layout(.{ .sizing = .{ .w = .percent(0.35 + 0.3 * lerp_value), .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(16) }), .rectangle(.{ .color = colorLerp(COLOR_RED, COLOR_ORANGE, lerp_value) }), - })) { - defer cl.CLOSE(); + })({ cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT })); - } - if (cl.OPEN(&.{ + }); + cl.UI(&.{ .ID("AnimationDemoContainerRight"), .layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(16) }), .rectangle(.{ .color = colorLerp(COLOR_ORANGE, COLOR_RED, lerp_value) }), - })) { - defer cl.CLOSE(); + })({ cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT })); - } - } - } + }); + }); + }); } fn highPerformancePageDesktop(lerp_value: f32) void { - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("PerformanceDesktop"), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, @@ -366,14 +342,13 @@ fn highPerformancePageDesktop(lerp_value: f32) void { .child_gap = 64, }), .rectangle(.{ .color = COLOR_RED }), - })) { - defer cl.CLOSE(); + })({ highPerformancePage(lerp_value, .{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_LIGHT }, .percent(0.5)); - } + }); } fn highPerformancePageMobile(lerp_value: f32) void { - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("PerformanceMobile"), .layout( .{ @@ -385,41 +360,36 @@ fn highPerformancePageMobile(lerp_value: f32) void { }, ), .rectangle(.{ .color = COLOR_RED }), - })) { - defer cl.CLOSE(); + })({ highPerformancePage(lerp_value, .{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_LIGHT }, .grow); - } + }); } fn rendererButtonActive(text: []const u8) void { - if (cl.OPEN(&.{ + cl.UI(&.{ .layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }), .rectangle(.{ .color = COLOR_RED, .corner_radius = .all(10) }), - })) { - defer cl.CLOSE(); + })({ cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_LIGHT })); - } + }); } fn rendererButtonInactive(index: u32, text: []const u8) void { - if (cl.OPEN(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })) { - defer cl.CLOSE(); - if (cl.OPEN(&.{ + cl.UI(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })({ + cl.UI(&.{ .ID("RendererButtonInactiveInner", index), .layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }), .rectangle(.{ .color = COLOR_LIGHT, .corner_radius = .all(10) }), - })) { - defer cl.CLOSE(); + })({ cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED })); - } - } + }); + }); } fn rendererPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void { - if (cl.OPEN(&.{ .ID("RendererLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })) { - defer cl.CLOSE(); + cl.UI(&.{ .ID("RendererLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({ cl.text("Renderer & Platform Agnostic", .text(title_text_config)); - cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) }); + cl.UI(&.{ .ID("RendererLeftText_Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) })({}); cl.text( "Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.", .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }), @@ -429,44 +399,41 @@ fn rendererPage(title_text_config: cl.TextElementConfig, width_sizing: cl.Sizing .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }), ); cl.text( - "There's even an HTML renderer - you're looking at it .right now!", + "There's even an HTML renderer - you're looking at it right now!", .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }), ); - } - if (cl.OPEN(&.{ + }); + cl.UI(&.{ .ID("RendererRightText"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER }, .direction = .TOP_TO_BOTTOM, .child_gap = 16 }), - })) { - defer cl.CLOSE(); + })({ cl.text("Try changing renderer!", .text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE })); - cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) }); + cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) })({}); rendererButtonActive("Raylib Renderer"); - } + }); } fn rendererPageDesktop() void { - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("RendererPageDesktop"), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .child_alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 }, }), - })) { - defer cl.CLOSE(); - if (cl.OPEN(&.{ + })({ + cl.UI(&.{ .ID("RendererPage"), .layout(.{ .sizing = .grow, .child_alignment = .{ .y = .CENTER }, .padding = .all(32), .child_gap = 32 }), .border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }), - })) { - defer cl.CLOSE(); + })({ rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .percent(0.5)); - } - } + }); + }); } fn rendererPageMobile() void { - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("RendererMobile"), .layout( .{ @@ -478,23 +445,21 @@ fn rendererPageMobile() void { }, ), .rectangle(.{ .color = COLOR_LIGHT }), - })) { - defer cl.CLOSE(); + })({ rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .grow); - } + }); } fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) { const mobileScreen = window_width < 750; cl.beginLayout(); - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("OuterContainer"), .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }), .rectangle(.{ .color = COLOR_LIGHT }), - })) { - defer cl.CLOSE(); - if (cl.OPEN(&.{ + })({ + cl.UI(&.{ .ID("Header"), .layout(.{ .sizing = .{ .h = .fixed(50), .w = .grow }, @@ -502,27 +467,24 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) { .padding = .{ .x = 32 }, .child_gap = 24, }), - })) { - defer cl.CLOSE(); - cl.text("Clay", cl.Config.text(.{ + })({ + cl.text("Clay", .text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 }, })); - cl.singleElem(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) }); + cl.UI(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) })({}); if (!mobileScreen) { - if (cl.OPEN(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })) { - defer cl.CLOSE(); - cl.text("Examples", cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } })); - } - if (cl.OPEN(&.{ .ID("LinkDocsOuter"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })) { - defer cl.CLOSE(); - cl.text("Docs", cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } })); - } + cl.UI(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })({ + cl.text("Examples", .text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } })); + }); + cl.UI(&.{ .ID("LinkDocsOuter"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })({ + cl.text("Docs", .text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } })); + }); } - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("LinkGithubOuter"), .layout(.{ .padding = .{ .x = 32, .y = 6 } }), .border(.outside(COLOR_RED, 2, 10)), @@ -530,30 +492,28 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) { .corner_radius = .all(10), .color = if (cl.pointerOver(cl.getElementId("LinkGithubOuter"))) COLOR_LIGHT_HOVER else COLOR_LIGHT, }), - })) { - defer cl.CLOSE(); + })({ cl.text( "Github", - cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }), + .text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }), ); - } - } + }); + }); inline for (COLORS_TOP_BORDER, 0..) |color, i| { - cl.singleElem(&.{ + cl.UI(&.{ .ID("TopBorder" ++ .{i}), .layout(.{ .sizing = .{ .h = .fixed(4), .w = .grow } }), .rectangle(.{ .color = color }), - }); + })({}); } - if (cl.OPEN(&.{ + cl.UI(&.{ .ID("ScrollContainerBackgroundRectangle"), .scroll(.{ .vertical = true }), .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }), .rectangle(.{ .color = COLOR_LIGHT }), .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }), - })) { - defer cl.CLOSE(); + })({ if (!mobileScreen) { landingPageDesktop(); featureBlocksDesktop(); @@ -567,8 +527,8 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) { highPerformancePageMobile(lerp_value); rendererPageMobile(); } - } - } + }); + }); return cl.endLayout(); } @@ -590,8 +550,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 @@ -601,7 +561,7 @@ pub fn main() anyerror!void { }); rl.initWindow(1000, 1000, "Raylib zig Example"); rl.setWindowMinSize(300, 100); - rl.setTargetFPS(120); + rl.setTargetFPS(60); // load assets loadFont(@embedFile("resources/Calistoga-Regular.ttf"), FONT_ID_TITLE_56, 56); diff --git a/examples/clay-official-website/src/raylib_render_clay.zig b/examples/clay-official-website/src/raylib_render_clay.zig index 8cdc865..8e60616 100644 --- a/examples/clay-official-website/src/raylib_render_clay.zig +++ b/examples/clay-official-website/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 }, } 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 = .{ 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 0fe1d6d..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,42 +483,28 @@ pub const renderCommandArrayGet = cdefs.Clay_RenderCommandArray_Get; pub const setDebugModeEnabled = cdefs.Clay_SetDebugModeEnabled; pub const hashString = cdefs.Clay__HashString; -threadlocal var nesting_level: i32 = 0; +pub fn createArenaWithCapacityAndMemory(buffer: []u8) Arena { + return cdefs.Clay_CreateArenaWithCapacityAndMemory(@intCast(buffer.len), buffer.ptr); +} -pub fn OPEN(configs: []const Config) bool { +pub inline fn UI(configs: []const Config) fn (void) void { cdefs.Clay__OpenElement(); - nesting_level += 1; for (configs) |config| { switch (config) { - .Layout => |layoutConf| cdefs.Clay__AttachLayoutConfig(layoutConf), + .layout_config => |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, tag| cdefs.Clay__AttachElementConfig(@unionInit(ElementConfigUnion, @tagName(tag), elem_config), config), } } 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", .{}); - } - cdefs.Clay__CloseElement(); -} - -pub fn singleElem(configs: []const Config) void { - _ = OPEN(configs); - CLOSE(); + return struct { + fn f(_: void) void { + cdefs.Clay__CloseElement(); + } + }.f; } 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,7 +532,7 @@ pub fn makeClayString(string: []const u8) String { } pub fn text(string: []const u8, config: Config) void { - cdefs.Clay__OpenTextElement(makeClayString(string), config.Text); + cdefs.Clay__OpenTextElement(makeClayString(string), config.text_config); } pub fn ID(string: []const u8) ElementId {