mirror of
https://github.com/nicbarker/clay.git
synced 2025-11-07 13:26:17 +00:00
Compare commits
9 commits
372249b158
...
e15045714d
| Author | SHA1 | Date | |
|---|---|---|---|
|
e15045714d | ||
|
|
37675089e3 | ||
|
|
1cbc56cbf2 | ||
|
|
38bb241ced | ||
|
|
f4933c6669 | ||
|
|
61ba36753b | ||
|
|
4f4605eff9 | ||
|
|
7c65f31f46 | ||
|
|
01025e9157 |
7
.gitignore
vendored
7
.gitignore
vendored
|
|
@ -4,4 +4,9 @@ cmake-build-release/
|
|||
.idea/
|
||||
node_modules/
|
||||
*.dSYM
|
||||
.vs/
|
||||
.vs/
|
||||
bindings/odin/clay-odin/tmp/
|
||||
|
||||
generator/__pycache__/
|
||||
|
||||
generator/generators/__pycache__/
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
cp ../../clay.h clay.c;
|
||||
# Intel Mac
|
||||
clang -c -DCLAY_IMPLEMENTATION -o clay.o -ffreestanding -static -target x86_64-apple-darwin clay.c -fPIC -O3 && ar r clay-odin/macos/clay.a clay.o;
|
||||
rm -f clay-odin/macos/clay.a && clang -c -DCLAY_IMPLEMENTATION -o clay.o -ffreestanding -static -target x86_64-apple-darwin clay.c -fPIC -O3 && ar r clay-odin/macos/clay.a clay.o;
|
||||
# ARM Mac
|
||||
clang -c -DCLAY_IMPLEMENTATION -g -o clay.o -static clay.c -fPIC -O3 && ar r clay-odin/macos-arm64/clay.a clay.o;
|
||||
rm -f clay-odin/macos-arm64/clay.a && clang -c -DCLAY_IMPLEMENTATION -g -o clay.o -static clay.c -fPIC -O3 && ar r clay-odin/macos-arm64/clay.a clay.o;
|
||||
# x64 Windows
|
||||
clang -c -DCLAY_IMPLEMENTATION -o clay-odin/windows/clay.lib -ffreestanding -target x86_64-pc-windows-msvc -fuse-ld=llvm-lib -static -O3 clay.c;
|
||||
rm -f clay-odin/windows/clay.lib && clang -c -DCLAY_IMPLEMENTATION -o clay-odin/windows/clay.lib -ffreestanding -target x86_64-pc-windows-msvc -fuse-ld=llvm-lib -static -O3 clay.c;
|
||||
# Linux
|
||||
clang -c -DCLAY_IMPLEMENTATION -o clay.o -ffreestanding -static -target x86_64-unknown-linux-gnu clay.c -fPIC -O3 && ar r clay-odin/linux/clay.a clay.o;
|
||||
rm -f clay-odin/linux/clay.a && clang -c -DCLAY_IMPLEMENTATION -o clay.o -ffreestanding -static -target x86_64-unknown-linux-gnu clay.c -fPIC -O3 && ar r clay-odin/linux/clay.a clay.o;
|
||||
# WASM
|
||||
clang -c -DCLAY_IMPLEMENTATION -o clay-odin/wasm/clay.o -target wasm32 -nostdlib -static -O3 clay.c;
|
||||
rm -f clay-odin/wasm/clay.o && clang -c -DCLAY_IMPLEMENTATION -o clay-odin/wasm/clay.o -target wasm32 -nostdlib -static -O3 clay.c;
|
||||
rm clay.o;
|
||||
rm clay.c;
|
||||
|
|
|
|||
|
|
@ -338,7 +338,6 @@ ClayArray :: struct($type: typeid) {
|
|||
}
|
||||
|
||||
ElementDeclaration :: struct {
|
||||
id: ElementId,
|
||||
layout: LayoutConfig,
|
||||
backgroundColor: Color,
|
||||
cornerRadius: CornerRadius,
|
||||
|
|
@ -378,6 +377,7 @@ Context :: struct {} // opaque structure, only use as a pointer
|
|||
@(link_prefix = "Clay_", default_calling_convention = "c")
|
||||
foreign Clay {
|
||||
_OpenElement :: proc() ---
|
||||
_OpenElementWithId :: proc(id: ElementId) ---
|
||||
_CloseElement :: proc() ---
|
||||
MinMemorySize :: proc() -> u32 ---
|
||||
CreateArenaWithCapacityAndMemory :: proc(capacity: c.size_t, offset: [^]u8) -> Arena ---
|
||||
|
|
@ -426,11 +426,19 @@ ConfigureOpenElement :: proc(config: ElementDeclaration) -> bool {
|
|||
}
|
||||
|
||||
@(deferred_none = _CloseElement)
|
||||
UI :: proc() -> proc (config: ElementDeclaration) -> bool {
|
||||
UI_WithId :: proc(id: ElementId) -> proc (config: ElementDeclaration) -> bool {
|
||||
_OpenElementWithId(id)
|
||||
return ConfigureOpenElement
|
||||
}
|
||||
|
||||
@(deferred_none = _CloseElement)
|
||||
UI_AutoId :: proc() -> proc (config: ElementDeclaration) -> bool {
|
||||
_OpenElement()
|
||||
return ConfigureOpenElement
|
||||
}
|
||||
|
||||
UI :: proc{UI_WithId, UI_AutoId};
|
||||
|
||||
Text :: proc($text: string, config: ^TextElementConfig) {
|
||||
wrapped := MakeString(text)
|
||||
wrapped.isStaticallyAllocated = true
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -63,14 +63,12 @@ border2pxRed := clay.BorderElementConfig {
|
|||
}
|
||||
|
||||
LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Color, $text: string, image: ^raylib.Texture2D) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("HeroBlob", index),
|
||||
if clay.UI(clay.ID("HeroBlob", index))({
|
||||
layout = { sizing = { width = clay.SizingGrow({ max = 480 }) }, padding = clay.PaddingAll(16), childGap = 16, childAlignment = clay.ChildAlignment{ y = .Center } },
|
||||
border = border2pxRed,
|
||||
cornerRadius = clay.CornerRadiusAll(10)
|
||||
}) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("CheckImage", index),
|
||||
if clay.UI(clay.ID("CheckImage", index))({
|
||||
layout = { sizing = { width = clay.SizingFixed(32) } },
|
||||
aspectRatio = { 1.0 },
|
||||
image = { imageData = image },
|
||||
|
|
@ -80,16 +78,14 @@ LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Colo
|
|||
}
|
||||
|
||||
LandingPageDesktop :: proc() {
|
||||
if clay.UI()({
|
||||
id = clay.ID("LandingPage1Desktop"),
|
||||
if clay.UI(clay.ID("LandingPage1Desktop"))({
|
||||
layout = { sizing = { width = clay.SizingGrow(), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } },
|
||||
}) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("LandingPage1"),
|
||||
if clay.UI(clay.ID("LandingPage1"))({
|
||||
layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 },
|
||||
border = { COLOR_RED, { left = 2, right = 2 } },
|
||||
}) {
|
||||
if clay.UI()({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingPercent(0.55) }, layoutDirection = .TopToBottom, childGap = 8 } }) {
|
||||
if clay.UI(clay.ID("LeftText"))({ layout = { sizing = { width = clay.SizingPercent(0.55) }, layoutDirection = .TopToBottom, childGap = 8 } }) {
|
||||
clay.Text(
|
||||
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
|
||||
clay.TextConfig({fontSize = 56, fontId = FONT_ID_TITLE_56, textColor = COLOR_RED}),
|
||||
|
|
@ -100,8 +96,7 @@ LandingPageDesktop :: proc() {
|
|||
clay.TextConfig({fontSize = 36, fontId = FONT_ID_TITLE_36, textColor = COLOR_ORANGE}),
|
||||
)
|
||||
}
|
||||
if clay.UI()({
|
||||
id = clay.ID("HeroImageOuter"),
|
||||
if clay.UI(clay.ID("HeroImageOuter"))({
|
||||
layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingPercent(0.45) }, childAlignment = { x = .Center }, childGap = 16 },
|
||||
}) {
|
||||
LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, "High performance", &checkImage5)
|
||||
|
|
@ -115,8 +110,7 @@ LandingPageDesktop :: proc() {
|
|||
}
|
||||
|
||||
LandingPageMobile :: proc() {
|
||||
if clay.UI()({
|
||||
id = clay.ID("LandingPage1Mobile"),
|
||||
if clay.UI(clay.ID("LandingPage1Mobile"))({
|
||||
layout = {
|
||||
layoutDirection = .TopToBottom,
|
||||
sizing = { width = clay.SizingGrow(), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) },
|
||||
|
|
@ -125,7 +119,7 @@ LandingPageMobile :: proc() {
|
|||
childGap = 32,
|
||||
},
|
||||
}) {
|
||||
if clay.UI()({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingGrow() }, layoutDirection = .TopToBottom, childGap = 8 } }) {
|
||||
if clay.UI(clay.ID("LeftText"))({ layout = { sizing = { width = clay.SizingGrow() }, layoutDirection = .TopToBottom, childGap = 8 } }) {
|
||||
clay.Text(
|
||||
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
|
||||
clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}),
|
||||
|
|
@ -136,8 +130,7 @@ LandingPageMobile :: proc() {
|
|||
clay.TextConfig({fontSize = 32, fontId = FONT_ID_TITLE_32, textColor = COLOR_ORANGE}),
|
||||
)
|
||||
}
|
||||
if clay.UI()({
|
||||
id = clay.ID("HeroImageOuter"),
|
||||
if clay.UI(clay.ID("HeroImageOuter"))({
|
||||
layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow() }, childAlignment = { x = .Center }, childGap = 16 },
|
||||
}) {
|
||||
LandingPageBlob(1, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_5, "High performance", &checkImage5)
|
||||
|
|
@ -151,18 +144,16 @@ LandingPageMobile :: proc() {
|
|||
|
||||
FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) {
|
||||
textConfig := clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_RED})
|
||||
if clay.UI()({
|
||||
id = clay.ID("HFileBoxOuter"),
|
||||
if clay.UI(clay.ID("HFileBoxOuter"))({
|
||||
layout = { layoutDirection = .TopToBottom, sizing = { width = widthSizing }, childAlignment = { y = .Center }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 },
|
||||
}) {
|
||||
if clay.UI()({ id = clay.ID("HFileIncludeOuter"), layout = { padding = { 8, 8, 4, 4 } }, backgroundColor = COLOR_RED, cornerRadius = clay.CornerRadiusAll(8) }) {
|
||||
if clay.UI(clay.ID("HFileIncludeOuter"))({ layout = { padding = { 8, 8, 4, 4 } }, backgroundColor = COLOR_RED, cornerRadius = clay.CornerRadiusAll(8) }) {
|
||||
clay.Text("#include clay.h", clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_LIGHT}))
|
||||
}
|
||||
clay.Text("~2000 lines of C99.", textConfig)
|
||||
clay.Text("Zero dependencies, including no C standard library.", textConfig)
|
||||
}
|
||||
if clay.UI()({
|
||||
id = clay.ID("BringYourOwnRendererOuter"),
|
||||
if clay.UI(clay.ID("BringYourOwnRendererOuter"))({
|
||||
layout = { layoutDirection = .TopToBottom, sizing = { width = widthSizing }, childAlignment = { y = .Center }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 },
|
||||
}) {
|
||||
clay.Text("Renderer agnostic.", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = COLOR_ORANGE}))
|
||||
|
|
@ -172,9 +163,8 @@ FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) {
|
|||
}
|
||||
|
||||
FeatureBlocksDesktop :: proc() {
|
||||
if clay.UI()({ id = clay.ID("FeatureBlocksOuter"), layout = { sizing = { width = clay.SizingGrow({}) } } }) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("FeatureBlocksInner"),
|
||||
if clay.UI(clay.ID("FeatureBlocksOuter"))({ layout = { sizing = { width = clay.SizingGrow({}) } } }) {
|
||||
if clay.UI(clay.ID("FeatureBlocksInner"))({
|
||||
layout = { sizing = { width = clay.SizingGrow() }, childAlignment = { y = .Center } },
|
||||
border = { width = { betweenChildren = 2}, color = COLOR_RED },
|
||||
}) {
|
||||
|
|
@ -184,8 +174,7 @@ FeatureBlocksDesktop :: proc() {
|
|||
}
|
||||
|
||||
FeatureBlocksMobile :: proc() {
|
||||
if clay.UI()({
|
||||
id = clay.ID("FeatureBlocksInner"),
|
||||
if clay.UI(clay.ID("FeatureBlocksInner"))({
|
||||
layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow() } },
|
||||
border = { width = { betweenChildren = 2}, color = COLOR_RED },
|
||||
}) {
|
||||
|
|
@ -194,9 +183,9 @@ FeatureBlocksMobile :: proc() {
|
|||
}
|
||||
|
||||
DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
|
||||
if clay.UI()({ id = clay.ID("SyntaxPageLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
|
||||
if clay.UI(clay.ID("SyntaxPageLeftText"))({ layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
|
||||
clay.Text("Declarative Syntax", clay.TextConfig(titleTextConfig))
|
||||
if clay.UI()({ id = clay.ID("SyntaxSpacer"), layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {}
|
||||
if clay.UI(clay.ID("SyntaxSpacer"))({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {}
|
||||
clay.Text(
|
||||
"Flexible and readable declarative syntax with nested UI element hierarchies.",
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
|
||||
|
|
@ -210,9 +199,8 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi
|
|||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
|
||||
)
|
||||
}
|
||||
if clay.UI()({ id = clay.ID("SyntaxPageRightImage"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("SyntaxPageRightImageInner"),
|
||||
if clay.UI(clay.ID("SyntaxPageRightImage"))({ layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) {
|
||||
if clay.UI(clay.ID("SyntaxPageRightImageInner"))({
|
||||
layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } },
|
||||
aspectRatio = { 1136.0 / 1194.0 },
|
||||
image = { imageData = &syntaxImage },
|
||||
|
|
@ -221,12 +209,10 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi
|
|||
}
|
||||
|
||||
DeclarativeSyntaxPageDesktop :: proc() {
|
||||
if clay.UI()({
|
||||
id = clay.ID("SyntaxPageDesktop"),
|
||||
if clay.UI(clay.ID("SyntaxPageDesktop"))({
|
||||
layout = { sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } },
|
||||
}) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("SyntaxPage"),
|
||||
if clay.UI(clay.ID("SyntaxPage"))({
|
||||
layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 },
|
||||
border = border2pxRed,
|
||||
}) {
|
||||
|
|
@ -236,8 +222,7 @@ DeclarativeSyntaxPageDesktop :: proc() {
|
|||
}
|
||||
|
||||
DeclarativeSyntaxPageMobile :: proc() {
|
||||
if clay.UI()({
|
||||
id = clay.ID("SyntaxPageMobile"),
|
||||
if clay.UI(clay.ID("SyntaxPageMobile"))({
|
||||
layout = {
|
||||
layoutDirection = .TopToBottom,
|
||||
sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) },
|
||||
|
|
@ -257,7 +242,7 @@ ColorLerp :: proc(a: clay.Color, b: clay.Color, amount: f32) -> clay.Color {
|
|||
LOREM_IPSUM_TEXT :: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
|
||||
HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
|
||||
if clay.UI()({ id = clay.ID("PerformanceLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
|
||||
if clay.UI(clay.ID("PerformanceLeftText"))({ layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
|
||||
clay.Text("High Performance", clay.TextConfig(titleTextConfig))
|
||||
if clay.UI()({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } }}) {}
|
||||
clay.Text(
|
||||
|
|
@ -273,21 +258,18 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
|
|||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
|
||||
)
|
||||
}
|
||||
if clay.UI()({ id = clay.ID("PerformanceRightImageOuter"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("PerformanceRightBorder"),
|
||||
if clay.UI(clay.ID("PerformanceRightImageOuter"))({ layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) {
|
||||
if clay.UI(clay.ID("PerformanceRightBorder"))({
|
||||
layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(400) } },
|
||||
border = { COLOR_LIGHT, {2, 2, 2, 2, 2} },
|
||||
}) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("AnimationDemoContainerLeft"),
|
||||
if clay.UI(clay.ID("AnimationDemoContainerLeft"))({
|
||||
layout = { sizing = { clay.SizingPercent(0.35 + 0.3 * lerpValue), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(16) },
|
||||
backgroundColor = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue),
|
||||
}) {
|
||||
clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
|
||||
}
|
||||
if clay.UI()({
|
||||
id = clay.ID("AnimationDemoContainerRight"),
|
||||
if clay.UI(clay.ID("AnimationDemoContainerRight"))({
|
||||
layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(16) },
|
||||
backgroundColor = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue),
|
||||
}) {
|
||||
|
|
@ -298,8 +280,7 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
|
|||
}
|
||||
|
||||
HighPerformancePageDesktop :: proc(lerpValue: f32) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("PerformanceDesktop"),
|
||||
if clay.UI(clay.ID("PerformanceDesktop"))({
|
||||
layout = { sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { 82, 82, 32, 32 }, childGap = 64 },
|
||||
backgroundColor = COLOR_RED,
|
||||
}) {
|
||||
|
|
@ -308,8 +289,7 @@ HighPerformancePageDesktop :: proc(lerpValue: f32) {
|
|||
}
|
||||
|
||||
HighPerformancePageMobile :: proc(lerpValue: f32) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("PerformanceMobile"),
|
||||
if clay.UI(clay.ID("PerformanceMobile"))({
|
||||
layout = {
|
||||
layoutDirection = .TopToBottom,
|
||||
sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) },
|
||||
|
|
@ -335,8 +315,7 @@ RendererButtonActive :: proc(index: i32, $text: string) {
|
|||
|
||||
RendererButtonInactive :: proc(index: u32, $text: string) {
|
||||
if clay.UI()({ border = border2pxRed }) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("RendererButtonInactiveInner", index),
|
||||
if clay.UI(clay.ID("RendererButtonInactiveInner", index))({
|
||||
layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) },
|
||||
backgroundColor = COLOR_LIGHT,
|
||||
cornerRadius = clay.CornerRadiusAll(10)
|
||||
|
|
@ -347,7 +326,7 @@ RendererButtonInactive :: proc(index: u32, $text: string) {
|
|||
}
|
||||
|
||||
RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
|
||||
if clay.UI()({ id = clay.ID("RendererLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
|
||||
if clay.UI(clay.ID("RendererLeftText"))({ layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
|
||||
clay.Text("Renderer & Platform Agnostic", clay.TextConfig(titleTextConfig))
|
||||
if clay.UI()({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {}
|
||||
clay.Text(
|
||||
|
|
@ -363,8 +342,7 @@ RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.
|
|||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}),
|
||||
)
|
||||
}
|
||||
if clay.UI()({
|
||||
id = clay.ID("RendererRightText"),
|
||||
if clay.UI(clay.ID("RendererRightText"))({
|
||||
layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center }, layoutDirection = .TopToBottom, childGap = 16 },
|
||||
}) {
|
||||
clay.Text("Try changing renderer!", clay.TextConfig({fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE}))
|
||||
|
|
@ -374,12 +352,10 @@ RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.
|
|||
}
|
||||
|
||||
RendererPageDesktop :: proc() {
|
||||
if clay.UI()({
|
||||
id = clay.ID("RendererPageDesktop"),
|
||||
if clay.UI(clay.ID("RendererPageDesktop"))({
|
||||
layout = { sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } },
|
||||
}) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("RendererPage"),
|
||||
if clay.UI(clay.ID("RendererPage"))({
|
||||
layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 },
|
||||
border = { COLOR_RED, { left = 2, right = 2 } },
|
||||
}) {
|
||||
|
|
@ -389,8 +365,7 @@ RendererPageDesktop :: proc() {
|
|||
}
|
||||
|
||||
RendererPageMobile :: proc() {
|
||||
if clay.UI()({
|
||||
id = clay.ID("RendererMobile"),
|
||||
if clay.UI(clay.ID("RendererMobile"))({
|
||||
layout = {
|
||||
layoutDirection = .TopToBottom,
|
||||
sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) },
|
||||
|
|
@ -416,28 +391,25 @@ animationLerpValue: f32 = -1.0
|
|||
createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
|
||||
mobileScreen := windowWidth < 750
|
||||
clay.BeginLayout()
|
||||
if clay.UI()({
|
||||
id = clay.ID("OuterContainer"),
|
||||
if clay.UI(clay.ID("OuterContainer"))({
|
||||
layout = { layoutDirection = .TopToBottom, sizing = { clay.SizingGrow(), clay.SizingGrow() } },
|
||||
backgroundColor = COLOR_LIGHT,
|
||||
}) {
|
||||
if clay.UI()({
|
||||
id = clay.ID("Header"),
|
||||
if clay.UI(clay.ID("Header"))({
|
||||
layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(50) }, childAlignment = { y = .Center }, childGap = 24, padding = { left = 32, right = 32 } },
|
||||
}) {
|
||||
clay.Text("Clay", &headerTextConfig)
|
||||
if clay.UI()({ layout = { sizing = { width = clay.SizingGrow() } } }) {}
|
||||
|
||||
if (!mobileScreen) {
|
||||
if clay.UI()({ id = clay.ID("LinkExamplesOuter"), backgroundColor = {0, 0, 0, 0} }) {
|
||||
if clay.UI(clay.ID("LinkExamplesOuter"))({ backgroundColor = {0, 0, 0, 0} }) {
|
||||
clay.Text("Examples", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
|
||||
}
|
||||
if clay.UI()({ id = clay.ID("LinkDocsOuter"), backgroundColor = {0, 0, 0, 0} }) {
|
||||
if clay.UI(clay.ID("LinkDocsOuter"))({ backgroundColor = {0, 0, 0, 0} }) {
|
||||
clay.Text("Docs", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
|
||||
}
|
||||
}
|
||||
if clay.UI()({
|
||||
id = clay.ID("LinkGithubOuter"),
|
||||
if clay.UI(clay.ID("LinkGithubOuter"))({
|
||||
layout = { padding = { 16, 16, 6, 6 } },
|
||||
border = border2pxRed,
|
||||
backgroundColor = clay.Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT,
|
||||
|
|
@ -446,13 +418,12 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
|
|||
clay.Text("Github", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
|
||||
}
|
||||
}
|
||||
if clay.UI()({ id = clay.ID("TopBorder1"), layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_5 } ) {}
|
||||
if clay.UI()({ id = clay.ID("TopBorder2"), layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_4 } ) {}
|
||||
if clay.UI()({ id = clay.ID("TopBorder3"), layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_3 } ) {}
|
||||
if clay.UI()({ id = clay.ID("TopBorder4"), layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_2 } ) {}
|
||||
if clay.UI()({ id = clay.ID("TopBorder5"), layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_1 } ) {}
|
||||
if clay.UI()({
|
||||
id = clay.ID("ScrollContainerBackgroundRectangle"),
|
||||
if clay.UI(clay.ID("TopBorder1"))({ layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_5 } ) {}
|
||||
if clay.UI(clay.ID("TopBorder2"))({ layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_4 } ) {}
|
||||
if clay.UI(clay.ID("TopBorder3"))({ layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_3 } ) {}
|
||||
if clay.UI(clay.ID("TopBorder4"))({ layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_2 } ) {}
|
||||
if clay.UI(clay.ID("TopBorder5"))({ layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_1 } ) {}
|
||||
if clay.UI(clay.ID("ScrollContainerBackgroundRectangle"))({
|
||||
clip = { vertical = true, childOffset = clay.GetScrollOffset() },
|
||||
layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, layoutDirection = clay.LayoutDirection.TopToBottom },
|
||||
backgroundColor = COLOR_LIGHT,
|
||||
|
|
|
|||
226
clay.h
226
clay.h
|
|
@ -121,25 +121,32 @@ static inline void Clay__SuppressUnusedLatchDefinitionVariableWarning(void) { (v
|
|||
|
||||
Into calls like this:
|
||||
|
||||
Clay_OpenElement();
|
||||
Clay_ConfigureOpenElement((Clay_ElementDeclaration) {
|
||||
Clay__OpenElement();
|
||||
Clay__ConfigureOpenElement((Clay_ElementDeclaration) {
|
||||
.id = CLAY_ID("Container"),
|
||||
.backgroundColor = { 255, 200, 200, 255 }
|
||||
});
|
||||
...children declared here
|
||||
Clay_CloseElement();
|
||||
Clay__CloseElement();
|
||||
|
||||
The for loop will only ever run a single iteration, putting Clay__CloseElement() in the increment of the loop
|
||||
means that it will run after the body - where the children are declared. It just exists to make sure you don't forget
|
||||
to call Clay_CloseElement().
|
||||
*/
|
||||
#define CLAY(...) \
|
||||
#define CLAY_AUTO_ID(...) \
|
||||
for ( \
|
||||
CLAY__ELEMENT_DEFINITION_LATCH = (Clay__OpenElement(), Clay__ConfigureOpenElement(CLAY__CONFIG_WRAPPER(Clay_ElementDeclaration, __VA_ARGS__)), 0); \
|
||||
CLAY__ELEMENT_DEFINITION_LATCH < 1; \
|
||||
CLAY__ELEMENT_DEFINITION_LATCH=1, Clay__CloseElement() \
|
||||
)
|
||||
|
||||
#define CLAY(id, ...) \
|
||||
for ( \
|
||||
CLAY__ELEMENT_DEFINITION_LATCH = (Clay__OpenElementWithId(id), Clay__ConfigureOpenElement(CLAY__CONFIG_WRAPPER(Clay_ElementDeclaration, __VA_ARGS__)), 0); \
|
||||
CLAY__ELEMENT_DEFINITION_LATCH < 1; \
|
||||
CLAY__ELEMENT_DEFINITION_LATCH=1, Clay__CloseElement() \
|
||||
)
|
||||
|
||||
// These macros exist to allow the CLAY() macro to be called both with an inline struct definition, such as
|
||||
// CLAY({ .id = something... });
|
||||
// As well as by passing a predefined declaration struct
|
||||
|
|
@ -740,9 +747,6 @@ typedef struct Clay_PointerData {
|
|||
} Clay_PointerData;
|
||||
|
||||
typedef struct Clay_ElementDeclaration {
|
||||
// Primarily created via the CLAY_ID(), CLAY_IDI(), CLAY_ID_LOCAL() and CLAY_IDI_LOCAL() macros.
|
||||
// Represents a hashed string ID used for identifying and finding specific clay UI elements, required by functions such as Clay_PointerOver() and Clay_GetElementData().
|
||||
Clay_ElementId id;
|
||||
// Controls various settings that affect the size and position of an element, as well as the sizes and positions of any child elements.
|
||||
Clay_LayoutConfig layout;
|
||||
// Controls the background color of the resulting element.
|
||||
|
|
@ -789,6 +793,8 @@ typedef CLAY_PACKED_ENUM {
|
|||
CLAY_ERROR_TYPE_PERCENTAGE_OVER_1,
|
||||
// Clay encountered an internal error. It would be wonderful if you could report this so we can fix it!
|
||||
CLAY_ERROR_TYPE_INTERNAL_ERROR,
|
||||
// Clay__OpenElement was called more times than Clay__CloseElement, so there were still remaining open elements when the layout ended.
|
||||
CLAY_ERROR_TYPE_UNBALANCED_OPEN_CLOSE,
|
||||
} Clay_ErrorType;
|
||||
|
||||
// Data to identify the error that clay has encountered.
|
||||
|
|
@ -916,6 +922,7 @@ CLAY_DLL_EXPORT void Clay_ResetMeasureTextCache(void);
|
|||
// Internal API functions required by macros ----------------------
|
||||
|
||||
CLAY_DLL_EXPORT void Clay__OpenElement(void);
|
||||
CLAY_DLL_EXPORT void Clay__OpenElementWithId(Clay_ElementId elementId);
|
||||
CLAY_DLL_EXPORT void Clay__ConfigureOpenElement(const Clay_ElementDeclaration config);
|
||||
CLAY_DLL_EXPORT void Clay__ConfigureOpenElementPtr(const Clay_ElementDeclaration *config);
|
||||
CLAY_DLL_EXPORT void Clay__CloseElement(void);
|
||||
|
|
@ -1175,7 +1182,6 @@ typedef struct { // todo get this struct into a single cache line
|
|||
intptr_t hoverFunctionUserData;
|
||||
int32_t nextIndex;
|
||||
uint32_t generation;
|
||||
uint32_t idAlias;
|
||||
Clay__DebugElementData *debugData;
|
||||
} Clay_LayoutElementHashMapItem;
|
||||
|
||||
|
|
@ -1709,12 +1715,12 @@ bool Clay__PointIsInsideRect(Clay_Vector2 point, Clay_BoundingBox rect) {
|
|||
return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
|
||||
}
|
||||
|
||||
Clay_LayoutElementHashMapItem* Clay__AddHashMapItem(Clay_ElementId elementId, Clay_LayoutElement* layoutElement, uint32_t idAlias) {
|
||||
Clay_LayoutElementHashMapItem* Clay__AddHashMapItem(Clay_ElementId elementId, Clay_LayoutElement* layoutElement) {
|
||||
Clay_Context* context = Clay_GetCurrentContext();
|
||||
if (context->layoutElementsHashMapInternal.length == context->layoutElementsHashMapInternal.capacity - 1) {
|
||||
return NULL;
|
||||
}
|
||||
Clay_LayoutElementHashMapItem item = { .elementId = elementId, .layoutElement = layoutElement, .nextIndex = -1, .generation = context->generation + 1, .idAlias = idAlias };
|
||||
Clay_LayoutElementHashMapItem item = { .elementId = elementId, .layoutElement = layoutElement, .nextIndex = -1, .generation = context->generation + 1 };
|
||||
uint32_t hashBucket = elementId.id % context->layoutElementsHashMap.capacity;
|
||||
int32_t hashItemPrevious = -1;
|
||||
int32_t hashItemIndex = context->layoutElementsHashMap.internalArray[hashBucket];
|
||||
|
|
@ -1724,7 +1730,6 @@ Clay_LayoutElementHashMapItem* Clay__AddHashMapItem(Clay_ElementId elementId, Cl
|
|||
item.nextIndex = hashItem->nextIndex;
|
||||
if (hashItem->generation <= context->generation) { // First collision - assume this is the "same" element
|
||||
hashItem->elementId = elementId; // Make sure to copy this across. If the stringId reference has changed, we should update the hash item to use the new one.
|
||||
hashItem->idAlias = idAlias;
|
||||
hashItem->generation = context->generation + 1;
|
||||
hashItem->layoutElement = layoutElement;
|
||||
hashItem->debugData->collision = false;
|
||||
|
|
@ -1773,7 +1778,7 @@ Clay_ElementId Clay__GenerateIdForAnonymousElement(Clay_LayoutElement *openLayou
|
|||
Clay_LayoutElement *parentElement = Clay_LayoutElementArray_Get(&context->layoutElements, Clay__int32_tArray_GetValue(&context->openLayoutElementStack, context->openLayoutElementStack.length - 2));
|
||||
Clay_ElementId elementId = Clay__HashNumber(parentElement->childrenOrTextContent.children.length, parentElement->id);
|
||||
openLayoutElement->id = elementId.id;
|
||||
Clay__AddHashMapItem(elementId, openLayoutElement, 0);
|
||||
Clay__AddHashMapItem(elementId, openLayoutElement);
|
||||
Clay__StringArray_Add(&context->layoutElementIdStrings, elementId.stringId);
|
||||
return elementId;
|
||||
}
|
||||
|
|
@ -1812,6 +1817,10 @@ void Clay__CloseElement(void) {
|
|||
}
|
||||
Clay_LayoutElement *openLayoutElement = Clay__GetOpenLayoutElement();
|
||||
Clay_LayoutConfig *layoutConfig = openLayoutElement->layoutConfig;
|
||||
if (!layoutConfig) {
|
||||
openLayoutElement->layoutConfig = &Clay_LayoutConfig_DEFAULT;
|
||||
layoutConfig = &Clay_LayoutConfig_DEFAULT;
|
||||
}
|
||||
bool elementHasClipHorizontal = false;
|
||||
bool elementHasClipVertical = false;
|
||||
for (int32_t i = 0; i < openLayoutElement->elementConfigs.length; i++) {
|
||||
|
|
@ -1988,8 +1997,28 @@ void Clay__OpenElement(void) {
|
|||
return;
|
||||
}
|
||||
Clay_LayoutElement layoutElement = CLAY__DEFAULT_STRUCT;
|
||||
Clay_LayoutElementArray_Add(&context->layoutElements, layoutElement);
|
||||
Clay_LayoutElement* openLayoutElement = Clay_LayoutElementArray_Add(&context->layoutElements, layoutElement);
|
||||
Clay__int32_tArray_Add(&context->openLayoutElementStack, context->layoutElements.length - 1);
|
||||
Clay__GenerateIdForAnonymousElement(openLayoutElement);
|
||||
if (context->openClipElementStack.length > 0) {
|
||||
Clay__int32_tArray_Set(&context->layoutElementClipElementIds, context->layoutElements.length - 1, Clay__int32_tArray_GetValue(&context->openClipElementStack, (int)context->openClipElementStack.length - 1));
|
||||
} else {
|
||||
Clay__int32_tArray_Set(&context->layoutElementClipElementIds, context->layoutElements.length - 1, 0);
|
||||
}
|
||||
}
|
||||
|
||||
void Clay__OpenElementWithId(Clay_ElementId elementId) {
|
||||
Clay_Context* context = Clay_GetCurrentContext();
|
||||
if (context->layoutElements.length == context->layoutElements.capacity - 1 || context->booleanWarnings.maxElementsExceeded) {
|
||||
context->booleanWarnings.maxElementsExceeded = true;
|
||||
return;
|
||||
}
|
||||
Clay_LayoutElement layoutElement = CLAY__DEFAULT_STRUCT;
|
||||
layoutElement.id = elementId.id;
|
||||
Clay_LayoutElement * openLayoutElement = Clay_LayoutElementArray_Add(&context->layoutElements, layoutElement);
|
||||
Clay__int32_tArray_Add(&context->openLayoutElementStack, context->layoutElements.length - 1);
|
||||
Clay__AddHashMapItem(elementId, openLayoutElement);
|
||||
Clay__StringArray_Add(&context->layoutElementIdStrings, elementId.stringId);
|
||||
if (context->openClipElementStack.length > 0) {
|
||||
Clay__int32_tArray_Set(&context->layoutElementClipElementIds, context->layoutElements.length - 1, Clay__int32_tArray_GetValue(&context->openClipElementStack, (int)context->openClipElementStack.length - 1));
|
||||
} else {
|
||||
|
|
@ -2017,7 +2046,7 @@ void Clay__OpenTextElement(Clay_String text, Clay_TextElementConfig *textConfig)
|
|||
Clay__MeasureTextCacheItem *textMeasured = Clay__MeasureTextCached(&text, textConfig);
|
||||
Clay_ElementId elementId = Clay__HashNumber(parentElement->childrenOrTextContent.children.length, parentElement->id);
|
||||
textElement->id = elementId.id;
|
||||
Clay__AddHashMapItem(elementId, textElement, 0);
|
||||
Clay__AddHashMapItem(elementId, textElement);
|
||||
Clay__StringArray_Add(&context->layoutElementIdStrings, elementId.stringId);
|
||||
Clay_Dimensions textDimensions = { .width = textMeasured->unwrappedDimensions.width, .height = textConfig->lineHeight > 0 ? (float)textConfig->lineHeight : textMeasured->unwrappedDimensions.height };
|
||||
textElement->dimensions = textDimensions;
|
||||
|
|
@ -2031,19 +2060,6 @@ void Clay__OpenTextElement(Clay_String text, Clay_TextElementConfig *textConfig)
|
|||
parentElement->childrenOrTextContent.children.length++;
|
||||
}
|
||||
|
||||
Clay_ElementId Clay__AttachId(Clay_ElementId elementId) {
|
||||
Clay_Context* context = Clay_GetCurrentContext();
|
||||
if (context->booleanWarnings.maxElementsExceeded) {
|
||||
return Clay_ElementId_DEFAULT;
|
||||
}
|
||||
Clay_LayoutElement *openLayoutElement = Clay__GetOpenLayoutElement();
|
||||
uint32_t idAlias = openLayoutElement->id;
|
||||
openLayoutElement->id = elementId.id;
|
||||
Clay__AddHashMapItem(elementId, openLayoutElement, idAlias);
|
||||
Clay__StringArray_Set(&context->layoutElementIdStrings, context->layoutElements.length - 1, elementId.stringId);
|
||||
return elementId;
|
||||
}
|
||||
|
||||
void Clay__ConfigureOpenElementPtr(const Clay_ElementDeclaration *declaration) {
|
||||
Clay_Context* context = Clay_GetCurrentContext();
|
||||
Clay_LayoutElement *openLayoutElement = Clay__GetOpenLayoutElement();
|
||||
|
|
@ -2055,8 +2071,6 @@ void Clay__ConfigureOpenElementPtr(const Clay_ElementDeclaration *declaration) {
|
|||
.userData = context->errorHandler.userData });
|
||||
}
|
||||
|
||||
Clay_ElementId openLayoutElementId = declaration->id;
|
||||
|
||||
openLayoutElement->elementConfigs.internalArray = &context->elementConfigs.internalArray[context->elementConfigs.length];
|
||||
Clay_SharedElementConfig *sharedConfig = NULL;
|
||||
if (declaration->backgroundColor.a > 0) {
|
||||
|
|
@ -2111,9 +2125,6 @@ void Clay__ConfigureOpenElementPtr(const Clay_ElementDeclaration *declaration) {
|
|||
} else if (declaration->floating.attachTo == CLAY_ATTACH_TO_ROOT) {
|
||||
floatingConfig.parentId = Clay__HashString(CLAY_STRING("Clay__RootContainer"), 0).id;
|
||||
}
|
||||
if (!openLayoutElementId.id) {
|
||||
openLayoutElementId = Clay__HashStringWithOffset(CLAY_STRING("Clay__FloatingContainer"), context->layoutElementTreeRoots.length, 0);
|
||||
}
|
||||
if (declaration->floating.clipTo == CLAY_CLIP_TO_NONE) {
|
||||
clipElementId = 0;
|
||||
}
|
||||
|
|
@ -2133,12 +2144,6 @@ void Clay__ConfigureOpenElementPtr(const Clay_ElementDeclaration *declaration) {
|
|||
Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .customElementConfig = Clay__StoreCustomElementConfig(declaration->custom) }, CLAY__ELEMENT_CONFIG_TYPE_CUSTOM);
|
||||
}
|
||||
|
||||
if (openLayoutElementId.id != 0) {
|
||||
Clay__AttachId(openLayoutElementId);
|
||||
} else if (openLayoutElement->id == 0) {
|
||||
openLayoutElementId = Clay__GenerateIdForAnonymousElement(openLayoutElement);
|
||||
}
|
||||
|
||||
if (declaration->clip.horizontal | declaration->clip.vertical) {
|
||||
Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .clipElementConfig = Clay__StoreClipElementConfig(declaration->clip) }, CLAY__ELEMENT_CONFIG_TYPE_CLIP);
|
||||
Clay__int32_tArray_Add(&context->openClipElementStack, (int)openLayoutElement->id);
|
||||
|
|
@ -2787,12 +2792,6 @@ void Clay__CalculateFinalLayout(void) {
|
|||
Clay_LayoutElementHashMapItem *hashMapItem = Clay__GetHashMapItem(currentElement->id);
|
||||
if (hashMapItem) {
|
||||
hashMapItem->boundingBox = currentElementBoundingBox;
|
||||
if (hashMapItem->idAlias) {
|
||||
Clay_LayoutElementHashMapItem *hashMapItemAlias = Clay__GetHashMapItem(hashMapItem->idAlias);
|
||||
if (hashMapItemAlias) {
|
||||
hashMapItemAlias->boundingBox = currentElementBoundingBox;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
int32_t sortedConfigIndexes[20];
|
||||
|
|
@ -3190,8 +3189,8 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
|
|||
Clay__int32_tArray_Add(&dfsBuffer, (int32_t)root->layoutElementIndex);
|
||||
context->treeNodeVisited.internalArray[0] = false;
|
||||
if (rootIndex > 0) {
|
||||
CLAY({ .id = CLAY_IDI("Clay__DebugView_EmptyRowOuter", rootIndex), .layout = { .sizing = {.width = CLAY_SIZING_GROW(0)}, .padding = {CLAY__DEBUGVIEW_INDENT_WIDTH / 2, 0, 0, 0} } }) {
|
||||
CLAY({ .id = CLAY_IDI("Clay__DebugView_EmptyRow", rootIndex), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED((float)CLAY__DEBUGVIEW_ROW_HEIGHT) }}, .border = { .color = CLAY__DEBUGVIEW_COLOR_3, .width = { .top = 1 } } }) {}
|
||||
CLAY(CLAY_IDI("Clay__DebugView_EmptyRowOuter", rootIndex), { .layout = { .sizing = {.width = CLAY_SIZING_GROW(0)}, .padding = {CLAY__DEBUGVIEW_INDENT_WIDTH / 2, 0, 0, 0} } }) {
|
||||
CLAY(CLAY_IDI("Clay__DebugView_EmptyRow", rootIndex), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED((float)CLAY__DEBUGVIEW_ROW_HEIGHT) }}, .border = { .color = CLAY__DEBUGVIEW_COLOR_3, .width = { .top = 1 } } }) {}
|
||||
}
|
||||
layoutData.rowCount++;
|
||||
}
|
||||
|
|
@ -3221,11 +3220,10 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
|
|||
if (context->debugSelectedElementId == currentElement->id) {
|
||||
layoutData.selectedElementRowIndex = layoutData.rowCount;
|
||||
}
|
||||
CLAY({ .id = CLAY_IDI("Clay__DebugView_ElementOuter", currentElement->id), .layout = Clay__DebugView_ScrollViewItemLayoutConfig }) {
|
||||
CLAY(CLAY_IDI("Clay__DebugView_ElementOuter", currentElement->id), { .layout = Clay__DebugView_ScrollViewItemLayoutConfig }) {
|
||||
// Collapse icon / button
|
||||
if (!(Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT) || currentElement->childrenOrTextContent.children.length == 0)) {
|
||||
CLAY({
|
||||
.id = CLAY_IDI("Clay__DebugView_CollapseElement", currentElement->id),
|
||||
CLAY(CLAY_IDI("Clay__DebugView_CollapseElement", currentElement->id), {
|
||||
.layout = { .sizing = {CLAY_SIZING_FIXED(16), CLAY_SIZING_FIXED(16)}, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER} },
|
||||
.cornerRadius = CLAY_CORNER_RADIUS(4),
|
||||
.border = { .color = CLAY__DEBUGVIEW_COLOR_3, .width = {1, 1, 1, 1, 0} },
|
||||
|
|
@ -3233,19 +3231,19 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
|
|||
CLAY_TEXT((currentElementData && currentElementData->debugData->collapsed) ? CLAY_STRING("+") : CLAY_STRING("-"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
|
||||
}
|
||||
} else { // Square dot for empty containers
|
||||
CLAY({ .layout = { .sizing = {CLAY_SIZING_FIXED(16), CLAY_SIZING_FIXED(16)}, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER } } }) {
|
||||
CLAY({ .layout = { .sizing = {CLAY_SIZING_FIXED(8), CLAY_SIZING_FIXED(8)} }, .backgroundColor = CLAY__DEBUGVIEW_COLOR_3, .cornerRadius = CLAY_CORNER_RADIUS(2) }) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = {CLAY_SIZING_FIXED(16), CLAY_SIZING_FIXED(16)}, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER } } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = {CLAY_SIZING_FIXED(8), CLAY_SIZING_FIXED(8)} }, .backgroundColor = CLAY__DEBUGVIEW_COLOR_3, .cornerRadius = CLAY_CORNER_RADIUS(2) }) {}
|
||||
}
|
||||
}
|
||||
// Collisions and offscreen info
|
||||
if (currentElementData) {
|
||||
if (currentElementData->debugData->collision) {
|
||||
CLAY({ .layout = { .padding = { 8, 8, 2, 2 }}, .border = { .color = {177, 147, 8, 255}, .width = {1, 1, 1, 1, 0} } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .padding = { 8, 8, 2, 2 }}, .border = { .color = {177, 147, 8, 255}, .width = {1, 1, 1, 1, 0} } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Duplicate ID"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16 }));
|
||||
}
|
||||
}
|
||||
if (offscreen) {
|
||||
CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .border = { .color = CLAY__DEBUGVIEW_COLOR_3, .width = { 1, 1, 1, 1, 0} } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .padding = { 8, 8, 2, 2 } }, .border = { .color = CLAY__DEBUGVIEW_COLOR_3, .width = { 1, 1, 1, 1, 0} } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Offscreen"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16 }));
|
||||
}
|
||||
}
|
||||
|
|
@ -3262,12 +3260,12 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
|
|||
Clay_Color backgroundColor = elementConfig->config.sharedElementConfig->backgroundColor;
|
||||
Clay_CornerRadius radius = elementConfig->config.sharedElementConfig->cornerRadius;
|
||||
if (backgroundColor.a > 0) {
|
||||
CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = labelColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = labelColor, .width = { 1, 1, 1, 1, 0} } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = labelColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = labelColor, .width = { 1, 1, 1, 1, 0} } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Color"), CLAY_TEXT_CONFIG({ .textColor = offscreen ? CLAY__DEBUGVIEW_COLOR_3 : CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
|
||||
}
|
||||
}
|
||||
if (radius.bottomLeft > 0) {
|
||||
CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = labelColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = labelColor, .width = { 1, 1, 1, 1, 0 } } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = labelColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = labelColor, .width = { 1, 1, 1, 1, 0 } } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Radius"), CLAY_TEXT_CONFIG({ .textColor = offscreen ? CLAY__DEBUGVIEW_COLOR_3 : CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
|
||||
}
|
||||
}
|
||||
|
|
@ -3276,7 +3274,7 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
|
|||
Clay__DebugElementConfigTypeLabelConfig config = Clay__DebugGetElementConfigTypeLabel(elementConfig->type);
|
||||
Clay_Color backgroundColor = config.color;
|
||||
backgroundColor.a = 90;
|
||||
CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = backgroundColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = config.color, .width = { 1, 1, 1, 1, 0 } } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = backgroundColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = config.color, .width = { 1, 1, 1, 1, 0 } } }) {
|
||||
CLAY_TEXT(config.label, CLAY_TEXT_CONFIG({ .textColor = offscreen ? CLAY__DEBUGVIEW_COLOR_3 : CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
|
||||
}
|
||||
}
|
||||
|
|
@ -3287,8 +3285,8 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
|
|||
layoutData.rowCount++;
|
||||
Clay__TextElementData *textElementData = currentElement->childrenOrTextContent.textElementData;
|
||||
Clay_TextElementConfig *rawTextConfig = offscreen ? CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16 }) : &Clay__DebugView_TextNameConfig;
|
||||
CLAY({ .layout = { .sizing = { .height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } } }) {
|
||||
CLAY({ .layout = { .sizing = {.width = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_INDENT_WIDTH + 16) } } }) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = { .height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = {.width = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_INDENT_WIDTH + 16) } } }) {}
|
||||
CLAY_TEXT(CLAY_STRING("\""), rawTextConfig);
|
||||
CLAY_TEXT(textElementData->text.length > 40 ? (CLAY__INIT(Clay_String) { .length = 40, .chars = textElementData->text.chars }) : textElementData->text, rawTextConfig);
|
||||
if (textElementData->text.length > 40) {
|
||||
|
|
@ -3328,8 +3326,8 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
|
|||
}
|
||||
|
||||
if (highlightedElementId) {
|
||||
CLAY({ .id = CLAY_ID("Clay__DebugView_ElementHighlight"), .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .floating = { .parentId = highlightedElementId, .zIndex = 32767, .pointerCaptureMode = CLAY_POINTER_CAPTURE_MODE_PASSTHROUGH, .attachTo = CLAY_ATTACH_TO_ELEMENT_WITH_ID } }) {
|
||||
CLAY({ .id = CLAY_ID("Clay__DebugView_ElementHighlightRectangle"), .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .backgroundColor = Clay__debugViewHighlightColor }) {}
|
||||
CLAY(CLAY_ID("Clay__DebugView_ElementHighlight"), { .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .floating = { .parentId = highlightedElementId, .zIndex = 32767, .pointerCaptureMode = CLAY_POINTER_CAPTURE_MODE_PASSTHROUGH, .attachTo = CLAY_ATTACH_TO_ELEMENT_WITH_ID } }) {
|
||||
CLAY(CLAY_ID("Clay__DebugView_ElementHighlightRectangle"), { .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .backgroundColor = Clay__debugViewHighlightColor }) {}
|
||||
}
|
||||
}
|
||||
return layoutData;
|
||||
|
|
@ -3370,17 +3368,17 @@ void Clay__RenderDebugViewElementConfigHeader(Clay_String elementId, Clay__Eleme
|
|||
Clay__DebugElementConfigTypeLabelConfig config = Clay__DebugGetElementConfigTypeLabel(type);
|
||||
Clay_Color backgroundColor = config.color;
|
||||
backgroundColor.a = 90;
|
||||
CLAY({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(CLAY__DEBUGVIEW_OUTER_PADDING), .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } } }) {
|
||||
CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = backgroundColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = config.color, .width = { 1, 1, 1, 1, 0 } } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(CLAY__DEBUGVIEW_OUTER_PADDING), .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = backgroundColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = config.color, .width = { 1, 1, 1, 1, 0 } } }) {
|
||||
CLAY_TEXT(config.label, CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
|
||||
}
|
||||
CLAY({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {}
|
||||
CLAY_TEXT(elementId, CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE }));
|
||||
}
|
||||
}
|
||||
|
||||
void Clay__RenderDebugViewColor(Clay_Color color, Clay_TextElementConfig *textConfig) {
|
||||
CLAY({ .layout = { .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
|
||||
CLAY_TEXT(CLAY_STRING("{ r: "), textConfig);
|
||||
CLAY_TEXT(Clay__IntToString(color.r), textConfig);
|
||||
CLAY_TEXT(CLAY_STRING(", g: "), textConfig);
|
||||
|
|
@ -3390,13 +3388,13 @@ void Clay__RenderDebugViewColor(Clay_Color color, Clay_TextElementConfig *textCo
|
|||
CLAY_TEXT(CLAY_STRING(", a: "), textConfig);
|
||||
CLAY_TEXT(Clay__IntToString(color.a), textConfig);
|
||||
CLAY_TEXT(CLAY_STRING(" }"), textConfig);
|
||||
CLAY({ .layout = { .sizing = { .width = CLAY_SIZING_FIXED(10) } } }) {}
|
||||
CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }, .backgroundColor = color, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = CLAY__DEBUGVIEW_COLOR_4, .width = { 1, 1, 1, 1, 0 } } }) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = { .width = CLAY_SIZING_FIXED(10) } } }) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }, .backgroundColor = color, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = CLAY__DEBUGVIEW_COLOR_4, .width = { 1, 1, 1, 1, 0 } } }) {}
|
||||
}
|
||||
}
|
||||
|
||||
void Clay__RenderDebugViewCornerRadius(Clay_CornerRadius cornerRadius, Clay_TextElementConfig *textConfig) {
|
||||
CLAY({ .layout = { .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
|
||||
CLAY_TEXT(CLAY_STRING("{ topLeft: "), textConfig);
|
||||
CLAY_TEXT(Clay__IntToString(cornerRadius.topLeft), textConfig);
|
||||
CLAY_TEXT(CLAY_STRING(", topRight: "), textConfig);
|
||||
|
|
@ -3455,16 +3453,16 @@ void Clay__RenderDebugView(void) {
|
|||
highlightedRow = -1;
|
||||
}
|
||||
Clay__RenderDebugLayoutData layoutData = CLAY__DEFAULT_STRUCT;
|
||||
CLAY({ .id = CLAY_ID("Clay__DebugView"),
|
||||
CLAY(CLAY_ID("Clay__DebugView"), {
|
||||
.layout = { .sizing = { CLAY_SIZING_FIXED((float)Clay__debugViewWidth) , CLAY_SIZING_FIXED(context->layoutDimensions.height) }, .layoutDirection = CLAY_TOP_TO_BOTTOM },
|
||||
.floating = { .zIndex = 32765, .attachPoints = { .element = CLAY_ATTACH_POINT_LEFT_CENTER, .parent = CLAY_ATTACH_POINT_RIGHT_CENTER }, .attachTo = CLAY_ATTACH_TO_ROOT, .clipTo = CLAY_CLIP_TO_ATTACHED_PARENT },
|
||||
.border = { .color = CLAY__DEBUGVIEW_COLOR_3, .width = { .bottom = 1 } }
|
||||
}) {
|
||||
CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 0, 0 }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .backgroundColor = CLAY__DEBUGVIEW_COLOR_2 }) {
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 0, 0 }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .backgroundColor = CLAY__DEBUGVIEW_COLOR_2 }) {
|
||||
CLAY_TEXT(CLAY_STRING("Clay Debug Tools"), infoTextConfig);
|
||||
CLAY({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {}
|
||||
// Close button
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = { .sizing = {CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 10), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 10)}, .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER} },
|
||||
.backgroundColor = {217,91,67,80},
|
||||
.cornerRadius = CLAY_CORNER_RADIUS(4),
|
||||
|
|
@ -3474,18 +3472,18 @@ void Clay__RenderDebugView(void) {
|
|||
CLAY_TEXT(CLAY_STRING("x"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
|
||||
}
|
||||
}
|
||||
CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(1)} }, .backgroundColor = CLAY__DEBUGVIEW_COLOR_3 } ) {}
|
||||
CLAY({ .id = scrollId, .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .clip = { .horizontal = true, .vertical = true, .childOffset = Clay_GetScrollOffset() } }) {
|
||||
CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .backgroundColor = ((initialElementsLength + initialRootsLength) & 1) == 0 ? CLAY__DEBUGVIEW_COLOR_2 : CLAY__DEBUGVIEW_COLOR_1 }) {
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(1)} }, .backgroundColor = CLAY__DEBUGVIEW_COLOR_3 } ) {}
|
||||
CLAY(scrollId, { .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .clip = { .horizontal = true, .vertical = true, .childOffset = Clay_GetScrollOffset() } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .backgroundColor = ((initialElementsLength + initialRootsLength) & 1) == 0 ? CLAY__DEBUGVIEW_COLOR_2 : CLAY__DEBUGVIEW_COLOR_1 }) {
|
||||
Clay_ElementId panelContentsId = Clay__HashString(CLAY_STRING("Clay__DebugViewPaneOuter"), 0);
|
||||
// Element list
|
||||
CLAY({ .id = panelContentsId, .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .floating = { .zIndex = 32766, .pointerCaptureMode = CLAY_POINTER_CAPTURE_MODE_PASSTHROUGH, .attachTo = CLAY_ATTACH_TO_PARENT, .clipTo = CLAY_CLIP_TO_ATTACHED_PARENT } }) {
|
||||
CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .padding = { CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 0, 0 }, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
CLAY(panelContentsId, { .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .floating = { .zIndex = 32766, .pointerCaptureMode = CLAY_POINTER_CAPTURE_MODE_PASSTHROUGH, .attachTo = CLAY_ATTACH_TO_PARENT, .clipTo = CLAY_CLIP_TO_ATTACHED_PARENT } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .padding = { CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 0, 0 }, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
layoutData = Clay__RenderDebugLayoutElementsList((int32_t)initialRootsLength, highlightedRow);
|
||||
}
|
||||
}
|
||||
float contentWidth = Clay__GetHashMapItem(panelContentsId.id)->layoutElement->dimensions.width;
|
||||
CLAY({ .layout = { .sizing = {.width = CLAY_SIZING_FIXED(contentWidth) }, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = {.width = CLAY_SIZING_FIXED(contentWidth) }, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {}
|
||||
for (int32_t i = 0; i < layoutData.rowCount; i++) {
|
||||
Clay_Color rowColor = (i & 1) == 0 ? CLAY__DEBUGVIEW_COLOR_2 : CLAY__DEBUGVIEW_COLOR_1;
|
||||
if (i == layoutData.selectedElementRowIndex) {
|
||||
|
|
@ -3496,22 +3494,22 @@ void Clay__RenderDebugView(void) {
|
|||
rowColor.g *= 1.25f;
|
||||
rowColor.b *= 1.25f;
|
||||
}
|
||||
CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .backgroundColor = rowColor } ) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .backgroundColor = rowColor } ) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
CLAY({ .layout = { .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(1)} }, .backgroundColor = CLAY__DEBUGVIEW_COLOR_3 }) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(1)} }, .backgroundColor = CLAY__DEBUGVIEW_COLOR_3 }) {}
|
||||
if (context->debugSelectedElementId != 0) {
|
||||
Clay_LayoutElementHashMapItem *selectedItem = Clay__GetHashMapItem(context->debugSelectedElementId);
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(300)}, .layoutDirection = CLAY_TOP_TO_BOTTOM },
|
||||
.backgroundColor = CLAY__DEBUGVIEW_COLOR_2 ,
|
||||
.clip = { .vertical = true, .childOffset = Clay_GetScrollOffset() },
|
||||
.border = { .color = CLAY__DEBUGVIEW_COLOR_3, .width = { .betweenChildren = 1 } }
|
||||
}) {
|
||||
CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT + 8)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 0, 0 }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT + 8)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 0, 0 }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Layout Config"), infoTextConfig);
|
||||
CLAY({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {}
|
||||
if (selectedItem->elementId.stringId.length != 0) {
|
||||
CLAY_TEXT(selectedItem->elementId.stringId, infoTitleConfig);
|
||||
if (selectedItem->elementId.offset != 0) {
|
||||
|
|
@ -3523,10 +3521,10 @@ void Clay__RenderDebugView(void) {
|
|||
}
|
||||
Clay_Padding attributeConfigPadding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 8, 8};
|
||||
// Clay_LayoutConfig debug info
|
||||
CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
// .boundingBox
|
||||
CLAY_TEXT(CLAY_STRING("Bounding Box"), infoTitleConfig);
|
||||
CLAY({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_TEXT(CLAY_STRING("{ x: "), infoTextConfig);
|
||||
CLAY_TEXT(Clay__IntToString(selectedItem->boundingBox.x), infoTextConfig);
|
||||
CLAY_TEXT(CLAY_STRING(", y: "), infoTextConfig);
|
||||
|
|
@ -3543,17 +3541,17 @@ void Clay__RenderDebugView(void) {
|
|||
CLAY_TEXT(layoutConfig->layoutDirection == CLAY_TOP_TO_BOTTOM ? CLAY_STRING("TOP_TO_BOTTOM") : CLAY_STRING("LEFT_TO_RIGHT"), infoTextConfig);
|
||||
// .sizing
|
||||
CLAY_TEXT(CLAY_STRING("Sizing"), infoTitleConfig);
|
||||
CLAY({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_TEXT(CLAY_STRING("width: "), infoTextConfig);
|
||||
Clay__RenderDebugLayoutSizing(layoutConfig->sizing.width, infoTextConfig);
|
||||
}
|
||||
CLAY({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_TEXT(CLAY_STRING("height: "), infoTextConfig);
|
||||
Clay__RenderDebugLayoutSizing(layoutConfig->sizing.height, infoTextConfig);
|
||||
}
|
||||
// .padding
|
||||
CLAY_TEXT(CLAY_STRING("Padding"), infoTitleConfig);
|
||||
CLAY({ .id = CLAY_ID("Clay__DebugViewElementInfoPadding") }) {
|
||||
CLAY(CLAY_ID("Clay__DebugViewElementInfoPadding"), { }) {
|
||||
CLAY_TEXT(CLAY_STRING("{ left: "), infoTextConfig);
|
||||
CLAY_TEXT(Clay__IntToString(layoutConfig->padding.left), infoTextConfig);
|
||||
CLAY_TEXT(CLAY_STRING(", right: "), infoTextConfig);
|
||||
|
|
@ -3569,7 +3567,7 @@ void Clay__RenderDebugView(void) {
|
|||
CLAY_TEXT(Clay__IntToString(layoutConfig->childGap), infoTextConfig);
|
||||
// .childAlignment
|
||||
CLAY_TEXT(CLAY_STRING("Child Alignment"), infoTitleConfig);
|
||||
CLAY({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_TEXT(CLAY_STRING("{ x: "), infoTextConfig);
|
||||
Clay_String alignX = CLAY_STRING("LEFT");
|
||||
if (layoutConfig->childAlignment.x == CLAY_ALIGN_X_CENTER) {
|
||||
|
|
@ -3595,7 +3593,7 @@ void Clay__RenderDebugView(void) {
|
|||
switch (elementConfig->type) {
|
||||
case CLAY__ELEMENT_CONFIG_TYPE_SHARED: {
|
||||
Clay_SharedElementConfig *sharedConfig = elementConfig->config.sharedElementConfig;
|
||||
CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM }}) {
|
||||
CLAY_AUTO_ID({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM }}) {
|
||||
// .backgroundColor
|
||||
CLAY_TEXT(CLAY_STRING("Background Color"), infoTitleConfig);
|
||||
Clay__RenderDebugViewColor(sharedConfig->backgroundColor, infoTextConfig);
|
||||
|
|
@ -3607,7 +3605,7 @@ void Clay__RenderDebugView(void) {
|
|||
}
|
||||
case CLAY__ELEMENT_CONFIG_TYPE_TEXT: {
|
||||
Clay_TextElementConfig *textConfig = elementConfig->config.textElementConfig;
|
||||
CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
// .fontSize
|
||||
CLAY_TEXT(CLAY_STRING("Font Size"), infoTitleConfig);
|
||||
CLAY_TEXT(Clay__IntToString(textConfig->fontSize), infoTextConfig);
|
||||
|
|
@ -3646,10 +3644,10 @@ void Clay__RenderDebugView(void) {
|
|||
}
|
||||
case CLAY__ELEMENT_CONFIG_TYPE_ASPECT: {
|
||||
Clay_AspectRatioElementConfig *aspectRatioConfig = elementConfig->config.aspectRatioElementConfig;
|
||||
CLAY({ .id = CLAY_ID("Clay__DebugViewElementInfoAspectRatioBody"), .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
CLAY(CLAY_ID("Clay__DebugViewElementInfoAspectRatioBody"), { .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Aspect Ratio"), infoTitleConfig);
|
||||
// Aspect Ratio
|
||||
CLAY({ .id = CLAY_ID("Clay__DebugViewElementInfoAspectRatio") }) {
|
||||
CLAY(CLAY_ID("Clay__DebugViewElementInfoAspectRatio"), { }) {
|
||||
CLAY_TEXT(Clay__IntToString(aspectRatioConfig->aspectRatio), infoTextConfig);
|
||||
CLAY_TEXT(CLAY_STRING("."), infoTextConfig);
|
||||
float frac = aspectRatioConfig->aspectRatio - (int)(aspectRatioConfig->aspectRatio);
|
||||
|
|
@ -3668,16 +3666,16 @@ void Clay__RenderDebugView(void) {
|
|||
if (Clay__ElementHasConfig(selectedItem->layoutElement, CLAY__ELEMENT_CONFIG_TYPE_ASPECT)) {
|
||||
aspectConfig = *Clay__FindElementConfigWithType(selectedItem->layoutElement, CLAY__ELEMENT_CONFIG_TYPE_ASPECT).aspectRatioElementConfig;
|
||||
}
|
||||
CLAY({ .id = CLAY_ID("Clay__DebugViewElementInfoImageBody"), .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
CLAY(CLAY_ID("Clay__DebugViewElementInfoImageBody"), { .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
// Image Preview
|
||||
CLAY_TEXT(CLAY_STRING("Preview"), infoTitleConfig);
|
||||
CLAY({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(64, 128), .height = CLAY_SIZING_GROW(64, 128) }}, .aspectRatio = aspectConfig, .image = *imageConfig }) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(64, 128), .height = CLAY_SIZING_GROW(64, 128) }}, .aspectRatio = aspectConfig, .image = *imageConfig }) {}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case CLAY__ELEMENT_CONFIG_TYPE_CLIP: {
|
||||
Clay_ClipElementConfig *clipConfig = elementConfig->config.clipElementConfig;
|
||||
CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
// .vertical
|
||||
CLAY_TEXT(CLAY_STRING("Vertical"), infoTitleConfig);
|
||||
CLAY_TEXT(clipConfig->vertical ? CLAY_STRING("true") : CLAY_STRING("false") , infoTextConfig);
|
||||
|
|
@ -3689,10 +3687,10 @@ void Clay__RenderDebugView(void) {
|
|||
}
|
||||
case CLAY__ELEMENT_CONFIG_TYPE_FLOATING: {
|
||||
Clay_FloatingElementConfig *floatingConfig = elementConfig->config.floatingElementConfig;
|
||||
CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
// .offset
|
||||
CLAY_TEXT(CLAY_STRING("Offset"), infoTitleConfig);
|
||||
CLAY({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_TEXT(CLAY_STRING("{ x: "), infoTextConfig);
|
||||
CLAY_TEXT(Clay__IntToString(floatingConfig->offset.x), infoTextConfig);
|
||||
CLAY_TEXT(CLAY_STRING(", y: "), infoTextConfig);
|
||||
|
|
@ -3701,7 +3699,7 @@ void Clay__RenderDebugView(void) {
|
|||
}
|
||||
// .expand
|
||||
CLAY_TEXT(CLAY_STRING("Expand"), infoTitleConfig);
|
||||
CLAY({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_TEXT(CLAY_STRING("{ width: "), infoTextConfig);
|
||||
CLAY_TEXT(Clay__IntToString(floatingConfig->expand.width), infoTextConfig);
|
||||
CLAY_TEXT(CLAY_STRING(", height: "), infoTextConfig);
|
||||
|
|
@ -3717,7 +3715,7 @@ void Clay__RenderDebugView(void) {
|
|||
CLAY_TEXT(hashItem->elementId.stringId, infoTextConfig);
|
||||
// .attachPoints
|
||||
CLAY_TEXT(CLAY_STRING("Attach Points"), infoTitleConfig);
|
||||
CLAY({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_TEXT(CLAY_STRING("{ element: "), infoTextConfig);
|
||||
Clay_String attachPointElement = CLAY_STRING("LEFT_TOP");
|
||||
if (floatingConfig->attachPoints.element == CLAY_ATTACH_POINT_LEFT_CENTER) {
|
||||
|
|
@ -3790,9 +3788,9 @@ void Clay__RenderDebugView(void) {
|
|||
}
|
||||
case CLAY__ELEMENT_CONFIG_TYPE_BORDER: {
|
||||
Clay_BorderElementConfig *borderConfig = elementConfig->config.borderElementConfig;
|
||||
CLAY({ .id = CLAY_ID("Clay__DebugViewElementInfoBorderBody"), .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
CLAY(CLAY_ID("Clay__DebugViewElementInfoBorderBody"), { .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Border Widths"), infoTitleConfig);
|
||||
CLAY({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_AUTO_ID({ .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) {
|
||||
CLAY_TEXT(CLAY_STRING("{ left: "), infoTextConfig);
|
||||
CLAY_TEXT(Clay__IntToString(borderConfig->width.left), infoTextConfig);
|
||||
CLAY_TEXT(CLAY_STRING(", right: "), infoTextConfig);
|
||||
|
|
@ -3815,16 +3813,16 @@ void Clay__RenderDebugView(void) {
|
|||
}
|
||||
}
|
||||
} else {
|
||||
CLAY({ .id = CLAY_ID("Clay__DebugViewWarningsScrollPane"), .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(300)}, .childGap = 6, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .backgroundColor = CLAY__DEBUGVIEW_COLOR_2, .clip = { .horizontal = true, .vertical = true, .childOffset = Clay_GetScrollOffset() } }) {
|
||||
CLAY(CLAY_ID("Clay__DebugViewWarningsScrollPane"), { .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(300)}, .childGap = 6, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .backgroundColor = CLAY__DEBUGVIEW_COLOR_2, .clip = { .horizontal = true, .vertical = true, .childOffset = Clay_GetScrollOffset() } }) {
|
||||
Clay_TextElementConfig *warningConfig = CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE });
|
||||
CLAY({ .id = CLAY_ID("Clay__DebugViewWarningItemHeader"), .layout = { .sizing = {.height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 0, 0 }, .childGap = 8, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
|
||||
CLAY(CLAY_ID("Clay__DebugViewWarningItemHeader"), { .layout = { .sizing = {.height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 0, 0 }, .childGap = 8, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Warnings"), warningConfig);
|
||||
}
|
||||
CLAY({ .id = CLAY_ID("Clay__DebugViewWarningsTopBorder"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(1)} }, .backgroundColor = {200, 200, 200, 255} }) {}
|
||||
CLAY(CLAY_ID("Clay__DebugViewWarningsTopBorder"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(1)} }, .backgroundColor = {200, 200, 200, 255} }) {}
|
||||
int32_t previousWarningsLength = context->warnings.length;
|
||||
for (int32_t i = 0; i < previousWarningsLength; i++) {
|
||||
Clay__Warning warning = context->warnings.internalArray[i];
|
||||
CLAY({ .id = CLAY_IDI("Clay__DebugViewWarningItem", i), .layout = { .sizing = {.height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 0, 0 }, .childGap = 8, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
|
||||
CLAY(CLAY_IDI("Clay__DebugViewWarningItem", i), { .layout = { .sizing = {.height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 0, 0 }, .childGap = 8, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
|
||||
CLAY_TEXT(warning.baseMessage, warningConfig);
|
||||
if (warning.dynamicMessage.length > 0) {
|
||||
CLAY_TEXT(warning.dynamicMessage, warningConfig);
|
||||
|
|
@ -3995,10 +3993,6 @@ void Clay_SetPointerState(Clay_Vector2 position, bool isPointerDown) {
|
|||
}
|
||||
Clay_ElementIdArray_Add(&context->pointerOverIds, mapItem->elementId);
|
||||
found = true;
|
||||
|
||||
if (mapItem->idAlias != 0) {
|
||||
Clay_ElementIdArray_Add(&context->pointerOverIds, CLAY__INIT(Clay_ElementId) { .id = mapItem->idAlias });
|
||||
}
|
||||
}
|
||||
if (Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT)) {
|
||||
dfsBuffer.length--;
|
||||
|
|
@ -4222,10 +4216,9 @@ void Clay_BeginLayout(void) {
|
|||
rootDimensions.width -= (float)Clay__debugViewWidth;
|
||||
}
|
||||
context->booleanWarnings = CLAY__INIT(Clay_BooleanWarnings) CLAY__DEFAULT_STRUCT;
|
||||
Clay__OpenElement();
|
||||
Clay__OpenElementWithId(CLAY_ID("Clay__RootContainer"));
|
||||
Clay__ConfigureOpenElement(CLAY__INIT(Clay_ElementDeclaration) {
|
||||
.id = CLAY_ID("Clay__RootContainer"),
|
||||
.layout = { .sizing = {CLAY_SIZING_FIXED((rootDimensions.width)), CLAY_SIZING_FIXED(rootDimensions.height)} }
|
||||
.layout = { .sizing = {CLAY_SIZING_FIXED((rootDimensions.width)), CLAY_SIZING_FIXED(rootDimensions.height)} }
|
||||
});
|
||||
Clay__int32_tArray_Add(&context->openLayoutElementStack, 0);
|
||||
Clay__LayoutElementTreeRootArray_Add(&context->layoutElementTreeRoots, CLAY__INIT(Clay__LayoutElementTreeRoot) { .layoutElementIndex = 0 });
|
||||
|
|
@ -4253,9 +4246,14 @@ Clay_RenderCommandArray Clay_EndLayout(void) {
|
|||
.renderData = { .text = { .stringContents = CLAY__INIT(Clay_StringSlice) { .length = message.length, .chars = message.chars, .baseChars = message.chars }, .textColor = {255, 0, 0, 255}, .fontSize = 16 } },
|
||||
.commandType = CLAY_RENDER_COMMAND_TYPE_TEXT
|
||||
});
|
||||
} else {
|
||||
Clay__CalculateFinalLayout();
|
||||
}
|
||||
if (context->openLayoutElementStack.length > 1) {
|
||||
context->errorHandler.errorHandlerFunction(CLAY__INIT(Clay_ErrorData) {
|
||||
.errorType = CLAY_ERROR_TYPE_UNBALANCED_OPEN_CLOSE,
|
||||
.errorText = CLAY_STRING("There were still open layout elements when EndLayout was called. This results from an unequal number of calls to Clay__OpenElement and Clay__CloseElement."),
|
||||
.userData = context->errorHandler.userData });
|
||||
}
|
||||
Clay__CalculateFinalLayout();
|
||||
return context->renderCommands;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ Clay_RenderCommandArray ClayImageSample_CreateLayout() {
|
|||
.height = CLAY_SIZING_GROW(0)
|
||||
};
|
||||
|
||||
CLAY({ .id = CLAY_ID("OuterContainer"),
|
||||
CLAY(CLAY_ID("OuterContainer"), {
|
||||
.layout = {
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
.sizing = layoutExpand,
|
||||
|
|
@ -61,8 +61,7 @@ Clay_RenderCommandArray ClayImageSample_CreateLayout() {
|
|||
.childGap = 16
|
||||
}
|
||||
}) {
|
||||
CLAY({
|
||||
.id = CLAY_ID("SampleImage"),
|
||||
CLAY(CLAY_ID("SampleImage"), {
|
||||
.layout = {
|
||||
.sizing = layoutExpand
|
||||
},
|
||||
|
|
|
|||
|
|
@ -40,12 +40,12 @@ void Layout() {
|
|||
static Clay_Color BACKGROUND = { 0xF4, 0xEB, 0xE6, 255 };
|
||||
static Clay_Color ACCENT = { 0xFA, 0xE0, 0xD4, 255 };
|
||||
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) },
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM },
|
||||
.backgroundColor = BACKGROUND
|
||||
}) {
|
||||
CLAY({ .id = 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
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
.childGap = 10}
|
||||
|
|
@ -54,9 +54,9 @@ void Layout() {
|
|||
CLAY_TEXT(CLAY_STRING("Features Overview"), CLAY_TEXT_CONFIG({ .fontId = FONT_CALLISTOGA, .textColor = PRIMARY, .fontSize = 24 }));
|
||||
|
||||
// Feature Box
|
||||
CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(0) }, .childGap = 10 }}) {
|
||||
CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIT(0) }}, .backgroundColor = ACCENT, .cornerRadius = CLAY_CORNER_RADIUS(12) }) {
|
||||
CLAY({ .layout = {.padding = CLAY_PADDING_ALL(20), .childGap = 4, .layoutDirection = CLAY_TOP_TO_BOTTOM }}) {
|
||||
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 = {.padding = CLAY_PADDING_ALL(20), .childGap = 4, .layoutDirection = CLAY_TOP_TO_BOTTOM }}) {
|
||||
CLAY_TEXT(CLAY_STRING("- High performance"),
|
||||
CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontSize = 14, .fontId = FONT_QUICKSAND }));
|
||||
CLAY_TEXT(CLAY_STRING("- Declarative syntax"),
|
||||
|
|
@ -69,7 +69,7 @@ void Layout() {
|
|||
CLAY_TEXT_CONFIG({ .textColor = PRIMARY, .fontSize = 14, .fontId = FONT_QUICKSAND }));
|
||||
}
|
||||
}
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {CLAY_SIZING_FIT(0), CLAY_SIZING_GROW(0)},
|
||||
.padding = CLAY_PADDING_ALL(10),
|
||||
|
|
@ -81,23 +81,23 @@ void Layout() {
|
|||
.cornerRadius = CLAY_CORNER_RADIUS(8)
|
||||
}) {
|
||||
// Profile picture
|
||||
CLAY({ .layout = {
|
||||
CLAY_AUTO_ID({ .layout = {
|
||||
.sizing = {CLAY_SIZING_FIT(0), CLAY_SIZING_GROW(0)},
|
||||
.padding = { 30, 30, 0, 0 },
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER }},
|
||||
.border = { .color = PRIMARY, .width = 2, 2, 2, 2 }, .cornerRadius = 10
|
||||
}) {
|
||||
CLAY({ .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" }});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(16) } }});
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(16) } }});
|
||||
|
||||
CLAY({ .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({ .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. "
|
||||
"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. "
|
||||
|
|
|
|||
|
|
@ -65,21 +65,21 @@ Clay_String* FrameAllocateString(Clay_String string) {
|
|||
}
|
||||
|
||||
void LandingPageBlob(int index, int fontSize, Clay_Color color, Clay_String text, Clay_String imageURL) {
|
||||
CLAY({ .id = 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({ .id = CLAY_IDI("CheckImage", index), .layout = { .sizing = { CLAY_SIZING_FIXED(32) } }, .aspectRatio = { 1 }, .image = { .imageData = FrameAllocateString(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("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 }));
|
||||
}
|
||||
}
|
||||
|
||||
void LandingPageDesktop() {
|
||||
CLAY({ .id = 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({ .id = 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({ .id = CLAY_ID("LeftText"), .layout = { .sizing = { .width = CLAY_SIZING_PERCENT(0.55f) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
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("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("LeftText"), { .layout = { .sizing = { .width = CLAY_SIZING_PERCENT(0.55f) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
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({ .id = 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({ .id = 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 = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_PERCENT(0.45f) }, .childAlignment = { CLAY_ALIGN_X_CENTER }, .childGap = 16 } }) {
|
||||
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(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() {
|
||||
CLAY({ .id = 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({ .id = CLAY_ID("LeftText"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
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("LeftText"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
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({ .id = 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({ .id = 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 = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_GROW(0) }, .childAlignment = { CLAY_ALIGN_X_CENTER }, .childGap = 16 } }) {
|
||||
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(3, 28, COLOR_BLOB_BORDER_3, CLAY_STRING("Declarative syntax"), CLAY_STRING("/clay/images/check_3.png"));
|
||||
|
|
@ -108,17 +108,17 @@ void LandingPageMobile() {
|
|||
}
|
||||
|
||||
void FeatureBlocksDesktop() {
|
||||
CLAY({ .id = CLAY_ID("FeatureBlocksOuter"), .layout = { .sizing = { CLAY_SIZING_GROW(0) } } }) {
|
||||
CLAY({ .id = 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("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_TextElementConfig *textConfig = CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_BODY_24, .textColor = COLOR_RED });
|
||||
CLAY({ .id = 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({ .id = CLAY_ID("HFileIncludeOuter"), .layout = { .padding = {8, 4} }, .backgroundColor = COLOR_RED, .cornerRadius = CLAY_CORNER_RADIUS(8) }) {
|
||||
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("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("~2000 lines of C99."), textConfig);
|
||||
CLAY_TEXT(CLAY_STRING("Zero dependencies, including no C standard library."), textConfig);
|
||||
}
|
||||
CLAY({ .id = 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 = { .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_TEXT(CLAY_STRING("Renderer agnostic."), CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = COLOR_ORANGE }));
|
||||
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);
|
||||
|
|
@ -128,16 +128,16 @@ void FeatureBlocksDesktop() {
|
|||
}
|
||||
|
||||
void FeatureBlocksMobile() {
|
||||
CLAY({ .id = 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 = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(0) } }, .border = { .width = { .betweenChildren = 2 }, .color = COLOR_RED } }) {
|
||||
Clay_TextElementConfig *textConfig = CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_BODY_24, .textColor = COLOR_RED });
|
||||
CLAY({ .id = 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({ .id = CLAY_ID("HFileIncludeOuter"), .layout = { .padding = {8, 4} }, .backgroundColor = COLOR_RED, .cornerRadius = CLAY_CORNER_RADIUS(8) }) {
|
||||
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("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("~2000 lines of C99."), textConfig);
|
||||
CLAY_TEXT(CLAY_STRING("Zero dependencies, including no C standard library."), textConfig);
|
||||
}
|
||||
CLAY({ .id = 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 = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {0, CLAY_ALIGN_Y_CENTER}, .padding = {16, 16, 32, 32}, .childGap = 8 } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Renderer agnostic."), CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = COLOR_ORANGE }));
|
||||
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);
|
||||
|
|
@ -146,33 +146,33 @@ void FeatureBlocksMobile() {
|
|||
}
|
||||
|
||||
void DeclarativeSyntaxPageDesktop() {
|
||||
CLAY({ .id = 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({ .id = 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({ .id = CLAY_ID("SyntaxPageLeftText"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
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("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("SyntaxPageLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Declarative Syntax"), CLAY_TEXT_CONFIG({ .fontSize = 52, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED }));
|
||||
CLAY({ .id = 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("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("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({ .id = CLAY_ID("SyntaxPageRightImage"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) {
|
||||
CLAY({ .id = 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("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")) } }) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void DeclarativeSyntaxPageMobile() {
|
||||
CLAY({ .id = 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({ .id = CLAY_ID("SyntaxPageLeftText"), .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
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("SyntaxPageLeftText"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Declarative Syntax"), CLAY_TEXT_CONFIG({ .fontSize = 48, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED }));
|
||||
CLAY({ .id = 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("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("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({ .id = CLAY_ID("SyntaxPageRightImage"), .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) {
|
||||
CLAY({ .id = 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("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")) } }) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -189,20 +189,20 @@ 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.");
|
||||
|
||||
void HighPerformancePageDesktop(float lerpValue) {
|
||||
CLAY({ .id = 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({ .id = CLAY_ID("PerformanceLeftText"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
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("PerformanceLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
CLAY_TEXT(CLAY_STRING("High Performance"), CLAY_TEXT_CONFIG({ .fontSize = 52, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT }));
|
||||
CLAY({ .id = 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("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("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({ .id = CLAY_ID("PerformanceRightImageOuter"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) {
|
||||
CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(400) } }, .border = { .width = {2, 2, 2, 2}, .color = COLOR_LIGHT } }) {
|
||||
CLAY({ .id = 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("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(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_TEXT(LOREM_IPSUM_TEXT, CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT }));
|
||||
}
|
||||
CLAY({ .id = 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) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = CLAY_PADDING_ALL(32) }, .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 }));
|
||||
}
|
||||
}
|
||||
|
|
@ -211,20 +211,20 @@ void HighPerformancePageDesktop(float lerpValue) {
|
|||
}
|
||||
|
||||
void HighPerformancePageMobile(float lerpValue) {
|
||||
CLAY({ .id = 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({ .id = CLAY_ID("PerformanceLeftText"), .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
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("PerformanceLeftText"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
CLAY_TEXT(CLAY_STRING("High Performance"), CLAY_TEXT_CONFIG({ .fontSize = 48, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT }));
|
||||
CLAY({ .id = 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("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("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({ .id = CLAY_ID("PerformanceRightImageOuter"), .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) {
|
||||
CLAY({ .id = CLAY_ID(""), .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(400) } }, .border = { .width = { 2, 2, 2, 2 }, .color = COLOR_LIGHT }}) {
|
||||
CLAY({ .id = 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("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(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_TEXT(LOREM_IPSUM_TEXT, CLAY_TEXT_CONFIG({ .fontSize = 24, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT }));
|
||||
}
|
||||
CLAY({ .id = 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) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = CLAY_PADDING_ALL(16) }, .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 }));
|
||||
}
|
||||
}
|
||||
|
|
@ -241,7 +241,7 @@ void HandleRendererButtonInteraction(Clay_ElementId elementId, Clay_PointerData
|
|||
}
|
||||
|
||||
void RendererButtonActive(Clay_String text) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = { .sizing = {CLAY_SIZING_FIXED(300) }, .padding = CLAY_PADDING_ALL(16) },
|
||||
.backgroundColor = Clay_Hovered() ? COLOR_RED_HOVER : COLOR_RED,
|
||||
.cornerRadius = CLAY_CORNER_RADIUS(10),
|
||||
|
|
@ -252,7 +252,7 @@ void RendererButtonActive(Clay_String text) {
|
|||
}
|
||||
|
||||
void RendererButtonInactive(Clay_String text, size_t rendererIndex) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.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,
|
||||
|
|
@ -265,18 +265,18 @@ void RendererButtonInactive(Clay_String text, size_t rendererIndex) {
|
|||
}
|
||||
|
||||
void RendererPageDesktop() {
|
||||
CLAY({ .id = 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({ .id = 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({ .id = CLAY_ID("RendererLeftText"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
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("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("RendererLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Renderer & Platform Agnostic"), CLAY_TEXT_CONFIG({ .fontSize = 52, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED }));
|
||||
CLAY({ .id = 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("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("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({ .id = 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) }, .childAlignment = {CLAY_ALIGN_X_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 16 } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Try changing renderer!"), CLAY_TEXT_CONFIG({ .fontSize = 36, .fontId = FONT_ID_BODY_36, .textColor = COLOR_ORANGE }));
|
||||
CLAY({ .id = 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) {
|
||||
RendererButtonActive(CLAY_STRING("HTML Renderer"));
|
||||
RendererButtonInactive(CLAY_STRING("Canvas Renderer"), 1);
|
||||
|
|
@ -290,17 +290,17 @@ void RendererPageDesktop() {
|
|||
}
|
||||
|
||||
void RendererPageMobile() {
|
||||
CLAY({ .id = 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({ .id = CLAY_ID("RendererLeftText"), .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
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("RendererLeftText"), { .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Renderer & Platform Agnostic"), CLAY_TEXT_CONFIG({ .fontSize = 48, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED }));
|
||||
CLAY({ .id = 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("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("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({ .id = 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) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 16 } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Try changing renderer!"), CLAY_TEXT_CONFIG({ .fontSize = 36, .fontId = FONT_ID_BODY_36, .textColor = COLOR_ORANGE }));
|
||||
CLAY({ .id = 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) {
|
||||
RendererButtonActive(CLAY_STRING("HTML Renderer"));
|
||||
RendererButtonInactive(CLAY_STRING("Canvas Renderer"), 1);
|
||||
|
|
@ -313,17 +313,17 @@ void RendererPageMobile() {
|
|||
}
|
||||
|
||||
void DebuggerPageDesktop() {
|
||||
CLAY({ .id = 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({ .id = CLAY_ID("DebuggerLeftText"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
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("DebuggerLeftText"), { .layout = { .sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Integrated Debug Tools"), CLAY_TEXT_CONFIG({ .fontSize = 52, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT }));
|
||||
CLAY({ .id = 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("View your layout hierarchy and config in real time."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT }));
|
||||
CLAY({ .id = 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({ .id = CLAY_ID("DebuggerRightImageOuter"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) {
|
||||
CLAY({ .id = 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("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")) } }) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -340,26 +340,26 @@ float animationLerpValue = -1.0f;
|
|||
|
||||
Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
|
||||
Clay_BeginLayout();
|
||||
CLAY({ .id = CLAY_ID("OuterContainer"), .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) } }, .backgroundColor = COLOR_LIGHT }) {
|
||||
CLAY({ .id = 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("OuterContainer"), { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) } }, .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_TEXT(CLAY_STRING("Clay"), &headerTextConfig);
|
||||
CLAY({ .id = CLAY_ID("Spacer"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {}
|
||||
CLAY(CLAY_ID("Spacer"), { .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {}
|
||||
if (!mobileScreen) {
|
||||
CLAY({ .id = CLAY_ID("LinkExamplesOuter"), .layout = { .padding = {8, 8} } }) {
|
||||
CLAY(CLAY_ID("LinkExamplesOuter"), { .layout = { .padding = {8, 8} } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Examples"), CLAY_TEXT_CONFIG({
|
||||
.userData = FrameAllocateCustomData((CustomHTMLData) {
|
||||
.link = CLAY_STRING("https://github.com/nicbarker/clay/tree/main/examples")
|
||||
}),
|
||||
.fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255} }));
|
||||
}
|
||||
CLAY({ .id = CLAY_ID("LinkDocsOuter"), .layout = { .padding = {8, 8} } }) {
|
||||
CLAY(CLAY_ID("LinkDocsOuter"), { .layout = { .padding = {8, 8} } }) {
|
||||
CLAY_TEXT(CLAY_STRING("Docs"), CLAY_TEXT_CONFIG({
|
||||
.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} })
|
||||
);
|
||||
}
|
||||
}
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = { .padding = {16, 16, 6, 6} },
|
||||
.backgroundColor = Clay_Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT,
|
||||
.border = { .width = {2, 2, 2, 2}, .color = COLOR_RED },
|
||||
|
|
@ -370,7 +370,7 @@ Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
|
|||
.userData = FrameAllocateCustomData((CustomHTMLData) { .disablePointerEvents = true }),
|
||||
.fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255} }));
|
||||
}
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = { .padding = {16, 16, 6, 6} },
|
||||
.backgroundColor = Clay_Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT,
|
||||
.border = { .width = {2, 2, 2, 2}, .color = COLOR_RED },
|
||||
|
|
@ -383,12 +383,12 @@ Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
|
|||
}
|
||||
}
|
||||
Clay_LayoutConfig topBorderConfig = (Clay_LayoutConfig) { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(4) }};
|
||||
CLAY({ .id = CLAY_ID("TopBorder1"), .layout = topBorderConfig, .backgroundColor = COLOR_TOP_BORDER_5 }) {}
|
||||
CLAY({ .id = CLAY_ID("TopBorder2"), .layout = topBorderConfig, .backgroundColor = COLOR_TOP_BORDER_4 }) {}
|
||||
CLAY({ .id = CLAY_ID("TopBorder3"), .layout = topBorderConfig, .backgroundColor = COLOR_TOP_BORDER_3 }) {}
|
||||
CLAY({ .id = CLAY_ID("TopBorder4"), .layout = topBorderConfig, .backgroundColor = COLOR_TOP_BORDER_2 }) {}
|
||||
CLAY({ .id = CLAY_ID("TopBorder5"), .layout = topBorderConfig, .backgroundColor = COLOR_TOP_BORDER_1 }) {}
|
||||
CLAY({ .id = CLAY_ID("OuterScrollContainer"),
|
||||
CLAY(CLAY_ID("TopBorder1"), { .layout = topBorderConfig, .backgroundColor = COLOR_TOP_BORDER_5 }) {}
|
||||
CLAY(CLAY_ID("TopBorder2"), { .layout = topBorderConfig, .backgroundColor = COLOR_TOP_BORDER_4 }) {}
|
||||
CLAY(CLAY_ID("TopBorder3"), { .layout = topBorderConfig, .backgroundColor = COLOR_TOP_BORDER_3 }) {}
|
||||
CLAY(CLAY_ID("TopBorder4"), { .layout = topBorderConfig, .backgroundColor = COLOR_TOP_BORDER_2 }) {}
|
||||
CLAY(CLAY_ID("TopBorder5"), { .layout = topBorderConfig, .backgroundColor = COLOR_TOP_BORDER_1 }) {}
|
||||
CLAY(CLAY_ID("OuterScrollContainer"), {
|
||||
.layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) }, .layoutDirection = CLAY_TOP_TO_BOTTOM },
|
||||
.clip = { .vertical = true, .childOffset = Clay_GetScrollOffset() },
|
||||
.border = { .width = { .betweenChildren = 2 }, .color = COLOR_RED }
|
||||
|
|
@ -419,8 +419,7 @@ Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
|
|||
scrollbarColor = (Clay_Color){225, 138, 50, 160};
|
||||
}
|
||||
float scrollHeight = scrollData.scrollContainerDimensions.height - 12;
|
||||
CLAY({
|
||||
.id = 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)} },
|
||||
.backgroundColor = scrollbarColor,
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ int main(void) {
|
|||
Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, (char *)malloc(totalMemorySize));
|
||||
Clay_Initialize(clayMemory, Clay_Dimensions {1024,768}, Clay_ErrorHandler { HandleClayErrors });
|
||||
Clay_BeginLayout();
|
||||
CLAY({ .layout = layoutElement, .backgroundColor = {255,255,255,0} }) {
|
||||
CLAY_AUTO_ID({ .layout = layoutElement, .backgroundColor = {255,255,255,0} }) {
|
||||
CLAY_TEXT(CLAY_STRING(""), CLAY_TEXT_CONFIG({ .fontId = 0 }));
|
||||
}
|
||||
Clay_EndLayout();
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ Clay_Color COLOR_WHITE = { 255, 255, 255, 255 };
|
|||
Clay_Color COLOR_BLACK = { 0, 0, 0, 255 };
|
||||
|
||||
void RenderHeaderButton(Clay_String text) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = { .padding = { 8, 8, 4, 4 } },
|
||||
.backgroundColor = COLOR_BLACK,
|
||||
.cornerRadius = CLAY_CORNER_RADIUS(4)
|
||||
|
|
@ -212,8 +212,7 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
|
|||
};
|
||||
|
||||
// Build UI here
|
||||
CLAY({
|
||||
.id = CLAY_ID("OuterContainer"),
|
||||
CLAY(CLAY_ID("OuterContainer"), {
|
||||
.backgroundColor = COLOR_WHITE,
|
||||
.layout = {
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
|
|
@ -223,8 +222,7 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
|
|||
}
|
||||
}) {
|
||||
// Child elements go inside braces
|
||||
CLAY({
|
||||
.id = CLAY_ID("HeaderBar"),
|
||||
CLAY(CLAY_ID("HeaderBar"), {
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.height = CLAY_SIZING_FIXED(30),
|
||||
|
|
@ -235,8 +233,7 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
|
|||
},
|
||||
}) {
|
||||
// Header buttons go here
|
||||
CLAY({
|
||||
.id = CLAY_ID("FileButton"),
|
||||
CLAY(CLAY_ID("FileButton"), {
|
||||
.layout = {
|
||||
.padding = { 8, 8, 4, 4 }
|
||||
},
|
||||
|
|
@ -252,18 +249,16 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
|
|||
);
|
||||
}
|
||||
RenderHeaderButton(CLAY_STRING("Edit"));
|
||||
CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0) } } }) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0) } } }) {}
|
||||
RenderHeaderButton(CLAY_STRING("Upload"));
|
||||
RenderHeaderButton(CLAY_STRING("Media"));
|
||||
RenderHeaderButton(CLAY_STRING("Support"));
|
||||
}
|
||||
|
||||
CLAY({
|
||||
.id = CLAY_ID("LowerContent"),
|
||||
CLAY(CLAY_ID("LowerContent"), {
|
||||
.layout = { .sizing = layoutExpand, .childGap = 8 },
|
||||
}) {
|
||||
CLAY({
|
||||
.id = CLAY_ID("Sidebar"),
|
||||
CLAY(CLAY_ID("Sidebar"), {
|
||||
.border = contentBorders,
|
||||
.cornerRadius = CLAY_CORNER_RADIUS(4),
|
||||
.layout = {
|
||||
|
|
@ -284,7 +279,7 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
|
|||
};
|
||||
|
||||
if (i == selectedDocumentIndex) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = sidebarButtonLayout,
|
||||
.backgroundColor = COLOR_BLACK,
|
||||
.cornerRadius = CLAY_CORNER_RADIUS(4)
|
||||
|
|
@ -298,7 +293,7 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
|
|||
);
|
||||
}
|
||||
} else {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = sidebarButtonLayout,
|
||||
.backgroundColor = (Clay_Color){ 0, 0, 0, Clay_Hovered() ? 120 : 0 },
|
||||
.cornerRadius = CLAY_CORNER_RADIUS(4),
|
||||
|
|
@ -316,8 +311,7 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
|
|||
}
|
||||
}
|
||||
|
||||
CLAY({
|
||||
.id = CLAY_ID("MainContent"),
|
||||
CLAY(CLAY_ID("MainContent"), {
|
||||
.border = contentBorders,
|
||||
.cornerRadius = CLAY_CORNER_RADIUS(4),
|
||||
.clip = { .vertical = true, .childOffset = Clay_GetScrollOffset() },
|
||||
|
|
@ -329,7 +323,7 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
|
|||
}
|
||||
}) {
|
||||
Document selectedDocument = documents.documents[selectedDocumentIndex];
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.layoutDirection = CLAY_LEFT_TO_RIGHT,
|
||||
.childGap = 4,
|
||||
|
|
@ -340,7 +334,7 @@ Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentI
|
|||
selectedDocument.title,
|
||||
CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY, .textColor = COLOR_BLACK })
|
||||
);
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = CLAY_SIZING_FIXED(32),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -3,7 +3,7 @@
|
|||
// NOTE: This file only exists to make sure that clay works when included in multiple translation units.
|
||||
|
||||
void SatisfyCompiler(void) {
|
||||
CLAY({ .id = CLAY_ID("SatisfyCompiler") }) {
|
||||
CLAY(CLAY_ID("SatisfyCompiler"), { }) {
|
||||
CLAY_TEXT(CLAY_STRING("Test"), CLAY_TEXT_CONFIG({ .fontId = 0, .fontSize = 24 }));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const int FONT_ID_BODY_16 = 0;
|
|||
Clay_Color COLOR_WHITE = { 255, 255, 255, 255};
|
||||
|
||||
void RenderHeaderButton(Clay_String text) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = { .padding = { 16, 16, 8, 8 }},
|
||||
.backgroundColor = { 140, 140, 140, 255 },
|
||||
.cornerRadius = CLAY_CORNER_RADIUS(5)
|
||||
|
|
@ -19,7 +19,7 @@ void RenderHeaderButton(Clay_String text) {
|
|||
}
|
||||
|
||||
void RenderDropdownMenuItem(Clay_String text) {
|
||||
CLAY({.layout = { .padding = CLAY_PADDING_ALL(16)}}) {
|
||||
CLAY_AUTO_ID({.layout = { .padding = CLAY_PADDING_ALL(16)}}) {
|
||||
CLAY_TEXT(text, CLAY_TEXT_CONFIG({
|
||||
.fontId = FONT_ID_BODY_16,
|
||||
.fontSize = 16,
|
||||
|
|
@ -102,7 +102,7 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
|
|||
Clay_Color contentBackgroundColor = { 90, 90, 90, 255 };
|
||||
|
||||
// Build UI here
|
||||
CLAY({ .id = CLAY_ID("OuterContainer"),
|
||||
CLAY(CLAY_ID("OuterContainer"), {
|
||||
.backgroundColor = {43, 41, 51, 255 },
|
||||
.layout = {
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
|
|
@ -112,7 +112,7 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
|
|||
}
|
||||
}) {
|
||||
// Child elements go inside braces
|
||||
CLAY({ .id = CLAY_ID("HeaderBar"),
|
||||
CLAY(CLAY_ID("HeaderBar"), {
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.height = CLAY_SIZING_FIXED(60),
|
||||
|
|
@ -128,7 +128,7 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
|
|||
.cornerRadius = CLAY_CORNER_RADIUS(8)
|
||||
}) {
|
||||
// Header buttons go here
|
||||
CLAY({ .id = CLAY_ID("FileButton"),
|
||||
CLAY(CLAY_ID("FileButton"), {
|
||||
.layout = { .padding = { 16, 16, 8, 8 }},
|
||||
.backgroundColor = {140, 140, 140, 255 },
|
||||
.cornerRadius = CLAY_CORNER_RADIUS(5)
|
||||
|
|
@ -145,7 +145,7 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
|
|||
Clay_PointerOver(Clay_GetElementId(CLAY_STRING("FileMenu")));
|
||||
|
||||
if (fileMenuVisible) { // Below has been changed slightly to fix the small bug where the menu would dismiss when mousing over the top gap
|
||||
CLAY({ .id = CLAY_ID("FileMenu"),
|
||||
CLAY(CLAY_ID("FileMenu"), {
|
||||
.floating = {
|
||||
.attachTo = CLAY_ATTACH_TO_PARENT,
|
||||
.attachPoints = {
|
||||
|
|
@ -156,7 +156,7 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
|
|||
.padding = {0, 0, 8, 8 }
|
||||
}
|
||||
}) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
.sizing = {
|
||||
|
|
@ -175,18 +175,16 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
|
|||
}
|
||||
}
|
||||
RenderHeaderButton(CLAY_STRING("Edit"));
|
||||
CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0) }}}) {}
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = { CLAY_SIZING_GROW(0) }}}) {}
|
||||
RenderHeaderButton(CLAY_STRING("Upload"));
|
||||
RenderHeaderButton(CLAY_STRING("Media"));
|
||||
RenderHeaderButton(CLAY_STRING("Support"));
|
||||
}
|
||||
|
||||
CLAY({
|
||||
.id = CLAY_ID("LowerContent"),
|
||||
CLAY(CLAY_ID("LowerContent"), {
|
||||
.layout = { .sizing = layoutExpand, .childGap = 16 }
|
||||
}) {
|
||||
CLAY({
|
||||
.id = CLAY_ID("Sidebar"),
|
||||
CLAY(CLAY_ID("Sidebar"), {
|
||||
.backgroundColor = contentBackgroundColor,
|
||||
.layout = {
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
|
|
@ -206,7 +204,7 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
|
|||
};
|
||||
|
||||
if (i == data->selectedDocumentIndex) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = sidebarButtonLayout,
|
||||
.backgroundColor = {120, 120, 120, 255 },
|
||||
.cornerRadius = CLAY_CORNER_RADIUS(8)
|
||||
|
|
@ -221,7 +219,7 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
|
|||
SidebarClickData *clickData = (SidebarClickData *)(data->frameArena.memory + data->frameArena.offset);
|
||||
*clickData = (SidebarClickData) { .requestedDocumentIndex = i, .selectedDocumentIndex = &data->selectedDocumentIndex };
|
||||
data->frameArena.offset += sizeof(SidebarClickData);
|
||||
CLAY({ .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 : 0 }, .cornerRadius = CLAY_CORNER_RADIUS(8) }) {
|
||||
Clay_OnHover(HandleSidebarInteraction, (intptr_t)clickData);
|
||||
CLAY_TEXT(document.title, CLAY_TEXT_CONFIG({
|
||||
.fontId = FONT_ID_BODY_16,
|
||||
|
|
@ -233,7 +231,7 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(ClayVideoDemo_Data *data) {
|
|||
}
|
||||
}
|
||||
|
||||
CLAY({ .id = CLAY_ID("MainContent"),
|
||||
CLAY(CLAY_ID("MainContent"), {
|
||||
.backgroundColor = contentBackgroundColor,
|
||||
.clip = { .vertical = true, .childOffset = Clay_GetScrollOffset() },
|
||||
.layout = {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ Clay_RenderCommandArray CornerRadiusTest(){
|
|||
.width = CLAY_SIZING_GROW(0),
|
||||
.height = CLAY_SIZING_GROW(0)
|
||||
};
|
||||
CLAY({ .id = CLAY_ID("OuterContainer"),
|
||||
CLAY(CLAY_ID("OuterContainer"), {
|
||||
.backgroundColor = {43, 41, 51, 255},
|
||||
.layout = {
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
|
|
@ -43,7 +43,7 @@ Clay_RenderCommandArray CornerRadiusTest(){
|
|||
}
|
||||
}) {
|
||||
for(int i = 0; i < 6; ++i){
|
||||
CLAY({ .id = CLAY_IDI("Row", i),
|
||||
CLAY(CLAY_IDI("Row", i), {
|
||||
.layout = {
|
||||
.layoutDirection = CLAY_LEFT_TO_RIGHT,
|
||||
.sizing = layoutExpand,
|
||||
|
|
@ -52,7 +52,7 @@ Clay_RenderCommandArray CornerRadiusTest(){
|
|||
}
|
||||
}) {
|
||||
for(int j = 0; j < 6; ++j){
|
||||
CLAY({ .id = CLAY_IDI("Tile", i*6+j),
|
||||
CLAY(CLAY_IDI("Tile", i*6+j), {
|
||||
.backgroundColor = {120, 140, 255, 128},
|
||||
.cornerRadius = {(i%3)*15, (j%3)*15, (i/2)*15, (j/2)*15},
|
||||
.border = {
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ void component_text_pair(const char *key, const char *value)
|
|||
};
|
||||
Clay_TextElementConfig *textconfig =
|
||||
CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } });
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = {
|
||||
|
|
@ -82,7 +82,7 @@ void component_text_pair(const char *key, const char *value)
|
|||
},
|
||||
}) {
|
||||
CLAY_TEXT(keytext, textconfig);
|
||||
CLAY({ .layout = { .sizing = CLAY_SIZING_GROW(1) } }) { }
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = CLAY_SIZING_GROW(1) } }) { }
|
||||
CLAY_TEXT(valtext, textconfig);
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ void component_text_pair(const char *key, const char *value)
|
|||
|
||||
void component_termbox_settings(void)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.floating = {
|
||||
.attachTo = CLAY_ATTACH_TO_PARENT,
|
||||
.zIndex = 1,
|
||||
|
|
@ -98,7 +98,7 @@ void component_termbox_settings(void)
|
|||
.offset = { 0, 0 }
|
||||
},
|
||||
}) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = CLAY_SIZING_FIT(),
|
||||
.padding = {
|
||||
|
|
@ -229,7 +229,7 @@ void component_termbox_settings(void)
|
|||
transparency = "false";
|
||||
}
|
||||
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM },
|
||||
}) {
|
||||
component_text_pair("Color mode", color_mode);
|
||||
|
|
@ -244,7 +244,7 @@ void component_termbox_settings(void)
|
|||
|
||||
void component_color_palette(void)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.childGap = 16,
|
||||
.padding = {
|
||||
|
|
@ -261,7 +261,7 @@ void component_color_palette(void)
|
|||
.backgroundColor = { 0x7f, 0x7f, 0x7f, 0xff }
|
||||
}) {
|
||||
for (int type = 0; type < 2; ++type) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout ={
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
.sizing = CLAY_SIZING_FIT(),
|
||||
|
|
@ -269,21 +269,21 @@ void component_color_palette(void)
|
|||
},
|
||||
}) {
|
||||
for (float ri = 0; ri < 4; ri += 1) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout ={
|
||||
.sizing = CLAY_SIZING_FIT(),
|
||||
.childGap = Clay_Termbox_Cell_Width()
|
||||
},
|
||||
}) {
|
||||
for (float r = ri * 0x44; r < (ri + 1) * 0x44; r += 0x22) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout ={
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
.sizing = CLAY_SIZING_FIT(),
|
||||
},
|
||||
}) {
|
||||
for (float g = 0; g < 0xff; g += 0x22) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout ={
|
||||
.sizing = CLAY_SIZING_FIT(),
|
||||
},
|
||||
|
|
@ -298,12 +298,12 @@ void component_color_palette(void)
|
|||
}
|
||||
};
|
||||
if (0 == type) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = layout,
|
||||
.backgroundColor = color
|
||||
}) {}
|
||||
} else if (1 == type) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = layout,
|
||||
}) {
|
||||
CLAY_TEXT(CLAY_STRING("#"), CLAY_TEXT_CONFIG({ .textColor = color }));
|
||||
|
|
@ -323,7 +323,7 @@ void component_color_palette(void)
|
|||
|
||||
void component_unicode_text(void)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = CLAY_SIZING_FIT(),
|
||||
.padding = {
|
||||
|
|
@ -377,7 +377,7 @@ void component_unicode_text(void)
|
|||
|
||||
void component_keybinds(void)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = CLAY_SIZING_FIT(),
|
||||
.padding = {
|
||||
|
|
@ -409,7 +409,7 @@ void component_keybinds(void)
|
|||
|
||||
void component_image(clay_tb_image *image, int width)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = (0 == width) ? CLAY_SIZING_GROW() : CLAY_SIZING_FIXED(width),
|
||||
|
|
@ -424,7 +424,7 @@ void component_image(clay_tb_image *image, int width)
|
|||
|
||||
void component_mouse_data(void)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = CLAY_SIZING_GROW(),
|
||||
|
|
@ -446,7 +446,7 @@ void component_mouse_data(void)
|
|||
v = (255 < v) ? 255 : v;
|
||||
Clay_Color color = (Clay_Color) { v, v, v, 0xff };
|
||||
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = layout,
|
||||
.backgroundColor = color
|
||||
}) {}
|
||||
|
|
@ -457,7 +457,7 @@ void component_mouse_data(void)
|
|||
color = (Clay_Color) { v, v, v, 0xff };
|
||||
|
||||
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = layout,
|
||||
.backgroundColor = color
|
||||
}) {}
|
||||
|
|
@ -467,7 +467,7 @@ void component_mouse_data(void)
|
|||
|
||||
void component_bordered_text(void)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
.sizing = {
|
||||
|
|
@ -478,25 +478,25 @@ void component_bordered_text(void)
|
|||
},
|
||||
.backgroundColor = { 0x24, 0x55, 0x34, 0xff },
|
||||
}) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.border = { .width = { 1, 1, 1, 1, 1 }, .color = { 0xaa, 0x00, 0x00, 0xff } },
|
||||
}) {
|
||||
CLAY_TEXT(
|
||||
CLAY_STRING("Test"), CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } }));
|
||||
}
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.border = { .width = { 1, 1, 1, 1, 1 }, .color = { 0x00, 0xaa, 0x00, 0xff } },
|
||||
}) {
|
||||
CLAY_TEXT(CLAY_STRING("of the border width"),
|
||||
CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } }));
|
||||
}
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.border = { .width = { 1, 1, 1, 1, 1 }, .color = { 0x00, 0x00, 0xaa, 0xff } },
|
||||
}) {
|
||||
CLAY_TEXT(CLAY_STRING("and overlap for multiple lines\nof text"),
|
||||
CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } }));
|
||||
}
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.border = { .width = { 1, 1, 1, 1, 1 }, .color = { 0x00, 0x00, 0xaa, 0xff } },
|
||||
}) {
|
||||
CLAY_TEXT(CLAY_STRING("this text\nis long enough\nto display all\n borders\naround it"),
|
||||
|
|
@ -508,7 +508,7 @@ void component_bordered_text(void)
|
|||
Clay_RenderCommandArray CreateLayout(clay_tb_image *image1, clay_tb_image *image2)
|
||||
{
|
||||
Clay_BeginLayout();
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = CLAY_SIZING_GROW(),
|
||||
|
|
@ -522,7 +522,7 @@ Clay_RenderCommandArray CreateLayout(clay_tb_image *image1, clay_tb_image *image
|
|||
},
|
||||
.backgroundColor = { 0x24, 0x24, 0x24, 0xff }
|
||||
}) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.childAlignment = {
|
||||
.x = CLAY_ALIGN_X_RIGHT,
|
||||
|
|
@ -534,7 +534,7 @@ Clay_RenderCommandArray CreateLayout(clay_tb_image *image1, clay_tb_image *image
|
|||
component_keybinds();
|
||||
component_unicode_text();
|
||||
}
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.layoutDirection = CLAY_TOP_TO_BOTTOM,
|
||||
.childGap = 32,
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ void component_text_pair(const char *key, const char *value)
|
|||
};
|
||||
Clay_TextElementConfig *textconfig =
|
||||
CLAY_TEXT_CONFIG({ .textColor = { 0xff, 0xff, 0xff, 0xff } });
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = {
|
||||
|
|
@ -125,7 +125,7 @@ void component_text_pair(const char *key, const char *value)
|
|||
},
|
||||
}) {
|
||||
CLAY_TEXT(keytext, textconfig);
|
||||
CLAY({ .layout = { .sizing = CLAY_SIZING_GROW(1) } }) { }
|
||||
CLAY_AUTO_ID({ .layout = { .sizing = CLAY_SIZING_GROW(1) } }) { }
|
||||
CLAY_TEXT(valtext, textconfig);
|
||||
}
|
||||
|
||||
|
|
@ -133,7 +133,7 @@ void component_text_pair(const char *key, const char *value)
|
|||
|
||||
void component_termbox_settings(void)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = CLAY_SIZING_FIT(),
|
||||
.padding = {
|
||||
|
|
@ -264,7 +264,7 @@ void component_termbox_settings(void)
|
|||
transparency = "false";
|
||||
}
|
||||
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM },
|
||||
}) {
|
||||
component_text_pair("Color mode", color_mode);
|
||||
|
|
@ -278,7 +278,7 @@ void component_termbox_settings(void)
|
|||
|
||||
void component_keybinds(void)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = CLAY_SIZING_FIT(),
|
||||
.padding = {
|
||||
|
|
@ -311,7 +311,7 @@ void component_keybinds(void)
|
|||
|
||||
void component_image(img_group *img_pair)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = CLAY_SIZING_GROW(),
|
||||
|
|
@ -326,7 +326,7 @@ void component_image(img_group *img_pair)
|
|||
},
|
||||
.backgroundColor = { 0x24, 0x24, 0x24, 0xff }
|
||||
}) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = CLAY_SIZING_GROW(),
|
||||
|
|
@ -343,7 +343,7 @@ void component_image(img_group *img_pair)
|
|||
|
||||
void component_image_small(img_group **img_pairs, int count, int selected_index)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = CLAY_SIZING_PERCENT(0.25),
|
||||
|
|
@ -356,7 +356,7 @@ void component_image_small(img_group **img_pairs, int count, int selected_index)
|
|||
},
|
||||
},
|
||||
}) {
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = CLAY_SIZING_PERCENT(0.7),
|
||||
|
|
@ -367,7 +367,7 @@ void component_image_small(img_group **img_pairs, int count, int selected_index)
|
|||
},
|
||||
.aspectRatio = { (float)img_pairs[selected_index]->width / img_pairs[selected_index]->height }
|
||||
}) { }
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = CLAY_SIZING_GROW(),
|
||||
|
|
@ -384,7 +384,7 @@ void component_image_small(img_group **img_pairs, int count, int selected_index)
|
|||
|
||||
void component_thumbnails(img_group **img_pairs, int count, int selected_index)
|
||||
{
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = CLAY_SIZING_PERCENT(0.1),
|
||||
|
|
@ -407,7 +407,7 @@ void component_thumbnails(img_group **img_pairs, int count, int selected_index)
|
|||
.width = CLAY_BORDER_OUTSIDE(0),
|
||||
};
|
||||
}
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = CLAY_SIZING_GROW(),
|
||||
|
|
@ -428,7 +428,7 @@ const int thumbnail_count = 5;
|
|||
Clay_RenderCommandArray CreateLayout(struct img_group **imgs)
|
||||
{
|
||||
Clay_BeginLayout();
|
||||
CLAY({
|
||||
CLAY_AUTO_ID({
|
||||
.layout = {
|
||||
.sizing = {
|
||||
.width = CLAY_SIZING_GROW(),
|
||||
|
|
|
|||
0
generator/__init__.py
Normal file
0
generator/__init__.py
Normal file
83
generator/cli.py
Normal file
83
generator/cli.py
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import argparse
|
||||
import logging
|
||||
import json
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
from generators.base_generator import BaseGenerator
|
||||
from generators.odin_generator import OdinGenerator
|
||||
from parser import parse_headers
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
GeneratorMap = dict[str, type[BaseGenerator]]
|
||||
GENERATORS = {
|
||||
'odin': OdinGenerator,
|
||||
}
|
||||
|
||||
def main() -> None:
|
||||
arg_parser = argparse.ArgumentParser(description='Generate clay bindings')
|
||||
|
||||
# Directories
|
||||
arg_parser.add_argument('input_files', nargs='+', type=str, help='Input header files')
|
||||
arg_parser.add_argument('--output-dir', type=str, help='Output directory', required=True)
|
||||
arg_parser.add_argument('--tmp-dir', type=str, help='Temporary directory')
|
||||
|
||||
# Generators
|
||||
arg_parser.add_argument('--generator', type=str, choices=list(GENERATORS.keys()), help='Generators to run', required=True)
|
||||
|
||||
# Logging
|
||||
arg_parser.add_argument('--verbose', action='store_true', help='Verbose logging')
|
||||
|
||||
args = arg_parser.parse_args()
|
||||
|
||||
log_formatter = logging.Formatter('%(asctime)s - %(name)s - %(levelname)s - %(message)s')
|
||||
log_handler = logging.StreamHandler()
|
||||
log_handler.setFormatter(log_formatter)
|
||||
if args.verbose:
|
||||
logging.basicConfig(level=logging.DEBUG, handlers=[log_handler])
|
||||
else:
|
||||
logging.basicConfig(level=logging.INFO, handlers=[log_handler])
|
||||
|
||||
output_dir = Path(args.output_dir)
|
||||
output_dir.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
if args.tmp_dir:
|
||||
tmp_dir = Path(args.tmp_dir)
|
||||
else:
|
||||
tmp_dir = output_dir / 'tmp'
|
||||
tmp_dir.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
fake_libc_include_path = Path(__file__).parent / 'fake_libc_include'
|
||||
input_files = list(fake_libc_include_path.glob('*.h')) + [Path(f) for f in args.input_files]
|
||||
|
||||
logger.info(f'Input files: {input_files}')
|
||||
logger.info(f'Output directory: {output_dir}')
|
||||
logger.info(f'Temporary directory: {tmp_dir}')
|
||||
logger.info(f'Generator: {args.generator}')
|
||||
|
||||
logger.info('Parsing headers')
|
||||
extracted_symbols = parse_headers(input_files, tmp_dir)
|
||||
with open(tmp_dir / 'extracted_symbols.json', 'w') as f:
|
||||
f.write(json.dumps({
|
||||
'structs': extracted_symbols.structs,
|
||||
'enums': extracted_symbols.enums,
|
||||
'functions': extracted_symbols.functions,
|
||||
}, indent=2))
|
||||
|
||||
logger.info('Generating bindings')
|
||||
generator = GENERATORS[args.generator](extracted_symbols)
|
||||
generator.generate()
|
||||
logger.debug(f'Generated bindings:')
|
||||
# for file_name, content in generator.get_outputs().items():
|
||||
# logger.debug(f'{file_name}:')
|
||||
# logger.debug(content)
|
||||
# logger.debug('\n')
|
||||
|
||||
tmp_outputs_dir = tmp_dir / 'generated'
|
||||
tmp_outputs_dir.mkdir(parents=True, exist_ok=True)
|
||||
generator.write_outputs(tmp_outputs_dir)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
262
generator/fake_libc_include/_fake_defines.h
Normal file
262
generator/fake_libc_include/_fake_defines.h
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
#ifndef _FAKE_DEFINES_H
|
||||
#define _FAKE_DEFINES_H
|
||||
|
||||
#define NULL 0
|
||||
#define BUFSIZ 1024
|
||||
#define FOPEN_MAX 20
|
||||
#define FILENAME_MAX 1024
|
||||
|
||||
#ifndef SEEK_SET
|
||||
#define SEEK_SET 0 /* set file offset to offset */
|
||||
#endif
|
||||
#ifndef SEEK_CUR
|
||||
#define SEEK_CUR 1 /* set file offset to current plus offset */
|
||||
#endif
|
||||
#ifndef SEEK_END
|
||||
#define SEEK_END 2 /* set file offset to EOF plus offset */
|
||||
#endif
|
||||
|
||||
#define __LITTLE_ENDIAN 1234
|
||||
#define LITTLE_ENDIAN __LITTLE_ENDIAN
|
||||
#define __BIG_ENDIAN 4321
|
||||
#define BIG_ENDIAN __BIG_ENDIAN
|
||||
#define __BYTE_ORDER __LITTLE_ENDIAN
|
||||
#define BYTE_ORDER __BYTE_ORDER
|
||||
|
||||
#define EXIT_FAILURE 1
|
||||
#define EXIT_SUCCESS 0
|
||||
|
||||
#define SCHAR_MIN -128
|
||||
#define SCHAR_MAX 127
|
||||
#define CHAR_MIN -128
|
||||
#define CHAR_MAX 127
|
||||
#define UCHAR_MAX 255
|
||||
#define SHRT_MIN -32768
|
||||
#define SHRT_MAX 32767
|
||||
#define USHRT_MAX 65535
|
||||
#define INT_MIN -2147483648
|
||||
#define INT_MAX 2147483647
|
||||
#define UINT_MAX 4294967295U
|
||||
#define LONG_MIN -9223372036854775808L
|
||||
#define LONG_MAX 9223372036854775807L
|
||||
#define ULONG_MAX 18446744073709551615UL
|
||||
#define RAND_MAX 32767
|
||||
|
||||
/* C99 inttypes.h defines */
|
||||
#define PRId8 "d"
|
||||
#define PRIi8 "i"
|
||||
#define PRIo8 "o"
|
||||
#define PRIu8 "u"
|
||||
#define PRIx8 "x"
|
||||
#define PRIX8 "X"
|
||||
#define PRId16 "d"
|
||||
#define PRIi16 "i"
|
||||
#define PRIo16 "o"
|
||||
#define PRIu16 "u"
|
||||
#define PRIx16 "x"
|
||||
#define PRIX16 "X"
|
||||
#define PRId32 "d"
|
||||
#define PRIi32 "i"
|
||||
#define PRIo32 "o"
|
||||
#define PRIu32 "u"
|
||||
#define PRIx32 "x"
|
||||
#define PRIX32 "X"
|
||||
#define PRId64 "d"
|
||||
#define PRIi64 "i"
|
||||
#define PRIo64 "o"
|
||||
#define PRIu64 "u"
|
||||
#define PRIx64 "x"
|
||||
#define PRIX64 "X"
|
||||
#define PRIdLEAST8 "d"
|
||||
#define PRIiLEAST8 "i"
|
||||
#define PRIoLEAST8 "o"
|
||||
#define PRIuLEAST8 "u"
|
||||
#define PRIxLEAST8 "x"
|
||||
#define PRIXLEAST8 "X"
|
||||
#define PRIdLEAST16 "d"
|
||||
#define PRIiLEAST16 "i"
|
||||
#define PRIoLEAST16 "o"
|
||||
#define PRIuLEAST16 "u"
|
||||
#define PRIxLEAST16 "x"
|
||||
#define PRIXLEAST16 "X"
|
||||
#define PRIdLEAST32 "d"
|
||||
#define PRIiLEAST32 "i"
|
||||
#define PRIoLEAST32 "o"
|
||||
#define PRIuLEAST32 "u"
|
||||
#define PRIxLEAST32 "x"
|
||||
#define PRIXLEAST32 "X"
|
||||
#define PRIdLEAST64 "d"
|
||||
#define PRIiLEAST64 "i"
|
||||
#define PRIoLEAST64 "o"
|
||||
#define PRIuLEAST64 "u"
|
||||
#define PRIxLEAST64 "x"
|
||||
#define PRIXLEAST64 "X"
|
||||
#define PRIdFAST8 "d"
|
||||
#define PRIiFAST8 "i"
|
||||
#define PRIoFAST8 "o"
|
||||
#define PRIuFAST8 "u"
|
||||
#define PRIxFAST8 "x"
|
||||
#define PRIXFAST8 "X"
|
||||
#define PRIdFAST16 "d"
|
||||
#define PRIiFAST16 "i"
|
||||
#define PRIoFAST16 "o"
|
||||
#define PRIuFAST16 "u"
|
||||
#define PRIxFAST16 "x"
|
||||
#define PRIXFAST16 "X"
|
||||
#define PRIdFAST32 "d"
|
||||
#define PRIiFAST32 "i"
|
||||
#define PRIoFAST32 "o"
|
||||
#define PRIuFAST32 "u"
|
||||
#define PRIxFAST32 "x"
|
||||
#define PRIXFAST32 "X"
|
||||
#define PRIdFAST64 "d"
|
||||
#define PRIiFAST64 "i"
|
||||
#define PRIoFAST64 "o"
|
||||
#define PRIuFAST64 "u"
|
||||
#define PRIxFAST64 "x"
|
||||
#define PRIXFAST64 "X"
|
||||
#define PRIdPTR "d"
|
||||
#define PRIiPTR "i"
|
||||
#define PRIoPTR "o"
|
||||
#define PRIuPTR "u"
|
||||
#define PRIxPTR "x"
|
||||
#define PRIXPTR "X"
|
||||
#define PRIdMAX "d"
|
||||
#define PRIiMAX "i"
|
||||
#define PRIoMAX "o"
|
||||
#define PRIuMAX "u"
|
||||
#define PRIxMAX "x"
|
||||
#define PRIXMAX "X"
|
||||
#define SCNd8 "d"
|
||||
#define SCNi8 "i"
|
||||
#define SCNo8 "o"
|
||||
#define SCNu8 "u"
|
||||
#define SCNx8 "x"
|
||||
#define SCNd16 "d"
|
||||
#define SCNi16 "i"
|
||||
#define SCNo16 "o"
|
||||
#define SCNu16 "u"
|
||||
#define SCNx16 "x"
|
||||
#define SCNd32 "d"
|
||||
#define SCNi32 "i"
|
||||
#define SCNo32 "o"
|
||||
#define SCNu32 "u"
|
||||
#define SCNx32 "x"
|
||||
#define SCNd64 "d"
|
||||
#define SCNi64 "i"
|
||||
#define SCNo64 "o"
|
||||
#define SCNu64 "u"
|
||||
#define SCNx64 "x"
|
||||
#define SCNdLEAST8 "d"
|
||||
#define SCNiLEAST8 "i"
|
||||
#define SCNoLEAST8 "o"
|
||||
#define SCNuLEAST8 "u"
|
||||
#define SCNxLEAST8 "x"
|
||||
#define SCNdLEAST16 "d"
|
||||
#define SCNiLEAST16 "i"
|
||||
#define SCNoLEAST16 "o"
|
||||
#define SCNuLEAST16 "u"
|
||||
#define SCNxLEAST16 "x"
|
||||
#define SCNdLEAST32 "d"
|
||||
#define SCNiLEAST32 "i"
|
||||
#define SCNoLEAST32 "o"
|
||||
#define SCNuLEAST32 "u"
|
||||
#define SCNxLEAST32 "x"
|
||||
#define SCNdLEAST64 "d"
|
||||
#define SCNiLEAST64 "i"
|
||||
#define SCNoLEAST64 "o"
|
||||
#define SCNuLEAST64 "u"
|
||||
#define SCNxLEAST64 "x"
|
||||
#define SCNdFAST8 "d"
|
||||
#define SCNiFAST8 "i"
|
||||
#define SCNoFAST8 "o"
|
||||
#define SCNuFAST8 "u"
|
||||
#define SCNxFAST8 "x"
|
||||
#define SCNdFAST16 "d"
|
||||
#define SCNiFAST16 "i"
|
||||
#define SCNoFAST16 "o"
|
||||
#define SCNuFAST16 "u"
|
||||
#define SCNxFAST16 "x"
|
||||
#define SCNdFAST32 "d"
|
||||
#define SCNiFAST32 "i"
|
||||
#define SCNoFAST32 "o"
|
||||
#define SCNuFAST32 "u"
|
||||
#define SCNxFAST32 "x"
|
||||
#define SCNdFAST64 "d"
|
||||
#define SCNiFAST64 "i"
|
||||
#define SCNoFAST64 "o"
|
||||
#define SCNuFAST64 "u"
|
||||
#define SCNxFAST64 "x"
|
||||
#define SCNdPTR "d"
|
||||
#define SCNiPTR "i"
|
||||
#define SCNoPTR "o"
|
||||
#define SCNuPTR "u"
|
||||
#define SCNxPTR "x"
|
||||
#define SCNdMAX "d"
|
||||
#define SCNiMAX "i"
|
||||
#define SCNoMAX "o"
|
||||
#define SCNuMAX "u"
|
||||
#define SCNxMAX "x"
|
||||
|
||||
/* C99 stdbool.h defines */
|
||||
#define __bool_true_false_are_defined 1
|
||||
#define false 0
|
||||
#define true 1
|
||||
|
||||
/* va_arg macros and type*/
|
||||
#define va_start(_ap, _type) __builtin_va_start((_ap))
|
||||
#define va_arg(_ap, _type) __builtin_va_arg((_ap))
|
||||
#define va_end(_list)
|
||||
|
||||
/* Vectors */
|
||||
#define __m128 int
|
||||
#define __m128_u int
|
||||
#define __m128d int
|
||||
#define __m128d_u int
|
||||
#define __m128i int
|
||||
#define __m128i_u int
|
||||
#define __m256 int
|
||||
#define __m256_u int
|
||||
#define __m256d int
|
||||
#define __m256d_u int
|
||||
#define __m256i int
|
||||
#define __m256i_u int
|
||||
#define __m512 int
|
||||
#define __m512_u int
|
||||
#define __m512d int
|
||||
#define __m512d_u int
|
||||
#define __m512i int
|
||||
#define __m512i_u int
|
||||
|
||||
/* C11 stdnoreturn.h defines */
|
||||
#define __noreturn_is_defined 1
|
||||
#define noreturn _Noreturn
|
||||
|
||||
/* C11 threads.h defines */
|
||||
#define thread_local _Thread_local
|
||||
|
||||
/* C11 assert.h defines */
|
||||
#define static_assert _Static_assert
|
||||
|
||||
/* C11 stdatomic.h defines */
|
||||
#define ATOMIC_BOOL_LOCK_FREE 0
|
||||
#define ATOMIC_CHAR_LOCK_FREE 0
|
||||
#define ATOMIC_CHAR16_T_LOCK_FREE 0
|
||||
#define ATOMIC_CHAR32_T_LOCK_FREE 0
|
||||
#define ATOMIC_WCHAR_T_LOCK_FREE 0
|
||||
#define ATOMIC_SHORT_LOCK_FREE 0
|
||||
#define ATOMIC_INT_LOCK_FREE 0
|
||||
#define ATOMIC_LONG_LOCK_FREE 0
|
||||
#define ATOMIC_LLONG_LOCK_FREE 0
|
||||
#define ATOMIC_POINTER_LOCK_FREE 0
|
||||
#define ATOMIC_VAR_INIT(value) (value)
|
||||
#define ATOMIC_FLAG_INIT { 0 }
|
||||
#define kill_dependency(y) (y)
|
||||
|
||||
/* C11 stdalign.h defines */
|
||||
#define alignas _Alignas
|
||||
#define alignof _Alignof
|
||||
#define __alignas_is_defined 1
|
||||
#define __alignof_is_defined 1
|
||||
|
||||
#endif
|
||||
222
generator/fake_libc_include/_fake_typedefs.h
Normal file
222
generator/fake_libc_include/_fake_typedefs.h
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
#ifndef _FAKE_TYPEDEFS_H
|
||||
#define _FAKE_TYPEDEFS_H
|
||||
|
||||
typedef int size_t;
|
||||
typedef int __builtin_va_list;
|
||||
typedef int __gnuc_va_list;
|
||||
typedef int va_list;
|
||||
typedef int __int8_t;
|
||||
typedef int __uint8_t;
|
||||
typedef int __int16_t;
|
||||
typedef int __uint16_t;
|
||||
typedef int __int_least16_t;
|
||||
typedef int __uint_least16_t;
|
||||
typedef int __int32_t;
|
||||
typedef int __uint32_t;
|
||||
typedef int __int64_t;
|
||||
typedef int __uint64_t;
|
||||
typedef int __int_least32_t;
|
||||
typedef int __uint_least32_t;
|
||||
typedef int __s8;
|
||||
typedef int __u8;
|
||||
typedef int __s16;
|
||||
typedef int __u16;
|
||||
typedef int __s32;
|
||||
typedef int __u32;
|
||||
typedef int __s64;
|
||||
typedef int __u64;
|
||||
typedef int _LOCK_T;
|
||||
typedef int _LOCK_RECURSIVE_T;
|
||||
typedef int _off_t;
|
||||
typedef int __dev_t;
|
||||
typedef int __uid_t;
|
||||
typedef int __gid_t;
|
||||
typedef int _off64_t;
|
||||
typedef int _fpos_t;
|
||||
typedef int _ssize_t;
|
||||
typedef int wint_t;
|
||||
typedef int _mbstate_t;
|
||||
typedef int _flock_t;
|
||||
typedef int _iconv_t;
|
||||
typedef int __ULong;
|
||||
typedef int __FILE;
|
||||
typedef int ptrdiff_t;
|
||||
typedef int wchar_t;
|
||||
typedef int char16_t;
|
||||
typedef int char32_t;
|
||||
typedef int __off_t;
|
||||
typedef int __pid_t;
|
||||
typedef int __loff_t;
|
||||
typedef int u_char;
|
||||
typedef int u_short;
|
||||
typedef int u_int;
|
||||
typedef int u_long;
|
||||
typedef int ushort;
|
||||
typedef int uint;
|
||||
typedef int clock_t;
|
||||
typedef int time_t;
|
||||
typedef int daddr_t;
|
||||
typedef int caddr_t;
|
||||
typedef int ino_t;
|
||||
typedef int off_t;
|
||||
typedef int dev_t;
|
||||
typedef int uid_t;
|
||||
typedef int gid_t;
|
||||
typedef int pid_t;
|
||||
typedef int key_t;
|
||||
typedef int ssize_t;
|
||||
typedef int mode_t;
|
||||
typedef int nlink_t;
|
||||
typedef int fd_mask;
|
||||
typedef int _types_fd_set;
|
||||
typedef int clockid_t;
|
||||
typedef int timer_t;
|
||||
typedef int useconds_t;
|
||||
typedef int suseconds_t;
|
||||
typedef int FILE;
|
||||
typedef int fpos_t;
|
||||
typedef int cookie_read_function_t;
|
||||
typedef int cookie_write_function_t;
|
||||
typedef int cookie_seek_function_t;
|
||||
typedef int cookie_close_function_t;
|
||||
typedef int cookie_io_functions_t;
|
||||
typedef int div_t;
|
||||
typedef int ldiv_t;
|
||||
typedef int lldiv_t;
|
||||
typedef int sigset_t;
|
||||
typedef int __sigset_t;
|
||||
typedef int _sig_func_ptr;
|
||||
typedef int sig_atomic_t;
|
||||
typedef int __tzrule_type;
|
||||
typedef int __tzinfo_type;
|
||||
typedef int mbstate_t;
|
||||
typedef int sem_t;
|
||||
typedef int pthread_t;
|
||||
typedef int pthread_attr_t;
|
||||
typedef int pthread_mutex_t;
|
||||
typedef int pthread_mutexattr_t;
|
||||
typedef int pthread_cond_t;
|
||||
typedef int pthread_condattr_t;
|
||||
typedef int pthread_key_t;
|
||||
typedef int pthread_once_t;
|
||||
typedef int pthread_rwlock_t;
|
||||
typedef int pthread_rwlockattr_t;
|
||||
typedef int pthread_spinlock_t;
|
||||
typedef int pthread_barrier_t;
|
||||
typedef int pthread_barrierattr_t;
|
||||
typedef int jmp_buf;
|
||||
typedef int rlim_t;
|
||||
typedef int sa_family_t;
|
||||
typedef int sigjmp_buf;
|
||||
typedef int stack_t;
|
||||
typedef int siginfo_t;
|
||||
typedef int z_stream;
|
||||
|
||||
/* C99 exact-width integer types */
|
||||
typedef int int8_t;
|
||||
typedef int uint8_t;
|
||||
typedef int int16_t;
|
||||
typedef int uint16_t;
|
||||
typedef int int32_t;
|
||||
typedef int uint32_t;
|
||||
typedef int int64_t;
|
||||
typedef int uint64_t;
|
||||
|
||||
/* C99 minimum-width integer types */
|
||||
typedef int int_least8_t;
|
||||
typedef int uint_least8_t;
|
||||
typedef int int_least16_t;
|
||||
typedef int uint_least16_t;
|
||||
typedef int int_least32_t;
|
||||
typedef int uint_least32_t;
|
||||
typedef int int_least64_t;
|
||||
typedef int uint_least64_t;
|
||||
|
||||
/* C99 fastest minimum-width integer types */
|
||||
typedef int int_fast8_t;
|
||||
typedef int uint_fast8_t;
|
||||
typedef int int_fast16_t;
|
||||
typedef int uint_fast16_t;
|
||||
typedef int int_fast32_t;
|
||||
typedef int uint_fast32_t;
|
||||
typedef int int_fast64_t;
|
||||
typedef int uint_fast64_t;
|
||||
|
||||
/* C99 integer types capable of holding object pointers */
|
||||
typedef int intptr_t;
|
||||
typedef int uintptr_t;
|
||||
|
||||
/* C99 greatest-width integer types */
|
||||
typedef int intmax_t;
|
||||
typedef int uintmax_t;
|
||||
|
||||
/* C99 stdbool.h bool type. _Bool is built-in in C99 */
|
||||
typedef _Bool bool;
|
||||
|
||||
/* Mir typedefs */
|
||||
typedef void* MirEGLNativeWindowType;
|
||||
typedef void* MirEGLNativeDisplayType;
|
||||
typedef struct MirConnection MirConnection;
|
||||
typedef struct MirSurface MirSurface;
|
||||
typedef struct MirSurfaceSpec MirSurfaceSpec;
|
||||
typedef struct MirScreencast MirScreencast;
|
||||
typedef struct MirPromptSession MirPromptSession;
|
||||
typedef struct MirBufferStream MirBufferStream;
|
||||
typedef struct MirPersistentId MirPersistentId;
|
||||
typedef struct MirBlob MirBlob;
|
||||
typedef struct MirDisplayConfig MirDisplayConfig;
|
||||
|
||||
/* xcb typedefs */
|
||||
typedef struct xcb_connection_t xcb_connection_t;
|
||||
typedef uint32_t xcb_window_t;
|
||||
typedef uint32_t xcb_visualid_t;
|
||||
|
||||
/* C11 stdatomic.h types */
|
||||
typedef _Atomic(_Bool) atomic_bool;
|
||||
typedef _Atomic(char) atomic_char;
|
||||
typedef _Atomic(signed char) atomic_schar;
|
||||
typedef _Atomic(unsigned char) atomic_uchar;
|
||||
typedef _Atomic(short) atomic_short;
|
||||
typedef _Atomic(unsigned short) atomic_ushort;
|
||||
typedef _Atomic(int) atomic_int;
|
||||
typedef _Atomic(unsigned int) atomic_uint;
|
||||
typedef _Atomic(long) atomic_long;
|
||||
typedef _Atomic(unsigned long) atomic_ulong;
|
||||
typedef _Atomic(long long) atomic_llong;
|
||||
typedef _Atomic(unsigned long long) atomic_ullong;
|
||||
typedef _Atomic(uint_least16_t) atomic_char16_t;
|
||||
typedef _Atomic(uint_least32_t) atomic_char32_t;
|
||||
typedef _Atomic(wchar_t) atomic_wchar_t;
|
||||
typedef _Atomic(int_least8_t) atomic_int_least8_t;
|
||||
typedef _Atomic(uint_least8_t) atomic_uint_least8_t;
|
||||
typedef _Atomic(int_least16_t) atomic_int_least16_t;
|
||||
typedef _Atomic(uint_least16_t) atomic_uint_least16_t;
|
||||
typedef _Atomic(int_least32_t) atomic_int_least32_t;
|
||||
typedef _Atomic(uint_least32_t) atomic_uint_least32_t;
|
||||
typedef _Atomic(int_least64_t) atomic_int_least64_t;
|
||||
typedef _Atomic(uint_least64_t) atomic_uint_least64_t;
|
||||
typedef _Atomic(int_fast8_t) atomic_int_fast8_t;
|
||||
typedef _Atomic(uint_fast8_t) atomic_uint_fast8_t;
|
||||
typedef _Atomic(int_fast16_t) atomic_int_fast16_t;
|
||||
typedef _Atomic(uint_fast16_t) atomic_uint_fast16_t;
|
||||
typedef _Atomic(int_fast32_t) atomic_int_fast32_t;
|
||||
typedef _Atomic(uint_fast32_t) atomic_uint_fast32_t;
|
||||
typedef _Atomic(int_fast64_t) atomic_int_fast64_t;
|
||||
typedef _Atomic(uint_fast64_t) atomic_uint_fast64_t;
|
||||
typedef _Atomic(intptr_t) atomic_intptr_t;
|
||||
typedef _Atomic(uintptr_t) atomic_uintptr_t;
|
||||
typedef _Atomic(size_t) atomic_size_t;
|
||||
typedef _Atomic(ptrdiff_t) atomic_ptrdiff_t;
|
||||
typedef _Atomic(intmax_t) atomic_intmax_t;
|
||||
typedef _Atomic(uintmax_t) atomic_uintmax_t;
|
||||
typedef struct atomic_flag { atomic_bool _Value; } atomic_flag;
|
||||
typedef enum memory_order {
|
||||
memory_order_relaxed,
|
||||
memory_order_consume,
|
||||
memory_order_acquire,
|
||||
memory_order_release,
|
||||
memory_order_acq_rel,
|
||||
memory_order_seq_cst
|
||||
} memory_order;
|
||||
|
||||
#endif
|
||||
2
generator/fake_libc_include/_syslist.h
Normal file
2
generator/fake_libc_include/_syslist.h
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
#include "_fake_defines.h"
|
||||
#include "_fake_typedefs.h"
|
||||
2
generator/fake_libc_include/stdbool.h
Normal file
2
generator/fake_libc_include/stdbool.h
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
#include "_fake_defines.h"
|
||||
#include "_fake_typedefs.h"
|
||||
2
generator/fake_libc_include/stddef.h
Normal file
2
generator/fake_libc_include/stddef.h
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
#include "_fake_defines.h"
|
||||
#include "_fake_typedefs.h"
|
||||
2
generator/fake_libc_include/stdint.h
Normal file
2
generator/fake_libc_include/stdint.h
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
#include "_fake_defines.h"
|
||||
#include "_fake_typedefs.h"
|
||||
5
generator/gen_repo_bindings.sh
Normal file
5
generator/gen_repo_bindings.sh
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
#!/usr/bin/bash
|
||||
REPO_ROOT=$(realpath $(dirname $(dirname $0)))
|
||||
|
||||
# Generate odin bindings
|
||||
python $REPO_ROOT/generator/cli.py $REPO_ROOT/clay.h --output-dir $REPO_ROOT/bindings/odin/clay-odin --generator odin --verbose
|
||||
0
generator/generators/__init__.py
Normal file
0
generator/generators/__init__.py
Normal file
47
generator/generators/base_generator.py
Normal file
47
generator/generators/base_generator.py
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
|
||||
from parser import ExtractedSymbols, ExtractedEnum, ExtractedStruct, ExtractedFunction
|
||||
from typing import Any, Callable, DefaultDict, Literal, NotRequired, Optional, TypedDict
|
||||
from pathlib import Path
|
||||
from dataclasses import dataclass
|
||||
|
||||
SymbolType = Literal['enum', 'struct', 'function']
|
||||
|
||||
class BaseGenerator:
|
||||
def __init__(self, extracted_symbols: ExtractedSymbols):
|
||||
self.extracted_symbols = extracted_symbols
|
||||
self.output_content: dict[str, list[str]] = dict()
|
||||
|
||||
def generate(self) -> None:
|
||||
pass
|
||||
|
||||
def has_symbol(self, symbol: str) -> bool:
|
||||
return (
|
||||
symbol in self.extracted_symbols.enums or
|
||||
symbol in self.extracted_symbols.structs or
|
||||
symbol in self.extracted_symbols.functions
|
||||
)
|
||||
|
||||
def get_symbol_type(self, symbol: str) -> SymbolType:
|
||||
if symbol in self.extracted_symbols.enums:
|
||||
return 'enum'
|
||||
elif symbol in self.extracted_symbols.structs:
|
||||
return 'struct'
|
||||
elif symbol in self.extracted_symbols.functions:
|
||||
return 'function'
|
||||
raise ValueError(f'Unknown symbol: {symbol}')
|
||||
|
||||
def _write(self, file_name: str, content: str) -> None:
|
||||
if file_name not in self.output_content:
|
||||
self.output_content[file_name] = []
|
||||
self.output_content[file_name].append(content)
|
||||
|
||||
def write_outputs(self, output_dir: Path) -> None:
|
||||
for file_name, content in self.output_content.items():
|
||||
(output_dir / file_name).parent.mkdir(parents=True, exist_ok=True)
|
||||
with open(output_dir / file_name, 'w') as f:
|
||||
f.write("\n".join(content))
|
||||
|
||||
def get_outputs(self) -> dict[str, str]:
|
||||
return {file_name: "\n".join(content) for file_name, content in self.output_content.items()}
|
||||
|
||||
|
||||
164
generator/generators/odin/clay.template.odin
Normal file
164
generator/generators/odin/clay.template.odin
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
package clay
|
||||
|
||||
import "core:c"
|
||||
import "core:strings"
|
||||
|
||||
when ODIN_OS == .Windows {
|
||||
foreign import Clay "windows/clay.lib"
|
||||
} else when ODIN_OS == .Linux {
|
||||
foreign import Clay "linux/clay.a"
|
||||
} else when ODIN_OS == .Darwin {
|
||||
when ODIN_ARCH == .arm64 {
|
||||
foreign import Clay "macos-arm64/clay.a"
|
||||
} else {
|
||||
foreign import Clay "macos/clay.a"
|
||||
}
|
||||
} else when ODIN_ARCH == .wasm32 || ODIN_ARCH == .wasm64p32 {
|
||||
foreign import Clay "wasm/clay.o"
|
||||
}
|
||||
|
||||
when ODIN_OS == .Windows {
|
||||
EnumBackingType :: u32
|
||||
} else {
|
||||
EnumBackingType :: u8
|
||||
}
|
||||
|
||||
{{enums}}
|
||||
|
||||
Context :: struct {
|
||||
|
||||
}
|
||||
|
||||
ClayArray :: struct($type: typeid) {
|
||||
capacity: i32,
|
||||
length: i32,
|
||||
internalArray: [^]type,
|
||||
}
|
||||
|
||||
SizingConstraints :: struct #raw_union {
|
||||
sizeMinMax: SizingConstraintsMinMax,
|
||||
sizePercent: c.float,
|
||||
}
|
||||
|
||||
TypedConfig :: struct {
|
||||
type: ElementConfigType,
|
||||
config: rawptr,
|
||||
id: ElementId,
|
||||
}
|
||||
|
||||
{{structs}}
|
||||
|
||||
@(link_prefix = "Clay_", default_calling_convention = "c")
|
||||
foreign Clay {
|
||||
{{public_functions}}
|
||||
}
|
||||
|
||||
@(link_prefix = "Clay_", default_calling_convention = "c", private)
|
||||
foreign Clay {
|
||||
{{private_functions}}
|
||||
}
|
||||
|
||||
@(require_results, deferred_none = _CloseElement)
|
||||
UI :: proc(configs: ..TypedConfig) -> bool {
|
||||
_OpenElement()
|
||||
for config in configs {
|
||||
#partial switch (config.type) {
|
||||
case ElementConfigType.Id:
|
||||
_AttachId(config.id)
|
||||
case ElementConfigType.Layout:
|
||||
_AttachLayoutConfig(cast(^LayoutConfig)config.config)
|
||||
case:
|
||||
_AttachElementConfig(config.config, config.type)
|
||||
}
|
||||
}
|
||||
_ElementPostConfiguration()
|
||||
return true
|
||||
}
|
||||
|
||||
Layout :: proc(config: LayoutConfig) -> TypedConfig {
|
||||
return {type = ElementConfigType.Layout, config = _StoreLayoutConfig(config) }
|
||||
}
|
||||
|
||||
PaddingAll :: proc (padding: u16) -> Padding {
|
||||
return { padding, padding, padding, padding }
|
||||
}
|
||||
|
||||
Rectangle :: proc(config: RectangleElementConfig) -> TypedConfig {
|
||||
return {type = ElementConfigType.Rectangle, config = _StoreRectangleElementConfig(config)}
|
||||
}
|
||||
|
||||
Text :: proc(text: string, config: ^TextElementConfig) {
|
||||
_OpenTextElement(MakeString(text), config)
|
||||
}
|
||||
|
||||
TextConfig :: proc(config: TextElementConfig) -> ^TextElementConfig {
|
||||
return _StoreTextElementConfig(config)
|
||||
}
|
||||
|
||||
Image :: proc(config: ImageElementConfig) -> TypedConfig {
|
||||
return {type = ElementConfigType.Image, config = _StoreImageElementConfig(config)}
|
||||
}
|
||||
|
||||
Floating :: proc(config: FloatingElementConfig) -> TypedConfig {
|
||||
return {type = ElementConfigType.Floating, config = _StoreFloatingElementConfig(config)}
|
||||
}
|
||||
|
||||
Custom :: proc(config: CustomElementConfig) -> TypedConfig {
|
||||
return {type = ElementConfigType.Custom, config = _StoreCustomElementConfig(config)}
|
||||
}
|
||||
|
||||
Scroll :: proc(config: ScrollElementConfig) -> TypedConfig {
|
||||
return {type = ElementConfigType.Scroll, config = _StoreScrollElementConfig(config)}
|
||||
}
|
||||
|
||||
Border :: proc(config: BorderElementConfig) -> TypedConfig {
|
||||
return {type = ElementConfigType.Border, config = _StoreBorderElementConfig(config)}
|
||||
}
|
||||
|
||||
BorderOutside :: proc(outsideBorders: BorderData) -> TypedConfig {
|
||||
return { type = ElementConfigType.Border, config = _StoreBorderElementConfig((BorderElementConfig){left = outsideBorders, right = outsideBorders, top = outsideBorders, bottom = outsideBorders}) }
|
||||
}
|
||||
|
||||
BorderOutsideRadius :: proc(outsideBorders: BorderData, radius: f32) -> TypedConfig {
|
||||
return { type = ElementConfigType.Border, config = _StoreBorderElementConfig(
|
||||
(BorderElementConfig){left = outsideBorders, right = outsideBorders, top = outsideBorders, bottom = outsideBorders, cornerRadius = {radius, radius, radius, radius}},
|
||||
) }
|
||||
}
|
||||
|
||||
BorderAll :: proc(allBorders: BorderData) -> TypedConfig {
|
||||
return { type = ElementConfigType.Border, config = _StoreBorderElementConfig((BorderElementConfig){left = allBorders, right = allBorders, top = allBorders, bottom = allBorders, betweenChildren = allBorders}) }
|
||||
}
|
||||
|
||||
BorderAllRadius :: proc(allBorders: BorderData, radius: f32) -> TypedConfig {
|
||||
return { type = ElementConfigType.Border, config = _StoreBorderElementConfig(
|
||||
(BorderElementConfig){left = allBorders, right = allBorders, top = allBorders, bottom = allBorders, cornerRadius = {radius, radius, radius, radius}},
|
||||
) }
|
||||
}
|
||||
|
||||
CornerRadiusAll :: proc(radius: f32) -> CornerRadius {
|
||||
return CornerRadius{radius, radius, radius, radius}
|
||||
}
|
||||
|
||||
SizingFit :: proc(sizeMinMax: SizingConstraintsMinMax) -> SizingAxis {
|
||||
return SizingAxis{type = SizingType.FIT, constraints = {sizeMinMax = sizeMinMax}}
|
||||
}
|
||||
|
||||
SizingGrow :: proc(sizeMinMax: SizingConstraintsMinMax) -> SizingAxis {
|
||||
return SizingAxis{type = SizingType.GROW, constraints = {sizeMinMax = sizeMinMax}}
|
||||
}
|
||||
|
||||
SizingFixed :: proc(size: c.float) -> SizingAxis {
|
||||
return SizingAxis{type = SizingType.FIXED, constraints = {sizeMinMax = {size, size}}}
|
||||
}
|
||||
|
||||
SizingPercent :: proc(sizePercent: c.float) -> SizingAxis {
|
||||
return SizingAxis{type = SizingType.PERCENT, constraints = {sizePercent = sizePercent}}
|
||||
}
|
||||
|
||||
MakeString :: proc(label: string) -> String {
|
||||
return String{chars = raw_data(label), length = cast(c.int)len(label)}
|
||||
}
|
||||
|
||||
ID :: proc(label: string, index: u32 = 0) -> TypedConfig {
|
||||
return { type = ElementConfigType.Id, id = _HashString(MakeString(label), index, 0) }
|
||||
}
|
||||
315
generator/generators/odin_generator.py
Normal file
315
generator/generators/odin_generator.py
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
from pathlib import Path
|
||||
import logging
|
||||
|
||||
from parser import ExtractedSymbolType
|
||||
from generators.base_generator import BaseGenerator
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
def get_common_prefix(keys: list[str]) -> str:
|
||||
# find a prefix that's shared between all keys
|
||||
prefix = ""
|
||||
for i in range(min(map(len, keys))):
|
||||
if len(set(key[i] for key in keys)) > 1:
|
||||
break
|
||||
prefix += keys[0][i]
|
||||
return prefix
|
||||
|
||||
def snake_case_to_pascal_case(snake_case: str) -> str:
|
||||
return ''.join(word.lower().capitalize() for word in snake_case.split('_'))
|
||||
|
||||
|
||||
SYMBOL_NAME_OVERRIDES = {
|
||||
'Clay_TextElementConfigWrapMode': 'TextWrapMode',
|
||||
'Clay_Border': 'BorderData',
|
||||
'Clay_SizingMinMax': 'SizingConstraintsMinMax',
|
||||
}
|
||||
SYMBOL_COMPLETE_OVERRIDES = {
|
||||
'Clay_RenderCommandArray': 'ClayArray(RenderCommand)',
|
||||
'Clay_Context': 'Context',
|
||||
'Clay_ElementConfig': None,
|
||||
# 'Clay_SetQueryScrollOffsetFunction': None,
|
||||
}
|
||||
|
||||
# These enums should have output binding members that are PascalCase instead of UPPER_SNAKE_CASE.
|
||||
ENUM_MEMBER_PASCAL = {
|
||||
'Clay_RenderCommandType',
|
||||
'Clay_TextElementConfigWrapMode',
|
||||
'Clay__ElementConfigType',
|
||||
}
|
||||
ENUM_MEMBER_OVERRIDES = {
|
||||
'Clay__ElementConfigType': {
|
||||
'CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER': 'Border',
|
||||
'CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER': 'Floating',
|
||||
'CLAY__ELEMENT_CONFIG_TYPE_SCROLL_CONTAINER': 'Scroll',
|
||||
}
|
||||
}
|
||||
ENUM_ADDITIONAL_MEMBERS = {
|
||||
'Clay__ElementConfigType': {
|
||||
'Id': 65,
|
||||
'Layout': 66,
|
||||
}
|
||||
}
|
||||
|
||||
TYPE_MAPPING = {
|
||||
'*char': '[^]c.char',
|
||||
'const *char': '[^]c.char',
|
||||
'*void': 'rawptr',
|
||||
'bool': 'bool',
|
||||
'float': 'c.float',
|
||||
'uint16_t': 'u16',
|
||||
'uint32_t': 'u32',
|
||||
'int32_t': 'c.int32_t',
|
||||
'uintptr_t': 'rawptr',
|
||||
'intptr_t': 'rawptr',
|
||||
'void': 'void',
|
||||
}
|
||||
STRUCT_TYPE_OVERRIDES = {
|
||||
'Clay_Arena': {
|
||||
'nextAllocation': 'uintptr',
|
||||
'capacity': 'uintptr',
|
||||
},
|
||||
'Clay_SizingAxis': {
|
||||
'size': 'SizingConstraints',
|
||||
},
|
||||
"Clay_RenderCommand": {
|
||||
"zIndex": 'i32',
|
||||
},
|
||||
}
|
||||
STRUCT_MEMBER_OVERRIDES = {
|
||||
'Clay_ErrorHandler': {
|
||||
'errorHandlerFunction': 'handler',
|
||||
},
|
||||
'Clay_SizingAxis': {
|
||||
'size': 'constraints',
|
||||
},
|
||||
}
|
||||
STRUCT_OVERRIDE_AS_FIXED_ARRAY = {
|
||||
'Clay_Color',
|
||||
'Clay_Vector2',
|
||||
}
|
||||
|
||||
FUNCTION_PARAM_OVERRIDES = {
|
||||
'Clay_SetCurrentContext': {
|
||||
'context': 'ctx',
|
||||
},
|
||||
}
|
||||
FUNCTION_TYPE_OVERRIDES = {
|
||||
'Clay_CreateArenaWithCapacityAndMemory': {
|
||||
'offset': '[^]u8',
|
||||
},
|
||||
'Clay_SetMeasureTextFunction': {
|
||||
'userData': 'uintptr',
|
||||
},
|
||||
'Clay_RenderCommandArray_Get': {
|
||||
'index': 'i32',
|
||||
},
|
||||
"Clay__AttachElementConfig": {
|
||||
"config": 'rawptr',
|
||||
},
|
||||
}
|
||||
|
||||
class OdinGenerator(BaseGenerator):
|
||||
|
||||
def generate(self) -> None:
|
||||
self.generate_structs()
|
||||
self.generate_enums()
|
||||
self.generate_functions()
|
||||
|
||||
odin_template_path = Path(__file__).parent / 'odin' / 'clay.template.odin'
|
||||
with open(odin_template_path, 'r') as f:
|
||||
template = f.read()
|
||||
self.output_content['clay.odin'] = (
|
||||
template
|
||||
.replace('{{structs}}', '\n'.join(self.output_content['struct']))
|
||||
.replace('{{enums}}', '\n'.join(self.output_content['enum']))
|
||||
.replace('{{public_functions}}', '\n'.join(self.output_content['public_function']))
|
||||
.replace('{{private_functions}}', '\n'.join(self.output_content['private_function']))
|
||||
.splitlines()
|
||||
)
|
||||
del self.output_content['struct']
|
||||
del self.output_content['enum']
|
||||
del self.output_content['private_function']
|
||||
del self.output_content['public_function']
|
||||
|
||||
def get_symbol_name(self, symbol: str) -> str:
|
||||
if symbol in SYMBOL_NAME_OVERRIDES:
|
||||
return SYMBOL_NAME_OVERRIDES[symbol]
|
||||
symbol_type = self.get_symbol_type(symbol)
|
||||
base_name = symbol.removeprefix('Clay_')
|
||||
if symbol_type == 'enum':
|
||||
return base_name.removeprefix('_') # Clay_ and Clay__ are exported as public types.
|
||||
elif symbol_type == 'struct':
|
||||
return base_name
|
||||
elif symbol_type == 'function':
|
||||
return base_name
|
||||
raise ValueError(f'Unknown symbol: {symbol}')
|
||||
|
||||
def format_type(self, type: ExtractedSymbolType) -> str:
|
||||
if isinstance(type, str):
|
||||
return type
|
||||
|
||||
parameter_strs = []
|
||||
for param_name, param_type in type['params']:
|
||||
parameter_strs.append(f"{param_name}: {self.format_type(param_type or 'unknown')}")
|
||||
return_type_str = ''
|
||||
if type['return_type'] is not None and type['return_type'] != 'void':
|
||||
return_type_str = ' -> ' + self.format_type(type['return_type'])
|
||||
return f"proc \"c\" ({', '.join(parameter_strs)}){return_type_str}"
|
||||
|
||||
def resolve_binding_type(self, symbol: str, member: str | None, member_type: ExtractedSymbolType | None, type_overrides: dict[str, dict[str, str]]) -> str | None:
|
||||
if isinstance(member_type, str):
|
||||
if member_type in SYMBOL_COMPLETE_OVERRIDES:
|
||||
return SYMBOL_COMPLETE_OVERRIDES[member_type]
|
||||
if symbol in type_overrides and member in type_overrides[symbol]:
|
||||
return type_overrides[symbol][member]
|
||||
if member_type in TYPE_MAPPING:
|
||||
return TYPE_MAPPING[member_type]
|
||||
if member_type and self.has_symbol(member_type):
|
||||
return self.get_symbol_name(member_type)
|
||||
if member_type and member_type.startswith('*'):
|
||||
result = self.resolve_binding_type(symbol, member, member_type[1:], type_overrides)
|
||||
if result:
|
||||
return f"^{result}"
|
||||
return None
|
||||
if member_type is None:
|
||||
return None
|
||||
|
||||
resolved_parameters = []
|
||||
for param_name, param_type in member_type['params']:
|
||||
resolved_param = self.resolve_binding_type(symbol, param_name, param_type, type_overrides)
|
||||
if resolved_param is None:
|
||||
return None
|
||||
resolved_parameters.append((param_name, resolved_param))
|
||||
resolved_return_type = self.resolve_binding_type(symbol, None, member_type['return_type'], type_overrides)
|
||||
if resolved_return_type is None:
|
||||
return None
|
||||
return self.format_type({
|
||||
"params": resolved_parameters,
|
||||
"return_type": resolved_return_type,
|
||||
})
|
||||
|
||||
def generate_structs(self) -> None:
|
||||
for struct, struct_data in sorted(self.extracted_symbols.structs.items(), key=lambda x: x[0]):
|
||||
members = struct_data['attrs']
|
||||
if not struct.startswith('Clay_'):
|
||||
continue
|
||||
if struct in SYMBOL_COMPLETE_OVERRIDES:
|
||||
continue
|
||||
|
||||
binding_name = self.get_symbol_name(struct)
|
||||
if binding_name.startswith('_'):
|
||||
continue
|
||||
|
||||
if struct in STRUCT_OVERRIDE_AS_FIXED_ARRAY:
|
||||
array_size = len(members)
|
||||
first_elem = list(members.values())[0]
|
||||
array_type = None
|
||||
if 'type' in first_elem:
|
||||
array_type = first_elem['type']
|
||||
|
||||
if array_type in TYPE_MAPPING:
|
||||
array_binding_type = TYPE_MAPPING[array_type]
|
||||
elif array_type and self.has_symbol(self.format_type(array_type)):
|
||||
array_binding_type = self.get_symbol_name(self.format_type(array_type))
|
||||
else:
|
||||
self._write('struct', f"// {struct} ({array_type}) - has no mapping")
|
||||
continue
|
||||
|
||||
self._write('struct', f"// {struct} (overridden as fixed array)")
|
||||
self._write('struct', f"{binding_name} :: [{array_size}]{array_binding_type}")
|
||||
self._write('struct', "")
|
||||
continue
|
||||
|
||||
raw_union = ' #raw_union' if struct_data.get('is_union', False) else ''
|
||||
|
||||
self._write('struct', f"// {struct}")
|
||||
self._write('struct', f"{binding_name} :: struct{raw_union} {{")
|
||||
|
||||
for member, member_info in members.items():
|
||||
if struct in STRUCT_TYPE_OVERRIDES and member in STRUCT_TYPE_OVERRIDES[struct]:
|
||||
member_type = 'unknown'
|
||||
elif not 'type' in member_info:
|
||||
self._write('struct', f" // {member} (unknown type)")
|
||||
continue
|
||||
else:
|
||||
member_type = member_info['type']
|
||||
|
||||
binding_member_name = member
|
||||
if struct in STRUCT_MEMBER_OVERRIDES and member in STRUCT_MEMBER_OVERRIDES[struct]:
|
||||
binding_member_name = STRUCT_MEMBER_OVERRIDES[struct][member]
|
||||
|
||||
member_binding_type = self.resolve_binding_type(struct, member, member_type, STRUCT_TYPE_OVERRIDES)
|
||||
if member_binding_type is None:
|
||||
self._write('struct', f" // {binding_member_name} ({member_type}) - has no mapping")
|
||||
continue
|
||||
self._write('struct', f" {binding_member_name}: {member_binding_type}, // {member} ({member_type})")
|
||||
self._write('struct', "}")
|
||||
self._write('struct', '')
|
||||
|
||||
def generate_enums(self) -> None:
|
||||
for enum, members in sorted(self.extracted_symbols.enums.items(), key=lambda x: x[0]):
|
||||
if not enum.startswith('Clay_'):
|
||||
continue
|
||||
if enum in SYMBOL_COMPLETE_OVERRIDES:
|
||||
continue
|
||||
|
||||
binding_name = self.get_symbol_name(enum)
|
||||
common_member_prefix = get_common_prefix(list(members.keys()))
|
||||
self._write('enum', f"// {enum}")
|
||||
self._write('enum', f"{binding_name} :: enum EnumBackingType {{")
|
||||
for member in members:
|
||||
if enum in ENUM_MEMBER_OVERRIDES and member in ENUM_MEMBER_OVERRIDES[enum]:
|
||||
binding_member_name = ENUM_MEMBER_OVERRIDES[enum][member]
|
||||
else:
|
||||
binding_member_name = member.removeprefix(common_member_prefix)
|
||||
if enum in ENUM_MEMBER_PASCAL:
|
||||
binding_member_name = snake_case_to_pascal_case(binding_member_name)
|
||||
|
||||
if members[member] is not None:
|
||||
self._write('enum', f" {binding_member_name} = {members[member]}, // {member}")
|
||||
else:
|
||||
self._write('enum', f" {binding_member_name}, // {member}")
|
||||
|
||||
if enum in ENUM_ADDITIONAL_MEMBERS:
|
||||
self._write('enum', ' // Odin specific enum types')
|
||||
for member, value in ENUM_ADDITIONAL_MEMBERS[enum].items():
|
||||
self._write('enum', f" {member} = {value},")
|
||||
self._write('enum', "}")
|
||||
self._write('enum', '')
|
||||
|
||||
def generate_functions(self) -> None:
|
||||
for function, function_info in sorted(self.extracted_symbols.functions.items(), key=lambda x: x[0]):
|
||||
if not function.startswith('Clay_'):
|
||||
continue
|
||||
if function in SYMBOL_COMPLETE_OVERRIDES:
|
||||
continue
|
||||
is_private = function.startswith('Clay__')
|
||||
write_to = 'private_function' if is_private else 'public_function'
|
||||
|
||||
binding_name = self.get_symbol_name(function)
|
||||
|
||||
return_type = function_info['return_type']
|
||||
binding_return_type = self.resolve_binding_type(function, None, return_type, {})
|
||||
if binding_return_type is None:
|
||||
self._write(write_to, f" // {function} ({return_type}) - has no mapping")
|
||||
continue
|
||||
|
||||
skip = False
|
||||
binding_params = []
|
||||
for param_name, param_type in function_info['params']:
|
||||
binding_param_name = param_name
|
||||
if function in FUNCTION_PARAM_OVERRIDES and param_name in FUNCTION_PARAM_OVERRIDES[function]:
|
||||
binding_param_name = FUNCTION_PARAM_OVERRIDES[function][param_name]
|
||||
binding_param_type = self.resolve_binding_type(function, param_name, param_type, FUNCTION_TYPE_OVERRIDES)
|
||||
if binding_param_type is None:
|
||||
skip = True
|
||||
binding_params.append(f"{binding_param_name}: {binding_param_type}")
|
||||
if skip:
|
||||
self._write(write_to, f" // {function} - has no mapping")
|
||||
continue
|
||||
|
||||
binding_params_str = ', '.join(binding_params)
|
||||
return_str = f" -> {binding_return_type}" if binding_return_type != 'void' else ''
|
||||
self._write(write_to, f" {binding_name} :: proc({binding_params_str}){return_str} --- // {function}")
|
||||
|
||||
173
generator/parser.py
Normal file
173
generator/parser.py
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
from dataclasses import dataclass
|
||||
from typing import Optional, TypedDict, NotRequired, Union
|
||||
from pycparser import c_ast, parse_file, preprocess_file
|
||||
from pathlib import Path
|
||||
import os
|
||||
import json
|
||||
import shutil
|
||||
import logging
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
ExtractedSymbolType = Union[str, "ExtractedFunction"]
|
||||
|
||||
class ExtractedStructAttributeUnion(TypedDict):
|
||||
type: Optional[ExtractedSymbolType]
|
||||
|
||||
class ExtractedStructAttribute(TypedDict):
|
||||
type: NotRequired[ExtractedSymbolType]
|
||||
union: NotRequired[dict[str, Optional[ExtractedSymbolType]]]
|
||||
|
||||
class ExtractedStruct(TypedDict):
|
||||
attrs: dict[str, ExtractedStructAttribute]
|
||||
is_union: NotRequired[bool]
|
||||
|
||||
ExtractedEnum = dict[str, Optional[str]]
|
||||
ExtractedFunctionParam = tuple[str, Optional[ExtractedSymbolType]]
|
||||
|
||||
class ExtractedFunction(TypedDict):
|
||||
return_type: Optional["ExtractedSymbolType"]
|
||||
params: list[ExtractedFunctionParam]
|
||||
|
||||
@dataclass
|
||||
class ExtractedSymbols:
|
||||
structs: dict[str, ExtractedStruct]
|
||||
enums: dict[str, ExtractedEnum]
|
||||
functions: dict[str, ExtractedFunction]
|
||||
|
||||
def get_type_names(node: c_ast.Node, prefix: str="") -> Optional[ExtractedSymbolType]:
|
||||
if isinstance(node, c_ast.TypeDecl) and hasattr(node, 'quals') and node.quals:
|
||||
prefix = " ".join(node.quals) + " " + prefix
|
||||
if isinstance(node, c_ast.PtrDecl):
|
||||
prefix = "*" + prefix
|
||||
if isinstance(node, c_ast.FuncDecl):
|
||||
func: ExtractedFunction = {
|
||||
'return_type': get_type_names(node.type),
|
||||
'params': [],
|
||||
}
|
||||
for param in node.args.params:
|
||||
if param.name is None:
|
||||
continue
|
||||
func['params'].append((param.name, get_type_names(param)))
|
||||
return func
|
||||
|
||||
if hasattr(node, 'names'):
|
||||
return prefix + node.names[0] # type: ignore
|
||||
elif hasattr(node, 'type'):
|
||||
return get_type_names(node.type, prefix) # type: ignore
|
||||
return None
|
||||
|
||||
class Visitor(c_ast.NodeVisitor):
|
||||
def __init__(self):
|
||||
self.structs: dict[str, ExtractedStruct] = {}
|
||||
self.enums: dict[str, ExtractedEnum] = {}
|
||||
self.functions: dict[str, ExtractedFunction] = {}
|
||||
|
||||
def visit_FuncDecl(self, node: c_ast.FuncDecl):
|
||||
# node.show()
|
||||
# logger.debug(node)
|
||||
node_type = node.type
|
||||
is_pointer = False
|
||||
if isinstance(node.type, c_ast.PtrDecl):
|
||||
node_type = node.type.type
|
||||
is_pointer = True
|
||||
|
||||
if hasattr(node_type, "declname"):
|
||||
return_type = get_type_names(node_type.type)
|
||||
if return_type is not None and isinstance(return_type, str) and is_pointer:
|
||||
return_type = "*" + return_type
|
||||
func: ExtractedFunction = {
|
||||
'return_type': return_type,
|
||||
'params': [],
|
||||
}
|
||||
for param in node.args.params:
|
||||
if param.name is None:
|
||||
continue
|
||||
func['params'].append((param.name, get_type_names(param)))
|
||||
self.functions[node_type.declname] = func
|
||||
self.generic_visit(node)
|
||||
|
||||
def visit_Struct(self, node: c_ast.Struct):
|
||||
# node.show()
|
||||
if node.name and node.decls:
|
||||
struct = {}
|
||||
for decl in node.decls:
|
||||
struct[decl.name] = {
|
||||
"type": get_type_names(decl),
|
||||
}
|
||||
self.structs[node.name] = {
|
||||
'attrs': struct,
|
||||
}
|
||||
self.generic_visit(node)
|
||||
|
||||
def visit_Typedef(self, node: c_ast.Typedef):
|
||||
# node.show()
|
||||
if hasattr(node.type, 'type') and hasattr(node.type.type, 'decls') and node.type.type.decls:
|
||||
struct = {}
|
||||
for decl in node.type.type.decls:
|
||||
if hasattr(decl, 'type') and hasattr(decl.type, 'type') and isinstance(decl.type.type, c_ast.Union):
|
||||
union = {}
|
||||
for field in decl.type.type.decls:
|
||||
union[field.name] = get_type_names(field)
|
||||
struct[decl.name] = {
|
||||
'union': union
|
||||
}
|
||||
else:
|
||||
struct[decl.name] = {
|
||||
"type": get_type_names(decl),
|
||||
}
|
||||
|
||||
self.structs[node.name] = {
|
||||
'attrs': struct,
|
||||
'is_union': isinstance(node.type.type, c_ast.Union),
|
||||
}
|
||||
if hasattr(node.type, 'type') and isinstance(node.type.type, c_ast.Enum):
|
||||
enum = {}
|
||||
for enumerator in node.type.type.values.enumerators:
|
||||
if enumerator.value is None:
|
||||
enum[enumerator.name] = None
|
||||
else:
|
||||
enum[enumerator.name] = enumerator.value.value
|
||||
self.enums[node.name] = enum
|
||||
self.generic_visit(node)
|
||||
|
||||
|
||||
def parse_headers(input_files: list[Path], tmp_dir: Path) -> ExtractedSymbols:
|
||||
cpp_args = ["-nostdinc", "-D__attribute__(x)=", "-E"]
|
||||
|
||||
# Make a new clay.h that combines the provided input files, so that we can add bindings for customized structs
|
||||
with open(tmp_dir / 'merged_clay.h', 'w') as f:
|
||||
for input_file in input_files:
|
||||
with open(input_file, 'r') as f2:
|
||||
for line in f2:
|
||||
# Ignore includes, as they should be manually included in input_files.
|
||||
if line.startswith("#include"):
|
||||
continue
|
||||
|
||||
# Ignore the CLAY_IMPLEMENTATION define, because we only want to parse the public api code.
|
||||
# This is helpful so that the user can provide their implementation code, which will contain any custom extensions
|
||||
if "#define CLAY_IMPLEMENTATION" in line:
|
||||
continue
|
||||
|
||||
f.write(line)
|
||||
|
||||
# Preprocess the file
|
||||
logger.info("Preprocessing file")
|
||||
preprocessed = preprocess_file(tmp_dir / 'merged_clay.h', cpp_path="cpp", cpp_args=cpp_args) # type: ignore
|
||||
with open(tmp_dir / 'clay.preprocessed.h', 'w') as f:
|
||||
f.write(preprocessed)
|
||||
|
||||
# Parse the file
|
||||
logger.info("Parsing file")
|
||||
ast = parse_file(tmp_dir / 'clay.preprocessed.h', use_cpp=False) # type: ignore
|
||||
|
||||
# Extract symbols
|
||||
visitor = Visitor()
|
||||
visitor.visit(ast)
|
||||
|
||||
result = ExtractedSymbols(
|
||||
structs=visitor.structs,
|
||||
enums=visitor.enums,
|
||||
functions=visitor.functions
|
||||
)
|
||||
return result
|
||||
1
generator/requirements.txt
Normal file
1
generator/requirements.txt
Normal file
|
|
@ -0,0 +1 @@
|
|||
pycparser==2.22
|
||||
Loading…
Reference in a new issue