Sara/clay
1
0
Fork 0
mirror of https://github.com/nicbarker/clay.git synced 2025-09-18 04:26:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Bindings/Odin] SizingFit and SizingGrow default parameters (#462)

Browse source
This commit is contained in:
Hayden Gray 2025-07-08 19:07:10 -04:00 committed by GitHub
parent 516e85bdfe
commit 9d38edb989
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
bindings/odin/clay-odin/clay.odin
View file

@ -186,7 +186,7 @@ FloatingElementConfig :: struct {
attachment: FloatingAttachPoints, attachment: FloatingAttachPoints,
pointerCaptureMode: PointerCaptureMode, pointerCaptureMode: PointerCaptureMode,
attachTo: FloatingAttachToElement, attachTo: FloatingAttachToElement,
clipTo: FloatingClipToElement, clipTo: FloatingClipToElement,
} }
TextRenderData :: struct { TextRenderData :: struct {
@ -342,7 +342,7 @@ ElementDeclaration :: struct {
layout: LayoutConfig, layout: LayoutConfig,
backgroundColor: Color, backgroundColor: Color,
cornerRadius: CornerRadius, cornerRadius: CornerRadius,
aspectRatio: AspectRatioElementConfig, aspectRatio: AspectRatioElementConfig,
image: ImageElementConfig, image: ImageElementConfig,
floating: FloatingElementConfig, floating: FloatingElementConfig,
custom: CustomElementConfig, custom: CustomElementConfig,
@ -460,11 +460,11 @@ 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}}
} }

54
bindings/odin/examples/clay-official-website/clay-official-website.odin
View file

@ -82,11 +82,11 @@ LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Colo
LandingPageDesktop :: proc() { LandingPageDesktop :: proc() {
if clay.UI()({ 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()({ 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()({ 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 } }) {
@ -119,13 +119,13 @@ LandingPageMobile :: proc() {
id = clay.ID("LandingPage1Mobile"), id = clay.ID("LandingPage1Mobile"),
layout = { layout = {
layoutDirection = .TopToBottom, 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()({ 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}),
@ -138,7 +138,7 @@ LandingPageMobile :: proc() {
} }
if clay.UI()({ 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 },
}) { }) {
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)
@ -175,7 +175,7 @@ FeatureBlocksDesktop :: proc() {
if clay.UI()({ id = clay.ID("FeatureBlocksOuter"), layout = { sizing = { width = clay.SizingGrow({}) } } }) { if clay.UI()({ id = clay.ID("FeatureBlocksOuter"), layout = { sizing = { width = clay.SizingGrow({}) } } }) {
if clay.UI()({ 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 },
}) { }) {
FeatureBlocks(clay.SizingPercent(0.5), 50) FeatureBlocks(clay.SizingPercent(0.5), 50)
@ -186,7 +186,7 @@ FeatureBlocksDesktop :: proc() {
FeatureBlocksMobile :: proc() { FeatureBlocksMobile :: proc() {
if clay.UI()({ 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 },
}) { }) {
FeatureBlocks(clay.SizingGrow({}), 16) FeatureBlocks(clay.SizingGrow({}), 16)
@ -223,11 +223,11 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi
DeclarativeSyntaxPageDesktop :: proc() { DeclarativeSyntaxPageDesktop :: proc() {
if clay.UI()({ 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()({ 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,
}) { }) {
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))
@ -240,7 +240,7 @@ DeclarativeSyntaxPageMobile :: proc() {
id = clay.ID("SyntaxPageMobile"), id = clay.ID("SyntaxPageMobile"),
layout = { layout = {
layoutDirection = .TopToBottom, 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,
@ -276,19 +276,19 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
if clay.UI()({ 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()({ 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()({ 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()({ 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),
}) { }) {
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}))
@ -300,7 +300,7 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
HighPerformancePageDesktop :: proc(lerpValue: f32) { HighPerformancePageDesktop :: proc(lerpValue: f32) {
if clay.UI()({ 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,
}) { }) {
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))
@ -312,7 +312,7 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
id = clay.ID("PerformanceMobile"), id = clay.ID("PerformanceMobile"),
layout = { layout = {
layoutDirection = .TopToBottom, 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,
@ -376,11 +376,11 @@ RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.
RendererPageDesktop :: proc() { RendererPageDesktop :: proc() {
if clay.UI()({ 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()({ 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 } },
}) { }) {
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))
@ -393,7 +393,7 @@ RendererPageMobile :: proc() {
id = clay.ID("RendererMobile"), id = clay.ID("RendererMobile"),
layout = { layout = {
layoutDirection = .TopToBottom, 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,
@ -418,15 +418,15 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
clay.BeginLayout() clay.BeginLayout()
if clay.UI()({ 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()({ 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()({ layout = { sizing = { width = clay.SizingGrow({ }) } } }) {} if clay.UI()({ layout = { sizing = { width = clay.SizingGrow() } } }) {}
if (!mobileScreen) { if (!mobileScreen) {
if clay.UI()({ id = clay.ID("LinkExamplesOuter"), backgroundColor = {0, 0, 0, 0} }) { if clay.UI()({ id = clay.ID("LinkExamplesOuter"), backgroundColor = {0, 0, 0, 0} }) {
@ -446,15 +446,15 @@ 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()({ 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()({ 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()({ 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()({ 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()({ 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()({ if clay.UI()({
id = clay.ID("ScrollContainerBackgroundRectangle"), id = clay.ID("ScrollContainerBackgroundRectangle"),
clip = { vertical = true, childOffset = clay.GetScrollOffset() }, clip = { vertical = true, childOffset = clay.GetScrollOffset() },
layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, layoutDirection = clay.LayoutDirection.TopToBottom }, 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} },
}) { }) {