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 orange: cl.Color = .{ 225, 138, 50, 255 };
const sidebarItemLayout: cl.LayoutConfig = .{ const sidebarItemLayout: cl.LayoutConfig = .{
.sizing = .{ .size = .{
.width = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}),
.height = cl.sizingFixed(50), .h = cl.sizingFixed(50),
}, },
}; };
@ -60,11 +60,7 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
{ {
cl.rectangle( cl.rectangle(
cl.ID("OuterContainer"), cl.ID("OuterContainer"),
cl.layout(.{ cl.layout(.{ .direction = .LEFT_TO_RIGHT, .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}) }, .padding = .{ .x = 16, .y = 16 } }),
.layoutDirection = .LEFT_TO_RIGHT,
.sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingGrow(.{}) },
.padding = .{ .x = 16, .y = 16 },
}),
cl.rectangleConfig(.{ .color = .{ 250, 250, 255, 255 } }), cl.rectangleConfig(.{ .color = .{ 250, 250, 255, 255 } }),
); );
defer cl.closeParent(); defer cl.closeParent();
@ -73,11 +69,11 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
cl.rectangle( cl.rectangle(
cl.ID("SideBar"), cl.ID("SideBar"),
cl.layout(.{ cl.layout(.{
.layoutDirection = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingFixed(side_bar_handle.position) }, .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingFixed(side_bar_handle.position) },
.padding = .{ .x = 16, .y = 16 }, .padding = .{ .x = 16, .y = 16 },
.childAlignment = .{ .x = .CENTER, .y = .TOP }, .alignment = .{ .x = .CENTER, .y = .TOP },
.childGap = 16, .gap = 16,
}), }),
cl.rectangleConfig(.{ .color = light_grey }), cl.rectangleConfig(.{ .color = light_grey }),
); );
@ -86,20 +82,15 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
{ {
cl.rectangle( cl.rectangle(
cl.ID("ProfilePictureOuter"), cl.ID("ProfilePictureOuter"),
cl.layout(.{ cl.layout(.{ .size = .{ .w = cl.sizingGrow(.{}) }, .padding = .{ .x = 16, .y = 16 }, .alignment = .{ .y = .CENTER }, .gap = 16 }),
.sizing = .{ .width = cl.sizingGrow(.{}) },
.padding = .{ .x = 16, .y = 16 },
.childAlignment = .{ .y = .CENTER },
.childGap = 16,
}),
cl.rectangleConfig(.{ .color = red }), cl.rectangleConfig(.{ .color = red }),
); );
defer cl.closeParent(); defer cl.closeParent();
cl.image( cl.image(
cl.ID("ProfilePicture"), cl.ID("ProfilePicture"),
cl.layout(.{ .sizing = .{ .height = cl.sizingFixed(60), .width = cl.sizingFixed(60) } }), cl.layout(.{ .size = .{ .h = cl.sizingFixed(60), .w = cl.sizingFixed(60) } }),
cl.imageConfig(.{ .sourceDimensions = .{ .height = 60, .width = 60 }, .imageData = @ptrCast(@constCast(profile_picture)) }), cl.imageConfig(.{ .sourceDimensions = .{ .h = 60, .w = 60 }, .imageData = @ptrCast(@constCast(profile_picture)) }),
); );
cl.closeParent(); cl.closeParent();
cl.text(cl.ID("profileTitle"), "Clay - UI Library", cl.textConfig(.{ .fontSize = 24, .textColor = light_grey })); 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(); 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(); defer cl.closeParent();
} }
{ {
cl.rectangle( cl.rectangle(
cl.ID("MainContent"), 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 }), cl.rectangleConfig(.{ .color = light_grey }),
); );
defer cl.closeParent(); defer cl.closeParent();
@ -140,7 +135,7 @@ pub fn main() anyerror!void {
defer allocator.free(memory); defer allocator.free(memory);
const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(min_memory_size, @ptrCast(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); cl.setMeasureTextFunction(renderer.measureText);
rl.setConfigFlags(.{ rl.setConfigFlags(.{
@ -170,8 +165,8 @@ pub fn main() anyerror!void {
}, rl.isMouseButtonDown(.mouse_button_left)); }, rl.isMouseButtonDown(.mouse_button_left));
cl.setLayoutDimensions(.{ cl.setLayoutDimensions(.{
.width = @floatFromInt(rl.getScreenWidth()), .w = @floatFromInt(rl.getScreenWidth()),
.height = @floatFromInt(rl.getScreenHeight()), .h = @floatFromInt(rl.getScreenHeight()),
}); });
var renderCommands = createLayout(&profile_picture); 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; if (temp_text_width < text_width) temp_text_width = text_width;
return cl.Dimensions{ return cl.Dimensions{
.height = text_height, .h = text_height,
.width = temp_text_width * scale_factor + @as(f32, @floatFromInt(temp_byte_counter - 1)) * letter_spacing, .w = temp_text_width * scale_factor + @as(f32, @floatFromInt(temp_byte_counter - 1)) * letter_spacing,
}; };
} }

80
examples/raylib-sidebar-scrolling-container/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 orange: cl.Color = .{ 225, 138, 50, 255 };
const sidebarItemLayout: cl.LayoutConfig = .{ const sidebarItemLayout: cl.LayoutConfig = .{
.sizing = .{ .size = .{
.width = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}),
.height = cl.sizingFixed(50), .h = cl.sizingFixed(50),
}, },
}; };
@ -25,10 +25,10 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
cl.rectangle( cl.rectangle(
cl.ID("OuterContainer"), cl.ID("OuterContainer"),
cl.layout(.{ cl.layout(.{
.layoutDirection = .LEFT_TO_RIGHT, .direction = .LEFT_TO_RIGHT,
.sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingGrow(.{}) }, .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}) },
.padding = .{ .x = 16, .y = 16 }, .padding = .{ .x = 16, .y = 16 },
.childGap = 16, .gap = 16,
}), }),
cl.rectangleConfig(.{ .color = .{ 250, 250, 255, 255 } }), 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.rectangle(
cl.ID("SideBar"), cl.ID("SideBar"),
cl.layout(.{ cl.layout(.{
.layoutDirection = .TOP_TO_BOTTOM, .direction = .TOP_TO_BOTTOM,
.sizing = .{ .height = cl.sizingGrow(.{}), .width = cl.sizingFixed(300) }, .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingFixed(300) },
.padding = .{ .x = 16, .y = 16 }, .padding = .{ .x = 16, .y = 16 },
.childAlignment = .{ .x = .CENTER, .y = .TOP }, .alignment = .{ .x = .CENTER, .y = .TOP },
.childGap = 16, .gap = 16,
}), }),
cl.rectangleConfig(.{ .color = light_grey }), cl.rectangleConfig(.{ .color = light_grey }),
); );
@ -52,10 +52,10 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
cl.rectangle( cl.rectangle(
cl.ID("ProfilePictureOuter"), cl.ID("ProfilePictureOuter"),
cl.layout(.{ cl.layout(.{
.sizing = .{ .width = cl.sizingGrow(.{}) }, .size = .{ .w = cl.sizingGrow(.{}) },
.padding = .{ .x = 16, .y = 16 }, .padding = .{ .x = 16, .y = 16 },
.childAlignment = .{ .y = .CENTER }, .alignment = .{ .y = .CENTER },
.childGap = 16, .gap = 16,
}), }),
cl.rectangleConfig(.{ .color = red }), cl.rectangleConfig(.{ .color = red }),
); );
@ -63,8 +63,8 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
cl.image( cl.image(
cl.ID("ProfilePicture"), cl.ID("ProfilePicture"),
cl.layout(.{ .sizing = .{ .height = cl.sizingFixed(60), .width = cl.sizingFixed(60) } }), cl.layout(.{ .size = .{ .h = cl.sizingFixed(60), .w = cl.sizingFixed(60) } }),
cl.imageConfig(.{ .sourceDimensions = .{ .height = 60, .width = 60 }, .imageData = @ptrCast(@constCast(profile_picture)) }), cl.imageConfig(.{ .sourceDimensions = .{ .h = 60, .w = 60 }, .imageData = @ptrCast(@constCast(profile_picture)) }),
); );
cl.closeParent(); cl.closeParent();
cl.text(cl.ID("profileTitle"), "Clay - UI Library", cl.textConfig(.{ .fontSize = 24, .textColor = light_grey })); 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.rectangle(
cl.ID("MainContent"), 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 }), cl.rectangleConfig(.{ .color = light_grey }),
); );
defer cl.closeParent(); defer cl.closeParent();
@ -99,7 +99,7 @@ pub fn main() anyerror!void {
defer allocator.free(memory); defer allocator.free(memory);
const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(min_memory_size, @ptrCast(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); cl.setMeasureTextFunction(renderer.measureText);
rl.setConfigFlags(.{ rl.setConfigFlags(.{
@ -129,8 +129,8 @@ pub fn main() anyerror!void {
}, rl.isMouseButtonDown(.mouse_button_left)); }, rl.isMouseButtonDown(.mouse_button_left));
cl.setLayoutDimensions(.{ cl.setLayoutDimensions(.{
.width = @floatFromInt(rl.getScreenWidth()), .w = @floatFromInt(rl.getScreenWidth()),
.height = @floatFromInt(rl.getScreenHeight()), .h = @floatFromInt(rl.getScreenHeight()),
}); });
var renderCommands = createLayout(&profile_picture); var renderCommands = createLayout(&profile_picture);
@ -139,3 +139,45 @@ pub fn main() anyerror!void {
rl.endDrawing(); 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 }),
);
}

4
examples/raylib-sidebar-scrolling-container/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; if (temp_text_width < text_width) temp_text_width = text_width;
return cl.Dimensions{ return cl.Dimensions{
.height = text_height, .h = text_height,
.width = temp_text_width * scale_factor + @as(f32, @floatFromInt(temp_byte_counter - 1)) * letter_spacing, .w = temp_text_width * scale_factor + @as(f32, @floatFromInt(temp_byte_counter - 1)) * letter_spacing,
}; };
} }

28
src/root.zig
View file

@ -12,8 +12,8 @@ pub const Vector2 = extern struct {
}; };
pub const Dimensions = extern struct { pub const Dimensions = extern struct {
width: f32, w: f32,
height: f32, h: f32,
}; };
pub const Arena = extern struct { pub const Arena = extern struct {
@ -51,7 +51,6 @@ pub const ElementId = extern struct {
stringId: String, stringId: String,
}; };
// pub const EnumBackingType = if (builtin.os.tag == .windows) u32 else u8;
pub const EnumBackingType = u8; pub const EnumBackingType = u8;
pub const RenderCommandType = enum(EnumBackingType) { pub const RenderCommandType = enum(EnumBackingType) {
@ -179,8 +178,10 @@ pub const SizingAxis = extern struct {
}; };
pub const Sizing = extern struct { pub const Sizing = extern struct {
width: SizingAxis = .{}, /// width
height: SizingAxis = .{}, w: SizingAxis = .{},
/// height
h: SizingAxis = .{},
}; };
pub const Padding = extern struct { pub const Padding = extern struct {
@ -211,14 +212,19 @@ pub const ChildAlignment = extern struct {
}; };
pub const LayoutConfig = extern struct { pub const LayoutConfig = extern struct {
sizing: Sizing = .{ /// sizing of the element
.height = .{ .constraints = .{ .sizePercent = 100 }, .type = .GROW }, size: Sizing = .{
.width = .{ .constraints = .{ .sizePercent = 100 }, .type = .GROW }, .h = .{ .constraints = .{ .sizePercent = 100 }, .type = .GROW },
.w = .{ .constraints = .{ .sizePercent = 100 }, .type = .GROW },
}, },
/// padding arround children
padding: Padding = .{}, padding: Padding = .{},
childGap: u16 = 0, /// gap between the children
layoutDirection: LayoutDirection = .LEFT_TO_RIGHT, gap: u16 = 0,
childAlignment: ChildAlignment = .{}, /// direction of the children's layout
direction: LayoutDirection = .LEFT_TO_RIGHT,
/// alignement of the children
alignment: ChildAlignment = .{},
}; };
pub fn ClayArray(comptime T: type) type { pub fn ClayArray(comptime T: type) type {