update to clay v0.12
This commit is contained in:
johan0A
parent
24124b4245
commit
4667b2771e
4 changed files with 256 additions and 212 deletions
|
|
@ -6,82 +6,67 @@ const renderer = @import("raylib_render_clay.zig");
|
|||
const light_grey: cl.Color = .{ 224, 215, 210, 255 };
|
||||
const red: cl.Color = .{ 168, 66, 28, 255 };
|
||||
const orange: cl.Color = .{ 225, 138, 50, 255 };
|
||||
const white: cl.Color = .{ 250, 250, 255, 255 };
|
||||
|
||||
const sidebar_item_layout: cl.LayoutConfig = .{
|
||||
.size = .{
|
||||
.w = cl.sizingGrow(.{}),
|
||||
.h = cl.sizingFixed(50),
|
||||
},
|
||||
};
|
||||
const sidebar_item_layout: cl.LayoutConfig = .{ .size = .{ .w = .grow, .h = .fixed(50) } };
|
||||
|
||||
fn sidebarItemCompoment(index: usize) void {
|
||||
cl.rectangle(cl.IDI("SidebarBlob", @intCast(index)), cl.layout(sidebar_item_layout), cl.rectangleConfig(.{ .color = orange }));
|
||||
defer cl.closeParent();
|
||||
cl.UI(&.{
|
||||
.IDI("SidebarBlob", @intCast(index)),
|
||||
.layout(sidebar_item_layout),
|
||||
.rectangle(.{ .color = orange }),
|
||||
});
|
||||
defer cl.CLOSE();
|
||||
}
|
||||
|
||||
fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderCommand) {
|
||||
cl.beginLayout();
|
||||
{
|
||||
cl.rectangle(
|
||||
cl.ID("OuterContainer"),
|
||||
cl.layout(.{
|
||||
.direction = .LEFT_TO_RIGHT,
|
||||
.size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}) },
|
||||
.padding = .{ .x = 16, .y = 16 },
|
||||
cl.UI(&.{
|
||||
.ID("OuterContainer"),
|
||||
.layout(.{ .direction = .LEFT_TO_RIGHT, .size = .grow, .padding = .uniform(16), .gap = 16 }),
|
||||
.rectangle(.{ .color = white }),
|
||||
});
|
||||
defer cl.CLOSE();
|
||||
|
||||
cl.UI(&.{
|
||||
.ID("SideBar"),
|
||||
.layout(.{
|
||||
.direction = .TOP_TO_BOTTOM,
|
||||
.size = .{ .h = .grow, .w = .fixed(300) },
|
||||
.padding = .uniform(16),
|
||||
.alignment = .{ .x = .CENTER, .y = .TOP },
|
||||
.gap = 16,
|
||||
}),
|
||||
cl.rectangleConfig(.{ .color = .{ 250, 250, 255, 255 } }),
|
||||
);
|
||||
defer cl.closeParent();
|
||||
|
||||
.rectangle(.{ .color = light_grey }),
|
||||
});
|
||||
{
|
||||
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 = light_grey }),
|
||||
);
|
||||
defer cl.closeParent();
|
||||
|
||||
defer cl.CLOSE();
|
||||
cl.UI(&.{
|
||||
.ID("ProfilePictureOuter"),
|
||||
.layout(.{ .size = .{ .w = .grow }, .padding = .uniform(16), .alignment = .{ .y = .CENTER }, .gap = 16 }),
|
||||
.rectangle(.{ .color = red }),
|
||||
});
|
||||
{
|
||||
cl.rectangle(
|
||||
cl.ID("ProfilePictureOuter"),
|
||||
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(.{ .size = .{ .h = cl.sizingFixed(60), .w = cl.sizingFixed(60) } }),
|
||||
cl.imageConfig(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @ptrCast(@constCast(profile_picture)) }),
|
||||
);
|
||||
cl.closeParent();
|
||||
cl.text(cl.ID("profileTitle"), "Clay - UI Library", cl.textConfig(.{ .font_size = 24, .color = light_grey }));
|
||||
defer cl.CLOSE();
|
||||
cl.UI(&.{
|
||||
.ID("ProfilePicture"),
|
||||
.layout(.{ .size = .{ .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);
|
||||
}
|
||||
}
|
||||
{
|
||||
cl.rectangle(
|
||||
cl.ID("MainContent"),
|
||||
cl.layout(.{ .size = .{ .h = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}) } }),
|
||||
cl.rectangleConfig(.{ .color = light_grey }),
|
||||
);
|
||||
defer cl.closeParent();
|
||||
for (0..5) |i| sidebarItemCompoment(i);
|
||||
}
|
||||
|
||||
cl.UI(&.{
|
||||
.ID("MainContent"),
|
||||
.layout(.{ .size = .grow }),
|
||||
.rectangle(.{ .color = light_grey }),
|
||||
});
|
||||
cl.CLOSE();
|
||||
}
|
||||
return cl.endLayout();
|
||||
}
|
||||
|
|
@ -94,14 +79,15 @@ fn loadFont(file_data: ?[]const u8, font_id: u16, font_size: i32) void {
|
|||
pub fn main() anyerror!void {
|
||||
const allocator = std.heap.page_allocator;
|
||||
|
||||
// init clay
|
||||
const min_memory_size: u32 = cl.minMemorySize();
|
||||
const memory = try allocator.alloc(u8, min_memory_size);
|
||||
defer allocator.free(memory);
|
||||
const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(min_memory_size, @ptrCast(memory));
|
||||
|
||||
cl.initialize(arena, .{ .h = 1000, .w = 1000 });
|
||||
cl.setMeasureTextFunction(renderer.measureText);
|
||||
|
||||
// init raylib
|
||||
rl.setConfigFlags(.{
|
||||
.msaa_4x_hint = true,
|
||||
.vsync_hint = true,
|
||||
|
|
@ -111,11 +97,11 @@ pub fn main() anyerror!void {
|
|||
rl.initWindow(1000, 1000, "Raylib zig Example");
|
||||
rl.setTargetFPS(60);
|
||||
|
||||
// load assets
|
||||
loadFont(@embedFile("./resources/Roboto-Regular.ttf"), 0, 100);
|
||||
const profile_picture = rl.loadTextureFromImage(rl.loadImageFromMemory(".png", @embedFile("./resources/profile-picture.png")));
|
||||
|
||||
var debug_mode_enabled = false;
|
||||
|
||||
while (!rl.windowShouldClose()) {
|
||||
if (rl.isKeyPressed(.key_d)) {
|
||||
debug_mode_enabled = !debug_mode_enabled;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
|
|||
const cloned = allocator.dupeZ(c_char, text) catch unreachable;
|
||||
defer allocator.free(cloned);
|
||||
const fontToUse: rl.Font = raylib_fonts[render_command.config.text_element_config.font_id].?;
|
||||
rl.setTextLineSpacing(render_command.config.text_element_config.line_spacing);
|
||||
rl.setTextLineSpacing(render_command.config.text_element_config.line_height);
|
||||
rl.drawTextEx(
|
||||
fontToUse,
|
||||
@ptrCast(@alignCast(cloned.ptr)),
|
||||
|
|
@ -37,7 +37,7 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
|
|||
);
|
||||
},
|
||||
.Image => {
|
||||
const image_texture: *rl.Texture2D = @ptrCast(
|
||||
const image_texture: *const rl.Texture2D = @ptrCast(
|
||||
@alignCast(render_command.config.image_element_config.image_data),
|
||||
);
|
||||
rl.drawTextureEx(
|
||||
|
|
@ -190,7 +190,7 @@ pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dime
|
|||
const text: []const u8 = clay_text;
|
||||
const font_size: f32 = @floatFromInt(config.font_size);
|
||||
const letter_spacing: f32 = @floatFromInt(config.letter_spacing);
|
||||
const line_spacing = config.line_spacing;
|
||||
const line_height = config.line_height;
|
||||
|
||||
var temp_byte_counter: usize = 0;
|
||||
var byte_counter: usize = 0;
|
||||
|
|
@ -217,7 +217,7 @@ pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dime
|
|||
if (temp_text_width < text_width) temp_text_width = text_width;
|
||||
byte_counter = 0;
|
||||
text_width = 0;
|
||||
text_height += font_size + @as(f32, @floatFromInt(line_spacing));
|
||||
text_height += font_size + @as(f32, @floatFromInt(line_height));
|
||||
}
|
||||
|
||||
if (temp_byte_counter < byte_counter) temp_byte_counter = byte_counter;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue