TheZone/clay
1
0
Fork 0
mirror of https://github.com/nicbarker/clay.git synced 2025-04-19 04:38:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update Odin bindings to new API

Browse Source
This commit is contained in:
Nic Barker 2025-01-31 13:41:01 +13:00
parent 577946a3be
commit bff5586eb2
10 changed files with 279 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
bindings/odin/build-clay-lib.sh
View File

@ -1,12 +1,12 @@
cp ../../clay.h clay.c; cp ../../clay.h clay.c;
# Intel Mac # Intel Mac
clang -c -DCLAY_IMPLEMENTATION -o clay.o -static -target x86_64-apple-darwin clay.c -fPIC && ar r clay-odin/macos/clay.a clay.o; clang -c -DCLAY_IMPLEMENTATION -o clay.o -ffreestanding -static -target x86_64-apple-darwin clay.c -fPIC && ar r clay-odin/macos/clay.a clay.o;
# ARM Mac # ARM Mac
clang -c -DCLAY_IMPLEMENTATION -g -o clay.o -static clay.c -fPIC && ar r clay-odin/macos-arm64/clay.a clay.o; clang -c -DCLAY_IMPLEMENTATION -g -o clay.o -static clay.c -fPIC && ar r clay-odin/macos-arm64/clay.a clay.o;
# x64 Windows # x64 Windows
clang -c -DCLAY_IMPLEMENTATION -o clay-odin/windows/clay.lib -target x86_64-pc-windows-msvc -fuse-ld=llvm-lib -static clay.c; clang -c -DCLAY_IMPLEMENTATION -o clay-odin/windows/clay.lib -ffreestanding -target x86_64-pc-windows-msvc -fuse-ld=llvm-lib -static clay.c;
# Linux # Linux
clang -c -DCLAY_IMPLEMENTATION -o clay.o -static -target x86_64-unknown-linux-gnu clay.c -fPIC && ar r clay-odin/linux/clay.a clay.o; clang -c -DCLAY_IMPLEMENTATION -o clay.o -ffreestanding -static -target x86_64-unknown-linux-gnu clay.c -fPIC && ar r clay-odin/linux/clay.a clay.o;
# WASM # WASM
clang -c -DCLAY_IMPLEMENTATION -o clay-odin/wasm/clay.o -target wasm32 -nostdlib -static clay.c; clang -c -DCLAY_IMPLEMENTATION -o clay-odin/wasm/clay.o -target wasm32 -nostdlib -static clay.c;
rm clay.o; rm clay.o;

131
bindings/odin/clay-odin/clay.odin
View File

@ -101,7 +101,6 @@ RenderCommandType :: enum EnumBackingType {
RectangleElementConfig :: struct { RectangleElementConfig :: struct {
color: Color, color: Color,
cornerRadius: CornerRadius,
} }
TextWrapMode :: enum EnumBackingType { TextWrapMode :: enum EnumBackingType {
@ -135,7 +134,6 @@ BorderElementConfig :: struct {
top: BorderData, top: BorderData,
bottom: BorderData, bottom: BorderData,
betweenChildren: BorderData, betweenChildren: BorderData,
cornerRadius: CornerRadius,
} }
ScrollElementConfig :: struct { ScrollElementConfig :: struct {
@ -143,6 +141,10 @@ ScrollElementConfig :: struct {
vertical: bool, vertical: bool,
} }
SharedElementConfig :: struct {
cornerRadius: CornerRadius
}
FloatingAttachPointType :: enum EnumBackingType { FloatingAttachPointType :: enum EnumBackingType {
LEFT_TOP, LEFT_TOP,
LEFT_CENTER, LEFT_CENTER,
@ -182,13 +184,18 @@ ElementConfigUnion :: struct #raw_union {
borderElementConfig: ^BorderElementConfig, borderElementConfig: ^BorderElementConfig,
} }
TextOrSharedConfig :: struct #raw_union {
text: StringSlice,
sharedConfig: ^SharedElementConfig
}
RenderCommand :: struct { RenderCommand :: struct {
boundingBox: BoundingBox, boundingBox: BoundingBox,
config: ElementConfigUnion, config: ElementConfigUnion,
text: StringSlice, textOrSharedConfig: TextOrSharedConfig,
zIndex: i32, zIndex: i32,
id: u32, id: u32,
commandType: RenderCommandType, commandType: RenderCommandType,
} }
ScrollContainerData :: struct { ScrollContainerData :: struct {
@ -273,10 +280,16 @@ ClayArray :: struct($type: typeid) {
internalArray: [^]type, internalArray: [^]type,
} }
TypedConfig :: struct { ElementDeclaration :: struct {
type: ElementConfigType, id: ElementId,
config: rawptr, layout: LayoutConfig,
id: ElementId, rectangle: RectangleElementConfig,
image: ImageElementConfig,
floating: FloatingElementConfig,
custom: CustomElementConfig,
scroll: ScrollElementConfig,
border: BorderElementConfig,
shared: SharedElementConfig,
} }
ErrorType :: enum { ErrorType :: enum {
@ -321,51 +334,27 @@ foreign Clay {
@(link_prefix = "Clay_", default_calling_convention = "c", private) @(link_prefix = "Clay_", default_calling_convention = "c", private)
foreign Clay { foreign Clay {
_OpenElement :: proc() --- _OpenElement :: proc() ---
_ConfigureOpenElement :: proc(config: ElementDeclaration) ---
_CloseElement :: proc() --- _CloseElement :: proc() ---
_ElementPostConfiguration :: proc() ---
_OpenTextElement :: proc(text: String, textConfig: ^TextElementConfig) --- _OpenTextElement :: proc(text: String, textConfig: ^TextElementConfig) ---
_AttachId :: proc(id: ElementId) ---
_AttachLayoutConfig :: proc(layoutConfig: ^LayoutConfig) ---
_AttachElementConfig :: proc(config: rawptr, type: ElementConfigType) ---
_StoreLayoutConfig :: proc(config: LayoutConfig) -> ^LayoutConfig ---
_StoreRectangleElementConfig :: proc(config: RectangleElementConfig) -> ^RectangleElementConfig ---
_StoreTextElementConfig :: proc(config: TextElementConfig) -> ^TextElementConfig --- _StoreTextElementConfig :: proc(config: TextElementConfig) -> ^TextElementConfig ---
_StoreImageElementConfig :: proc(config: ImageElementConfig) -> ^ImageElementConfig ---
_StoreFloatingElementConfig :: proc(config: FloatingElementConfig) -> ^FloatingElementConfig ---
_StoreCustomElementConfig :: proc(config: CustomElementConfig) -> ^CustomElementConfig ---
_StoreScrollElementConfig :: proc(config: ScrollElementConfig) -> ^ScrollElementConfig ---
_StoreBorderElementConfig :: proc(config: BorderElementConfig) -> ^BorderElementConfig ---
_HashString :: proc(toHash: String, index: u32, seed: u32) -> ElementId --- _HashString :: proc(toHash: String, index: u32, seed: u32) -> ElementId ---
_GetOpenLayoutElementId :: proc() -> u32 --- _GetOpenLayoutElementId :: proc() -> u32 ---
} }
@(require_results, deferred_none = _CloseElement) ClayOpenElement :: struct {
UI :: proc(configs: ..TypedConfig) -> bool { configure: proc (config: ElementDeclaration) -> bool
}
ConfigureOpenElement :: proc(config: ElementDeclaration) -> bool {
_ConfigureOpenElement(config)
return true;
}
@(deferred_none = _CloseElement)
UI :: proc() -> ClayOpenElement {
_OpenElement() _OpenElement()
for config in configs { return { configure = ConfigureOpenElement }
#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) { Text :: proc(text: string, config: ^TextElementConfig) {
@ -376,44 +365,16 @@ TextConfig :: proc(config: TextElementConfig) -> ^TextElementConfig {
return _StoreTextElementConfig(config) return _StoreTextElementConfig(config)
} }
Image :: proc(config: ImageElementConfig) -> TypedConfig { PaddingAll :: proc(allPadding: u16) -> Padding {
return {type = ElementConfigType.Image, config = _StoreImageElementConfig(config)} return { left = allPadding, right = allPadding, top = allPadding, bottom = allPadding }
} }
Floating :: proc(config: FloatingElementConfig) -> TypedConfig { BorderOutside :: proc(outsideBorders: BorderData) -> BorderElementConfig {
return {type = ElementConfigType.Floating, config = _StoreFloatingElementConfig(config)} return { left = outsideBorders, right = outsideBorders, top = outsideBorders, bottom = outsideBorders }
} }
Custom :: proc(config: CustomElementConfig) -> TypedConfig { BorderAll :: proc(allBorders: BorderData) -> BorderElementConfig {
return {type = ElementConfigType.Custom, config = _StoreCustomElementConfig(config)} return { left = allBorders, right = allBorders, top = allBorders, bottom = allBorders, betweenChildren = allBorders }
}
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 { CornerRadiusAll :: proc(radius: f32) -> CornerRadius {
@ -440,6 +401,6 @@ MakeString :: proc(label: string) -> String {
return String{chars = raw_data(label), length = cast(c.int)len(label)} return String{chars = raw_data(label), length = cast(c.int)len(label)}
} }
ID :: proc(label: string, index: u32 = 0) -> TypedConfig { ID :: proc(label: string, index: u32 = 0) -> ElementId {
return { type = ElementConfigType.Id, id = _HashString(MakeString(label), index, 0) } return _HashString(MakeString(label), index, 0)
} }

BIN
bindings/odin/clay-odin/linux/clay.a
View File

Binary file not shown.

BIN
bindings/odin/clay-odin/macos-arm64/clay.a
View File

Binary file not shown.

BIN
bindings/odin/clay-odin/macos/clay.a
View File

Binary file not shown.

BIN
bindings/odin/clay-odin/wasm/clay.o
View File

Binary file not shown.

BIN
bindings/odin/clay-odin/windows/clay.lib
View File

Binary file not shown.

392
bindings/odin/examples/clay-official-website/clay-official-website.odin
View File

@ -58,45 +58,46 @@ headerTextConfig := clay.TextElementConfig {
} }
LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Color, text: string, image: ^raylib.Texture2D) { LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Color, text: string, image: ^raylib.Texture2D) {
if clay.UI( if clay.UI().configure({
clay.ID("HeroBlob", index), id = clay.ID("HeroBlob", index),
clay.Layout({sizing = {width = clay.SizingGrow({max = 480})}, padding = clay.PaddingAll(16), childGap = 16, childAlignment = clay.ChildAlignment{y = .CENTER}}), layout = { sizing = { width = clay.SizingGrow({ max = 480 }) }, padding = clay.PaddingAll(16), childGap = 16, childAlignment = clay.ChildAlignment{ y = .CENTER } },
clay.BorderOutsideRadius({2, color}, 10), border = clay.BorderOutside({ 2, color }),
) { shared = { cornerRadius = clay.CornerRadiusAll(10) }
if clay.UI( }) {
clay.ID("CheckImage", index), if clay.UI().configure({
clay.Layout({sizing = {width = clay.SizingFixed(32)}}), id = clay.ID("CheckImage", index),
clay.Image({imageData = image, sourceDimensions = {128, 128}}), layout = { sizing = { width = clay.SizingFixed(32) } },
) {} image = { imageData = image, sourceDimensions = { 128, 128 } },
}) {}
clay.Text(text, clay.TextConfig({fontSize = fontSize, fontId = fontId, textColor = color})) clay.Text(text, clay.TextConfig({fontSize = fontSize, fontId = fontId, textColor = color}))
} }
} }
LandingPageDesktop :: proc() { LandingPageDesktop :: proc() {
if clay.UI( if clay.UI().configure({
clay.ID("LandingPage1Desktop"), id = clay.ID("LandingPage1Desktop"),
clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFit({min = cast(f32)windowHeight - 70})}, childAlignment = {y = .CENTER}, padding = {left = 50, right = 50}}), layout = { sizing = { width = clay.SizingGrow({ }), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, childAlignment = { y = .CENTER }, padding = { left = 50, right = 50 } },
) { }) {
if clay.UI( if clay.UI().configure({
clay.ID("LandingPage1"), id = clay.ID("LandingPage1"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = clay.PaddingAll(32), childGap = 32}), layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(32), childGap = 32 },
clay.Border({left = {2, COLOR_RED}, right = {2, COLOR_RED}}), border = { left = { 2, COLOR_RED }, right = { 2, COLOR_RED } },
) { }) {
if clay.UI(clay.ID("LeftText"), clay.Layout({sizing = {width = clay.SizingPercent(0.55)}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) { if clay.UI().configure({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingPercent(0.55) }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) {
clay.Text( clay.Text(
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.", "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}), clay.TextConfig({fontSize = 56, fontId = FONT_ID_TITLE_56, textColor = COLOR_RED}),
) )
// if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {} // if clay.UI().configure(layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {}
clay.Text( clay.Text(
"Clay is laying out this webpage right now!", "Clay is laying out this webpage right now!",
clay.TextConfig({fontSize = 36, fontId = FONT_ID_TITLE_36, textColor = COLOR_ORANGE}), clay.TextConfig({fontSize = 36, fontId = FONT_ID_TITLE_36, textColor = COLOR_ORANGE}),
) )
} }
if clay.UI( if clay.UI().configure({
clay.ID("HeroImageOuter"), id = clay.ID("HeroImageOuter"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingPercent(0.45)}, childAlignment = {x = .CENTER}, childGap = 16}), layout = { layoutDirection = .TOP_TO_BOTTOM, 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) LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, "High performance", &checkImage5)
LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, "Flexbox-style responsive layout", &checkImage4) LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, "Flexbox-style responsive layout", &checkImage4)
LandingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, "Declarative syntax", &checkImage3) LandingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, "Declarative syntax", &checkImage3)
@ -108,33 +109,31 @@ LandingPageDesktop :: proc() {
} }
LandingPageMobile :: proc() { LandingPageMobile :: proc() {
if clay.UI( if clay.UI().configure({
clay.ID("LandingPage1Mobile"), id = clay.ID("LandingPage1Mobile"),
clay.Layout( layout = {
{ layoutDirection = .TOP_TO_BOTTOM,
layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingGrow({ }), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) },
sizing = {width = clay.SizingGrow({}), height = clay.SizingFit({min = cast(f32)windowHeight - 70})}, childAlignment = { x = .CENTER, y = .CENTER },
childAlignment = {x = .CENTER, y = .CENTER}, padding = { 16, 16, 32, 32 },
padding = {16, 16, 32, 32}, childGap = 32,
childGap = 32, },
}, }) {
), if clay.UI().configure({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingGrow({ }) }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) {
) {
if clay.UI(clay.ID("LeftText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
clay.Text( clay.Text(
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.", "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}), clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}),
) )
if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {} if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({}), height = clay.SizingFixed(32) } } }) {}
clay.Text( clay.Text(
"Clay is laying out this webpage right now!", "Clay is laying out this webpage right now!",
clay.TextConfig({fontSize = 32, fontId = FONT_ID_TITLE_32, textColor = COLOR_ORANGE}), clay.TextConfig({fontSize = 32, fontId = FONT_ID_TITLE_32, textColor = COLOR_ORANGE}),
) )
} }
if clay.UI( if clay.UI().configure({
clay.ID("HeroImageOuter"), id = clay.ID("HeroImageOuter"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingGrow({})}, childAlignment = {x = .CENTER}, childGap = 16}), layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingGrow({ }) }, childAlignment = { x = .CENTER }, childGap = 16 },
) { }) {
LandingPageBlob(1, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_5, "High performance", &checkImage5) LandingPageBlob(1, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_5, "High performance", &checkImage5)
LandingPageBlob(2, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_4, "Flexbox-style responsive layout", &checkImage4) LandingPageBlob(2, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_4, "Flexbox-style responsive layout", &checkImage4)
LandingPageBlob(3, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_3, "Declarative syntax", &checkImage3) LandingPageBlob(3, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_3, "Declarative syntax", &checkImage3)
@ -146,20 +145,20 @@ LandingPageMobile :: proc() {
FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) { FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) {
textConfig := clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_RED}) textConfig := clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_RED})
if clay.UI( if clay.UI().configure({
clay.ID("HFileBoxOuter"), id = clay.ID("HFileBoxOuter"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = widthSizing}, childAlignment = {y = .CENTER}, padding = {outerPadding, outerPadding, 32, 32}, childGap = 8}), layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = widthSizing }, childAlignment = { y = .CENTER }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 },
) { }) {
if clay.UI(clay.ID("HFileIncludeOuter"), clay.Layout({padding = {8, 8, 4, 4}}), clay.Rectangle({color = COLOR_RED, cornerRadius = clay.CornerRadiusAll(8)})) { if clay.UI().configure({ id = clay.ID("HFileIncludeOuter"), layout = { padding = { 8, 8, 4, 4 } }, rectangle = { color = COLOR_RED }, shared = { cornerRadius = clay.CornerRadiusAll(8) } }) {
clay.Text("#include clay.h", clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_LIGHT})) 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("~2000 lines of C99.", textConfig)
clay.Text("Zero dependencies, including no C standard library.", textConfig) clay.Text("Zero dependencies, including no C standard library.", textConfig)
} }
if clay.UI( if clay.UI().configure({
clay.ID("BringYourOwnRendererOuter"), id = clay.ID("BringYourOwnRendererOuter"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = widthSizing}, childAlignment = {y = .CENTER}, padding = {outerPadding, outerPadding, 32, 32}, childGap = 8}), layout = { layoutDirection = .TOP_TO_BOTTOM, 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})) clay.Text("Renderer agnostic.", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = COLOR_ORANGE}))
clay.Text("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", textConfig) clay.Text("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", textConfig)
clay.Text("Flexible output for easy compositing in your custom engine or environment.", textConfig) clay.Text("Flexible output for easy compositing in your custom engine or environment.", textConfig)
@ -167,31 +166,31 @@ FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) {
} }
FeatureBlocksDesktop :: proc() { FeatureBlocksDesktop :: proc() {
if clay.UI(clay.ID("FeatureBlocksOuter"), clay.Layout({sizing = {width = clay.SizingGrow({})}})) { if clay.UI().configure({ id = clay.ID("FeatureBlocksOuter"), layout = { sizing = { width = clay.SizingGrow({}) } } }) {
if clay.UI( if clay.UI().configure({
clay.ID("FeatureBlocksInner"), id = clay.ID("FeatureBlocksInner"),
clay.Layout({sizing = {width = clay.SizingGrow({})}, childAlignment = {y = .CENTER}}), layout = { sizing = { width = clay.SizingGrow({ }) }, childAlignment = { y = .CENTER } },
clay.Border({betweenChildren = {width = 2, color = COLOR_RED}}), border = { betweenChildren = { width = 2, color = COLOR_RED } },
) { }) {
FeatureBlocks(clay.SizingPercent(0.5), 50) FeatureBlocks(clay.SizingPercent(0.5), 50)
} }
} }
} }
FeatureBlocksMobile :: proc() { FeatureBlocksMobile :: proc() {
if clay.UI( if clay.UI().configure({
clay.ID("FeatureBlocksInner"), id = clay.ID("FeatureBlocksInner"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingGrow({})}}), layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingGrow({ }) } },
clay.Border({betweenChildren = {width = 2, color = COLOR_RED}}), border = { betweenChildren = { width = 2, color = COLOR_RED } },
) { }) {
FeatureBlocks(clay.SizingGrow({}), 16) FeatureBlocks(clay.SizingGrow({}), 16)
} }
} }
DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) { DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
if clay.UI(clay.ID("SyntaxPageLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) { if clay.UI().configure({ id = clay.ID("SyntaxPageLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) {
clay.Text("Declarative Syntax", clay.TextConfig(titleTextConfig)) clay.Text("Declarative Syntax", clay.TextConfig(titleTextConfig))
if clay.UI(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {} if clay.UI().configure({ id = clay.ID("SyntaxSpacer"), layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {}
clay.Text( clay.Text(
"Flexible and readable declarative syntax with nested UI element hierarchies.", "Flexible and readable declarative syntax with nested UI element hierarchies.",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}), clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
@ -205,43 +204,41 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}), clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
) )
} }
if clay.UI(clay.ID("SyntaxPageRightImage"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) { if clay.UI().configure({ id = clay.ID("SyntaxPageRightImage"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .CENTER } } }) {
if clay.UI( if clay.UI().configure({
clay.ID("SyntaxPageRightImageInner"), id = clay.ID("SyntaxPageRightImageInner"),
clay.Layout({sizing = {width = clay.SizingGrow({max = 568})}}), layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } },
clay.Image({imageData = &syntaxImage, sourceDimensions = {1136, 1194}}), image = { imageData = &syntaxImage, sourceDimensions = { 1136, 1194 } },
) {} }) {}
} }
} }
DeclarativeSyntaxPageDesktop :: proc() { DeclarativeSyntaxPageDesktop :: proc() {
if clay.UI( if clay.UI().configure({
clay.ID("SyntaxPageDesktop"), id = clay.ID("SyntaxPageDesktop"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {left = 50, right = 50}}), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .CENTER }, padding = { left = 50, right = 50 } },
) { }) {
if clay.UI( if clay.UI().configure({
clay.ID("SyntaxPage"), id = clay.ID("SyntaxPage"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = clay.PaddingAll(32), childGap = 32}), layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(32), childGap = 32 },
clay.Border({left = {2, COLOR_RED}, right = {2, COLOR_RED}}), border = { left = { 2, COLOR_RED }, right = { 2, COLOR_RED } },
) { }) {
DeclarativeSyntaxPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5)) DeclarativeSyntaxPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5))
} }
} }
} }
DeclarativeSyntaxPageMobile :: proc() { DeclarativeSyntaxPageMobile :: proc() {
if clay.UI( if clay.UI().configure({
clay.ID("SyntaxPageMobile"), id = clay.ID("SyntaxPageMobile"),
clay.Layout( layout = {
{ layoutDirection = .TOP_TO_BOTTOM,
layoutDirection = .TOP_TO_BOTTOM, sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) },
sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = { x = .CENTER, y = .CENTER },
childAlignment = {x = .CENTER, y = .CENTER}, padding = { 16, 16, 32, 32 },
padding = {16, 16, 32, 32}, childGap = 16,
childGap = 16, },
}, }) {
),
) {
DeclarativeSyntaxPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({})) DeclarativeSyntaxPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({}))
} }
} }
@ -253,9 +250,9 @@ 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." 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) { HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
if clay.UI(clay.ID("PerformanceLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) { if clay.UI().configure({ id = clay.ID("PerformanceLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) {
clay.Text("High Performance", clay.TextConfig(titleTextConfig)) clay.Text("High Performance", clay.TextConfig(titleTextConfig))
if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {} if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } }}) {}
clay.Text( clay.Text(
"Fast enough to recompute your entire UI every frame.", "Fast enough to recompute your entire UI every frame.",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}), clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
@ -269,24 +266,24 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}), clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
) )
} }
if clay.UI(clay.ID("PerformanceRightImageOuter"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) { if clay.UI().configure({ id = clay.ID("PerformanceRightImageOuter"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .CENTER } } }) {
if clay.UI( if clay.UI().configure({
clay.ID("PerformanceRightBorder"), id = clay.ID("PerformanceRightBorder"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(400)}}), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(400) } },
clay.BorderAll({width = 2, color = COLOR_LIGHT}), border = clay.BorderAll({ width = 2, color = COLOR_LIGHT }),
) { }) {
if clay.UI( if clay.UI().configure({
clay.ID("AnimationDemoContainerLeft"), id = clay.ID("AnimationDemoContainerLeft"),
clay.Layout({sizing = {clay.SizingPercent(0.35 + 0.3 * lerpValue), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = clay.PaddingAll(16)}), layout = { sizing = { clay.SizingPercent(0.35 + 0.3 * lerpValue), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(16) },
clay.Rectangle({color = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue)}), rectangle = { color = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue) },
) { }) {
clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT})) clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
} }
if clay.UI( if clay.UI().configure({
clay.ID("AnimationDemoContainerRight"), id = clay.ID("AnimationDemoContainerRight"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = clay.PaddingAll(16)}), layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(16) },
clay.Rectangle({color = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue)}), rectangle = { color = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue) },
) { }) {
clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT})) clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
} }
} }
@ -294,60 +291,58 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
} }
HighPerformancePageDesktop :: proc(lerpValue: f32) { HighPerformancePageDesktop :: proc(lerpValue: f32) {
if clay.UI( if clay.UI().configure({
clay.ID("PerformanceDesktop"), id = clay.ID("PerformanceDesktop"),
clay.Layout( layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .CENTER }, padding = { 82, 82, 32, 32 }, childGap = 64 },
{sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {82, 82, 32, 32}, childGap = 64}, rectangle = { color = COLOR_RED },
), }) {
clay.Rectangle({color = COLOR_RED}),
) {
HighPerformancePage(lerpValue, {fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}, clay.SizingPercent(0.5)) HighPerformancePage(lerpValue, {fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}, clay.SizingPercent(0.5))
} }
} }
HighPerformancePageMobile :: proc(lerpValue: f32) { HighPerformancePageMobile :: proc(lerpValue: f32) {
if clay.UI( if clay.UI().configure({
clay.ID("PerformanceMobile"), id = clay.ID("PerformanceMobile"),
clay.Layout( layout = {
{ layoutDirection = .TOP_TO_BOTTOM,
layoutDirection = .TOP_TO_BOTTOM, sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) },
sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = { x = .CENTER, y = .CENTER },
childAlignment = {x = .CENTER, y = .CENTER}, padding = { 16, 16, 32, 32 },
padding = { 16, 16, 32, 32}, childGap = 32,
childGap = 32, },
}, rectangle = { color = COLOR_RED },
), }) {
clay.Rectangle({color = COLOR_RED}),
) {
HighPerformancePage(lerpValue, {fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_LIGHT}, clay.SizingGrow({})) HighPerformancePage(lerpValue, {fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_LIGHT}, clay.SizingGrow({}))
} }
} }
RendererButtonActive :: proc(index: i32, text: string) { RendererButtonActive :: proc(index: i32, text: string) {
if clay.UI( if clay.UI().configure({
clay.Layout({sizing = {width = clay.SizingFixed(300)}, padding = clay.PaddingAll(16)}), layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) },
clay.Rectangle({color = COLOR_RED, cornerRadius = clay.CornerRadiusAll(10)}), rectangle = { color = COLOR_RED },
) { shared = { cornerRadius = clay.CornerRadiusAll(10) }
}) {
clay.Text(text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT})) clay.Text(text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT}))
} }
} }
RendererButtonInactive :: proc(index: u32, text: string) { RendererButtonInactive :: proc(index: u32, text: string) {
if clay.UI(clay.Layout({}), clay.BorderOutsideRadius({2, COLOR_RED}, 10)) { if clay.UI().configure({ border = clay.BorderOutside({ 2, COLOR_RED }) }) {
if clay.UI( if clay.UI().configure({
clay.ID("RendererButtonInactiveInner", index), id = clay.ID("RendererButtonInactiveInner", index),
clay.Layout({sizing = {width = clay.SizingFixed(300)}, padding = clay.PaddingAll(16)}), layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) },
clay.Rectangle({color = COLOR_LIGHT, cornerRadius = clay.CornerRadiusAll(10)}), rectangle = { color = COLOR_LIGHT },
) { shared = { cornerRadius = clay.CornerRadiusAll(10) }
}) {
clay.Text(text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED})) clay.Text(text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}))
} }
} }
} }
RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) { RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
if clay.UI(clay.ID("RendererLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) { if clay.UI().configure({ id = clay.ID("RendererLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) {
clay.Text("Renderer & Platform Agnostic", clay.TextConfig(titleTextConfig)) clay.Text("Renderer & Platform Agnostic", clay.TextConfig(titleTextConfig))
if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {} if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {}
clay.Text( clay.Text(
"Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.", "Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}), clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}),
@ -361,45 +356,43 @@ RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}), clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}),
) )
} }
if clay.UI( if clay.UI().configure({
clay.ID("RendererRightText"), id = clay.ID("RendererRightText"),
clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}, layoutDirection = .TOP_TO_BOTTOM, childGap = 16}), layout = { sizing = { width = widthSizing }, childAlignment = { x = .CENTER }, layoutDirection = .TOP_TO_BOTTOM, childGap = 16 },
) { }) {
clay.Text("Try changing renderer!", clay.TextConfig({fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE})) clay.Text("Try changing renderer!", clay.TextConfig({fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE}))
if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({max = 32})}})) {} if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 32 }) } } }) {}
RendererButtonActive(0, "Raylib Renderer") RendererButtonActive(0, "Raylib Renderer")
} }
} }
RendererPageDesktop :: proc() { RendererPageDesktop :: proc() {
if clay.UI( if clay.UI().configure({
clay.ID("RendererPageDesktop"), id = clay.ID("RendererPageDesktop"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {left = 50, right = 50}}), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .CENTER }, padding = { left = 50, right = 50 } },
) { }) {
if clay.UI( if clay.UI().configure({
clay.ID("RendererPage"), id = clay.ID("RendererPage"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = clay.PaddingAll(32), childGap = 32}), layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(32), childGap = 32 },
clay.Border({left = {2, COLOR_RED}, right = {2, COLOR_RED}}), border = { left = { 2, COLOR_RED }, right = { 2, COLOR_RED } },
) { }) {
RendererPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5)) RendererPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5))
} }
} }
} }
RendererPageMobile :: proc() { RendererPageMobile :: proc() {
if clay.UI( if clay.UI().configure({
clay.ID("RendererMobile"), id = clay.ID("RendererMobile"),
clay.Layout( layout = {
{ layoutDirection = .TOP_TO_BOTTOM,
layoutDirection = .TOP_TO_BOTTOM, sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) },
sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = { x = .CENTER, y = .CENTER },
childAlignment = {x = .CENTER, y = .CENTER}, padding = { 16, 16, 32, 32 },
padding = {16, 16, 32, 32}, childGap = 32,
childGap = 32, },
}, rectangle = { color = COLOR_LIGHT },
), }) {
clay.Rectangle({color = COLOR_LIGHT}),
) {
RendererPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({})) RendererPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({}))
} }
} }
@ -416,47 +409,48 @@ animationLerpValue: f32 = -1.0
createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) { createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
mobileScreen := windowWidth < 750 mobileScreen := windowWidth < 750
clay.BeginLayout() clay.BeginLayout()
if clay.UI( if clay.UI().configure({
clay.ID("OuterContainer"), id = clay.ID("OuterContainer"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {clay.SizingGrow({}), clay.SizingGrow({})}}), layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) } },
clay.Rectangle({color = COLOR_LIGHT}), rectangle = { color = COLOR_LIGHT },
) { }) {
if clay.UI( if clay.UI().configure({
clay.ID("Header"), id = clay.ID("Header"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(50)}, childAlignment = {y = .CENTER}, childGap = 24, padding = {left = 32, right = 32}}), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(50) }, childAlignment = { y = .CENTER }, childGap = 24, padding = { left = 32, right = 32 } },
) { }) {
clay.Text("Clay", &headerTextConfig) clay.Text("Clay", &headerTextConfig)
if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({})}})) {} if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ }) } } }) {}
if (!mobileScreen) { if (!mobileScreen) {
if clay.UI(clay.ID("LinkExamplesOuter"), clay.Layout({}), clay.Rectangle({color = {0, 0, 0, 0}})) { if clay.UI().configure({ id = clay.ID("LinkExamplesOuter"), rectangle = {color = {0, 0, 0, 0}} }) {
clay.Text("Examples", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}})) clay.Text("Examples", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
} }
if clay.UI(clay.ID("LinkDocsOuter"), clay.Layout({}), clay.Rectangle({color = {0, 0, 0, 0}})) { if clay.UI().configure({ id = clay.ID("LinkDocsOuter"), rectangle = {color = {0, 0, 0, 0}} }) {
clay.Text("Docs", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}})) clay.Text("Docs", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
} }
} }
if clay.UI( if clay.UI().configure({
clay.ID("LinkGithubOuter"), id = clay.ID("LinkGithubOuter"),
clay.Layout({padding = {16, 16, 6, 6}}), layout = { padding = { 16, 16, 6, 6 } },
clay.BorderOutsideRadius({2, COLOR_RED}, 10), border = clay.BorderOutside({ 2, COLOR_RED }),
clay.Rectangle({cornerRadius = clay.CornerRadiusAll(10), color = clay.PointerOver(clay.GetElementId(clay.MakeString("LinkGithubOuter"))) ? COLOR_LIGHT_HOVER : COLOR_LIGHT}) rectangle = { color = clay.PointerOver(clay.GetElementId(clay.MakeString("LinkGithubOuter"))) ? COLOR_LIGHT_HOVER : COLOR_LIGHT },
) { shared = { cornerRadius = clay.CornerRadiusAll(10) }
}) {
clay.Text("Github", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}})) clay.Text("Github", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
} }
} }
if clay.UI(clay.ID("TopBorder1"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_5})) {} if clay.UI().configure({ id = clay.ID("TopBorder1"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, rectangle = { color = COLOR_TOP_BORDER_5 } }) {}
if clay.UI(clay.ID("TopBorder2"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_4})) {} if clay.UI().configure({ id = clay.ID("TopBorder2"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, rectangle = { color = COLOR_TOP_BORDER_4 } }) {}
if clay.UI(clay.ID("TopBorder3"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_3})) {} if clay.UI().configure({ id = clay.ID("TopBorder3"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, rectangle = { color = COLOR_TOP_BORDER_3 } }) {}
if clay.UI(clay.ID("TopBorder4"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_2})) {} if clay.UI().configure({ id = clay.ID("TopBorder4"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, rectangle = { color = COLOR_TOP_BORDER_2 } }) {}
if clay.UI(clay.ID("TopBorder5"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_1})) {} if clay.UI().configure({ id = clay.ID("TopBorder5"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, rectangle = { color = COLOR_TOP_BORDER_1 } }) {}
if clay.UI( if clay.UI().configure({
clay.ID("ScrollContainerBackgroundRectangle"), id = clay.ID("ScrollContainerBackgroundRectangle"),
clay.Scroll({vertical = true}), scroll = { vertical = true },
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, layoutDirection = clay.LayoutDirection.TOP_TO_BOTTOM}), layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, layoutDirection = clay.LayoutDirection.TOP_TO_BOTTOM },
clay.Rectangle({color = COLOR_LIGHT}), rectangle = { color = COLOR_LIGHT },
clay.Border({betweenChildren = {2, COLOR_RED}}) border = { betweenChildren = { 2, COLOR_RED } }
) { }) {
if (!mobileScreen) { if (!mobileScreen) {
LandingPageDesktop() LandingPageDesktop()
FeatureBlocksDesktop() FeatureBlocksDesktop()

58
bindings/odin/examples/clay-official-website/clay_renderer_raylib.odin
View File

@ -57,7 +57,7 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
{} {}
case clay.RenderCommandType.Text: case clay.RenderCommandType.Text:
// Raylib uses standard C strings so isn't compatible with cheap slices, we need to clone the string to append null terminator // Raylib uses standard C strings so isn't compatible with cheap slices, we need to clone the string to append null terminator
text := string(renderCommand.text.chars[:renderCommand.text.length]) text := string(renderCommand.textOrSharedConfig.text.chars[:renderCommand.textOrSharedConfig.text.length])
cloned := strings.clone_to_cstring(text, allocator) cloned := strings.clone_to_cstring(text, allocator)
fontToUse: raylib.Font = raylibFonts[renderCommand.config.textElementConfig.fontId].font fontToUse: raylib.Font = raylibFonts[renderCommand.config.textElementConfig.fontId].font
raylib.DrawTextEx( raylib.DrawTextEx(
@ -83,21 +83,23 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
raylib.EndScissorMode() raylib.EndScissorMode()
case clay.RenderCommandType.Rectangle: case clay.RenderCommandType.Rectangle:
config: ^clay.RectangleElementConfig = renderCommand.config.rectangleElementConfig config: ^clay.RectangleElementConfig = renderCommand.config.rectangleElementConfig
if (config.cornerRadius.topLeft > 0) { cornerRadius := renderCommand.textOrSharedConfig.sharedConfig.cornerRadius
radius: f32 = (config.cornerRadius.topLeft * 2) / min(boundingBox.width, boundingBox.height) if (cornerRadius.topLeft > 0) {
radius: f32 = (cornerRadius.topLeft * 2) / min(boundingBox.width, boundingBox.height)
raylib.DrawRectangleRounded(raylib.Rectangle{boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height}, radius, 8, clayColorToRaylibColor(config.color)) raylib.DrawRectangleRounded(raylib.Rectangle{boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height}, radius, 8, clayColorToRaylibColor(config.color))
} else { } else {
raylib.DrawRectangle(cast(i32)boundingBox.x, cast(i32)boundingBox.y, cast(i32)boundingBox.width, cast(i32)boundingBox.height, clayColorToRaylibColor(config.color)) raylib.DrawRectangle(cast(i32)boundingBox.x, cast(i32)boundingBox.y, cast(i32)boundingBox.width, cast(i32)boundingBox.height, clayColorToRaylibColor(config.color))
} }
case clay.RenderCommandType.Border: case clay.RenderCommandType.Border:
config := renderCommand.config.borderElementConfig config := renderCommand.config.borderElementConfig
cornerRadius := renderCommand.textOrSharedConfig.sharedConfig.cornerRadius
// Left border // Left border
if (config.left.width > 0) { if (config.left.width > 0) {
raylib.DrawRectangle( raylib.DrawRectangle(
cast(i32)math.round(boundingBox.x), cast(i32)math.round(boundingBox.x),
cast(i32)math.round(boundingBox.y + config.cornerRadius.topLeft), cast(i32)math.round(boundingBox.y + cornerRadius.topLeft),
cast(i32)config.left.width, cast(i32)config.left.width,
cast(i32)math.round(boundingBox.height - config.cornerRadius.topLeft - config.cornerRadius.bottomLeft), cast(i32)math.round(boundingBox.height - cornerRadius.topLeft - cornerRadius.bottomLeft),
clayColorToRaylibColor(config.left.color), clayColorToRaylibColor(config.left.color),
) )
} }
@ -105,18 +107,18 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
if (config.right.width > 0) { if (config.right.width > 0) {
raylib.DrawRectangle( raylib.DrawRectangle(
cast(i32)math.round(boundingBox.x + boundingBox.width - cast(f32)config.right.width), cast(i32)math.round(boundingBox.x + boundingBox.width - cast(f32)config.right.width),
cast(i32)math.round(boundingBox.y + config.cornerRadius.topRight), cast(i32)math.round(boundingBox.y + cornerRadius.topRight),
cast(i32)config.right.width, cast(i32)config.right.width,
cast(i32)math.round(boundingBox.height - config.cornerRadius.topRight - config.cornerRadius.bottomRight), cast(i32)math.round(boundingBox.height - cornerRadius.topRight - cornerRadius.bottomRight),
clayColorToRaylibColor(config.right.color), clayColorToRaylibColor(config.right.color),
) )
} }
// Top border // Top border
if (config.top.width > 0) { if (config.top.width > 0) {
raylib.DrawRectangle( raylib.DrawRectangle(
cast(i32)math.round(boundingBox.x + config.cornerRadius.topLeft), cast(i32)math.round(boundingBox.x + cornerRadius.topLeft),
cast(i32)math.round(boundingBox.y), cast(i32)math.round(boundingBox.y),
cast(i32)math.round(boundingBox.width - config.cornerRadius.topLeft - config.cornerRadius.topRight), cast(i32)math.round(boundingBox.width - cornerRadius.topLeft - cornerRadius.topRight),
cast(i32)config.top.width, cast(i32)config.top.width,
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.top.color),
) )
@ -124,54 +126,54 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
// Bottom border // Bottom border
if (config.bottom.width > 0) { if (config.bottom.width > 0) {
raylib.DrawRectangle( raylib.DrawRectangle(
cast(i32)math.round(boundingBox.x + config.cornerRadius.bottomLeft), cast(i32)math.round(boundingBox.x + cornerRadius.bottomLeft),
cast(i32)math.round(boundingBox.y + boundingBox.height - cast(f32)config.bottom.width), cast(i32)math.round(boundingBox.y + boundingBox.height - cast(f32)config.bottom.width),
cast(i32)math.round(boundingBox.width - config.cornerRadius.bottomLeft - config.cornerRadius.bottomRight), cast(i32)math.round(boundingBox.width - cornerRadius.bottomLeft - cornerRadius.bottomRight),
cast(i32)config.bottom.width, cast(i32)config.bottom.width,
clayColorToRaylibColor(config.bottom.color), clayColorToRaylibColor(config.bottom.color),
) )
} }
if (config.cornerRadius.topLeft > 0) { if (cornerRadius.topLeft > 0) {
raylib.DrawRing( raylib.DrawRing(
raylib.Vector2{math.round(boundingBox.x + config.cornerRadius.topLeft), math.round(boundingBox.y + config.cornerRadius.topLeft)}, raylib.Vector2{math.round(boundingBox.x + cornerRadius.topLeft), math.round(boundingBox.y + cornerRadius.topLeft)},
math.round(config.cornerRadius.topLeft - cast(f32)config.top.width), math.round(cornerRadius.topLeft - cast(f32)config.top.width),
config.cornerRadius.topLeft, cornerRadius.topLeft,
180, 180,
270, 270,
10, 10,
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.top.color),
) )
} }
if (config.cornerRadius.topRight > 0) { if (cornerRadius.topRight > 0) {
raylib.DrawRing( raylib.DrawRing(
raylib.Vector2{math.round(boundingBox.x + boundingBox.width - config.cornerRadius.topRight), math.round(boundingBox.y + config.cornerRadius.topRight)}, raylib.Vector2{math.round(boundingBox.x + boundingBox.width - cornerRadius.topRight), math.round(boundingBox.y + cornerRadius.topRight)},
math.round(config.cornerRadius.topRight - cast(f32)config.top.width), math.round(cornerRadius.topRight - cast(f32)config.top.width),
config.cornerRadius.topRight, cornerRadius.topRight,
270, 270,
360, 360,
10, 10,
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.top.color),
) )
} }
if (config.cornerRadius.bottomLeft > 0) { if (cornerRadius.bottomLeft > 0) {
raylib.DrawRing( raylib.DrawRing(
raylib.Vector2{math.round(boundingBox.x + config.cornerRadius.bottomLeft), math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomLeft)}, raylib.Vector2{math.round(boundingBox.x + cornerRadius.bottomLeft), math.round(boundingBox.y + boundingBox.height - cornerRadius.bottomLeft)},
math.round(config.cornerRadius.bottomLeft - cast(f32)config.top.width), math.round(cornerRadius.bottomLeft - cast(f32)config.top.width),
config.cornerRadius.bottomLeft, cornerRadius.bottomLeft,
90, 90,
180, 180,
10, 10,
clayColorToRaylibColor(config.bottom.color), clayColorToRaylibColor(config.bottom.color),
) )
} }
if (config.cornerRadius.bottomRight > 0) { if (cornerRadius.bottomRight > 0) {
raylib.DrawRing( raylib.DrawRing(
raylib.Vector2 { raylib.Vector2 {
math.round(boundingBox.x + boundingBox.width - config.cornerRadius.bottomRight), math.round(boundingBox.x + boundingBox.width - cornerRadius.bottomRight),
math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomRight), math.round(boundingBox.y + boundingBox.height - cornerRadius.bottomRight),
}, },
math.round(config.cornerRadius.bottomRight - cast(f32)config.bottom.width), math.round(cornerRadius.bottomRight - cast(f32)config.bottom.width),
config.cornerRadius.bottomRight, cornerRadius.bottomRight,
0.1, 0.1,
90, 90,
10, 10,

16
clay.h
View File

@ -13,8 +13,6 @@
#include <stdint.h> #include <stdint.h>
#include <stdbool.h> #include <stdbool.h>
#include <stddef.h> #include <stddef.h>
#include <stdlib.h>
#include <string.h>
// SIMD includes on supported platforms // SIMD includes on supported platforms
#ifdef __x86_64__ #ifdef __x86_64__
@ -2582,7 +2580,8 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
CLAY({ CLAY({
.id = CLAY_IDI("Clay__DebugView_CollapseElement", currentElement->id), .id = 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} }, .layout = { .sizing = {CLAY_SIZING_FIXED(16), CLAY_SIZING_FIXED(16)}, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER} },
.border = CLAY_BORDER_OUTSIDE({ 1, CLAY__DEBUGVIEW_COLOR_3 }) .border = CLAY_BORDER_OUTSIDE({ 1, CLAY__DEBUGVIEW_COLOR_3 }),
.shared = { .cornerRadius = CLAY_CORNER_RADIUS(4) }
}) { }) {
CLAY_TEXT((currentElementData && currentElementData->debugData->collapsed) ? CLAY_STRING("+") : CLAY_STRING("-"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 })); CLAY_TEXT((currentElementData && currentElementData->debugData->collapsed) ? CLAY_STRING("+") : CLAY_STRING("-"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
} }
@ -2722,9 +2721,7 @@ void Clay__RenderDebugViewColor(Clay_Color color, Clay_TextElementConfig *textCo
CLAY_TEXT(Clay__IntToString(color.a), textConfig); CLAY_TEXT(Clay__IntToString(color.a), textConfig);
CLAY_TEXT(CLAY_STRING(" }"), textConfig); CLAY_TEXT(CLAY_STRING(" }"), textConfig);
CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(10), CLAY__DEFAULT_STRUCT } } }) {} CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(10), CLAY__DEFAULT_STRUCT } } }) {}
CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }, .border = CLAY_BORDER_OUTSIDE({ 1, CLAY__DEBUGVIEW_COLOR_4 }) }) { CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }, .border = CLAY_BORDER_OUTSIDE({ 1, CLAY__DEBUGVIEW_COLOR_4 }), .rectangle = { .color = color }, .shared = { .cornerRadius = CLAY_CORNER_RADIUS(4) } }) {}
CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }, .rectangle = { .color = color }, .shared = { .cornerRadius = CLAY_CORNER_RADIUS(4) } }) {}
}
} }
} }
@ -2809,9 +2806,10 @@ void Clay__RenderDebugView(void) {
CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0) } } }) {} CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0) } } }) {}
// Close button // Close button
CLAY({ CLAY({
.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} }, .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} },
.rectangle = { .color = {217,91,67,80} }, .rectangle = { .color = {217,91,67,80} },
.border = CLAY_BORDER_OUTSIDE({ 1, (CLAY__INIT(Clay_Color){217,91,67,255}) }), .border = CLAY_BORDER_OUTSIDE({ 1, (CLAY__INIT(Clay_Color){217,91,67,255}) }),
.shared = { .cornerRadius = CLAY_CORNER_RADIUS(4) }
}) { }) {
Clay_OnHover(HandleDebugViewCloseButtonInteraction, 0); Clay_OnHover(HandleDebugViewCloseButtonInteraction, 0);
CLAY_TEXT(CLAY_STRING("x"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 })); CLAY_TEXT(CLAY_STRING("x"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
@ -2999,7 +2997,7 @@ void Clay__RenderDebugView(void) {
} }
// Image Preview // Image Preview
CLAY_TEXT(CLAY_STRING("Preview"), infoTitleConfig); CLAY_TEXT(CLAY_STRING("Preview"), infoTitleConfig);
CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0, imageConfig->sourceDimensions.width) }}, .image = { imageConfig } }) {} CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0, imageConfig->sourceDimensions.width) }}, .image = *imageConfig }) {}
} }
break; break;
} }