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

revamp of the layout creation api

Browse source
This commit is contained in:
johan0A 2025-01-09 18:30:35 +01:00
parent 7d7750a95c
commit 4041037b06
4 changed files with 138 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

50
README.md
View file

@ -1,10 +1,10 @@
### Zig Bindings for clay.h ### Zig Bindings for clay.h
> [!IMPORTANT] > [!IMPORTANT]
> Zig 0.14.0 or higher is required. > Zig 0.14.0 or higher is required. (tested with zig 0.14.0-dev.2628+5b5c60f4)
> [!NOTE] > [!NOTE]
> This project currently is 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.
@ -15,7 +15,8 @@ The **most notable difference** between the C API and the Zig bindings is that o
other changes 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`
- clay.singleElem() is available to create a clay element without creating a scope
In C: In C:
```C ```C
@ -37,7 +38,7 @@ CLAY(
In Zig: In Zig:
```Zig ```Zig
clay.UI(&.{ // first function call to open the scope if (clay.OPEN(&.{ // first function call to open the scope
.ID("SideBar"), .ID("SideBar"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -47,8 +48,7 @@ clay.UI(&.{ // first function call to open the scope
.gap = 16, .gap = 16,
}), }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
}); })) {
{
defer clay.CLOSE(); // defered second function call to close the scope defer clay.CLOSE(); // defered second function call to close the scope
// Child elements here // Child elements here
} }
@ -119,30 +119,25 @@ const white: clay.Color = .{ 250, 250, 255, 255 };
// Layout config is just a struct that can be declared statically, or inline // Layout config is just a struct that can be declared statically, or inline
const sidebar_item_layout: clay.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } }; const sidebar_item_layout: clay.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } };
// Re-useable components are just normal functions // Re-useable components are just normal functions
fn sidebarItemCompoment(index: usize) void { fn sidebarItemComponent(index: usize) void {
clay.UI(&.{ clay.singleElem(&.{
.IDI("SidebarBlob", @intCast(index)), .IDI("SidebarBlob", @intCast(index)),
.layout(sidebar_item_layout), .layout(sidebar_item_layout),
.rectangle(.{ .color = orange }), .rectangle(.{ .color = orange }),
}); });
defer clay.CLOSE();
} }
// 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) clay.ClayArray(clay.RenderCommand) {
clay.beginLayout(); clay.beginLayout();
clay.UI(&.{ if (clay.OPEN(&.{
.ID("OuterContainer"), .ID("OuterContainer"),
.layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .gap = 16 }), .layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .gap = 16 }),
.rectangle(.{ .color = white }), .rectangle(.{ .color = white }),
}); })) {
{
defer clay.CLOSE(); defer clay.CLOSE();
if (clay.OPEN(&.{
clay.UI(&.{
.ID("SideBar"), .ID("SideBar"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -152,34 +147,33 @@ fn createLayout(profile_picture: *const rl.Texture2D) clay.ClayArray(clay.Render
.gap = 16, .gap = 16,
}), }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
}); })) {
{
defer clay.CLOSE(); defer clay.CLOSE();
clay.UI(&.{ if (clay.OPEN(&.{
.ID("ProfilePictureOuter"), .ID("ProfilePictureOuter"),
.layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .alignment = .{ .x = .LEFT, .y = .CENTER }, .gap = 16 }), .layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .alignment = .{ .x = .LEFT, .y = .CENTER }, .gap = 16 }),
.rectangle(.{ .color = red }), .rectangle(.{ .color = red }),
}); })) {
{
defer clay.CLOSE(); defer clay.CLOSE();
clay.UI(&.{ clay.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) }),
}); });
clay.CLOSE();
clay.text("Clay - UI Library", clay.Config.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| sidebarItemCompoment(i); for (0..5) |i| sidebarItemComponent(i);
} }
clay.UI(&.{ if (clay.OPEN(&.{
.ID("MainContent"), .ID("MainContent"),
.layout(.{ .sizing = .grow }), .layout(.{ .sizing = .grow }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
}); })) {
clay.CLOSE(); defer clay.CLOSE();
//...
}
} }
return clay.endLayout(); return clay.endLayout();
} }

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

@ -55,25 +55,23 @@ 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 {
cl.UI(&.{ if (cl.OPEN(&.{
.IDI("HeroBlob", index), .IDI("HeroBlob", index),
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .gap = 16, .alignment = .{ .y = .CENTER } }), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .gap = 16, .alignment = .{ .y = .CENTER } }),
.border(.outside(color, 2, 10)), .border(.outside(color, 2, 10)),
}); })) {
{
defer cl.CLOSE(); 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.CLOSE();
cl.text(text, cl.Config.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 {
cl.UI(&.{ if (cl.OPEN(&.{
.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) }) },
@ -81,10 +79,9 @@ fn landingPageDesktop() void {
.padding = .{ .x = 50 }, .padding = .{ .x = 50 },
.gap = 16, .gap = 16,
}), }),
}); })) {
{
defer cl.CLOSE(); 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) }) },
@ -94,44 +91,39 @@ fn landingPageDesktop() void {
.gap = 32, .gap = 32,
}), }),
.border(.{ .left = border_data, .right = border_data }), .border(.{ .left = border_data, .right = border_data }),
}); })) {
{
defer cl.CLOSE(); 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("ClayPresentation"), .ID("ClayPresentation"),
.layout(.{ .layout(.{
.sizing = .grow, .sizing = .grow,
.alignment = .{ .y = .CENTER }, .alignment = .{ .y = .CENTER },
.gap = 16, .gap = 16,
}), }),
}); })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
cl.UI(&.{ if (cl.OPEN(&.{
.ID("LeftText"), .ID("LeftText"),
.layout(.{ .sizing = .{ .w = .percent(0.55) }, .direction = .TOP_TO_BOTTOM, .gap = 8 }), .layout(.{ .sizing = .{ .w = .percent(0.55) }, .direction = .TOP_TO_BOTTOM, .gap = 8 }),
}); })) {
{
defer cl.CLOSE(); 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 }), cl.Config.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }),
); );
cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) }); cl.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) });
cl.CLOSE();
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 }), cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
); );
} }
cl.UI(&.{ if (cl.OPEN(&.{
.ID("HeroImageOuter"), .ID("HeroImageOuter"),
.layout(.{ .sizing = .{ .w = .percent(0.45) }, .direction = .TOP_TO_BOTTOM, .alignment = .{ .x = .CENTER }, .gap = 16 }), .layout(.{ .sizing = .{ .w = .percent(0.45) }, .direction = .TOP_TO_BOTTOM, .alignment = .{ .x = .CENTER }, .gap = 16 }),
}); })) {
{
defer cl.CLOSE(); 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);
@ -145,7 +137,7 @@ fn landingPageDesktop() void {
} }
fn landingPageMobile() void { fn landingPageMobile() void {
cl.UI(&.{ if (cl.OPEN(&.{
.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) }) },
@ -154,33 +146,29 @@ fn landingPageMobile() void {
.padding = .{ .x = 16, .y = 32 }, .padding = .{ .x = 16, .y = 32 },
.gap = 16, .gap = 16,
}), }),
}); })) {
{
defer cl.CLOSE(); 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, .gap = 8 }), .layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .gap = 8 }),
}); })) {
{
defer cl.CLOSE(); 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 }), cl.Config.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }),
); );
cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) }); cl.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) });
cl.CLOSE();
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 }), cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
); );
} }
cl.UI(&.{ if (cl.OPEN(&.{
.ID("HeroImageOuter"), .ID("HeroImageOuter"),
.layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .alignment = .{ .x = .CENTER }, .gap = 16 }), .layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .alignment = .{ .x = .CENTER }, .gap = 16 }),
}); })) {
{
defer cl.CLOSE(); 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);
@ -193,7 +181,7 @@ 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.Config.text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_RED });
cl.UI(&.{ if (cl.OPEN(&.{
.ID("HFileBoxOuter"), .ID("HFileBoxOuter"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -202,22 +190,20 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
.padding = .{ .x = outer_padding, .y = 32 }, .padding = .{ .x = outer_padding, .y = 32 },
.gap = 8, .gap = 8,
}), }),
}); })) {
{
defer cl.CLOSE(); 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(); 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);
} }
cl.UI(&.{ if (cl.OPEN(&.{
.ID("BringYourOwnRendererOuter"), .ID("BringYourOwnRendererOuter"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -226,8 +212,7 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
.padding = .{ .x = outer_padding, .y = 32 }, .padding = .{ .x = outer_padding, .y = 32 },
.gap = 8, .gap = 8,
}), }),
}); })) {
{
defer cl.CLOSE(); 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);
@ -236,75 +221,67 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
} }
fn featureBlocksDesktop() void { fn featureBlocksDesktop() void {
cl.UI(&.{ if (cl.OPEN(&.{
.ID("FeatureBlocksOuter"), .ID("FeatureBlocksOuter"),
.layout(.{ .layout(.{
.sizing = .{ .w = .grow }, .sizing = .{ .w = .grow },
.alignment = .{ .y = .CENTER }, .alignment = .{ .y = .CENTER },
}), }),
.border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }), .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }),
}); })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
featureBlocks(.percent(0.5), 50); featureBlocks(.percent(0.5), 50);
} }
} }
fn featureBlocksMobile() void { fn featureBlocksMobile() void {
cl.UI(&.{ if (cl.OPEN(&.{
.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(); 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 {
cl.UI(&.{ .ID("SyntaxPageLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .gap = 8 }) }); if (cl.OPEN(&.{ .ID("SyntaxPageLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .gap = 8 }) })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
cl.text("Declarative Syntax", .text(title_text_config)); cl.text("Declarative Syntax", .text(title_text_config));
cl.UI(&.{ cl.SingleElem(&.{
.ID("SyntaxSpacer"), .ID("SyntaxSpacer"),
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }),
}); });
cl.CLOSE();
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);
} }
cl.UI(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER } }) }); if (cl.OPEN(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER } }) })) {
{
defer cl.CLOSE(); 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 } }),
}); });
cl.CLOSE();
} }
} }
fn declarativeSyntaxPageDesktop() void { fn declarativeSyntaxPageDesktop() void {
cl.UI(&.{ if (cl.OPEN(&.{
.ID("SyntaxPageDesktop"), .ID("SyntaxPageDesktop"),
.layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 } }), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 } }),
}); })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
cl.UI(&.{ if (cl.OPEN(&.{
.ID("SyntaxPage"), .ID("SyntaxPage"),
.layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .alignment = .{ .y = .CENTER }, .padding = .all(32), .gap = 32 }), .layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .alignment = .{ .y = .CENTER }, .padding = .all(32), .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(); 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));
} }
@ -312,7 +289,7 @@ fn declarativeSyntaxPageDesktop() void {
} }
fn declarativeSyntaxPageMobile() void { fn declarativeSyntaxPageMobile() void {
cl.UI(&.{ if (cl.OPEN(&.{
.ID("SyntaxPageMobile"), .ID("SyntaxPageMobile"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -321,8 +298,7 @@ fn declarativeSyntaxPageMobile() void {
.padding = .{ .x = 16, .y = 32 }, .padding = .{ .x = 16, .y = 32 },
.gap = 16, .gap = 16,
}), }),
}); })) {
{
defer cl.CLOSE(); 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);
} }
@ -335,12 +311,10 @@ 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, .gap = 8 }) }); if (cl.OPEN(&.{ .ID("PerformanceLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .gap = 8 }) })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
cl.text("High Performance", .text(title_text_tonfig)); cl.text("High Performance", .text(title_text_tonfig));
cl.UI(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) }); cl.SingleElem(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) });
cl.CLOSE();
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 }),
@ -354,31 +328,27 @@ fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig,
.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 }),
); );
} }
cl.UI(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER } }) }); if (cl.OPEN(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER } }) })) {
{
defer cl.CLOSE(); 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(); defer cl.CLOSE();
cl.UI(&.{ if (cl.OPEN(&.{
.ID("AnimationDemoContainerLeft"), .ID("AnimationDemoContainerLeft"),
.layout(.{ .sizing = .{ .w = .percent(0.35 + 0.3 * lerp_value), .h = .grow }, .alignment = .{ .y = .CENTER }, .padding = .all(16) }), .layout(.{ .sizing = .{ .w = .percent(0.35 + 0.3 * lerp_value), .h = .grow }, .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(); 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 }));
} }
cl.UI(&.{ if (cl.OPEN(&.{
.ID("AnimationDemoContainerRight"), .ID("AnimationDemoContainerRight"),
.layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .alignment = .{ .y = .CENTER }, .padding = .all(16) }), .layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .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(); 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 }));
} }
@ -387,26 +357,23 @@ fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig,
} }
fn highPerformancePageDesktop(lerp_value: f32) void { fn highPerformancePageDesktop(lerp_value: f32) void {
cl.UI(&.{ if (cl.OPEN(&.{
.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) }) }, .alignment = .{ .y = .CENTER },
.alignment = .{ .y = .CENTER }, .padding = .{ .x = 82, .y = 32 },
.padding = .{ .x = 82, .y = 32 }, .gap = 64,
.gap = 64, }),
},
),
.rectangle(.{ .color = COLOR_RED }), .rectangle(.{ .color = COLOR_RED }),
}); })) {
{
defer cl.CLOSE(); 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 {
cl.UI(&.{ if (cl.OPEN(&.{
.ID("PerformanceMobile"), .ID("PerformanceMobile"),
.layout( .layout(
.{ .{
@ -418,34 +385,30 @@ fn highPerformancePageMobile(lerp_value: f32) void {
}, },
), ),
.rectangle(.{ .color = COLOR_RED }), .rectangle(.{ .color = COLOR_RED }),
}); })) {
{
defer cl.CLOSE(); 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 {
cl.UI(&.{ if (cl.OPEN(&.{
.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(); 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 {
cl.UI(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) }); if (cl.OPEN(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })) {
{ defer cl.CLOSE();
cl.CLOSE(); if (cl.OPEN(&.{
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) }),
}); })) {
{
defer cl.CLOSE(); 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 }));
} }
@ -453,12 +416,10 @@ fn rendererButtonInactive(index: u32, text: []const u8) void {
} }
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, .gap = 8 }) }); if (cl.OPEN(&.{ .ID("RendererLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .gap = 8 }) })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
cl.text("Renderer & Platform Agnostic", .text(title_text_config)); cl.text("Renderer & Platform Agnostic", .text(title_text_config));
cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) }); cl.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) });
cl.CLOSE();
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 }),
@ -472,36 +433,32 @@ 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.UI(&.{ if (cl.OPEN(&.{
.ID("RendererRightText"), .ID("RendererRightText"),
.layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER }, .direction = .TOP_TO_BOTTOM, .gap = 16 }), .layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER }, .direction = .TOP_TO_BOTTOM, .gap = 16 }),
}); })) {
{
defer cl.CLOSE(); 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.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) }); cl.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) });
cl.CLOSE();
rendererButtonActive("Raylib Renderer"); rendererButtonActive("Raylib Renderer");
} }
} }
fn rendererPageDesktop() void { fn rendererPageDesktop() void {
cl.UI(&.{ if (cl.OPEN(&.{
.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) }) },
.alignment = .{ .y = .CENTER }, .alignment = .{ .y = .CENTER },
.padding = .{ .x = 50 }, .padding = .{ .x = 50 },
}), }),
}); })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
cl.UI(&.{ if (cl.OPEN(&.{
.ID("RendererPage"), .ID("RendererPage"),
.layout(.{ .sizing = .grow, .alignment = .{ .y = .CENTER }, .padding = .all(32), .gap = 32 }), .layout(.{ .sizing = .grow, .alignment = .{ .y = .CENTER }, .padding = .all(32), .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(); 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));
} }
@ -509,7 +466,7 @@ fn rendererPageDesktop() void {
} }
fn rendererPageMobile() void { fn rendererPageMobile() void {
cl.UI(&.{ if (cl.OPEN(&.{
.ID("RendererMobile"), .ID("RendererMobile"),
.layout( .layout(
.{ .{
@ -521,8 +478,7 @@ fn rendererPageMobile() void {
}, },
), ),
.rectangle(.{ .color = COLOR_LIGHT }), .rectangle(.{ .color = COLOR_LIGHT }),
}); })) {
{
defer cl.CLOSE(); 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);
} }
@ -532,14 +488,13 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
const mobileScreen = window_width < 750; const mobileScreen = window_width < 750;
cl.beginLayout(); cl.beginLayout();
cl.UI(&.{ if (cl.OPEN(&.{
.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(); 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 },
@ -547,31 +502,27 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
.padding = .{ .x = 32 }, .padding = .{ .x = 32 },
.gap = 24, .gap = 24,
}), }),
}); })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
cl.text("Clay", cl.Config.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.UI(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) }); cl.SingleElem(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) });
cl.CLOSE();
if (!mobileScreen) { if (!mobileScreen) {
cl.UI(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) }); if (cl.OPEN(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
cl.text("Examples", cl.Config.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 } }) })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
cl.text("Docs", cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } })); cl.text("Docs", cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }));
} }
} }
cl.UI(&.{ if (cl.OPEN(&.{
.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)),
@ -579,8 +530,7 @@ 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(); defer cl.CLOSE();
cl.text( cl.text(
"Github", "Github",
@ -589,22 +539,20 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
} }
} }
inline for (COLORS_TOP_BORDER, 0..) |color, i| { inline for (COLORS_TOP_BORDER, 0..) |color, i| {
cl.UI(&.{ cl.SingleElem(&.{
.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.CLOSE();
} }
cl.UI(&.{ if (cl.OPEN(&.{
.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(); defer cl.CLOSE();
if (!mobileScreen) { if (!mobileScreen) {
landingPageDesktop(); landingPageDesktop();

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

@ -10,26 +10,25 @@ const white: cl.Color = .{ 250, 250, 255, 255 };
const sidebar_item_layout: cl.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } }; const sidebar_item_layout: cl.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } };
fn sidebarItemCompoment(index: usize) void { // Re-useable components are just normal functions
cl.UI(&.{ fn sidebarItemComponent(index: usize) void {
cl.singleElem(&.{
.IDI("SidebarBlob", @intCast(index)), .IDI("SidebarBlob", @intCast(index)),
.layout(sidebar_item_layout), .layout(sidebar_item_layout),
.rectangle(.{ .color = orange }), .rectangle(.{ .color = orange }),
}); });
defer cl.CLOSE();
} }
// 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(&.{ if (cl.OPEN(&.{
.ID("OuterContainer"), .ID("OuterContainer"),
.layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .gap = 16 }), .layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .gap = 16 }),
.rectangle(.{ .color = white }), .rectangle(.{ .color = white }),
}); })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
if (cl.OPEN(&.{
cl.UI(&.{
.ID("SideBar"), .ID("SideBar"),
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
@ -39,34 +38,33 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
.gap = 16, .gap = 16,
}), }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
}); })) {
{
defer cl.CLOSE(); defer cl.CLOSE();
cl.UI(&.{ if (cl.OPEN(&.{
.ID("ProfilePictureOuter"), .ID("ProfilePictureOuter"),
.layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .alignment = .{ .x = .LEFT, .y = .CENTER }, .gap = 16 }), .layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .alignment = .{ .x = .LEFT, .y = .CENTER }, .gap = 16 }),
.rectangle(.{ .color = red }), .rectangle(.{ .color = red }),
}); })) {
{
defer cl.CLOSE(); 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.CLOSE();
cl.text("Clay - UI Library", cl.Config.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| sidebarItemCompoment(i); for (0..5) |i| sidebarItemComponent(i);
} }
cl.UI(&.{ if (cl.OPEN(&.{
.ID("MainContent"), .ID("MainContent"),
.layout(.{ .sizing = .grow }), .layout(.{ .sizing = .grow }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
}); })) {
cl.CLOSE(); defer cl.CLOSE();
//...
}
} }
return cl.endLayout(); return cl.endLayout();
} }

14
src/root.zig
View file

@ -406,7 +406,7 @@ pub const hashString = cdefs.Clay__HashString;
threadlocal var nesting_level: i32 = 0; threadlocal var nesting_level: i32 = 0;
pub fn UI(configs: []const Config) void { pub fn OPEN(configs: []const Config) bool {
cdefs.Clay__OpenElement(); cdefs.Clay__OpenElement();
nesting_level += 1; nesting_level += 1;
for (configs) |config| { for (configs) |config| {
@ -417,21 +417,27 @@ pub fn UI(configs: []const Config) void {
} }
} }
cdefs.Clay__ElementPostConfiguration(); cdefs.Clay__ElementPostConfiguration();
return true;
} }
pub fn CLOSE() void { pub fn CLOSE() void {
nesting_level -= 1; nesting_level -= 1;
if (nesting_level < 0) { if (nesting_level < 0) {
std.debug.panic("clay.CLOSE() was called but no clay UI element is currently open", .{}); std.debug.panic("clay.CLOSE() was called but no clay element is currently open", .{});
} }
cdefs.Clay__CloseElement(); cdefs.Clay__CloseElement();
} }
pub fn singleElem(configs: []const Config) void {
_ = OPEN(configs);
CLOSE();
}
pub fn endLayout() ClayArray(RenderCommand) { pub fn endLayout() ClayArray(RenderCommand) {
if (nesting_level > 0) { if (nesting_level > 0) {
std.debug.panic( std.debug.panic(
\\clay.endLayout() was called but {} clay UI elements are still currently open. \\clay.endLayout() was called but {} clay elements are still currently open.
\\Make sure every call to clay.UI() is matched with a call to clay.CLOSE() before the end of the layout. \\Make sure every call to clay.OPEN() is matched with a call to clay.CLOSE() before the end of the layout.
, .{nesting_level}); , .{nesting_level});
} }
return cdefs.Clay_EndLayout(); return cdefs.Clay_EndLayout();