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

changing layout api yet again

Browse source
This commit is contained in:
johan0A 2025-02-03 14:34:02 +01:00
parent a0fc7c7157
commit 3e4ce58fbc
4 changed files with 145 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

20
README.md
View file

@ -3,9 +3,9 @@
![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.2639+15fe99957) > Zig 0.14.0 or higher is required. (tested with zig 0.14.0-dev.2851+b074fb7dd)
> [!NOTE] > [!NOTE]
> This project is currently in beta. > This project is currently in beta.
This repository contains Zig bindings for the [clay UI layout library](https://github.com/nicbarker/clay), as well as an example implementation of the [clay website](https://nicbarker.com/clay) in Zig. This repository contains Zig bindings for the [clay UI layout library](https://github.com/nicbarker/clay), as well as an example implementation of the [clay website](https://nicbarker.com/clay) in Zig.
@ -38,7 +38,7 @@ CLAY(
In Zig: In Zig:
```Zig ```Zig
clay.UI(&.{ // function call to open the scope clay.UI()(&.{ // function call for creating a scope
.ID("SideBar"), .ID("SideBar"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -121,7 +121,7 @@ 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.UI(&.{ cl.UI()(&.{
.IDI("SidebarBlob", @intCast(index)), .IDI("SidebarBlob", @intCast(index)),
.layout(sidebar_item_layout), .layout(sidebar_item_layout),
.rectangle(.{ .color = orange }), .rectangle(.{ .color = orange }),
@ -131,12 +131,12 @@ fn sidebarItemComponent(index: usize) void {
// 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();
cl.UI(&.{ 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 }),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.ID("SideBar"), .ID("SideBar"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -147,23 +147,23 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
}), }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.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 }),
})({ })({
cl.UI(&.{ 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 })); cl.text("Clay - UI Library", .{ .font_size = 24, .color = light_grey });
}); });
for (0..5) |i| sidebarItemComponent(i); for (0..5) |i| sidebarItemComponent(i);
}); });
cl.UI(&.{ cl.UI()(&.{
.ID("MainContent"), .ID("MainContent"),
.layout(.{ .sizing = .grow }), .layout(.{ .sizing = .grow }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),

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

@ -56,22 +56,22 @@ var window_width: isize = 0;
var mobile_screen: bool = false; var mobile_screen: bool = false;
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 {
cl.UI(&.{ 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)),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.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, .{ .font_size = font_size, .font_id = font_id, .color = color });
}); });
} }
fn landingPageDesktop() void { fn landingPageDesktop() void {
cl.UI(&.{ 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) }) },
@ -80,7 +80,7 @@ fn landingPageDesktop() void {
.child_gap = 16, .child_gap = 16,
}), }),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.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) }) },
@ -93,7 +93,7 @@ fn landingPageDesktop() void {
})({ })({
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(0, 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(&.{ cl.UI()(&.{
.ID("ClayPresentation"), .ID("ClayPresentation"),
.layout(.{ .layout(.{
.sizing = .grow, .sizing = .grow,
@ -101,22 +101,22 @@ fn landingPageDesktop() void {
.child_gap = 16, .child_gap = 16,
}), }),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.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 }),
})({ })({
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.",
.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }), .{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED },
); );
cl.UI(&.{ .ID("ClayPresentation_Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) })({}); cl.UI()(&.{.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!",
.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }), .{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE },
); );
}); });
cl.UI(&.{ 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 }),
})({ })({
@ -132,7 +132,7 @@ fn landingPageDesktop() void {
} }
fn landingPageMobile() void { fn landingPageMobile() void {
cl.UI(&.{ 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) }) },
@ -143,22 +143,22 @@ fn landingPageMobile() void {
}), }),
})({ })({
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(&.{ cl.UI()(&.{
.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 }),
})({ })({
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.",
.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }), .{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED },
); );
cl.UI(&.{ .ID("LeftText_Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) })({}); cl.UI()(&.{.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!",
.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }), .{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE },
); );
}); });
cl.UI(&.{ 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 }),
})({ })({
@ -172,8 +172,8 @@ fn landingPageMobile() void {
} }
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.TextElementConfig{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_RED };
cl.UI(&.{ cl.UI()(&.{
.ID("HFileBoxOuter"), .ID("HFileBoxOuter"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -183,17 +183,17 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
.child_gap = 8, .child_gap = 8,
}), }),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.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) }),
})({ })({
cl.text("#include cl.h", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_LIGHT })); cl.text("#include cl.h", .{ .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);
}); });
cl.UI(&.{ cl.UI()(&.{
.ID("BringYourOwnRendererOuter"), .ID("BringYourOwnRendererOuter"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -203,14 +203,14 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
.child_gap = 8, .child_gap = 8,
}), }),
})({ })({
cl.text("Renderer agnostic.", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_ORANGE })); cl.text("Renderer agnostic.", .{ .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 {
cl.UI(&.{ cl.UI()(&.{
.ID("FeatureBlocksOuter"), .ID("FeatureBlocksOuter"),
.layout(.{ .layout(.{
.sizing = .{ .w = .grow }, .sizing = .{ .w = .grow },
@ -223,7 +223,7 @@ fn featureBlocksDesktop() void {
} }
fn featureBlocksMobile() void { fn featureBlocksMobile() void {
cl.UI(&.{ cl.UI()(&.{
.ID("FeatureBlocksOuter"), .ID("FeatureBlocksOuter"),
.layout(.{ .layout(.{
.sizing = .{ .w = .grow }, .sizing = .{ .w = .grow },
@ -236,19 +236,18 @@ fn featureBlocksMobile() void {
} }
fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void { fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
cl.UI(&.{ .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 }) })({
cl.text("Declarative Syntax", .text(title_text_config)); cl.text("Declarative Syntax", title_text_config);
cl.UI(&.{ cl.UI()(&.{
.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.TextElementConfig{ .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);
}); });
cl.UI(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({ cl.UI()(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({
cl.UI(&.{ cl.UI()(&.{
.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 } }),
@ -257,11 +256,11 @@ fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing:
} }
fn declarativeSyntaxPageDesktop() void { fn declarativeSyntaxPageDesktop() void {
cl.UI(&.{ 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 } }),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.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 } }),
@ -272,7 +271,7 @@ fn declarativeSyntaxPageDesktop() void {
} }
fn declarativeSyntaxPageMobile() void { fn declarativeSyntaxPageMobile() void {
cl.UI(&.{ cl.UI()(&.{
.ID("SyntaxPageMobile"), .ID("SyntaxPageMobile"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -293,48 +292,48 @@ 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 {
cl.UI(&.{ .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 }) })({
cl.text("High Performance", .text(title_text_tonfig)); cl.text("High Performance", title_text_tonfig);
cl.UI(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) })({}); cl.UI()(&.{.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 }), .{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT },
); );
cl.text( cl.text(
"Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free.", "Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free.",
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }), .{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT },
); );
cl.text( cl.text(
"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 }), .{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT },
); );
}); });
cl.UI(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({ cl.UI()(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({
cl.UI(&.{ cl.UI()(&.{
.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)),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.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) }),
})({ })({
cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT })); cl.text(LOREM_IPSUM_TEXT, .{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT });
}); });
cl.UI(&.{ 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) }),
})({ })({
cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT })); cl.text(LOREM_IPSUM_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 {
cl.UI(&.{ 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) }) },
@ -349,7 +348,7 @@ fn highPerformancePageDesktop(lerp_value: f32) void {
} }
fn highPerformancePageMobile(lerp_value: f32) void { fn highPerformancePageMobile(lerp_value: f32) void {
cl.UI(&.{ cl.UI()(&.{
.ID("PerformanceMobile"), .ID("PerformanceMobile"),
.layout( .layout(
.{ .{
@ -367,55 +366,55 @@ fn highPerformancePageMobile(lerp_value: f32) void {
} }
fn rendererButtonActive(text: []const u8) void { fn rendererButtonActive(text: []const u8) void {
cl.UI(&.{ 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) }),
})({ })({
cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_LIGHT })); cl.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 {
cl.UI(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })({ cl.UI()(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })({
cl.UI(&.{ cl.UI()(&.{
.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) }),
})({ })({
cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED })); cl.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 {
cl.UI(&.{ .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 }) })({
cl.text("Renderer & Platform Agnostic", .text(title_text_config)); cl.text("Renderer & Platform Agnostic", title_text_config);
cl.UI(&.{ .ID("RendererLeftText_Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) })({}); cl.UI()(&.{.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 }), .{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED },
); );
cl.text( cl.text(
"Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more.", "Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more.",
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }), .{ .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 }), .{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED },
); );
}); });
cl.UI(&.{ 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 }),
})({ })({
cl.text("Try changing renderer!", .text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE })); cl.text("Try changing renderer!", .{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE });
cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) })({}); cl.UI()(&.{.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } })})({});
rendererButtonActive("Raylib Renderer"); rendererButtonActive("Raylib Renderer");
}); });
} }
fn rendererPageDesktop() void { fn rendererPageDesktop() void {
cl.UI(&.{ 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) }) },
@ -423,7 +422,7 @@ fn rendererPageDesktop() void {
.padding = .{ .x = 50 }, .padding = .{ .x = 50 },
}), }),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.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 } }),
@ -434,7 +433,7 @@ fn rendererPageDesktop() void {
} }
fn rendererPageMobile() void { fn rendererPageMobile() void {
cl.UI(&.{ cl.UI()(&.{
.ID("RendererMobile"), .ID("RendererMobile"),
.layout( .layout(
.{ .{
@ -453,13 +452,12 @@ fn rendererPageMobile() void {
fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) { fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
cl.beginLayout(); cl.beginLayout();
cl.UI()(&.{
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 }),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.ID("Header"), .ID("Header"),
.layout(.{ .layout(.{
.sizing = .{ .h = .fixed(50), .w = .grow }, .sizing = .{ .h = .fixed(50), .w = .grow },
@ -468,46 +466,45 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
.child_gap = 24, .child_gap = 24,
}), }),
})({ })({
cl.text("Clay", .text(.{ cl.text("Clay", .{
.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.UI(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) })({}); cl.UI()(&.{.layout(.{ .sizing = .{ .w = .grow } })})({});
if (!mobile_screen) { if (!mobile_screen) {
cl.UI(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })({ 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.text("Examples", .{ .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.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 } })); cl.text("Docs", .{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } });
}); });
} }
cl.UI(&.{ cl.UI()(&.{
.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)),
.rectangle(.{ .rectangle(.{
.corner_radius = .all(10), .corner_radius = .all(10),
.color = if (cl.pointerOver(cl.getElementId("LinkGithubOuter"))) COLOR_LIGHT_HOVER else COLOR_LIGHT, .color = if (cl.hovered()) COLOR_LIGHT_HOVER else COLOR_LIGHT,
}), }),
})({ })({
cl.text( cl.text(
"Github", "Github",
.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }), .{ .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.UI(&.{ 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 }),
})({}); })({});
} }
cl.UI(&.{ 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 }),

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

@ -12,7 +12,7 @@ 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.UI(&.{ cl.UI()(&.{
.IDI("SidebarBlob", @intCast(index)), .IDI("SidebarBlob", @intCast(index)),
.layout(sidebar_item_layout), .layout(sidebar_item_layout),
.rectangle(.{ .color = orange }), .rectangle(.{ .color = orange }),
@ -22,12 +22,12 @@ fn sidebarItemComponent(index: usize) void {
// 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();
cl.UI(&.{ 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 }),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.ID("SideBar"), .ID("SideBar"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -38,23 +38,23 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
}), }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
})({ })({
cl.UI(&.{ cl.UI()(&.{
.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 }),
})({ })({
cl.UI(&.{ 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 })); cl.text("Clay - UI Library", .{ .font_size = 24, .color = light_grey });
}); });
for (0..5) |i| sidebarItemComponent(i); for (0..5) |i| sidebarItemComponent(i);
}); });
cl.UI(&.{ cl.UI()(&.{
.ID("MainContent"), .ID("MainContent"),
.layout(.{ .sizing = .grow }), .layout(.{ .sizing = .grow }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),

103
src/root.zig
View file

@ -21,7 +21,7 @@ pub const cdefs = struct {
pub extern fn Clay_GetElementId(idString: String) ElementId; pub extern fn Clay_GetElementId(idString: String) ElementId;
pub extern fn Clay_GetElementIdWithIndex(idString: String, index: u32) ElementId; pub extern fn Clay_GetElementIdWithIndex(idString: String, index: u32) ElementId;
pub extern fn Clay_Hovered() bool; pub extern fn Clay_Hovered() bool;
pub extern fn Clay_OnHover(onHoverFunction: ?*const fn (ElementId, PointerData, *anyopaque) callconv(.c) void, userData: *anyopaque) void; pub extern fn Clay_OnHover(onHoverFunction: *const fn (ElementId, PointerData, *anyopaque) callconv(.c) void, userData: *anyopaque) void;
pub extern fn Clay_PointerOver(elementId: ElementId) bool; pub extern fn Clay_PointerOver(elementId: ElementId) bool;
pub extern fn Clay_GetScrollContainerData(id: ElementId) ScrollContainerData; 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_SetMeasureTextFunction(measureTextFunction: *const fn (*String, *TextElementConfig) callconv(.c) Dimensions) void;
@ -425,54 +425,66 @@ pub const ElementConfigType = enum(EnumBackingType) {
image_config = 16, image_config = 16,
text_config = 32, text_config = 32,
custom_config = 64, custom_config = 64,
// zig specific enum types
id,
layout_config,
}; };
pub const Config = union(ElementConfigType) { pub const Attach = struct {
rectangle_config: *RectangleElementConfig, pub fn rectangle(config: RectangleElementConfig) Attach {
border_config: *BorderElementConfig, cdefs.Clay__AttachElementConfig(ElementConfigUnion{ .rectangle_config = cdefs.Clay__StoreRectangleElementConfig(config) }, .rectangle_config);
floating_config: *FloatingElementConfig, return .{};
scroll_config: *ScrollElementConfig,
image_config: *ImageElementConfig,
text_config: *TextElementConfig,
custom_config: *CustomElementConfig,
id: ElementId,
layout_config: *LayoutConfig,
pub fn rectangle(config: RectangleElementConfig) Config {
return Config{ .rectangle_config = cdefs.Clay__StoreRectangleElementConfig(config) };
} }
pub fn border(config: BorderElementConfig) Config { pub fn border(config: BorderElementConfig) Attach {
return Config{ .border_config = cdefs.Clay__StoreBorderElementConfig(config) }; cdefs.Clay__AttachElementConfig(ElementConfigUnion{ .border_config = cdefs.Clay__StoreBorderElementConfig(config) }, .border_config);
return .{};
} }
pub fn floating(config: FloatingElementConfig) Config { pub fn floating(config: FloatingElementConfig) Attach {
return Config{ .floating_config = cdefs.Clay__StoreFloatingElementConfig(config) }; cdefs.Clay__AttachElementConfig(ElementConfigUnion{ .floating_config = cdefs.Clay__StoreFloatingElementConfig(config) }, .floating_config);
return .{};
} }
pub fn scroll(config: ScrollElementConfig) Config { pub fn scroll(config: ScrollElementConfig) Attach {
return Config{ .scroll_config = cdefs.Clay__StoreScrollElementConfig(config) }; cdefs.Clay__AttachElementConfig(ElementConfigUnion{ .scroll_config = cdefs.Clay__StoreScrollElementConfig(config) }, .scroll_config);
return .{};
} }
pub fn image(config: ImageElementConfig) Config { pub fn image(config: ImageElementConfig) Attach {
return Config{ .image_config = cdefs.Clay__StoreImageElementConfig(config) }; cdefs.Clay__AttachElementConfig(ElementConfigUnion{ .image_config = cdefs.Clay__StoreImageElementConfig(config) }, .image_config);
return .{};
} }
pub fn text(config: TextElementConfig) Config { pub fn text(config: TextElementConfig) Attach {
return Config{ .text_config = cdefs.Clay__StoreTextElementConfig(config) }; cdefs.Clay__AttachElementConfig(ElementConfigUnion{ .text_config = cdefs.Clay__StoreTextElementConfig(config) }, .text_config);
return .{};
} }
pub fn custom(config: CustomElementConfig) Config { pub fn custom(config: CustomElementConfig) Attach {
return Config{ .custom_config = cdefs.Clay__StoreCustomElementConfig(config) }; cdefs.Clay__AttachElementConfig(ElementConfigUnion{ .custom_config = cdefs.Clay__StoreCustomElementConfig(config) }, .custom_config);
return .{};
} }
pub fn ID(string: []const u8) Config { pub fn ID(string: []const u8) Attach {
return Config{ .id = cdefs.Clay__HashString(makeClayString(string), 0, 0) }; cdefs.Clay__AttachId(cdefs.Clay__HashString(makeClayString(string), 0, 0));
return .{};
} }
pub fn IDI(string: []const u8, index: u32) Config { pub fn IDI(string: []const u8, index: u32) Attach {
return Config{ .id = cdefs.Clay__HashString(makeClayString(string), index, 0) }; cdefs.Clay__AttachId(cdefs.Clay__HashString(makeClayString(string), index, 0));
return .{};
} }
pub fn layout(config: LayoutConfig) Config { pub fn layout(config: LayoutConfig) Attach {
return Config{ .layout_config = cdefs.Clay__StoreLayoutConfig(config) }; cdefs.Clay__AttachLayoutConfig(cdefs.Clay__StoreLayoutConfig(config));
return .{};
} }
}; };
pub inline fn UI() fn (configs: []const Attach) callconv(.@"inline") fn (void) void {
cdefs.Clay__OpenElement();
return struct {
inline fn f(configs: []const Attach) fn (void) void {
_ = configs;
cdefs.Clay__ElementPostConfiguration();
return struct {
fn f(_: void) void {
cdefs.Clay__CloseElement();
}
}.f;
}
}.f;
}
pub const minMemorySize = cdefs.Clay_MinMemorySize; pub const minMemorySize = cdefs.Clay_MinMemorySize;
pub const setPointerState = cdefs.Clay_SetPointerState; pub const setPointerState = cdefs.Clay_SetPointerState;
pub const initialize = cdefs.Clay_Initialize; pub const initialize = cdefs.Clay_Initialize;
@ -501,23 +513,6 @@ pub fn createArenaWithCapacityAndMemory(buffer: []u8) Arena {
return cdefs.Clay_CreateArenaWithCapacityAndMemory(@intCast(buffer.len), buffer.ptr); return cdefs.Clay_CreateArenaWithCapacityAndMemory(@intCast(buffer.len), buffer.ptr);
} }
pub inline fn UI(configs: []const Config) fn (void) void {
cdefs.Clay__OpenElement();
for (configs) |config| {
switch (config) {
.layout_config => |layoutConf| cdefs.Clay__AttachLayoutConfig(layoutConf),
.id => |id| cdefs.Clay__AttachId(id),
inline else => |elem_config, tag| cdefs.Clay__AttachElementConfig(@unionInit(ElementConfigUnion, @tagName(tag), elem_config), config),
}
}
cdefs.Clay__ElementPostConfiguration();
return struct {
fn f(_: void) void {
cdefs.Clay__CloseElement();
}
}.f;
}
pub fn setMeasureTextFunction(comptime measureTextFunction: fn ([]const u8, *TextElementConfig) Dimensions) void { pub fn setMeasureTextFunction(comptime measureTextFunction: fn ([]const u8, *TextElementConfig) Dimensions) void {
cdefs.Clay_SetMeasureTextFunction(struct { cdefs.Clay_SetMeasureTextFunction(struct {
pub fn f(string: *String, config: *TextElementConfig) callconv(.C) Dimensions { pub fn f(string: *String, config: *TextElementConfig) callconv(.C) Dimensions {
@ -533,8 +528,8 @@ pub fn makeClayString(string: []const u8) String {
}; };
} }
pub fn text(string: []const u8, config: Config) void { pub fn text(string: []const u8, config: TextElementConfig) void {
cdefs.Clay__OpenTextElement(makeClayString(string), config.text_config); cdefs.Clay__OpenTextElement(makeClayString(string), cdefs.Clay__StoreTextElementConfig(config));
} }
pub fn ID(string: []const u8) ElementId { pub fn ID(string: []const u8) ElementId {