changed naming convention to zig's

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

View file

@ -7,7 +7,7 @@ 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 sidebarItemLayout: cl.LayoutConfig = .{
const sidebar_item_layout: cl.LayoutConfig = .{
.size = .{
.w = cl.sizingGrow(.{}),
.h = cl.sizingFixed(50),
@ -51,7 +51,7 @@ var side_bar_handle: struct {
};
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();
}
@ -90,10 +90,10 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
cl.image(
cl.ID("ProfilePicture"),
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.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| {
@ -122,9 +122,9 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
return cl.endLayout();
}
fn loadFont(file_data: ?[]const u8, fontId: u16, fontSize: i32) void {
renderer.raylib_fonts[fontId] = rl.loadFontFromMemory(".ttf", file_data, fontSize * 2, null);
rl.setTextureFilter(renderer.raylib_fonts[fontId].?.texture, .texture_filter_bilinear);
fn loadFont(file_data: ?[]const u8, font_id: u16, font_size: i32) void {
renderer.raylib_fonts[font_id] = rl.loadFontFromMemory(".ttf", file_data, font_size * 2, null);
rl.setTextureFilter(renderer.raylib_fonts[font_id].?.texture, .texture_filter_bilinear);
}
pub fn main() anyerror!void {
@ -168,10 +168,10 @@ pub fn main() anyerror!void {
.w = @floatFromInt(rl.getScreenWidth()),
.h = @floatFromInt(rl.getScreenHeight()),
});
var renderCommands = createLayout(&profile_picture);
var render_commands = createLayout(&profile_picture);
rl.beginDrawing();
renderer.clayRaylibRender(&renderCommands, allocator);
renderer.clayRaylibRender(&render_commands, allocator);
rl.endDrawing();
side_bar_handle.tick();

View file

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

View file

@ -7,7 +7,7 @@ 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 sidebarItemLayout: cl.LayoutConfig = .{
const sidebar_item_layout: cl.LayoutConfig = .{
.size = .{
.w = cl.sizingGrow(.{}),
.h = cl.sizingFixed(50),
@ -15,7 +15,7 @@ const sidebarItemLayout: cl.LayoutConfig = .{
};
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();
}
@ -64,10 +64,10 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
cl.image(
cl.ID("ProfilePicture"),
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.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| {
@ -86,9 +86,9 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
return cl.endLayout();
}
fn loadFont(file_data: ?[]const u8, fontId: u16, fontSize: i32) void {
renderer.raylib_fonts[fontId] = rl.loadFontFromMemory(".ttf", file_data, fontSize * 2, null);
rl.setTextureFilter(renderer.raylib_fonts[fontId].?.texture, .texture_filter_bilinear);
fn loadFont(file_data: ?[]const u8, font_id: u16, font_size: i32) void {
renderer.raylib_fonts[font_id] = rl.loadFontFromMemory(".ttf", file_data, font_size * 2, null);
rl.setTextureFilter(renderer.raylib_fonts[font_id].?.texture, .texture_filter_bilinear);
}
pub fn main() anyerror!void {
@ -132,52 +132,10 @@ pub fn main() anyerror!void {
.w = @floatFromInt(rl.getScreenWidth()),
.h = @floatFromInt(rl.getScreenHeight()),
});
var renderCommands = createLayout(&profile_picture);
var render_commands = createLayout(&profile_picture);
rl.beginDrawing();
renderer.clayRaylibRender(&renderCommands, allocator);
renderer.clayRaylibRender(&render_commands, allocator);
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 }),
);
}

View file

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

View file

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