second pass
This commit is contained in:
johan0A
parent
f6a86434e2
commit
3cf1e2c74e
13 changed files with 407 additions and 884 deletions
|
|
@ -54,7 +54,7 @@ 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, image_size: f32, max_width: f32, text: []const u8, image: *rl.Texture2D) void {
|
||||
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 {
|
||||
cl.UI(&.{
|
||||
.IDI("HeroBlob", index),
|
||||
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }),
|
||||
|
|
@ -65,7 +65,7 @@ fn LandingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, im
|
|||
.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 }));
|
||||
cl.text(text, .text(.{ .font_size = font_size, .font_id = font_id, .color = color }));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ fn landingPageDesktop() void {
|
|||
}),
|
||||
.border(.{ .left = border_data, .right = border_data }),
|
||||
})({
|
||||
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);
|
||||
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);
|
||||
|
||||
cl.UI(&.{
|
||||
.ID("ClayPresentation"),
|
||||
|
|
@ -106,12 +106,12 @@ fn landingPageDesktop() void {
|
|||
})({
|
||||
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 }),
|
||||
.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }),
|
||||
);
|
||||
cl.UI(&.{ .ID("ClayPresentation_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 }),
|
||||
.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -119,11 +119,11 @@ fn landingPageDesktop() void {
|
|||
.ID("HeroImageOuter"),
|
||||
.layout(.{ .sizing = .{ .w = .percent(0.45) }, .direction = .TOP_TO_BOTTOM, .child_alignment = .{ .x = .CENTER }, .child_gap = 16 }),
|
||||
})({
|
||||
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);
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -141,19 +141,19 @@ fn landingPageMobile() void {
|
|||
.child_gap = 16,
|
||||
}),
|
||||
})({
|
||||
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(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6);
|
||||
cl.UI(&.{
|
||||
.ID("LeftText"),
|
||||
.layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }),
|
||||
})({
|
||||
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 }),
|
||||
.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }),
|
||||
);
|
||||
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 }),
|
||||
.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -161,11 +161,11 @@ fn landingPageMobile() void {
|
|||
.ID("HeroImageOuter"),
|
||||
.layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .child_alignment = .{ .x = .CENTER }, .child_gap = 16 }),
|
||||
})({
|
||||
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);
|
||||
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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -399,7 +399,7 @@ fn rendererPage(title_text_config: cl.TextElementConfig, width_sizing: cl.Sizing
|
|||
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
|
||||
);
|
||||
cl.text(
|
||||
"There's even an HTML renderer - you're looking at it .right now!",
|
||||
"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 }),
|
||||
);
|
||||
});
|
||||
|
|
@ -468,7 +468,7 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
|
|||
.child_gap = 24,
|
||||
}),
|
||||
})({
|
||||
cl.text("Clay", cl.Config.text(.{
|
||||
cl.text("Clay", .text(.{
|
||||
.font_id = FONT_ID_BODY_24,
|
||||
.font_size = 24,
|
||||
.color = .{ 61, 26, 5, 255 },
|
||||
|
|
@ -477,10 +477,10 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
|
|||
|
||||
if (!mobileScreen) {
|
||||
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 } }));
|
||||
cl.text("Examples", .text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }));
|
||||
});
|
||||
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 } }));
|
||||
cl.text("Docs", .text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -495,7 +495,7 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
|
|||
})({
|
||||
cl.text(
|
||||
"Github",
|
||||
cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }),
|
||||
.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -550,8 +550,8 @@ pub fn main() anyerror!void {
|
|||
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 });
|
||||
const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(memory);
|
||||
_ = cl.initialize(arena, .{ .h = 1000, .w = 1000 }, .{});
|
||||
cl.setMeasureTextFunction(renderer.measureText);
|
||||
|
||||
// init raylib
|
||||
|
|
|
|||
|
|
@ -20,25 +20,25 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
|
|||
const render_command = cl.renderCommandArrayGet(render_commands, @intCast(i));
|
||||
const bounding_box = render_command.bounding_box;
|
||||
switch (render_command.command_type) {
|
||||
.None => {},
|
||||
.Text => {
|
||||
.none => {},
|
||||
.text => {
|
||||
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(u8, 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);
|
||||
const fontToUse: rl.Font = raylib_fonts[render_command.config.text_config.font_id].?;
|
||||
rl.setTextLineSpacing(render_command.config.text_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),
|
||||
@floatFromInt(render_command.config.text_config.font_size),
|
||||
@floatFromInt(render_command.config.text_config.letter_spacing),
|
||||
clayColorToRaylibColor(render_command.config.text_config.color),
|
||||
);
|
||||
},
|
||||
.Image => {
|
||||
.image => {
|
||||
const image_texture: *const rl.Texture2D = @ptrCast(
|
||||
@alignCast(render_command.config.image_element_config.image_data),
|
||||
@alignCast(render_command.config.image_config.image_data),
|
||||
);
|
||||
rl.drawTextureEx(
|
||||
image_texture.*,
|
||||
|
|
@ -48,7 +48,7 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
|
|||
rl.Color.white,
|
||||
);
|
||||
},
|
||||
.ScissorStart => {
|
||||
.scissor_start => {
|
||||
rl.beginScissorMode(
|
||||
@intFromFloat(math.round(bounding_box.x)),
|
||||
@intFromFloat(math.round(bounding_box.y)),
|
||||
|
|
@ -56,9 +56,9 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
|
|||
@intFromFloat(math.round(bounding_box.height)),
|
||||
);
|
||||
},
|
||||
.ScissorEnd => rl.endScissorMode(),
|
||||
.Rectangle => {
|
||||
const config = render_command.config.rectangle_element_config;
|
||||
.scissor_end => rl.endScissorMode(),
|
||||
.rectangle => {
|
||||
const config = render_command.config.rectangle_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(
|
||||
|
|
@ -82,8 +82,8 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
|
|||
);
|
||||
}
|
||||
},
|
||||
.Border => {
|
||||
const config = render_command.config.border_element_config;
|
||||
.border => {
|
||||
const config = render_command.config.border_config;
|
||||
if (config.left.width > 0) {
|
||||
rl.drawRectangle(
|
||||
@intFromFloat(math.round(bounding_box.x)),
|
||||
|
|
@ -178,7 +178,7 @@ pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), alloca
|
|||
);
|
||||
}
|
||||
},
|
||||
.Custom => {
|
||||
.custom => {
|
||||
// Implement custom element rendering here
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue