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

changed naming convention to zig's

Browse source
This commit is contained in:
johan0A 2024-09-26 19:03:04 +02:00
parent 38cc535235
commit 5339757abe
5 changed files with 197 additions and 239 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,7 @@ const light_grey: cl.Color = .{ 224, 215, 210, 255 };
const red: cl.Color = .{ 168, 66, 28, 255 }; 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 sidebar_item_layout: cl.LayoutConfig = .{
.size = .{ .size = .{
.w = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}),
.h = cl.sizingFixed(50), .h = cl.sizingFixed(50),
@ -51,7 +51,7 @@ var side_bar_handle: struct {
}; };
fn sidebarItemCompoment(index: usize) void { fn sidebarItemCompoment(index: usize) void {
cl.rectangle(cl.IDI("SidebarBlob", @intCast(index)), cl.layout(sidebarItemLayout), cl.rectangleConfig(.{ .color = orange })); cl.rectangle(cl.IDI("SidebarBlob", @intCast(index)), cl.layout(sidebar_item_layout), cl.rectangleConfig(.{ .color = orange }));
defer cl.closeParent(); defer cl.closeParent();
} }
@ -90,10 +90,10 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
cl.image( cl.image(
cl.ID("ProfilePicture"), cl.ID("ProfilePicture"),
cl.layout(.{ .size = .{ .h = cl.sizingFixed(60), .w = cl.sizingFixed(60) } }), cl.layout(.{ .size = .{ .h = cl.sizingFixed(60), .w = cl.sizingFixed(60) } }),
cl.imageConfig(.{ .sourceDimensions = .{ .h = 60, .w = 60 }, .imageData = @ptrCast(@constCast(profile_picture)) }), cl.imageConfig(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @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(.{ .font_size = 24, .text_color = light_grey }));
} }
for (0..5) |i| { for (0..5) |i| {
@ -122,9 +122,9 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
return cl.endLayout(); return cl.endLayout();
} }
fn loadFont(file_data: ?[]const u8, fontId: u16, fontSize: i32) void { fn loadFont(file_data: ?[]const u8, font_id: u16, font_size: i32) void {
renderer.raylib_fonts[fontId] = rl.loadFontFromMemory(".ttf", file_data, fontSize * 2, null); renderer.raylib_fonts[font_id] = rl.loadFontFromMemory(".ttf", file_data, font_size * 2, null);
rl.setTextureFilter(renderer.raylib_fonts[fontId].?.texture, .texture_filter_bilinear); rl.setTextureFilter(renderer.raylib_fonts[font_id].?.texture, .texture_filter_bilinear);
} }
pub fn main() anyerror!void { pub fn main() anyerror!void {
@ -168,10 +168,10 @@ pub fn main() anyerror!void {
.w = @floatFromInt(rl.getScreenWidth()), .w = @floatFromInt(rl.getScreenWidth()),
.h = @floatFromInt(rl.getScreenHeight()), .h = @floatFromInt(rl.getScreenHeight()),
}); });
var renderCommands = createLayout(&profile_picture); var render_commands = createLayout(&profile_picture);
rl.beginDrawing(); rl.beginDrawing();
renderer.clayRaylibRender(&renderCommands, allocator); renderer.clayRaylibRender(&render_commands, allocator);
rl.endDrawing(); rl.endDrawing();
side_bar_handle.tick(); side_bar_handle.tick();

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

@ -14,59 +14,59 @@ pub fn clayColorToRaylibColor(color: cl.Color) rl.Color {
pub var raylib_fonts: [10]?rl.Font = .{null} ** 10; pub var raylib_fonts: [10]?rl.Font = .{null} ** 10;
pub fn clayRaylibRender(renderCommands: *cl.ClayArray(cl.RenderCommand), allocator: std.mem.Allocator) void { pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), allocator: std.mem.Allocator) void {
var i: usize = 0; var i: usize = 0;
while (i < renderCommands.length) : (i += 1) { while (i < render_commands.length) : (i += 1) {
const renderCommand = cl.renderCommandArrayGet(renderCommands, @intCast(i)); const render_command = cl.renderCommandArrayGet(render_commands, @intCast(i));
const boundingBox = renderCommand.boundingBox; const bounding_box = render_command.bounding_box;
switch (renderCommand.commandType) { switch (render_command.command_type) {
.None => {}, .None => {},
.Text => { .Text => {
const text = renderCommand.text.chars[0..@intCast(renderCommand.text.length)]; const text = render_command.text.chars[0..@intCast(render_command.text.length)];
const cloned = allocator.dupeZ(c_char, text) catch unreachable; const cloned = allocator.dupeZ(c_char, text) catch unreachable;
defer allocator.free(cloned); defer allocator.free(cloned);
const fontToUse: rl.Font = raylib_fonts[renderCommand.config.textElementConfig.fontId].?; const fontToUse: rl.Font = raylib_fonts[render_command.config.text_element_config.font_id].?;
rl.setTextLineSpacing(renderCommand.config.textElementConfig.lineSpacing); rl.setTextLineSpacing(render_command.config.text_element_config.lineSpacing);
rl.drawTextEx( rl.drawTextEx(
fontToUse, fontToUse,
@ptrCast(@alignCast(cloned.ptr)), @ptrCast(@alignCast(cloned.ptr)),
rl.Vector2{ .x = boundingBox.x, .y = boundingBox.y }, rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y },
@floatFromInt(renderCommand.config.textElementConfig.fontSize), @floatFromInt(render_command.config.text_element_config.font_size),
@floatFromInt(renderCommand.config.textElementConfig.letterSpacing), @floatFromInt(render_command.config.text_element_config.letter_spacing),
clayColorToRaylibColor(renderCommand.config.textElementConfig.textColor), clayColorToRaylibColor(render_command.config.text_element_config.text_color),
); );
}, },
.Image => { .Image => {
const imageTexture: *rl.Texture2D = @ptrCast( const image_texture: *rl.Texture2D = @ptrCast(
@alignCast(renderCommand.config.imageElementConfig.imageData), @alignCast(render_command.config.image_element_config.image_data),
); );
rl.drawTextureEx( rl.drawTextureEx(
imageTexture.*, image_texture.*,
rl.Vector2{ .x = boundingBox.x, .y = boundingBox.y }, rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y },
0, 0,
boundingBox.width / @as(f32, @floatFromInt(imageTexture.width)), bounding_box.width / @as(f32, @floatFromInt(image_texture.width)),
rl.Color.white, rl.Color.white,
); );
}, },
.ScissorStart => { .ScissorStart => {
rl.beginScissorMode( rl.beginScissorMode(
@intFromFloat(math.round(boundingBox.x)), @intFromFloat(math.round(bounding_box.x)),
@intFromFloat(math.round(boundingBox.y)), @intFromFloat(math.round(bounding_box.y)),
@intFromFloat(math.round(boundingBox.width)), @intFromFloat(math.round(bounding_box.width)),
@intFromFloat(math.round(boundingBox.height)), @intFromFloat(math.round(bounding_box.height)),
); );
}, },
.ScissorEnd => rl.endScissorMode(), .ScissorEnd => rl.endScissorMode(),
.Rectangle => { .Rectangle => {
const config = renderCommand.config.rectangleElementConfig; const config = render_command.config.rectangle_element_config;
if (config.cornerRadius.topLeft > 0) { if (config.corner_radius.top_left > 0) {
const radius: f32 = (config.cornerRadius.topLeft * 2) / @min(boundingBox.width, boundingBox.height); const radius: f32 = (config.corner_radius.top_left * 2) / @min(bounding_box.width, bounding_box.height);
rl.drawRectangleRounded( rl.drawRectangleRounded(
rl.Rectangle{ rl.Rectangle{
.x = boundingBox.x, .x = bounding_box.x,
.y = boundingBox.y, .y = bounding_box.y,
.width = boundingBox.width, .width = bounding_box.width,
.height = boundingBox.height, .height = bounding_box.height,
}, },
radius, radius,
8, 8,
@ -74,103 +74,103 @@ pub fn clayRaylibRender(renderCommands: *cl.ClayArray(cl.RenderCommand), allocat
); );
} else { } else {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(boundingBox.x), @intFromFloat(bounding_box.x),
@intFromFloat(boundingBox.y), @intFromFloat(bounding_box.y),
@intFromFloat(boundingBox.width), @intFromFloat(bounding_box.width),
@intFromFloat(boundingBox.height), @intFromFloat(bounding_box.height),
clayColorToRaylibColor(config.color), clayColorToRaylibColor(config.color),
); );
} }
}, },
.Border => { .Border => {
const config = renderCommand.config.borderElementConfig; const config = render_command.config.border_element_config;
if (config.left.width > 0) { if (config.left.width > 0) {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(math.round(boundingBox.x)), @intFromFloat(math.round(bounding_box.x)),
@intFromFloat(math.round(boundingBox.y + config.cornerRadius.topLeft)), @intFromFloat(math.round(bounding_box.y + config.corner_radius.top_left)),
@intCast(config.left.width), @intCast(config.left.width),
@intFromFloat(math.round(boundingBox.height - config.cornerRadius.topLeft - config.cornerRadius.bottomLeft)), @intFromFloat(math.round(bounding_box.height - config.corner_radius.top_left - config.corner_radius.bottom_left)),
clayColorToRaylibColor(config.left.color), clayColorToRaylibColor(config.left.color),
); );
} }
if (config.right.width > 0) { if (config.right.width > 0) {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(math.round(boundingBox.x + boundingBox.width - @as(f32, @floatFromInt(config.right.width)))), @intFromFloat(math.round(bounding_box.x + bounding_box.width - @as(f32, @floatFromInt(config.right.width)))),
@intFromFloat(math.round(boundingBox.y + config.cornerRadius.topRight)), @intFromFloat(math.round(bounding_box.y + config.corner_radius.top_right)),
@intCast(config.right.width), @intCast(config.right.width),
@intFromFloat(math.round(boundingBox.height - config.cornerRadius.topRight - config.cornerRadius.bottomRight)), @intFromFloat(math.round(bounding_box.height - config.corner_radius.top_right - config.corner_radius.bottom_right)),
clayColorToRaylibColor(config.right.color), clayColorToRaylibColor(config.right.color),
); );
} }
if (config.top.width > 0) { if (config.top.width > 0) {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(math.round(boundingBox.x + config.cornerRadius.topLeft)), @intFromFloat(math.round(bounding_box.x + config.corner_radius.top_left)),
@intFromFloat(math.round(boundingBox.y)), @intFromFloat(math.round(bounding_box.y)),
@intFromFloat(math.round(boundingBox.width - config.cornerRadius.topLeft - config.cornerRadius.topRight)), @intFromFloat(math.round(bounding_box.width - config.corner_radius.top_left - config.corner_radius.top_right)),
@intCast(config.top.width), @intCast(config.top.width),
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.top.color),
); );
} }
if (config.bottom.width > 0) { if (config.bottom.width > 0) {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(math.round(boundingBox.x + config.cornerRadius.bottomLeft)), @intFromFloat(math.round(bounding_box.x + config.corner_radius.bottom_left)),
@intFromFloat(math.round(boundingBox.y + boundingBox.height - @as(f32, @floatFromInt(config.bottom.width)))), @intFromFloat(math.round(bounding_box.y + bounding_box.height - @as(f32, @floatFromInt(config.bottom.width)))),
@intFromFloat(math.round(boundingBox.width - config.cornerRadius.bottomLeft - config.cornerRadius.bottomRight)), @intFromFloat(math.round(bounding_box.width - config.corner_radius.bottom_left - config.corner_radius.bottom_right)),
@intCast(config.bottom.width), @intCast(config.bottom.width),
clayColorToRaylibColor(config.bottom.color), clayColorToRaylibColor(config.bottom.color),
); );
} }
if (config.cornerRadius.topLeft > 0) { if (config.corner_radius.top_left > 0) {
rl.drawRing( rl.drawRing(
rl.Vector2{ rl.Vector2{
.x = math.round(boundingBox.x + config.cornerRadius.topLeft), .x = math.round(bounding_box.x + config.corner_radius.top_left),
.y = math.round(boundingBox.y + config.cornerRadius.topLeft), .y = math.round(bounding_box.y + config.corner_radius.top_left),
}, },
math.round(config.cornerRadius.topLeft - @as(f32, @floatFromInt(config.top.width))), math.round(config.corner_radius.top_left - @as(f32, @floatFromInt(config.top.width))),
config.cornerRadius.topLeft, config.corner_radius.top_left,
180, 180,
270, 270,
10, 10,
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.top.color),
); );
} }
if (config.cornerRadius.topRight > 0) { if (config.corner_radius.top_right > 0) {
rl.drawRing( rl.drawRing(
rl.Vector2{ rl.Vector2{
.x = math.round(boundingBox.x + boundingBox.width - config.cornerRadius.topRight), .x = math.round(bounding_box.x + bounding_box.width - config.corner_radius.top_right),
.y = math.round(boundingBox.y + config.cornerRadius.topRight), .y = math.round(bounding_box.y + config.corner_radius.top_right),
}, },
math.round(config.cornerRadius.topRight - @as(f32, @floatFromInt(config.top.width))), math.round(config.corner_radius.top_right - @as(f32, @floatFromInt(config.top.width))),
config.cornerRadius.topRight, config.corner_radius.top_right,
270, 270,
360, 360,
10, 10,
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.top.color),
); );
} }
if (config.cornerRadius.bottomLeft > 0) { if (config.corner_radius.bottom_left > 0) {
rl.drawRing( rl.drawRing(
rl.Vector2{ rl.Vector2{
.x = math.round(boundingBox.x + config.cornerRadius.bottomLeft), .x = math.round(bounding_box.x + config.corner_radius.bottom_left),
.y = math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomLeft), .y = math.round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_left),
}, },
math.round(config.cornerRadius.bottomLeft - @as(f32, @floatFromInt(config.top.width))), math.round(config.corner_radius.bottom_left - @as(f32, @floatFromInt(config.top.width))),
config.cornerRadius.bottomLeft, config.corner_radius.bottom_left,
90, 90,
180, 180,
10, 10,
clayColorToRaylibColor(config.bottom.color), clayColorToRaylibColor(config.bottom.color),
); );
} }
if (config.cornerRadius.bottomRight > 0) { if (config.corner_radius.bottom_right > 0) {
rl.drawRing( rl.drawRing(
rl.Vector2{ rl.Vector2{
.x = math.round(boundingBox.x + boundingBox.width - config.cornerRadius.bottomRight), .x = math.round(bounding_box.x + bounding_box.width - config.corner_radius.bottom_right),
.y = math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomRight), .y = math.round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_right),
}, },
math.round(config.cornerRadius.bottomRight - @as(f32, @floatFromInt(config.top.width))), math.round(config.corner_radius.bottom_right - @as(f32, @floatFromInt(config.top.width))),
config.cornerRadius.bottomRight, config.corner_radius.bottom_right,
0.1, 0.1,
90, 90,
10, 10,
@ -186,10 +186,10 @@ pub fn clayRaylibRender(renderCommands: *cl.ClayArray(cl.RenderCommand), allocat
} }
pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dimensions { pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dimensions {
const font = raylib_fonts[config.fontId].?; const font = raylib_fonts[config.font_id].?;
const text: []const u8 = clay_text; const text: []const u8 = clay_text;
const font_size: f32 = @floatFromInt(config.fontSize); const font_size: f32 = @floatFromInt(config.font_size);
const letter_spacing: f32 = @floatFromInt(config.letterSpacing); const letter_spacing: f32 = @floatFromInt(config.letter_spacing);
const line_spacing = config.lineSpacing; const line_spacing = config.lineSpacing;
var temp_byte_counter: usize = 0; var temp_byte_counter: usize = 0;

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

@ -7,7 +7,7 @@ const light_grey: cl.Color = .{ 224, 215, 210, 255 };
const red: cl.Color = .{ 168, 66, 28, 255 }; 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 sidebar_item_layout: cl.LayoutConfig = .{
.size = .{ .size = .{
.w = cl.sizingGrow(.{}), .w = cl.sizingGrow(.{}),
.h = cl.sizingFixed(50), .h = cl.sizingFixed(50),
@ -15,7 +15,7 @@ const sidebarItemLayout: cl.LayoutConfig = .{
}; };
fn sidebarItemCompoment(index: usize) void { fn sidebarItemCompoment(index: usize) void {
cl.rectangle(cl.IDI("SidebarBlob", @intCast(index)), cl.layout(sidebarItemLayout), cl.rectangleConfig(.{ .color = orange })); cl.rectangle(cl.IDI("SidebarBlob", @intCast(index)), cl.layout(sidebar_item_layout), cl.rectangleConfig(.{ .color = orange }));
defer cl.closeParent(); defer cl.closeParent();
} }
@ -64,10 +64,10 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
cl.image( cl.image(
cl.ID("ProfilePicture"), cl.ID("ProfilePicture"),
cl.layout(.{ .size = .{ .h = cl.sizingFixed(60), .w = cl.sizingFixed(60) } }), cl.layout(.{ .size = .{ .h = cl.sizingFixed(60), .w = cl.sizingFixed(60) } }),
cl.imageConfig(.{ .sourceDimensions = .{ .h = 60, .w = 60 }, .imageData = @ptrCast(@constCast(profile_picture)) }), cl.imageConfig(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @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(.{ .font_size = 24, .text_color = light_grey }));
} }
for (0..5) |i| { for (0..5) |i| {
@ -86,9 +86,9 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
return cl.endLayout(); return cl.endLayout();
} }
fn loadFont(file_data: ?[]const u8, fontId: u16, fontSize: i32) void { fn loadFont(file_data: ?[]const u8, font_id: u16, font_size: i32) void {
renderer.raylib_fonts[fontId] = rl.loadFontFromMemory(".ttf", file_data, fontSize * 2, null); renderer.raylib_fonts[font_id] = rl.loadFontFromMemory(".ttf", file_data, font_size * 2, null);
rl.setTextureFilter(renderer.raylib_fonts[fontId].?.texture, .texture_filter_bilinear); rl.setTextureFilter(renderer.raylib_fonts[font_id].?.texture, .texture_filter_bilinear);
} }
pub fn main() anyerror!void { pub fn main() anyerror!void {
@ -132,52 +132,10 @@ pub fn main() anyerror!void {
.w = @floatFromInt(rl.getScreenWidth()), .w = @floatFromInt(rl.getScreenWidth()),
.h = @floatFromInt(rl.getScreenHeight()), .h = @floatFromInt(rl.getScreenHeight()),
}); });
var renderCommands = createLayout(&profile_picture); var render_commands = createLayout(&profile_picture);
rl.beginDrawing(); rl.beginDrawing();
renderer.clayRaylibRender(&renderCommands, allocator); renderer.clayRaylibRender(&render_commands, allocator);
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 }),
);
}

