dergrimm/clay-zig-bindings
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3 from johan0A/new-layout-api

Browse source 
New layout api
This commit is contained in:
johan0A 2025-01-14 02:16:12 +01:00 • committed by GitHub
commit b8586ecb78
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 544 additions and 529 deletions
Download patch file Download diff file Expand all files Collapse all files

80
README.md
View file

@ -3,7 +3,7 @@
![Screenshot from 2025-01-07 17-05-01](https://github.com/user-attachments/assets/8f38e8bf-00aa-4e16-be96-b7a0d81f4313) ![Screenshot from 2025-01-07 17-05-01](https://github.com/user-attachments/assets/8f38e8bf-00aa-4e16-be96-b7a0d81f4313)
> [!IMPORTANT] > [!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] > [!NOTE]
> This project is currently in beta. > 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. 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. Some differences between the C API and the Zig bindings include:
other changes include:
- minor naming changes - 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` - 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: In Zig:
```Zig ```Zig
if (clay.OPEN(&.{ // first function call to open the scope clay.UI(&.{ // function call to open the scope
.ID("SideBar"), .ID("SideBar"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -50,10 +48,9 @@ if (clay.OPEN(&.{ // first function call to open the scope
.child_gap = 16, .child_gap = 16,
}), }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
})) { })({
defer clay.CLOSE(); // defered second function call to close the scope
// Child elements here // Child elements here
} });
``` ```
## install ## 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). 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 ```zig
const min_memory_size: u32 = clay.minMemorySize(); const min_memory_size: u32 = cl.minMemorySize();
const memory = try allocator.alloc(u8, min_memory_size); const memory = try allocator.alloc(u8, min_memory_size);
defer allocator.free(memory); 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. 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. 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 ```Zig
const light_grey: clay.Color = .{ 224, 215, 210, 255 }; const light_grey: cl.Color = .{ 224, 215, 210, 255 };
const red: clay.Color = .{ 168, 66, 28, 255 }; const red: cl.Color = .{ 168, 66, 28, 255 };
const orange: clay.Color = .{ 225, 138, 50, 255 }; const orange: cl.Color = .{ 225, 138, 50, 255 };
const white: clay.Color = .{ 250, 250, 255, 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: cl.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } };
const sidebar_item_layout: clay.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } };
// Re-useable components are just normal functions // Re-useable components are just normal functions
fn sidebarItemComponent(index: usize) void { fn sidebarItemComponent(index: usize) void {
clay.singleElem(&.{ cl.UI(&.{
.IDI("SidebarBlob", @intCast(index)), .IDI("SidebarBlob", @intCast(index)),
.layout(sidebar_item_layout), .layout(sidebar_item_layout),
.rectangle(.{ .color = orange }), .rectangle(.{ .color = orange }),
}); })({});
} }
// An example function to begin the "root" of your layout tree // An example function to begin the "root" of your layout tree
fn createLayout(profile_picture: *const rl.Texture2D) clay.ClayArray(clay.RenderCommand) { fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderCommand) {
clay.beginLayout(); cl.beginLayout();
if (clay.OPEN(&.{ cl.UI(&.{
.ID("OuterContainer"), .ID("OuterContainer"),
.layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .child_gap = 16 }), .layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .child_gap = 16 }),
.rectangle(.{ .color = white }), .rectangle(.{ .color = white }),
})) { })({
defer clay.CLOSE(); cl.UI(&.{
if (clay.OPEN(&.{
.ID("SideBar"), .ID("SideBar"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.sizing = .{ .h = .grow, .w = .fixed(300) }, .sizing = .{ .h = .grow, .w = .fixed(300) },
.padding = .all(16), .padding = .all(16),
.child_gap = 16,
.child_alignment = .{ .x = .CENTER, .y = .TOP }, .child_alignment = .{ .x = .CENTER, .y = .TOP },
.child_gap = 16,
}), }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
})) { })({
defer clay.CLOSE(); cl.UI(&.{
if (clay.OPEN(&.{
.ID("ProfilePictureOuter"), .ID("ProfilePictureOuter"),
.rectangle(.{ .color = red }),
.layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .child_alignment = .{ .x = .LEFT, .y = .CENTER }, .child_gap = 16 }), .layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .child_alignment = .{ .x = .LEFT, .y = .CENTER }, .child_gap = 16 }),
})) { .rectangle(.{ .color = red }),
defer clay.CLOSE(); })({
clay.singleElem(&.{ cl.UI(&.{
.ID("ProfilePicture"), .ID("ProfilePicture"),
.layout(.{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } }), .layout(.{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } }),
.image(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @ptrCast(profile_picture) }), .image(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @ptrCast(profile_picture) }),
})({});
cl.text("Clay - UI Library", .text(.{ .font_size = 24, .color = light_grey }));
}); });
clay.text("Clay - UI Library", clay.Config.text(.{ .font_size = 24, .color = light_grey }));
}
for (0..5) |i| sidebarItemComponent(i); for (0..5) |i| sidebarItemComponent(i);
} });
if (clay.OPEN(&.{ cl.UI(&.{
.ID("MainContent"), .ID("MainContent"),
.layout(.{ .sizing = .grow }), .layout(.{ .sizing = .grow }),
.rectangle(.{ .color = light_grey }), .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 render_command = clay.renderCommandArrayGet(render_commands, @intCast(i));
const bounding_box = render_command.bounding_box; const bounding_box = render_command.bounding_box;
switch (render_command.command_type) { switch (render_command.command_type) {
.None => {}, .none => {},
.Text => { .text => {
... ...
``` ```

4
build.zig.zon
View file

@ -3,8 +3,8 @@
.version = "0.0.0", .version = "0.0.0",
.dependencies = .{ .dependencies = .{
.clay = .{ .clay = .{
.url = "https://github.com/nicbarker/clay/archive/refs/tags/v0.12.tar.gz", .url = "https://github.com/nicbarker/clay/archive/afba9f0de668c0b63fd94fbd62adb66485b9bc13.tar.gz",
.hash = "122055df7dec6a04ca71af24026f3e7a00b41f39c17c763ef6086adb2eddab3ac17d", .hash = "122032ed1ca5afaf896850aae7e1f007bf6cbc1d81bc981ed32ccbe0d932674f25f7",
}, },
}, },
.paths = .{ .paths = .{

4
examples/clay-official-website/build.zig.zon
View file

@ -6,8 +6,8 @@
.path = "../../", .path = "../../",
}, },
.@"raylib-zig" = .{ .@"raylib-zig" = .{
.url = "https://github.com/Not-Nik/raylib-zig/archive/35332edacf2e03236220f12a8dd3410b1c39d9eb.tar.gz", .url = "https://github.com/Not-Nik/raylib-zig/archive/ab6f1566bcb21f98b06fbccf17c57a9c4711482b.tar.gz",
.hash = "1220c34fe472645e173a7168eb513ca8343af3c3f61b618daedda30ec3932b002637", .hash = "12207f719c1fa181d79ff174f476281e6b13610e4430d8e5b8453b43d6e62712b45f",
}, },
}, },
.paths = .{ .paths = .{

342
examples/clay-official-website/src/main.zig
View file

@ -54,24 +54,23 @@ const border_data = cl.BorderData{ .width = 2, .color = COLOR_RED };
var window_height: isize = 0; var window_height: isize = 0;
var window_width: 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 { 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(&.{ cl.UI(&.{
.IDI("HeroBlob", index), .IDI("HeroBlob", index),
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }),
.border(.outside(color, 2, 10)), .border(.outside(color, 2, 10)),
})) { })({
defer cl.CLOSE(); cl.UI(&.{
cl.singleElem(&.{
.IDI("CheckImage", index), .IDI("CheckImage", index),
.layout(.{ .sizing = .{ .w = .fixed(image_size) } }), .layout(.{ .sizing = .{ .w = .fixed(image_size) } }),
.image(.{ .image_data = image, .source_dimensions = .{ .w = 128, .h = 128 } }), .image(.{ .image_data = image, .source_dimensions = .{ .w = 128, .h = 128 } }),
})({});
cl.text(text, .text(.{ .font_size = font_size, .font_id = font_id, .color = color }));
}); });
cl.text(text, cl.Config.text(.{ .font_size = font_size, .font_id = font_id, .color = color }));
}
} }
fn landingPageDesktop() void { fn landingPageDesktop() void {
if (cl.OPEN(&.{ cl.UI(&.{
.ID("LandingPage1Desktop"), .ID("LandingPage1Desktop"),
.layout(.{ .layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) }, .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
@ -79,9 +78,8 @@ fn landingPageDesktop() void {
.padding = .{ .x = 50 }, .padding = .{ .x = 50 },
.child_gap = 16, .child_gap = 16,
}), }),
})) { })({
defer cl.CLOSE(); cl.UI(&.{
if (cl.OPEN(&.{
.ID("LandingPage1"), .ID("LandingPage1"),
.layout(.{ .layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) }, .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
@ -91,53 +89,49 @@ fn landingPageDesktop() void {
.child_gap = 32, .child_gap = 32,
}), }),
.border(.{ .left = border_data, .right = border_data }), .border(.{ .left = border_data, .right = border_data }),
})) { })({
defer cl.CLOSE(); 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);
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(&.{ cl.UI(&.{
.ID("ClayPresentation"), .ID("ClayPresentation"),
.layout(.{ .layout(.{
.sizing = .grow, .sizing = .grow,
.child_alignment = .{ .y = .CENTER }, .child_alignment = .{ .y = .CENTER },
.child_gap = 16, .child_gap = 16,
}), }),
})) { })({
defer cl.CLOSE(); cl.UI(&.{
if (cl.OPEN(&.{
.ID("LeftText"), .ID("LeftText"),
.layout(.{ .sizing = .{ .w = .percent(0.55) }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }), .layout(.{ .sizing = .{ .w = .percent(0.55) }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }),
})) { })({
defer cl.CLOSE();
cl.text( cl.text(
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.", "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( cl.text(
"Clay is laying out this webpage .right now!", "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"), .ID("HeroImageOuter"),
.layout(.{ .sizing = .{ .w = .percent(0.45) }, .direction = .TOP_TO_BOTTOM, .child_alignment = .{ .x = .CENTER }, .child_gap = 16 }), .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(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(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(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(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(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, 32, 480, "Compile to 15kb .wasm", &checkImage1); });
} });
} });
} });
}
} }
fn landingPageMobile() void { fn landingPageMobile() void {
if (cl.OPEN(&.{ cl.UI(&.{
.ID("LandingPage1Mobile"), .ID("LandingPage1Mobile"),
.layout(.{ .layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) }, .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
@ -146,42 +140,39 @@ fn landingPageMobile() void {
.padding = .{ .x = 16, .y = 32 }, .padding = .{ .x = 16, .y = 32 },
.child_gap = 16, .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);
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(&.{
if (cl.OPEN(&.{
.ID("LeftText"), .ID("LeftText"),
.layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }), .layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }),
})) { })({
defer cl.CLOSE();
cl.text( cl.text(
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.", "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( cl.text(
"Clay is laying out this webpage .right now!", "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"), .ID("HeroImageOuter"),
.layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .child_alignment = .{ .x = .CENTER }, .child_gap = 16 }), .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(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(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(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(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(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 { 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 }); 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"), .ID("HFileBoxOuter"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -190,20 +181,18 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
.padding = .{ .x = outer_padding, .y = 32 }, .padding = .{ .x = outer_padding, .y = 32 },
.child_gap = 8, .child_gap = 8,
}), }),
})) { })({
defer cl.CLOSE(); cl.UI(&.{
if (cl.OPEN(&.{
.ID("HFileIncludeOuter"), .ID("HFileIncludeOuter"),
.layout(.{ .padding = .{ .x = 8, .y = 4 } }), .layout(.{ .padding = .{ .x = 8, .y = 4 } }),
.rectangle(.{ .color = COLOR_RED, .corner_radius = .all(8) }), .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("#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("~2000 lines of C99.", text_config);
cl.text("Zero dependencies, including no C standard library", text_config); cl.text("Zero dependencies, including no C standard library", text_config);
} });
if (cl.OPEN(&.{ cl.UI(&.{
.ID("BringYourOwnRendererOuter"), .ID("BringYourOwnRendererOuter"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -212,84 +201,77 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
.padding = .{ .x = outer_padding, .y = 32 }, .padding = .{ .x = outer_padding, .y = 32 },
.child_gap = 8, .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("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("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); cl.text("Flexible output for easy compositing in your custom engine or environment.", text_config);
} });
} }
fn featureBlocksDesktop() void { fn featureBlocksDesktop() void {
if (cl.OPEN(&.{ cl.UI(&.{
.ID("FeatureBlocksOuter"), .ID("FeatureBlocksOuter"),
.layout(.{ .layout(.{
.sizing = .{ .w = .grow }, .sizing = .{ .w = .grow },
.child_alignment = .{ .y = .CENTER }, .child_alignment = .{ .y = .CENTER },
}), }),
.border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }), .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }),
})) { })({
defer cl.CLOSE();
featureBlocks(.percent(0.5), 50); featureBlocks(.percent(0.5), 50);
} });
} }
fn featureBlocksMobile() void { fn featureBlocksMobile() void {
if (cl.OPEN(&.{ cl.UI(&.{
.ID("FeatureBlocksOuter"), .ID("FeatureBlocksOuter"),
.layout(.{ .layout(.{
.sizing = .{ .w = .grow }, .sizing = .{ .w = .grow },
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
}), }),
.border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }), .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }),
})) { })({
defer cl.CLOSE();
featureBlocks(.grow, 16); featureBlocks(.grow, 16);
} });
} }
fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void { 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 }) })) { cl.UI(&.{ .ID("SyntaxPageLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
defer cl.CLOSE();
cl.text("Declarative Syntax", .text(title_text_config)); cl.text("Declarative Syntax", .text(title_text_config));
cl.singleElem(&.{ cl.UI(&.{
.ID("SyntaxSpacer"), .ID("SyntaxSpacer"),
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }),
}); })({});
const text_conf = cl.Config.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED }); 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("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("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); 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 } }) })) { cl.UI(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({
defer cl.CLOSE(); cl.UI(&.{
cl.singleElem(&.{
.ID("SyntaxPageRightImage"), .ID("SyntaxPageRightImage"),
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 568 }) } }), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 568 }) } }),
.image(.{ .image_data = &syntaxImage, .source_dimensions = .{ .h = 1136, .w = 1194 } }), .image(.{ .image_data = &syntaxImage, .source_dimensions = .{ .h = 1136, .w = 1194 } }),
})({});
}); });
} }
}
fn declarativeSyntaxPageDesktop() void { fn declarativeSyntaxPageDesktop() void {
if (cl.OPEN(&.{ cl.UI(&.{
.ID("SyntaxPageDesktop"), .ID("SyntaxPageDesktop"),
.layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .child_alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 } }), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .child_alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 } }),
})) { })({
defer cl.CLOSE(); cl.UI(&.{
if (cl.OPEN(&.{
.ID("SyntaxPage"), .ID("SyntaxPage"),
.layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(32), .child_gap = 32 }), .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 } }), .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)); declarativeSyntaxPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .percent(0.5));
} });
} });
} }
fn declarativeSyntaxPageMobile() void { fn declarativeSyntaxPageMobile() void {
if (cl.OPEN(&.{ cl.UI(&.{
.ID("SyntaxPageMobile"), .ID("SyntaxPageMobile"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -298,10 +280,9 @@ fn declarativeSyntaxPageMobile() void {
.padding = .{ .x = 16, .y = 32 }, .padding = .{ .x = 16, .y = 32 },
.child_gap = 16, .child_gap = 16,
}), }),
})) { })({
defer cl.CLOSE();
declarativeSyntaxPage(.{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_RED }, .grow); 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 { 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."; 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 { 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 }) })) { cl.UI(&.{ .ID("PerformanceLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
defer cl.CLOSE();
cl.text("High Performance", .text(title_text_tonfig)); 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( cl.text(
"Fast enough to recompute your entire UI every frame.", "Fast enough to recompute your entire UI every frame.",
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }), .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.", "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 }), .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 } }) })) { cl.UI(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({
defer cl.CLOSE(); cl.UI(&.{
if (cl.OPEN(&.{
.ID("PerformanceRightBorder"), .ID("PerformanceRightBorder"),
.layout(.{ .sizing = .{ .w = .grow, .h = .fixed(400) } }), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(400) } }),
.border(.all(COLOR_LIGHT, 2, 0)), .border(.all(COLOR_LIGHT, 2, 0)),
})) { })({
defer cl.CLOSE(); cl.UI(&.{
if (cl.OPEN(&.{
.ID("AnimationDemoContainerLeft"), .ID("AnimationDemoContainerLeft"),
.layout(.{ .sizing = .{ .w = .percent(0.35 + 0.3 * lerp_value), .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(16) }), .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) }), .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 })); 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"), .ID("AnimationDemoContainerRight"),
.layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(16) }), .layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(16) }),
.rectangle(.{ .color = colorLerp(COLOR_ORANGE, COLOR_RED, lerp_value) }), .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 })); cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT }));
} });
} });
} });
} }
fn highPerformancePageDesktop(lerp_value: f32) void { fn highPerformancePageDesktop(lerp_value: f32) void {
if (cl.OPEN(&.{ cl.UI(&.{
.ID("PerformanceDesktop"), .ID("PerformanceDesktop"),
.layout(.{ .layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
@ -366,14 +342,13 @@ fn highPerformancePageDesktop(lerp_value: f32) void {
.child_gap = 64, .child_gap = 64,
}), }),
.rectangle(.{ .color = COLOR_RED }), .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)); highPerformancePage(lerp_value, .{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_LIGHT }, .percent(0.5));
} });
} }
fn highPerformancePageMobile(lerp_value: f32) void { fn highPerformancePageMobile(lerp_value: f32) void {
if (cl.OPEN(&.{ cl.UI(&.{
.ID("PerformanceMobile"), .ID("PerformanceMobile"),
.layout( .layout(
.{ .{
@ -385,41 +360,36 @@ fn highPerformancePageMobile(lerp_value: f32) void {
}, },
), ),
.rectangle(.{ .color = COLOR_RED }), .rectangle(.{ .color = COLOR_RED }),
})) { })({
defer cl.CLOSE();
highPerformancePage(lerp_value, .{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_LIGHT }, .grow); highPerformancePage(lerp_value, .{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_LIGHT }, .grow);
} });
} }
fn rendererButtonActive(text: []const u8) void { fn rendererButtonActive(text: []const u8) void {
if (cl.OPEN(&.{ cl.UI(&.{
.layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }), .layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }),
.rectangle(.{ .color = COLOR_RED, .corner_radius = .all(10) }), .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 })); cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_LIGHT }));
} });
} }
fn rendererButtonInactive(index: u32, text: []const u8) void { fn rendererButtonInactive(index: u32, text: []const u8) void {
if (cl.OPEN(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })) { cl.UI(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })({
defer cl.CLOSE(); cl.UI(&.{
if (cl.OPEN(&.{
.ID("RendererButtonInactiveInner", index), .ID("RendererButtonInactiveInner", index),
.layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }), .layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }),
.rectangle(.{ .color = COLOR_LIGHT, .corner_radius = .all(10) }), .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 })); 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 { 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 }) })) { cl.UI(&.{ .ID("RendererLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
defer cl.CLOSE();
cl.text("Renderer & Platform Agnostic", .text(title_text_config)); 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( cl.text(
"Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.", "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 }), .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 }), .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
); );
cl.text( 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 }), .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
); );
} });
if (cl.OPEN(&.{ cl.UI(&.{
.ID("RendererRightText"), .ID("RendererRightText"),
.layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER }, .direction = .TOP_TO_BOTTOM, .child_gap = 16 }), .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.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"); rendererButtonActive("Raylib Renderer");
} });
} }
fn rendererPageDesktop() void { fn rendererPageDesktop() void {
if (cl.OPEN(&.{ cl.UI(&.{
.ID("RendererPageDesktop"), .ID("RendererPageDesktop"),
.layout(.{ .layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
.child_alignment = .{ .y = .CENTER }, .child_alignment = .{ .y = .CENTER },
.padding = .{ .x = 50 }, .padding = .{ .x = 50 },
}), }),
})) { })({
defer cl.CLOSE(); cl.UI(&.{
if (cl.OPEN(&.{
.ID("RendererPage"), .ID("RendererPage"),
.layout(.{ .sizing = .grow, .child_alignment = .{ .y = .CENTER }, .padding = .all(32), .child_gap = 32 }), .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 } }), .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)); rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .percent(0.5));
} });
} });
} }
fn rendererPageMobile() void { fn rendererPageMobile() void {
if (cl.OPEN(&.{ cl.UI(&.{
.ID("RendererMobile"), .ID("RendererMobile"),
.layout( .layout(
.{ .{
@ -478,23 +445,21 @@ fn rendererPageMobile() void {
}, },
), ),
.rectangle(.{ .color = COLOR_LIGHT }), .rectangle(.{ .color = COLOR_LIGHT }),
})) { })({
defer cl.CLOSE();
rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .grow); rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .grow);
} });
} }
fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) { fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
const mobileScreen = window_width < 750; const mobileScreen = window_width < 750;
cl.beginLayout(); cl.beginLayout();
if (cl.OPEN(&.{ cl.UI(&.{
.ID("OuterContainer"), .ID("OuterContainer"),
.layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }), .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }),
.rectangle(.{ .color = COLOR_LIGHT }), .rectangle(.{ .color = COLOR_LIGHT }),
})) { })({
defer cl.CLOSE(); cl.UI(&.{
if (cl.OPEN(&.{
.ID("Header"), .ID("Header"),
.layout(.{ .layout(.{
.sizing = .{ .h = .fixed(50), .w = .grow }, .sizing = .{ .h = .fixed(50), .w = .grow },
@ -502,27 +467,24 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
.padding = .{ .x = 32 }, .padding = .{ .x = 32 },
.child_gap = 24, .child_gap = 24,
}), }),
})) { })({
defer cl.CLOSE(); cl.text("Clay", .text(.{
cl.text("Clay", cl.Config.text(.{
.font_id = FONT_ID_BODY_24, .font_id = FONT_ID_BODY_24,
.font_size = 24, .font_size = 24,
.color = .{ 61, 26, 5, 255 }, .color = .{ 61, 26, 5, 255 },
})); }));
cl.singleElem(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) }); cl.UI(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) })({});
if (!mobileScreen) { if (!mobileScreen) {
if (cl.OPEN(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })) { cl.UI(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })({
defer cl.CLOSE(); cl.text("Examples", .text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }));
cl.text("Examples", cl.Config.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 } }) })({
if (cl.OPEN(&.{ .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 } }));
defer cl.CLOSE(); });
cl.text("Docs", cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }));
}
} }
if (cl.OPEN(&.{ cl.UI(&.{
.ID("LinkGithubOuter"), .ID("LinkGithubOuter"),
.layout(.{ .padding = .{ .x = 32, .y = 6 } }), .layout(.{ .padding = .{ .x = 32, .y = 6 } }),
.border(.outside(COLOR_RED, 2, 10)), .border(.outside(COLOR_RED, 2, 10)),
@ -530,30 +492,28 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
.corner_radius = .all(10), .corner_radius = .all(10),
.color = if (cl.pointerOver(cl.getElementId("LinkGithubOuter"))) COLOR_LIGHT_HOVER else COLOR_LIGHT, .color = if (cl.pointerOver(cl.getElementId("LinkGithubOuter"))) COLOR_LIGHT_HOVER else COLOR_LIGHT,
}), }),
})) { })({
defer cl.CLOSE();
cl.text( cl.text(
"Github", "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| { inline for (COLORS_TOP_BORDER, 0..) |color, i| {
cl.singleElem(&.{ cl.UI(&.{
.ID("TopBorder" ++ .{i}), .ID("TopBorder" ++ .{i}),
.layout(.{ .sizing = .{ .h = .fixed(4), .w = .grow } }), .layout(.{ .sizing = .{ .h = .fixed(4), .w = .grow } }),
.rectangle(.{ .color = color }), .rectangle(.{ .color = color }),
}); })({});
} }
if (cl.OPEN(&.{ cl.UI(&.{
.ID("ScrollContainerBackgroundRectangle"), .ID("ScrollContainerBackgroundRectangle"),
.scroll(.{ .vertical = true }), .scroll(.{ .vertical = true }),
.layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }), .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }),
.rectangle(.{ .color = COLOR_LIGHT }), .rectangle(.{ .color = COLOR_LIGHT }),
.border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }), .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }),
})) { })({
defer cl.CLOSE();
if (!mobileScreen) { if (!mobileScreen) {
landingPageDesktop(); landingPageDesktop();
featureBlocksDesktop(); featureBlocksDesktop();
@ -567,8 +527,8 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
highPerformancePageMobile(lerp_value); highPerformancePageMobile(lerp_value);
rendererPageMobile(); rendererPageMobile();
} }
} });
} });
return cl.endLayout(); return cl.endLayout();
} }
@ -590,8 +550,8 @@ pub fn main() anyerror!void {
const min_memory_size: u32 = cl.minMemorySize(); const min_memory_size: u32 = cl.minMemorySize();
const memory = try allocator.alloc(u8, min_memory_size); const memory = try allocator.alloc(u8, min_memory_size);
defer allocator.free(memory); defer allocator.free(memory);
const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(min_memory_size, @ptrCast(memory)); const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(memory);
cl.initialize(arena, .{ .h = 1000, .w = 1000 }); _ = cl.initialize(arena, .{ .h = 1000, .w = 1000 }, .{});
cl.setMeasureTextFunction(renderer.measureText); cl.setMeasureTextFunction(renderer.measureText);
// init raylib // init raylib
@ -601,7 +561,7 @@ pub fn main() anyerror!void {
}); });
rl.initWindow(1000, 1000, "Raylib zig Example"); rl.initWindow(1000, 1000, "Raylib zig Example");
rl.setWindowMinSize(300, 100); rl.setWindowMinSize(300, 100);
rl.setTargetFPS(120); rl.setTargetFPS(60);
// load assets // load assets
loadFont(@embedFile("resources/Calistoga-Regular.ttf"), FONT_ID_TITLE_56, 56); loadFont(@embedFile("resources/Calistoga-Regular.ttf"), FONT_ID_TITLE_56, 56);

34
examples/clay-official-website/src/raylib_render_clay.zig
View file

@ -20,25 +20,25 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
const render_command = cl.renderCommandArrayGet(render_commands, @intCast(i)); const render_command = cl.renderCommandArrayGet(render_commands, @intCast(i));
const bounding_box = render_command.bounding_box; const bounding_box = render_command.bounding_box;
switch (render_command.command_type) { switch (render_command.command_type) {
.None => {}, .none => {},
.Text => { .text => {
const text = render_command.text.chars[0..@intCast(render_command.text.length)]; 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); defer allocator.free(cloned);
const fontToUse: rl.Font = raylib_fonts[render_command.config.text_element_config.font_id].?; const fontToUse: rl.Font = raylib_fonts[render_command.config.text_config.font_id].?;
rl.setTextLineSpacing(render_command.config.text_element_config.line_height); rl.setTextLineSpacing(render_command.config.text_config.line_height);
rl.drawTextEx( rl.drawTextEx(
fontToUse, fontToUse,
@ptrCast(@alignCast(cloned.ptr)), @ptrCast(@alignCast(cloned.ptr)),
rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y }, rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y },
@floatFromInt(render_command.config.text_element_config.font_size), @floatFromInt(render_command.config.text_config.font_size),
@floatFromInt(render_command.config.text_element_config.letter_spacing), @floatFromInt(render_command.config.text_config.letter_spacing),
clayColorToRaylibColor(render_command.config.text_element_config.color), clayColorToRaylibColor(render_command.config.text_config.color),
); );
}, },
.Image => { .image => {
const image_texture: *const rl.Texture2D = @ptrCast( 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( rl.drawTextureEx(
image_texture.*, image_texture.*,
@ -48,7 +48,7 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
rl.Color.white, rl.Color.white,
); );
}, },
.ScissorStart => { .scissor_start => {
rl.beginScissorMode( rl.beginScissorMode(
@intFromFloat(math.round(bounding_box.x)), @intFromFloat(math.round(bounding_box.x)),
@intFromFloat(math.round(bounding_box.y)), @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)), @intFromFloat(math.round(bounding_box.height)),
); );
}, },
.ScissorEnd => rl.endScissorMode(), .scissor_end => rl.endScissorMode(),
.Rectangle => { .rectangle => {
const config = render_command.config.rectangle_element_config; const config = render_command.config.rectangle_config;
if (config.corner_radius.top_left > 0) { if (config.corner_radius.top_left > 0) {
const radius: f32 = (config.corner_radius.top_left * 2) / @min(bounding_box.width, bounding_box.height); const radius: f32 = (config.corner_radius.top_left * 2) / @min(bounding_box.width, bounding_box.height);
rl.drawRectangleRounded( rl.drawRectangleRounded(
@ -82,8 +82,8 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
); );
} }
}, },
.Border => { .border => {
const config = render_command.config.border_element_config; const config = render_command.config.border_config;
if (config.left.width > 0) { if (config.left.width > 0) {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(math.round(bounding_box.x)), @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 // Implement custom element rendering here
}, },
} }

4
examples/raylib-sidebar-container/build.zig.zon
View file

@ -6,8 +6,8 @@
.path = "../../", .path = "../../",
}, },
.@"raylib-zig" = .{ .@"raylib-zig" = .{
.url = "https://github.com/Not-Nik/raylib-zig/archive/35332edacf2e03236220f12a8dd3410b1c39d9eb.tar.gz", .url = "https://github.com/Not-Nik/raylib-zig/archive/ab6f1566bcb21f98b06fbccf17c57a9c4711482b.tar.gz",
.hash = "1220c34fe472645e173a7168eb513ca8343af3c3f61b618daedda30ec3932b002637", .hash = "12207f719c1fa181d79ff174f476281e6b13610e4430d8e5b8453b43d6e62712b45f",
}, },
}, },
.paths = .{ .paths = .{

40
examples/raylib-sidebar-container/src/main.zig
View file

@ -12,23 +12,22 @@ const sidebar_item_layout: cl.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .f
// Re-useable components are just normal functions // Re-useable components are just normal functions
fn sidebarItemComponent(index: usize) void { fn sidebarItemComponent(index: usize) void {
cl.singleElem(&.{ cl.UI(&.{
.IDI("SidebarBlob", @intCast(index)), .IDI("SidebarBlob", @intCast(index)),
.layout(sidebar_item_layout), .layout(sidebar_item_layout),
.rectangle(.{ .color = orange }), .rectangle(.{ .color = orange }),
}); })({});
} }
// An example function to begin the "root" of your layout tree // An example function to begin the "root" of your layout tree
fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderCommand) { fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderCommand) {
cl.beginLayout(); cl.beginLayout();
if (cl.OPEN(&.{ cl.UI(&.{
.ID("OuterContainer"), .ID("OuterContainer"),
.layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .child_gap = 16 }), .layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .child_gap = 16 }),
.rectangle(.{ .color = white }), .rectangle(.{ .color = white }),
})) { })({
defer cl.CLOSE(); cl.UI(&.{
if (cl.OPEN(&.{
.ID("SideBar"), .ID("SideBar"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -38,34 +37,31 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
.child_gap = 16, .child_gap = 16,
}), }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
})) { })({
defer cl.CLOSE(); cl.UI(&.{
if (cl.OPEN(&.{
.ID("ProfilePictureOuter"), .ID("ProfilePictureOuter"),
.layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .child_alignment = .{ .x = .LEFT, .y = .CENTER }, .child_gap = 16 }), .layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .child_alignment = .{ .x = .LEFT, .y = .CENTER }, .child_gap = 16 }),
.rectangle(.{ .color = red }), .rectangle(.{ .color = red }),
})) { })({
defer cl.CLOSE(); cl.UI(&.{
cl.singleElem(&.{
.ID("ProfilePicture"), .ID("ProfilePicture"),
.layout(.{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } }), .layout(.{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } }),
.image(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @ptrCast(profile_picture) }), .image(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @ptrCast(profile_picture) }),
})({});
cl.text("Clay - UI Library", .text(.{ .font_size = 24, .color = light_grey }));
}); });
cl.text("Clay - UI Library", cl.Config.text(.{ .font_size = 24, .color = light_grey }));
}
for (0..5) |i| sidebarItemComponent(i); for (0..5) |i| sidebarItemComponent(i);
} });
if (cl.OPEN(&.{ cl.UI(&.{
.ID("MainContent"), .ID("MainContent"),
.layout(.{ .sizing = .grow }), .layout(.{ .sizing = .grow }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
})) { })({
defer cl.CLOSE();
//... //...
} });
} });
return cl.endLayout(); return cl.endLayout();
} }
@ -87,8 +83,8 @@ pub fn main() anyerror!void {
const min_memory_size: u32 = cl.minMemorySize(); const min_memory_size: u32 = cl.minMemorySize();
const memory = try allocator.alloc(u8, min_memory_size); const memory = try allocator.alloc(u8, min_memory_size);
defer allocator.free(memory); defer allocator.free(memory);
const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(min_memory_size, @ptrCast(memory)); const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(memory);
cl.initialize(arena, .{ .h = 1000, .w = 1000 }); _ = cl.initialize(arena, .{ .h = 1000, .w = 1000 }, .{});
cl.setMeasureTextFunction(renderer.measureText); cl.setMeasureTextFunction(renderer.measureText);
// init raylib // init raylib

36
examples/raylib-sidebar-container/src/raylib_render_clay.zig
View file

@ -20,25 +20,25 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
const render_command = cl.renderCommandArrayGet(render_commands, @intCast(i)); const render_command = cl.renderCommandArrayGet(render_commands, @intCast(i));
const bounding_box = render_command.bounding_box; const bounding_box = render_command.bounding_box;
switch (render_command.command_type) { switch (render_command.command_type) {
.None => {}, .none => {},
.Text => { .text => {
const text = render_command.text.chars[0..@intCast(render_command.text.length)]; 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); defer allocator.free(cloned);
const fontToUse: rl.Font = raylib_fonts[render_command.config.text_element_config.font_id].?; const fontToUse: rl.Font = raylib_fonts[render_command.config.text_config.font_id].?;
rl.setTextLineSpacing(render_command.config.text_element_config.line_height); rl.setTextLineSpacing(render_command.config.text_config.line_height);
rl.drawTextEx( rl.drawTextEx(
fontToUse, fontToUse,
@ptrCast(@alignCast(cloned.ptr)), @ptrCast(@alignCast(cloned.ptr)),
rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y }, rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y },
@floatFromInt(render_command.config.text_element_config.font_size), @floatFromInt(render_command.config.text_config.font_size),
@floatFromInt(render_command.config.text_element_config.letter_spacing), @floatFromInt(render_command.config.text_config.letter_spacing),
clayColorToRaylibColor(render_command.config.text_element_config.color), clayColorToRaylibColor(render_command.config.text_config.color),
); );
}, },
.Image => { .image => {
const image_texture: *const rl.Texture2D = @ptrCast( 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( rl.drawTextureEx(
image_texture.*, image_texture.*,
@ -48,7 +48,7 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
rl.Color.white, rl.Color.white,
); );
}, },
.ScissorStart => { .scissor_start => {
rl.beginScissorMode( rl.beginScissorMode(
@intFromFloat(math.round(bounding_box.x)), @intFromFloat(math.round(bounding_box.x)),
@intFromFloat(math.round(bounding_box.y)), @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)), @intFromFloat(math.round(bounding_box.height)),
); );
}, },
.ScissorEnd => rl.endScissorMode(), .scissor_end => rl.endScissorMode(),
.Rectangle => { .rectangle => {
const config = render_command.config.rectangle_element_config; const config = render_command.config.rectangle_config;
if (config.corner_radius.top_left > 0) { if (config.corner_radius.top_left > 0) {
const radius: f32 = (config.corner_radius.top_left * 2) / @min(bounding_box.width, bounding_box.height); const radius: f32 = (config.corner_radius.top_left * 2) / @min(bounding_box.width, bounding_box.height);
rl.drawRectangleRounded( rl.drawRectangleRounded(
@ -82,8 +82,8 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
); );
} }
}, },
.Border => { .border => {
const config = render_command.config.border_element_config; const config = render_command.config.border_config;
if (config.left.width > 0) { if (config.left.width > 0) {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(math.round(bounding_box.x)), @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 // Implement custom element rendering here
}, },
} }
@ -227,6 +227,6 @@ pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dime
return cl.Dimensions{ return cl.Dimensions{
.h = text_height, .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,
}; };
} }

517
src/root.zig
View file

@ -4,48 +4,70 @@ const builtin = @import("builtin");
/// for direct calls to the clay c library /// for direct calls to the clay c library
pub const cdefs = struct { pub const cdefs = struct {
// TODO: should use @extern instead but zls does not yet support it well and that is more important // TODO: should use @extern instead but zls does not yet support it well and that is more important
extern "c" fn Clay_MinMemorySize() u32; pub extern fn Clay_MinMemorySize() u32;
extern "c" fn Clay_CreateArenaWithCapacityAndMemory(capacity: u32, offset: [*c]u8) Arena; pub extern fn Clay_CreateArenaWithCapacityAndMemory(capacity: u32, offset: [*c]u8) Arena;
extern "c" fn Clay_SetPointerState(position: Vector2, pointer_down: bool) void; pub extern fn Clay_SetPointerState(position: Vector2, pointerDown: bool) void;
extern "c" fn Clay_Initialize(arena: Arena, layout_dimensions: Dimensions) void; pub extern fn Clay_Initialize(arena: Arena, layoutDimensions: Dimensions, errorHandler: ErrorHandler) *Context;
extern "c" fn Clay_UpdateScrollContainers(is_pointer_active: bool, scroll_delta: Vector2, delta_time: f32) void; pub extern fn Clay_GetCurrentContext() *Context;
extern "c" fn Clay_SetLayoutDimensions(dimensions: Dimensions) void; pub extern fn Clay_SetCurrentContext(context: *Context) void;
extern "c" fn Clay_BeginLayout() void; pub extern fn Clay_UpdateScrollContainers(enableDragScrolling: bool, scrollDelta: Vector2, deltaTime: f32) void;
extern "c" fn Clay_EndLayout() ClayArray(RenderCommand); pub extern fn Clay_SetLayoutDimensions(dimensions: Dimensions) void;
extern "c" fn Clay_PointerOver(id: ElementId) bool; pub extern fn Clay_BeginLayout() void;
extern "c" fn Clay_GetElementId(id: String) ElementId; pub extern fn Clay_EndLayout() ClayArray(RenderCommand);
extern "c" fn Clay_GetScrollContainerData(id: ElementId) ScrollContainerData; pub extern fn Clay_GetElementId(idString: String) ElementId;
extern "c" fn Clay_SetMeasureTextFunction(measureTextFunction: *const fn (*String, *TextElementConfig) callconv(.C) Dimensions) void; pub extern fn Clay_GetElementIdWithIndex(idString: String, index: u32) ElementId;
extern "c" fn Clay_RenderCommandArray_Get(array: *ClayArray(RenderCommand), index: i32) *RenderCommand; pub extern fn Clay_Hovered() bool;
extern "c" fn Clay_SetDebugModeEnabled(enabled: bool) void; 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; pub extern fn Clay__OpenElement() void;
extern "c" fn Clay__CloseElement() void; pub extern fn Clay__CloseElement() void;
extern "c" fn Clay__ElementPostConfiguration() void; pub extern fn Clay__StoreLayoutConfig(config: LayoutConfig) *LayoutConfig;
extern "c" fn Clay__OpenTextElement(text: String, textConfig: *TextElementConfig) void; pub extern fn Clay__ElementPostConfiguration() void;
extern "c" fn Clay__AttachId(id: ElementId) void; pub extern fn Clay__AttachId(id: ElementId) void;
extern "c" fn Clay__AttachLayoutConfig(layoutConfig: *LayoutConfig) void; pub extern fn Clay__AttachLayoutConfig(config: *LayoutConfig) void;
extern "c" fn Clay__AttachElementConfig(config: *anyopaque, type: ElementConfigType) void; pub extern fn Clay__AttachElementConfig(config: ElementConfigUnion, @"type": ElementConfigType) void;
extern "c" fn Clay__StoreLayoutConfig(config: LayoutConfig) *LayoutConfig; pub extern fn Clay__StoreRectangleElementConfig(config: RectangleElementConfig) *RectangleElementConfig;
extern "c" fn Clay__StoreRectangleElementConfig(config: RectangleElementConfig) *RectangleElementConfig; pub extern fn Clay__StoreTextElementConfig(config: TextElementConfig) *TextElementConfig;
extern "c" fn Clay__StoreTextElementConfig(config: TextElementConfig) *TextElementConfig; pub extern fn Clay__StoreImageElementConfig(config: ImageElementConfig) *ImageElementConfig;
extern "c" fn Clay__StoreImageElementConfig(config: ImageElementConfig) *ImageElementConfig; pub extern fn Clay__StoreFloatingElementConfig(config: FloatingElementConfig) *FloatingElementConfig;
extern "c" fn Clay__StoreFloatingElementConfig(config: FloatingElementConfig) *FloatingElementConfig; pub extern fn Clay__StoreCustomElementConfig(config: CustomElementConfig) *CustomElementConfig;
extern "c" fn Clay__StoreCustomElementConfig(config: CustomElementConfig) *CustomElementConfig; pub extern fn Clay__StoreScrollElementConfig(config: ScrollElementConfig) *ScrollElementConfig;
extern "c" fn Clay__StoreScrollElementConfig(config: ScrollElementConfig) *ScrollElementConfig; pub extern fn Clay__StoreBorderElementConfig(config: BorderElementConfig) *BorderElementConfig;
extern "c" fn Clay__StoreBorderElementConfig(config: BorderElementConfig) *BorderElementConfig; pub extern fn Clay__HashString(key: String, offset: u32, seed: u32) ElementId;
extern "c" fn Clay__HashString(toHash: String, index: u32, seed: u32) ElementId; pub extern fn Clay__OpenTextElement(text: String, textConfig: *TextElementConfig) void;
extern "c" fn Clay__GetOpenLayoutElementId() u32; 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 { pub const String = extern struct {
length: c_int, length: i32,
chars: [*c]c_char, chars: [*:0]const u8,
}; };
pub const Vector2 = extern struct { pub const Context = opaque {};
x: f32,
y: f32, pub const Arena = extern struct {
nextAllocation: usize,
capacity: usize,
memory: [*]u8,
}; };
pub const Dimensions = extern struct { pub const Dimensions = extern struct {
@ -53,13 +75,13 @@ pub const Dimensions = extern struct {
h: f32, h: f32,
}; };
pub const Arena = extern struct { pub const Vector2 = extern struct {
label: String, x: f32,
next_allocation: u64, y: f32,
capacity: u64,
memory: [*c]c_char,
}; };
pub const Color = [4]f32;
pub const BoundingBox = extern struct { pub const BoundingBox = extern struct {
x: f32, x: f32,
y: f32, y: f32,
@ -67,7 +89,177 @@ pub const BoundingBox = extern struct {
height: f32, 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 { pub const CornerRadius = extern struct {
top_left: f32 = 0, top_left: f32 = 0,
@ -97,50 +289,6 @@ pub const ElementId = extern struct {
string_id: String, 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 { pub const RenderCommand = extern struct {
bounding_box: BoundingBox, bounding_box: BoundingBox,
config: ElementConfigUnion, config: ElementConfigUnion,
@ -161,83 +309,32 @@ pub const ScrollContainerData = extern struct {
}; };
pub const SizingType = enum(EnumBackingType) { pub const SizingType = enum(EnumBackingType) {
FIT, FIT = 0,
GROW, GROW = 1,
PERCENT, PERCENT = 2,
FIXED, FIXED = 3,
};
pub const SizingConstraintsMinMax = extern struct {
min: f32 = 0,
max: f32 = 0,
}; };
pub const SizingConstraints = extern union { pub const SizingConstraints = extern union {
size_minmax: SizingConstraintsMinMax, size_minmax: SizingMinMax,
size_percent: f32, 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) { pub const LayoutDirection = enum(EnumBackingType) {
LEFT_TO_RIGHT = 0, LEFT_TO_RIGHT = 0,
TOP_TO_BOTTOM = 1, TOP_TO_BOTTOM = 1,
}; };
pub const LayoutAlignmentX = enum(EnumBackingType) { pub const LayoutAlignmentX = enum(EnumBackingType) {
LEFT, LEFT = 0,
RIGHT, RIGHT = 1,
CENTER, CENTER = 2,
}; };
pub const LayoutAlignmentY = enum(EnumBackingType) { pub const LayoutAlignmentY = enum(EnumBackingType) {
TOP, TOP = 0,
BOTTOM, BOTTOM = 1,
CENTER, CENTER = 2,
}; };
pub const ChildAlignment = extern struct { 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 { pub const ImageElementConfig = extern struct {
image_data: *const anyopaque, image_data: *const anyopaque,
source_dimensions: Dimensions, 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 { pub const CustomElementConfig = extern struct {
custom_data: *anyopaque, custom_data: *anyopaque,
}; };
@ -338,52 +418,49 @@ pub const ScrollElementConfig = extern struct {
}; };
pub const ElementConfigType = enum(EnumBackingType) { pub const ElementConfigType = enum(EnumBackingType) {
Rectangle = 1, rectangle_config = 1,
Border = 2, border_config = 2,
Floating = 4, floating_config = 4,
Scroll = 8, scroll_config = 8,
Image = 16, image_config = 16,
Text = 32, text_config = 32,
Custom = 64, custom_config = 64,
// zig specific enum types // zig specific enum types
id, id,
Layout, layout_config,
}; };
pub const Config = union(ElementConfigType) { pub const Config = union(ElementConfigType) {
Rectangle: *RectangleElementConfig, rectangle_config: *RectangleElementConfig,
Border: *BorderElementConfig, border_config: *BorderElementConfig,
Floating: *FloatingElementConfig, floating_config: *FloatingElementConfig,
Scroll: *ScrollElementConfig, scroll_config: *ScrollElementConfig,
Image: *ImageElementConfig, image_config: *ImageElementConfig,
Text: *TextElementConfig, text_config: *TextElementConfig,
Custom: *CustomElementConfig, custom_config: *CustomElementConfig,
id: ElementId, 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 { pub fn rectangle(config: RectangleElementConfig) Config {
return Config{ .Rectangle = cdefs.Clay__StoreRectangleElementConfig(config) }; return Config{ .rectangle_config = 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) };
} }
pub fn border(config: BorderElementConfig) 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 { pub fn ID(string: []const u8) Config {
return Config{ .id = hashString(makeClayString(string), 0, 0) }; 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 { pub fn IDI(string: []const u8, index: u32) Config {
return Config{ .id = hashString(makeClayString(string), index, 0) }; 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 minMemorySize = cdefs.Clay_MinMemorySize;
pub const createArenaWithCapacityAndMemory = cdefs.Clay_CreateArenaWithCapacityAndMemory;
pub const initialize = cdefs.Clay_Initialize; pub const initialize = cdefs.Clay_Initialize;
pub const setLayoutDimensions = cdefs.Clay_SetLayoutDimensions; pub const setLayoutDimensions = cdefs.Clay_SetLayoutDimensions;
pub const beginLayout = cdefs.Clay_BeginLayout; 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 setDebugModeEnabled = cdefs.Clay_SetDebugModeEnabled;
pub const hashString = cdefs.Clay__HashString; 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(); cdefs.Clay__OpenElement();
nesting_level += 1;
for (configs) |config| { for (configs) |config| {
switch (config) { switch (config) {
.Layout => |layoutConf| cdefs.Clay__AttachLayoutConfig(layoutConf), .layout_config => |layoutConf| cdefs.Clay__AttachLayoutConfig(layoutConf),
.id => |id| cdefs.Clay__AttachId(id), .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(); cdefs.Clay__ElementPostConfiguration();
return true; return struct {
} fn f(_: void) void {
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(); cdefs.Clay__CloseElement();
} }
}.f;
pub fn singleElem(configs: []const Config) void {
_ = OPEN(configs);
CLOSE();
} }
pub fn endLayout() ClayArray(RenderCommand) { 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(); return cdefs.Clay_EndLayout();
} }
@ -467,7 +532,7 @@ pub fn makeClayString(string: []const u8) String {
} }
pub fn text(string: []const u8, config: Config) void { 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 { pub fn ID(string: []const u8) ElementId {