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

Browse Source
This commit is contained in:
Nic Barker 2025-02-03 15:45:12 +13:00
parent afbd9c9994
commit d08b04a09d
8 changed files with 146 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -128,12 +128,17 @@ CustomElementConfig :: struct {
customData: rawptr, customData: rawptr,
} }
BorderWidth :: struct {
left: u16,
right: u16,
top: u16,
bottom: u16,
betweenChildren: u16,
}
BorderElementConfig :: struct { BorderElementConfig :: struct {
left: BorderData, color: Color,
right: BorderData, width: BorderWidth,
top: BorderData,
bottom: BorderData,
betweenChildren: BorderData,
} }
ScrollElementConfig :: struct { ScrollElementConfig :: struct {
@ -141,10 +146,6 @@ ScrollElementConfig :: struct {
vertical: bool, vertical: bool,
} }
SharedElementConfig :: struct {
cornerRadius: CornerRadius
}
FloatingAttachPointType :: enum EnumBackingType { FloatingAttachPointType :: enum EnumBackingType {
LEFT_TOP, LEFT_TOP,
LEFT_CENTER, LEFT_CENTER,
@ -170,29 +171,56 @@ PointerCaptureMode :: enum EnumBackingType {
FloatingElementConfig :: struct { FloatingElementConfig :: struct {
offset: Vector2, offset: Vector2,
expand: Dimensions, expand: Dimensions,
zIndex: u16,
parentId: u32, parentId: u32,
zIndex: i32,
attachment: FloatingAttachPoints, attachment: FloatingAttachPoints,
pointerCaptureMode: PointerCaptureMode, pointerCaptureMode: PointerCaptureMode,
} }
ElementConfigUnion :: struct #raw_union { TextRenderData :: struct {
rectangleElementConfig: ^RectangleElementConfig, stringContents: StringSlice,
textElementConfig: ^TextElementConfig, textColor: Color,
imageElementConfig: ^ImageElementConfig, fontId: u16,
customElementConfig: ^CustomElementConfig, fontSize: u16,
borderElementConfig: ^BorderElementConfig, letterSpacing: u16,
lineHeight: u16,
} }
TextOrSharedConfig :: struct #raw_union { RectangleRenderData :: struct {
text: StringSlice, backgroundColor: Color,
sharedConfig: ^SharedElementConfig cornerRadius: CornerRadius,
}
ImageRenderData :: struct {
backgroundColor: Color,
cornerRadius: CornerRadius,
sourceDimensions: Dimensions,
imageData: rawptr,
}
CustomRenderData :: struct {
backgroundColor: Color,
cornerRadius: CornerRadius,
customData: rawptr,
}
BorderRenderData :: struct {
color: Color,
cornerRadius: CornerRadius,
width: BorderWidth,
}
RenderCommandData :: struct #raw_union {
rectangle: RectangleRenderData,
text: TextRenderData,
image: ImageRenderData,
custom: CustomRenderData,
border: BorderRenderData,
} }
RenderCommand :: struct { RenderCommand :: struct {
boundingBox: BoundingBox, boundingBox: BoundingBox,
config: ElementConfigUnion, renderData: RenderCommandData,
textOrSharedConfig: TextOrSharedConfig,
zIndex: i32, zIndex: i32,
id: u32, id: u32,
commandType: RenderCommandType, commandType: RenderCommandType,
@ -283,13 +311,13 @@ ClayArray :: struct($type: typeid) {
ElementDeclaration :: struct { ElementDeclaration :: struct {
id: ElementId, id: ElementId,
layout: LayoutConfig, layout: LayoutConfig,
rectangle: RectangleElementConfig, backgroundColor: Color,
cornerRadius: CornerRadius,
image: ImageElementConfig, image: ImageElementConfig,
floating: FloatingElementConfig, floating: FloatingElementConfig,
custom: CustomElementConfig, custom: CustomElementConfig,
scroll: ScrollElementConfig, scroll: ScrollElementConfig,
border: BorderElementConfig, border: BorderElementConfig,
shared: SharedElementConfig,
} }
ErrorType :: enum { ErrorType :: enum {
@ -369,14 +397,6 @@ PaddingAll :: proc(allPadding: u16) -> Padding {
return { left = allPadding, right = allPadding, top = allPadding, bottom = allPadding } return { left = allPadding, right = allPadding, top = allPadding, bottom = allPadding }
} }
BorderOutside :: proc(outsideBorders: BorderData) -> BorderElementConfig {
return { left = outsideBorders, right = outsideBorders, top = outsideBorders, bottom = outsideBorders }
}
BorderAll :: proc(allBorders: BorderData) -> BorderElementConfig {
return { left = allBorders, right = allBorders, top = allBorders, bottom = allBorders, betweenChildren = allBorders }
}
CornerRadiusAll :: proc(radius: f32) -> CornerRadius { CornerRadiusAll :: proc(radius: f32) -> CornerRadius {
return CornerRadius{radius, radius, radius, radius} return CornerRadius{radius, radius, radius, radius}
} }

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.

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

@ -57,12 +57,17 @@ headerTextConfig := clay.TextElementConfig {
textColor = {61, 26, 5, 255}, textColor = {61, 26, 5, 255},
} }
border2pxRed := clay.BorderElementConfig {
width = { 2, 2, 2, 2, 0 },
color = COLOR_RED
}
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().configure({
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 = clay.BorderOutside({ 2, color }), border = border2pxRed,
shared = { cornerRadius = clay.CornerRadiusAll(10) } cornerRadius = clay.CornerRadiusAll(10)
}) { }) {
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("CheckImage", index), id = clay.ID("CheckImage", index),
@ -81,7 +86,7 @@ LandingPageDesktop :: proc() {
if clay.UI().configure({ if clay.UI().configure({
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 = { left = { 2, COLOR_RED }, right = { 2, COLOR_RED } }, border = { COLOR_RED, { left = 2, right = 2 } },
}) { }) {
if clay.UI().configure({ id = clay.ID("LeftText"), 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(
@ -149,7 +154,7 @@ FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) {
id = clay.ID("HFileBoxOuter"), id = clay.ID("HFileBoxOuter"),
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().configure({ id = clay.ID("HFileIncludeOuter"), layout = { padding = { 8, 8, 4, 4 } }, rectangle = { color = COLOR_RED }, shared = { cornerRadius = clay.CornerRadiusAll(8) } }) { if clay.UI().configure({ 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)
@ -170,7 +175,7 @@ FeatureBlocksDesktop :: proc() {
if clay.UI().configure({ if clay.UI().configure({
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 = { betweenChildren = { width = 2, color = COLOR_RED } }, border = border2pxRed,
}) { }) {
FeatureBlocks(clay.SizingPercent(0.5), 50) FeatureBlocks(clay.SizingPercent(0.5), 50)
} }
@ -181,7 +186,7 @@ FeatureBlocksMobile :: proc() {
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("FeatureBlocksInner"), id = clay.ID("FeatureBlocksInner"),
layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingGrow({ }) } }, layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingGrow({ }) } },
border = { betweenChildren = { width = 2, color = COLOR_RED } }, border = border2pxRed,
}) { }) {
FeatureBlocks(clay.SizingGrow({}), 16) FeatureBlocks(clay.SizingGrow({}), 16)
} }
@ -221,7 +226,7 @@ DeclarativeSyntaxPageDesktop :: proc() {
if clay.UI().configure({ if clay.UI().configure({
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 = { left = { 2, COLOR_RED }, right = { 2, COLOR_RED } }, border = border2pxRed,
}) { }) {
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))
} }
@ -270,19 +275,19 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("PerformanceRightBorder"), id = clay.ID("PerformanceRightBorder"),
layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(400) } }, layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(400) } },
border = clay.BorderAll({ width = 2, color = COLOR_LIGHT }), border = { COLOR_LIGHT, {2, 2, 2, 2, 2} },
}) { }) {
if clay.UI().configure({ if clay.UI().configure({
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) },
rectangle = { color = 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().configure({
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) },
rectangle = { color = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue) }, backgroundColor = 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,7 +299,7 @@ HighPerformancePageDesktop :: proc(lerpValue: f32) {
if clay.UI().configure({ if clay.UI().configure({
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 },
rectangle = { color = COLOR_RED }, backgroundColor = 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))
} }
@ -310,7 +315,7 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
padding = { 16, 16, 32, 32 }, padding = { 16, 16, 32, 32 },
childGap = 32, childGap = 32,
}, },
rectangle = { color = COLOR_RED }, backgroundColor = 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({}))
} }
@ -319,20 +324,20 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
RendererButtonActive :: proc(index: i32, text: string) { RendererButtonActive :: proc(index: i32, text: string) {
if clay.UI().configure({ if clay.UI().configure({
layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) }, layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) },
rectangle = { color = COLOR_RED }, backgroundColor = COLOR_RED,
shared = { cornerRadius = clay.CornerRadiusAll(10) } 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().configure({ border = clay.BorderOutside({ 2, COLOR_RED }) }) { if clay.UI().configure({ border = border2pxRed }) {
if clay.UI().configure({ if clay.UI().configure({
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) },
rectangle = { color = COLOR_LIGHT }, backgroundColor = COLOR_LIGHT,
shared = { cornerRadius = clay.CornerRadiusAll(10) } 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}))
} }
@ -374,7 +379,7 @@ RendererPageDesktop :: proc() {
if clay.UI().configure({ if clay.UI().configure({
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 = { left = { 2, COLOR_RED }, right = { 2, COLOR_RED } }, border = { COLOR_RED, { left = 2, right = 2 } },
}) { }) {
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))
} }
@ -391,7 +396,7 @@ RendererPageMobile :: proc() {
padding = { 16, 16, 32, 32 }, padding = { 16, 16, 32, 32 },
childGap = 32, childGap = 32,
}, },
rectangle = { color = COLOR_LIGHT }, backgroundColor = 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({}))
} }
@ -412,7 +417,7 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("OuterContainer"), id = clay.ID("OuterContainer"),
layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) } }, layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) } },
rectangle = { color = COLOR_LIGHT }, backgroundColor = COLOR_LIGHT,
}) { }) {
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("Header"), id = clay.ID("Header"),
@ -422,34 +427,34 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ }) } } }) {} if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ }) } } }) {}
if (!mobileScreen) { if (!mobileScreen) {
if clay.UI().configure({ id = clay.ID("LinkExamplesOuter"), rectangle = {color = {0, 0, 0, 0}} }) { if clay.UI().configure({ 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"), rectangle = {color = {0, 0, 0, 0}} }) { if clay.UI().configure({ 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().configure({
id = clay.ID("LinkGithubOuter"), id = clay.ID("LinkGithubOuter"),
layout = { padding = { 16, 16, 6, 6 } }, layout = { padding = { 16, 16, 6, 6 } },
border = clay.BorderOutside({ 2, COLOR_RED }), border = border2pxRed,
rectangle = { color = clay.PointerOver(clay.GetElementId(clay.MakeString("LinkGithubOuter"))) ? COLOR_LIGHT_HOVER : COLOR_LIGHT }, backgroundColor = clay.PointerOver(clay.GetElementId(clay.MakeString("LinkGithubOuter"))) ? COLOR_LIGHT_HOVER : COLOR_LIGHT,
shared = { cornerRadius = clay.CornerRadiusAll(10) } 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().configure({ id = clay.ID("TopBorder1"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, rectangle = { color = COLOR_TOP_BORDER_5 } }) {} if clay.UI().configure({ 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) } }, rectangle = { color = COLOR_TOP_BORDER_4 } }) {} if clay.UI().configure({ 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) } }, rectangle = { color = COLOR_TOP_BORDER_3 } }) {} if clay.UI().configure({ 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) } }, rectangle = { color = COLOR_TOP_BORDER_2 } }) {} if clay.UI().configure({ 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) } }, rectangle = { color = COLOR_TOP_BORDER_1 } }) {} if clay.UI().configure({ id = clay.ID("TopBorder5"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_1 } ) {}
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("ScrollContainerBackgroundRectangle"), id = clay.ID("ScrollContainerBackgroundRectangle"),
scroll = { vertical = true }, scroll = { vertical = true },
layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, layoutDirection = clay.LayoutDirection.TOP_TO_BOTTOM }, layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, layoutDirection = clay.LayoutDirection.TOP_TO_BOTTOM },
rectangle = { color = COLOR_LIGHT }, backgroundColor = COLOR_LIGHT,
border = { betweenChildren = { 2, COLOR_RED } } border = { COLOR_RED, { betweenChildren = 2} },
}) { }) {
if (!mobileScreen) { if (!mobileScreen) {
LandingPageDesktop() LandingPageDesktop()

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

@ -56,22 +56,24 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
case clay.RenderCommandType.None: case clay.RenderCommandType.None:
{} {}
case clay.RenderCommandType.Text: case clay.RenderCommandType.Text:
config := renderCommand.renderData.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.textOrSharedConfig.text.chars[:renderCommand.textOrSharedConfig.text.length]) text := string(config.stringContents.chars[:config.stringContents.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[config.fontId].font
raylib.DrawTextEx( raylib.DrawTextEx(
fontToUse, fontToUse,
cloned, cloned,
raylib.Vector2{boundingBox.x, boundingBox.y}, raylib.Vector2{boundingBox.x, boundingBox.y},
cast(f32)renderCommand.config.textElementConfig.fontSize, cast(f32)config.fontSize,
cast(f32)renderCommand.config.textElementConfig.letterSpacing, cast(f32)config.letterSpacing,
clayColorToRaylibColor(renderCommand.config.textElementConfig.textColor), clayColorToRaylibColor(config.textColor),
) )
case clay.RenderCommandType.Image: case clay.RenderCommandType.Image:
config := renderCommand.renderData.image
// TODO image handling // TODO image handling
imageTexture := cast(^raylib.Texture2D)renderCommand.config.imageElementConfig.imageData imageTexture := cast(^raylib.Texture2D)config.imageData
raylib.DrawTextureEx(imageTexture^, raylib.Vector2{boundingBox.x, boundingBox.y}, 0, boundingBox.width / cast(f32)imageTexture.width, raylib.WHITE) raylib.DrawTextureEx(imageTexture^, raylib.Vector2{boundingBox.x, boundingBox.y}, 0, boundingBox.width / cast(f32)imageTexture.width, clayColorToRaylibColor(config.backgroundColor))
case clay.RenderCommandType.ScissorStart: case clay.RenderCommandType.ScissorStart:
raylib.BeginScissorMode( raylib.BeginScissorMode(
cast(i32)math.round(boundingBox.x), cast(i32)math.round(boundingBox.x),
@ -82,102 +84,100 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
case clay.RenderCommandType.ScissorEnd: case clay.RenderCommandType.ScissorEnd:
raylib.EndScissorMode() raylib.EndScissorMode()
case clay.RenderCommandType.Rectangle: case clay.RenderCommandType.Rectangle:
config: ^clay.RectangleElementConfig = renderCommand.config.rectangleElementConfig config := renderCommand.renderData.rectangle
cornerRadius := renderCommand.textOrSharedConfig.sharedConfig.cornerRadius if (config.cornerRadius.topLeft > 0) {
if (cornerRadius.topLeft > 0) { radius: f32 = (config.cornerRadius.topLeft * 2) / min(boundingBox.width, boundingBox.height)
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.backgroundColor))
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.backgroundColor))
} }
case clay.RenderCommandType.Border: case clay.RenderCommandType.Border:
config := renderCommand.config.borderElementConfig config := renderCommand.renderData.border
cornerRadius := renderCommand.textOrSharedConfig.sharedConfig.cornerRadius
// Left border // Left border
if (config.left.width > 0) { if (config.width.left > 0) {
raylib.DrawRectangle( raylib.DrawRectangle(
cast(i32)math.round(boundingBox.x), cast(i32)math.round(boundingBox.x),
cast(i32)math.round(boundingBox.y + cornerRadius.topLeft), cast(i32)math.round(boundingBox.y + config.cornerRadius.topLeft),
cast(i32)config.left.width, cast(i32)config.width.left,
cast(i32)math.round(boundingBox.height - cornerRadius.topLeft - cornerRadius.bottomLeft), cast(i32)math.round(boundingBox.height - config.cornerRadius.topLeft - config.cornerRadius.bottomLeft),
clayColorToRaylibColor(config.left.color), clayColorToRaylibColor(config.color),
) )
} }
// Right border // Right border
if (config.right.width > 0) { if (config.width.right > 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.width.right),
cast(i32)math.round(boundingBox.y + cornerRadius.topRight), cast(i32)math.round(boundingBox.y + config.cornerRadius.topRight),
cast(i32)config.right.width, cast(i32)config.width.right,
cast(i32)math.round(boundingBox.height - cornerRadius.topRight - cornerRadius.bottomRight), cast(i32)math.round(boundingBox.height - config.cornerRadius.topRight - config.cornerRadius.bottomRight),
clayColorToRaylibColor(config.right.color), clayColorToRaylibColor(config.color),
) )
} }
// Top border // Top border
if (config.top.width > 0) { if (config.width.top > 0) {
raylib.DrawRectangle( raylib.DrawRectangle(
cast(i32)math.round(boundingBox.x + cornerRadius.topLeft), cast(i32)math.round(boundingBox.x + config.cornerRadius.topLeft),
cast(i32)math.round(boundingBox.y), cast(i32)math.round(boundingBox.y),
cast(i32)math.round(boundingBox.width - cornerRadius.topLeft - cornerRadius.topRight), cast(i32)math.round(boundingBox.width - config.cornerRadius.topLeft - config.cornerRadius.topRight),
cast(i32)config.top.width, cast(i32)config.width.top,
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.color),
) )
} }
// Bottom border // Bottom border
if (config.bottom.width > 0) { if (config.width.bottom > 0) {
raylib.DrawRectangle( raylib.DrawRectangle(
cast(i32)math.round(boundingBox.x + cornerRadius.bottomLeft), cast(i32)math.round(boundingBox.x + config.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.width.bottom),
cast(i32)math.round(boundingBox.width - cornerRadius.bottomLeft - cornerRadius.bottomRight), cast(i32)math.round(boundingBox.width - config.cornerRadius.bottomLeft - config.cornerRadius.bottomRight),
cast(i32)config.bottom.width, cast(i32)config.width.bottom,
clayColorToRaylibColor(config.bottom.color), clayColorToRaylibColor(config.color),
) )
} }
if (cornerRadius.topLeft > 0) { if (config.cornerRadius.topLeft > 0) {
raylib.DrawRing( raylib.DrawRing(
raylib.Vector2{math.round(boundingBox.x + cornerRadius.topLeft), math.round(boundingBox.y + cornerRadius.topLeft)}, raylib.Vector2{math.round(boundingBox.x + config.cornerRadius.topLeft), math.round(boundingBox.y + config.cornerRadius.topLeft)},
math.round(cornerRadius.topLeft - cast(f32)config.top.width), math.round(config.cornerRadius.topLeft - cast(f32)config.width.top),
cornerRadius.topLeft, config.cornerRadius.topLeft,
180, 180,
270, 270,
10, 10,
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.color),
) )
} }
if (cornerRadius.topRight > 0) { if (config.cornerRadius.topRight > 0) {
raylib.DrawRing( raylib.DrawRing(
raylib.Vector2{math.round(boundingBox.x + boundingBox.width - cornerRadius.topRight), math.round(boundingBox.y + cornerRadius.topRight)}, raylib.Vector2{math.round(boundingBox.x + boundingBox.width - config.cornerRadius.topRight), math.round(boundingBox.y + config.cornerRadius.topRight)},
math.round(cornerRadius.topRight - cast(f32)config.top.width), math.round(config.cornerRadius.topRight - cast(f32)config.width.top),
cornerRadius.topRight, config.cornerRadius.topRight,
270, 270,
360, 360,
10, 10,
clayColorToRaylibColor(config.top.color), clayColorToRaylibColor(config.color),
) )
} }
if (cornerRadius.bottomLeft > 0) { if (config.cornerRadius.bottomLeft > 0) {
raylib.DrawRing( raylib.DrawRing(
raylib.Vector2{math.round(boundingBox.x + cornerRadius.bottomLeft), math.round(boundingBox.y + boundingBox.height - cornerRadius.bottomLeft)}, raylib.Vector2{math.round(boundingBox.x + config.cornerRadius.bottomLeft), math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomLeft)},
math.round(cornerRadius.bottomLeft - cast(f32)config.top.width), math.round(config.cornerRadius.bottomLeft - cast(f32)config.width.top),
cornerRadius.bottomLeft, config.cornerRadius.bottomLeft,
90, 90,
180, 180,
10, 10,
clayColorToRaylibColor(config.bottom.color), clayColorToRaylibColor(config.color),
) )
} }
if (cornerRadius.bottomRight > 0) { if (config.cornerRadius.bottomRight > 0) {
raylib.DrawRing( raylib.DrawRing(
raylib.Vector2 { raylib.Vector2 {
math.round(boundingBox.x + boundingBox.width - cornerRadius.bottomRight), math.round(boundingBox.x + boundingBox.width - config.cornerRadius.bottomRight),
math.round(boundingBox.y + boundingBox.height - cornerRadius.bottomRight), math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomRight),
}, },
math.round(cornerRadius.bottomRight - cast(f32)config.bottom.width), math.round(config.cornerRadius.bottomRight - cast(f32)config.width.bottom),
cornerRadius.bottomRight, config.cornerRadius.bottomRight,
0.1, 0.1,
90, 90,
10, 10,
clayColorToRaylibColor(config.bottom.color), clayColorToRaylibColor(config.color),
) )
} }
case clay.RenderCommandType.Custom: case clay.RenderCommandType.Custom: