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

[bindings/odin] Improve Odin bindings (#13)

Browse Source
This commit is contained in:
FourteenBrush 2024-09-01 05:13:28 +02:00 committed by GitHub
parent 3e7738bee5
commit c248914292
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 243 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
bindings/odin/README.md
View File

@ -37,7 +37,7 @@ import clay "clay-odin"
2. Ask clay for how much static memory it needs using [clay.MinMemorySize()](https://github.com/nicbarker/clay/blob/main/README.md#clay_minmemorysize), create an Arena for it to use with [clay.CreateArenaWithCapacityAndMemory(minMemorySize, memory)](https://github.com/nicbarker/clay/blob/main/README.md#clay_createarenawithcapacityandmemory), and initialize it with [clay.Initialize(arena)](https://github.com/nicbarker/clay/blob/main/README.md#clay_initialize).
```Odin
minMemorySize: c.uint32_t = clay.MinMemorySize()
minMemorySize: u32 = clay.MinMemorySize()
memory := make([^]u8, minMemorySize)
arena: clay.Arena = clay.CreateArenaWithCapacityAndMemory(minMemorySize, memory)
clay.Initialize(arena)
@ -77,7 +77,7 @@ sidebarItemLayout := clay.LayoutConfig {
// Re-useable components are just normal functions
SidebarItemComponent :: proc(index: u32) {
if clay.Rectangle(clay.IDI("SidebarBlob", index), &sidebarItemLayout, clay.RectangleConfig({color = COLOR_ORANGE})) {}
if clay.Rectangle(clay.ID("SidebarBlob", index), &sidebarItemLayout, clay.RectangleConfig({color = COLOR_ORANGE})) {}
}
// An example function to begin the "root" of your layout tree
@ -106,11 +106,11 @@ CreateLayout :: proc() -> clay.ClayArray(clay.RenderCommand) {
clay.Layout({sizing = {width = clay.SizingFixed(60), height = clay.SizingFixed(60)}}),
clay.ImageConfig({imageData = &profilePicture, sourceDimensions = {height = 60, width = 60}}),
) {}
clay.Text(clay.ID("ProfileTitle"), clay.MakeString("Clay - UI Library"), clay.TextConfig({fontSize = 24, textColor = {255, 255, 255, 255}}))
clay.Text(clay.ID("ProfileTitle"), "Clay - UI Library", clay.TextConfig({fontSize = 24, textColor = {255, 255, 255, 255}}))
}
// Standard Odin code like loops etc work inside components
for i: u32 = 0; i < 10; i += 1 {
for i in 0..<10 {
SidebarItemComponent(i)
}
}
@ -135,9 +135,7 @@ for i: u32 = 0; i < renderCommands.length; i += 1 {
switch renderCommand.commandType {
case .Rectangle:
{
DrawRectangle(renderCommand.boundingBox, renderCommand.config.rectangleElementConfig.color)
}
// ... Implement handling of other command types
}
}

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

@ -31,8 +31,8 @@ Dimensions :: struct {
Arena :: struct {
label: String,
nextAllocation: c.uint64_t,
capacity: c.uint64_t,
nextAllocation: u64,
capacity: u64,
memory: [^]c.char,
}
@ -53,7 +53,7 @@ CornerRadius :: struct {
}
BorderData :: struct {
width: c.uint32_t,
width: u32,
color: Color,
}
@ -81,10 +81,10 @@ RectangleElementConfig :: struct {
TextElementConfig :: struct {
textColor: Color,
fontId: c.uint16_t,
fontSize: c.uint16_t,
letterSpacing: c.uint16_t,
lineSpacing: c.uint16_t,
fontId: u16,
fontSize: u16,
letterSpacing: u16,
lineSpacing: u16,
}
ImageElementConfig :: struct {
@ -106,8 +106,8 @@ BorderElementConfig :: struct {
}
ScrollElementConfig :: struct {
horizontal: c.bool,
vertical: c.bool,
horizontal: bool,
vertical: bool,
}
FloatingAttachPointType :: enum EnumBackingType {
@ -130,8 +130,8 @@ FloatingAttachPoints :: struct {
FloatingElementConfig :: struct {
offset: Vector2,
expand: Dimensions,
zIndex: c.uint16_t,
parentId: c.uint32_t,
zIndex: u16,
parentId: u32,
attachment: FloatingAttachPoints,
}
@ -147,7 +147,7 @@ RenderCommand :: struct {
boundingBox: BoundingBox,
config: ElementConfigUnion,
text: String,
id: c.uint32_t,
id: u32,
commandType: RenderCommandType,
}
@ -159,7 +159,7 @@ ScrollContainerData :: struct {
contentDimensions: Dimensions,
config: ScrollElementConfig,
// Indicates whether an actual scroll container matched the provided ID or if the default struct was returned.
found: c.bool,
found: bool,
}
SizingType :: enum EnumBackingType {
@ -190,8 +190,8 @@ Sizing :: struct {
}
Padding :: struct {
x: c.uint16_t,
y: c.uint16_t,
x: u16,
y: u16,
}
LayoutDirection :: enum EnumBackingType {
@ -219,30 +219,30 @@ ChildAlignment :: struct {
LayoutConfig :: struct {
sizing: Sizing,
padding: Padding,
childGap: c.uint16_t,
childGap: u16,
layoutDirection: LayoutDirection,
childAlignment: ChildAlignment,
}
ClayArray :: struct($type: typeid) {
capacity: c.uint32_t,
length: c.uint32_t,
capacity: u32,
length: u32,
internalArray: [^]type,
}
@(link_prefix = "Clay_", default_calling_convention = "c")
foreign Clay {
MinMemorySize :: proc() -> c.uint32_t ---
CreateArenaWithCapacityAndMemory :: proc(capacity: c.uint32_t, offset: [^]u8) -> Arena ---
MinMemorySize :: proc() -> u32 ---
CreateArenaWithCapacityAndMemory :: proc(capacity: u32, offset: [^]u8) -> Arena ---
SetPointerPosition :: proc(position: Vector2) ---
Initialize :: proc(arena: Arena) ---
UpdateScrollContainers :: proc(isPointerActive: c.bool, scrollDelta: Vector2, deltaTime: c.float) ---
UpdateScrollContainers :: proc(isPointerActive: bool, scrollDelta: Vector2, deltaTime: c.float) ---
BeginLayout :: proc(screenWidth: c.int, screenHeight: c.int) ---
EndLayout :: proc(screenWidth: c.int, screenHeight: c.int) -> ClayArray(RenderCommand) ---
PointerOver :: proc(id: c.uint32_t) -> c.bool ---
GetScrollContainerData :: proc(id: c.uint32_t) -> ScrollContainerData ---
PointerOver :: proc(id: u32) -> bool ---
GetScrollContainerData :: proc(id: u32) -> ScrollContainerData ---
SetMeasureTextFunction :: proc(measureTextFunction: proc(text: ^String, config: ^TextElementConfig) -> Dimensions) ---
RenderCommandArray_Get :: proc(array: ^ClayArray(RenderCommand), index: c.int32_t) -> ^RenderCommand ---
RenderCommandArray_Get :: proc(array: ^ClayArray(RenderCommand), index: i32) -> ^RenderCommand ---
}
@(private, link_prefix = "Clay_", default_calling_convention = "c")
@ -259,14 +259,14 @@ foreign _ {
@(link_prefix = "Clay_", default_calling_convention = "c", private)
foreign Clay {
_OpenContainerElement :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig) ---
_OpenRectangleElement :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, rectangleConfig: ^RectangleElementConfig) ---
_OpenTextElement :: proc(id: c.uint32_t, text: String, textConfig: ^TextElementConfig) ---
_OpenImageElement :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, imageConfig: ^ImageElementConfig) ---
_OpenScrollElement :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, imageConfig: ^ScrollElementConfig) ---
_OpenFloatingElement :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, imageConfig: ^FloatingElementConfig) ---
_OpenBorderElement :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, imageConfig: ^BorderElementConfig) ---
_OpenCustomElement :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, imageConfig: ^CustomElementConfig) ---
_OpenContainerElement :: proc(id: u32, layoutConfig: ^LayoutConfig) ---
_OpenRectangleElement :: proc(id: u32, layoutConfig: ^LayoutConfig, rectangleConfig: ^RectangleElementConfig) ---
_OpenTextElement :: proc(id: u32, text: String, textConfig: ^TextElementConfig) ---
_OpenImageElement :: proc(id: u32, layoutConfig: ^LayoutConfig, imageConfig: ^ImageElementConfig) ---
_OpenScrollElement :: proc(id: u32, layoutConfig: ^LayoutConfig, imageConfig: ^ScrollElementConfig) ---
_OpenFloatingElement :: proc(id: u32, layoutConfig: ^LayoutConfig, imageConfig: ^FloatingElementConfig) ---
_OpenBorderElement :: proc(id: u32, layoutConfig: ^LayoutConfig, imageConfig: ^BorderElementConfig) ---
_OpenCustomElement :: proc(id: u32, layoutConfig: ^LayoutConfig, imageConfig: ^CustomElementConfig) ---
_CloseElementWithChildren :: proc() ---
_CloseScrollElement :: proc() ---
_CloseFloatingElement :: proc() ---
@ -278,52 +278,52 @@ foreign Clay {
_CustomElementConfigArray_Add :: proc(array: ^ClayArray(CustomElementConfig), config: CustomElementConfig) -> ^CustomElementConfig ---
_ScrollElementConfigArray_Add :: proc(array: ^ClayArray(ScrollElementConfig), config: ScrollElementConfig) -> ^ScrollElementConfig ---
_BorderElementConfigArray_Add :: proc(array: ^ClayArray(BorderElementConfig), config: BorderElementConfig) -> ^BorderElementConfig ---
_HashString :: proc(toHash: String, index: c.uint32_t) -> c.uint32_t ---
_HashString :: proc(toHash: String, index: u32) -> u32 ---
}
@(require_results, deferred_none = _CloseElementWithChildren)
Container :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig) -> bool {
Container :: proc(id: u32, layoutConfig: ^LayoutConfig) -> bool {
_OpenContainerElement(id, layoutConfig)
return true
}
@(require_results, deferred_none = _CloseElementWithChildren)
Rectangle :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, rectangleConfig: ^RectangleElementConfig) -> bool {
Rectangle :: proc(id: u32, layoutConfig: ^LayoutConfig, rectangleConfig: ^RectangleElementConfig) -> bool {
_OpenRectangleElement(id, layoutConfig, rectangleConfig)
return true
}
Text :: proc(id: c.uint32_t, text: String, textConfig: ^TextElementConfig) -> bool {
_OpenTextElement(id, text, textConfig)
Text :: proc(id: u32, text: string, textConfig: ^TextElementConfig) -> bool {
_OpenTextElement(id, MakeString(text), textConfig)
return true
}
@(require_results, deferred_none = _CloseElementWithChildren)
Image :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, imageConfig: ^ImageElementConfig) -> bool {
Image :: proc(id: u32, layoutConfig: ^LayoutConfig, imageConfig: ^ImageElementConfig) -> bool {
_OpenImageElement(id, layoutConfig, imageConfig)
return true
}
@(require_results, deferred_none = _CloseScrollElement)
Scroll :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, scrollConfig: ^ScrollElementConfig) -> bool {
Scroll :: proc(id: u32, layoutConfig: ^LayoutConfig, scrollConfig: ^ScrollElementConfig) -> bool {
_OpenScrollElement(id, layoutConfig, scrollConfig)
return true
}
@(require_results, deferred_none = _CloseFloatingElement)
Floating :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, floatingConfig: ^FloatingElementConfig) -> bool {
Floating :: proc(id: u32, layoutConfig: ^LayoutConfig, floatingConfig: ^FloatingElementConfig) -> bool {
_OpenFloatingElement(id, layoutConfig, floatingConfig)
return true
}
@(require_results, deferred_none = _CloseElementWithChildren)
Border :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, borderConfig: ^BorderElementConfig) -> bool {
Border :: proc(id: u32, layoutConfig: ^LayoutConfig, borderConfig: ^BorderElementConfig) -> bool {
_OpenBorderElement(id, layoutConfig, borderConfig)
return true
}
@(require_results, deferred_none = _CloseElementWithChildren)
Custom :: proc(id: c.uint32_t, layoutConfig: ^LayoutConfig, customConfig: ^CustomElementConfig) -> bool {
Custom :: proc(id: u32, layoutConfig: ^LayoutConfig, customConfig: ^CustomElementConfig) -> bool {
_OpenCustomElement(id, layoutConfig, customConfig)
return true
}
@ -412,10 +412,6 @@ MakeString :: proc(label: string) -> String {
return String{chars = raw_data(label), length = cast(c.int)len(label)}
}
ID :: proc(label: string) -> c.uint32_t {
return _HashString(MakeString(label), 0)
}
IDI :: proc(label: string, index: u32) -> c.uint32_t {
ID :: proc(label: string, index: u32 = 0) -> u32 {
return _HashString(MakeString(label), index)
}

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

@ -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(
{
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(
{
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)

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

@ -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,31 +68,23 @@ 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)
}
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),
)
}
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)
radius: f32 = (config.cornerRadius.topLeft * 2) / min(boundingBox.width, boundingBox.height)
raylib.DrawRectangleRounded(
raylib.Rectangle{boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height},
radius,
@ -110,9 +100,7 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
clayColorToRaylibColor(config.color),
)
}
}
case clay.RenderCommandType.Border:
{
config := renderCommand.config.borderElementConfig
// Left border
if (config.left.width > 0) {
@ -204,11 +192,8 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
clayColorToRaylibColor(config.bottom.color),
)
}
}
case clay.RenderCommandType.Custom:
{
// Implement custom element rendering here
}
}
}
}