136
examples/raylib-sidebar-scrolling-container/src/raylib_render_clay.zig
View file

@ -14,59 +14,59 @@ pub fn clayColorToRaylibColor(color: cl.Color) rl.Color {
pub var raylib_fonts: [10]?rl.Font = .{null} ** 10; pub var raylib_fonts: [10]?rl.Font = .{null} ** 10;
pub fn clayRaylibRender(renderCommands: *cl.ClayArray(cl.RenderCommand), allocator: std.mem.Allocator) void { pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), allocator: std.mem.Allocator) void {
var i: usize = 0; var i: usize = 0;
while (i < renderCommands.length) : (i += 1) { while (i < render_commands.length) : (i += 1) {
const renderCommand = cl.renderCommandArrayGet(renderCommands, @intCast(i)); const render_command = cl.renderCommandArrayGet(render_commands, @intCast(i));
const boundingBox = renderCommand.boundingBox; const bounding_box = render_command.bounding_box;
switch (renderCommand.commandType) { switch (render_command.command_type) {
.None => {}, .None => {},
.Text => { .Text => {
const text = renderCommand.text.chars[0..@intCast(renderCommand.text.length)]; const text = render_command.text.chars[0..@intCast(render_command.text.length)];
const cloned = allocator.dupeZ(c_char, text) catch unreachable; const cloned = allocator.dupeZ(c_char, text) catch unreachable;
defer allocator.free(cloned); defer allocator.free(cloned);
const fontToUse: rl.Font = raylib_fonts[renderCommand.config.textElementConfig.fontId].?; const fontToUse: rl.Font = raylib_fonts[render_command.config.text_element_config.font_id].?;
rl.setTextLineSpacing(renderCommand.config.textElementConfig.lineSpacing); rl.setTextLineSpacing(render_command.config.text_element_config.lineSpacing);
rl.drawTextEx( rl.drawTextEx(
fontToUse, fontToUse,
@ptrCast(@alignCast(cloned.ptr)), @ptrCast(@alignCast(cloned.ptr)),
rl.Vector2{ .x = boundingBox.x, .y = boundingBox.y }, rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y },
@floatFromInt(renderCommand.config.textElementConfig.fontSize), @floatFromInt(render_command.config.text_element_config.font_size),
@floatFromInt(renderCommand.config.textElementConfig.letterSpacing), @floatFromInt(render_command.config.text_element_config.letter_spacing),
clayColorToRaylibColor(renderCommand.config.textElementConfig.textColor), clayColorToRaylibColor(render_command.config.text_element_config.text_color),
); );
}, },
.Image => { .Image => {
const imageTexture: *rl.Texture2D = @ptrCast( const image_texture: *rl.Texture2D = @ptrCast(
@alignCast(renderCommand.config.imageElementConfig.imageData), @alignCast(render_command.config.image_element_config.image_data),
); );
rl.drawTextureEx( rl.drawTextureEx(
imageTexture.*, image_texture.*,
rl.Vector2{ .x = boundingBox.x, .y = boundingBox.y }, rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y },
0, 0,
boundingBox.width / @as(f32, @floatFromInt(imageTexture.width)), bounding_box.width / @as(f32, @floatFromInt(image_texture.width)),
rl.Color.white, rl.Color.white,
); );
}, },
.ScissorStart => { .ScissorStart => {
rl.beginScissorMode( rl.beginScissorMode(
@intFromFloat(math.round(boundingBox.x)), @intFromFloat(math.round(bounding_box.x)),
@intFromFloat(math.round(boundingBox.y)), @intFromFloat(math.round(bounding_box.y)),
@intFromFloat(math.round(boundingBox.width)), @intFromFloat(math.round(bounding_box.width)),
@intFromFloat(math.round(boundingBox.height)), @intFromFloat(math.round(bounding_box.height)),
); );
}, },
.ScissorEnd => rl.endScissorMode(), .ScissorEnd => rl.endScissorMode(),
.Rectangle => { .Rectangle => {
const config = renderCommand.config.rectangleElementConfig; const config = render_command.config.rectangle_element_config;
if (config.cornerRadius.topLeft > 0) { if (config.corner_radius.top_left > 0) {
const radius: f32 = (config.cornerRadius.topLeft * 2) / @min(boundingBox.width, boundingBox.height); const radius: f32 = (config.corner_radius.top_left * 2) / @min(bounding_box.width, bounding_box.height);
rl.drawRectangleRounded( rl.drawRectangleRounded(
rl.Rectangle{ rl.Rectangle{
.x = boundingBox.x, .x = bounding_box.x,
.y = boundingBox.y, .y = bounding_box.y,
.width = boundingBox.width, .width = bounding_box.width,
.height = boundingBox.height, .height = bounding_box.height,
}, },
radius, radius,
8, 8,
@ -74,103 +74,103 @@ pub fn clayRaylibRender(renderCommands: *cl.ClayArray(cl.RenderCommand), allocat
); );
} else { } else {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(boundingBox.x), @intFromFloat(bounding_box.x),
@intFromFloat(boundingBox.y), @intFromFloat(bounding_box.y),
@intFromFloat(boundingBox.width), @intFromFloat(bounding_box.width),
@intFromFloat(boundingBox.height), @intFromFloat(bounding_box.height),
clayColorToRaylibColor(config.color), clayColorToRaylibColor(config.color),
); );
} }
}, },
.Border => { .Border => {
const config = renderCommand.config.borderElementConfig; const config = render_command.config.border_element_config;
if (config.left.width > 0) { if (config.left.width > 0) {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(math.round(boundingBox.x)), @intFromFloat(math.round(bounding_box.x)),
@intFromFloat(math.round(boundingBox.y + config.cornerRadius.topLeft)), @intFromFloat(math.round(bounding_box.y + config.corner_radius.top_left)),
@intCast(config.left.width), @intCast(config.left.width),
@intFromFloat(math.round(boundingBox.height - config.cornerRadius.topLeft - config.cornerRadius.bottomLeft)), @intFromFloat(math.round(bounding_box.height - config.corner_radius.top_left - config.corner_radius.bottom_left)),
clayColorToRaylibColor(config.left.color), clayColorToRaylibColor(config.left.color),
); );
} }
if (config.right.width > 0) { if (config.right.width > 0) {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(math.round(boundingBox.x + boundingBox.width - @as(f32, @floatFromInt(config.right.width)))), @intFromFloat(math.round(bounding_box.x + bounding_box.width - @as(f32, @floatFromInt(config.right.width)))),
@intFromFloat(math.round(boundingBox.y + config.cornerRadius.topRight)), @intFromFloat(math.round(bounding_box.y + config.corner_radius.top_right)),
@intCast(config.right.width), @intCast(config.right.width),
@intFromFloat(math.round(boundingBox.height - config.cornerRadius.topRight - config.cornerRadius.bottomRight)), @intFromFloat(math.round(bounding_box.height - config.corner_radius.top_right - config.corner_radius.bottom_right)),
clayColorToRaylibColor(config.right.color), clayColorToRaylibColor(config.right.color),
); );
} }
if (config.top.width > 0) { if (config.top.width > 0) {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(math.round(boundingBox.x + config.cornerRadius.topLeft)), @intFromFloat(math.round(bounding_box.x + config.corner_radius.top_left)),
@intFromFloat(math.round(boundingBox.y)), @intFromFloat(math.round(bounding_box.y)),
@intFromFloat(math.round(boundingBox.width - config.cornerRadius.topLeft - config.cornerRadius.topRight)), @intFromFloat(math.round(bounding_box.width - config.corner_radius.top_left - config.corner_radius.top_right)),
@intCast(config.top.width), @intCast(config.top.width),
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.top.color),
); );
} }
if (config.bottom.width > 0) { if (config.bottom.width > 0) {
rl.drawRectangle( rl.drawRectangle(
@intFromFloat(math.round(boundingBox.x + config.cornerRadius.bottomLeft)), @intFromFloat(math.round(bounding_box.x + config.corner_radius.bottom_left)),
@intFromFloat(math.round(boundingBox.y + boundingBox.height - @as(f32, @floatFromInt(config.bottom.width)))), @intFromFloat(math.round(bounding_box.y + bounding_box.height - @as(f32, @floatFromInt(config.bottom.width)))),
@intFromFloat(math.round(boundingBox.width - config.cornerRadius.bottomLeft - config.cornerRadius.bottomRight)), @intFromFloat(math.round(bounding_box.width - config.corner_radius.bottom_left - config.corner_radius.bottom_right)),
@intCast(config.bottom.width), @intCast(config.bottom.width),
clayColorToRaylibColor(config.bottom.color), clayColorToRaylibColor(config.bottom.color),
); );
} }
if (config.cornerRadius.topLeft > 0) { if (config.corner_radius.top_left > 0) {
rl.drawRing( rl.drawRing(
rl.Vector2{ rl.Vector2{
.x = math.round(boundingBox.x + config.cornerRadius.topLeft), .x = math.round(bounding_box.x + config.corner_radius.top_left),
.y = math.round(boundingBox.y + config.cornerRadius.topLeft), .y = math.round(bounding_box.y + config.corner_radius.top_left),
}, },
math.round(config.cornerRadius.topLeft - @as(f32, @floatFromInt(config.top.width))), math.round(config.corner_radius.top_left - @as(f32, @floatFromInt(config.top.width))),
config.cornerRadius.topLeft, config.corner_radius.top_left,
180, 180,
270, 270,
10, 10,
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.top.color),
); );
} }
if (config.cornerRadius.topRight > 0) { if (config.corner_radius.top_right > 0) {
rl.drawRing( rl.drawRing(
rl.Vector2{ rl.Vector2{
.x = math.round(boundingBox.x + boundingBox.width - config.cornerRadius.topRight), .x = math.round(bounding_box.x + bounding_box.width - config.corner_radius.top_right),
.y = math.round(boundingBox.y + config.cornerRadius.topRight), .y = math.round(bounding_box.y + config.corner_radius.top_right),
}, },
math.round(config.cornerRadius.topRight - @as(f32, @floatFromInt(config.top.width))), math.round(config.corner_radius.top_right - @as(f32, @floatFromInt(config.top.width))),
config.cornerRadius.topRight, config.corner_radius.top_right,
270, 270,
360, 360,
10, 10,
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.top.color),
); );
} }
if (config.cornerRadius.bottomLeft > 0) { if (config.corner_radius.bottom_left > 0) {
rl.drawRing( rl.drawRing(
rl.Vector2{ rl.Vector2{
.x = math.round(boundingBox.x + config.cornerRadius.bottomLeft), .x = math.round(bounding_box.x + config.corner_radius.bottom_left),
.y = math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomLeft), .y = math.round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_left),
}, },
math.round(config.cornerRadius.bottomLeft - @as(f32, @floatFromInt(config.top.width))), math.round(config.corner_radius.bottom_left - @as(f32, @floatFromInt(config.top.width))),
config.cornerRadius.bottomLeft, config.corner_radius.bottom_left,
90, 90,
180, 180,
10, 10,
clayColorToRaylibColor(config.bottom.color), clayColorToRaylibColor(config.bottom.color),
); );
} }
if (config.cornerRadius.bottomRight > 0) { if (config.corner_radius.bottom_right > 0) {
rl.drawRing( rl.drawRing(
rl.Vector2{ rl.Vector2{
.x = math.round(boundingBox.x + boundingBox.width - config.cornerRadius.bottomRight), .x = math.round(bounding_box.x + bounding_box.width - config.corner_radius.bottom_right),
.y = math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomRight), .y = math.round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_right),
}, },
math.round(config.cornerRadius.bottomRight - @as(f32, @floatFromInt(config.top.width))), math.round(config.corner_radius.bottom_right - @as(f32, @floatFromInt(config.top.width))),
config.cornerRadius.bottomRight, config.corner_radius.bottom_right,
0.1, 0.1,
90, 90,
10, 10,
@ -186,10 +186,10 @@ pub fn clayRaylibRender(renderCommands: *cl.ClayArray(cl.RenderCommand), allocat
} }
pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dimensions { pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dimensions {
const font = raylib_fonts[config.fontId].?; const font = raylib_fonts[config.font_id].?;
const text: []const u8 = clay_text; const text: []const u8 = clay_text;
const font_size: f32 = @floatFromInt(config.fontSize); const font_size: f32 = @floatFromInt(config.font_size);
const letter_spacing: f32 = @floatFromInt(config.letterSpacing); const letter_spacing: f32 = @floatFromInt(config.letter_spacing);
const line_spacing = config.lineSpacing; const line_spacing = config.lineSpacing;
var temp_byte_counter: usize = 0; var temp_byte_counter: usize = 0;

86
src/root.zig
View file

@ -18,7 +18,7 @@ pub const Dimensions = extern struct {
pub const Arena = extern struct { pub const Arena = extern struct {
label: String, label: String,
nextAllocation: u64, next_allocation: u64,
capacity: u64, capacity: u64,
memory: [*c]c_char, memory: [*c]c_char,
}; };
@ -33,10 +33,10 @@ pub const BoundingBox = extern struct {
pub const Color = [4]f32; pub const Color = [4]f32;
pub const CornerRadius = extern struct { pub const CornerRadius = extern struct {
topLeft: f32 = 0, top_left: f32 = 0,
topRight: f32 = 0, top_right: f32 = 0,
bottomLeft: f32 = 0, bottom_left: f32 = 0,
bottomRight: f32 = 0, bottom_right: f32 = 0,
}; };
pub const BorderData = extern struct { pub const BorderData = extern struct {
@ -47,8 +47,8 @@ pub const BorderData = extern struct {
pub const ElementId = extern struct { pub const ElementId = extern struct {
id: u32, id: u32,
offset: u32, offset: u32,
baseId: u32, base_id: u32,
stringId: String, string_id: String,
}; };
pub const EnumBackingType = u8; pub const EnumBackingType = u8;
@ -66,7 +66,7 @@ pub const RenderCommandType = enum(EnumBackingType) {
pub const RectangleElementConfig = extern struct { pub const RectangleElementConfig = extern struct {
color: Color = .{ 255, 255, 255, 255 }, color: Color = .{ 255, 255, 255, 255 },
cornerRadius: CornerRadius = .{}, corner_radius: CornerRadius = .{},
}; };
pub const TextWrapMode = enum(EnumBackingType) { pub const TextWrapMode = enum(EnumBackingType) {
@ -76,17 +76,17 @@ pub const TextWrapMode = enum(EnumBackingType) {
}; };
pub const TextElementConfig = extern struct { pub const TextElementConfig = extern struct {
textColor: Color = .{ 0, 0, 0, 255 }, text_color: Color = .{ 0, 0, 0, 255 },
fontId: u16 = 0, font_id: u16 = 0,
fontSize: u16 = 20, font_size: u16 = 20,
letterSpacing: u16 = 0, letter_spacing: u16 = 0,
lineSpacing: u16 = 0, lineSpacing: u16 = 0,
wrapMode: TextWrapMode = .Newlines, wrapMode: TextWrapMode = .Newlines,
}; };
pub const ImageElementConfig = extern struct { pub const ImageElementConfig = extern struct {
imageData: *anyopaque, image_data: *anyopaque,
sourceDimensions: Dimensions, source_dimensions: Dimensions,
}; };
pub const CustomElementConfig = extern struct { pub const CustomElementConfig = extern struct {
@ -99,7 +99,7 @@ pub const BorderElementConfig = extern struct {
top: BorderData, top: BorderData,
bottom: BorderData, bottom: BorderData,
betweenChildren: BorderData, betweenChildren: BorderData,
cornerRadius: CornerRadius, corner_radius: CornerRadius,
}; };
pub const ScrollElementConfig = extern struct { pub const ScrollElementConfig = extern struct {
@ -127,31 +127,31 @@ pub const FloatingAttachPoints = extern struct {
pub const FloatingElementConfig = extern struct { pub const FloatingElementConfig = extern struct {
offset: Vector2, offset: Vector2,
expand: Dimensions, expand: Dimensions,
zIndex: u16, z_index: u16,
parentId: u32, parent_id: u32,
attachment: FloatingAttachPoints, attachment: FloatingAttachPoints,
}; };
pub const ElementConfigUnion = extern union { pub const ElementConfigUnion = extern union {
rectangleElementConfig: *RectangleElementConfig, rectangle_element_config: *RectangleElementConfig,
textElementConfig: *TextElementConfig, text_element_config: *TextElementConfig,
imageElementConfig: *ImageElementConfig, image_element_config: *ImageElementConfig,
customElementConfig: *CustomElementConfig, customElementConfig: *CustomElementConfig,
borderElementConfig: *BorderElementConfig, border_element_config: *BorderElementConfig,
}; };
pub const RenderCommand = extern struct { pub const RenderCommand = extern struct {
boundingBox: BoundingBox, bounding_box: BoundingBox,
config: ElementConfigUnion, config: ElementConfigUnion,
text: String, text: String,
id: u32, id: u32,
commandType: RenderCommandType, command_type: RenderCommandType,
}; };
pub const ScrollContainerData = extern struct { pub const ScrollContainerData = extern struct {
scrollPosition: *Vector2, scroll_position: *Vector2,
scrollContainerDimensions: Dimensions, scroll_container_dimensions: Dimensions,
contentDimensions: Dimensions, content_dimensions: Dimensions,
config: ScrollElementConfig, config: ScrollElementConfig,
found: bool, found: bool,
}; };
@ -168,12 +168,12 @@ pub const SizingConstraintsMinMax = extern struct {
}; };
pub const SizingConstraints = extern union { pub const SizingConstraints = extern union {
sizeMinMax: SizingConstraintsMinMax, size_minmax: SizingConstraintsMinMax,
sizePercent: f32, size_percent: f32,
}; };
pub const SizingAxis = extern struct { pub const SizingAxis = extern struct {
constraints: SizingConstraints = .{ .sizePercent = 100 }, constraints: SizingConstraints = .{ .size_percent = 100 },
type: SizingType = .FIT, type: SizingType = .FIT,
}; };
@ -214,8 +214,8 @@ pub const ChildAlignment = extern struct {
pub const LayoutConfig = extern struct { pub const LayoutConfig = extern struct {
/// sizing of the element /// sizing of the element
size: Sizing = .{ size: Sizing = .{
.h = .{ .constraints = .{ .sizePercent = 100 }, .type = .GROW }, .h = .{ .constraints = .{ .size_percent = 100 }, .type = .GROW },
.w = .{ .constraints = .{ .sizePercent = 100 }, .type = .GROW }, .w = .{ .constraints = .{ .size_percent = 100 }, .type = .GROW },
}, },
/// padding arround children /// padding arround children
padding: Padding = .{}, padding: Padding = .{},
@ -231,7 +231,7 @@ pub fn ClayArray(comptime T: type) type {
return extern struct { return extern struct {
capacity: u32, capacity: u32,
length: u32, length: u32,
internalArray: [*c]T, internal_array: [*c]T,
}; };
} }
@ -305,12 +305,12 @@ pub const scrollConfig = extern_functions.Clay__StoreScrollElementConfig;
pub const borderConfig = extern_functions.Clay__StoreBorderElementConfig; pub const borderConfig = extern_functions.Clay__StoreBorderElementConfig;
pub const hashString = extern_functions.Clay__HashString; pub const hashString = extern_functions.Clay__HashString;
pub fn setPointerState(position: Vector2, pointerDown: bool) void { pub fn setPointerState(position: Vector2, pointer_down: bool) void {
extern_functions.Clay_SetPointerState(position, pointerDown); extern_functions.Clay_SetPointerState(position, pointer_down);
} }
pub fn updateScrollContainers(isPointerActive: bool, scrollDelta: Vector2, deltaTime: f32) void { pub fn updateScrollContainers(is_pointer_active: bool, scroll_delta: Vector2, delta_time: f32) void {
extern_functions.Clay_UpdateScrollContainers(isPointerActive, scrollDelta, deltaTime); extern_functions.Clay_UpdateScrollContainers(is_pointer_active, scroll_delta, delta_time);
} }
pub fn setMeasureTextFunction(comptime measureTextFunction: fn ([]const u8, *TextElementConfig) Dimensions) void { pub fn setMeasureTextFunction(comptime measureTextFunction: fn ([]const u8, *TextElementConfig) Dimensions) void {
@ -340,18 +340,18 @@ pub fn IDI(string: []const u8, index: u32) ElementId {
return hashString(makeClayString(string), index); return hashString(makeClayString(string), index);
} }
pub fn sizingGrow(sizeMinMax: SizingConstraintsMinMax) SizingAxis { pub fn sizingGrow(size_minmax: SizingConstraintsMinMax) SizingAxis {
return .{ .type = .GROW, .constraints = .{ .sizeMinMax = sizeMinMax } }; return .{ .type = .GROW, .constraints = .{ .size_minmax = size_minmax } };
} }
pub fn sizingFixed(size: f32) SizingAxis { pub fn sizingFixed(size: f32) SizingAxis {
return .{ .type = .FIT, .constraints = .{ .sizeMinMax = .{ .max = size, .min = size } } }; return .{ .type = .FIT, .constraints = .{ .size_minmax = .{ .max = size, .min = size } } };
} }
pub fn sizingPercent(sizePercent: f32) SizingAxis { pub fn sizingPercent(size_percent: f32) SizingAxis {
return .{ .type = .PERCENT, .constraints = .{ .sizePercent = sizePercent } }; return .{ .type = .PERCENT, .constraints = .{ .size_percent = size_percent } };
} }
pub fn sizingFit(sizeMinMax: SizingConstraintsMinMax) SizingAxis { pub fn sizingFit(size_minmax: SizingConstraintsMinMax) SizingAxis {
return .{ .type = SizingType.FIT, .constraints = .{ .sizeMinMax = sizeMinMax } }; return .{ .type = SizingType.FIT, .constraints = .{ .size_minmax = size_minmax } };
} }