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

more compact naming for layout struct and added simple doc comments to layout sruct

Browse source
This commit is contained in:
johan0A 2024-09-24 22:48:04 +02:00
parent 5c14648e9f
commit 38cc535235
5 changed files with 103 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

47
examples/raylib-resizable-sidebar/src/main.zig
View file

@ -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);

4
examples/raylib-resizable-sidebar/src/raylib_render_clay.zig
View file

@ -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,
};
}