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

first pass with unsolved text wrapping bug

Browse source
This commit is contained in:
johan0A 2025-01-13 00:06:27 +01:00
parent d4e1d84e5b
commit f6a86434e2
8 changed files with 679 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

86
examples/bug/build.zig Normal file
View file

@ -0,0 +1,86 @@
const std = @import("std");
const B = std.Build;
pub fn build(b: *B) void {
const target = b.standardTargetOptions(.{});
const optimize = b.standardOptimizeOption(.{});
{
const exe = b.addExecutable(.{
.name = "debug",
.root_source_file = b.path("src/main.zig"),
.target = target,
.optimize = optimize,
});
addDependencies(exe, b, target, optimize);
b.installArtifact(exe);
const run_cmd = b.addRunArtifact(exe);
run_cmd.step.dependOn(b.getInstallStep());
if (b.args) |args| {
run_cmd.addArgs(args);
}
const run_step = b.step("run", "Run the app");
run_step.dependOn(&run_cmd.step);
}
{
const exe_unit_tests = b.addTest(.{
.root_source_file = b.path("src/main.zig"),
.target = target,
.optimize = optimize,
});
addDependencies(exe_unit_tests, b, target, optimize);
const run_exe_unit_tests = b.addRunArtifact(exe_unit_tests);
const test_step = b.step("test", "Run unit tests");
test_step.dependOn(&run_exe_unit_tests.step);
}
{
const exe_check = b.addExecutable(.{
.name = "check",
.root_source_file = b.path("src/main.zig"),
.target = target,
.optimize = optimize,
});
addDependencies(exe_check, b, target, optimize);
const tests_check = b.addTest(.{
.name = "check",
.root_source_file = b.path("src/main.zig"),
.target = target,
.optimize = optimize,
});
addDependencies(tests_check, b, target, optimize);
const check = b.step("check", "Check if exe and tests compile");
check.dependOn(&exe_check.step);
check.dependOn(&tests_check.step);
}
}
fn addDependencies(
compile_step: *B.Step.Compile,
b: *B,
target: B.ResolvedTarget,
optimize: std.builtin.OptimizeMode,
) void {
const zclay_dep = b.dependency("zclay", .{
.target = target,
.optimize = optimize,
});
const zclay = zclay_dep.module("zclay");
compile_step.root_module.addImport("zclay", zclay);
const raylib_dep = b.dependency("raylib-zig", .{
.target = target,
.optimize = optimize,
});
const raylib = raylib_dep.module("raylib");
compile_step.root_module.addImport("raylib", raylib);
const raylib_artifact = raylib_dep.artifact("raylib");
compile_step.linkLibrary(raylib_artifact);
}

20
examples/bug/build.zig.zon Normal file
View file

@ -0,0 +1,20 @@
.{
.name = "zig-exe-template",
.version = "0.0.0",
.dependencies = .{
.zclay = .{
.path = "../../",
},
.@"raylib-zig" = .{
.url = "https://github.com/Not-Nik/raylib-zig/archive/35332edacf2e03236220f12a8dd3410b1c39d9eb.tar.gz",
.hash = "1220c34fe472645e173a7168eb513ca8343af3c3f61b618daedda30ec3932b002637",
},
},
.paths = .{
"build.zig",
"build.zig.zon",
"src",
"LICENSE",
"README.md",
},
}

154
examples/bug/src/main.zig Normal file
View file

@ -0,0 +1,154 @@
const std = @import("std");
const rl = @import("raylib");
const cl = @import("zclay");
const renderer = @import("raylib_render_clay.zig");
const FONT_ID_BODY_30 = 6;
const COLOR_LIGHT = cl.Color{ 244, 235, 230, 255 };
const COLOR_LIGHT_HOVER = cl.Color{ 224, 215, 210, 255 };
const COLOR_BUTTON_HOVER = cl.Color{ 238, 227, 225, 255 };
const COLOR_BROWN = cl.Color{ 61, 26, 5, 255 };
const COLOR_RED = cl.Color{ 168, 66, 28, 255 };
const COLOR_RED_HOVER = cl.Color{ 148, 46, 8, 255 };
const COLOR_ORANGE = cl.Color{ 225, 138, 50, 255 };
const COLOR_BLUE = cl.Color{ 111, 173, 162, 255 };
const COLOR_TEAL = cl.Color{ 111, 173, 162, 255 };
const COLOR_BLUE_DARK = cl.Color{ 2, 32, 82, 255 };
const COLOR_ZIG_LOGO = cl.Color{ 247, 164, 29, 255 };
// Colors for top stripe
const COLORS_TOP_BORDER = [_]cl.Color{
.{ 240, 213, 137, 255 },
.{ 236, 189, 80, 255 },
.{ 225, 138, 50, 255 },
.{ 223, 110, 44, 255 },
.{ 168, 66, 28, 255 },
};
const border_data = cl.BorderData{ .width = 2, .color = COLOR_RED };
var window_height: isize = 0;
var window_width: isize = 0;
fn LandingPageBlob_(index: u32, font_size: u16, font_id: u16, color: cl.Color, max_width: f32, text: []const u8) void {
// std.debug.print("\nBLOB START\n", .{});
if (cl.OPEN(&.{
.IDI("HeroBlob", index),
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }),
.border(.outside(color, 2, 0)),
})) {
defer cl.CLOSE();
cl.text(text, cl.Config.text(.{ .font_size = font_size, .font_id = font_id, .color = color }));
}
// std.debug.print("BLOB END\n\n", .{});
}
fn LandingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, max_width: f32, text: []const u8) void {
// std.debug.print("\nBLOB START\n", .{});
cl.UI(&.{
.IDI("HeroBlob", index),
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }),
.border(.outside(color, 2, 0)),
})({
cl.text(text, cl.Config.text(.{ .font_size = font_size, .font_id = font_id, .color = color }));
});
// std.debug.print("BLOB END\n\n", .{});
}
fn createLayout() cl.ClayArray(cl.RenderCommand) {
cl.beginLayout();
// cl.UI(&.{
// .ID("ScrollContainerBackgroundRectangle"),
// .scroll(.{ .vertical = true }),
// .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM, .child_gap = 10 }),
// .rectangle(.{ .color = COLOR_LIGHT }),
// })({
// LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings");
// @call(.always_inline, LandingPageBlob, .{ 2, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings" });
// });
if (cl.OPEN(&.{
.ID("ScrollContainerBackgroundRectangle"),
.scroll(.{ .vertical = true }),
.layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM, .child_gap = 10 }),
.rectangle(.{ .color = COLOR_LIGHT }),
})) {
defer cl.CLOSE();
// LandingPageBlob_(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings");
// std.debug.print("\n==\n\n", .{});
@call(.always_inline, LandingPageBlob_, .{ 2, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 510, "The official Clay website recreated with zclay: clay-zig-bindings" });
}
return cl.endLayout();
}
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, .bilinear);
}
fn loadImage(comptime path: [:0]const u8) rl.Texture2D {
const texture = rl.loadTextureFromImage(rl.loadImageFromMemory(@ptrCast(std.fs.path.extension(path)), @embedFile(path)));
rl.setTextureFilter(texture, .bilinear);
return texture;
}
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,
.window_resizable = true,
});
rl.initWindow(1000, 1000, "Raylib zig Example");
rl.setWindowMinSize(300, 100);
rl.setTargetFPS(60);
// load assets
loadFont(@embedFile("resources/Quicksand-Semibold.ttf"), FONT_ID_BODY_30, 30);
var debug_mode_enabled = false;
while (!rl.windowShouldClose()) {
if (rl.isKeyPressed(.d)) {
debug_mode_enabled = !debug_mode_enabled;
cl.setDebugModeEnabled(debug_mode_enabled);
}
window_width = rl.getScreenWidth();
window_height = rl.getScreenHeight();
const mouse_pos = rl.getMousePosition();
cl.setPointerState(.{
.x = mouse_pos.x,
.y = mouse_pos.y,
}, rl.isMouseButtonDown(.left));
const scroll_delta = rl.getMouseWheelMoveV().multiply(.{ .x = 6, .y = 6 });
cl.updateScrollContainers(
false,
.{ .x = scroll_delta.x, .y = scroll_delta.y },
rl.getFrameTime(),
);
cl.setLayoutDimensions(.{
.w = @floatFromInt(window_width),
.h = @floatFromInt(window_height),
});
var render_commands = createLayout();
rl.beginDrawing();
renderer.clayRaylibRender(&render_commands, allocator);
rl.endDrawing();
// @panic("");
}
}

234
examples/bug/src/raylib_render_clay.zig Normal file
View file

