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

[Bindings/Odin] add missing bindings, fix binding, improve ergonomics of userdata, conform to stricter style flags (#270)

Browse Source 
Co-authored-by: Nic Barker <contact+github@nicbarker.com>
Co-authored-by: Courtney Strachan <courtney.strachan@gmail.com>
This commit is contained in:
Laytan 2025-02-17 21:16:31 +01:00 committed by GitHub
parent ee99e5f0f2
commit 20340f6544
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 311 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,436 +1,459 @@
package clay package clay
import "core:c" import "core:c"
import "core:strings"
when ODIN_OS == .Windows { when ODIN_OS == .Windows {
foreign import Clay "windows/clay.lib" foreign import Clay "windows/clay.lib"
} else when ODIN_OS == .Linux { } else when ODIN_OS == .Linux {
foreign import Clay "linux/clay.a" foreign import Clay "linux/clay.a"
} else when ODIN_OS == .Darwin { } else when ODIN_OS == .Darwin {
when ODIN_ARCH == .arm64 { when ODIN_ARCH == .arm64 {
foreign import Clay "macos-arm64/clay.a" foreign import Clay "macos-arm64/clay.a"
} else { } else {
foreign import Clay "macos/clay.a" foreign import Clay "macos/clay.a"
} }
} else when ODIN_ARCH == .wasm32 || ODIN_ARCH == .wasm64p32 { } else when ODIN_ARCH == .wasm32 || ODIN_ARCH == .wasm64p32 {
foreign import Clay "wasm/clay.o" foreign import Clay "wasm/clay.o"
} }
String :: struct { String :: struct {
length: c.int32_t, length: c.int32_t,
chars: [^]c.char, chars: [^]c.char,
} }
StringSlice :: struct { StringSlice :: struct {
length: c.int32_t, length: c.int32_t,
chars: [^]c.char, chars: [^]c.char,
baseChars: [^]c.char, baseChars: [^]c.char,
} }
Vector2 :: [2]c.float Vector2 :: [2]c.float
Dimensions :: struct { Dimensions :: struct {
width: c.float, width: c.float,
height: c.float, height: c.float,
} }
Arena :: struct { Arena :: struct {
nextAllocation: uintptr, nextAllocation: uintptr,
capacity: uintptr, capacity: uintptr,
memory: [^]c.char, memory: [^]c.char,
} }
BoundingBox :: struct { BoundingBox :: struct {
x: c.float, x: c.float,
y: c.float, y: c.float,
width: c.float, width: c.float,
height: c.float, height: c.float,
} }
Color :: [4]c.float Color :: [4]c.float
CornerRadius :: struct { CornerRadius :: struct {
topLeft: c.float, topLeft: c.float,
topRight: c.float, topRight: c.float,
bottomLeft: c.float, bottomLeft: c.float,
bottomRight: c.float, bottomRight: c.float,
} }
BorderData :: struct { BorderData :: struct {
width: u32, width: u32,
color: Color, color: Color,
} }
ElementId :: struct { ElementId :: struct {
id: u32, id: u32,
offset: u32, offset: u32,
baseId: u32, baseId: u32,
stringId: String, stringId: String,
} }
when ODIN_OS == .Windows { when ODIN_OS == .Windows {
EnumBackingType :: u32 EnumBackingType :: u32
} else { } else {
EnumBackingType :: u8 EnumBackingType :: u8
} }
RenderCommandType :: enum EnumBackingType { RenderCommandType :: enum EnumBackingType {
None, None,
Rectangle, Rectangle,
Border, Border,
Text, Text,
Image, Image,
ScissorStart, ScissorStart,
ScissorEnd, ScissorEnd,
Custom, Custom,
} }
RectangleElementConfig :: struct { RectangleElementConfig :: struct {
color: Color, color: Color,
} }
TextWrapMode :: enum EnumBackingType { TextWrapMode :: enum EnumBackingType {
Words, Words,
Newlines, Newlines,
None, None,
} }
TextAlignment :: enum EnumBackingType { TextAlignment :: enum EnumBackingType {
Left, Left,
Center, Center,
Right, Right,
} }
TextElementConfig :: struct { TextElementConfig :: struct {
textColor: Color, textColor: Color,
fontId: u16, fontId: u16,
fontSize: u16, fontSize: u16,
letterSpacing: u16, letterSpacing: u16,
lineHeight: u16, lineHeight: u16,
wrapMode: TextWrapMode, wrapMode: TextWrapMode,
textAlignment: TextAlignment, textAlignment: TextAlignment,
hashStringContents: bool, hashStringContents: bool,
} }
ImageElementConfig :: struct { ImageElementConfig :: struct {
imageData: rawptr, imageData: rawptr,
sourceDimensions: Dimensions, sourceDimensions: Dimensions,
} }
CustomElementConfig :: struct { CustomElementConfig :: struct {
customData: rawptr, customData: rawptr,
} }
BorderWidth :: struct { BorderWidth :: struct {
left: u16, left: u16,
right: u16, right: u16,
top: u16, top: u16,
bottom: u16, bottom: u16,
betweenChildren: u16, betweenChildren: u16,
} }
BorderElementConfig :: struct { BorderElementConfig :: struct {
color: Color, color: Color,
width: BorderWidth, width: BorderWidth,
} }
ScrollElementConfig :: struct { ScrollElementConfig :: struct {
horizontal: bool, horizontal: bool,
vertical: bool, vertical: bool,
} }
FloatingAttachPointType :: enum EnumBackingType { FloatingAttachPointType :: enum EnumBackingType {
LeftTop, LeftTop,
LeftCenter, LeftCenter,
LeftBottom, LeftBottom,
CenterTop, CenterTop,
CenterCenter, CenterCenter,
CenterBottom, CenterBottom,
RightTop, RightTop,
RightCenter, RightCenter,
RightBottom, RightBottom,
} }
FloatingAttachPoints :: struct { FloatingAttachPoints :: struct {
element: FloatingAttachPointType, element: FloatingAttachPointType,
parent: FloatingAttachPointType, parent: FloatingAttachPointType,
} }
PointerCaptureMode :: enum EnumBackingType { PointerCaptureMode :: enum EnumBackingType {
Capture, Capture,
Passthrough, Passthrough,
} }
FloatingAttachToElement :: enum EnumBackingType { FloatingAttachToElement :: enum EnumBackingType {
None, None,
Parent, Parent,
ElementWithId, ElementWithId,
Root, Root,
} }
FloatingElementConfig :: struct { FloatingElementConfig :: struct {
offset: Vector2, offset: Vector2,
expand: Dimensions, expand: Dimensions,
parentId: u32, parentId: u32,
zIndex: i32, zIndex: i32,
attachment: FloatingAttachPoints, attachment: FloatingAttachPoints,
pointerCaptureMode: PointerCaptureMode, pointerCaptureMode: PointerCaptureMode,
attachTo: FloatingAttachToElement attachTo: FloatingAttachToElement,
} }
TextRenderData :: struct { TextRenderData :: struct {
stringContents: StringSlice, stringContents: StringSlice,
textColor: Color, textColor: Color,
fontId: u16, fontId: u16,
fontSize: u16, fontSize: u16,
letterSpacing: u16, letterSpacing: u16,
lineHeight: u16, lineHeight: u16,
} }
RectangleRenderData :: struct { RectangleRenderData :: struct {
backgroundColor: Color, backgroundColor: Color,
cornerRadius: CornerRadius, cornerRadius: CornerRadius,
} }
ImageRenderData :: struct { ImageRenderData :: struct {
backgroundColor: Color, backgroundColor: Color,
cornerRadius: CornerRadius, cornerRadius: CornerRadius,
sourceDimensions: Dimensions, sourceDimensions: Dimensions,
imageData: rawptr, imageData: rawptr,
} }
CustomRenderData :: struct { CustomRenderData :: struct {
backgroundColor: Color, backgroundColor: Color,
cornerRadius: CornerRadius, cornerRadius: CornerRadius,
customData: rawptr, customData: rawptr,
} }
BorderRenderData :: struct { BorderRenderData :: struct {
color: Color, color: Color,
cornerRadius: CornerRadius, cornerRadius: CornerRadius,
width: BorderWidth, width: BorderWidth,
} }
RenderCommandData :: struct #raw_union { RenderCommandData :: struct #raw_union {
rectangle: RectangleRenderData, rectangle: RectangleRenderData,
text: TextRenderData, text: TextRenderData,
image: ImageRenderData, image: ImageRenderData,
custom: CustomRenderData, custom: CustomRenderData,
border: BorderRenderData, border: BorderRenderData,
} }
RenderCommand :: struct { RenderCommand :: struct {
boundingBox: BoundingBox, boundingBox: BoundingBox,
renderData: RenderCommandData, renderData: RenderCommandData,
userData: rawptr, userData: rawptr,
id: u32, id: u32,
zIndex: i16, zIndex: i16,
commandType: RenderCommandType, commandType: RenderCommandType,
} }
ScrollContainerData :: struct { ScrollContainerData :: struct {
// Note: This is a pointer to the real internal scroll position, mutating it may cause a change in final layout. // Note: This is a pointer to the real internal scroll position, mutating it may cause a change in final layout.
// Intended for use with external functionality that modifies scroll position, such as scroll bars or auto scrolling. // Intended for use with external functionality that modifies scroll position, such as scroll bars or auto scrolling.
scrollPosition: ^Vector2, scrollPosition: ^Vector2,
scrollContainerDimensions: Dimensions, scrollContainerDimensions: Dimensions,
contentDimensions: Dimensions, contentDimensions: Dimensions,
config: ScrollElementConfig, config: ScrollElementConfig,
// Indicates whether an actual scroll container matched the provided ID or if the default struct was returned. // Indicates whether an actual scroll container matched the provided ID or if the default struct was returned.
found: bool, found: bool,
}
ElementData :: struct {
boundingBox: BoundingBox,
found: bool,
}
PointerDataInteractionState :: enum EnumBackingType {
PressedThisFrame,
Pressed,
ReleasedThisFrame,
Released,
}
PointerData :: struct {
position: Vector2,
state: PointerDataInteractionState,
} }
SizingType :: enum EnumBackingType { SizingType :: enum EnumBackingType {
Fit, Fit,
Grow, Grow,
Percent, Percent,
Fixed, Fixed,
} }
SizingConstraintsMinMax :: struct { SizingConstraintsMinMax :: struct {
min: c.float, min: c.float,
max: c.float, max: c.float,
} }
SizingConstraints :: struct #raw_union { SizingConstraints :: struct #raw_union {
sizeMinMax: SizingConstraintsMinMax, sizeMinMax: SizingConstraintsMinMax,
sizePercent: c.float, sizePercent: c.float,
} }
SizingAxis :: struct { SizingAxis :: struct {
// Note: `min` is used for CLAY_SIZING_PERCENT, slightly different to clay.h due to lack of C anonymous unions // Note: `min` is used for CLAY_SIZING_PERCENT, slightly different to clay.h due to lack of C anonymous unions
constraints: SizingConstraints, constraints: SizingConstraints,
type: SizingType, type: SizingType,
} }
Sizing :: struct { Sizing :: struct {
width: SizingAxis, width: SizingAxis,
height: SizingAxis, height: SizingAxis,
} }
Padding :: struct { Padding :: struct {
left: u16, left: u16,
right: u16, right: u16,
top: u16, top: u16,
bottom: u16, bottom: u16,
} }
LayoutDirection :: enum EnumBackingType { LayoutDirection :: enum EnumBackingType {
LeftToRight, LeftToRight,
TopToBottom, TopToBottom,
} }
LayoutAlignmentX :: enum EnumBackingType { LayoutAlignmentX :: enum EnumBackingType {
Left, Left,
Right, Right,
Center, Center,
} }
LayoutAlignmentY :: enum EnumBackingType { LayoutAlignmentY :: enum EnumBackingType {
Top, Top,
Bottom, Bottom,
Center, Center,
} }
ChildAlignment :: struct { ChildAlignment :: struct {
x: LayoutAlignmentX, x: LayoutAlignmentX,
y: LayoutAlignmentY, y: LayoutAlignmentY,
} }
LayoutConfig :: struct { LayoutConfig :: struct {
sizing: Sizing, sizing: Sizing,
padding: Padding, padding: Padding,
childGap: u16, childGap: u16,
childAlignment: ChildAlignment, childAlignment: ChildAlignment,
layoutDirection: LayoutDirection, layoutDirection: LayoutDirection,
} }
ClayArray :: struct($type: typeid) { ClayArray :: struct($type: typeid) {
capacity: i32, capacity: i32,
length: i32, length: i32,
internalArray: [^]type, internalArray: [^]type,
} }
ElementDeclaration :: struct { ElementDeclaration :: struct {
id: ElementId, id: ElementId,
layout: LayoutConfig, layout: LayoutConfig,
backgroundColor: Color, backgroundColor: Color,
cornerRadius: CornerRadius, cornerRadius: CornerRadius,
image: ImageElementConfig, image: ImageElementConfig,
floating: FloatingElementConfig, floating: FloatingElementConfig,
custom: CustomElementConfig, custom: CustomElementConfig,
scroll: ScrollElementConfig, scroll: ScrollElementConfig,
border: BorderElementConfig, border: BorderElementConfig,
userData: rawptr userData: rawptr,
} }
ErrorType :: enum EnumBackingType { ErrorType :: enum EnumBackingType {
TextMeasurementFunctionNotProvided, TextMeasurementFunctionNotProvided,
ArenaCapacityExceeded, ArenaCapacityExceeded,
ElementsCapacityExceeded, ElementsCapacityExceeded,
TextMeasurementCapacityExceeded, TextMeasurementCapacityExceeded,
DuplicateId, DuplicateId,
FloatingContainerParentNotFound, FloatingContainerParentNotFound,
PercentageOver1, PercentageOver1,
InternalError, InternalError,
} }
ErrorData :: struct { ErrorData :: struct {
errorType: ErrorType, errorType: ErrorType,
errorText: String, errorText: String,
userData: rawptr userData: rawptr,
} }
ErrorHandler :: struct { ErrorHandler :: struct {
handler: proc "c" (errorData: ErrorData), handler: proc "c" (errorData: ErrorData),
userData: rawptr userData: rawptr,
} }
Context :: struct {} // opaque structure, only use as a pointer Context :: struct {} // opaque structure, only use as a pointer
@(link_prefix = "Clay_", default_calling_convention = "c") @(link_prefix = "Clay_", default_calling_convention = "c")
foreign Clay { foreign Clay {
MinMemorySize :: proc() -> u32 --- MinMemorySize :: proc() -> u32 ---
CreateArenaWithCapacityAndMemory :: proc(capacity: u32, offset: [^]u8) -> Arena --- CreateArenaWithCapacityAndMemory :: proc(capacity: u32, offset: [^]u8) -> Arena ---
SetPointerState :: proc(position: Vector2, pointerDown: bool) --- SetPointerState :: proc(position: Vector2, pointerDown: bool) ---
Initialize :: proc(arena: Arena, layoutDimensions: Dimensions, errorHandler: ErrorHandler) --- Initialize :: proc(arena: Arena, layoutDimensions: Dimensions, errorHandler: ErrorHandler) -> ^Context ---
UpdateScrollContainers :: proc(enableDragScrolling: bool, scrollDelta: Vector2, deltaTime: c.float) --- GetCurrentContext :: proc() -> ^Context ---
SetLayoutDimensions :: proc(dimensions: Dimensions) --- SetCurrentContext :: proc(ctx: ^Context) ---
BeginLayout :: proc() --- UpdateScrollContainers :: proc(enableDragScrolling: bool, scrollDelta: Vector2, deltaTime: c.float) ---
EndLayout :: proc() -> ClayArray(RenderCommand) --- SetLayoutDimensions :: proc(dimensions: Dimensions) ---
Hovered :: proc() -> bool --- BeginLayout :: proc() ---
PointerOver :: proc(id: ElementId) -> bool --- EndLayout :: proc() -> ClayArray(RenderCommand) ---
GetElementId :: proc(id: String) -> ElementId --- GetElementId :: proc(id: String) -> ElementId ---
GetScrollContainerData :: proc(id: ElementId) -> ScrollContainerData --- GetElementIdWithIndex :: proc(id: String, index: u32) -> ElementId ---
SetMeasureTextFunction :: proc(measureTextFunction: proc "c" (text: StringSlice, config: ^TextElementConfig, userData: uintptr) -> Dimensions, userData: uintptr) --- GetElementData :: proc(id: ElementId) -> ElementData ---
RenderCommandArray_Get :: proc(array: ^ClayArray(RenderCommand), index: i32) -> ^RenderCommand --- Hovered :: proc() -> bool ---
SetDebugModeEnabled :: proc(enabled: bool) --- OnHover :: proc(onHoverFunction: proc "c" (id: ElementId, pointerData: PointerData, userData: rawptr), userData: rawptr) ---
GetCurrentContext :: proc() -> ^Context --- PointerOver :: proc(id: ElementId) -> bool ---
SetCurrentContext :: proc(ctx: ^Context) --- GetScrollContainerData :: proc(id: ElementId) -> ScrollContainerData ---
SetMeasureTextFunction :: proc(measureTextFunction: proc "c" (text: StringSlice, config: ^TextElementConfig, userData: rawptr) -> Dimensions, userData: rawptr) ---
SetQueryScrollOffsetFunction :: proc(queryScrollOffsetFunction: proc "c" (elementId: u32, userData: rawptr) -> Vector2, userData: rawptr) ---
RenderCommandArray_Get :: proc(array: ^ClayArray(RenderCommand), index: i32) -> ^RenderCommand ---
SetDebugModeEnabled :: proc(enabled: bool) ---
IsDebugModeEnabled :: proc() -> bool ---
SetCullingEnabled :: proc(enabled: bool) ---
GetMaxElementCount :: proc() -> i32 ---
SetMaxElementCount :: proc(maxElementCount: i32) ---
GetMaxMeasureTextCacheWordCount :: proc() -> i32 ---
SetMaxMeasureTextCacheWordCount :: proc(maxMeasureTextCacheWordCount: i32) ---
ResetMeasureTextCache :: proc() ---
} }
@(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) --- _ConfigureOpenElement :: proc(config: ElementDeclaration) ---
_CloseElement :: proc() --- _CloseElement :: proc() ---
_OpenTextElement :: proc(text: String, textConfig: ^TextElementConfig) --- _HashString :: proc(key: String, offset: u32, seed: u32) -> ElementId ---
_StoreTextElementConfig :: proc(config: TextElementConfig) -> ^TextElementConfig --- _OpenTextElement :: proc(text: String, textConfig: ^TextElementConfig) ---
_HashString :: proc(toHash: String, index: u32, seed: u32) -> ElementId --- _StoreTextElementConfig :: proc(config: TextElementConfig) -> ^TextElementConfig ---
_GetOpenLayoutElementId :: proc() -> u32 --- _GetParentElementId :: proc() -> u32 ---
}
ClayOpenElement :: struct {
configure: proc (config: ElementDeclaration) -> bool
} }
ConfigureOpenElement :: proc(config: ElementDeclaration) -> bool { ConfigureOpenElement :: proc(config: ElementDeclaration) -> bool {
_ConfigureOpenElement(config) _ConfigureOpenElement(config)
return true; return true
} }
@(deferred_none = _CloseElement) @(deferred_none = _CloseElement)
UI :: proc() -> ClayOpenElement { UI :: proc() -> proc (config: ElementDeclaration) -> bool {
_OpenElement() _OpenElement()
return { configure = ConfigureOpenElement } return ConfigureOpenElement
} }
Text :: proc(text: string, config: ^TextElementConfig) { Text :: proc(text: string, config: ^TextElementConfig) {
_OpenTextElement(MakeString(text), config) _OpenTextElement(MakeString(text), config)
} }
TextConfig :: proc(config: TextElementConfig) -> ^TextElementConfig { TextConfig :: proc(config: TextElementConfig) -> ^TextElementConfig {
return _StoreTextElementConfig(config) return _StoreTextElementConfig(config)
} }
PaddingAll :: proc(allPadding: u16) -> Padding { PaddingAll :: proc(allPadding: u16) -> Padding {
return { left = allPadding, right = allPadding, top = allPadding, bottom = allPadding } return { left = allPadding, right = allPadding, top = allPadding, bottom = allPadding }
} }
CornerRadiusAll :: proc(radius: f32) -> CornerRadius { CornerRadiusAll :: proc(radius: f32) -> CornerRadius {
return CornerRadius{radius, radius, radius, radius} return CornerRadius{radius, radius, radius, radius}
} }
SizingFit :: proc(sizeMinMax: SizingConstraintsMinMax) -> SizingAxis { SizingFit :: proc(sizeMinMax: SizingConstraintsMinMax) -> SizingAxis {
return SizingAxis{type = SizingType.Fit, constraints = {sizeMinMax = sizeMinMax}} return SizingAxis{type = SizingType.Fit, constraints = {sizeMinMax = sizeMinMax}}
} }
SizingGrow :: proc(sizeMinMax: SizingConstraintsMinMax) -> SizingAxis { SizingGrow :: proc(sizeMinMax: SizingConstraintsMinMax) -> SizingAxis {
return SizingAxis{type = SizingType.Grow, constraints = {sizeMinMax = sizeMinMax}} return SizingAxis{type = SizingType.Grow, constraints = {sizeMinMax = sizeMinMax}}
} }
SizingFixed :: proc(size: c.float) -> SizingAxis { SizingFixed :: proc(size: c.float) -> SizingAxis {
return SizingAxis{type = SizingType.Fixed, constraints = {sizeMinMax = {size, size}}} return SizingAxis{type = SizingType.Fixed, constraints = {sizeMinMax = {size, size}}}
} }
SizingPercent :: proc(sizePercent: c.float) -> SizingAxis { SizingPercent :: proc(sizePercent: c.float) -> SizingAxis {
return SizingAxis{type = SizingType.Percent, constraints = {sizePercent = sizePercent}} return SizingAxis{type = SizingType.Percent, constraints = {sizePercent = sizePercent}}
} }
MakeString :: proc(label: string) -> String { 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) -> ElementId { ID :: proc(label: string, index: u32 = 0) -> ElementId {
return _HashString(MakeString(label), index, 0) return _HashString(MakeString(label), index, 0)
} }

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

