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

naming changes

Browse source
This commit is contained in:
johan0A 2025-01-09 22:25:29 +01:00
parent af3c031424
commit d4e1d84e5b
4 changed files with 62 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

12
README.md
View file

@ -45,9 +45,9 @@ if (clay.OPEN(&.{ // first function call to open the scope
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.sizing = .{ .h = .grow, .w = .fixed(300) }, .sizing = .{ .h = .grow, .w = .fixed(300) },
.alignment = .{ .x = .CENTER, .y = .TOP },
.padding = .all(16), .padding = .all(16),
.gap = 16, .child_alignment = .{ .x = .CENTER, .y = .TOP },
.child_gap = 16,
}), }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
})) { })) {
@ -135,7 +135,7 @@ fn createLayout(profile_picture: *const rl.Texture2D) clay.ClayArray(clay.Render
clay.beginLayout(); clay.beginLayout();
if (clay.OPEN(&.{ 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), .child_gap = 16 }),
.rectangle(.{ .color = white }), .rectangle(.{ .color = white }),
})) { })) {
defer clay.CLOSE(); defer clay.CLOSE();
@ -145,16 +145,16 @@ fn createLayout(profile_picture: *const rl.Texture2D) clay.ClayArray(clay.Render
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.sizing = .{ .h = .grow, .w = .fixed(300) }, .sizing = .{ .h = .grow, .w = .fixed(300) },
.padding = .all(16), .padding = .all(16),
.alignment = .{ .x = .CENTER, .y = .TOP }, .child_gap = 16,
.gap = 16, .child_alignment = .{ .x = .CENTER, .y = .TOP },
}), }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
})) { })) {
defer clay.CLOSE(); defer clay.CLOSE();
if (clay.OPEN(&.{ if (clay.OPEN(&.{
.ID("ProfilePictureOuter"), .ID("ProfilePictureOuter"),
.layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .alignment = .{ .x = .LEFT, .y = .CENTER }, .gap = 16 }),
.rectangle(.{ .color = red }), .rectangle(.{ .color = red }),
.layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .child_alignment = .{ .x = .LEFT, .y = .CENTER }, .child_gap = 16 }),
})) { })) {
defer clay.CLOSE(); defer clay.CLOSE();
clay.singleElem(&.{ clay.singleElem(&.{

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

@ -57,11 +57,11 @@ var window_width: isize = 0;
fn LandingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, image_size: f32, max_width: f32, text: []const u8, image: *rl.Texture2D) void { fn LandingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, image_size: f32, max_width: f32, text: []const u8, image: *rl.Texture2D) void {
if (cl.OPEN(&.{ 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), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }),
.border(.outside(color, 2, 10)), .border(.outside(color, 2, 10)),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
cl.SingleElem(&.{ 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 } }),
@ -75,9 +75,9 @@ fn landingPageDesktop() void {
.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) }) },
.alignment = .{ .y = .CENTER }, .child_alignment = .{ .y = .CENTER },
.padding = .{ .x = 50 }, .padding = .{ .x = 50 },
.gap = 16, .child_gap = 16,
}), }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
@ -86,9 +86,9 @@ fn landingPageDesktop() void {
.layout(.{ .layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) }, .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.alignment = .{ .x = .CENTER }, .child_alignment = .{ .x = .CENTER },
.padding = .all(32), .padding = .all(32),
.gap = 32, .child_gap = 32,
}), }),
.border(.{ .left = border_data, .right = border_data }), .border(.{ .left = border_data, .right = border_data }),
})) { })) {
@ -99,21 +99,21 @@ fn landingPageDesktop() void {
.ID("ClayPresentation"), .ID("ClayPresentation"),
.layout(.{ .layout(.{
.sizing = .grow, .sizing = .grow,
.alignment = .{ .y = .CENTER }, .child_alignment = .{ .y = .CENTER },
.gap = 16, .child_gap = 16,
}), }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
if (cl.OPEN(&.{ 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, .child_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.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) }); cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) });
cl.text( cl.text(
"Clay is laying out this webpage .right now!", "Clay is laying out this webpage .right now!",
cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }), cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
@ -122,7 +122,7 @@ fn landingPageDesktop() void {
if (cl.OPEN(&.{ 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, .child_alignment = .{ .x = .CENTER }, .child_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);
@ -142,23 +142,23 @@ fn landingPageMobile() void {
.layout(.{ .layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) }, .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.alignment = .CENTER, .child_alignment = .CENTER,
.padding = .{ .x = 16, .y = 32 }, .padding = .{ .x = 16, .y = 32 },
.gap = 16, .child_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);
if (cl.OPEN(&.{ 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, .child_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.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) }); cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) });
cl.text( cl.text(
"Clay is laying out this webpage .right now!", "Clay is laying out this webpage .right now!",
cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }), cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
@ -167,7 +167,7 @@ fn landingPageMobile() void {
if (cl.OPEN(&.{ 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, .child_alignment = .{ .x = .CENTER }, .child_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);
@ -186,9 +186,9 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.sizing = .{ .w = width_sizing }, .sizing = .{ .w = width_sizing },
.alignment = .{ .y = .CENTER }, .child_alignment = .{ .y = .CENTER },
.padding = .{ .x = outer_padding, .y = 32 }, .padding = .{ .x = outer_padding, .y = 32 },
.gap = 8, .child_gap = 8,
}), }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
@ -208,9 +208,9 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.sizing = .{ .w = width_sizing }, .sizing = .{ .w = width_sizing },
.alignment = .{ .y = .CENTER }, .child_alignment = .{ .y = .CENTER },
.padding = .{ .x = outer_padding, .y = 32 }, .padding = .{ .x = outer_padding, .y = 32 },
.gap = 8, .child_gap = 8,
}), }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
@ -225,7 +225,7 @@ fn featureBlocksDesktop() void {
.ID("FeatureBlocksOuter"), .ID("FeatureBlocksOuter"),
.layout(.{ .layout(.{
.sizing = .{ .w = .grow }, .sizing = .{ .w = .grow },
.alignment = .{ .y = .CENTER }, .child_alignment = .{ .y = .CENTER },
}), }),
.border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }), .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }),
})) { })) {
@ -249,10 +249,10 @@ 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 {
if (cl.OPEN(&.{ .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, .child_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.SingleElem(&.{ cl.singleElem(&.{
.ID("SyntaxSpacer"), .ID("SyntaxSpacer"),
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }),
}); });
@ -261,9 +261,9 @@ fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing:
cl.text("Mix elements with standard C code like loops, conditionals and functions.", text_conf); cl.text("Mix elements with standard C code like loops, conditionals and functions.", text_conf);
cl.text("Create your own library of re-usable components from UI primitives like text, images and rectangles.", text_conf); cl.text("Create your own library of re-usable components from UI primitives like text, images and rectangles.", text_conf);
} }
if (cl.OPEN(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER } }) })) { if (cl.OPEN(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })) {
defer cl.CLOSE(); defer cl.CLOSE();
cl.SingleElem(&.{ 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 } }),
@ -274,12 +274,12 @@ fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing:
fn declarativeSyntaxPageDesktop() void { fn declarativeSyntaxPageDesktop() void {
if (cl.OPEN(&.{ 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) }) }, .child_alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 } }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
if (cl.OPEN(&.{ 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 }, .child_alignment = .{ .y = .CENTER }, .padding = .all(32), .child_gap = 32 }),
.border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }), .border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
@ -294,9 +294,9 @@ fn declarativeSyntaxPageMobile() void {
.layout(.{ .layout(.{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
.alignment = .CENTER, .child_alignment = .CENTER,
.padding = .{ .x = 16, .y = 32 }, .padding = .{ .x = 16, .y = 32 },
.gap = 16, .child_gap = 16,
}), }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
@ -311,10 +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 {
if (cl.OPEN(&.{ .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, .child_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.SingleElem(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) }); cl.singleElem(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) });
cl.text( cl.text(
"Fast enough to recompute your entire UI every frame.", "Fast enough to recompute your entire UI every frame.",
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }), .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }),
@ -328,7 +328,7 @@ 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 }),
); );
} }
if (cl.OPEN(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER } }) })) { if (cl.OPEN(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })) {
defer cl.CLOSE(); defer cl.CLOSE();
if (cl.OPEN(&.{ if (cl.OPEN(&.{
.ID("PerformanceRightBorder"), .ID("PerformanceRightBorder"),
@ -338,7 +338,7 @@ fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig,
defer cl.CLOSE(); defer cl.CLOSE();
if (cl.OPEN(&.{ 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 }, .child_alignment = .{ .y = .CENTER }, .padding = .all(16) }),
.rectangle(.{ .color = colorLerp(COLOR_RED, COLOR_ORANGE, lerp_value) }), .rectangle(.{ .color = colorLerp(COLOR_RED, COLOR_ORANGE, lerp_value) }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
@ -346,7 +346,7 @@ fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig,
} }
if (cl.OPEN(&.{ 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 }, .child_alignment = .{ .y = .CENTER }, .padding = .all(16) }),
.rectangle(.{ .color = colorLerp(COLOR_ORANGE, COLOR_RED, lerp_value) }), .rectangle(.{ .color = colorLerp(COLOR_ORANGE, COLOR_RED, lerp_value) }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
@ -361,9 +361,9 @@ fn highPerformancePageDesktop(lerp_value: f32) void {
.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 }, .child_alignment = .{ .y = .CENTER },
.padding = .{ .x = 82, .y = 32 }, .padding = .{ .x = 82, .y = 32 },
.gap = 64, .child_gap = 64,
}), }),
.rectangle(.{ .color = COLOR_RED }), .rectangle(.{ .color = COLOR_RED }),
})) { })) {
@ -379,9 +379,9 @@ fn highPerformancePageMobile(lerp_value: f32) void {
.{ .{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
.alignment = .CENTER, .child_alignment = .CENTER,
.padding = .{ .x = 16, .y = 32 }, .padding = .{ .x = 16, .y = 32 },
.gap = 32, .child_gap = 32,
}, },
), ),
.rectangle(.{ .color = COLOR_RED }), .rectangle(.{ .color = COLOR_RED }),
@ -416,10 +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 {
if (cl.OPEN(&.{ .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, .child_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.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) }); cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) });
cl.text( cl.text(
"Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.", "Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.",
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }), .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
@ -435,11 +435,11 @@ fn rendererPage(title_text_config: cl.TextElementConfig, width_sizing: cl.Sizing
} }
if (cl.OPEN(&.{ 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 }, .child_alignment = .{ .x = .CENTER }, .direction = .TOP_TO_BOTTOM, .child_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.SingleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) }); cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) });
rendererButtonActive("Raylib Renderer"); rendererButtonActive("Raylib Renderer");
} }
} }
@ -449,14 +449,14 @@ fn rendererPageDesktop() void {
.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 }, .child_alignment = .{ .y = .CENTER },
.padding = .{ .x = 50 }, .padding = .{ .x = 50 },
}), }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
if (cl.OPEN(&.{ if (cl.OPEN(&.{
.ID("RendererPage"), .ID("RendererPage"),
.layout(.{ .sizing = .grow, .alignment = .{ .y = .CENTER }, .padding = .all(32), .gap = 32 }), .layout(.{ .sizing = .grow, .child_alignment = .{ .y = .CENTER }, .padding = .all(32), .child_gap = 32 }),
.border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }), .border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
@ -472,9 +472,9 @@ fn rendererPageMobile() void {
.{ .{
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
.alignment = .CENTER, .child_alignment = .CENTER,
.padding = .{ .x = 16, .y = 32 }, .padding = .{ .x = 16, .y = 32 },
.gap = 32, .child_gap = 32,
}, },
), ),
.rectangle(.{ .color = COLOR_LIGHT }), .rectangle(.{ .color = COLOR_LIGHT }),
@ -498,9 +498,9 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
.ID("Header"), .ID("Header"),
.layout(.{ .layout(.{
.sizing = .{ .h = .fixed(50), .w = .grow }, .sizing = .{ .h = .fixed(50), .w = .grow },
.alignment = .{ .y = .CENTER }, .child_alignment = .{ .y = .CENTER },
.padding = .{ .x = 32 }, .padding = .{ .x = 32 },
.gap = 24, .child_gap = 24,
}), }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
@ -509,7 +509,7 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
.font_size = 24, .font_size = 24,
.color = .{ 61, 26, 5, 255 }, .color = .{ 61, 26, 5, 255 },
})); }));
cl.SingleElem(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) }); cl.singleElem(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) });
if (!mobileScreen) { if (!mobileScreen) {
if (cl.OPEN(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })) { if (cl.OPEN(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })) {
@ -539,7 +539,7 @@ 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.SingleElem(&.{ 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 }),

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

@ -24,7 +24,7 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
cl.beginLayout(); cl.beginLayout();
if (cl.OPEN(&.{ 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), .child_gap = 16 }),
.rectangle(.{ .color = white }), .rectangle(.{ .color = white }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
@ -34,15 +34,15 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
.direction = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.sizing = .{ .h = .grow, .w = .fixed(300) }, .sizing = .{ .h = .grow, .w = .fixed(300) },
.padding = .all(16), .padding = .all(16),
.alignment = .{ .x = .CENTER, .y = .TOP }, .child_alignment = .{ .x = .CENTER, .y = .TOP },
.gap = 16, .child_gap = 16,
}), }),
.rectangle(.{ .color = light_grey }), .rectangle(.{ .color = light_grey }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();
if (cl.OPEN(&.{ 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), .child_alignment = .{ .x = .LEFT, .y = .CENTER }, .child_gap = 16 }),
.rectangle(.{ .color = red }), .rectangle(.{ .color = red }),
})) { })) {
defer cl.CLOSE(); defer cl.CLOSE();

4
src/root.zig
View file

@ -253,9 +253,9 @@ pub const LayoutConfig = extern struct {
/// padding arround children /// padding arround children
padding: Padding = .{}, padding: Padding = .{},
/// gap between the children /// gap between the children
gap: u16 = 0, child_gap: u16 = 0,
/// alignement of the children /// alignement of the children
alignment: ChildAlignment = .{}, child_alignment: ChildAlignment = .{},
/// direction of the children's layout /// direction of the children's layout
direction: LayoutDirection = .LEFT_TO_RIGHT, direction: LayoutDirection = .LEFT_TO_RIGHT,
}; };