@ -0,0 +1,234 @@
const std = @import("std");
const rl = @import("raylib");
const cl = @import("zclay");
const math = std.math;
pub fn clayColorToRaylibColor(color: cl.Color) rl.Color {
return rl.Color{
.r = @intFromFloat(color[0]),
.g = @intFromFloat(color[1]),
.b = @intFromFloat(color[2]),
.a = @intFromFloat(color[3]),
};
}
pub var raylib_fonts: [10]?rl.Font = .{null} ** 10;
pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), allocator: std.mem.Allocator) void {
var i: usize = 0;
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 = 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[render_command.config.text_element_config.font_id].?;
rl.setTextLineSpacing(render_command.config.text_element_config.line_height);
rl.drawTextEx(
fontToUse,
@ptrCast(@alignCast(cloned.ptr)),
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.color),
);
},
.Image => {
const image_texture: *const rl.Texture2D = @ptrCast(
@alignCast(render_command.config.image_element_config.image_data),
);
rl.drawTextureEx(
image_texture.*,
rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y },
0,
bounding_box.width / @as(f32, @floatFromInt(image_texture.width)),
rl.Color.white,
);
},
.ScissorStart => {
rl.beginScissorMode(
@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 = 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 = bounding_box.x,
.y = bounding_box.y,
.width = bounding_box.width,
.height = bounding_box.height,
},
radius,
8,
clayColorToRaylibColor(config.color),
);
} else {
rl.drawRectangle(
@intFromFloat(bounding_box.x),
@intFromFloat(bounding_box.y),
@intFromFloat(bounding_box.width),
@intFromFloat(bounding_box.height),
clayColorToRaylibColor(config.color),
);
}
},
.Border => {
const config = render_command.config.border_element_config;
if (config.left.width > 0) {
rl.drawRectangle(
@intFromFloat(math.round(bounding_box.x)),
@intFromFloat(math.round(bounding_box.y + config.corner_radius.top_left)),
@intCast(config.left.width),
@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(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(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(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(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.corner_radius.top_left > 0) {
rl.drawRing(
rl.Vector2{
.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.corner_radius.top_left - @as(f32, @floatFromInt(config.top.width))),
config.corner_radius.top_left,
180,
270,
10,
clayColorToRaylibColor(config.top.color),
);
}
if (config.corner_radius.top_right > 0) {
rl.drawRing(
rl.Vector2{
.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.corner_radius.top_right - @as(f32, @floatFromInt(config.top.width))),
config.corner_radius.top_right,
270,
360,
10,
clayColorToRaylibColor(config.top.color),
);
}
if (config.corner_radius.bottom_left > 0) {
rl.drawRing(
rl.Vector2{
.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.corner_radius.bottom_left - @as(f32, @floatFromInt(config.top.width))),
config.corner_radius.bottom_left,
90,
180,
10,
clayColorToRaylibColor(config.bottom.color),
);
}
if (config.corner_radius.bottom_right > 0) {
rl.drawRing(
rl.Vector2{
.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.corner_radius.bottom_right - @as(f32, @floatFromInt(config.top.width))),
config.corner_radius.bottom_right,
0.1,
90,
10,
clayColorToRaylibColor(config.bottom.color),
);
}
},
.Custom => {
// Implement custom element rendering here
},
}
}
}
pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig) cl.Dimensions {
const font = raylib_fonts[config.font_id].?;
const text: []const u8 = clay_text;
const font_size: f32 = @floatFromInt(config.font_size);
const letter_spacing: f32 = @floatFromInt(config.letter_spacing);
const line_height = config.line_height;
var temp_byte_counter: usize = 0;
var byte_counter: usize = 0;
var text_width: f32 = 0.0;
var temp_text_width: f32 = 0.0;
var text_height: f32 = font_size;
const scale_factor: f32 = font_size / @as(f32, @floatFromInt(font.baseSize));
var utf8 = std.unicode.Utf8View.initUnchecked(text).iterator();
while (utf8.nextCodepoint()) |codepoint| {
byte_counter += std.unicode.utf8CodepointSequenceLength(codepoint) catch 1;
const index: usize = @intCast(
rl.getGlyphIndex(font, @as(i32, @intCast(codepoint))),
);
if (codepoint != '\n') {
if (font.glyphs[index].advanceX != 0) {
text_width += @floatFromInt(font.glyphs[index].advanceX);
} else {
text_width += font.recs[index].width + @as(f32, @floatFromInt(font.glyphs[index].offsetX));
}
} else {
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_height));
}
if (temp_byte_counter < byte_counter) temp_byte_counter = byte_counter;
}
if (temp_text_width < text_width) temp_text_width = text_width;
std.debug.print("\"{s}\" => .w = {d}\n", .{ clay_text, temp_text_width * scale_factor + (@as(f32, @floatFromInt(temp_byte_counter)) - 1) * letter_spacing });
return cl.Dimensions{
.h = text_height,
.w = temp_text_width * scale_factor + (@as(f32, @floatFromInt(temp_byte_counter)) - 1) * letter_spacing,
};
}

