From 38cc535235b56b60ec194f9feaf78a986304e7a9 Mon Sep 17 00:00:00 2001 From: johan0A Date: Tue, 24 Sep 2024 22:48:04 +0200 Subject: [PATCH] more compact naming for layout struct and added simple doc comments to layout sruct --- .../raylib-resizable-sidebar/src/main.zig | 47 +++++------ .../src/raylib_render_clay.zig | 4 +- .../src/main.zig | 80 ++++++++++++++----- .../src/raylib_render_clay.zig | 4 +- src/root.zig | 28 ++++--- 5 files changed, 103 insertions(+), 60 deletions(-) diff --git a/examples/raylib-resizable-sidebar/src/main.zig b/examples/raylib-resizable-sidebar/src/main.zig index 64a1ec1..8095535 100644 --- a/examples/raylib-resizable-sidebar/src/main.zig +++ b/examples/raylib-resizable-sidebar/src/main.zig @@ -8,9 +8,9 @@ const red: cl.Color = .{ 168, 66, 28, 255 }; const orange: cl.Color = .{ 225, 138, 50, 255 }; const sidebarItemLayout: cl.LayoutConfig = .{ - .sizing = .{ - .width = cl.sizingGrow(.{}), - .height = cl.sizingFixed(50), + .size = .{ + .w = cl.sizingGrow(.{}), + .h = cl.sizingFixed(50), }, }; @@ -60,11 +60,7 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm { cl.rectangle( cl.ID("OuterContainer"), - cl.layout(.{ - .layoutDirection = .LEFT_TO_RIGHT, - .sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingGrow(.{}) }, - .padding = .{ .x = 16, .y = 16 }, - }), + cl.layout(.{ .direction = .LEFT_TO_RIGHT, .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}) }, .padding = .{ .x = 16, .y = 16 } }), cl.rectangleConfig(.{ .color = .{ 250, 250, 255, 255 } }), ); defer cl.closeParent(); @@ -73,11 +69,11 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm cl.rectangle( cl.ID("SideBar"), cl.layout(.{ - .layoutDirection = .TOP_TO_BOTTOM, - .sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingFixed(side_bar_handle.position) }, + .direction = .TOP_TO_BOTTOM, + .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingFixed(side_bar_handle.position) }, .padding = .{ .x = 16, .y = 16 }, - .childAlignment = .{ .x = .CENTER, .y = .TOP }, - .childGap = 16, + .alignment = .{ .x = .CENTER, .y = .TOP }, + .gap = 16, }), cl.rectangleConfig(.{ .color = light_grey }), ); @@ -86,20 +82,15 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm { cl.rectangle( cl.ID("ProfilePictureOuter"), - cl.layout(.{ - .sizing = .{ .width = cl.sizingGrow(.{}) }, - .padding = .{ .x = 16, .y = 16 }, - .childAlignment = .{ .y = .CENTER }, - .childGap = 16, - }), + cl.layout(.{ .size = .{ .w = cl.sizingGrow(.{}) }, .padding = .{ .x = 16, .y = 16 }, .alignment = .{ .y = .CENTER }, .gap = 16 }), cl.rectangleConfig(.{ .color = red }), ); defer cl.closeParent(); cl.image( cl.ID("ProfilePicture"), - cl.layout(.{ .sizing = .{ .height = cl.sizingFixed(60), .width = cl.sizingFixed(60) } }), - cl.imageConfig(.{ .sourceDimensions = .{ .height = 60, .width = 60 }, .imageData = @ptrCast(@constCast(profile_picture)) }), + cl.layout(.{ .size = .{ .h = cl.sizingFixed(60), .w = cl.sizingFixed(60) } }), + cl.imageConfig(.{ .sourceDimensions = .{ .h = 60, .w = 60 }, .imageData = @ptrCast(@constCast(profile_picture)) }), ); cl.closeParent(); cl.text(cl.ID("profileTitle"), "Clay - UI Library", cl.textConfig(.{ .fontSize = 24, .textColor = light_grey })); @@ -110,15 +101,19 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm } } { - cl.rectangle(cl.ID("ResizeHandle"), cl.layout(.{ .padding = .{ .x = 7, .y = 7 }, .sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingFit(.{}) } }), cl.rectangleConfig(.{ .color = .{ 0, 0, 0, 0 } })); + cl.rectangle( + cl.ID("ResizeHandle"), + cl.layout(.{ .padding = .{ .x = 7, .y = 7 }, .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingFit(.{}) } }), + cl.rectangleConfig(.{ .color = .{ 0, 0, 0, 0 } }), + ); defer cl.closeParent(); - cl.rectangle(cl.ID("ResizeHandleInner"), cl.layout(.{ .sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingFixed(2) } }), cl.rectangleConfig(.{ .color = red })); + cl.rectangle(cl.ID("ResizeHandleInner"), cl.layout(.{ .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingFixed(2) } }), cl.rectangleConfig(.{ .color = red })); defer cl.closeParent(); } { cl.rectangle( cl.ID("MainContent"), - cl.layout(.{ .sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingGrow(.{}) } }), + cl.layout(.{ .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}) } }), cl.rectangleConfig(.{ .color = light_grey }), ); defer cl.closeParent(); @@ -140,7 +135,7 @@ pub fn main() anyerror!void { defer allocator.free(memory); const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(min_memory_size, @ptrCast(memory)); - cl.initialize(arena, .{ .height = 1000, .width = 1000 }); + cl.initialize(arena, .{ .h = 1000, .w = 1000 }); cl.setMeasureTextFunction(renderer.measureText); rl.setConfigFlags(.{ @@ -170,8 +165,8 @@ pub fn main() anyerror!void { }, rl.isMouseButtonDown(.mouse_button_left)); cl.setLayoutDimensions(.{ - .width = @floatFromInt(rl.getScreenWidth()), - .height = @floatFromInt(rl.getScreenHeight()), + .w = @floatFromInt(rl.getScreenWidth()), + .h = @floatFromInt(rl.getScreenHeight()), }); var renderCommands = createLayout(&profile_picture); diff --git a/examples/raylib-resizable-sidebar/src/raylib_render_clay.zig b/examples/raylib-resizable-sidebar/src/raylib_render_clay.zig index 418f1fa..4cb2b58 100644 --- a/examples/raylib-resizable-sidebar/src/raylib_render_clay.zig +++ b/examples/raylib-resizable-sidebar/src/raylib_render_clay.zig @@ -226,7 +226,7 @@ pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dime if (temp_text_width < text_width) temp_text_width = text_width; return cl.Dimensions{ - .height = text_height, - .width = temp_text_width * scale_factor + @as(f32, @floatFromInt(temp_byte_counter - 1)) * letter_spacing, + .h = text_height, + .w = temp_text_width * scale_factor + @as(f32, @floatFromInt(temp_byte_counter - 1)) * letter_spacing, }; } diff --git a/examples/raylib-sidebar-scrolling-container/src/main.zig b/examples/raylib-sidebar-scrolling-container/src/main.zig index c3c4c99..8d10c59 100644 --- a/examples/raylib-sidebar-scrolling-container/src/main.zig +++ b/examples/raylib-sidebar-scrolling-container/src/main.zig @@ -8,9 +8,9 @@ const red: cl.Color = .{ 168, 66, 28, 255 }; const orange: cl.Color = .{ 225, 138, 50, 255 }; const sidebarItemLayout: cl.LayoutConfig = .{ - .sizing = .{ - .width = cl.sizingGrow(.{}), - .height = cl.sizingFixed(50), + .size = .{ + .w = cl.sizingGrow(.{}), + .h = cl.sizingFixed(50), }, }; @@ -25,10 +25,10 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm cl.rectangle( cl.ID("OuterContainer"), cl.layout(.{ - .layoutDirection = .LEFT_TO_RIGHT, - .sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingGrow(.{}) }, + .direction = .LEFT_TO_RIGHT, + .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}) }, .padding = .{ .x = 16, .y = 16 }, - .childGap = 16, + .gap = 16, }), cl.rectangleConfig(.{ .color = .{ 250, 250, 255, 255 } }), ); @@ -38,11 +38,11 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm cl.rectangle( cl.ID("SideBar"), cl.layout(.{ - .layoutDirection = .TOP_TO_BOTTOM, - .sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingFixed(300) }, + .direction = .TOP_TO_BOTTOM, + .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingFixed(300) }, .padding = .{ .x = 16, .y = 16 }, - .childAlignment = .{ .x = .CENTER, .y = .TOP }, - .childGap = 16, + .alignment = .{ .x = .CENTER, .y = .TOP }, + .gap = 16, }), cl.rectangleConfig(.{ .color = light_grey }), ); @@ -52,10 +52,10 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm cl.rectangle( cl.ID("ProfilePictureOuter"), cl.layout(.{ - .sizing = .{ .width = cl.sizingGrow(.{}) }, + .size = .{ .w = cl.sizingGrow(.{}) }, .padding = .{ .x = 16, .y = 16 }, - .childAlignment = .{ .y = .CENTER }, - .childGap = 16, + .alignment = .{ .y = .CENTER }, + .gap = 16, }), cl.rectangleConfig(.{ .color = red }), ); @@ -63,8 +63,8 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm cl.image( cl.ID("ProfilePicture"), - cl.layout(.{ .sizing = .{ .height = cl.sizingFixed(60), .width = cl.sizingFixed(60) } }), - cl.imageConfig(.{ .sourceDimensions = .{ .height = 60, .width = 60 }, .imageData = @ptrCast(@constCast(profile_picture)) }), + cl.layout(.{ .size = .{ .h = cl.sizingFixed(60), .w = cl.sizingFixed(60) } }), + cl.imageConfig(.{ .sourceDimensions = .{ .h = 60, .w = 60 }, .imageData = @ptrCast(@constCast(profile_picture)) }), ); cl.closeParent(); cl.text(cl.ID("profileTitle"), "Clay - UI Library", cl.textConfig(.{ .fontSize = 24, .textColor = light_grey })); @@ -77,7 +77,7 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm { cl.rectangle( cl.ID("MainContent"), - cl.layout(.{ .sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingGrow(.{}) } }), + cl.layout(.{ .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}) } }), cl.rectangleConfig(.{ .color = light_grey }), ); defer cl.closeParent(); @@ -99,7 +99,7 @@ pub fn main() anyerror!void { defer allocator.free(memory); const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(min_memory_size, @ptrCast(memory)); - cl.initialize(arena, .{ .height = 1000, .width = 1000 }); + cl.initialize(arena, .{ .h = 1000, .w = 1000 }); cl.setMeasureTextFunction(renderer.measureText); rl.setConfigFlags(.{ @@ -129,8 +129,8 @@ pub fn main() anyerror!void { }, rl.isMouseButtonDown(.mouse_button_left)); cl.setLayoutDimensions(.{ - .width = @floatFromInt(rl.getScreenWidth()), - .height = @floatFromInt(rl.getScreenHeight()), + .w = @floatFromInt(rl.getScreenWidth()), + .h = @floatFromInt(rl.getScreenHeight()), }); var renderCommands = createLayout(&profile_picture); @@ -139,3 +139,45 @@ pub fn main() anyerror!void { rl.endDrawing(); } } + +test { + // explicit: + cl.rectangle( + cl.ID("SideBar"), + cl.layout(.{ + .layoutDirection = .TOP_TO_BOTTOM, + .sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingFixed(300) }, + .padding = .{ .x = 16, .y = 16 }, + .childAlignment = .{ .x = .CENTER, .y = .TOP }, + .childGap = 16, + }), + cl.rectangleConfig(.{ .color = light_grey }), + ); + + // compact: + cl.rectangle( + cl.ID("SideBar"), + cl.layout(.{ + .direction = .TOP_TO_BOTTOM, + .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingFixed(300) }, + .padding = .{ .x = 16, .y = 16 }, + .alignment = .{ .x = .CENTER, .y = .TOP }, + .gap = 16, + }), + cl.rectangleConfig(.{ .color = cl.light_grey }), + ); + + // explicit: + cl.rectangle( + cl.ID("SideBar"), + cl.layout(.{ .layoutDirection = .TOP_TO_BOTTOM, .sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingFixed(300) }, .padding = .{ .x = 16, .y = 16 }, .childAlignment = .{ .x = .CENTER, .y = .TOP }, .childGap = 16 }), + cl.rectangleConfig(.{ .color = light_grey }), + ); + + // compact: + cl.rectangle( + cl.ID("SideBar"), + cl.layout(.{ .direction = .TOP_TO_BOTTOM, .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingFixed(300) }, .padding = .{ .x = 16, .y = 16 }, .alignment = .{ .x = .CENTER, .y = .TOP }, .gap = 16 }), + cl.rectangleConfig(.{ .color = cl.light_grey }), + ); +} diff --git a/examples/raylib-sidebar-scrolling-container/src/raylib_render_clay.zig b/examples/raylib-sidebar-scrolling-container/src/raylib_render_clay.zig index 418f1fa..4cb2b58 100644 --- a/examples/raylib-sidebar-scrolling-container/src/raylib_render_clay.zig +++ b/examples/raylib-sidebar-scrolling-container/src/raylib_render_clay.zig @@ -226,7 +226,7 @@ pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dime if (temp_text_width < text_width) temp_text_width = text_width; return cl.Dimensions{ - .height = text_height, - .width = temp_text_width * scale_factor + @as(f32, @floatFromInt(temp_byte_counter - 1)) * letter_spacing, + .h = text_height, + .w = temp_text_width * scale_factor + @as(f32, @floatFromInt(temp_byte_counter - 1)) * letter_spacing, }; } diff --git a/src/root.zig b/src/root.zig index 09db0f2..6188451 100644 --- a/src/root.zig +++ b/src/root.zig @@ -12,8 +12,8 @@ pub const Vector2 = extern struct { }; pub const Dimensions = extern struct { - width: f32, - height: f32, + w: f32, + h: f32, }; pub const Arena = extern struct { @@ -51,7 +51,6 @@ pub const ElementId = extern struct { stringId: String, }; -// pub const EnumBackingType = if (builtin.os.tag == .windows) u32 else u8; pub const EnumBackingType = u8; pub const RenderCommandType = enum(EnumBackingType) { @@ -179,8 +178,10 @@ pub const SizingAxis = extern struct { }; pub const Sizing = extern struct { - width: SizingAxis = .{}, - height: SizingAxis = .{}, + /// width + w: SizingAxis = .{}, + /// height + h: SizingAxis = .{}, }; pub const Padding = extern struct { @@ -211,14 +212,19 @@ pub const ChildAlignment = extern struct { }; pub const LayoutConfig = extern struct { - sizing: Sizing = .{ - .height = .{ .constraints = .{ .sizePercent = 100 }, .type = .GROW }, - .width = .{ .constraints = .{ .sizePercent = 100 }, .type = .GROW }, + /// sizing of the element + size: Sizing = .{ + .h = .{ .constraints = .{ .sizePercent = 100 }, .type = .GROW }, + .w = .{ .constraints = .{ .sizePercent = 100 }, .type = .GROW }, }, + /// padding arround children padding: Padding = .{}, - childGap: u16 = 0, - layoutDirection: LayoutDirection = .LEFT_TO_RIGHT, - childAlignment: ChildAlignment = .{}, + /// gap between the children + gap: u16 = 0, + /// direction of the children's layout + direction: LayoutDirection = .LEFT_TO_RIGHT, + /// alignement of the children + alignment: ChildAlignment = .{}, }; pub fn ClayArray(comptime T: type) type {