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

[Core] Add error for incorrect percentage values, update Odin bindings enum formatting

Browse Source
This commit is contained in:
Nic Barker 2025-02-07 10:39:55 +13:00
parent 0a9122e78d
commit ddc20bc8f6
8 changed files with 68 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,19 +75,6 @@ when ODIN_OS == .Windows {
EnumBackingType :: u8 EnumBackingType :: u8
} }
ElementConfigType :: enum EnumBackingType {
Rectangle = 1,
Border = 2,
Floating = 4,
Scroll = 8,
Image = 16,
Text = 32,
Custom = 64,
// Odin specific enum types
Id = 65,
Layout = 66,
}
RenderCommandType :: enum EnumBackingType { RenderCommandType :: enum EnumBackingType {
None, None,
Rectangle, Rectangle,
@ -247,10 +234,10 @@ ScrollContainerData :: struct {
} }
SizingType :: enum EnumBackingType { SizingType :: enum EnumBackingType {
FIT, Fit,
GROW, Grow,
PERCENT, Percent,
FIXED, Fixed,
} }
SizingConstraintsMinMax :: struct { SizingConstraintsMinMax :: struct {
@ -282,20 +269,20 @@ Padding :: struct {
} }
LayoutDirection :: enum EnumBackingType { LayoutDirection :: enum EnumBackingType {
LEFT_TO_RIGHT, LeftToRight,
TOP_TO_BOTTOM, 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 {
@ -331,13 +318,14 @@ ElementDeclaration :: struct {
} }
ErrorType :: enum { ErrorType :: enum {
TEXT_MEASUREMENT_FUNCTION_NOT_PROVIDED, TextMeasurementFunctionNotProvided,
ARENA_CAPACITY_EXCEEDED, ArenaCapacityExceeded,
ELEMENTS_CAPACITY_EXCEEDED, ElementsCapacityExceeded,
TEXT_MEASUREMENT_CAPACITY_EXCEEDED, TextMeasurementCapacityExceeded,
DUPLICATE_ID, DuplicateId,
FLOATING_CONTAINER_PARENT_NOT_FOUND, FloatingContainerParentNotFound,
INTERNAL_ERROR, PercentageOver1,
InternalError,
} }
ErrorData :: struct { ErrorData :: struct {
@ -412,19 +400,19 @@ CornerRadiusAll :: proc(radius: f32) -> CornerRadius {
} }
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 {

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.

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

@ -65,7 +65,7 @@ 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().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 = border2pxRed, border = border2pxRed,
cornerRadius = clay.CornerRadiusAll(10) cornerRadius = clay.CornerRadiusAll(10)
}) { }) {
@ -81,14 +81,14 @@ LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Colo
LandingPageDesktop :: proc() { LandingPageDesktop :: proc() {
if clay.UI().configure({ if clay.UI().configure({
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().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 = { 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 = .TOP_TO_BOTTOM, childGap = 8 } }) { if clay.UI().configure({ 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}),
@ -101,7 +101,7 @@ LandingPageDesktop :: proc() {
} }
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("HeroImageOuter"), id = clay.ID("HeroImageOuter"),
layout = { layoutDirection = .TOP_TO_BOTTOM, 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 },
}) { }) {
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)
@ -117,14 +117,14 @@ LandingPageMobile :: proc() {
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("LandingPage1Mobile"), id = clay.ID("LandingPage1Mobile"),
layout = { layout = {
layoutDirection = .TOP_TO_BOTTOM, layoutDirection = .TopToBottom,
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().configure({ 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}),
@ -137,7 +137,7 @@ LandingPageMobile :: proc() {
} }
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("HeroImageOuter"), id = clay.ID("HeroImageOuter"),
layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingGrow({ }) }, childAlignment = { x = .CENTER }, childGap = 16 }, layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow({ }) }, childAlignment = { x = .Center }, childGap = 16 },
}) { }) {
LandingPageBlob(1, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_5, "High performance", &checkImage5) 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)
@ -152,7 +152,7 @@ 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().configure({
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 = .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().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}))
@ -162,7 +162,7 @@ FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) {
} }
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("BringYourOwnRendererOuter"), id = clay.ID("BringYourOwnRendererOuter"),
layout = { layoutDirection = .TOP_TO_BOTTOM, 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 },
}) { }) {
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)
@ -174,7 +174,7 @@ FeatureBlocksDesktop :: proc() {
if clay.UI().configure({ id = clay.ID("FeatureBlocksOuter"), layout = { sizing = { width = clay.SizingGrow({}) } } }) { if clay.UI().configure({ id = clay.ID("FeatureBlocksOuter"), layout = { sizing = { width = clay.SizingGrow({}) } } }) {
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 = { width = { betweenChildren = 2}, color = COLOR_RED }, border = { width = { betweenChildren = 2}, color = COLOR_RED },
}) { }) {
FeatureBlocks(clay.SizingPercent(0.5), 50) FeatureBlocks(clay.SizingPercent(0.5), 50)
@ -185,7 +185,7 @@ FeatureBlocksDesktop :: proc() {
FeatureBlocksMobile :: proc() { 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 = .TopToBottom, sizing = { width = clay.SizingGrow({ }) } },
border = { width = { betweenChildren = 2}, color = COLOR_RED }, border = { width = { betweenChildren = 2}, color = COLOR_RED },
}) { }) {
FeatureBlocks(clay.SizingGrow({}), 16) FeatureBlocks(clay.SizingGrow({}), 16)
@ -193,7 +193,7 @@ 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 = .TOP_TO_BOTTOM, childGap = 8 } }) { if clay.UI().configure({ 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().configure({ id = clay.ID("SyntaxSpacer"), layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {}
clay.Text( clay.Text(
@ -209,7 +209,7 @@ 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().configure({ id = clay.ID("SyntaxPageRightImage"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) {
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("SyntaxPageRightImageInner"), id = clay.ID("SyntaxPageRightImageInner"),
layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } }, layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } },
@ -221,11 +221,11 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi
DeclarativeSyntaxPageDesktop :: proc() { DeclarativeSyntaxPageDesktop :: proc() {
if clay.UI().configure({ if clay.UI().configure({
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().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 = border2pxRed, 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))
@ -237,9 +237,9 @@ DeclarativeSyntaxPageMobile :: proc() {
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("SyntaxPageMobile"), id = clay.ID("SyntaxPageMobile"),
layout = { layout = {
layoutDirection = .TOP_TO_BOTTOM, layoutDirection = .TopToBottom,
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,
}, },
@ -255,7 +255,7 @@ ColorLerp :: proc(a: clay.Color, b: clay.Color, amount: f32) -> clay.Color {
LOREM_IPSUM_TEXT := "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." 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 = .TOP_TO_BOTTOM, childGap = 8 } }) { if clay.UI().configure({ 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().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } }}) {}
clay.Text( clay.Text(
@ -271,7 +271,7 @@ 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().configure({ id = clay.ID("PerformanceRightImageOuter"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) {
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) } },
@ -279,14 +279,14 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
}) { }) {
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) },
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().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) },
backgroundColor = 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}))
@ -298,7 +298,7 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
HighPerformancePageDesktop :: proc(lerpValue: f32) { 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 },
backgroundColor = 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))
@ -309,9 +309,9 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("PerformanceMobile"), id = clay.ID("PerformanceMobile"),
layout = { layout = {
layoutDirection = .TOP_TO_BOTTOM, layoutDirection = .TopToBottom,
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,
}, },
@ -345,7 +345,7 @@ 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 = .TOP_TO_BOTTOM, childGap = 8 } }) { if clay.UI().configure({ 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().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {}
clay.Text( clay.Text(
@ -363,7 +363,7 @@ RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.
} }
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("RendererRightText"), id = clay.ID("RendererRightText"),
layout = { sizing = { width = widthSizing }, childAlignment = { x = .CENTER }, layoutDirection = .TOP_TO_BOTTOM, 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().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 32 }) } } }) {}
@ -374,11 +374,11 @@ RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.
RendererPageDesktop :: proc() { RendererPageDesktop :: proc() {
if clay.UI().configure({ if clay.UI().configure({
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().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 = { COLOR_RED, { left = 2, right = 2 } }, 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))
@ -390,9 +390,9 @@ RendererPageMobile :: proc() {
if clay.UI().configure({ if clay.UI().configure({
id = clay.ID("RendererMobile"), id = clay.ID("RendererMobile"),
layout = { layout = {
layoutDirection = .TOP_TO_BOTTOM, layoutDirection = .TopToBottom,
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,
}, },
@ -416,12 +416,12 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
clay.BeginLayout() clay.BeginLayout()
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 = .TopToBottom, sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) } },
backgroundColor = COLOR_LIGHT, backgroundColor = COLOR_LIGHT,
}) { }) {
if clay.UI().configure({ if clay.UI().configure({
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().configure({ layout = { sizing = { width = clay.SizingGrow({ }) } } }) {}
@ -452,7 +452,7 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
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.TopToBottom },
backgroundColor = COLOR_LIGHT, backgroundColor = COLOR_LIGHT,
border = { COLOR_RED, { betweenChildren = 2} }, border = { COLOR_RED, { betweenChildren = 2} },
}) { }) {
@ -483,8 +483,8 @@ loadFont :: proc(fontId: u16, fontSize: u16, path: cstring) {
} }
errorHandler :: proc "c" (errorData: clay.ErrorData) { errorHandler :: proc "c" (errorData: clay.ErrorData) {
if (errorData.errorType == clay.ErrorType.DUPLICATE_ID) { if (errorData.errorType == clay.ErrorType.DuplicateId) {
// etc
} }
} }

7
clay.h
View File

@ -519,6 +519,7 @@ typedef CLAY_PACKED_ENUM {
CLAY_ERROR_TYPE_TEXT_MEASUREMENT_CAPACITY_EXCEEDED, CLAY_ERROR_TYPE_TEXT_MEASUREMENT_CAPACITY_EXCEEDED,
CLAY_ERROR_TYPE_DUPLICATE_ID, CLAY_ERROR_TYPE_DUPLICATE_ID,
CLAY_ERROR_TYPE_FLOATING_CONTAINER_PARENT_NOT_FOUND, CLAY_ERROR_TYPE_FLOATING_CONTAINER_PARENT_NOT_FOUND,
CLAY_ERROR_TYPE_PERCENTAGE_OVER_1,
CLAY_ERROR_TYPE_INTERNAL_ERROR, CLAY_ERROR_TYPE_INTERNAL_ERROR,
} Clay_ErrorType; } Clay_ErrorType;
@ -1502,6 +1503,12 @@ void Clay__ConfigureOpenElement(const Clay_ElementDeclaration declaration) {
Clay_Context* context = Clay_GetCurrentContext(); Clay_Context* context = Clay_GetCurrentContext();
Clay_LayoutElement *openLayoutElement = Clay__GetOpenLayoutElement(); Clay_LayoutElement *openLayoutElement = Clay__GetOpenLayoutElement();
openLayoutElement->layoutConfig = Clay__StoreLayoutConfig(declaration.layout); openLayoutElement->layoutConfig = Clay__StoreLayoutConfig(declaration.layout);
if ((declaration.layout.sizing.width.type == CLAY__SIZING_TYPE_PERCENT && declaration.layout.sizing.width.size.percent > 1) || (declaration.layout.sizing.height.type == CLAY__SIZING_TYPE_PERCENT && declaration.layout.sizing.height.size.percent > 1)) {
context->errorHandler.errorHandlerFunction(CLAY__INIT(Clay_ErrorData) {
.errorType = CLAY_ERROR_TYPE_PERCENTAGE_OVER_1,
.errorText = CLAY_STRING("An element was configured with CLAY_SIZING_PERCENT, but the provided percentage value was over 1.0. Clay expects a value between 0 and 1, i.e. 20% is 0.2."),
.userData = context->errorHandler.userData });
}
if (declaration.id.id != 0) { if (declaration.id.id != 0) {
Clay__AttachId(declaration.id); Clay__AttachId(declaration.id);
} else if (openLayoutElement->id == 0) { } else if (openLayoutElement->id == 0) {