@ -63,13 +63,13 @@ border2pxRed := clay.BorderElementConfig {
} }
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().configure({ if clay.UI()({
id = clay.ID("HeroBlob", index), id = clay.ID("HeroBlob", index),
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 } },
border = border2pxRed, border = border2pxRed,
cornerRadius = clay.CornerRadiusAll(10) cornerRadius = clay.CornerRadiusAll(10)
}) { }) {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("CheckImage", index), id = clay.ID("CheckImage", index),
layout = { sizing = { width = clay.SizingFixed(32) } }, layout = { sizing = { width = clay.SizingFixed(32) } },
image = { imageData = image, sourceDimensions = { 128, 128 } }, image = { imageData = image, sourceDimensions = { 128, 128 } },
@ -79,27 +79,27 @@ LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Colo
} }
LandingPageDesktop :: proc() { LandingPageDesktop :: proc() {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("LandingPage1Desktop"), id = clay.ID("LandingPage1Desktop"),
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().configure({ if clay.UI()({
id = clay.ID("LandingPage1"), id = clay.ID("LandingPage1"),
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 },
border = { COLOR_RED, { left = 2, right = 2 } }, border = { COLOR_RED, { left = 2, right = 2 } },
}) { }) {
if clay.UI().configure({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingPercent(0.55) }, layoutDirection = .TopToBottom, childGap = 8 } }) { if clay.UI()({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingPercent(0.55) }, layoutDirection = .TopToBottom, 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().configure({ layout = { sizing = { width = clay.SizingGrow({}), height = clay.SizingFixed(32) } } }) {} if clay.UI()({ 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().configure({ if clay.UI()({
id = clay.ID("HeroImageOuter"), id = clay.ID("HeroImageOuter"),
layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingPercent(0.45) }, childAlignment = { x = .Center }, childGap = 16 }, layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingPercent(0.45) }, childAlignment = { x = .Center }, childGap = 16 },
}) { }) {
@ -114,7 +114,7 @@ LandingPageDesktop :: proc() {
} }
LandingPageMobile :: proc() { LandingPageMobile :: proc() {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("LandingPage1Mobile"), id = clay.ID("LandingPage1Mobile"),
layout = { layout = {
layoutDirection = .TopToBottom, layoutDirection = .TopToBottom,
@ -124,18 +124,18 @@ LandingPageMobile :: proc() {
childGap = 32, childGap = 32,
}, },
}) { }) {
if clay.UI().configure({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingGrow({ }) }, layoutDirection = .TopToBottom, childGap = 8 } }) { if clay.UI()({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingGrow({ }) }, layoutDirection = .TopToBottom, 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().configure({ layout = { sizing = { width = clay.SizingGrow({}), height = clay.SizingFixed(32) } } }) {} if clay.UI()({ 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().configure({ if clay.UI()({
id = clay.ID("HeroImageOuter"), id = clay.ID("HeroImageOuter"),
layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow({ }) }, childAlignment = { x = .Center }, childGap = 16 }, layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow({ }) }, childAlignment = { x = .Center }, childGap = 16 },
}) { }) {
@ -150,17 +150,17 @@ 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().configure({ if clay.UI()({
id = clay.ID("HFileBoxOuter"), id = clay.ID("HFileBoxOuter"),
layout = { layoutDirection = .TopToBottom, sizing = { width = widthSizing }, childAlignment = { y = .Center }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 }, layout = { layoutDirection = .TopToBottom, sizing = { width = widthSizing }, childAlignment = { y = .Center }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 },
}) { }) {
if clay.UI().configure({ id = clay.ID("HFileIncludeOuter"), layout = { padding = { 8, 8, 4, 4 } }, backgroundColor = COLOR_RED, cornerRadius = clay.CornerRadiusAll(8) }) { if clay.UI()({ id = 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("#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().configure({ if clay.UI()({
id = clay.ID("BringYourOwnRendererOuter"), id = clay.ID("BringYourOwnRendererOuter"),
layout = { layoutDirection = .TopToBottom, sizing = { width = widthSizing }, childAlignment = { y = .Center }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 }, layout = { layoutDirection = .TopToBottom, sizing = { width = widthSizing }, childAlignment = { y = .Center }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 },
}) { }) {
@ -171,8 +171,8 @@ FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) {
} }
FeatureBlocksDesktop :: proc() { FeatureBlocksDesktop :: proc() {
if clay.UI().configure({ id = clay.ID("FeatureBlocksOuter"), layout = { sizing = { width = clay.SizingGrow({}) } } }) { if clay.UI()({ id = clay.ID("FeatureBlocksOuter"), layout = { sizing = { width = clay.SizingGrow({}) } } }) {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("FeatureBlocksInner"), id = clay.ID("FeatureBlocksInner"),
layout = { sizing = { width = clay.SizingGrow({ }) }, childAlignment = { y = .Center } }, layout = { sizing = { width = clay.SizingGrow({ }) }, childAlignment = { y = .Center } },
border = { width = { betweenChildren = 2}, color = COLOR_RED }, border = { width = { betweenChildren = 2}, color = COLOR_RED },
@ -183,7 +183,7 @@ FeatureBlocksDesktop :: proc() {
} }
FeatureBlocksMobile :: proc() { FeatureBlocksMobile :: proc() {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("FeatureBlocksInner"), id = clay.ID("FeatureBlocksInner"),
layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow({ }) } }, layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow({ }) } },
border = { width = { betweenChildren = 2}, color = COLOR_RED }, border = { width = { betweenChildren = 2}, color = COLOR_RED },
@ -193,9 +193,9 @@ FeatureBlocksMobile :: proc() {
} }
DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) { DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
if clay.UI().configure({ id = clay.ID("SyntaxPageLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) { if clay.UI()({ id = clay.ID("SyntaxPageLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
clay.Text("Declarative Syntax", clay.TextConfig(titleTextConfig)) clay.Text("Declarative Syntax", clay.TextConfig(titleTextConfig))
if clay.UI().configure({ id = clay.ID("SyntaxSpacer"), layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {} if clay.UI()({ 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}),
@ -209,8 +209,8 @@ 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().configure({ id = clay.ID("SyntaxPageRightImage"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) { if clay.UI()({ id = clay.ID("SyntaxPageRightImage"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("SyntaxPageRightImageInner"), id = clay.ID("SyntaxPageRightImageInner"),
layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } }, layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } },
image = { imageData = &syntaxImage, sourceDimensions = { 1136, 1194 } }, image = { imageData = &syntaxImage, sourceDimensions = { 1136, 1194 } },
@ -219,11 +219,11 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi
} }
DeclarativeSyntaxPageDesktop :: proc() { DeclarativeSyntaxPageDesktop :: proc() {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("SyntaxPageDesktop"), id = clay.ID("SyntaxPageDesktop"),
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().configure({ if clay.UI()({
id = clay.ID("SyntaxPage"), id = clay.ID("SyntaxPage"),
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 },
border = border2pxRed, border = border2pxRed,
@ -234,7 +234,7 @@ DeclarativeSyntaxPageDesktop :: proc() {
} }
DeclarativeSyntaxPageMobile :: proc() { DeclarativeSyntaxPageMobile :: proc() {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("SyntaxPageMobile"), id = clay.ID("SyntaxPageMobile"),
layout = { layout = {
layoutDirection = .TopToBottom, layoutDirection = .TopToBottom,
@ -255,9 +255,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().configure({ id = clay.ID("PerformanceLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) { if clay.UI()({ id = clay.ID("PerformanceLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
clay.Text("High Performance", clay.TextConfig(titleTextConfig)) clay.Text("High Performance", clay.TextConfig(titleTextConfig))
if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } }}) {} if clay.UI()({ 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}),
@ -271,20 +271,20 @@ 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().configure({ id = clay.ID("PerformanceRightImageOuter"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) { if clay.UI()({ id = clay.ID("PerformanceRightImageOuter"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("PerformanceRightBorder"), id = clay.ID("PerformanceRightBorder"),
layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(400) } }, layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(400) } },
border = { COLOR_LIGHT, {2, 2, 2, 2, 2} }, border = { COLOR_LIGHT, {2, 2, 2, 2, 2} },
}) { }) {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("AnimationDemoContainerLeft"), id = clay.ID("AnimationDemoContainerLeft"),
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) },
backgroundColor = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue), backgroundColor = 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().configure({ if clay.UI()({
id = clay.ID("AnimationDemoContainerRight"), id = clay.ID("AnimationDemoContainerRight"),
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) },
backgroundColor = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue), backgroundColor = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue),
@ -296,7 +296,7 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
} }
HighPerformancePageDesktop :: proc(lerpValue: f32) { HighPerformancePageDesktop :: proc(lerpValue: f32) {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("PerformanceDesktop"), id = clay.ID("PerformanceDesktop"),
layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { 82, 82, 32, 32 }, childGap = 64 }, layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { 82, 82, 32, 32 }, childGap = 64 },
backgroundColor = COLOR_RED, backgroundColor = COLOR_RED,
@ -306,7 +306,7 @@ HighPerformancePageDesktop :: proc(lerpValue: f32) {
} }
HighPerformancePageMobile :: proc(lerpValue: f32) { HighPerformancePageMobile :: proc(lerpValue: f32) {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("PerformanceMobile"), id = clay.ID("PerformanceMobile"),
layout = { layout = {
layoutDirection = .TopToBottom, layoutDirection = .TopToBottom,
@ -322,7 +322,7 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
} }
RendererButtonActive :: proc(index: i32, text: string) { RendererButtonActive :: proc(index: i32, text: string) {
if clay.UI().configure({ if clay.UI()({
layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) }, layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) },
backgroundColor = COLOR_RED, backgroundColor = COLOR_RED,
cornerRadius = clay.CornerRadiusAll(10) cornerRadius = clay.CornerRadiusAll(10)
@ -332,8 +332,8 @@ RendererButtonActive :: proc(index: i32, text: string) {
} }
RendererButtonInactive :: proc(index: u32, text: string) { RendererButtonInactive :: proc(index: u32, text: string) {
if clay.UI().configure({ border = border2pxRed }) { if clay.UI()({ border = border2pxRed }) {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("RendererButtonInactiveInner", index), id = clay.ID("RendererButtonInactiveInner", index),
layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) }, layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) },
backgroundColor = COLOR_LIGHT, backgroundColor = COLOR_LIGHT,
@ -345,9 +345,9 @@ RendererButtonInactive :: proc(index: u32, text: string) {
} }
RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) { RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
if clay.UI().configure({ id = clay.ID("RendererLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) { if clay.UI()({ id = clay.ID("RendererLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
clay.Text("Renderer & Platform Agnostic", clay.TextConfig(titleTextConfig)) clay.Text("Renderer & Platform Agnostic", clay.TextConfig(titleTextConfig))
if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {} if clay.UI()({ 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,22 +361,22 @@ 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().configure({ if clay.UI()({
id = clay.ID("RendererRightText"), id = clay.ID("RendererRightText"),
layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center }, layoutDirection = .TopToBottom, childGap = 16 }, 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})) clay.Text("Try changing renderer!", clay.TextConfig({fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE}))
if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 32 }) } } }) {} if clay.UI()({ layout = { sizing = { width = clay.SizingGrow({ max = 32 }) } } }) {}
RendererButtonActive(0, "Raylib Renderer") RendererButtonActive(0, "Raylib Renderer")
} }
} }
RendererPageDesktop :: proc() { RendererPageDesktop :: proc() {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("RendererPageDesktop"), id = clay.ID("RendererPageDesktop"),
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().configure({ if clay.UI()({
id = clay.ID("RendererPage"), id = clay.ID("RendererPage"),
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 },
border = { COLOR_RED, { left = 2, right = 2 } }, border = { COLOR_RED, { left = 2, right = 2 } },
@ -387,7 +387,7 @@ RendererPageDesktop :: proc() {
} }
RendererPageMobile :: proc() { RendererPageMobile :: proc() {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("RendererMobile"), id = clay.ID("RendererMobile"),
layout = { layout = {
layoutDirection = .TopToBottom, layoutDirection = .TopToBottom,
@ -414,27 +414,27 @@ 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().configure({ if clay.UI()({
id = clay.ID("OuterContainer"), id = clay.ID("OuterContainer"),
layout = { layoutDirection = .TopToBottom, sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) } }, layout = { layoutDirection = .TopToBottom, sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) } },
backgroundColor = COLOR_LIGHT, backgroundColor = COLOR_LIGHT,
}) { }) {
if clay.UI().configure({ if clay.UI()({
id = clay.ID("Header"), id = clay.ID("Header"),
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().configure({ layout = { sizing = { width = clay.SizingGrow({ }) } } }) {} if clay.UI()({ layout = { sizing = { width = clay.SizingGrow({ }) } } }) {}
if (!mobileScreen) { if (!mobileScreen) {
if clay.UI().configure({ id = clay.ID("LinkExamplesOuter"), backgroundColor = {0, 0, 0, 0} }) { if clay.UI()({ id = 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}})) clay.Text("Examples", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
} }
if clay.UI().configure({ id = clay.ID("LinkDocsOuter"), backgroundColor = {0, 0, 0, 0} }) { if clay.UI()({ id = 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}})) clay.Text("Docs", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
} }
} }
if clay.UI().configure({ if clay.UI()({
id = clay.ID("LinkGithubOuter"), id = clay.ID("LinkGithubOuter"),
layout = { padding = { 16, 16, 6, 6 } }, layout = { padding = { 16, 16, 6, 6 } },
border = border2pxRed, border = border2pxRed,
@ -444,12 +444,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}})) clay.Text("Github", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
} }
} }
if clay.UI().configure({ id = clay.ID("TopBorder1"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_5 } ) {} if clay.UI()({ id = clay.ID("TopBorder1"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_5 } ) {}
if clay.UI().configure({ id = clay.ID("TopBorder2"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_4 } ) {} if clay.UI()({ id = clay.ID("TopBorder2"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_4 } ) {}
if clay.UI().configure({ id = clay.ID("TopBorder3"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_3 } ) {} if clay.UI()({ id = clay.ID("TopBorder3"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_3 } ) {}
if clay.UI().configure({ id = clay.ID("TopBorder4"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_2 } ) {} if clay.UI()({ id = clay.ID("TopBorder4"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_2 } ) {}
if clay.UI().configure({ id = clay.ID("TopBorder5"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_1 } ) {} if clay.UI()({ id = clay.ID("TopBorder5"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_1 } ) {}
if clay.UI().configure({ if clay.UI()({
id = clay.ID("ScrollContainerBackgroundRectangle"), id = clay.ID("ScrollContainerBackgroundRectangle"),
scroll = { vertical = true }, scroll = { vertical = true },
layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, layoutDirection = clay.LayoutDirection.TopToBottom }, layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, layoutDirection = clay.LayoutDirection.TopToBottom },
@ -493,7 +493,7 @@ main :: proc() {
memory := make([^]u8, minMemorySize) memory := make([^]u8, minMemorySize)
arena: clay.Arena = clay.CreateArenaWithCapacityAndMemory(minMemorySize, memory) arena: clay.Arena = clay.CreateArenaWithCapacityAndMemory(minMemorySize, memory)
clay.Initialize(arena, {cast(f32)raylib.GetScreenWidth(), cast(f32)raylib.GetScreenHeight()}, { handler = errorHandler }) clay.Initialize(arena, {cast(f32)raylib.GetScreenWidth(), cast(f32)raylib.GetScreenHeight()}, { handler = errorHandler })
clay.SetMeasureTextFunction(measureText, 0) clay.SetMeasureTextFunction(measureText, nil)
raylib.SetConfigFlags({.VSYNC_HINT, .WINDOW_RESIZABLE, .WINDOW_HIGHDPI, .MSAA_4X_HINT}) raylib.SetConfigFlags({.VSYNC_HINT, .WINDOW_RESIZABLE, .WINDOW_HIGHDPI, .MSAA_4X_HINT})
raylib.InitWindow(windowWidth, windowHeight, "Raylib Odin Example") raylib.InitWindow(windowWidth, windowHeight, "Raylib Odin Example")

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

@ -16,7 +16,7 @@ clayColorToRaylibColor :: proc(color: clay.Color) -> raylib.Color {
raylibFonts := [10]RaylibFont{} raylibFonts := [10]RaylibFont{}
measureText :: proc "c" (text: clay.StringSlice, config: ^clay.TextElementConfig, userData: uintptr) -> clay.Dimensions { measureText :: proc "c" (text: clay.StringSlice, config: ^clay.TextElementConfig, userData: rawptr) -> clay.Dimensions {
// Measure string size for Font // Measure string size for Font
textSize: clay.Dimensions = {0, 0} textSize: clay.Dimensions = {0, 0}