BIN
examples/bug/src/resources/Quicksand-Semibold.ttf Normal file
View file

Binary file not shown.

298
examples/clay-official-website/src/main.zig
View file

@ -55,23 +55,22 @@ var window_height: isize = 0;
var window_width: isize = 0;
fn LandingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, image_size: f32, max_width: f32, text: []const u8, image: *rl.Texture2D) void {
if (cl.OPEN(&.{
cl.UI(&.{
.IDI("HeroBlob", index),
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }),
.border(.outside(color, 2, 10)),
})) {
defer cl.CLOSE();
cl.singleElem(&.{
})({
cl.UI(&.{
.IDI("CheckImage", index),
.layout(.{ .sizing = .{ .w = .fixed(image_size) } }),
.image(.{ .image_data = image, .source_dimensions = .{ .w = 128, .h = 128 } }),
});
})({});
cl.text(text, cl.Config.text(.{ .font_size = font_size, .font_id = font_id, .color = color }));
}
});
}
fn landingPageDesktop() void {
if (cl.OPEN(&.{
cl.UI(&.{
.ID("LandingPage1Desktop"),
.layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
@ -79,9 +78,8 @@ fn landingPageDesktop() void {
.padding = .{ .x = 50 },
.child_gap = 16,
}),
})) {
defer cl.CLOSE();
if (cl.OPEN(&.{
})({
cl.UI(&.{
.ID("LandingPage1"),
.layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
@ -91,53 +89,49 @@ fn landingPageDesktop() void {
.child_gap = 32,
}),
.border(.{ .left = border_data, .right = border_data }),
})) {
defer cl.CLOSE();
LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6);
})({
LandingPageBlob(0, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6);
if (cl.OPEN(&.{
cl.UI(&.{
.ID("ClayPresentation"),
.layout(.{
.sizing = .grow,
.child_alignment = .{ .y = .CENTER },
.child_gap = 16,
}),
})) {
defer cl.CLOSE();
if (cl.OPEN(&.{
})({
cl.UI(&.{
.ID("LeftText"),
.layout(.{ .sizing = .{ .w = .percent(0.55) }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }),
})) {
defer cl.CLOSE();
})({
cl.text(
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
cl.Config.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }),
);
cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) });
cl.UI(&.{ .ID("ClayPresentation_Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) })({});
cl.text(
"Clay is laying out this webpage .right now!",
"Clay is laying out this webpage right now!",
cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
);
}
});
if (cl.OPEN(&.{
cl.UI(&.{
.ID("HeroImageOuter"),
.layout(.{ .sizing = .{ .w = .percent(0.45) }, .direction = .TOP_TO_BOTTOM, .child_alignment = .{ .x = .CENTER }, .child_gap = 16 }),
})) {
defer cl.CLOSE();
})({
LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, 32, 480, "High performance", &checkImage5);
LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, 32, 480, "Flexbox-style responsive layout", &checkImage4);
LandingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, 32, 480, "Declarative syntax", &checkImage3);
LandingPageBlob(4, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_2, 32, 480, "Single .h file for C/C++", &checkImage2);
LandingPageBlob(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, 32, 480, "Compile to 15kb .wasm", &checkImage1);
}
}
}
}
});
});
});
});
}
fn landingPageMobile() void {
if (cl.OPEN(&.{
cl.UI(&.{
.ID("LandingPage1Mobile"),
.layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
@ -146,42 +140,39 @@ fn landingPageMobile() void {
.padding = .{ .x = 16, .y = 32 },
.child_gap = 16,
}),
})) {
defer cl.CLOSE();
})({
LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6);
if (cl.OPEN(&.{
cl.UI(&.{
.ID("LeftText"),
.layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }),
})) {
defer cl.CLOSE();
})({
cl.text(
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
cl.Config.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }),
);
cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) });
cl.UI(&.{ .ID("LeftText_Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) })({});
cl.text(
"Clay is laying out this webpage .right now!",
cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
);
}
});
if (cl.OPEN(&.{
cl.UI(&.{
.ID("HeroImageOuter"),
.layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .child_alignment = .{ .x = .CENTER }, .child_gap = 16 }),
})) {
defer cl.CLOSE();
})({
LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, 32, 480, "High performance", &checkImage5);
LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, 32, 480, "Flexbox-style responsive layout", &checkImage4);
LandingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, 32, 480, "Declarative syntax", &checkImage3);
LandingPageBlob(4, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_2, 32, 480, "Single .h file for C/C++", &checkImage2);
LandingPageBlob(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, 32, 480, "Compile to 15kb .wasm", &checkImage1);
}
}
});
});
}
fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
const text_config = cl.Config.text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_RED });
if (cl.OPEN(&.{
cl.UI(&.{
.ID("HFileBoxOuter"),
.layout(.{
.direction = .TOP_TO_BOTTOM,
@ -190,20 +181,18 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
.padding = .{ .x = outer_padding, .y = 32 },
.child_gap = 8,
}),
})) {
defer cl.CLOSE();
if (cl.OPEN(&.{
})({
cl.UI(&.{
.ID("HFileIncludeOuter"),
.layout(.{ .padding = .{ .x = 8, .y = 4 } }),
.rectangle(.{ .color = COLOR_RED, .corner_radius = .all(8) }),
})) {
defer cl.CLOSE();
})({
cl.text("#include cl.h", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_LIGHT }));
}
});
cl.text("~2000 lines of C99.", text_config);
cl.text("Zero dependencies, including no C standard library", text_config);
}
if (cl.OPEN(&.{
});
cl.UI(&.{
.ID("BringYourOwnRendererOuter"),
.layout(.{
.direction = .TOP_TO_BOTTOM,
@ -212,84 +201,77 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
.padding = .{ .x = outer_padding, .y = 32 },
.child_gap = 8,
}),
})) {
defer cl.CLOSE();
})({
cl.text("Renderer agnostic.", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_ORANGE }));
cl.text("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", text_config);
cl.text("Flexible output for easy compositing in your custom engine or environment.", text_config);
}
});
}
fn featureBlocksDesktop() void {
if (cl.OPEN(&.{
cl.UI(&.{
.ID("FeatureBlocksOuter"),
.layout(.{
.sizing = .{ .w = .grow },
.child_alignment = .{ .y = .CENTER },
}),
.border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }),
})) {
defer cl.CLOSE();
})({
featureBlocks(.percent(0.5), 50);
}
});
}
fn featureBlocksMobile() void {
if (cl.OPEN(&.{
cl.UI(&.{
.ID("FeatureBlocksOuter"),
.layout(.{
.sizing = .{ .w = .grow },
.direction = .TOP_TO_BOTTOM,
}),
.border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }),
})) {
defer cl.CLOSE();
})({
featureBlocks(.grow, 16);
}
});
}
fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
if (cl.OPEN(&.{ .ID("SyntaxPageLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })) {
defer cl.CLOSE();
cl.UI(&.{ .ID("SyntaxPageLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
cl.text("Declarative Syntax", .text(title_text_config));
cl.singleElem(&.{
cl.UI(&.{
.ID("SyntaxSpacer"),
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }),
});
})({});
const text_conf = cl.Config.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED });
cl.text("Flexible and readable declarative syntax with nested UI element hierarchies.", text_conf);
cl.text("Mix elements with standard C code like loops, conditionals and functions.", text_conf);
cl.text("Create your own library of re-usable components from UI primitives like text, images and rectangles.", text_conf);
}
if (cl.OPEN(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })) {
defer cl.CLOSE();
cl.singleElem(&.{
});
cl.UI(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({
cl.UI(&.{
.ID("SyntaxPageRightImage"),
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 568 }) } }),
.image(.{ .image_data = &syntaxImage, .source_dimensions = .{ .h = 1136, .w = 1194 } }),
});
}
})({});
});
}
fn declarativeSyntaxPageDesktop() void {
if (cl.OPEN(&.{
cl.UI(&.{
.ID("SyntaxPageDesktop"),
.layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .child_alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 } }),
})) {
defer cl.CLOSE();
if (cl.OPEN(&.{
})({
cl.UI(&.{
.ID("SyntaxPage"),
.layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(32), .child_gap = 32 }),
.border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }),
})) {
defer cl.CLOSE();
})({
declarativeSyntaxPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .percent(0.5));
}
}
});
});
}
fn declarativeSyntaxPageMobile() void {
if (cl.OPEN(&.{
cl.UI(&.{
.ID("SyntaxPageMobile"),
.layout(.{
.direction = .TOP_TO_BOTTOM,
@ -298,10 +280,9 @@ fn declarativeSyntaxPageMobile() void {
.padding = .{ .x = 16, .y = 32 },
.child_gap = 16,
}),
})) {
defer cl.CLOSE();
})({
declarativeSyntaxPage(.{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_RED }, .grow);
}
});
}
fn colorLerp(a: cl.Color, b: cl.Color, amount: f32) cl.Color {
@ -311,10 +292,9 @@ fn colorLerp(a: cl.Color, b: cl.Color, amount: f32) cl.Color {
const LOREM_IPSUM_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
if (cl.OPEN(&.{ .ID("PerformanceLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })) {
defer cl.CLOSE();
cl.UI(&.{ .ID("PerformanceLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
cl.text("High Performance", .text(title_text_tonfig));
cl.singleElem(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) });
cl.UI(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) })({});
cl.text(
"Fast enough to recompute your entire UI every frame.",
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }),
@ -327,37 +307,33 @@ fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig,
"Simplify animations and reactive UI design by avoiding the standard performance hacks.",
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }),
);
}
if (cl.OPEN(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })) {
defer cl.CLOSE();
if (cl.OPEN(&.{
});
cl.UI(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({
cl.UI(&.{
.ID("PerformanceRightBorder"),
.layout(.{ .sizing = .{ .w = .grow, .h = .fixed(400) } }),
.border(.all(COLOR_LIGHT, 2, 0)),
})) {
defer cl.CLOSE();
if (cl.OPEN(&.{
})({
cl.UI(&.{
.ID("AnimationDemoContainerLeft"),
.layout(.{ .sizing = .{ .w = .percent(0.35 + 0.3 * lerp_value), .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(16) }),
.rectangle(.{ .color = colorLerp(COLOR_RED, COLOR_ORANGE, lerp_value) }),
})) {
defer cl.CLOSE();
})({
cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT }));
}
if (cl.OPEN(&.{
});
cl.UI(&.{
.ID("AnimationDemoContainerRight"),
.layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(16) }),
.rectangle(.{ .color = colorLerp(COLOR_ORANGE, COLOR_RED, lerp_value) }),
})) {
defer cl.CLOSE();
})({
cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT }));
}
}
}
});
});
});
}
fn highPerformancePageDesktop(lerp_value: f32) void {
if (cl.OPEN(&.{
cl.UI(&.{
.ID("PerformanceDesktop"),
.layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
@ -366,14 +342,13 @@ fn highPerformancePageDesktop(lerp_value: f32) void {
.child_gap = 64,
}),
.rectangle(.{ .color = COLOR_RED }),
})) {
defer cl.CLOSE();
})({
highPerformancePage(lerp_value, .{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_LIGHT }, .percent(0.5));
}
});
}
fn highPerformancePageMobile(lerp_value: f32) void {
if (cl.OPEN(&.{
cl.UI(&.{
.ID("PerformanceMobile"),
.layout(
.{
@ -385,41 +360,36 @@ fn highPerformancePageMobile(lerp_value: f32) void {
},
),
.rectangle(.{ .color = COLOR_RED }),
})) {
defer cl.CLOSE();
})({
highPerformancePage(lerp_value, .{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_LIGHT }, .grow);
}
});
}
fn rendererButtonActive(text: []const u8) void {
if (cl.OPEN(&.{
cl.UI(&.{
.layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }),
.rectangle(.{ .color = COLOR_RED, .corner_radius = .all(10) }),
})) {
defer cl.CLOSE();
})({
cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_LIGHT }));
}
});
}
fn rendererButtonInactive(index: u32, text: []const u8) void {
if (cl.OPEN(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })) {
defer cl.CLOSE();
if (cl.OPEN(&.{
cl.UI(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })({
cl.UI(&.{
.ID("RendererButtonInactiveInner", index),
.layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }),
.rectangle(.{ .color = COLOR_LIGHT, .corner_radius = .all(10) }),
})) {
defer cl.CLOSE();
})({
cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED }));
}
}
});
});
}
fn rendererPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
if (cl.OPEN(&.{ .ID("RendererLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })) {
defer cl.CLOSE();
cl.UI(&.{ .ID("RendererLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
cl.text("Renderer & Platform Agnostic", .text(title_text_config));
cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) });
cl.UI(&.{ .ID("RendererLeftText_Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) })({});
cl.text(
"Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.",
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
@ -432,41 +402,38 @@ fn rendererPage(title_text_config: cl.TextElementConfig, width_sizing: cl.Sizing
"There's even an HTML renderer - you're looking at it .right now!",
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
);
}
if (cl.OPEN(&.{
});
cl.UI(&.{
.ID("RendererRightText"),
.layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER }, .direction = .TOP_TO_BOTTOM, .child_gap = 16 }),
})) {
defer cl.CLOSE();
})({
cl.text("Try changing renderer!", .text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }));
cl.singleElem(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) });
cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) })({});
rendererButtonActive("Raylib Renderer");
}
});
}
fn rendererPageDesktop() void {
if (cl.OPEN(&.{
cl.UI(&.{
.ID("RendererPageDesktop"),
.layout(.{
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
.child_alignment = .{ .y = .CENTER },
.padding = .{ .x = 50 },
}),
})) {
defer cl.CLOSE();
if (cl.OPEN(&.{
})({
cl.UI(&.{
.ID("RendererPage"),
.layout(.{ .sizing = .grow, .child_alignment = .{ .y = .CENTER }, .padding = .all(32), .child_gap = 32 }),
.border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }),
})) {
defer cl.CLOSE();
})({
rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .percent(0.5));
}
}
});
});
}
fn rendererPageMobile() void {
if (cl.OPEN(&.{
cl.UI(&.{
.ID("RendererMobile"),
.layout(
.{
@ -478,23 +445,21 @@ fn rendererPageMobile() void {
},
),
.rectangle(.{ .color = COLOR_LIGHT }),
})) {
defer cl.CLOSE();
})({
rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .grow);
}
});
}
fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
const mobileScreen = window_width < 750;
cl.beginLayout();
if (cl.OPEN(&.{
cl.UI(&.{
.ID("OuterContainer"),
.layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }),
.rectangle(.{ .color = COLOR_LIGHT }),
})) {
defer cl.CLOSE();
if (cl.OPEN(&.{
})({
cl.UI(&.{
.ID("Header"),
.layout(.{
.sizing = .{ .h = .fixed(50), .w = .grow },
@ -502,27 +467,24 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
.padding = .{ .x = 32 },
.child_gap = 24,
}),
})) {
defer cl.CLOSE();
})({
cl.text("Clay", cl.Config.text(.{
.font_id = FONT_ID_BODY_24,
.font_size = 24,
.color = .{ 61, 26, 5, 255 },
}));
cl.singleElem(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) });
cl.UI(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) })({});
if (!mobileScreen) {
if (cl.OPEN(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })) {
defer cl.CLOSE();
cl.UI(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })({
cl.text("Examples", cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }));
}
if (cl.OPEN(&.{ .ID("LinkDocsOuter"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })) {
defer cl.CLOSE();
});
cl.UI(&.{ .ID("LinkDocsOuter"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })({
cl.text("Docs", cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }));
}
});
}
if (cl.OPEN(&.{
cl.UI(&.{
.ID("LinkGithubOuter"),
.layout(.{ .padding = .{ .x = 32, .y = 6 } }),
.border(.outside(COLOR_RED, 2, 10)),
@ -530,30 +492,28 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
.corner_radius = .all(10),
.color = if (cl.pointerOver(cl.getElementId("LinkGithubOuter"))) COLOR_LIGHT_HOVER else COLOR_LIGHT,
}),
})) {
defer cl.CLOSE();
})({
cl.text(
"Github",
cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }),
);
}
}
});
});
inline for (COLORS_TOP_BORDER, 0..) |color, i| {
cl.singleElem(&.{
cl.UI(&.{
.ID("TopBorder" ++ .{i}),
.layout(.{ .sizing = .{ .h = .fixed(4), .w = .grow } }),
.rectangle(.{ .color = color }),
});
})({});
}
if (cl.OPEN(&.{
cl.UI(&.{
.ID("ScrollContainerBackgroundRectangle"),
.scroll(.{ .vertical = true }),
.layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }),
.rectangle(.{ .color = COLOR_LIGHT }),
.border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }),
})) {
defer cl.CLOSE();
})({
if (!mobileScreen) {
landingPageDesktop();
featureBlocksDesktop();
@ -567,8 +527,8 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
highPerformancePageMobile(lerp_value);
rendererPageMobile();
}
}
}
});
});
return cl.endLayout();
}
@ -601,7 +561,7 @@ pub fn main() anyerror!void {
});
rl.initWindow(1000, 1000, "Raylib zig Example");
rl.setWindowMinSize(300, 100);
rl.setTargetFPS(120);
rl.setTargetFPS(60);
// load assets
loadFont(@embedFile("resources/Calistoga-Regular.ttf"), FONT_ID_TITLE_56, 56);

56
src/root.zig
View file

@ -404,27 +404,56 @@ pub const renderCommandArrayGet = cdefs.Clay_RenderCommandArray_Get;
pub const setDebugModeEnabled = cdefs.Clay_SetDebugModeEnabled;
pub const hashString = cdefs.Clay__HashString;
threadlocal var nesting_level: i32 = 0;
pub fn OPEN(configs: []const Config) bool {
pub inline fn UI(configs: []const Config) fn (void) void {
std.debug.print("-> OPEN ELEMENT\n", .{});
cdefs.Clay__OpenElement();
nesting_level += 1;
for (configs) |config| {
switch (config) {
.Layout => |layoutConf| cdefs.Clay__AttachLayoutConfig(layoutConf),
.Layout => |layoutConf| {
std.debug.print("LAYOUT CONF: {}\n", .{layoutConf});
cdefs.Clay__AttachLayoutConfig(layoutConf);
},
.id => |id| cdefs.Clay__AttachId(id),
inline else => |elem_config| cdefs.Clay__AttachElementConfig(@ptrCast(elem_config), config),
inline else => |elem_config| {
std.debug.print("elem_config CONF: {}\n", .{elem_config});
cdefs.Clay__AttachElementConfig(@ptrCast(elem_config), config);
},
}
}
std.debug.print("-> POST ELEMENT\n", .{});
cdefs.Clay__ElementPostConfiguration();
return struct {
fn f(_: void) void {
std.time.sleep(1000);
std.debug.print("-> CLOSE ELEMENT\n", .{});
cdefs.Clay__CloseElement();
}
}.f;
}
pub fn OPEN(configs: []const Config) bool {
std.debug.print("-> OPEN ELEMENT\n", .{});
cdefs.Clay__OpenElement();
for (configs) |config| {
switch (config) {
.Layout => |layoutConf| {
std.debug.print("LAYOUT CONF: {}\n", .{layoutConf});
cdefs.Clay__AttachLayoutConfig(layoutConf);
},
.id => |id| cdefs.Clay__AttachId(id),
inline else => |elem_config| {
std.debug.print("elem_config CONF: {}\n", .{elem_config});
cdefs.Clay__AttachElementConfig(@ptrCast(elem_config), config);
},
}
}
std.debug.print("-> POST ELEMENT\n", .{});
cdefs.Clay__ElementPostConfiguration();
return true;
}
pub fn CLOSE() void {
nesting_level -= 1;
if (nesting_level < 0) {
std.debug.panic("clay.CLOSE() was called but no clay element is currently open", .{});
}
std.debug.print("-> CLOSE ELEMENT\n", .{});
cdefs.Clay__CloseElement();
}
@ -434,12 +463,6 @@ pub fn singleElem(configs: []const Config) void {
}
pub fn endLayout() ClayArray(RenderCommand) {
if (nesting_level > 0) {
std.debug.panic(
\\clay.endLayout() was called but {} clay elements are still currently open.
\\Make sure every call to clay.OPEN() is matched with a call to clay.CLOSE() before the end of the layout.
, .{nesting_level});
}
return cdefs.Clay_EndLayout();
}
@ -467,6 +490,7 @@ pub fn makeClayString(string: []const u8) String {
}
pub fn text(string: []const u8, config: Config) void {
// std.debug.print("TEXT 2 conf: {}\n", .{config.Text});
cdefs.Clay__OpenTextElement(makeClayString(string), config.Text);
}

16
test.zig Normal file
View file

@ -0,0 +1,16 @@
const std = @import("std");
fn CLOSE(_: void) void {
std.debug.print("CLOSE\n", .{});
}
inline fn UI() fn (void) void {
std.debug.print("OPEN\n", .{});
return CLOSE;
}
pub fn main() !void {
UI()({
std.debug.print("INSIDE\n", .{});
});
}