mirror of
https://github.com/nicbarker/clay.git
synced 2026-02-06 12:48:49 +00:00
[bindings/odin] Improve Odin bindings (#13)
This commit is contained in:
FourteenBrush
GitHub
parent
3e7738bee5
commit
c248914292
4 changed files with 243 additions and 268 deletions
|
|
@ -57,18 +57,18 @@ headerTextConfig := clay.TextElementConfig {
|
|||
textColor = {61, 26, 5, 255},
|
||||
}
|
||||
|
||||
LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Color, text: clay.String, image: ^raylib.Texture2D) {
|
||||
LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Color, text: string, image: ^raylib.Texture2D) {
|
||||
if clay.Border(
|
||||
clay.IDI("HeroBlob", index),
|
||||
clay.ID("HeroBlob", index),
|
||||
clay.Layout({sizing = {width = clay.SizingGrow({max = 480})}, padding = clay.Padding{16, 16}, childGap = 16, childAlignment = clay.ChildAlignment{y = .CENTER}}),
|
||||
clay.BorderConfigOutsideRadius({2, color}, 10),
|
||||
) {
|
||||
if clay.Image(
|
||||
clay.IDI("CheckImage", index),
|
||||
clay.ID("CheckImage", index),
|
||||
clay.Layout({sizing = {width = clay.SizingFixed(32)}}),
|
||||
clay.ImageConfig({imageData = image, sourceDimensions = {128, 128}}),
|
||||
) {}
|
||||
clay.Text(clay.IDI("HeroBlobText", index), text, clay.TextConfig({fontSize = fontSize, fontId = fontId, textColor = color}))
|
||||
clay.Text(clay.ID("HeroBlobText", index), text, clay.TextConfig({fontSize = fontSize, fontId = fontId, textColor = color}))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -85,13 +85,13 @@ LandingPageDesktop :: proc() {
|
|||
if clay.Container(clay.ID("LeftText"), clay.Layout({sizing = {width = clay.SizingPercent(0.55)}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(
|
||||
clay.ID("LeftTextTitle"),
|
||||
clay.MakeString("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}),
|
||||
)
|
||||
if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {}
|
||||
clay.Text(
|
||||
clay.ID("LeftTextTagline"),
|
||||
clay.MakeString("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}),
|
||||
)
|
||||
}
|
||||
|
|
@ -99,11 +99,11 @@ LandingPageDesktop :: proc() {
|
|||
clay.ID("HeroImageOuter"),
|
||||
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingPercent(0.45)}, childAlignment = {x = .CENTER}, childGap = 16}),
|
||||
) {
|
||||
LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, clay.MakeString("High performance"), &checkImage5)
|
||||
LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, clay.MakeString("Flexbox-style responsive layout"), &checkImage4)
|
||||
LandingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, clay.MakeString("Declarative syntax"), &checkImage3)
|
||||
LandingPageBlob(4, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_2, clay.MakeString("Single .h file for C/C++"), &checkImage2)
|
||||
LandingPageBlob(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, clay.MakeString("Compile to 15kb .wasm"), &checkImage1)
|
||||
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(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, "Declarative syntax", &checkImage3)
|
||||
LandingPageBlob(4, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_2, "Single .h file for C/C++", &checkImage2)
|
||||
LandingPageBlob(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, "Compile to 15kb .wasm", &checkImage1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -112,26 +112,24 @@ LandingPageDesktop :: proc() {
|
|||
LandingPageMobile :: proc() {
|
||||
if clay.Container(
|
||||
clay.ID("LandingPage1Mobile"),
|
||||
clay.Layout(
|
||||
{
|
||||
layoutDirection = .TOP_TO_BOTTOM,
|
||||
sizing = {width = clay.SizingGrow({}), height = clay.SizingFit({min = cast(f32)windowHeight - 70})},
|
||||
childAlignment = {x = .CENTER, y = .CENTER},
|
||||
padding = {16, 32},
|
||||
childGap = 32,
|
||||
},
|
||||
),
|
||||
clay.Layout({
|
||||
layoutDirection = .TOP_TO_BOTTOM,
|
||||
sizing = {width = clay.SizingGrow({}), height = clay.SizingFit({min = cast(f32)windowHeight - 70})},
|
||||
childAlignment = {x = .CENTER, y = .CENTER},
|
||||
padding = {16, 32},
|
||||
childGap = 32,
|
||||
}),
|
||||
) {
|
||||
if clay.Container(clay.ID("LeftText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(
|
||||
clay.ID("LeftTextTitle"),
|
||||
clay.MakeString("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}),
|
||||
)
|
||||
if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {}
|
||||
clay.Text(
|
||||
clay.ID("LeftTextTagline"),
|
||||
clay.MakeString("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}),
|
||||
)
|
||||
}
|
||||
|
|
@ -139,11 +137,11 @@ LandingPageMobile :: proc() {
|
|||
clay.ID("HeroImageOuter"),
|
||||
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingGrow({})}, childAlignment = {x = .CENTER}, childGap = 16}),
|
||||
) {
|
||||
LandingPageBlob(1, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_5, clay.MakeString("High performance"), &checkImage5)
|
||||
LandingPageBlob(2, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_4, clay.MakeString("Flexbox-style responsive layout"), &checkImage4)
|
||||
LandingPageBlob(3, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_3, clay.MakeString("Declarative syntax"), &checkImage3)
|
||||
LandingPageBlob(4, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_2, clay.MakeString("Single .h file for C/C++"), &checkImage2)
|
||||
LandingPageBlob(5, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_1, clay.MakeString("Compile to 15kb .wasm"), &checkImage1)
|
||||
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(3, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_3, "Declarative syntax", &checkImage3)
|
||||
LandingPageBlob(4, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_2, "Single .h file for C/C++", &checkImage2)
|
||||
LandingPageBlob(5, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_1, "Compile to 15kb .wasm", &checkImage1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -155,18 +153,18 @@ FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) {
|
|||
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = widthSizing}, childAlignment = {y = .CENTER}, padding = {outerPadding, 32}, childGap = 8}),
|
||||
) {
|
||||
if clay.Rectangle(clay.ID("HFileIncludeOuter"), clay.Layout({padding = {8, 4}}), clay.RectangleConfig({color = COLOR_RED, cornerRadius = clay.CornerRadiusAll(8)})) {
|
||||
clay.Text(clay.IDI("HFileBoxText", 2), clay.MakeString("#include clay.h"), clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_LIGHT}))
|
||||
clay.Text(clay.ID("HFileBoxText", 2), "#include clay.h", clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_LIGHT}))
|
||||
}
|
||||
clay.Text(clay.ID("HFileSecondLine"), clay.MakeString("~2000 lines of C99."), textConfig)
|
||||
clay.Text(clay.IDI("HFileBoxText", 5), clay.MakeString("Zero dependencies, including no C standard library."), textConfig)
|
||||
clay.Text(clay.ID("HFileSecondLine"), "~2000 lines of C99.", textConfig)
|
||||
clay.Text(clay.ID("HFileBoxText", 5), "Zero dependencies, including no C standard library.", textConfig)
|
||||
}
|
||||
if clay.Container(
|
||||
clay.ID("BringYourOwnRendererOuter"),
|
||||
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = widthSizing}, childAlignment = {y = .CENTER}, padding = {x = outerPadding, y = 32}, childGap = 8}),
|
||||
) {
|
||||
clay.Text(clay.IDI("ZeroDependenciesText", 1), clay.MakeString("Renderer agnostic."), clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = COLOR_ORANGE}))
|
||||
clay.Text(clay.IDI("ZeroDependenciesText", 2), clay.MakeString("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML."), textConfig)
|
||||
clay.Text(clay.IDI("ZeroDependenciesText", 3), clay.MakeString("Flexible output for easy compositing in your custom engine or environment."), textConfig)
|
||||
clay.Text(clay.ID("ZeroDependenciesText", 1), "Renderer agnostic.", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = COLOR_ORANGE}))
|
||||
clay.Text(clay.ID("ZeroDependenciesText", 2), "Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", textConfig)
|
||||
clay.Text(clay.ID("ZeroDependenciesText", 3), "Flexible output for easy compositing in your custom engine or environment.", textConfig)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -194,21 +192,21 @@ FeatureBlocksMobile :: proc() {
|
|||
|
||||
DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
|
||||
if clay.Container(clay.ID("SyntaxPageLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(clay.ID("SyntaxPageTextTitle"), clay.MakeString("Declarative Syntax"), clay.TextConfig(titleTextConfig))
|
||||
clay.Text(clay.ID("SyntaxPageTextTitle"), "Declarative Syntax", clay.TextConfig(titleTextConfig))
|
||||
if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
|
||||
clay.Text(
|
||||
clay.ID("SyntaxPageTextSubTitle1"),
|
||||
clay.MakeString("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.Text(
|
||||
clay.ID("SyntaxPageTextSubTitle2"),
|
||||
clay.MakeString("Mix elements with standard C code like loops, conditionals and functions."),
|
||||
"Mix elements with standard C code like loops, conditionals and functions.",
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
|
||||
)
|
||||
clay.Text(
|
||||
clay.ID("SyntaxPageTextSubTitle3"),
|
||||
clay.MakeString("Create your own library of re-usable components from UI primitives like text, images and rectangles."),
|
||||
"Create your own library of re-usable components from UI primitives like text, images and rectangles.",
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
|
||||
)
|
||||
}
|
||||
|
|
@ -257,25 +255,25 @@ ColorLerp :: proc(a: clay.Color, b: clay.Color, amount: f32) -> clay.Color {
|
|||
return clay.Color{a.r + (b.r - a.r) * amount, a.g + (b.g - a.g) * amount, a.b + (b.b - a.b) * amount, a.a + (b.a - a.a) * amount}
|
||||
}
|
||||
|
||||
LOREM_IPSUM_TEXT: clay.String = clay.MakeString("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) {
|
||||
if clay.Container(clay.ID("PerformanceLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(clay.ID("PerformanceTextTitle"), clay.MakeString("High Performance"), clay.TextConfig(titleTextConfig))
|
||||
clay.Text(clay.ID("PerformanceTextTitle"), "High Performance", clay.TextConfig(titleTextConfig))
|
||||
if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
|
||||
clay.Text(
|
||||
clay.IDI("PerformanceTextSubTitle", 1),
|
||||
clay.MakeString("Fast enough to recompute your entire UI every frame."),
|
||||
clay.ID("PerformanceTextSubTitle", 1),
|
||||
"Fast enough to recompute your entire UI every frame.",
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
|
||||
)
|
||||
clay.Text(
|
||||
clay.IDI("PerformanceTextSubTitle", 2),
|
||||
clay.MakeString("Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free."),
|
||||
clay.ID("PerformanceTextSubTitle", 2),
|
||||
"Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free.",
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
|
||||
)
|
||||
clay.Text(
|
||||
clay.IDI("PerformanceTextSubTitle", 3),
|
||||
clay.MakeString("Simplify animations and reactive UI design by avoiding the standard performance hacks."),
|
||||
clay.ID("PerformanceTextSubTitle", 3),
|
||||
"Simplify animations and reactive UI design by avoiding the standard performance hacks.",
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
|
||||
)
|
||||
}
|
||||
|
|
@ -333,7 +331,7 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
|
|||
}
|
||||
}
|
||||
|
||||
RendererButtonActive :: proc(id: u32, index: i32, text: clay.String) {
|
||||
RendererButtonActive :: proc(id: u32, index: i32, text: string) {
|
||||
if clay.Rectangle(
|
||||
id,
|
||||
clay.Layout({sizing = {width = clay.SizingFixed(300)}, padding = {16, 16}}),
|
||||
|
|
@ -343,35 +341,35 @@ RendererButtonActive :: proc(id: u32, index: i32, text: clay.String) {
|
|||
}
|
||||
}
|
||||
|
||||
RendererButtonInactive :: proc(id: u32, index: u32, text: clay.String) {
|
||||
RendererButtonInactive :: proc(id: u32, index: u32, text: string) {
|
||||
if clay.Border(id, clay.Layout({}), clay.BorderConfigOutsideRadius({2, COLOR_RED}, 10)) {
|
||||
if clay.Rectangle(
|
||||
clay.IDI("RendererButtonInactiveInner", index),
|
||||
clay.ID("RendererButtonInactiveInner", index),
|
||||
clay.Layout({sizing = {width = clay.SizingFixed(300)}, padding = {16, 16}}),
|
||||
clay.RectangleConfig({color = clay.PointerOver(id) ? COLOR_LIGHT_HOVER : COLOR_LIGHT, cornerRadius = clay.CornerRadiusAll(10)}),
|
||||
) {
|
||||
clay.Text(clay.IDI("RendererButtonInactiveText", index), text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}))
|
||||
clay.Text(clay.ID("RendererButtonInactiveText", index), text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
|
||||
if clay.Container(clay.ID("RendererLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(clay.ID("RendererTextTitle"), clay.MakeString("Renderer & Platform Agnostic"), clay.TextConfig(titleTextConfig))
|
||||
clay.Text(clay.ID("RendererTextTitle"), "Renderer & Platform Agnostic", clay.TextConfig(titleTextConfig))
|
||||
if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
|
||||
clay.Text(
|
||||
clay.IDI("RendererTextSubTitle", 1),
|
||||
clay.MakeString("Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE."),
|
||||
clay.ID("RendererTextSubTitle", 1),
|
||||
"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.Text(
|
||||
clay.IDI("RendererTextSubTitle", 2),
|
||||
clay.MakeString("Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more."),
|
||||
clay.ID("RendererTextSubTitle", 2),
|
||||
"Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more.",
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}),
|
||||
)
|
||||
clay.Text(
|
||||
clay.IDI("RendererTextSubTitle", 3),
|
||||
clay.MakeString("There's even an HTML renderer - you're looking at it right now!"),
|
||||
clay.ID("RendererTextSubTitle", 3),
|
||||
"There's even an HTML renderer - you're looking at it right now!",
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}),
|
||||
)
|
||||
}
|
||||
|
|
@ -381,11 +379,11 @@ RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.
|
|||
) {
|
||||
clay.Text(
|
||||
clay.ID("RendererTextRightTitle"),
|
||||
clay.MakeString("Try changing renderer!"),
|
||||
"Try changing renderer!",
|
||||
clay.TextConfig({fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE}),
|
||||
)
|
||||
if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 32})}})) {}
|
||||
RendererButtonActive(clay.IDI("RendererSelectButtonActive", 0), 0, clay.MakeString("Raylib Renderer"))
|
||||
RendererButtonActive(clay.ID("RendererSelectButtonActive", 0), 0, "Raylib Renderer")
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -407,15 +405,13 @@ RendererPageDesktop :: proc() {
|
|||
RendererPageMobile :: proc() {
|
||||
if clay.Rectangle(
|
||||
clay.ID("RendererMobile"),
|
||||
clay.Layout(
|
||||
{
|
||||
layoutDirection = .TOP_TO_BOTTOM,
|
||||
sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})},
|
||||
childAlignment = {x = .CENTER, y = .CENTER},
|
||||
padding = {x = 16, y = 32},
|
||||
childGap = 32,
|
||||
},
|
||||
),
|
||||
clay.Layout({
|
||||
layoutDirection = .TOP_TO_BOTTOM,
|
||||
sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})},
|
||||
childAlignment = {x = .CENTER, y = .CENTER},
|
||||
padding = {x = 16, y = 32},
|
||||
childGap = 32,
|
||||
}),
|
||||
clay.RectangleConfig({color = COLOR_LIGHT}),
|
||||
) {
|
||||
RendererPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({}))
|
||||
|
|
@ -428,7 +424,7 @@ ScrollbarData :: struct {
|
|||
mouseDown: bool,
|
||||
}
|
||||
|
||||
scrollbarData: ScrollbarData = ScrollbarData{}
|
||||
scrollbarData := ScrollbarData{}
|
||||
animationLerpValue: f32 = -1.0
|
||||
|
||||
createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
|
||||
|
|
@ -443,15 +439,15 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
|
|||
clay.ID("Header"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(50)}, childAlignment = {y = .CENTER}, childGap = 24, padding = {x = 32}}),
|
||||
) {
|
||||
clay.Text(clay.ID("Logo"), clay.MakeString("Clay"), &headerTextConfig)
|
||||
clay.Text(clay.ID("Logo"), "Clay", &headerTextConfig)
|
||||
if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({})}})) {}
|
||||
|
||||
if (!mobileScreen) {
|
||||
if clay.Rectangle(clay.ID("LinkExamplesOuter"), clay.Layout({}), clay.RectangleConfig({color = {0, 0, 0, 0}})) {
|
||||
clay.Text(clay.ID("LinkExamplesText"), clay.MakeString("Examples"), clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
|
||||
clay.Text(clay.ID("LinkExamplesText"), "Examples", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
|
||||
}
|
||||
if clay.Rectangle(clay.ID("LinkDocsOuter"), clay.Layout({}), clay.RectangleConfig({color = {0, 0, 0, 0}})) {
|
||||
clay.Text(clay.ID("LinkDocsText"), clay.MakeString("Docs"), clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
|
||||
clay.Text(clay.ID("LinkDocsText"), "Docs", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
|
||||
}
|
||||
}
|
||||
githubButtonId: u32 = clay.ID("HeaderButtonGithub")
|
||||
|
|
@ -461,7 +457,7 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
|
|||
clay.Layout({padding = {16, 6}}),
|
||||
clay.RectangleConfig({cornerRadius = clay.CornerRadiusAll(10), color = clay.PointerOver(githubButtonId) ? COLOR_LIGHT_HOVER : COLOR_LIGHT}),
|
||||
) {
|
||||
clay.Text(clay.ID("LinkGithubText"), clay.MakeString("Github"), clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
|
||||
clay.Text(clay.ID("LinkGithubText"), "Github", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -510,7 +506,7 @@ loadFont :: proc(fontId: u16, fontSize: u16, path: cstring) {
|
|||
}
|
||||
|
||||
main :: proc() {
|
||||
minMemorySize: c.uint32_t = clay.MinMemorySize()
|
||||
minMemorySize: u32 = clay.MinMemorySize()
|
||||
memory := make([^]u8, minMemorySize)
|
||||
arena: clay.Arena = clay.CreateArenaWithCapacityAndMemory(minMemorySize, memory)
|
||||
clay.SetMeasureTextFunction(measureText)
|
||||
|
|
|
|||
|
|
@ -23,16 +23,16 @@ measureText :: proc "c" (text: ^clay.String, config: ^clay.TextElementConfig) ->
|
|||
maxTextWidth: f32 = 0
|
||||
lineTextWidth: f32 = 0
|
||||
|
||||
textHeight: f32 = cast(f32)config.fontSize
|
||||
textHeight := cast(f32)config.fontSize
|
||||
fontToUse := raylibFonts[config.fontId].font
|
||||
|
||||
for i := 0; i < cast(int)text.length; i += 1 {
|
||||
for i in 0..<int(text.length) {
|
||||
if (text.chars[i] == '\n') {
|
||||
maxTextWidth = math.max(maxTextWidth, lineTextWidth)
|
||||
maxTextWidth = max(maxTextWidth, lineTextWidth)
|
||||
lineTextWidth = 0
|
||||
continue
|
||||
}
|
||||
index: i32 = cast(i32)text.chars[i] - 32
|
||||
index := cast(i32)text.chars[i] - 32
|
||||
if (fontToUse.glyphs[index].advanceX != 0) {
|
||||
lineTextWidth += cast(f32)fontToUse.glyphs[index].advanceX
|
||||
} else {
|
||||
|
|
@ -40,7 +40,7 @@ measureText :: proc "c" (text: ^clay.String, config: ^clay.TextElementConfig) ->
|
|||
}
|
||||
}
|
||||
|
||||
maxTextWidth = math.max(maxTextWidth, lineTextWidth)
|
||||
maxTextWidth = max(maxTextWidth, lineTextWidth)
|
||||
|
||||
textSize.width = maxTextWidth / 2
|
||||
textSize.height = textHeight
|
||||
|
|
@ -49,15 +49,13 @@ measureText :: proc "c" (text: ^clay.String, config: ^clay.TextElementConfig) ->
|
|||
}
|
||||
|
||||
clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), allocator := context.temp_allocator) {
|
||||
for i := 0; i < cast(int)renderCommands.length; i += 1 {
|
||||
for i in 0..<int(renderCommands.length) {
|
||||
renderCommand := clay.RenderCommandArray_Get(renderCommands, cast(i32)i)
|
||||
boundingBox := renderCommand.boundingBox
|
||||
switch (renderCommand.commandType)
|
||||
{
|
||||
switch (renderCommand.commandType) {
|
||||
case clay.RenderCommandType.None:
|
||||
{}
|
||||
case clay.RenderCommandType.Text:
|
||||
{
|
||||
// Raylib uses standard C strings so isn't compatible with cheap slices, we need to clone the string to append null terminator
|
||||
text := string(renderCommand.text.chars[:renderCommand.text.length])
|
||||
cloned := strings.clone_to_cstring(text, allocator)
|
||||
|
|
@ -70,145 +68,132 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
|
|||
cast(f32)renderCommand.config.textElementConfig.letterSpacing,
|
||||
clayColorToRaylibColor(renderCommand.config.textElementConfig.textColor),
|
||||
)
|
||||
}
|
||||
case clay.RenderCommandType.Image:
|
||||
{
|
||||
// TODO image handling
|
||||
imageTexture := cast(^raylib.Texture2D)renderCommand.config.imageElementConfig.imageData
|
||||
raylib.DrawTextureEx(imageTexture^, raylib.Vector2{boundingBox.x, boundingBox.y}, 0, boundingBox.width / cast(f32)imageTexture.width, raylib.WHITE)
|
||||
}
|
||||
// TODO image handling
|
||||
imageTexture := cast(^raylib.Texture2D)renderCommand.config.imageElementConfig.imageData
|
||||
raylib.DrawTextureEx(imageTexture^, raylib.Vector2{boundingBox.x, boundingBox.y}, 0, boundingBox.width / cast(f32)imageTexture.width, raylib.WHITE)
|
||||
case clay.RenderCommandType.ScissorStart:
|
||||
{
|
||||
raylib.BeginScissorMode(
|
||||
cast(i32)math.round(boundingBox.x),
|
||||
cast(i32)math.round(boundingBox.y),
|
||||
cast(i32)math.round(boundingBox.width),
|
||||
cast(i32)math.round(boundingBox.height),
|
||||
raylib.BeginScissorMode(
|
||||
cast(i32)math.round(boundingBox.x),
|
||||
cast(i32)math.round(boundingBox.y),
|
||||
cast(i32)math.round(boundingBox.width),
|
||||
cast(i32)math.round(boundingBox.height),
|
||||
)
|
||||
case clay.RenderCommandType.ScissorEnd:
|
||||
raylib.EndScissorMode()
|
||||
case clay.RenderCommandType.Rectangle:
|
||||
config: ^clay.RectangleElementConfig = renderCommand.config.rectangleElementConfig
|
||||
if (config.cornerRadius.topLeft > 0) {
|
||||
radius: f32 = (config.cornerRadius.topLeft * 2) / min(boundingBox.width, boundingBox.height)
|
||||
raylib.DrawRectangleRounded(
|
||||
raylib.Rectangle{boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height},
|
||||
radius,
|
||||
8,
|
||||
clayColorToRaylibColor(config.color),
|
||||
)
|
||||
} else {
|
||||
raylib.DrawRectangle(
|
||||
cast(i32)boundingBox.x,
|
||||
cast(i32)boundingBox.y,
|
||||
cast(i32)boundingBox.width,
|
||||
cast(i32)boundingBox.height,
|
||||
clayColorToRaylibColor(config.color),
|
||||
)
|
||||
}
|
||||
case clay.RenderCommandType.ScissorEnd:
|
||||
{
|
||||
raylib.EndScissorMode()
|
||||
}
|
||||
case clay.RenderCommandType.Rectangle:
|
||||
{
|
||||
config: ^clay.RectangleElementConfig = renderCommand.config.rectangleElementConfig
|
||||
if (config.cornerRadius.topLeft > 0) {
|
||||
radius: f32 = (config.cornerRadius.topLeft * 2) / (boundingBox.width > boundingBox.height ? boundingBox.height : boundingBox.width)
|
||||
raylib.DrawRectangleRounded(
|
||||
raylib.Rectangle{boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height},
|
||||
radius,
|
||||
8,
|
||||
clayColorToRaylibColor(config.color),
|
||||
)
|
||||
} else {
|
||||
raylib.DrawRectangle(
|
||||
cast(i32)boundingBox.x,
|
||||
cast(i32)boundingBox.y,
|
||||
cast(i32)boundingBox.width,
|
||||
cast(i32)boundingBox.height,
|
||||
clayColorToRaylibColor(config.color),
|
||||
)
|
||||
}
|
||||
}
|
||||
case clay.RenderCommandType.Border:
|
||||
{
|
||||
config := renderCommand.config.borderElementConfig
|
||||
// Left border
|
||||
if (config.left.width > 0) {
|
||||
raylib.DrawRectangle(
|
||||
cast(i32)math.round(boundingBox.x),
|
||||
cast(i32)math.round(boundingBox.y + config.cornerRadius.topLeft),
|
||||
cast(i32)config.left.width,
|
||||
cast(i32)math.round(boundingBox.height - config.cornerRadius.topLeft - config.cornerRadius.bottomLeft),
|
||||
clayColorToRaylibColor(config.left.color),
|
||||
)
|
||||
}
|
||||
// Right border
|
||||
if (config.right.width > 0) {
|
||||
raylib.DrawRectangle(
|
||||
cast(i32)math.round(boundingBox.x + boundingBox.width - cast(f32)config.right.width),
|
||||
cast(i32)math.round(boundingBox.y + config.cornerRadius.topRight),
|
||||
cast(i32)config.right.width,
|
||||
cast(i32)math.round(boundingBox.height - config.cornerRadius.topRight - config.cornerRadius.bottomRight),
|
||||
clayColorToRaylibColor(config.right.color),
|
||||
)
|
||||
}
|
||||
// Top border
|
||||
if (config.top.width > 0) {
|
||||
raylib.DrawRectangle(
|
||||
cast(i32)math.round(boundingBox.x + config.cornerRadius.topLeft),
|
||||
cast(i32)math.round(boundingBox.y),
|
||||
cast(i32)math.round(boundingBox.width - config.cornerRadius.topLeft - config.cornerRadius.topRight),
|
||||
cast(i32)config.top.width,
|
||||
clayColorToRaylibColor(config.top.color),
|
||||
)
|
||||
}
|
||||
// Bottom border
|
||||
if (config.bottom.width > 0) {
|
||||
raylib.DrawRectangle(
|
||||
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.width - config.cornerRadius.bottomLeft - config.cornerRadius.bottomRight),
|
||||
cast(i32)config.bottom.width,
|
||||
clayColorToRaylibColor(config.bottom.color),
|
||||
)
|
||||
}
|
||||
if (config.cornerRadius.topLeft > 0) {
|
||||
raylib.DrawRing(
|
||||
raylib.Vector2{math.round(boundingBox.x + config.cornerRadius.topLeft), math.round(boundingBox.y + config.cornerRadius.topLeft)},
|
||||
math.round(config.cornerRadius.topLeft - cast(f32)config.top.width),
|
||||
config.cornerRadius.topLeft,
|
||||
180,
|
||||
270,
|
||||
10,
|
||||
clayColorToRaylibColor(config.top.color),
|
||||
)
|
||||
}
|
||||
if (config.cornerRadius.topRight > 0) {
|
||||
raylib.DrawRing(
|
||||
raylib.Vector2{math.round(boundingBox.x + boundingBox.width - config.cornerRadius.topRight), math.round(boundingBox.y + config.cornerRadius.topRight)},
|
||||
math.round(config.cornerRadius.topRight - cast(f32)config.top.width),
|
||||
config.cornerRadius.topRight,
|
||||
270,
|
||||
360,
|
||||
10,
|
||||
clayColorToRaylibColor(config.top.color),
|
||||
)
|
||||
}
|
||||
if (config.cornerRadius.bottomLeft > 0) {
|
||||
raylib.DrawRing(
|
||||
raylib.Vector2 {
|
||||
math.round(boundingBox.x + config.cornerRadius.bottomLeft),
|
||||
math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomLeft),
|
||||
},
|
||||
math.round(config.cornerRadius.bottomLeft - cast(f32)config.top.width),
|
||||
config.cornerRadius.bottomLeft,
|
||||
90,
|
||||
180,
|
||||
10,
|
||||
clayColorToRaylibColor(config.bottom.color),
|
||||
)
|
||||
}
|
||||
if (config.cornerRadius.bottomRight > 0) {
|
||||
raylib.DrawRing(
|
||||
raylib.Vector2 {
|
||||
math.round(boundingBox.x + boundingBox.width - config.cornerRadius.bottomRight),
|
||||
math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomRight),
|
||||
},
|
||||
math.round(config.cornerRadius.bottomRight - cast(f32)config.bottom.width),
|
||||
config.cornerRadius.bottomRight,
|
||||
0.1,
|
||||
90,
|
||||
10,
|
||||
clayColorToRaylibColor(config.bottom.color),
|
||||
)
|
||||
}
|
||||
config := renderCommand.config.borderElementConfig
|
||||
// Left border
|
||||
if (config.left.width > 0) {
|
||||
raylib.DrawRectangle(
|
||||
cast(i32)math.round(boundingBox.x),
|
||||
cast(i32)math.round(boundingBox.y + config.cornerRadius.topLeft),
|
||||
cast(i32)config.left.width,
|
||||
cast(i32)math.round(boundingBox.height - config.cornerRadius.topLeft - config.cornerRadius.bottomLeft),
|
||||
clayColorToRaylibColor(config.left.color),
|
||||
)
|
||||
}
|
||||
// Right border
|
||||
if (config.right.width > 0) {
|
||||
raylib.DrawRectangle(
|
||||
cast(i32)math.round(boundingBox.x + boundingBox.width - cast(f32)config.right.width),
|
||||
cast(i32)math.round(boundingBox.y + config.cornerRadius.topRight),
|
||||
cast(i32)config.right.width,
|
||||
cast(i32)math.round(boundingBox.height - config.cornerRadius.topRight - config.cornerRadius.bottomRight),
|
||||
clayColorToRaylibColor(config.right.color),
|
||||
)
|
||||
}
|
||||
// Top border
|
||||
if (config.top.width > 0) {
|
||||
raylib.DrawRectangle(
|
||||
cast(i32)math.round(boundingBox.x + config.cornerRadius.topLeft),
|
||||
cast(i32)math.round(boundingBox.y),
|
||||
cast(i32)math.round(boundingBox.width - config.cornerRadius.topLeft - config.cornerRadius.topRight),
|
||||
cast(i32)config.top.width,
|
||||
clayColorToRaylibColor(config.top.color),
|
||||
)
|
||||
}
|
||||
// Bottom border
|
||||
if (config.bottom.width > 0) {
|
||||
raylib.DrawRectangle(
|
||||
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.width - config.cornerRadius.bottomLeft - config.cornerRadius.bottomRight),
|
||||
cast(i32)config.bottom.width,
|
||||
clayColorToRaylibColor(config.bottom.color),
|
||||
)
|
||||
}
|
||||
if (config.cornerRadius.topLeft > 0) {
|
||||
raylib.DrawRing(
|
||||
raylib.Vector2{math.round(boundingBox.x + config.cornerRadius.topLeft), math.round(boundingBox.y + config.cornerRadius.topLeft)},
|
||||
math.round(config.cornerRadius.topLeft - cast(f32)config.top.width),
|
||||
config.cornerRadius.topLeft,
|
||||
180,
|
||||
270,
|
||||
10,
|
||||
clayColorToRaylibColor(config.top.color),
|
||||
)
|
||||
}
|
||||
if (config.cornerRadius.topRight > 0) {
|
||||
raylib.DrawRing(
|
||||
raylib.Vector2{math.round(boundingBox.x + boundingBox.width - config.cornerRadius.topRight), math.round(boundingBox.y + config.cornerRadius.topRight)},
|
||||
math.round(config.cornerRadius.topRight - cast(f32)config.top.width),
|
||||
config.cornerRadius.topRight,
|
||||
270,
|
||||
360,
|
||||
10,
|
||||
clayColorToRaylibColor(config.top.color),
|
||||
)
|
||||
}
|
||||
if (config.cornerRadius.bottomLeft > 0) {
|
||||
raylib.DrawRing(
|
||||
raylib.Vector2 {
|
||||
math.round(boundingBox.x + config.cornerRadius.bottomLeft),
|
||||
math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomLeft),
|
||||
},
|
||||
math.round(config.cornerRadius.bottomLeft - cast(f32)config.top.width),
|
||||
config.cornerRadius.bottomLeft,
|
||||
90,
|
||||
180,
|
||||
10,
|
||||
clayColorToRaylibColor(config.bottom.color),
|
||||
)
|
||||
}
|
||||
if (config.cornerRadius.bottomRight > 0) {
|
||||
raylib.DrawRing(
|
||||
raylib.Vector2 {
|
||||
math.round(boundingBox.x + boundingBox.width - config.cornerRadius.bottomRight),
|
||||
math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomRight),
|
||||
},
|
||||
math.round(config.cornerRadius.bottomRight - cast(f32)config.bottom.width),
|
||||
config.cornerRadius.bottomRight,
|
||||
0.1,
|
||||
90,
|
||||
10,
|
||||
clayColorToRaylibColor(config.bottom.color),
|
||||
)
|
||||
}
|
||||
case clay.RenderCommandType.Custom:
|
||||
{
|
||||
// Implement custom element rendering here
|
||||
}
|
||||
// Implement custom element rendering here
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue