Mirrors/clay
1
0
Fork 0
mirror of https://github.com/nicbarker/clay.git synced 2025-12-23 17:41:06 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge 0e884d3f0a into c13feb2428

Browse source
This commit is contained in:
Rats 2025-11-23 23:05:26 -06:00 committed by GitHub
parent c13feb2428 0e884d3f0a
commit 6d324c1a3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 343 additions and 333 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/SDL3-simple-demo/main.c
View file

@ -55,10 +55,10 @@ Clay_RenderCommandArray ClayImageSample_CreateLayout() {
CLAY(CLAY_ID("OuterContainer"), { CLAY(CLAY_ID("OuterContainer"), {
.layout = { .layout = {
.layoutDirection = CLAY_TOP_TO_BOTTOM,
.sizing = layoutExpand, .sizing = layoutExpand,
.padding = CLAY_PADDING_ALL(16), .padding = CLAY_PADDING_ALL(16),
.childGap = 16 .childGap = 16,
.layoutDirection = CLAY_TOP_TO_BOTTOM,
} }
}) { }) {
CLAY(CLAY_ID("SampleImage"), { CLAY(CLAY_ID("SampleImage"), {

38
examples/cairo-pdf-rendering/main.c
View file

@ -47,35 +47,35 @@ void Layout() {
}) { }) {
CLAY(CLAY_ID("PageMargins"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, CLAY(CLAY_ID("PageMargins"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) },
.padding = { 70, 70, 50, 50 }, // Some nice looking page margins .padding = { 70, 70, 50, 50 }, // Some nice looking page margins
.layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 10,
.childGap = 10} .layoutDirection = CLAY_TOP_TO_BOTTOM}
}) { }) {
// Section Title // Section Title
CLAY_TEXT(CLAY_STRING("Features Overview"), CLAY_TEXT_CONFIG({ .fontId = FONT_CALLISTOGA, .textColor = PRIMARY, .fontSize = 24 })); CLAY_TEXT(CLAY_STRING("Features Overview"), CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontId = FONT_CALLISTOGA, .fontSize = 24 }));
// Feature Box // Feature Box
CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(0) }, .childGap = 10 }}) { CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(0) }, .childGap = 10 }}) {
CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(0) }}, .backgroundColor = ACCENT, .cornerRadius = CLAY_CORNER_RADIUS(12) }) { CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(0) }}, .backgroundColor = ACCENT, .cornerRadius = CLAY_CORNER_RADIUS(12) }) {
CLAY_AUTO_ID({ .layout = {.padding = CLAY_PADDING_ALL(20), .childGap = 4, .layoutDirection = CLAY_TOP_TO_BOTTOM }}) { CLAY_AUTO_ID({ .layout = {.padding = CLAY_PADDING_ALL(20), .childGap = 4, .layoutDirection = CLAY_TOP_TO_BOTTOM }}) {
CLAY_TEXT(CLAY_STRING("- High performance"), CLAY_TEXT(CLAY_STRING("- High performance"),
CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontSize = 14, .fontId = FONT_QUICKSAND })); CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontId = FONT_QUICKSAND, .fontSize = 14 }));
CLAY_TEXT(CLAY_STRING("- Declarative syntax"), CLAY_TEXT(CLAY_STRING("- Declarative syntax"),
CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontSize = 14, .fontId = FONT_QUICKSAND })); CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontId = FONT_QUICKSAND, .fontSize = 14 }));
CLAY_TEXT(CLAY_STRING("- Flexbox-style responsive layout"), CLAY_TEXT(CLAY_STRING("- Flexbox-style responsive layout"),
CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontSize = 14, .fontId = FONT_QUICKSAND })); CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontId = FONT_QUICKSAND, .fontSize = 14 }));
CLAY_TEXT(CLAY_STRING("- Single .h file for C/C++"), CLAY_TEXT(CLAY_STRING("- Single .h file for C/C++"),
CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontSize = 14, .fontId = FONT_QUICKSAND })); CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontId = FONT_QUICKSAND, .fontSize = 14 }));
CLAY_TEXT(CLAY_STRING("- And now with cairo!"), CLAY_TEXT(CLAY_STRING("- And now with cairo!"),
CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontSize = 14, .fontId = FONT_QUICKSAND })); CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontId = FONT_QUICKSAND, .fontSize = 14 }));
} }
} }
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.sizing = {CLAY_SIZING_FIT(0), CLAY_SIZING_GROW(0)}, .sizing = {CLAY_SIZING_FIT(0), CLAY_SIZING_GROW(0)},
.padding = CLAY_PADDING_ALL(10), .padding = CLAY_PADDING_ALL(10),
.layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 4,
.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER }, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
.childGap = 4 .layoutDirection = CLAY_TOP_TO_BOTTOM,
}, },
.backgroundColor = ACCENT, .backgroundColor = ACCENT,
.cornerRadius = CLAY_CORNER_RADIUS(8) .cornerRadius = CLAY_CORNER_RADIUS(8)
@ -84,9 +84,10 @@ void Layout() {
CLAY_AUTO_ID({ .layout = { CLAY_AUTO_ID({ .layout = {
.sizing = {CLAY_SIZING_FIT(0), CLAY_SIZING_GROW(0)}, .sizing = {CLAY_SIZING_FIT(0), CLAY_SIZING_GROW(0)},
.padding = { 30, 30, 0, 0 }, .padding = { 30, 30, 0, 0 },
.layoutDirection = CLAY_TOP_TO_BOTTOM, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER }}, .layoutDirection = CLAY_TOP_TO_BOTTOM},
.border = { .color = PRIMARY, .width = 2, 2, 2, 2 }, .cornerRadius = 10 .cornerRadius = {10},
.border = { .color = PRIMARY, .width = {2, 2, 2, 2} }
}) { }) {
CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_FIXED(32), CLAY_SIZING_FIXED(32) } }, .image = { .imageData = "resources/check.png" }}); CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_FIXED(32), CLAY_SIZING_FIXED(32) } }, .image = { .imageData = "resources/check.png" }});
} }
@ -96,13 +97,13 @@ void Layout() {
CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(16) } }}); CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(16) } }});
CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .childGap = 10, .layoutDirection = CLAY_TOP_TO_BOTTOM }}) { CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .childGap = 10, .layoutDirection = CLAY_TOP_TO_BOTTOM }}) {
CLAY_TEXT(CLAY_STRING("Cairo"), CLAY_TEXT_CONFIG({ .fontId = FONT_CALLISTOGA, .fontSize = 24, .textColor = PRIMARY })); CLAY_TEXT(CLAY_STRING("Cairo"), CLAY_TEXT_CONFIG({ .textColor = PRIMARY,.fontId = FONT_CALLISTOGA, .fontSize = 24 }));
CLAY_AUTO_ID({ .layout = { .padding = CLAY_PADDING_ALL(10) }, .backgroundColor = ACCENT, .cornerRadius = 10 }) { CLAY_AUTO_ID({ .layout = { .padding = CLAY_PADDING_ALL(10) }, .backgroundColor = ACCENT, .cornerRadius = {10} }) {
CLAY_TEXT(CLAY_STRING("Officiis quia quia qui inventore ratione voluptas et. Quidem sunt unde similique. Qui est et exercitationem cumque harum illum. Numquam placeat aliquid quo voluptatem. " CLAY_TEXT(CLAY_STRING("Officiis quia quia qui inventore ratione voluptas et. Quidem sunt unde similique. Qui est et exercitationem cumque harum illum. Numquam placeat aliquid quo voluptatem. "
"Deleniti saepe nihil exercitationem nemo illo. Consequatur beatae repellat provident similique. Provident qui exercitationem deserunt sapiente. Quam qui dolor corporis odit. " "Deleniti saepe nihil exercitationem nemo illo. Consequatur beatae repellat provident similique. Provident qui exercitationem deserunt sapiente. Quam qui dolor corporis odit. "
"Assumenda corrupti sunt culpa pariatur. Vero sit ut minima. In est consequatur minus et cum sint illum aperiam. Qui ipsa quas nisi omnis aut quia nobis. " "Assumenda corrupti sunt culpa pariatur. Vero sit ut minima. In est consequatur minus et cum sint illum aperiam. Qui ipsa quas nisi omnis aut quia nobis. "
"Corporis deserunt eum mollitia modi rerum voluptas. Expedita non ab esse. Sit voluptates eos voluptatem labore aspernatur quia eum. Modi cumque atque non. Sunt officiis corrupti neque ut inventore excepturi rem minima. Possimus sed soluta qui ea aut ipsum laborum fugit. " "Corporis deserunt eum mollitia modi rerum voluptas. Expedita non ab esse. Sit voluptates eos voluptatem labore aspernatur quia eum. Modi cumque atque non. Sunt officiis corrupti neque ut inventore excepturi rem minima. Possimus sed soluta qui ea aut ipsum laborum fugit. "
"Voluptate eum consectetur non. Quo autem voluptate soluta atque dolorum maxime. Officiis inventore omnis eveniet beatae ipsa optio. Unde voluptatum ut autem quia sit sit et. Ut inventore qui quia totam consequatur. Sit ea consequatur omnis rerum nulla aspernatur deleniti."), CLAY_TEXT_CONFIG({ .fontId = FONT_QUICKSAND, .fontSize = 16, .textColor = PRIMARY, .lineHeight = 16 })); "Voluptate eum consectetur non. Quo autem voluptate soluta atque dolorum maxime. Officiis inventore omnis eveniet beatae ipsa optio. Unde voluptatum ut autem quia sit sit et. Ut inventore qui quia totam consequatur. Sit ea consequatur omnis rerum nulla aspernatur deleniti."), CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontId = FONT_QUICKSAND, .fontSize = 16, .lineHeight = 16 }));
} }
} }
} }
@ -138,9 +139,9 @@ int main(void) {
Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize)); Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize));
// We initialize Clay with the same size // We initialize Clay with the same size
Clay_Initialize(clayMemory, (Clay_Dimensions) { width, height }, (Clay_ErrorHandler) { HandleClayErrors }); Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)width, (float)height }, (Clay_ErrorHandler) { HandleClayErrors });
char** fonts = (char*[]) { const char* fonts[2] = {
"Callistoga", "Callistoga",
"Quicksand Semibold" "Quicksand Semibold"
}; };
@ -168,4 +169,3 @@ int main(void) {
cairo_destroy(cr); cairo_destroy(cr);
return 0; return 0;
} }

212
examples/clay-official-website/main.c
View file

@ -34,8 +34,8 @@ const Clay_Color COLOR_BLOB_BORDER_5 = (Clay_Color) {240, 189, 100, 255};
#define RAYLIB_VECTOR2_TO_CLAY_VECTOR2(vector) (Clay_Vector2) { .x = (vector).x, .y = (vector).y } #define RAYLIB_VECTOR2_TO_CLAY_VECTOR2(vector) (Clay_Vector2) { .x = (vector).x, .y = (vector).y }
Clay_TextElementConfig headerTextConfig = (Clay_TextElementConfig) { .fontId = 2, .fontSize = 24, .textColor = {61, 26, 5, 255} }; Clay_TextElementConfig headerTextConfig = (Clay_TextElementConfig) { .textColor = {61, 26, 5, 255}, .fontId = 2, .fontSize = 24 };
Clay_TextElementConfig blobTextConfig = (Clay_TextElementConfig) { .fontId = 2, .fontSize = 30, .textColor = {244, 235, 230, 255} }; Clay_TextElementConfig blobTextConfig = (Clay_TextElementConfig) { .textColor = {244, 235, 230, 255}, .fontId = 2, .fontSize = 30 };
typedef struct { typedef struct {
void* memory; void* memory;
@ -51,35 +51,35 @@ typedef struct d {
} CustomHTMLData; } CustomHTMLData;
CustomHTMLData* FrameAllocateCustomData(CustomHTMLData data) { CustomHTMLData* FrameAllocateCustomData(CustomHTMLData data) {
CustomHTMLData *customData = (CustomHTMLData *)(frameArena.memory + frameArena.offset); CustomHTMLData *customData = (CustomHTMLData *)((uintptr_t)frameArena.memory + frameArena.offset);
*customData = data; *customData = data;
frameArena.offset += sizeof(CustomHTMLData); frameArena.offset += sizeof(CustomHTMLData);
return customData; return customData;
} }
Clay_String* FrameAllocateString(Clay_String string) { Clay_String* FrameAllocateString(Clay_String string) {
Clay_String *allocated = (Clay_String *)(frameArena.memory + frameArena.offset); Clay_String *allocated = (Clay_String *)((uintptr_t)frameArena.memory + frameArena.offset);
*allocated = string; *allocated = string;
frameArena.offset += sizeof(Clay_String); frameArena.offset += sizeof(Clay_String);
return allocated; return allocated;
} }
void LandingPageBlob(int index, int fontSize, Clay_Color color, Clay_String text, Clay_String imageURL) { void LandingPageBlob(int index, int fontSize, Clay_Color color, Clay_String text, Clay_String imageURL) {
CLAY(CLAY_IDI("HeroBlob", index), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 480) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .border = { .color = color, .width = { 2, 2, 2, 2 }}, .cornerRadius = CLAY_CORNER_RADIUS(10) }) { CLAY(CLAY_IDI("HeroBlob", index), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 480) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .cornerRadius = CLAY_CORNER_RADIUS(10) , .border = { .color = color, .width = { 2, 2, 2, 2 }}}) {
CLAY(CLAY_IDI("CheckImage", index), { .layout = { .sizing = { CLAY_SIZING_FIXED(32) } }, .aspectRatio = { 1 }, .image = { .imageData = FrameAllocateString(imageURL) } }) {} CLAY(CLAY_IDI("CheckImage", index), { .layout = { .sizing = { CLAY_SIZING_FIXED(32) } }, .aspectRatio = { 1 }, .image = { .imageData = FrameAllocateString(imageURL) } }) {}
CLAY_TEXT(text, CLAY_TEXT_CONFIG({ .fontSize = fontSize, .fontId = FONT_ID_BODY_24, .textColor = color })); CLAY_TEXT(text, CLAY_TEXT_CONFIG({ .textColor = color, .fontId = FONT_ID_BODY_24, .fontSize = (uint16_t)fontSize }));
} }
} }
void LandingPageDesktop() { void LandingPageDesktop() {
CLAY(CLAY_ID("LandingPage1Desktop"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(.min = windowHeight - 70) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = { 50, 50 } } }) { CLAY(CLAY_ID("LandingPage1Desktop"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(.min = (float)windowHeight - 70) }, .padding = { 50, 50 } , .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}} }) {
CLAY(CLAY_ID("LandingPage1"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = CLAY_PADDING_ALL(32), .childGap = 32 }, .border = { .width = { .left = 2, .right = 2 }, .color = COLOR_RED } }) { CLAY(CLAY_ID("LandingPage1"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(32), .childGap = 32 , .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}}, .border = { .color = COLOR_RED, .width = { .left = 2, .right = 2 }} }) {
CLAY(CLAY_ID("LeftText"), { .layout = { .sizing = { .width = CLAY_SIZING_PERCENT(0.55f) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) { CLAY(CLAY_ID("LeftText"), { .layout = { .sizing = { .width = CLAY_SIZING_PERCENT(0.55f) }, .childGap = 8 , .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY_TEXT(CLAY_STRING("Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance."), CLAY_TEXT_CONFIG({ .fontSize = 56, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_TITLE_56, .fontSize = 56 }));
CLAY(CLAY_ID("LandingPageSpacer"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(32) } } }) {} CLAY(CLAY_ID("LandingPageSpacer"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(32) } } }) {}
CLAY_TEXT(CLAY_STRING("Clay is laying out this webpage right now!"), CLAY_TEXT_CONFIG({ .fontSize = 36, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE })); CLAY_TEXT(CLAY_STRING("Clay is laying out this webpage right now!"), CLAY_TEXT_CONFIG({ .textColor = COLOR_ORANGE, .fontId = FONT_ID_TITLE_36, .fontSize = 36 }));
} }
CLAY(CLAY_ID("HeroImageOuter"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_PERCENT(0.45f) }, .childAlignment = { CLAY_ALIGN_X_CENTER }, .childGap = 16 } }) { CLAY(CLAY_ID("HeroImageOuter"), { .layout = { .sizing = { .width = CLAY_SIZING_PERCENT(0.45f) }, .childGap = 16 , .childAlignment = { CLAY_ALIGN_X_CENTER }, .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
LandingPageBlob(1, 32, COLOR_BLOB_BORDER_5, CLAY_STRING("High performance"), CLAY_STRING("/clay/images/check_5.png")); LandingPageBlob(1, 32, COLOR_BLOB_BORDER_5, CLAY_STRING("High performance"), CLAY_STRING("/clay/images/check_5.png"));
LandingPageBlob(2, 32, COLOR_BLOB_BORDER_4, CLAY_STRING("Flexbox-style responsive layout"), CLAY_STRING("/clay/images/check_4.png")); LandingPageBlob(2, 32, COLOR_BLOB_BORDER_4, CLAY_STRING("Flexbox-style responsive layout"), CLAY_STRING("/clay/images/check_4.png"));
LandingPageBlob(3, 32, COLOR_BLOB_BORDER_3, CLAY_STRING("Declarative syntax"), CLAY_STRING("/clay/images/check_3.png")); LandingPageBlob(3, 32, COLOR_BLOB_BORDER_3, CLAY_STRING("Declarative syntax"), CLAY_STRING("/clay/images/check_3.png"));
@ -91,13 +91,13 @@ void LandingPageDesktop() {
} }
void LandingPageMobile() { void LandingPageMobile() {
CLAY(CLAY_ID("LandingPage1Mobile"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(.min = windowHeight - 70) }, .childAlignment = {CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER}, .padding = { 16, 16, 32, 32 }, .childGap = 32 } }) { CLAY(CLAY_ID("LandingPage1Mobile"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(.min = (float)windowHeight - 70) }, .padding = { 16, 16, 32, 32 }, .childGap = 32, .childAlignment = {.x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY(CLAY_ID("LeftText"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) { CLAY(CLAY_ID("LeftText"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
CLAY_TEXT(CLAY_STRING("Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance."), CLAY_TEXT_CONFIG({ .fontSize = 48, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_TITLE_56, .fontSize = 48 }));
CLAY(CLAY_ID("LandingPageSpacer"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(32) } } }) {} CLAY(CLAY_ID("LandingPageSpacer"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(32) } } }) {}
CLAY_TEXT(CLAY_STRING("Clay is laying out this webpage right now!"), CLAY_TEXT_CONFIG({ .fontSize = 32, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE })); CLAY_TEXT(CLAY_STRING("Clay is laying out this webpage right now!"), CLAY_TEXT_CONFIG({ .textColor = COLOR_ORANGE, .fontId = FONT_ID_TITLE_36, .fontSize = 32 }));
} }
CLAY(CLAY_ID("HeroImageOuter"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_GROW(0) }, .childAlignment = { CLAY_ALIGN_X_CENTER }, .childGap = 16 } }) { CLAY(CLAY_ID("HeroImageOuter"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .childGap = 16, .childAlignment = { CLAY_ALIGN_X_CENTER }, .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
LandingPageBlob(1, 28, COLOR_BLOB_BORDER_5, CLAY_STRING("High performance"), CLAY_STRING("/clay/images/check_5.png")); LandingPageBlob(1, 28, COLOR_BLOB_BORDER_5, CLAY_STRING("High performance"), CLAY_STRING("/clay/images/check_5.png"));
LandingPageBlob(2, 28, COLOR_BLOB_BORDER_4, CLAY_STRING("Flexbox-style responsive layout"), CLAY_STRING("/clay/images/check_4.png")); LandingPageBlob(2, 28, COLOR_BLOB_BORDER_4, CLAY_STRING("Flexbox-style responsive layout"), CLAY_STRING("/clay/images/check_4.png"));
LandingPageBlob(3, 28, COLOR_BLOB_BORDER_3, CLAY_STRING("Declarative syntax"), CLAY_STRING("/clay/images/check_3.png")); LandingPageBlob(3, 28, COLOR_BLOB_BORDER_3, CLAY_STRING("Declarative syntax"), CLAY_STRING("/clay/images/check_3.png"));
@ -109,17 +109,17 @@ void LandingPageMobile() {
void FeatureBlocksDesktop() { void FeatureBlocksDesktop() {
CLAY(CLAY_ID("FeatureBlocksOuter"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) } } }) { CLAY(CLAY_ID("FeatureBlocksOuter"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) } } }) {
CLAY(CLAY_ID("FeatureBlocksInner"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }, .border = { .width = { .betweenChildren = 2 }, .color = COLOR_RED } }) { CLAY(CLAY_ID("FeatureBlocksInner"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }, .border = {.color = COLOR_RED, .width = { .betweenChildren = 2 }} }) {
Clay_TextElementConfig *textConfig = CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_BODY_24, .textColor = COLOR_RED }); Clay_TextElementConfig *textConfig = CLAY_TEXT_CONFIG({.textColor = COLOR_RED, .fontId = FONT_ID_BODY_24, .fontSize = 24 });
CLAY(CLAY_ID("HFileBoxOuter"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_PERCENT(0.5f) }, .childAlignment = {0, CLAY_ALIGN_Y_CENTER}, .padding = {50, 50, 32, 32}, .childGap = 8 } }) { CLAY(CLAY_ID("HFileBoxOuter"), { .layout = {.sizing = { CLAY_SIZING_PERCENT(0.5f)}, .padding = {50, 50, 32, 32}, .childGap = 8, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY(CLAY_ID("HFileIncludeOuter"), { .layout = { .padding = {8, 4} }, .backgroundColor = COLOR_RED, .cornerRadius = CLAY_CORNER_RADIUS(8) }) { CLAY(CLAY_ID("HFileIncludeOuter"), { .layout = { .padding = {8, 4} }, .backgroundColor = COLOR_RED, .cornerRadius = CLAY_CORNER_RADIUS(8) }) {
CLAY_TEXT(CLAY_STRING("#include clay.h"), CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_BODY_24, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("#include clay.h"), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_BODY_24, .fontSize = 24 }));
} }
CLAY_TEXT(CLAY_STRING("~2000 lines of C99."), textConfig); CLAY_TEXT(CLAY_STRING("~2000 lines of C99."), textConfig);
CLAY_TEXT(CLAY_STRING("Zero dependencies, including no C standard library."), textConfig); CLAY_TEXT(CLAY_STRING("Zero dependencies, including no C standard library."), textConfig);
} }
CLAY(CLAY_ID("BringYourOwnRendererOuter"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_PERCENT(0.5f) }, .childAlignment = {0, CLAY_ALIGN_Y_CENTER}, .padding = {50, 50, 32, 32}, .childGap = 8 } }) { CLAY(CLAY_ID("BringYourOwnRendererOuter"), { .layout = {.sizing = { CLAY_SIZING_PERCENT(0.5f) }, .padding = {50, 50, 32, 32}, .childGap = 8, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY_TEXT(CLAY_STRING("Renderer agnostic."), CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = COLOR_ORANGE })); CLAY_TEXT(CLAY_STRING("Renderer agnostic."), CLAY_TEXT_CONFIG({ .textColor = COLOR_ORANGE, .fontId = FONT_ID_BODY_24, .fontSize = 24 }));
CLAY_TEXT(CLAY_STRING("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML."), textConfig); CLAY_TEXT(CLAY_STRING("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML."), textConfig);
CLAY_TEXT(CLAY_STRING("Flexible output for easy compositing in your custom engine or environment."), textConfig); CLAY_TEXT(CLAY_STRING("Flexible output for easy compositing in your custom engine or environment."), textConfig);
} }
@ -128,17 +128,17 @@ void FeatureBlocksDesktop() {
} }
void FeatureBlocksMobile() { void FeatureBlocksMobile() {
CLAY(CLAY_ID("FeatureBlocksInner"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(0) } }, .border = { .width = { .betweenChildren = 2 }, .color = COLOR_RED } }) { CLAY(CLAY_ID("FeatureBlocksInner"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM}, .border = { .color = COLOR_RED, .width = { .betweenChildren = 2 }} }) {
Clay_TextElementConfig *textConfig = CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_BODY_24, .textColor = COLOR_RED }); Clay_TextElementConfig *textConfig = CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_24, .fontSize = 24});
CLAY(CLAY_ID("HFileBoxOuter"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {0, CLAY_ALIGN_Y_CENTER}, .padding = {16, 16, 32, 32}, .childGap = 8 } }) { CLAY(CLAY_ID("HFileBoxOuter"), { .layout = { .sizing = { CLAY_SIZING_GROW() }, .padding = {16, 16, 32, 32}, .childGap = 8, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY(CLAY_ID("HFileIncludeOuter"), { .layout = { .padding = {8, 4} }, .backgroundColor = COLOR_RED, .cornerRadius = CLAY_CORNER_RADIUS(8) }) { CLAY(CLAY_ID("HFileIncludeOuter"), { .layout = { .padding = {8, 4} }, .backgroundColor = COLOR_RED, .cornerRadius = CLAY_CORNER_RADIUS(8) }) {
CLAY_TEXT(CLAY_STRING("#include clay.h"), CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_BODY_24, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("#include clay.h"), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_BODY_24, .fontSize = 24 }));
} }
CLAY_TEXT(CLAY_STRING("~2000 lines of C99."), textConfig); CLAY_TEXT(CLAY_STRING("~2000 lines of C99."), textConfig);
CLAY_TEXT(CLAY_STRING("Zero dependencies, including no C standard library."), textConfig); CLAY_TEXT(CLAY_STRING("Zero dependencies, including no C standard library."), textConfig);
} }
CLAY(CLAY_ID("BringYourOwnRendererOuter"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {0, CLAY_ALIGN_Y_CENTER}, .padding = {16, 16, 32, 32}, .childGap = 8 } }) { CLAY(CLAY_ID("BringYourOwnRendererOuter"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .padding = {16, 16, 32, 32}, .childGap = 8 , .childAlignment = { .y = CLAY_ALIGN_Y_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY_TEXT(CLAY_STRING("Renderer agnostic."), CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = COLOR_ORANGE })); CLAY_TEXT(CLAY_STRING("Renderer agnostic."), CLAY_TEXT_CONFIG({.textColor = COLOR_ORANGE, .fontId = FONT_ID_BODY_24, .fontSize = 24}));
CLAY_TEXT(CLAY_STRING("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML."), textConfig); CLAY_TEXT(CLAY_STRING("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML."), textConfig);
CLAY_TEXT(CLAY_STRING("Flexible output for easy compositing in your custom engine or environment."), textConfig); CLAY_TEXT(CLAY_STRING("Flexible output for easy compositing in your custom engine or environment."), textConfig);
} }
@ -146,14 +146,14 @@ void FeatureBlocksMobile() {
} }
void DeclarativeSyntaxPageDesktop() { void DeclarativeSyntaxPageDesktop() {
CLAY(CLAY_ID("SyntaxPageDesktop"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = windowHeight - 50) }, .childAlignment = {0, CLAY_ALIGN_Y_CENTER}, .padding = { 50, 50 } } }) { CLAY(CLAY_ID("SyntaxPageDesktop"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = (float)windowHeight - 50) }, .padding = { 50, 50 }, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER} } }) {
CLAY(CLAY_ID("SyntaxPage"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .childAlignment = { 0, CLAY_ALIGN_Y_CENTER }, .padding = CLAY_PADDING_ALL(32), .childGap = 32 }, .border = { .width = { .left = 2, .right = 2 }, .color = COLOR_RED }}) { CLAY(CLAY_ID("SyntaxPage"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(32), .childGap = 32, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }, .border = { .color = COLOR_RED, .width = { .left = 2, .right = 2 }}}) {
CLAY(CLAY_ID("SyntaxPageLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) { CLAY(CLAY_ID("SyntaxPageLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY_TEXT(CLAY_STRING("Declarative Syntax"), CLAY_TEXT_CONFIG({ .fontSize = 52, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Declarative Syntax"), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_TITLE_56, .fontSize = 52 }));
CLAY(CLAY_ID("SyntaxSpacer"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) } } }) {} CLAY(CLAY_ID("SyntaxSpacer"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) } } }) {}
CLAY_TEXT(CLAY_STRING("Flexible and readable declarative syntax with nested UI element hierarchies."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Flexible and readable declarative syntax with nested UI element hierarchies."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
CLAY_TEXT(CLAY_STRING("Mix elements with standard C code like loops, conditionals and functions."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Mix elements with standard C code like loops, conditionals and functions."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
CLAY_TEXT(CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
} }
CLAY(CLAY_ID("SyntaxPageRightImage"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) { CLAY(CLAY_ID("SyntaxPageRightImage"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) {
CLAY(CLAY_ID("SyntaxPageRightImageInner"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .aspectRatio = { 1136.0 / 1194.0 }, .image = { .imageData = FrameAllocateString(CLAY_STRING("/clay/images/declarative.png")) } }) {} CLAY(CLAY_ID("SyntaxPageRightImageInner"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .aspectRatio = { 1136.0 / 1194.0 }, .image = { .imageData = FrameAllocateString(CLAY_STRING("/clay/images/declarative.png")) } }) {}
@ -163,13 +163,13 @@ void DeclarativeSyntaxPageDesktop() {
} }
void DeclarativeSyntaxPageMobile() { void DeclarativeSyntaxPageMobile() {
CLAY(CLAY_ID("SyntaxPageDesktop"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = windowHeight - 50) }, .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER}, .padding = {16, 16, 32, 32}, .childGap = 16 } }) { CLAY(CLAY_ID("SyntaxPageDesktop"), { .layout = {.sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = (float)windowHeight - 50) }, .padding = {16, 16, 32, 32}, .childGap = 16, .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
CLAY(CLAY_ID("SyntaxPageLeftText"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) { CLAY(CLAY_ID("SyntaxPageLeftText"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
CLAY_TEXT(CLAY_STRING("Declarative Syntax"), CLAY_TEXT_CONFIG({ .fontSize = 48, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Declarative Syntax"), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_TITLE_56, .fontSize = 48 }));
CLAY(CLAY_ID("SyntaxSpacer"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) } } }) {} CLAY(CLAY_ID("SyntaxSpacer"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) } } }) {}
CLAY_TEXT(CLAY_STRING("Flexible and readable declarative syntax with nested UI element hierarchies."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Flexible and readable declarative syntax with nested UI element hierarchies."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28}));
CLAY_TEXT(CLAY_STRING("Mix elements with standard C code like loops, conditionals and functions."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Mix elements with standard C code like loops, conditionals and functions."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
CLAY_TEXT(CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
} }
CLAY(CLAY_ID("SyntaxPageRightImage"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) { CLAY(CLAY_ID("SyntaxPageRightImage"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) {
CLAY(CLAY_ID("SyntaxPageRightImageInner"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .aspectRatio = { 1136.0 / 1194.0 }, .image = { .imageData = FrameAllocateString(CLAY_STRING("/clay/images/declarative.png")) } }) {} CLAY(CLAY_ID("SyntaxPageRightImageInner"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .aspectRatio = { 1136.0 / 1194.0 }, .image = { .imageData = FrameAllocateString(CLAY_STRING("/clay/images/declarative.png")) } }) {}
@ -189,21 +189,21 @@ Clay_Color ColorLerp(Clay_Color a, Clay_Color b, float amount) {
Clay_String LOREM_IPSUM_TEXT = CLAY_STRING("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."); Clay_String LOREM_IPSUM_TEXT = CLAY_STRING("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
void HighPerformancePageDesktop(float lerpValue) { void HighPerformancePageDesktop(float lerpValue) {
CLAY(CLAY_ID("PerformanceOuter"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = windowHeight - 50) }, .childAlignment = {0, CLAY_ALIGN_Y_CENTER}, .padding = {82, 82, 32, 32}, .childGap = 64 }, .backgroundColor = COLOR_RED }) { CLAY(CLAY_ID("PerformanceOuter"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = (float)windowHeight - 50) }, .padding = {82, 82, 32, 32}, .childGap = 64, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER} }, .backgroundColor = COLOR_RED }) {
CLAY(CLAY_ID("PerformanceLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) { CLAY(CLAY_ID("PerformanceLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
CLAY_TEXT(CLAY_STRING("High Performance"), CLAY_TEXT_CONFIG({ .fontSize = 52, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("High Performance"), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_TITLE_56, .fontSize = 52 }));
CLAY(CLAY_ID("PerformanceSpacer"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) }} }) {} CLAY(CLAY_ID("PerformanceSpacer"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) }} }) {}
CLAY_TEXT(CLAY_STRING("Fast enough to recompute your entire UI every frame."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("Fast enough to recompute your entire UI every frame."), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
CLAY_TEXT(CLAY_STRING("Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free."), CLAY_TEXT_CONFIG({.textColor = COLOR_LIGHT, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
CLAY_TEXT(CLAY_STRING("Simplify animations and reactive UI design by avoiding the standard performance hacks."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("Simplify animations and reactive UI design by avoiding the standard performance hacks."), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
} }
CLAY(CLAY_ID("PerformanceRightImageOuter"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) { CLAY(CLAY_ID("PerformanceRightImageOuter"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) {
CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(400) } }, .border = { .width = {2, 2, 2, 2}, .color = COLOR_LIGHT } }) { CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(400) } }, .border = { .color = COLOR_LIGHT, .width = {2, 2, 2, 2} } }) {
CLAY(CLAY_ID("AnimationDemoContainerLeft"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.3f + 0.4f * lerpValue), CLAY_SIZING_GROW(0) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = CLAY_PADDING_ALL(32) }, .backgroundColor = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue) }) { CLAY(CLAY_ID("AnimationDemoContainerLeft"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.3f + 0.4f * lerpValue), CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(32), .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .backgroundColor = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue) }) {
CLAY_TEXT(LOREM_IPSUM_TEXT, CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT })); CLAY_TEXT(LOREM_IPSUM_TEXT, CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_TITLE_56, .fontSize = 24 }));
} }
CLAY(CLAY_ID("AnimationDemoContainerRight"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = CLAY_PADDING_ALL(32) }, .backgroundColor = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue) }) { CLAY(CLAY_ID("AnimationDemoContainerRight"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(32), .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}}, .backgroundColor = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue) }) {
CLAY_TEXT(LOREM_IPSUM_TEXT, CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT })); CLAY_TEXT(LOREM_IPSUM_TEXT, CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_TITLE_56, .fontSize = 24 }));
} }
} }
} }
@ -211,21 +211,21 @@ void HighPerformancePageDesktop(float lerpValue) {
} }
void HighPerformancePageMobile(float lerpValue) { void HighPerformancePageMobile(float lerpValue) {
CLAY(CLAY_ID("PerformanceOuter"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = windowHeight - 50) }, .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER}, .padding = {16, 16, 32, 32}, .childGap = 32 }, .backgroundColor = COLOR_RED }) { CLAY(CLAY_ID("PerformanceOuter"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = (float)windowHeight - 50) }, .padding = {16, 16, 32, 32}, .childGap = 32, .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .backgroundColor = COLOR_RED }) {
CLAY(CLAY_ID("PerformanceLeftText"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) { CLAY(CLAY_ID("PerformanceLeftText"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
CLAY_TEXT(CLAY_STRING("High Performance"), CLAY_TEXT_CONFIG({ .fontSize = 48, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("High Performance"), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_TITLE_56, .fontSize = 48 }));
CLAY(CLAY_ID("PerformanceSpacer"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) }} }) {} CLAY(CLAY_ID("PerformanceSpacer"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) }} }) {}
CLAY_TEXT(CLAY_STRING("Fast enough to recompute your entire UI every frame."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("Fast enough to recompute your entire UI every frame."), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_BODY_36, .fontSize = 28}));
CLAY_TEXT(CLAY_STRING("Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free."), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
CLAY_TEXT(CLAY_STRING("Simplify animations and reactive UI design by avoiding the standard performance hacks."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("Simplify animations and reactive UI design by avoiding the standard performance hacks."), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
} }
CLAY(CLAY_ID("PerformanceRightImageOuter"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) { CLAY(CLAY_ID("PerformanceRightImageOuter"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) {
CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(400) } }, .border = { .width = { 2, 2, 2, 2 }, .color = COLOR_LIGHT }}) { CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(400) } }, .border = { .color = COLOR_LIGHT, .width = { 2, 2, 2, 2 }}}) {
CLAY(CLAY_ID("AnimationDemoContainerLeft"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.35f + 0.3f * lerpValue), CLAY_SIZING_GROW(0) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = CLAY_PADDING_ALL(16) }, .backgroundColor = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue) }) { CLAY(CLAY_ID("AnimationDemoContainerLeft"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.35f + 0.3f * lerpValue), CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .backgroundColor = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue) }) {
CLAY_TEXT(LOREM_IPSUM_TEXT, CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT })); CLAY_TEXT(LOREM_IPSUM_TEXT, CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_TITLE_56, .fontSize = 24 }));
} }
CLAY(CLAY_ID("AnimationDemoContainerRight"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = CLAY_PADDING_ALL(16) }, .backgroundColor = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue) }) { CLAY(CLAY_ID("AnimationDemoContainerRight"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .backgroundColor = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue) }) {
CLAY_TEXT(LOREM_IPSUM_TEXT, CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT })); CLAY_TEXT(LOREM_IPSUM_TEXT, CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_TITLE_56, .fontSize = 24 }));
} }
} }
} }
@ -245,37 +245,37 @@ void RendererButtonActive(Clay_String text) {
.layout = { .sizing = {CLAY_SIZING_FIXED(300) }, .padding = CLAY_PADDING_ALL(16) }, .layout = { .sizing = {CLAY_SIZING_FIXED(300) }, .padding = CLAY_PADDING_ALL(16) },
.backgroundColor = Clay_Hovered() ? COLOR_RED_HOVER : COLOR_RED, .backgroundColor = Clay_Hovered() ? COLOR_RED_HOVER : COLOR_RED,
.cornerRadius = CLAY_CORNER_RADIUS(10), .cornerRadius = CLAY_CORNER_RADIUS(10),
.userData = FrameAllocateCustomData((CustomHTMLData) { .disablePointerEvents = true, .cursorPointer = true }) .userData = FrameAllocateCustomData((CustomHTMLData) { .cursorPointer = true, .disablePointerEvents = true})
}) { }) {
CLAY_TEXT(text, CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT })); CLAY_TEXT(text, CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
} }
} }
void RendererButtonInactive(Clay_String text, size_t rendererIndex) { void RendererButtonInactive(Clay_String text, size_t rendererIndex) {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .sizing = {CLAY_SIZING_FIXED(300)}, .padding = CLAY_PADDING_ALL(16) }, .layout = { .sizing = {CLAY_SIZING_FIXED(300)}, .padding = CLAY_PADDING_ALL(16) },
.border = { .width = {2, 2, 2, 2}, .color = COLOR_RED },
.backgroundColor = Clay_Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT, .backgroundColor = Clay_Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT,
.cornerRadius = CLAY_CORNER_RADIUS(10), .cornerRadius = CLAY_CORNER_RADIUS(10),
.userData = FrameAllocateCustomData((CustomHTMLData) { .disablePointerEvents = true, .cursorPointer = true }) .border = { .color = COLOR_RED, .width = {2, 2, 2, 2} },
.userData = FrameAllocateCustomData((CustomHTMLData) { .cursorPointer = true, .disablePointerEvents = true }),
}) { }) {
Clay_OnHover(HandleRendererButtonInteraction, rendererIndex); Clay_OnHover(HandleRendererButtonInteraction, rendererIndex);
CLAY_TEXT(text, CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(text, CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
} }
} }
void RendererPageDesktop() { void RendererPageDesktop() {
CLAY(CLAY_ID("RendererPageDesktop"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = windowHeight - 50) }, .childAlignment = {0, CLAY_ALIGN_Y_CENTER}, .padding = { 50, 50 } } }) { CLAY(CLAY_ID("RendererPageDesktop"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = (float)windowHeight - 50) }, .padding = { 50, 50 }, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER} } }) {
CLAY(CLAY_ID("RendererPage"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .childAlignment = { 0, CLAY_ALIGN_Y_CENTER }, .padding = CLAY_PADDING_ALL(32), .childGap = 32 }, .border = { .width = { .left = 2, .right = 2 }, .color = COLOR_RED } }) { CLAY(CLAY_ID("RendererPage"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(32), .childGap = 32 , .childAlignment = { .y = CLAY_ALIGN_Y_CENTER }}, .border = { .color = COLOR_RED, .width = { .left = 2, .right = 2 } } }) {
CLAY(CLAY_ID("RendererLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) { CLAY(CLAY_ID("RendererLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY_TEXT(CLAY_STRING("Renderer & Platform Agnostic"), CLAY_TEXT_CONFIG({ .fontSize = 52, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Renderer & Platform Agnostic"), CLAY_TEXT_CONFIG({.textColor = COLOR_RED, .fontId = FONT_ID_TITLE_56, .fontSize = 52}));
CLAY(CLAY_ID("RendererSpacerLeft"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) }} }) {} CLAY(CLAY_ID("RendererSpacerLeft"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) }} }) {}
CLAY_TEXT(CLAY_STRING("Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28}));
CLAY_TEXT(CLAY_STRING("Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
CLAY_TEXT(CLAY_STRING("There's even an HTML renderer - you're looking at it right now!"), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("There's even an HTML renderer - you're looking at it right now!"), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
} }
CLAY(CLAY_ID("RendererRightText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .childAlignment = {CLAY_ALIGN_X_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 16 } }) { CLAY(CLAY_ID("RendererRightText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .childGap = 16, .childAlignment = {CLAY_ALIGN_X_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY_TEXT(CLAY_STRING("Try changing renderer!"), CLAY_TEXT_CONFIG({ .fontSize = 36, .fontId = FONT_ID_BODY_36, .textColor = COLOR_ORANGE })); CLAY_TEXT(CLAY_STRING("Try changing renderer!"), CLAY_TEXT_CONFIG({ .textColor = COLOR_ORANGE, .fontId = FONT_ID_BODY_36, .fontSize = 36 }));
CLAY(CLAY_ID("RendererSpacerRight"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 32) } } }) {} CLAY(CLAY_ID("RendererSpacerRight"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 32) } } }) {}
if (ACTIVE_RENDERER_INDEX == 0) { if (ACTIVE_RENDERER_INDEX == 0) {
RendererButtonActive(CLAY_STRING("HTML Renderer")); RendererButtonActive(CLAY_STRING("HTML Renderer"));
@ -290,16 +290,16 @@ void RendererPageDesktop() {
} }
void RendererPageMobile() { void RendererPageMobile() {
CLAY(CLAY_ID("RendererMobile"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = windowHeight - 50) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER}, .padding = { 16, 16, 32, 32}, .childGap = 32 }, .backgroundColor = COLOR_LIGHT }) { CLAY(CLAY_ID("RendererMobile"), { .layout = {.sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = (float)windowHeight - 50) }, .padding = { 16, 16, 32, 32}, .childGap = 32, .childAlignment = {.x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM}, .backgroundColor = COLOR_LIGHT }) {
CLAY(CLAY_ID("RendererLeftText"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) { CLAY(CLAY_ID("RendererLeftText"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childGap = 8 , .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY_TEXT(CLAY_STRING("Renderer & Platform Agnostic"), CLAY_TEXT_CONFIG({ .fontSize = 48, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Renderer & Platform Agnostic"), CLAY_TEXT_CONFIG({.textColor = COLOR_RED, .fontId = FONT_ID_TITLE_56, .fontSize = 48 }));
CLAY(CLAY_ID("RendererSpacerLeft"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) }} }) {} CLAY(CLAY_ID("RendererSpacerLeft"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) }} }) {}
CLAY_TEXT(CLAY_STRING("Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
CLAY_TEXT(CLAY_STRING("Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more."), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28}));
CLAY_TEXT(CLAY_STRING("There's even an HTML renderer - you're looking at it right now!"), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("There's even an HTML renderer - you're looking at it right now!"), CLAY_TEXT_CONFIG({ .textColor = COLOR_RED, .fontId = FONT_ID_BODY_36, .fontSize = 28}));
} }
CLAY(CLAY_ID("RendererRightText"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 16 } }) { CLAY(CLAY_ID("RendererRightText"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childGap = 16 , .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY_TEXT(CLAY_STRING("Try changing renderer!"), CLAY_TEXT_CONFIG({ .fontSize = 36, .fontId = FONT_ID_BODY_36, .textColor = COLOR_ORANGE })); CLAY_TEXT(CLAY_STRING("Try changing renderer!"), CLAY_TEXT_CONFIG({ .textColor = COLOR_ORANGE, .fontId = FONT_ID_BODY_36, .fontSize = 36}));
CLAY(CLAY_ID("RendererSpacerRight"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 32) }} }) {} CLAY(CLAY_ID("RendererSpacerRight"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 32) }} }) {}
if (ACTIVE_RENDERER_INDEX == 0) { if (ACTIVE_RENDERER_INDEX == 0) {
RendererButtonActive(CLAY_STRING("HTML Renderer")); RendererButtonActive(CLAY_STRING("HTML Renderer"));
@ -313,14 +313,14 @@ void RendererPageMobile() {
} }
void DebuggerPageDesktop() { void DebuggerPageDesktop() {
CLAY(CLAY_ID("DebuggerDesktop"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = windowHeight - 50) }, .childAlignment = {0, CLAY_ALIGN_Y_CENTER}, .padding = { 82, 82, 32, 32 }, .childGap = 64 }, .backgroundColor = COLOR_RED }) { CLAY(CLAY_ID("DebuggerDesktop"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(.min = (float)windowHeight - 50) }, .padding = { 82, 82, 32, 32 }, .childGap = 64,.childAlignment = { .y = CLAY_ALIGN_Y_CENTER} }, .backgroundColor = COLOR_RED }) {
CLAY(CLAY_ID("DebuggerLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) { CLAY(CLAY_ID("DebuggerLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .childGap = 8 , .layoutDirection = CLAY_TOP_TO_BOTTOM} }) {
CLAY_TEXT(CLAY_STRING("Integrated Debug Tools"), CLAY_TEXT_CONFIG({ .fontSize = 52, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("Integrated Debug Tools"), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_TITLE_56,.fontSize = 52 }));
CLAY(CLAY_ID("DebuggerSpacer"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) }} }) {} CLAY(CLAY_ID("DebuggerSpacer"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 16) }} }) {}
CLAY_TEXT(CLAY_STRING("Clay includes built in \"Chrome Inspector\"-style debug tooling."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("Clay includes built in \"Chrome Inspector\"-style debug tooling."), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
CLAY_TEXT(CLAY_STRING("View your layout hierarchy and config in real time."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT })); CLAY_TEXT(CLAY_STRING("View your layout hierarchy and config in real time."), CLAY_TEXT_CONFIG({ .textColor = COLOR_LIGHT, .fontId = FONT_ID_BODY_36, .fontSize = 28 }));
CLAY(CLAY_ID("DebuggerPageSpacer"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(32) } } }) {} CLAY(CLAY_ID("DebuggerPageSpacer"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(32) } } }) {}
CLAY_TEXT(CLAY_STRING("Press the \"d\" key to try it out now!"), CLAY_TEXT_CONFIG({ .fontSize = 32, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE })); CLAY_TEXT(CLAY_STRING("Press the \"d\" key to try it out now!"), CLAY_TEXT_CONFIG({ .textColor = COLOR_ORANGE, .fontId = FONT_ID_TITLE_36, .fontSize = 32 }));
} }
CLAY(CLAY_ID("DebuggerRightImageOuter"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) { CLAY(CLAY_ID("DebuggerRightImageOuter"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) {
CLAY(CLAY_ID("DebuggerPageRightImageInner"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 558) } }, .aspectRatio = { 1620.0 / 1474.0 }, .image = {.imageData = FrameAllocateString(CLAY_STRING("/clay/images/debugger.png")) } }) {} CLAY(CLAY_ID("DebuggerPageRightImageInner"), { .layout = { .sizing = { CLAY_SIZING_GROW(.max = 558) } }, .aspectRatio = { 1620.0 / 1474.0 }, .image = {.imageData = FrameAllocateString(CLAY_STRING("/clay/images/debugger.png")) } }) {}
@ -340,8 +340,8 @@ float animationLerpValue = -1.0f;
Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) { Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
Clay_BeginLayout(); Clay_BeginLayout();
CLAY(CLAY_ID("OuterContainer"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) } }, .backgroundColor = COLOR_LIGHT }) { CLAY(CLAY_ID("OuterContainer"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .backgroundColor = COLOR_LIGHT }) {
CLAY(CLAY_ID("Header"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(50) }, .childAlignment = { 0, CLAY_ALIGN_Y_CENTER }, .childGap = 16, .padding = { 32, 32 } } }) { CLAY(CLAY_ID("Header"), { .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(50) }, .padding = { 32, 32 } , .childGap = 16, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER }} }) {
CLAY_TEXT(CLAY_STRING("Clay"), &headerTextConfig); CLAY_TEXT(CLAY_STRING("Clay"), &headerTextConfig);
CLAY(CLAY_ID("Spacer"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {} CLAY(CLAY_ID("Spacer"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {}
if (!mobileScreen) { if (!mobileScreen) {
@ -350,36 +350,42 @@ Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
.userData = FrameAllocateCustomData((CustomHTMLData) { .userData = FrameAllocateCustomData((CustomHTMLData) {
.link = CLAY_STRING("https://github.com/nicbarker/clay/tree/main/examples") .link = CLAY_STRING("https://github.com/nicbarker/clay/tree/main/examples")
}), }),
.fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255} })); .textColor = {61, 26, 5, 255},
.fontId = FONT_ID_BODY_24, .fontSize = 24 }));
} }
CLAY(CLAY_ID("LinkDocsOuter"), { .layout = { .padding = {8, 8} } }) { CLAY(CLAY_ID("LinkDocsOuter"), { .layout = { .padding = {8, 8} } }) {
CLAY_TEXT(CLAY_STRING("Docs"), CLAY_TEXT_CONFIG({ CLAY_TEXT(CLAY_STRING("Docs"), CLAY_TEXT_CONFIG({
.userData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay/blob/main/README.md") }), .userData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay/blob/main/README.md") }),
.fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255} }) .textColor = {61, 26, 5, 255},
.fontId = FONT_ID_BODY_24, .fontSize = 24 })
); );
} }
} }
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .padding = {16, 16, 6, 6} }, .layout = { .padding = {16, 16, 6, 6} },
.backgroundColor = Clay_Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT, .backgroundColor = Clay_Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT,
.border = { .width = {2, 2, 2, 2}, .color = COLOR_RED },
.cornerRadius = CLAY_CORNER_RADIUS(10), .cornerRadius = CLAY_CORNER_RADIUS(10),
.border = {.color = COLOR_RED, .width = {2, 2, 2, 2}},
.userData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://discord.gg/b4FTWkxdvT") }), .userData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://discord.gg/b4FTWkxdvT") }),
}) { }) {
CLAY_TEXT(CLAY_STRING("Discord"), CLAY_TEXT_CONFIG({ CLAY_TEXT(CLAY_STRING("Discord"), CLAY_TEXT_CONFIG({
.userData = FrameAllocateCustomData((CustomHTMLData) { .disablePointerEvents = true }), .userData = FrameAllocateCustomData((CustomHTMLData) { .disablePointerEvents = true }),
.fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255} })); .textColor = {61, 26, 5, 255},
.fontId = FONT_ID_BODY_24, .fontSize = 24 }));
} }
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .padding = {16, 16, 6, 6} }, .layout = { .padding = {16, 16, 6, 6} },
.backgroundColor = Clay_Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT, .backgroundColor = Clay_Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT,
.border = { .width = {2, 2, 2, 2}, .color = COLOR_RED },
.cornerRadius = CLAY_CORNER_RADIUS(10), .cornerRadius = CLAY_CORNER_RADIUS(10),
.border = { .color = COLOR_RED, .width = {2, 2, 2, 2} },
.userData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay") }), .userData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay") }),
}) { }) {
CLAY_TEXT(CLAY_STRING("Github"), CLAY_TEXT_CONFIG({ CLAY_TEXT(CLAY_STRING("Github"), CLAY_TEXT_CONFIG({
.userData = FrameAllocateCustomData((CustomHTMLData) { .disablePointerEvents = true }), .userData = FrameAllocateCustomData((CustomHTMLData) { .disablePointerEvents = true }),
.fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255} })); .textColor = {61, 26, 5, 255},
.fontId = FONT_ID_BODY_24,
.fontSize = 24,
}));
} }
} }
Clay_LayoutConfig topBorderConfig = (Clay_LayoutConfig) { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(4) }}; Clay_LayoutConfig topBorderConfig = (Clay_LayoutConfig) { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(4) }};
@ -391,7 +397,7 @@ Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
CLAY(CLAY_ID("OuterScrollContainer"), { CLAY(CLAY_ID("OuterScrollContainer"), {
.layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM },
.clip = { .vertical = true, .childOffset = Clay_GetScrollOffset() }, .clip = { .vertical = true, .childOffset = Clay_GetScrollOffset() },
.border = { .width = { .betweenChildren = 2 }, .color = COLOR_RED } .border = { .color = COLOR_RED , .width = { .betweenChildren = 2 }}
}) { }) {
if (mobileScreen) { if (mobileScreen) {
LandingPageMobile(); LandingPageMobile();
@ -420,10 +426,10 @@ Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
} }
float scrollHeight = scrollData.scrollContainerDimensions.height - 12; float scrollHeight = scrollData.scrollContainerDimensions.height - 12;
CLAY(CLAY_ID("ScrollBar"), { CLAY(CLAY_ID("ScrollBar"), {
.floating = { .offset = { .x = -6, .y = -(scrollData.scrollPosition->y / scrollData.contentDimensions.height) * scrollHeight + 6}, .zIndex = 1, .parentId = Clay_GetElementId(CLAY_STRING("OuterScrollContainer")).id, .attachPoints = {.element = CLAY_ATTACH_POINT_RIGHT_TOP, .parent = CLAY_ATTACH_POINT_RIGHT_TOP }, .attachTo = CLAY_ATTACH_TO_PARENT },
.layout = { .sizing = {CLAY_SIZING_FIXED(10), CLAY_SIZING_FIXED((scrollHeight / scrollData.contentDimensions.height) * scrollHeight)} }, .layout = { .sizing = {CLAY_SIZING_FIXED(10), CLAY_SIZING_FIXED((scrollHeight / scrollData.contentDimensions.height) * scrollHeight)} },
.backgroundColor = scrollbarColor, .backgroundColor = scrollbarColor,
.cornerRadius = CLAY_CORNER_RADIUS(5) .cornerRadius = CLAY_CORNER_RADIUS(5),
.floating = { .offset = { .x = -6, .y = -(scrollData.scrollPosition->y / scrollData.contentDimensions.height) * scrollHeight + 6}, .parentId = Clay_GetElementId(CLAY_STRING("OuterScrollContainer")).id, .zIndex = 1, .attachPoints = {.element = CLAY_ATTACH_POINT_RIGHT_TOP, .parent = CLAY_ATTACH_POINT_RIGHT_TOP }, .attachTo = CLAY_ATTACH_TO_PARENT },
}) {} }) {}
} }
return Clay_EndLayout(); return Clay_EndLayout();

8
examples/introducing-clay-video-demo/main.c
View file

@ -14,8 +14,8 @@ int main(void) {
uint64_t clayRequiredMemory = Clay_MinMemorySize(); uint64_t clayRequiredMemory = Clay_MinMemorySize();
Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(clayRequiredMemory, malloc(clayRequiredMemory)); Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(clayRequiredMemory, malloc(clayRequiredMemory));
Clay_Initialize(clayMemory, (Clay_Dimensions) { Clay_Initialize(clayMemory, (Clay_Dimensions) {
.width = GetScreenWidth(), .width = (float)GetScreenWidth(),
.height = GetScreenHeight() .height = (float)GetScreenHeight()
}, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published }, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published
Font fonts[1]; Font fonts[1];
fonts[FONT_ID_BODY_16] = LoadFontEx("resources/Roboto-Regular.ttf", 48, 0, 400); fonts[FONT_ID_BODY_16] = LoadFontEx("resources/Roboto-Regular.ttf", 48, 0, 400);
@ -27,8 +27,8 @@ int main(void) {
while (!WindowShouldClose()) { while (!WindowShouldClose()) {
// Run once per frame // Run once per frame
Clay_SetLayoutDimensions((Clay_Dimensions) { Clay_SetLayoutDimensions((Clay_Dimensions) {
.width = GetScreenWidth(), .width = (float)GetScreenWidth(),
.height = GetScreenHeight() .height = (float)GetScreenHeight()
}); });
Vector2 mousePosition = GetMousePosition(); Vector2 mousePosition = GetMousePosition();

60
examples/playdate-project-example/clay-video-demo-playdate.c
View file

@ -25,7 +25,7 @@ void RenderHeaderButton(Clay_String text) {
}) { }) {
CLAY_TEXT( CLAY_TEXT(
text, text,
CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BUTTON, .textColor = COLOR_WHITE }) CLAY_TEXT_CONFIG({ .textColor = COLOR_WHITE, .fontId = FONT_ID_BUTTON })
); );
} }
} }
@ -44,7 +44,7 @@ typedef struct {
#define MAX_DOCUMENTS 3 #define MAX_DOCUMENTS 3
Document documentsRaw[MAX_DOCUMENTS]; Document documentsRaw[MAX_DOCUMENTS];
DocumentArray documents = { .length = MAX_DOCUMENTS, .documents = documentsRaw }; DocumentArray documents = { .documents = documentsRaw, .length = MAX_DOCUMENTS };
void ClayVideoDemoPlaydate_Initialize(PlaydateAPI* pd) { void ClayVideoDemoPlaydate_Initialize(PlaydateAPI* pd) {
documents.documents[0] = (Document){ documents.documents[0] = (Document){
@ -208,25 +208,25 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
Clay_BorderElementConfig contentBorders = { Clay_BorderElementConfig contentBorders = {
.color = COLOR_BLACK, .color = COLOR_BLACK,
.width = { .top = 1, .left = 1, .right = 1, .bottom = 1 } .width = { .left = 1, .right = 1, .top = 1, .bottom = 1 }
}; };
// Build UI here // Build UI here
CLAY(CLAY_ID("OuterContainer"), { CLAY(CLAY_ID("OuterContainer"), {
.backgroundColor = COLOR_WHITE,
.layout = { .layout = {
.layoutDirection = CLAY_TOP_TO_BOTTOM,
.sizing = layoutExpand, .sizing = layoutExpand,
.padding = CLAY_PADDING_ALL(8), .padding = CLAY_PADDING_ALL(8),
.childGap = 4 .childGap = 4,
} .layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.backgroundColor = COLOR_WHITE,
}) { }) {
// Child elements go inside braces // Child elements go inside braces
CLAY(CLAY_ID("HeaderBar"), { CLAY(CLAY_ID("HeaderBar"), {
.layout = { .layout = {
.sizing = { .sizing = {
.width = CLAY_SIZING_GROW(0),
.height = CLAY_SIZING_FIXED(30), .height = CLAY_SIZING_FIXED(30),
.width = CLAY_SIZING_GROW(0)
}, },
.childGap = 8, .childGap = 8,
.childAlignment = { .y = CLAY_ALIGN_Y_CENTER } .childAlignment = { .y = CLAY_ALIGN_Y_CENTER }
@ -243,8 +243,8 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
CLAY_TEXT( CLAY_TEXT(
CLAY_STRING("File"), CLAY_STRING("File"),
CLAY_TEXT_CONFIG({ CLAY_TEXT_CONFIG({
.textColor = COLOR_WHITE,
.fontId = FONT_ID_BUTTON, .fontId = FONT_ID_BUTTON,
.textColor = COLOR_WHITE
}) })
); );
} }
@ -259,17 +259,17 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
.layout = { .sizing = layoutExpand, .childGap = 8 }, .layout = { .sizing = layoutExpand, .childGap = 8 },
}) { }) {
CLAY(CLAY_ID("Sidebar"), { CLAY(CLAY_ID("Sidebar"), {
.border = contentBorders,
.cornerRadius = CLAY_CORNER_RADIUS(4),
.layout = { .layout = {
.layoutDirection = CLAY_TOP_TO_BOTTOM,
.padding = CLAY_PADDING_ALL(8),
.childGap = 4,
.sizing = { .sizing = {
.width = CLAY_SIZING_FIXED(125), .width = CLAY_SIZING_FIXED(125),
.height = CLAY_SIZING_GROW(0) .height = CLAY_SIZING_GROW(0)
} },
} .padding = CLAY_PADDING_ALL(8),
.childGap = 4,
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.cornerRadius = CLAY_CORNER_RADIUS(4),
.border = contentBorders,
}) { }) {
for (int i = 0; i < documents.length; i++) { for (int i = 0; i < documents.length; i++) {
Document document = documents.documents[i]; Document document = documents.documents[i];
@ -287,23 +287,23 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
CLAY_TEXT( CLAY_TEXT(
document.title, document.title,
CLAY_TEXT_CONFIG({ CLAY_TEXT_CONFIG({
.textColor = COLOR_WHITE,
.fontId = FONT_ID_BUTTON, .fontId = FONT_ID_BUTTON,
.textColor = COLOR_WHITE
}) })
); );
} }
} else { } else {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = sidebarButtonLayout, .layout = sidebarButtonLayout,
.backgroundColor = (Clay_Color){ 0, 0, 0, Clay_Hovered() ? 120 : 0 }, .backgroundColor = (Clay_Color){ 0, 0, 0, Clay_Hovered() ? 120.0f : 0.0f },
.cornerRadius = CLAY_CORNER_RADIUS(4), .cornerRadius = CLAY_CORNER_RADIUS(4),
.border = contentBorders .border = contentBorders
}) { }) {
CLAY_TEXT( CLAY_TEXT(
document.title, document.title,
CLAY_TEXT_CONFIG({ CLAY_TEXT_CONFIG({
.fontId = FONT_ID_BUTTON,
.textColor = COLOR_BLACK, .textColor = COLOR_BLACK,
.fontId = FONT_ID_BUTTON,
}) })
); );
} }
@ -312,27 +312,27 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
} }
CLAY(CLAY_ID("MainContent"), { CLAY(CLAY_ID("MainContent"), {
.border = contentBorders, .layout = {
.sizing = layoutExpand,
.padding = CLAY_PADDING_ALL(8),
.childGap = 8,
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.cornerRadius = CLAY_CORNER_RADIUS(4), .cornerRadius = CLAY_CORNER_RADIUS(4),
.clip = { .vertical = true, .childOffset = Clay_GetScrollOffset() }, .clip = { .vertical = true, .childOffset = Clay_GetScrollOffset() },
.layout = { .border = contentBorders,
.layoutDirection = CLAY_TOP_TO_BOTTOM,
.childGap = 8,
.padding = CLAY_PADDING_ALL(8),
.sizing = layoutExpand
}
}) { }) {
Document selectedDocument = documents.documents[selectedDocumentIndex]; Document selectedDocument = documents.documents[selectedDocumentIndex];
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.layoutDirection = CLAY_LEFT_TO_RIGHT,
.childGap = 4, .childGap = 4,
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_BOTTOM } .childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_BOTTOM },
.layoutDirection = CLAY_LEFT_TO_RIGHT,
} }
}) { }) {
CLAY_TEXT( CLAY_TEXT(
selectedDocument.title, selectedDocument.title,
CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY, .textColor = COLOR_BLACK }) CLAY_TEXT_CONFIG({ .textColor = COLOR_BLACK, .fontId = FONT_ID_BODY })
); );
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
@ -346,7 +346,7 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
} }
CLAY_TEXT( CLAY_TEXT(
selectedDocument.contents, selectedDocument.contents,
CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY, .textColor = COLOR_BLACK }) CLAY_TEXT_CONFIG({ .textColor = COLOR_BLACK, .fontId = FONT_ID_BODY })
); );
} }
} }

14
examples/raylib-multi-context/main.c
View file

@ -12,8 +12,8 @@ Clay_RenderCommandArray CreateLayout(Clay_Context* context, ClayVideoDemo_Data *
Clay_SetDebugModeEnabled(true); Clay_SetDebugModeEnabled(true);
// Run once per frame // Run once per frame
Clay_SetLayoutDimensions((Clay_Dimensions) { Clay_SetLayoutDimensions((Clay_Dimensions) {
.width = GetScreenWidth(), .width = (float)GetScreenWidth(),
.height = GetScreenHeight() / 2 .height = (float)GetScreenHeight() / 2
}); });
Vector2 mousePosition = GetMousePosition(); Vector2 mousePosition = GetMousePosition();
mousePosition.y -= data->yOffset; mousePosition.y -= data->yOffset;
@ -48,22 +48,22 @@ int main(void) {
Clay_Arena clayMemoryTop = Clay_CreateArenaWithCapacityAndMemory(clayRequiredMemory, malloc(clayRequiredMemory)); Clay_Arena clayMemoryTop = Clay_CreateArenaWithCapacityAndMemory(clayRequiredMemory, malloc(clayRequiredMemory));
Clay_Context *clayContextTop = Clay_Initialize(clayMemoryTop, (Clay_Dimensions) { Clay_Context *clayContextTop = Clay_Initialize(clayMemoryTop, (Clay_Dimensions) {
.width = GetScreenWidth(), .width = (float)GetScreenWidth(),
.height = GetScreenHeight() / 2 .height = (float)GetScreenHeight() / 2
}, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published }, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published
ClayVideoDemo_Data dataTop = ClayVideoDemo_Initialize(); ClayVideoDemo_Data dataTop = ClayVideoDemo_Initialize();
Clay_SetMeasureTextFunction(Raylib_MeasureText, fonts); Clay_SetMeasureTextFunction(Raylib_MeasureText, fonts);
Clay_Arena clayMemoryBottom = Clay_CreateArenaWithCapacityAndMemory(clayRequiredMemory, malloc(clayRequiredMemory)); Clay_Arena clayMemoryBottom = Clay_CreateArenaWithCapacityAndMemory(clayRequiredMemory, malloc(clayRequiredMemory));
Clay_Context *clayContextBottom = Clay_Initialize(clayMemoryBottom, (Clay_Dimensions) { Clay_Context *clayContextBottom = Clay_Initialize(clayMemoryBottom, (Clay_Dimensions) {
.width = GetScreenWidth(), .width = (float)GetScreenWidth(),
.height = GetScreenHeight() / 2 .height = (float)GetScreenHeight() / 2
}, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published }, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published
ClayVideoDemo_Data dataBottom = ClayVideoDemo_Initialize(); ClayVideoDemo_Data dataBottom = ClayVideoDemo_Initialize();
Clay_SetMeasureTextFunction(Raylib_MeasureText, fonts); Clay_SetMeasureTextFunction(Raylib_MeasureText, fonts);
while (!WindowShouldClose()) { while (!WindowShouldClose()) {
dataBottom.yOffset = GetScreenHeight() / 2; dataBottom.yOffset = (float)GetScreenHeight() / 2;
Clay_RenderCommandArray renderCommandsTop = CreateLayout(clayContextTop, &dataTop); Clay_RenderCommandArray renderCommandsTop = CreateLayout(clayContextTop, &dataTop);
Clay_RenderCommandArray renderCommandsBottom = CreateLayout(clayContextBottom, &dataBottom); Clay_RenderCommandArray renderCommandsBottom = CreateLayout(clayContextBottom, &dataBottom);
BeginDrawing(); BeginDrawing();

54
examples/raylib-sidebar-scrolling-container/main.c
View file

File diff suppressed because one or more lines are too long

64
examples/shared-layouts/clay-video-demo.c
View file

@ -11,9 +11,9 @@ void RenderHeaderButton(Clay_String text) {
.cornerRadius = CLAY_CORNER_RADIUS(5) .cornerRadius = CLAY_CORNER_RADIUS(5)
}) { }) {
CLAY_TEXT(text, CLAY_TEXT_CONFIG({ CLAY_TEXT(text, CLAY_TEXT_CONFIG({
.textColor = { 255, 255, 255, 255 },
.fontId = FONT_ID_BODY_16, .fontId = FONT_ID_BODY_16,
.fontSize = 16, .fontSize = 16,
.textColor = { 255, 255, 255, 255 }
})); }));
} }
} }
@ -21,9 +21,9 @@ void RenderHeaderButton(Clay_String text) {
void RenderDropdownMenuItem(Clay_String text) { void RenderDropdownMenuItem(Clay_String text) {
CLAY_AUTO_ID({.layout = { .padding = CLAY_PADDING_ALL(16)}}) { CLAY_AUTO_ID({.layout = { .padding = CLAY_PADDING_ALL(16)}}) {
CLAY_TEXT(text, CLAY_TEXT_CONFIG({ CLAY_TEXT(text, CLAY_TEXT_CONFIG({
.textColor = { 255, 255, 255, 255 },
.fontId = FONT_ID_BODY_16, .fontId = FONT_ID_BODY_16,
.fontSize = 16, .fontSize = 16,
.textColor = { 255, 255, 255, 255 }
})); }));
} }
} }
@ -41,8 +41,8 @@ typedef struct {
Document documentsRaw[5]; Document documentsRaw[5];
DocumentArray documents = { DocumentArray documents = {
.documents = documentsRaw,
.length = 5, .length = 5,
.documents = documentsRaw
}; };
typedef struct { typedef struct {
@ -103,20 +103,20 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
// Build UI here // Build UI here
CLAY(CLAY_ID("OuterContainer"), { CLAY(CLAY_ID("OuterContainer"), {
.backgroundColor = {43, 41, 51, 255 },
.layout = { .layout = {
.layoutDirection = CLAY_TOP_TO_BOTTOM,
.sizing = layoutExpand, .sizing = layoutExpand,
.padding = CLAY_PADDING_ALL(16), .padding = CLAY_PADDING_ALL(16),
.childGap = 16 .childGap = 16,
} .layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.backgroundColor = {43, 41, 51, 255 },
}) { }) {
// Child elements go inside braces // Child elements go inside braces
CLAY(CLAY_ID("HeaderBar"), { CLAY(CLAY_ID("HeaderBar"), {
.layout = { .layout = {
.sizing = { .sizing = {
.width = CLAY_SIZING_GROW(0),
.height = CLAY_SIZING_FIXED(60), .height = CLAY_SIZING_FIXED(60),
.width = CLAY_SIZING_GROW(0)
}, },
.padding = { 16, 16, 0, 0 }, .padding = { 16, 16, 0, 0 },
.childGap = 16, .childGap = 16,
@ -134,9 +134,9 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
.cornerRadius = CLAY_CORNER_RADIUS(5) .cornerRadius = CLAY_CORNER_RADIUS(5)
}) { }) {
CLAY_TEXT(CLAY_STRING("File"), CLAY_TEXT_CONFIG({ CLAY_TEXT(CLAY_STRING("File"), CLAY_TEXT_CONFIG({
.textColor = { 255, 255, 255, 255 },
.fontId = FONT_ID_BODY_16, .fontId = FONT_ID_BODY_16,
.fontSize = 16, .fontSize = 16,
.textColor = { 255, 255, 255, 255 }
})); }));
bool fileMenuVisible = bool fileMenuVisible =
@ -146,22 +146,22 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
if (fileMenuVisible) { // Below has been changed slightly to fix the small bug where the menu would dismiss when mousing over the top gap if (fileMenuVisible) { // Below has been changed slightly to fix the small bug where the menu would dismiss when mousing over the top gap
CLAY(CLAY_ID("FileMenu"), { CLAY(CLAY_ID("FileMenu"), {
.layout = {
.padding = {0, 0, 8, 8 }
},
.floating = { .floating = {
.attachTo = CLAY_ATTACH_TO_PARENT,
.attachPoints = { .attachPoints = {
.parent = CLAY_ATTACH_POINT_LEFT_BOTTOM .parent = CLAY_ATTACH_POINT_LEFT_BOTTOM
}, },
.attachTo = CLAY_ATTACH_TO_PARENT,
}, },
.layout = {
.padding = {0, 0, 8, 8 }
}
}) { }) {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.layoutDirection = CLAY_TOP_TO_BOTTOM,
.sizing = { .sizing = {
.width = CLAY_SIZING_FIXED(200) .width = CLAY_SIZING_FIXED(200)
}, },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}, },
.backgroundColor = {40, 40, 40, 255 }, .backgroundColor = {40, 40, 40, 255 },
.cornerRadius = CLAY_CORNER_RADIUS(8) .cornerRadius = CLAY_CORNER_RADIUS(8)
@ -185,16 +185,16 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
.layout = { .sizing = layoutExpand, .childGap = 16 } .layout = { .sizing = layoutExpand, .childGap = 16 }
}) { }) {
CLAY(CLAY_ID("Sidebar"), { CLAY(CLAY_ID("Sidebar"), {
.backgroundColor = contentBackgroundColor,
.layout = { .layout = {
.layoutDirection = CLAY_TOP_TO_BOTTOM,
.padding = CLAY_PADDING_ALL(16),
.childGap = 8,
.sizing = { .sizing = {
.width = CLAY_SIZING_FIXED(250), .width = CLAY_SIZING_FIXED(250),
.height = CLAY_SIZING_GROW(0) .height = CLAY_SIZING_GROW(0)
} },
} .padding = CLAY_PADDING_ALL(16),
.childGap = 8,
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.backgroundColor = contentBackgroundColor,
}) { }) {
for (int i = 0; i < documents.length; i++) { for (int i = 0; i < documents.length; i++) {
Document document = documents.documents[i]; Document document = documents.documents[i];
@ -210,21 +210,21 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
.cornerRadius = CLAY_CORNER_RADIUS(8) .cornerRadius = CLAY_CORNER_RADIUS(8)
}) { }) {
CLAY_TEXT(document.title, CLAY_TEXT_CONFIG({ CLAY_TEXT(document.title, CLAY_TEXT_CONFIG({
.textColor = { 255, 255, 255, 255 },
.fontId = FONT_ID_BODY_16, .fontId = FONT_ID_BODY_16,
.fontSize = 20, .fontSize = 20,
.textColor = { 255, 255, 255, 255 }
})); }));
} }
} else { } else {
SidebarClickData *clickData = (SidebarClickData *)(data->frameArena.memory + data->frameArena.offset); SidebarClickData *clickData = (SidebarClickData *)(data->frameArena.memory + data->frameArena.offset);
*clickData = (SidebarClickData) { .requestedDocumentIndex = i, .selectedDocumentIndex = &data->selectedDocumentIndex }; *clickData = (SidebarClickData) { .requestedDocumentIndex = i, .selectedDocumentIndex = &data->selectedDocumentIndex };
data->frameArena.offset += sizeof(SidebarClickData); data->frameArena.offset += sizeof(SidebarClickData);
CLAY_AUTO_ID({ .layout = sidebarButtonLayout, .backgroundColor = (Clay_Color) { 120, 120, 120, Clay_Hovered() ? 120 : 0 }, .cornerRadius = CLAY_CORNER_RADIUS(8) }) { CLAY_AUTO_ID({ .layout = sidebarButtonLayout, .backgroundColor = (Clay_Color) { 120, 120, 120, Clay_Hovered() ? 120.0f : 0.0f }, .cornerRadius = CLAY_CORNER_RADIUS(8) }) {
Clay_OnHover(HandleSidebarInteraction, (intptr_t)clickData); Clay_OnHover(HandleSidebarInteraction, (intptr_t)clickData);
CLAY_TEXT(document.title, CLAY_TEXT_CONFIG({ CLAY_TEXT(document.title, CLAY_TEXT_CONFIG({
.textColor = { 255, 255, 255, 255 },
.fontId = FONT_ID_BODY_16, .fontId = FONT_ID_BODY_16,
.fontSize = 20, .fontSize = 20,
.textColor = { 255, 255, 255, 255 }
})); }));
} }
} }
@ -232,25 +232,25 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
} }
CLAY(CLAY_ID("MainContent"), { CLAY(CLAY_ID("MainContent"), {
.layout = {
.sizing = layoutExpand,
.padding = CLAY_PADDING_ALL(16),
.childGap = 16,
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.backgroundColor = contentBackgroundColor, .backgroundColor = contentBackgroundColor,
.clip = { .vertical = true, .childOffset = Clay_GetScrollOffset() }, .clip = { .vertical = true, .childOffset = Clay_GetScrollOffset() },
.layout = {
.layoutDirection = CLAY_TOP_TO_BOTTOM,
.childGap = 16,
.padding = CLAY_PADDING_ALL(16),
.sizing = layoutExpand
}
}) { }) {
Document selectedDocument = documents.documents[data->selectedDocumentIndex]; Document selectedDocument = documents.documents[data->selectedDocumentIndex];
CLAY_TEXT(selectedDocument.title, CLAY_TEXT_CONFIG({ CLAY_TEXT(selectedDocument.title, CLAY_TEXT_CONFIG({
.textColor = COLOR_WHITE,
.fontId = FONT_ID_BODY_16, .fontId = FONT_ID_BODY_16,
.fontSize = 24, .fontSize = 24,
.textColor = COLOR_WHITE
})); }));
CLAY_TEXT(selectedDocument.contents, CLAY_TEXT_CONFIG({ CLAY_TEXT(selectedDocument.contents, CLAY_TEXT_CONFIG({
.textColor = COLOR_WHITE,
.fontId = FONT_ID_BODY_16, .fontId = FONT_ID_BODY_16,
.fontSize = 24, .fontSize = 24,
.textColor = COLOR_WHITE
})); }));
} }
} }
@ -261,4 +261,4 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
Clay_RenderCommandArray_Get(&renderCommands, i)->boundingBox.y += data->yOffset; Clay_RenderCommandArray_Get(&renderCommands, i)->boundingBox.y += data->yOffset;
} }
return renderCommands; return renderCommands;
} }

16
examples/sokol-corner-radius/main.c
View file

@ -34,32 +34,32 @@ Clay_RenderCommandArray CornerRadiusTest(){
.height = CLAY_SIZING_GROW(0) .height = CLAY_SIZING_GROW(0)
}; };
CLAY(CLAY_ID("OuterContainer"), { CLAY(CLAY_ID("OuterContainer"), {
.backgroundColor = {43, 41, 51, 255},
.layout = { .layout = {
.layoutDirection = CLAY_TOP_TO_BOTTOM,
.sizing = layoutExpand, .sizing = layoutExpand,
.padding = {0, 0, 20, 20}, .padding = {0, 0, 20, 20},
.childGap = 20 .childGap = 20,
} .layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.backgroundColor = {43, 41, 51, 255},
}) { }) {
for(int i = 0; i < 6; ++i){ for(int i = 0; i < 6; ++i){
CLAY(CLAY_IDI("Row", i), { CLAY(CLAY_IDI("Row", i), {
.layout = { .layout = {
.layoutDirection = CLAY_LEFT_TO_RIGHT,
.sizing = layoutExpand, .sizing = layoutExpand,
.padding = {20, 20, 0, 0}, .padding = {20, 20, 0, 0},
.childGap = 20 .childGap = 20,
.layoutDirection = CLAY_LEFT_TO_RIGHT,
} }
}) { }) {
for(int j = 0; j < 6; ++j){ for(int j = 0; j < 6; ++j){
CLAY(CLAY_IDI("Tile", i*6+j), { CLAY(CLAY_IDI("Tile", i*6+j), {
.layout = { .sizing = layoutExpand },
.backgroundColor = {120, 140, 255, 128}, .backgroundColor = {120, 140, 255, 128},
.cornerRadius = {(i%3)*15, (j%3)*15, (i/2)*15, (j/2)*15}, .cornerRadius = {(float)(i%3)*15, (float)(j%3)*15, ((float)i/2)*15, ((float)j/2)*15},
.border = { .border = {
.color = {120, 140, 255, 255}, .color = {120, 140, 255, 255},
.width = {3, 9, 6, 12, 0}, .width = {3, 9, 6, 12, 0},
}, },
.layout = { .sizing = layoutExpand }
}); });
} }
} }

126
examples/termbox2-demo/main.c
View file

@ -61,11 +61,11 @@ void component_text_pair(const char *key, const char *value)
size_t keylen = strlen(key); size_t keylen = strlen(key);
size_t vallen = strlen(value); size_t vallen = strlen(value);
Clay_String keytext = (Clay_String) { Clay_String keytext = (Clay_String) {
.length = keylen, .length = (int32_t)keylen,
.chars = key, .chars = key,
}; };
Clay_String valtext = (Clay_String) { Clay_String valtext = (Clay_String) {
.length = vallen, .length = (int32_t)vallen,
.chars = value, .chars = value,
}; };
Clay_TextElementConfig *textconfig = Clay_TextElementConfig *textconfig =
@ -74,15 +74,17 @@ void component_text_pair(const char *key, const char *value)
.layout = { .layout = {
.sizing = { .sizing = {
.width = { .width = {
.size.minMax = { .size = {
.min = strlen("Border chars CLAY_TB_IMAGE_MODE_UNICODE_FAST") * Clay_Termbox_Cell_Width(), .minMax = {
.min = strlen("Border chars CLAY_TB_IMAGE_MODE_UNICODE_FAST") * Clay_Termbox_Cell_Width(),
}
} }
}, },
} }
}, },
}) { }) {
CLAY_TEXT(keytext, textconfig); CLAY_TEXT(keytext, textconfig);
CLAY_AUTO_ID({ .layout = { .sizing = CLAY_SIZING_GROW(1) } }) { } CLAY_AUTO_ID({ .layout = { .sizing = {CLAY_SIZING_GROW(1)} } }) { }
CLAY_TEXT(valtext, textconfig); CLAY_TEXT(valtext, textconfig);
} }
@ -92,27 +94,27 @@ void component_termbox_settings(void)
{ {
CLAY(CLAY_ID("Termbox Settings"), { CLAY(CLAY_ID("Termbox Settings"), {
.floating = { .floating = {
.attachTo = CLAY_ATTACH_TO_PARENT, .offset = { 0, 0 },
.zIndex = 1, .zIndex = 1,
.attachPoints = { CLAY_ATTACH_POINT_CENTER_CENTER, CLAY_ATTACH_POINT_CENTER_TOP }, .attachPoints = { CLAY_ATTACH_POINT_CENTER_CENTER, CLAY_ATTACH_POINT_CENTER_TOP },
.offset = { 0, 0 } .attachTo = CLAY_ATTACH_TO_PARENT,
}, },
}) { }) {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.sizing = CLAY_SIZING_FIT(), .sizing = {CLAY_SIZING_FIT()},
.padding = { .padding = {
6 * Clay_Termbox_Cell_Width(), (uint16_t)(6 * Clay_Termbox_Cell_Width()),
6 * Clay_Termbox_Cell_Width(), (uint16_t)(6 * Clay_Termbox_Cell_Width()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
} }
}, },
.backgroundColor = { 0x7f, 0x00, 0x00, 0x7f },
.border = { .border = {
.color = { 0x00, 0x00, 0x00, 0xff },
.width = CLAY_BORDER_ALL(1), .width = CLAY_BORDER_ALL(1),
.color = { 0x00, 0x00, 0x00, 0xff }
}, },
.backgroundColor = { 0x7f, 0x00, 0x00, 0x7f }
}) { }) {
const char *color_mode = NULL; const char *color_mode = NULL;
switch (clay_tb_color_mode) { switch (clay_tb_color_mode) {
@ -246,46 +248,46 @@ void component_color_palette(void)
{ {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.childGap = 16,
.padding = { .padding = {
2 * Clay_Termbox_Cell_Width(), (uint16_t)(2 * Clay_Termbox_Cell_Width()),
2 * Clay_Termbox_Cell_Width(), (uint16_t)(2 * Clay_Termbox_Cell_Width()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
} },
.childGap = 16,
}, },
.backgroundColor = { 0x7f, 0x7f, 0x7f, 0xff },
.border = { .border = {
.color = { 0x00, 0x00, 0x00, 0xff },
.width = CLAY_BORDER_OUTSIDE(2), .width = CLAY_BORDER_OUTSIDE(2),
.color = { 0x00, 0x00, 0x00, 0xff }
}, },
.backgroundColor = { 0x7f, 0x7f, 0x7f, 0xff }
}) { }) {
for (int type = 0; type < 2; ++type) { for (int type = 0; type < 2; ++type) {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout ={ .layout ={
.sizing = {CLAY_SIZING_FIT()},
.childGap = (uint16_t)Clay_Termbox_Cell_Height(),
.layoutDirection = CLAY_TOP_TO_BOTTOM, .layoutDirection = CLAY_TOP_TO_BOTTOM,
.sizing = CLAY_SIZING_FIT(),
.childGap = Clay_Termbox_Cell_Height()
}, },
}) { }) {
for (float ri = 0; ri < 4; ri += 1) { for (float ri = 0; ri < 4; ri += 1) {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout ={ .layout ={
.sizing = CLAY_SIZING_FIT(), .sizing = {CLAY_SIZING_FIT()},
.childGap = Clay_Termbox_Cell_Width() .childGap = (uint16_t)Clay_Termbox_Cell_Width()
}, },
}) { }) {
for (float r = ri * 0x44; r < (ri + 1) * 0x44; r += 0x22) { for (float r = ri * 0x44; r < (ri + 1) * 0x44; r += 0x22) {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout ={ .layout ={
.sizing = {CLAY_SIZING_FIT()},
.layoutDirection = CLAY_TOP_TO_BOTTOM, .layoutDirection = CLAY_TOP_TO_BOTTOM,
.sizing = CLAY_SIZING_FIT(),
}, },
}) { }) {
for (float g = 0; g < 0xff; g += 0x22) { for (float g = 0; g < 0xff; g += 0x22) {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout ={ .layout ={
.sizing = CLAY_SIZING_FIT(), .sizing = {CLAY_SIZING_FIT()},
}, },
}) { }) {
for (float b = 0; b < 0xff; b += 0x22) { for (float b = 0; b < 0xff; b += 0x22) {
@ -325,24 +327,24 @@ void component_unicode_text(void)
{ {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.sizing = CLAY_SIZING_FIT(), .sizing = {CLAY_SIZING_FIT()},
.padding = { .padding = {
2 * Clay_Termbox_Cell_Width(), (uint16_t)(2 * Clay_Termbox_Cell_Width()),
2 * Clay_Termbox_Cell_Width(), (uint16_t)(2 * Clay_Termbox_Cell_Width()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
} }
}, },
.backgroundColor = { 0xcc, 0xbb, 0xaa, 0xff }, .backgroundColor = { 0xcc, 0xbb, 0xaa, 0xff },
.border = { .border = {
// This border should still be displayed in CLAY_TB_BORDER_MODE_ROUND mode // This border should still be displayed in CLAY_TB_BORDER_MODE_ROUND mode
.width = {
0.75 * Clay_Termbox_Cell_Width(),
0.75 * Clay_Termbox_Cell_Width(),
0.75 * Clay_Termbox_Cell_Height(),
0.75 * Clay_Termbox_Cell_Height(),
},
.color = { 0x33, 0x33, 0x33, 0xff }, .color = { 0x33, 0x33, 0x33, 0xff },
.width = {
(uint16_t)(0.75 * Clay_Termbox_Cell_Width()),
(uint16_t)(0.75 * Clay_Termbox_Cell_Width()),
(uint16_t)(0.75 * Clay_Termbox_Cell_Height()),
(uint16_t)(0.75 * Clay_Termbox_Cell_Height()),
},
}, },
}) { }) {
CLAY_TEXT( CLAY_TEXT(
@ -379,12 +381,12 @@ void component_keybinds(void)
{ {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.sizing = CLAY_SIZING_FIT(), .sizing = {CLAY_SIZING_FIT()},
.padding = { .padding = {
4 * Clay_Termbox_Cell_Width(), (uint16_t)(4 * Clay_Termbox_Cell_Width()),
4 * Clay_Termbox_Cell_Width(), (uint16_t)(4 * Clay_Termbox_Cell_Width()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
} }
}, },
.backgroundColor = { 0x00, 0x7f, 0x7f, 0xff } .backgroundColor = { 0x00, 0x7f, 0x7f, 0xff }
@ -412,13 +414,13 @@ void component_image(clay_tb_image *image, int width)
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.sizing = { .sizing = {
.width = (0 == width) ? CLAY_SIZING_GROW() : CLAY_SIZING_FIXED(width), .width = (0 == width) ? CLAY_SIZING_GROW() : CLAY_SIZING_FIXED((float)width),
}, },
}, },
.aspectRatio = { 512.0 / 406.0 },
.image = { .image = {
.imageData = image, .imageData = image,
}, },
.aspectRatio = { 512.0 / 406.0 }
}) { } }) { }
} }
@ -469,35 +471,35 @@ void component_bordered_text(void)
{ {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.layoutDirection = CLAY_TOP_TO_BOTTOM,
.sizing = { .sizing = {
.width = CLAY_SIZING_FIT(450), .width = CLAY_SIZING_FIT(450),
.height = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIT(),
}, },
.padding = CLAY_PADDING_ALL(32) .padding = CLAY_PADDING_ALL(32),
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}, },
.backgroundColor = { 0x24, 0x55, 0x34, 0xff }, .backgroundColor = { 0x24, 0x55, 0x34, 0xff },
}) { }) {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.border = { .width = { 1, 1, 1, 1, 1 }, .color = { 0xaa, 0x00, 0x00, 0xff } }, .border = { .color = { 0xaa, 0x00, 0x00, 0xff }, .width = { 1, 1, 1, 1, 1 } },
}) { }) {
CLAY_TEXT( CLAY_TEXT(
CLAY_STRING("Test"), CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } })); CLAY_STRING("Test"), CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } }));
} }
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.border = { .width = { 1, 1, 1, 1, 1 }, .color = { 0x00, 0xaa, 0x00, 0xff } }, .border = { .color = { 0x00, 0xaa, 0x00, 0xff }, .width = { 1, 1, 1, 1, 1 } },
}) { }) {
CLAY_TEXT(CLAY_STRING("of the border width"), CLAY_TEXT(CLAY_STRING("of the border width"),
CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } })); CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } }));
} }
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.border = { .width = { 1, 1, 1, 1, 1 }, .color = { 0x00, 0x00, 0xaa, 0xff } }, .border = { .color = { 0x00, 0x00, 0xaa, 0xff }, .width = { 1, 1, 1, 1, 1 } },
}) { }) {
CLAY_TEXT(CLAY_STRING("and overlap for multiple lines\nof text"), CLAY_TEXT(CLAY_STRING("and overlap for multiple lines\nof text"),
CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } })); CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } }));
} }
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.border = { .width = { 1, 1, 1, 1, 1 }, .color = { 0x00, 0x00, 0xaa, 0xff } }, .border = { .color = { 0x00, 0x00, 0xaa, 0xff }, .width = { 1, 1, 1, 1, 1 } },
}) { }) {
CLAY_TEXT(CLAY_STRING("this text\nis long enough\nto display all\n borders\naround it"), CLAY_TEXT(CLAY_STRING("this text\nis long enough\nto display all\n borders\naround it"),
CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } })); CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } }));
@ -509,31 +511,31 @@ Clay_RenderCommandArray CreateLayout(clay_tb_image *image1, clay_tb_image *image
{ {
Clay_BeginLayout(); Clay_BeginLayout();
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.clip = {
.vertical = false,
.horizontal = true,
.childOffset = Clay_GetScrollOffset(),
},
.layout = { .layout = {
.sizing = { .sizing = {
.width = CLAY_SIZING_GROW(), .width = CLAY_SIZING_GROW(),
.height = CLAY_SIZING_GROW() .height = CLAY_SIZING_GROW()
}, },
.childGap = 64,
.childAlignment = { .childAlignment = {
.x = CLAY_ALIGN_X_LEFT, .x = CLAY_ALIGN_X_LEFT,
.y = CLAY_ALIGN_Y_CENTER .y = CLAY_ALIGN_Y_CENTER
}, },
.childGap = 64
}, },
.backgroundColor = { 0x24, 0x24, 0x24, 0xff } .backgroundColor = { 0x24, 0x24, 0x24, 0xff },
.clip = {
.horizontal = true,
.vertical = false,
.childOffset = Clay_GetScrollOffset(),
},
}) { }) {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.sizing = {CLAY_SIZING_FIT()},
.childAlignment = { .childAlignment = {
.x = CLAY_ALIGN_X_RIGHT, .x = CLAY_ALIGN_X_RIGHT,
}, },
.layoutDirection = CLAY_TOP_TO_BOTTOM, .layoutDirection = CLAY_TOP_TO_BOTTOM,
.sizing = CLAY_SIZING_FIT(),
}, },
}) { }) {
component_keybinds(); component_keybinds();
@ -541,9 +543,9 @@ Clay_RenderCommandArray CreateLayout(clay_tb_image *image1, clay_tb_image *image
} }
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = {CLAY_SIZING_FIT()},
.childGap = 32, .childGap = 32,
.sizing = CLAY_SIZING_FIT(), .layoutDirection = CLAY_TOP_TO_BOTTOM,
}, },
}) { }) {
component_termbox_settings(); component_termbox_settings();

58
examples/termbox2-image-demo/main.c
View file

@ -104,11 +104,11 @@ void component_text_pair(const char *key, const char *value)
size_t keylen = strlen(key); size_t keylen = strlen(key);
size_t vallen = strlen(value); size_t vallen = strlen(value);
Clay_String keytext = (Clay_String) { Clay_String keytext = (Clay_String) {
.length = keylen, .length = (int32_t)keylen,
.chars = key, .chars = key,
}; };
Clay_String valtext = (Clay_String) { Clay_String valtext = (Clay_String) {
.length = vallen, .length = (int32_t)vallen,
.chars = value, .chars = value,
}; };
Clay_TextElementConfig *textconfig = Clay_TextElementConfig *textconfig =
@ -117,15 +117,17 @@ void component_text_pair(const char *key, const char *value)
.layout = { .layout = {
.sizing = { .sizing = {
.width = { .width = {
.size.minMax = { .size = {
.min = strlen("Border chars CLAY_TB_IMAGE_MODE_UNICODE_FAST") * Clay_Termbox_Cell_Width(), .minMax = {
.min = strlen("Border chars CLAY_TB_IMAGE_MODE_UNICODE_FAST") * Clay_Termbox_Cell_Width(),
}
} }
}, },
} }
}, },
}) { }) {
CLAY_TEXT(keytext, textconfig); CLAY_TEXT(keytext, textconfig);
CLAY_AUTO_ID({ .layout = { .sizing = CLAY_SIZING_GROW(1) } }) { } CLAY_AUTO_ID({ .layout = { .sizing = {CLAY_SIZING_GROW(1)} } }) { }
CLAY_TEXT(valtext, textconfig); CLAY_TEXT(valtext, textconfig);
} }
@ -135,19 +137,19 @@ void component_termbox_settings(void)
{ {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.sizing = CLAY_SIZING_FIT(), .sizing = {CLAY_SIZING_FIT()},
.padding = { .padding = {
6 * Clay_Termbox_Cell_Width(), (uint16_t)(6 * Clay_Termbox_Cell_Width()),
6 * Clay_Termbox_Cell_Width(), (uint16_t)(6 * Clay_Termbox_Cell_Width()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
} }
}, },
.backgroundColor = { 0x7f, 0x00, 0x00, 0x7f },
.border = { .border = {
.color = { 0x00, 0x00, 0x00, 0xff },
.width = CLAY_BORDER_ALL(1), .width = CLAY_BORDER_ALL(1),
.color = { 0x00, 0x00, 0x00, 0xff }
}, },
.backgroundColor = { 0x7f, 0x00, 0x00, 0x7f }
}) { }) {
const char *color_mode = NULL; const char *color_mode = NULL;
switch (clay_tb_color_mode) { switch (clay_tb_color_mode) {
@ -280,12 +282,12 @@ void component_keybinds(void)
{ {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
.sizing = CLAY_SIZING_FIT(), .sizing = {CLAY_SIZING_FIT()},
.padding = { .padding = {
4 * Clay_Termbox_Cell_Width(), (uint16_t)(4 * Clay_Termbox_Cell_Width()),
4 * Clay_Termbox_Cell_Width(), (uint16_t)(4 * Clay_Termbox_Cell_Width()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
2 * Clay_Termbox_Cell_Height(), (uint16_t)(2 * Clay_Termbox_Cell_Height()),
} }
}, },
.backgroundColor = { 0x00, 0x7f, 0x7f, 0xff } .backgroundColor = { 0x00, 0x7f, 0x7f, 0xff }
@ -317,12 +319,12 @@ void component_image(img_group *img_pair)
.width = CLAY_SIZING_GROW(), .width = CLAY_SIZING_GROW(),
.height = CLAY_SIZING_GROW() .height = CLAY_SIZING_GROW()
}, },
.layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = (uint16_t)(1 * Clay_Termbox_Cell_Height()),
.childAlignment = { .childAlignment = {
.x = CLAY_ALIGN_X_CENTER, .x = CLAY_ALIGN_X_CENTER,
.y = CLAY_ALIGN_Y_CENTER .y = CLAY_ALIGN_Y_CENTER
}, },
.childGap = 1 * Clay_Termbox_Cell_Height() .layoutDirection = CLAY_TOP_TO_BOTTOM,
}, },
.backgroundColor = { 0x24, 0x24, 0x24, 0xff } .backgroundColor = { 0x24, 0x24, 0x24, 0xff }
}) { }) {
@ -332,10 +334,10 @@ void component_image(img_group *img_pair)
.width = CLAY_SIZING_GROW(), .width = CLAY_SIZING_GROW(),
}, },
}, },
.aspectRatio = { (float)img_pair->width / img_pair->height },
.image = { .image = {
.imageData = &img_pair->image, .imageData = &img_pair->image,
}, },
.aspectRatio = { (float)img_pair->width / img_pair->height }
}) { } }) { }
component_keybinds(); component_keybinds();
} }
@ -348,12 +350,12 @@ void component_image_small(img_group **img_pairs, int count, int selected_index)
.sizing = { .sizing = {
.width = CLAY_SIZING_PERCENT(0.25), .width = CLAY_SIZING_PERCENT(0.25),
}, },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
.childGap = 20, .childGap = 20,
.childAlignment = { .childAlignment = {
.x = CLAY_ALIGN_X_CENTER, .x = CLAY_ALIGN_X_CENTER,
.y = CLAY_ALIGN_Y_CENTER .y = CLAY_ALIGN_Y_CENTER
}, },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}, },
}) { }) {
CLAY_AUTO_ID({ CLAY_AUTO_ID({
@ -362,10 +364,10 @@ void component_image_small(img_group **img_pairs, int count, int selected_index)
.width = CLAY_SIZING_PERCENT(0.7), .width = CLAY_SIZING_PERCENT(0.7),
}, },
}, },
.aspectRatio = { (float)img_pairs[selected_index]->width / img_pairs[selected_index]->height },
.image = { .image = {
.imageData = &img_pairs[selected_index]->image_1, .imageData = &img_pairs[selected_index]->image_1,
}, },
.aspectRatio = { (float)img_pairs[selected_index]->width / img_pairs[selected_index]->height }
}) { } }) { }
CLAY_AUTO_ID({ CLAY_AUTO_ID({
.layout = { .layout = {
@ -373,10 +375,10 @@ void component_image_small(img_group **img_pairs, int count, int selected_index)
.width = CLAY_SIZING_GROW(), .width = CLAY_SIZING_GROW(),
}, },
}, },
.aspectRatio = { (float)img_pairs[selected_index]->width / img_pairs[selected_index]->height },
.image = { .image = {
.imageData = &img_pairs[selected_index]->image_2, .imageData = &img_pairs[selected_index]->image_2,
}, },
.aspectRatio = { (float)img_pairs[selected_index]->width / img_pairs[selected_index]->height }
}) { } }) { }
component_termbox_settings(); component_termbox_settings();
} }
@ -390,8 +392,8 @@ void component_thumbnails(img_group **img_pairs, int count, int selected_index)
.width = CLAY_SIZING_PERCENT(0.1), .width = CLAY_SIZING_PERCENT(0.1),
.height = CLAY_SIZING_GROW() .height = CLAY_SIZING_GROW()
}, },
.childGap = 20,
.layoutDirection = CLAY_TOP_TO_BOTTOM, .layoutDirection = CLAY_TOP_TO_BOTTOM,
.childGap = 20
}, },
.backgroundColor = { 0x42, 0x42, 0x42, 0xff } .backgroundColor = { 0x42, 0x42, 0x42, 0xff }
}) { }) {
@ -399,8 +401,8 @@ void component_thumbnails(img_group **img_pairs, int count, int selected_index)
Clay_BorderElementConfig border; Clay_BorderElementConfig border;
if (i == selected_index) { if (i == selected_index) {
border = (Clay_BorderElementConfig) { border = (Clay_BorderElementConfig) {
.color = { 0x00, 0x30, 0xc0, 0x8f },
.width =CLAY_BORDER_OUTSIDE(10), .width =CLAY_BORDER_OUTSIDE(10),
.color = { 0x00, 0x30, 0xc0, 0x8f }
}; };
} else { } else {
border = (Clay_BorderElementConfig) { border = (Clay_BorderElementConfig) {
@ -413,11 +415,11 @@ void component_thumbnails(img_group **img_pairs, int count, int selected_index)
.width = CLAY_SIZING_GROW(), .width = CLAY_SIZING_GROW(),
}, },
}, },
.border = border, .aspectRatio = { (float)img_pairs[i]->width / img_pairs[i]->height },
.image = { .image = {
.imageData = &img_pairs[i]->thumbnail, .imageData = &img_pairs[i]->thumbnail,
}, },
.aspectRatio = { (float)img_pairs[i]->width / img_pairs[i]->height } .border = border,
}) { } }) { }
} }
} }
@ -434,11 +436,11 @@ Clay_RenderCommandArray CreateLayout(struct img_group **imgs)
.width = CLAY_SIZING_GROW(), .width = CLAY_SIZING_GROW(),
.height = CLAY_SIZING_GROW() .height = CLAY_SIZING_GROW()
}, },
.childGap = 64,
.childAlignment = { .childAlignment = {
.x = CLAY_ALIGN_X_LEFT, .x = CLAY_ALIGN_X_LEFT,
.y = CLAY_ALIGN_Y_CENTER .y = CLAY_ALIGN_Y_CENTER
}, },
.childGap = 64
}, },
.backgroundColor = { 0x24, 0x24, 0x24, 0xff } .backgroundColor = { 0x24, 0x24, 0x24, 0xff }
}) { }) {

8
examples/win32_gdi/main.c
View file

@ -64,7 +64,7 @@ LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam)
zDelta = zDelta * .012; zDelta = zDelta * .012;
} }
Clay_UpdateScrollContainers(true, (Clay_Vector2){.x = 0, .y = zDelta}, dt); Clay_UpdateScrollContainers(true, (Clay_Vector2){.x = 0, .y = (float)zDelta}, dt);
InvalidateRect(hwnd, NULL, false); // force a wm_paint event InvalidateRect(hwnd, NULL, false); // force a wm_paint event
break; break;
@ -79,7 +79,7 @@ LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam)
short mouseY = GET_Y_LPARAM(lParam); short mouseY = GET_Y_LPARAM(lParam);
short mouseButtons = LOWORD(wParam); short mouseButtons = LOWORD(wParam);
Clay_SetPointerState((Clay_Vector2){mouseX, mouseY}, mouseButtons & 0b01); Clay_SetPointerState((Clay_Vector2){(float)mouseX, (float)mouseY}, mouseButtons & 0b01);
InvalidateRect(hwnd, NULL, false); // force a wm_paint event InvalidateRect(hwnd, NULL, false); // force a wm_paint event
break; break;
@ -91,7 +91,7 @@ LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam)
RECT r = {0}; RECT r = {0};
if (GetClientRect(hwnd, &r)) if (GetClientRect(hwnd, &r))
{ {
Clay_Dimensions dim = (Clay_Dimensions){.height = r.bottom - r.top, .width = r.right - r.left}; Clay_Dimensions dim = (Clay_Dimensions){.width = (float)r.right - r.left, .height = (float)r.bottom - r.top};
Clay_SetLayoutDimensions(dim); Clay_SetLayoutDimensions(dim);
} }
@ -113,7 +113,7 @@ LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam)
break; break;
} }
printf("Key Pressed: %d\r\n", wParam); printf("Key Pressed: %llu\r\n", wParam);
InvalidateRect(hwnd, NULL, false); // force a wm_paint event InvalidateRect(hwnd, NULL, false); // force a wm_paint event
break; break;

4
renderers/cairo/clay_renderer_cairo.c
View file

@ -1,5 +1,5 @@
// Copyright (c) 2024 Justin Andreas Lacoste (@27justin) // Copyright (c) 2024 Justin Andreas Lacoste (@27justin)
// //
// This software is provided 'as-is', without any express or implied warranty. // This software is provided 'as-is', without any express or implied warranty.
// In no event will the authors be held liable for any damages arising from the // In no event will the authors be held liable for any damages arising from the
// use of this software. // use of this software.
@ -95,7 +95,7 @@ static inline Clay_Dimensions Clay_Cairo_MeasureText(Clay_StringSlice str, Clay_
} }
// Ensure string is null-terminated for Cairo // Ensure string is null-terminated for Cairo
Clay_String toTerminate = (Clay_String){ .chars = str.chars, .length = str.length, .isStaticallyAllocated = false }; Clay_String toTerminate = (Clay_String){ .isStaticallyAllocated = false, .length = str.length, .chars = str.chars };
char *text = Clay_Cairo__NullTerminate(&toTerminate); char *text = Clay_Cairo__NullTerminate(&toTerminate);
char *font_family = fonts[config->fontId]; char *font_family = fonts[config->fontId];

10
renderers/win32_gdi/clay_renderer_gdi.c
View file

@ -111,7 +111,7 @@ static inline Clay_Color ColorBlend(Clay_Color base, Clay_Color overlay, float f
// Avoid division by zero and fully transparent cases // Avoid division by zero and fully transparent cases
if (out_a <= 0.0f) if (out_a <= 0.0f)
{ {
return (Clay_Color) { .a = 0, .r = 0, .g = 0, .b = 0 }; return (Clay_Color) {.r = 0, .g = 0, .b = 0, .a = 0 };
} }
blended.r = (overlay.r * overlay_a + base.r * base_a * (1.0f - overlay_a)) / out_a; blended.r = (overlay.r * overlay_a + base.r * base_a * (1.0f - overlay_a)) / out_a;
@ -214,7 +214,7 @@ static void CreateHDCSubstitute(HDCSubstitute* phdcs, HDC hdcSrc, PRECT prc)
} }
// Select the DIB section into the memory DC // Select the DIB section into the memory DC
phdcs->hbmMemPrev = SelectObject(phdcs->hdcMem, phdcs->hbmMem); phdcs->hbmMemPrev = (HBITMAP)SelectObject(phdcs->hdcMem, phdcs->hbmMem);
// Copy the content of the target DC to the memory DC // Copy the content of the target DC to the memory DC
BitBlt(phdcs->hdcMem, 0, 0, phdcs->size.cx, phdcs->size.cy, hdcSrc, prc->left, prc->top, SRCCOPY); BitBlt(phdcs->hdcMem, 0, 0, phdcs->size.cx, phdcs->size.cy, hdcSrc, prc->left, prc->top, SRCCOPY);
@ -329,7 +329,7 @@ void Clay_Win32_Render(HWND hwnd, Clay_RenderCommandArray renderCommands, HFONT*
uint16_t font_id = renderCommand->renderData.text.fontId; uint16_t font_id = renderCommand->renderData.text.fontId;
HFONT hFont = fonts[font_id]; HFONT hFont = fonts[font_id];
HFONT hPrevFont = SelectObject(renderer_hdcMem, hFont); HFONT hPrevFont = (HFONT)SelectObject(renderer_hdcMem, hFont);
// Actually draw text // Actually draw text
DrawTextA(renderer_hdcMem, renderCommand->renderData.text.stringContents.chars, DrawTextA(renderer_hdcMem, renderCommand->renderData.text.stringContents.chars,
@ -438,7 +438,7 @@ void Clay_Win32_Render(HWND hwnd, Clay_RenderCommandArray renderCommands, HFONT*
HPEN bottomPen = CreatePen(PS_SOLID, brd.width.bottom, RGB(brd.color.r, brd.color.g, brd.color.b)); HPEN bottomPen = CreatePen(PS_SOLID, brd.width.bottom, RGB(brd.color.r, brd.color.g, brd.color.b));
HPEN rightPen = CreatePen(PS_SOLID, brd.width.right, RGB(brd.color.r, brd.color.g, brd.color.b)); HPEN rightPen = CreatePen(PS_SOLID, brd.width.right, RGB(brd.color.r, brd.color.g, brd.color.b));
HPEN oldPen = SelectObject(renderer_hdcMem, topPen); HPEN oldPen = (HPEN)SelectObject(renderer_hdcMem, topPen);
if (brd.cornerRadius.topLeft == 0) if (brd.cornerRadius.topLeft == 0)
{ {
@ -536,7 +536,7 @@ static inline Clay_Dimensions Clay_Win32_MeasureText(Clay_StringSlice text, Clay
if (hTempDC != NULL) if (hTempDC != NULL)
{ {
HFONT hPrevFont = SelectObject(hTempDC, hFont); HFONT hPrevFont = (HFONT)SelectObject(hTempDC, hFont);
SIZE size; SIZE size;
GetTextExtentPoint32(hTempDC, text.chars, text.length, &size); GetTextExtentPoint32(hTempDC, text.chars, text.length, &size);