diff --git a/README.md b/README.md index 7ccc6ba..05332cd 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ ### Zig Bindings for clay.h > [!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] -> This project currently is in beta. +> [!NOTE] +> 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. @@ -15,7 +15,8 @@ The **most notable difference** between the C API and the Zig bindings is that o other changes include: - minor naming changes - ability to initialize a parameter by calling a function that is part of its type's namespace for example `.fixed()` or `.layout()` - - ability to initialize a parameter by using a public constant that is part of its type's namespace for example `.grow` + - 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: ```C @@ -37,7 +38,7 @@ CLAY( In Zig: ```Zig -clay.UI(&.{ // first function call to open the scope +if (clay.OPEN(&.{ // first function call to open the scope .ID("SideBar"), .layout(.{ .direction = .TOP_TO_BOTTOM, @@ -47,8 +48,7 @@ clay.UI(&.{ // first function call to open the scope .gap = 16, }), .rectangle(.{ .color = light_grey }), -}); -{ +})) { defer clay.CLOSE(); // defered second function call to close the scope // 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 const sidebar_item_layout: clay.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } }; - // Re-useable components are just normal functions -fn sidebarItemCompoment(index: usize) void { - clay.UI(&.{ +fn sidebarItemComponent(index: usize) void { + clay.singleElem(&.{ .IDI("SidebarBlob", @intCast(index)), .layout(sidebar_item_layout), .rectangle(.{ .color = orange }), }); - defer clay.CLOSE(); } - // An example function to begin the "root" of your layout tree fn createLayout(profile_picture: *const rl.Texture2D) clay.ClayArray(clay.RenderCommand) { clay.beginLayout(); - clay.UI(&.{ + if (clay.OPEN(&.{ .ID("OuterContainer"), .layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .gap = 16 }), .rectangle(.{ .color = white }), - }); - { + })) { defer clay.CLOSE(); - - clay.UI(&.{ + if (clay.OPEN(&.{ .ID("SideBar"), .layout(.{ .direction = .TOP_TO_BOTTOM, @@ -152,34 +147,33 @@ fn createLayout(profile_picture: *const rl.Texture2D) clay.ClayArray(clay.Render .gap = 16, }), .rectangle(.{ .color = light_grey }), - }); - { + })) { defer clay.CLOSE(); - clay.UI(&.{ + if (clay.OPEN(&.{ .ID("ProfilePictureOuter"), .layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .alignment = .{ .x = .LEFT, .y = .CENTER }, .gap = 16 }), .rectangle(.{ .color = red }), - }); - { + })) { defer clay.CLOSE(); - clay.UI(&.{ + clay.singleElem(&.{ .ID("ProfilePicture"), .layout(.{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } }), .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 })); } - for (0..5) |i| sidebarItemCompoment(i); + for (0..5) |i| sidebarItemComponent(i); } - clay.UI(&.{ + if (clay.OPEN(&.{ .ID("MainContent"), .layout(.{ .sizing = .grow }), .rectangle(.{ .color = light_grey }), - }); - clay.CLOSE(); + })) { + defer clay.CLOSE(); + //... + } } return clay.endLayout(); } diff --git a/examples/clay-official-website/src/main.zig b/examples/clay-official-website/src/main.zig index 965ca63..3afdf5e 100644 --- a/examples/clay-official-website/src/main.zig +++ b/examples/clay-official-website/src/main.zig @@ -55,25 +55,23 @@ var window_height: isize = 0; var window_width: isize = 0; fn LandingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, image_size: f32, max_width: f32, text: []const u8, image: *rl.Texture2D) void { - cl.UI(&.{ + if (cl.OPEN(&.{ .IDI("HeroBlob", index), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .gap = 16, .alignment = .{ .y = .CENTER } }), .border(.outside(color, 2, 10)), - }); - { + })) { defer cl.CLOSE(); - cl.UI(&.{ + cl.SingleElem(&.{ .IDI("CheckImage", index), .layout(.{ .sizing = .{ .w = .fixed(image_size) } }), .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 })); } } fn landingPageDesktop() void { - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("LandingPage1Desktop"), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) }, @@ -81,10 +79,9 @@ fn landingPageDesktop() void { .padding = .{ .x = 50 }, .gap = 16, }), - }); - { + })) { defer cl.CLOSE(); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("LandingPage1"), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) }, @@ -94,44 +91,39 @@ fn landingPageDesktop() void { .gap = 32, }), .border(.{ .left = border_data, .right = border_data }), - }); - { + })) { defer cl.CLOSE(); LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("ClayPresentation"), .layout(.{ .sizing = .grow, .alignment = .{ .y = .CENTER }, .gap = 16, }), - }); - { + })) { defer cl.CLOSE(); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("LeftText"), .layout(.{ .sizing = .{ .w = .percent(0.55) }, .direction = .TOP_TO_BOTTOM, .gap = 8 }), - }); - { + })) { defer cl.CLOSE(); cl.text( "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.", cl.Config.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }), ); - cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) }); - cl.CLOSE(); + cl.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) }); cl.text( "Clay is laying out this webpage .right now!", cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }), ); } - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("HeroImageOuter"), .layout(.{ .sizing = .{ .w = .percent(0.45) }, .direction = .TOP_TO_BOTTOM, .alignment = .{ .x = .CENTER }, .gap = 16 }), - }); - { + })) { defer cl.CLOSE(); LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, 32, 480, "High performance", &checkImage5); LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, 32, 480, "Flexbox-style responsive layout", &checkImage4); @@ -145,7 +137,7 @@ fn landingPageDesktop() void { } fn landingPageMobile() void { - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("LandingPage1Mobile"), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) }, @@ -154,33 +146,29 @@ fn landingPageMobile() void { .padding = .{ .x = 16, .y = 32 }, .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); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("LeftText"), .layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .gap = 8 }), - }); - { + })) { defer cl.CLOSE(); cl.text( "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.", cl.Config.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }), ); - cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) }); - cl.CLOSE(); + cl.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) }); cl.text( "Clay is laying out this webpage .right now!", cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }), ); } - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("HeroImageOuter"), .layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .alignment = .{ .x = .CENTER }, .gap = 16 }), - }); - { + })) { defer cl.CLOSE(); LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, 32, 480, "High performance", &checkImage5); LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, 32, 480, "Flexbox-style responsive layout", &checkImage4); @@ -193,7 +181,7 @@ fn landingPageMobile() 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 }); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("HFileBoxOuter"), .layout(.{ .direction = .TOP_TO_BOTTOM, @@ -202,22 +190,20 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void { .padding = .{ .x = outer_padding, .y = 32 }, .gap = 8, }), - }); - { + })) { defer cl.CLOSE(); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("HFileIncludeOuter"), .layout(.{ .padding = .{ .x = 8, .y = 4 } }), .rectangle(.{ .color = COLOR_RED, .corner_radius = .all(8) }), - }); - { + })) { defer cl.CLOSE(); cl.text("#include cl.h", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_LIGHT })); } cl.text("~2000 lines of C99.", text_config); cl.text("Zero dependencies, including no C standard library", text_config); } - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("BringYourOwnRendererOuter"), .layout(.{ .direction = .TOP_TO_BOTTOM, @@ -226,8 +212,7 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void { .padding = .{ .x = outer_padding, .y = 32 }, .gap = 8, }), - }); - { + })) { defer cl.CLOSE(); cl.text("Renderer agnostic.", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_ORANGE })); cl.text("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", text_config); @@ -236,75 +221,67 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void { } fn featureBlocksDesktop() void { - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("FeatureBlocksOuter"), .layout(.{ .sizing = .{ .w = .grow }, .alignment = .{ .y = .CENTER }, }), .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }), - }); - { + })) { defer cl.CLOSE(); featureBlocks(.percent(0.5), 50); } } fn featureBlocksMobile() void { - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("FeatureBlocksOuter"), .layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, }), .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }), - }); - { + })) { defer cl.CLOSE(); featureBlocks(.grow, 16); } } fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void { - 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(); cl.text("Declarative Syntax", .text(title_text_config)); - cl.UI(&.{ + cl.SingleElem(&.{ .ID("SyntaxSpacer"), .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 }); cl.text("Flexible and readable declarative syntax with nested UI element hierarchies.", text_conf); cl.text("Mix elements with standard C code like loops, conditionals and functions.", text_conf); cl.text("Create your own library of re-usable components from UI primitives like text, images and rectangles.", text_conf); } - 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(); - cl.UI(&.{ + cl.SingleElem(&.{ .ID("SyntaxPageRightImage"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 568 }) } }), .image(.{ .image_data = &syntaxImage, .source_dimensions = .{ .h = 1136, .w = 1194 } }), }); - cl.CLOSE(); } } fn declarativeSyntaxPageDesktop() void { - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("SyntaxPageDesktop"), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 } }), - }); - { + })) { defer cl.CLOSE(); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("SyntaxPage"), .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 } }), - }); - { + })) { defer cl.CLOSE(); 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 { - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("SyntaxPageMobile"), .layout(.{ .direction = .TOP_TO_BOTTOM, @@ -321,8 +298,7 @@ fn declarativeSyntaxPageMobile() void { .padding = .{ .x = 16, .y = 32 }, .gap = 16, }), - }); - { + })) { defer cl.CLOSE(); 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."; 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(); cl.text("High Performance", .text(title_text_tonfig)); - cl.UI(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) }); - cl.CLOSE(); + cl.SingleElem(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) }); cl.text( "Fast enough to recompute your entire UI every frame.", .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }), @@ -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 }), ); } - 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(); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("PerformanceRightBorder"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(400) } }), .border(.all(COLOR_LIGHT, 2, 0)), - }); - { + })) { defer cl.CLOSE(); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("AnimationDemoContainerLeft"), .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) }), - }); - { + })) { defer cl.CLOSE(); 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"), .layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .alignment = .{ .y = .CENTER }, .padding = .all(16) }), .rectangle(.{ .color = colorLerp(COLOR_ORANGE, COLOR_RED, lerp_value) }), - }); - { + })) { defer cl.CLOSE(); cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT })); } @@ -387,26 +357,23 @@ fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig, } fn highPerformancePageDesktop(lerp_value: f32) void { - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("PerformanceDesktop"), - .layout( - .{ - .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, - .alignment = .{ .y = .CENTER }, - .padding = .{ .x = 82, .y = 32 }, - .gap = 64, - }, - ), + .layout(.{ + .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, + .alignment = .{ .y = .CENTER }, + .padding = .{ .x = 82, .y = 32 }, + .gap = 64, + }), .rectangle(.{ .color = COLOR_RED }), - }); - { + })) { defer cl.CLOSE(); highPerformancePage(lerp_value, .{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_LIGHT }, .percent(0.5)); } } fn highPerformancePageMobile(lerp_value: f32) void { - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("PerformanceMobile"), .layout( .{ @@ -418,34 +385,30 @@ fn highPerformancePageMobile(lerp_value: f32) void { }, ), .rectangle(.{ .color = COLOR_RED }), - }); - { + })) { defer cl.CLOSE(); highPerformancePage(lerp_value, .{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_LIGHT }, .grow); } } fn rendererButtonActive(text: []const u8) void { - cl.UI(&.{ + if (cl.OPEN(&.{ .layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }), .rectangle(.{ .color = COLOR_RED, .corner_radius = .all(10) }), - }); - { + })) { defer cl.CLOSE(); cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_LIGHT })); } } fn rendererButtonInactive(index: u32, text: []const u8) void { - cl.UI(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) }); - { - cl.CLOSE(); - cl.UI(&.{ + if (cl.OPEN(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })) { + defer cl.CLOSE(); + if (cl.OPEN(&.{ .ID("RendererButtonInactiveInner", index), .layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }), .rectangle(.{ .color = COLOR_LIGHT, .corner_radius = .all(10) }), - }); - { + })) { defer cl.CLOSE(); cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED })); } @@ -453,12 +416,10 @@ fn rendererButtonInactive(index: u32, text: []const u8) 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(); cl.text("Renderer & Platform Agnostic", .text(title_text_config)); - cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) }); - cl.CLOSE(); + cl.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) }); cl.text( "Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.", .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }), @@ -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 }), ); } - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("RendererRightText"), .layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER }, .direction = .TOP_TO_BOTTOM, .gap = 16 }), - }); - { + })) { defer cl.CLOSE(); 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.CLOSE(); + cl.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) }); rendererButtonActive("Raylib Renderer"); } } fn rendererPageDesktop() void { - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("RendererPageDesktop"), .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 }, }), - }); - { + })) { defer cl.CLOSE(); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("RendererPage"), .layout(.{ .sizing = .grow, .alignment = .{ .y = .CENTER }, .padding = .all(32), .gap = 32 }), .border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }), - }); - { + })) { defer cl.CLOSE(); rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .percent(0.5)); } @@ -509,7 +466,7 @@ fn rendererPageDesktop() void { } fn rendererPageMobile() void { - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("RendererMobile"), .layout( .{ @@ -521,8 +478,7 @@ fn rendererPageMobile() void { }, ), .rectangle(.{ .color = COLOR_LIGHT }), - }); - { + })) { defer cl.CLOSE(); 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; cl.beginLayout(); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("OuterContainer"), .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }), .rectangle(.{ .color = COLOR_LIGHT }), - }); - { + })) { defer cl.CLOSE(); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("Header"), .layout(.{ .sizing = .{ .h = .fixed(50), .w = .grow }, @@ -547,31 +502,27 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) { .padding = .{ .x = 32 }, .gap = 24, }), - }); - { + })) { defer cl.CLOSE(); cl.text("Clay", cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 }, })); - cl.UI(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) }); - cl.CLOSE(); + cl.SingleElem(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) }); 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(); 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(); 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"), .layout(.{ .padding = .{ .x = 32, .y = 6 } }), .border(.outside(COLOR_RED, 2, 10)), @@ -579,8 +530,7 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) { .corner_radius = .all(10), .color = if (cl.pointerOver(cl.getElementId("LinkGithubOuter"))) COLOR_LIGHT_HOVER else COLOR_LIGHT, }), - }); - { + })) { defer cl.CLOSE(); cl.text( "Github", @@ -589,22 +539,20 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) { } } inline for (COLORS_TOP_BORDER, 0..) |color, i| { - cl.UI(&.{ + cl.SingleElem(&.{ .ID("TopBorder" ++ .{i}), .layout(.{ .sizing = .{ .h = .fixed(4), .w = .grow } }), .rectangle(.{ .color = color }), }); - cl.CLOSE(); } - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("ScrollContainerBackgroundRectangle"), .scroll(.{ .vertical = true }), .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }), .rectangle(.{ .color = COLOR_LIGHT }), .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }), - }); - { + })) { defer cl.CLOSE(); if (!mobileScreen) { landingPageDesktop(); diff --git a/examples/raylib-sidebar-container/src/main.zig b/examples/raylib-sidebar-container/src/main.zig index 7ab1c3d..de2e366 100644 --- a/examples/raylib-sidebar-container/src/main.zig +++ b/examples/raylib-sidebar-container/src/main.zig @@ -10,26 +10,25 @@ const white: cl.Color = .{ 250, 250, 255, 255 }; const sidebar_item_layout: cl.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } }; -fn sidebarItemCompoment(index: usize) void { - cl.UI(&.{ +// Re-useable components are just normal functions +fn sidebarItemComponent(index: usize) void { + cl.singleElem(&.{ .IDI("SidebarBlob", @intCast(index)), .layout(sidebar_item_layout), .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) { cl.beginLayout(); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("OuterContainer"), .layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .gap = 16 }), .rectangle(.{ .color = white }), - }); - { + })) { defer cl.CLOSE(); - - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("SideBar"), .layout(.{ .direction = .TOP_TO_BOTTOM, @@ -39,34 +38,33 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm .gap = 16, }), .rectangle(.{ .color = light_grey }), - }); - { + })) { defer cl.CLOSE(); - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("ProfilePictureOuter"), .layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .alignment = .{ .x = .LEFT, .y = .CENTER }, .gap = 16 }), .rectangle(.{ .color = red }), - }); - { + })) { defer cl.CLOSE(); - cl.UI(&.{ + cl.singleElem(&.{ .ID("ProfilePicture"), .layout(.{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } }), .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 })); } - for (0..5) |i| sidebarItemCompoment(i); + for (0..5) |i| sidebarItemComponent(i); } - cl.UI(&.{ + if (cl.OPEN(&.{ .ID("MainContent"), .layout(.{ .sizing = .grow }), .rectangle(.{ .color = light_grey }), - }); - cl.CLOSE(); + })) { + defer cl.CLOSE(); + //... + } } return cl.endLayout(); } diff --git a/src/root.zig b/src/root.zig index 2a60a1f..71ec53d 100644 --- a/src/root.zig +++ b/src/root.zig @@ -406,7 +406,7 @@ pub const hashString = cdefs.Clay__HashString; threadlocal var nesting_level: i32 = 0; -pub fn UI(configs: []const Config) void { +pub fn OPEN(configs: []const Config) bool { cdefs.Clay__OpenElement(); nesting_level += 1; for (configs) |config| { @@ -417,21 +417,27 @@ pub fn UI(configs: []const Config) void { } } cdefs.Clay__ElementPostConfiguration(); + return true; } pub fn CLOSE() void { nesting_level -= 1; if (nesting_level < 0) { - std.debug.panic("clay.CLOSE() was called but no clay UI element is currently open", .{}); + std.debug.panic("clay.CLOSE() was called but no clay element is currently open", .{}); } cdefs.Clay__CloseElement(); } +pub fn singleElem(configs: []const Config) void { + _ = OPEN(configs); + CLOSE(); +} + pub fn endLayout() ClayArray(RenderCommand) { if (nesting_level > 0) { std.debug.panic( - \\clay.endLayout() was called but {} clay UI 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. + \\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();