From 2cb241c3dcd5fe0d9d6db36586d26c7ddd0c2272 Mon Sep 17 00:00:00 2001 From: A1029384756 Date: Mon, 13 Apr 2026 10:31:24 -0400 Subject: [PATCH] [bindings/odin] update examples and run odinfmt --- bindings/odin/clay-odin/clay.odin | 655 +++++++++--------- .../clay-official-website.odin | 392 +++++------ .../clay_renderer_raylib.odin | 122 ++-- 3 files changed, 573 insertions(+), 596 deletions(-) diff --git a/bindings/odin/clay-odin/clay.odin b/bindings/odin/clay-odin/clay.odin index 27d687a..647d9d7 100644 --- a/bindings/odin/clay-odin/clay.odin +++ b/bindings/odin/clay-odin/clay.odin @@ -3,597 +3,600 @@ package clay import "core:c" when ODIN_OS == .Windows { - foreign import Clay "windows/clay.lib" + foreign import Clay "windows/clay.lib" } else when ODIN_OS == .Linux { - foreign import Clay "linux/clay.a" + foreign import Clay "linux/clay.a" } else when ODIN_OS == .Darwin { - when ODIN_ARCH == .arm64 { - foreign import Clay "macos-arm64/clay.a" - } else { - foreign import Clay "macos/clay.a" - } + when ODIN_ARCH == .arm64 { + foreign import Clay "macos-arm64/clay.a" + } else { + foreign import Clay "macos/clay.a" + } } else when ODIN_ARCH == .wasm32 || ODIN_ARCH == .wasm64p32 { - foreign import Clay "wasm/clay.o" + foreign import Clay "wasm/clay.o" } String :: struct { - isStaticallyAllocated: c.bool, - length: c.int32_t, - chars: [^]c.char, + isStaticallyAllocated: c.bool, + length: c.int32_t, + chars: [^]c.char, } StringSlice :: struct { - length: c.int32_t, - chars: [^]c.char, - baseChars: [^]c.char, + length: c.int32_t, + chars: [^]c.char, + baseChars: [^]c.char, } Vector2 :: [2]c.float Dimensions :: struct { - width: c.float, - height: c.float, + width: c.float, + height: c.float, } Arena :: struct { - nextAllocation: uintptr, - capacity: c.size_t, - memory: [^]c.char, + nextAllocation: uintptr, + capacity: c.size_t, + memory: [^]c.char, } BoundingBox :: struct { - x: c.float, - y: c.float, - width: c.float, - height: c.float, + x: c.float, + y: c.float, + width: c.float, + height: c.float, } Color :: [4]c.float CornerRadius :: struct { - topLeft: c.float, - topRight: c.float, - bottomLeft: c.float, - bottomRight: c.float, + topLeft: c.float, + topRight: c.float, + bottomLeft: c.float, + bottomRight: c.float, } ElementId :: struct { - id: u32, - offset: u32, - baseId: u32, - stringId: String, + id: u32, + offset: u32, + baseId: u32, + stringId: String, } ElementIdArray :: struct { - capacity: i32, - length: i32, - internalArray: [^]ElementId, + capacity: i32, + length: i32, + internalArray: [^]ElementId, } when ODIN_OS == .Windows { - EnumBackingType :: u32 + EnumBackingType :: u32 } else { - EnumBackingType :: u8 + EnumBackingType :: u8 } RenderCommandType :: enum EnumBackingType { - None, - Rectangle, - Border, - Text, - Image, - ScissorStart, - ScissorEnd, - OverlayColorStart, - OverlayColorEnd, - Custom, + None, + Rectangle, + Border, + Text, + Image, + ScissorStart, + ScissorEnd, + OverlayColorStart, + OverlayColorEnd, + Custom, } RectangleElementConfig :: struct { - color: Color, + color: Color, } TextWrapMode :: enum EnumBackingType { - Words, - Newlines, - None, + Words, + Newlines, + None, } TextAlignment :: enum EnumBackingType { - Left, - Center, - Right, + Left, + Center, + Right, } TextElementConfig :: struct { - userData: rawptr, - textColor: Color, - fontId: u16, - fontSize: u16, - letterSpacing: u16, - lineHeight: u16, - wrapMode: TextWrapMode, - textAlignment: TextAlignment, + userData: rawptr, + textColor: Color, + fontId: u16, + fontSize: u16, + letterSpacing: u16, + lineHeight: u16, + wrapMode: TextWrapMode, + textAlignment: TextAlignment, } AspectRatioElementConfig :: struct { - aspectRatio: f32, + aspectRatio: f32, } ImageElementConfig :: struct { - imageData: rawptr, + imageData: rawptr, } CustomElementConfig :: struct { - customData: rawptr, + customData: rawptr, } BorderWidth :: struct { - left: u16, - right: u16, - top: u16, - bottom: u16, - betweenChildren: u16, + left: u16, + right: u16, + top: u16, + bottom: u16, + betweenChildren: u16, } BorderElementConfig :: struct { - color: Color, - width: BorderWidth, + color: Color, + width: BorderWidth, } TransitionData :: struct { - boundingBox: BoundingBox, - backgroundColor: Color, - overlayColor: Color, - borderColor: Color, - borderWidth: BorderWidth, + boundingBox: BoundingBox, + backgroundColor: Color, + overlayColor: Color, + borderColor: Color, + borderWidth: BorderWidth, } TransitionState :: enum c.int { - Idle, - Entering, - Transitioning, - Exiting, + Idle, + Entering, + Transitioning, + Exiting, } TransitionProperty :: enum c.int { - None, - X, - Y, - Width, - Height, - BackgroundColor, - OverlayColor, - CornerRadius, - BorderColor, - BorderWidth, + None, + X, + Y, + Width, + Height, + BackgroundColor, + OverlayColor, + CornerRadius, + BorderColor, + BorderWidth, } -TransitionPropertyFlags :: bit_set[TransitionProperty; c.int] +TransitionPropertyFlags :: bit_set[TransitionProperty;c.int] TransitionPropertyPosition :: TransitionPropertyFlags{.X, .Y} TransitionPropertyDimensions :: TransitionPropertyFlags{.Width, .Height} TransitionPropertyBoundingBox :: TransitionPropertyPosition + TransitionPropertyDimensions TransitionPropertyBorder :: TransitionPropertyFlags{.BorderColor, .BorderWidth} TransitionCallbackArguments :: struct { - transitionState: TransitionState, - initial: TransitionData, - current: ^TransitionData, - target: TransitionData, - elapsedTime: f32, - duration: f32, - properties: TransitionPropertyFlags, + transitionState: TransitionState, + initial: TransitionData, + current: ^TransitionData, + target: TransitionData, + elapsedTime: f32, + duration: f32, + properties: TransitionPropertyFlags, } TransitionEnterTriggerType :: enum EnumBackingType { - SkipOnFirstParentFrame, - TriggerOnFirstParentFrame, + SkipOnFirstParentFrame, + TriggerOnFirstParentFrame, } TransitionExitTriggerType :: enum EnumBackingType { - SkipWhenParentExits, - TriggerWhenParentExits, + SkipWhenParentExits, + TriggerWhenParentExits, } TransitionInteractionHandlingType :: enum EnumBackingType { - DisableInteractionsWhileTransitioningPosition, - AllowInteractionsWhileTransitioningPosition, + DisableInteractionsWhileTransitioningPosition, + AllowInteractionsWhileTransitioningPosition, } ExitTransitionSiblingOrdering :: enum EnumBackingType { - UnderneathSiblings, - NaturalOrder, - AboveSiblings, + UnderneathSiblings, + NaturalOrder, + AboveSiblings, } TransitionElementConfig :: struct { - handler: proc "c" (args: TransitionCallbackArguments) -> bool, - duration: f32, - properties: TransitionPropertyFlags, - interactionHandling: TransitionInteractionHandlingType, - enter: struct { - setInitialState: proc "c" (initialState: TransitionData, properties: TransitionPropertyFlags) -> TransitionData, - trigger: TransitionEnterTriggerType, - }, - exit: struct { - setFinalState: proc "c" (finalState: TransitionData, properties: TransitionPropertyFlags) -> TransitionData, - trigger: TransitionExitTriggerType, - siblingOrdering: ExitTransitionSiblingOrdering, - }, + handler: proc "c" (args: TransitionCallbackArguments) -> bool, + duration: f32, + properties: TransitionPropertyFlags, + interactionHandling: TransitionInteractionHandlingType, + enter: struct { + setInitialState: proc "c" (initialState: TransitionData, properties: TransitionPropertyFlags) -> TransitionData, + trigger: TransitionEnterTriggerType, + }, + exit: struct { + setFinalState: proc "c" (finalState: TransitionData, properties: TransitionPropertyFlags) -> TransitionData, + trigger: TransitionExitTriggerType, + siblingOrdering: ExitTransitionSiblingOrdering, + }, } ClipElementConfig :: struct { - horizontal: bool, // clip overflowing elements on the "X" axis - vertical: bool, // clip overflowing elements on the "Y" axis - childOffset: Vector2, // offsets the [X,Y] positions of all child elements, primarily for scrolling containers + horizontal: bool, // clip overflowing elements on the "X" axis + vertical: bool, // clip overflowing elements on the "Y" axis + childOffset: Vector2, // offsets the [X,Y] positions of all child elements, primarily for scrolling containers } FloatingAttachPointType :: enum EnumBackingType { - LeftTop, - LeftCenter, - LeftBottom, - CenterTop, - CenterCenter, - CenterBottom, - RightTop, - RightCenter, - RightBottom, + LeftTop, + LeftCenter, + LeftBottom, + CenterTop, + CenterCenter, + CenterBottom, + RightTop, + RightCenter, + RightBottom, } FloatingAttachPoints :: struct { - element: FloatingAttachPointType, - parent: FloatingAttachPointType, + element: FloatingAttachPointType, + parent: FloatingAttachPointType, } PointerCaptureMode :: enum EnumBackingType { - Capture, - Passthrough, + Capture, + Passthrough, } FloatingAttachToElement :: enum EnumBackingType { - None, - Parent, - ElementWithId, - Root, + None, + Parent, + ElementWithId, + Root, } FloatingClipToElement :: enum EnumBackingType { - None, - AttachedParent, + None, + AttachedParent, } FloatingElementConfig :: struct { - offset: Vector2, - expand: Dimensions, - parentId: u32, - zIndex: i16, - attachment: FloatingAttachPoints, - pointerCaptureMode: PointerCaptureMode, - attachTo: FloatingAttachToElement, - clipTo: FloatingClipToElement, + offset: Vector2, + expand: Dimensions, + parentId: u32, + zIndex: i16, + attachment: FloatingAttachPoints, + pointerCaptureMode: PointerCaptureMode, + attachTo: FloatingAttachToElement, + clipTo: FloatingClipToElement, } TextRenderData :: struct { - stringContents: StringSlice, - textColor: Color, - fontId: u16, - fontSize: u16, - letterSpacing: u16, - lineHeight: u16, + stringContents: StringSlice, + textColor: Color, + fontId: u16, + fontSize: u16, + letterSpacing: u16, + lineHeight: u16, } RectangleRenderData :: struct { - backgroundColor: Color, - cornerRadius: CornerRadius, + backgroundColor: Color, + cornerRadius: CornerRadius, } ImageRenderData :: struct { - backgroundColor: Color, - cornerRadius: CornerRadius, - imageData: rawptr, + backgroundColor: Color, + cornerRadius: CornerRadius, + imageData: rawptr, } CustomRenderData :: struct { - backgroundColor: Color, - cornerRadius: CornerRadius, - customData: rawptr, + backgroundColor: Color, + cornerRadius: CornerRadius, + customData: rawptr, } ClipRenderData :: struct { - horizontal: bool, - vertical: bool, + horizontal: bool, + vertical: bool, } OverlayColorRenderData :: struct { - color: Color, + color: Color, } BorderRenderData :: struct { - color: Color, - cornerRadius: CornerRadius, - width: BorderWidth, + color: Color, + cornerRadius: CornerRadius, + width: BorderWidth, } RenderCommandData :: struct #raw_union { - rectangle: RectangleRenderData, - text: TextRenderData, - image: ImageRenderData, - custom: CustomRenderData, - border: BorderRenderData, - clip: ClipRenderData, - overlayColor: OverlayColorRenderData, + rectangle: RectangleRenderData, + text: TextRenderData, + image: ImageRenderData, + custom: CustomRenderData, + border: BorderRenderData, + clip: ClipRenderData, + overlayColor: OverlayColorRenderData, } RenderCommand :: struct { - boundingBox: BoundingBox, - renderData: RenderCommandData, - userData: rawptr, - id: u32, - zIndex: i16, - commandType: RenderCommandType, + boundingBox: BoundingBox, + renderData: RenderCommandData, + userData: rawptr, + id: u32, + zIndex: i16, + commandType: RenderCommandType, } ScrollContainerData :: struct { - // Note: This is a pointer to the real internal scroll position, mutating it may cause a change in final layout. - // Intended for use with external functionality that modifies scroll position, such as scroll bars or auto scrolling. - scrollPosition: ^Vector2, - scrollContainerDimensions: Dimensions, - contentDimensions: Dimensions, - config: ClipElementConfig, - // Indicates whether an actual scroll container matched the provided ID or if the default struct was returned. - found: bool, + // Note: This is a pointer to the real internal scroll position, mutating it may cause a change in final layout. + // Intended for use with external functionality that modifies scroll position, such as scroll bars or auto scrolling. + scrollPosition: ^Vector2, + scrollContainerDimensions: Dimensions, + contentDimensions: Dimensions, + config: ClipElementConfig, + // Indicates whether an actual scroll container matched the provided ID or if the default struct was returned. + found: bool, } ElementData :: struct { - boundingBox: BoundingBox, - found: bool, + boundingBox: BoundingBox, + found: bool, } PointerDataInteractionState :: enum EnumBackingType { - PressedThisFrame, - Pressed, - ReleasedThisFrame, - Released, + PressedThisFrame, + Pressed, + ReleasedThisFrame, + Released, } PointerData :: struct { - position: Vector2, - state: PointerDataInteractionState, + position: Vector2, + state: PointerDataInteractionState, } SizingType :: enum EnumBackingType { - Fit, - Grow, - Percent, - Fixed, + Fit, + Grow, + Percent, + Fixed, } SizingConstraintsMinMax :: struct { - min: c.float, - max: c.float, + min: c.float, + max: c.float, } SizingConstraints :: struct #raw_union { - sizeMinMax: SizingConstraintsMinMax, - sizePercent: c.float, + sizeMinMax: SizingConstraintsMinMax, + sizePercent: c.float, } SizingAxis :: struct { - // Note: `min` is used for CLAY_SIZING_PERCENT, slightly different to clay.h due to lack of C anonymous unions - constraints: SizingConstraints, - type: SizingType, + // Note: `min` is used for CLAY_SIZING_PERCENT, slightly different to clay.h due to lack of C anonymous unions + constraints: SizingConstraints, + type: SizingType, } Sizing :: struct { - width: SizingAxis, - height: SizingAxis, + width: SizingAxis, + height: SizingAxis, } Padding :: struct { - left: u16, - right: u16, - top: u16, - bottom: u16, + left: u16, + right: u16, + top: u16, + bottom: u16, } LayoutDirection :: enum EnumBackingType { - LeftToRight, - TopToBottom, + LeftToRight, + TopToBottom, } LayoutAlignmentX :: enum EnumBackingType { - Left, - Right, - Center, + Left, + Right, + Center, } LayoutAlignmentY :: enum EnumBackingType { - Top, - Bottom, - Center, + Top, + Bottom, + Center, } ChildAlignment :: struct { - x: LayoutAlignmentX, - y: LayoutAlignmentY, + x: LayoutAlignmentX, + y: LayoutAlignmentY, } LayoutConfig :: struct { - sizing: Sizing, - padding: Padding, - childGap: u16, - childAlignment: ChildAlignment, - layoutDirection: LayoutDirection, + sizing: Sizing, + padding: Padding, + childGap: u16, + childAlignment: ChildAlignment, + layoutDirection: LayoutDirection, } ClayArray :: struct($type: typeid) { - capacity: i32, - length: i32, - internalArray: [^]type, + capacity: i32, + length: i32, + internalArray: [^]type, } ElementDeclaration :: struct { - layout: LayoutConfig, - backgroundColor: Color, - overlayColor: Color, - cornerRadius: CornerRadius, - aspectRatio: AspectRatioElementConfig, - image: ImageElementConfig, - floating: FloatingElementConfig, - custom: CustomElementConfig, - clip: ClipElementConfig, - border: BorderElementConfig, - transition: TransitionElementConfig, - userData: rawptr, + layout: LayoutConfig, + backgroundColor: Color, + overlayColor: Color, + cornerRadius: CornerRadius, + aspectRatio: AspectRatioElementConfig, + image: ImageElementConfig, + floating: FloatingElementConfig, + custom: CustomElementConfig, + clip: ClipElementConfig, + border: BorderElementConfig, + transition: TransitionElementConfig, + userData: rawptr, } ErrorType :: enum EnumBackingType { - TextMeasurementFunctionNotProvided, - ArenaCapacityExceeded, - ElementsCapacityExceeded, - TextMeasurementCapacityExceeded, - DuplicateId, - FloatingContainerParentNotFound, - PercentageOver1, - InternalError, - UnbalancedOpenClose, + TextMeasurementFunctionNotProvided, + ArenaCapacityExceeded, + ElementsCapacityExceeded, + TextMeasurementCapacityExceeded, + DuplicateId, + FloatingContainerParentNotFound, + PercentageOver1, + InternalError, + UnbalancedOpenClose, } ErrorData :: struct { - errorType: ErrorType, - errorText: String, - userData: rawptr, + errorType: ErrorType, + errorText: String, + userData: rawptr, } ErrorHandler :: struct { - handler: proc "c" (errorData: ErrorData), - userData: rawptr, + handler: proc "c" (errorData: ErrorData), + userData: rawptr, } Context :: struct {} // opaque structure, only use as a pointer @(link_prefix = "Clay_", default_calling_convention = "c") foreign Clay { - _OpenElement :: proc() --- - _OpenElementWithId :: proc(id: ElementId) --- - _CloseElement :: proc() --- - MinMemorySize :: proc() -> u32 --- - CreateArenaWithCapacityAndMemory :: proc(capacity: c.size_t, offset: [^]u8) -> Arena --- - SetPointerState :: proc(position: Vector2, pointerDown: bool) --- - GetPointerState :: proc() -> PointerData --- - Initialize :: proc(arena: Arena, layoutDimensions: Dimensions, errorHandler: ErrorHandler) -> ^Context --- - GetCurrentContext :: proc() -> ^Context --- - SetCurrentContext :: proc(ctx: ^Context) --- - UpdateScrollContainers :: proc(enableDragScrolling: bool, scrollDelta: Vector2, deltaTime: c.float) --- - SetLayoutDimensions :: proc(dimensions: Dimensions) --- - BeginLayout :: proc() --- - EndLayout :: proc(deltaTime: c.float) -> ClayArray(RenderCommand) --- - GetOpenElementId :: proc() -> u32 --- - GetElementId :: proc(id: String) -> ElementId --- - GetElementIdWithIndex :: proc(id: String, index: u32) -> ElementId --- - GetElementData :: proc(id: ElementId) -> ElementData --- - Hovered :: proc() -> bool --- - OnHover :: proc(onHoverFunction: proc "c" (id: ElementId, pointerData: PointerData, userData: rawptr), userData: rawptr) --- - PointerOver :: proc(id: ElementId) -> bool --- - GetPointerOverIds :: proc() -> ElementIdArray --- - GetScrollOffset :: proc() -> Vector2 --- - GetScrollContainerData :: proc(id: ElementId) -> ScrollContainerData --- - SetMeasureTextFunction :: proc(measureTextFunction: proc "c" (text: StringSlice, config: ^TextElementConfig, userData: rawptr) -> Dimensions, userData: rawptr) --- - SetQueryScrollOffsetFunction :: proc(queryScrollOffsetFunction: proc "c" (elementId: u32, userData: rawptr) -> Vector2, userData: rawptr) --- - RenderCommandArray_Get :: proc(array: ^ClayArray(RenderCommand), index: i32) -> ^RenderCommand --- - SetDebugModeEnabled :: proc(enabled: bool) --- - IsDebugModeEnabled :: proc() -> bool --- - SetCullingEnabled :: proc(enabled: bool) --- - GetMaxElementCount :: proc() -> i32 --- - SetMaxElementCount :: proc(maxElementCount: i32) --- - GetMaxMeasureTextCacheWordCount :: proc() -> i32 --- - SetMaxMeasureTextCacheWordCount :: proc(maxMeasureTextCacheWordCount: i32) --- - ResetMeasureTextCache :: proc() --- - EaseOut :: proc(arguments: TransitionCallbackArguments) -> bool --- + _OpenElement :: proc() --- + _OpenElementWithId :: proc(id: ElementId) --- + _CloseElement :: proc() --- + MinMemorySize :: proc() -> u32 --- + CreateArenaWithCapacityAndMemory :: proc(capacity: c.size_t, offset: [^]u8) -> Arena --- + SetPointerState :: proc(position: Vector2, pointerDown: bool) --- + GetPointerState :: proc() -> PointerData --- + Initialize :: proc(arena: Arena, layoutDimensions: Dimensions, errorHandler: ErrorHandler) -> ^Context --- + GetCurrentContext :: proc() -> ^Context --- + SetCurrentContext :: proc(ctx: ^Context) --- + UpdateScrollContainers :: proc(enableDragScrolling: bool, scrollDelta: Vector2, deltaTime: c.float) --- + SetLayoutDimensions :: proc(dimensions: Dimensions) --- + BeginLayout :: proc() --- + EndLayout :: proc(deltaTime: c.float) -> ClayArray(RenderCommand) --- + GetOpenElementId :: proc() -> u32 --- + GetElementId :: proc(id: String) -> ElementId --- + GetElementIdWithIndex :: proc(id: String, index: u32) -> ElementId --- + GetElementData :: proc(id: ElementId) -> ElementData --- + Hovered :: proc() -> bool --- + OnHover :: proc(onHoverFunction: proc "c" (id: ElementId, pointerData: PointerData, userData: rawptr), userData: rawptr) --- + PointerOver :: proc(id: ElementId) -> bool --- + GetPointerOverIds :: proc() -> ElementIdArray --- + GetScrollOffset :: proc() -> Vector2 --- + GetScrollContainerData :: proc(id: ElementId) -> ScrollContainerData --- + SetMeasureTextFunction :: proc(measureTextFunction: proc "c" (text: StringSlice, config: ^TextElementConfig, userData: rawptr) -> Dimensions, userData: rawptr) --- + SetQueryScrollOffsetFunction :: proc(queryScrollOffsetFunction: proc "c" (elementId: u32, userData: rawptr) -> Vector2, userData: rawptr) --- + RenderCommandArray_Get :: proc(array: ^ClayArray(RenderCommand), index: i32) -> ^RenderCommand --- + SetDebugModeEnabled :: proc(enabled: bool) --- + IsDebugModeEnabled :: proc() -> bool --- + SetCullingEnabled :: proc(enabled: bool) --- + GetMaxElementCount :: proc() -> i32 --- + SetMaxElementCount :: proc(maxElementCount: i32) --- + GetMaxMeasureTextCacheWordCount :: proc() -> i32 --- + SetMaxMeasureTextCacheWordCount :: proc(maxMeasureTextCacheWordCount: i32) --- + ResetMeasureTextCache :: proc() --- + EaseOut :: proc(arguments: TransitionCallbackArguments) -> bool --- } @(link_prefix = "Clay_", default_calling_convention = "c", private) foreign Clay { - _ConfigureOpenElement :: proc(config: ElementDeclaration) --- - _HashString :: proc(key: String, seed: u32) -> ElementId --- - _HashStringWithOffset :: proc(key: String, index: u32, seed: u32) -> ElementId --- - _OpenTextElement :: proc(text: String, textConfig: TextElementConfig) --- + _ConfigureOpenElement :: proc(config: ElementDeclaration) --- + _HashString :: proc(key: String, seed: u32) -> ElementId --- + _HashStringWithOffset :: proc(key: String, index: u32, seed: u32) -> ElementId --- + _OpenTextElement :: proc(text: String, textConfig: TextElementConfig) --- } ConfigureOpenElement :: proc(config: ElementDeclaration) -> bool { - _ConfigureOpenElement(config) - return true + _ConfigureOpenElement(config) + return true } @(deferred_none = _CloseElement) -UI_WithId :: proc(id: ElementId) -> proc (config: ElementDeclaration) -> bool { - _OpenElementWithId(id) - return ConfigureOpenElement +UI_WithId :: proc(id: ElementId) -> proc(config: ElementDeclaration) -> bool { + _OpenElementWithId(id) + return ConfigureOpenElement } @(deferred_none = _CloseElement) -UI_AutoId :: proc() -> proc (config: ElementDeclaration) -> bool { - _OpenElement() - return ConfigureOpenElement +UI_AutoId :: proc() -> proc(config: ElementDeclaration) -> bool { + _OpenElement() + return ConfigureOpenElement } -UI :: proc{UI_WithId, UI_AutoId} +UI :: proc { + UI_WithId, + UI_AutoId, +} Text :: proc { - TextStatic, - TextDynamic, + TextStatic, + TextDynamic, } TextStatic :: proc($text: string, config: TextElementConfig) { - wrapped := MakeString(text) - wrapped.isStaticallyAllocated = true - _OpenTextElement(wrapped, config) + wrapped := MakeString(text) + wrapped.isStaticallyAllocated = true + _OpenTextElement(wrapped, config) } TextDynamic :: proc(text: string, config: TextElementConfig) { - _OpenTextElement(MakeString(text), config) + _OpenTextElement(MakeString(text), config) } PaddingAll :: proc(allPadding: u16) -> Padding { - return { left = allPadding, right = allPadding, top = allPadding, bottom = allPadding } + return {left = allPadding, right = allPadding, top = allPadding, bottom = allPadding} } BorderOutside :: proc(width: u16) -> BorderWidth { - return {width, width, width, width, 0} + return {width, width, width, width, 0} } BorderAll :: proc(width: u16) -> BorderWidth { - return {width, width, width, width, width} + return {width, width, width, width, width} } CornerRadiusAll :: proc(radius: f32) -> CornerRadius { - return CornerRadius{radius, radius, radius, radius} + return CornerRadius{radius, radius, radius, radius} } 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 { - return SizingAxis{type = SizingType.Grow, constraints = {sizeMinMax = sizeMinMax}} + return SizingAxis{type = SizingType.Grow, constraints = {sizeMinMax = sizeMinMax}} } 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 { - return SizingAxis{type = SizingType.Percent, constraints = {sizePercent = sizePercent}} + return SizingAxis{type = SizingType.Percent, constraints = {sizePercent = sizePercent}} } MakeString :: proc(label: string) -> String { - return String{chars = raw_data(label), length = cast(c.int)len(label)} + return String{chars = raw_data(label), length = cast(c.int)len(label)} } ID :: proc(label: string, index: u32 = 0) -> ElementId { - return _HashString(MakeString(label), index) + return _HashString(MakeString(label), index) } ID_LOCAL :: proc(label: string, index: u32 = 0) -> ElementId { - return _HashStringWithOffset(MakeString(label), index, GetOpenElementId()) + return _HashStringWithOffset(MakeString(label), index, GetOpenElementId()) } diff --git a/bindings/odin/examples/clay-official-website/clay-official-website.odin b/bindings/odin/examples/clay-official-website/clay-official-website.odin index 78b4e28..df328ff 100644 --- a/bindings/odin/examples/clay-official-website/clay-official-website.odin +++ b/bindings/odin/examples/clay-official-website/clay-official-website.odin @@ -2,7 +2,6 @@ package main import clay "../../clay-odin" import "core:c" -import "core:fmt" import "vendor:raylib" windowWidth: i32 = 1024 @@ -58,47 +57,50 @@ headerTextConfig := clay.TextElementConfig { } border2pxRed := clay.BorderElementConfig { - width = { 2, 2, 2, 2, 0 }, - color = COLOR_RED + width = {2, 2, 2, 2, 0}, + color = COLOR_RED, } LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Color, $text: string, image: ^raylib.Texture2D) { - if clay.UI(clay.ID("HeroBlob", index))({ - layout = { sizing = { width = clay.SizingGrow({ max = 480 }) }, padding = clay.PaddingAll(16), childGap = 16, childAlignment = clay.ChildAlignment{ y = .Center } }, + if clay.UI(clay.ID("HeroBlob", index))( + { + layout = {sizing = {width = clay.SizingGrow({max = 480})}, padding = clay.PaddingAll(16), childGap = 16, childAlignment = clay.ChildAlignment{y = .Center}}, border = border2pxRed, - cornerRadius = clay.CornerRadiusAll(10) - }) { - if clay.UI(clay.ID("CheckImage", index))({ - layout = { sizing = { width = clay.SizingFixed(32) } }, - aspectRatio = { 1.0 }, - image = { imageData = image }, - }) {} - clay.Text(text, clay.TextConfig({fontSize = fontSize, fontId = fontId, textColor = color})) + cornerRadius = clay.CornerRadiusAll(10), + }, + ) { + if clay.UI(clay.ID("CheckImage", index))({layout = {sizing = {width = clay.SizingFixed(32)}}, aspectRatio = {1.0}, image = {imageData = image}}) {} + clay.Text(text, {fontSize = fontSize, fontId = fontId, textColor = color}) } } LandingPageDesktop :: proc() { - if clay.UI(clay.ID("LandingPage1Desktop"))({ - layout = { sizing = { width = clay.SizingGrow(), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } }, - }) { - if clay.UI(clay.ID("LandingPage1"))({ - layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 }, - border = { COLOR_RED, { left = 2, right = 2 } }, - }) { - if clay.UI(clay.ID("LeftText"))({ layout = { sizing = { width = clay.SizingPercent(0.55) }, layoutDirection = .TopToBottom, childGap = 8 } }) { + if clay.UI(clay.ID("LandingPage1Desktop"))( + { + layout = { + sizing = {width = clay.SizingGrow(), height = clay.SizingFit({min = cast(f32)windowHeight - 70})}, + childAlignment = {y = .Center}, + padding = {left = 50, right = 50}, + }, + }, + ) { + if clay.UI(clay.ID("LandingPage1"))( + { + layout = {sizing = {clay.SizingGrow(), clay.SizingGrow()}, childAlignment = {y = .Center}, padding = clay.PaddingAll(32), childGap = 32}, + border = {COLOR_RED, {left = 2, right = 2}}, + }, + ) { + if clay.UI(clay.ID("LeftText"))({layout = {sizing = {width = clay.SizingPercent(0.55)}, layoutDirection = .TopToBottom, childGap = 8}}) { clay.Text( "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.UI()({ layout = { sizing = { width = clay.SizingGrow({}), height = clay.SizingFixed(32) } } }) {} - clay.Text( - "Clay is laying out this webpage right now!", - clay.TextConfig({fontSize = 36, fontId = FONT_ID_TITLE_36, textColor = COLOR_ORANGE}), + {fontSize = 56, fontId = FONT_ID_TITLE_56, textColor = COLOR_RED}, ) + if clay.UI()({layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}}}) {} + clay.Text("Clay is laying out this webpage right now!", {fontSize = 36, fontId = FONT_ID_TITLE_36, textColor = COLOR_ORANGE}) } - if clay.UI(clay.ID("HeroImageOuter"))({ - layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingPercent(0.45) }, childAlignment = { x = .Center }, childGap = 16 }, - }) { + if clay.UI(clay.ID("HeroImageOuter"))( + {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(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) @@ -110,29 +112,26 @@ LandingPageDesktop :: proc() { } LandingPageMobile :: proc() { - if clay.UI(clay.ID("LandingPage1Mobile"))({ + if clay.UI(clay.ID("LandingPage1Mobile"))( + { layout = { layoutDirection = .TopToBottom, - sizing = { width = clay.SizingGrow(), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, - childAlignment = { x = .Center, y = .Center }, - padding = { 16, 16, 32, 32 }, + sizing = {width = clay.SizingGrow(), height = clay.SizingFit({min = cast(f32)windowHeight - 70})}, + childAlignment = {x = .Center, y = .Center}, + padding = {16, 16, 32, 32}, childGap = 32, }, - }) { - if clay.UI(clay.ID("LeftText"))({ layout = { sizing = { width = clay.SizingGrow() }, layoutDirection = .TopToBottom, childGap = 8 } }) { + }, + ) { + if clay.UI(clay.ID("LeftText"))({layout = {sizing = {width = clay.SizingGrow()}, layoutDirection = .TopToBottom, childGap = 8}}) { clay.Text( "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.UI()({ layout = { sizing = { width = clay.SizingGrow({}), height = clay.SizingFixed(32) } } }) {} - clay.Text( - "Clay is laying out this webpage right now!", - clay.TextConfig({fontSize = 32, fontId = FONT_ID_TITLE_32, textColor = COLOR_ORANGE}), + {fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, ) + if clay.UI()({layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}}}) {} + clay.Text("Clay is laying out this webpage right now!", {fontSize = 32, fontId = FONT_ID_TITLE_32, textColor = COLOR_ORANGE}) } - if clay.UI(clay.ID("HeroImageOuter"))({ - layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow() }, childAlignment = { x = .Center }, childGap = 16 }, - }) { + if clay.UI(clay.ID("HeroImageOuter"))({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(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) @@ -143,94 +142,89 @@ LandingPageMobile :: proc() { } FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) { - textConfig := clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_RED}) - if clay.UI(clay.ID("HFileBoxOuter"))({ - layout = { layoutDirection = .TopToBottom, sizing = { width = widthSizing }, childAlignment = { y = .Center }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 }, - }) { - if clay.UI(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})) + textConfig := clay.TextElementConfig { + fontSize = 24, + fontId = FONT_ID_BODY_24, + textColor = COLOR_RED, + } + if clay.UI(clay.ID("HFileBoxOuter"))( + {layout = {layoutDirection = .TopToBottom, sizing = {width = widthSizing}, childAlignment = {y = .Center}, padding = {outerPadding, outerPadding, 32, 32}, childGap = 8}}, + ) { + if clay.UI(clay.ID("HFileIncludeOuter"))({layout = {padding = {8, 8, 4, 4}}, backgroundColor = COLOR_RED, cornerRadius = clay.CornerRadiusAll(8)}) { + clay.Text("#include clay.h", {fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_LIGHT}) } clay.Text("~2000 lines of C99.", textConfig) clay.Text("Zero dependencies, including no C standard library.", textConfig) } - if clay.UI(clay.ID("BringYourOwnRendererOuter"))({ - 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})) + if clay.UI(clay.ID("BringYourOwnRendererOuter"))( + {layout = {layoutDirection = .TopToBottom, sizing = {width = widthSizing}, childAlignment = {y = .Center}, padding = {outerPadding, outerPadding, 32, 32}, childGap = 8}}, + ) { + clay.Text("Renderer agnostic.", {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("Flexible output for easy compositing in your custom engine or environment.", textConfig) } } FeatureBlocksDesktop :: proc() { - if clay.UI(clay.ID("FeatureBlocksOuter"))({ layout = { sizing = { width = clay.SizingGrow({}) } } }) { - if clay.UI(clay.ID("FeatureBlocksInner"))({ - layout = { sizing = { width = clay.SizingGrow() }, childAlignment = { y = .Center } }, - border = { width = { betweenChildren = 2}, color = COLOR_RED }, - }) { + if clay.UI(clay.ID("FeatureBlocksOuter"))({layout = {sizing = {width = clay.SizingGrow({})}}}) { + if clay.UI(clay.ID("FeatureBlocksInner"))( + {layout = {sizing = {width = clay.SizingGrow()}, childAlignment = {y = .Center}}, border = {width = {betweenChildren = 2}, color = COLOR_RED}}, + ) { FeatureBlocks(clay.SizingPercent(0.5), 50) } } } FeatureBlocksMobile :: proc() { - if clay.UI(clay.ID("FeatureBlocksInner"))({ - layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow() } }, - border = { width = { betweenChildren = 2}, color = COLOR_RED }, - }) { + if clay.UI(clay.ID("FeatureBlocksInner"))( + {layout = {layoutDirection = .TopToBottom, sizing = {width = clay.SizingGrow()}}, border = {width = {betweenChildren = 2}, color = COLOR_RED}}, + ) { FeatureBlocks(clay.SizingGrow({}), 16) } } DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) { - if clay.UI(clay.ID("SyntaxPageLeftText"))({ layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) { - clay.Text("Declarative Syntax", clay.TextConfig(titleTextConfig)) - if clay.UI(clay.ID("SyntaxSpacer"))({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {} - clay.Text( - "Flexible and readable declarative syntax with nested UI element hierarchies.", - clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}), - ) - clay.Text( - "Mix elements with standard C code like loops, conditionals and functions.", - clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}), - ) + if clay.UI(clay.ID("SyntaxPageLeftText"))({layout = {sizing = {width = widthSizing}, layoutDirection = .TopToBottom, childGap = 8}}) { + clay.Text("Declarative Syntax", titleTextConfig) + if clay.UI(clay.ID("SyntaxSpacer"))({layout = {sizing = {width = clay.SizingGrow({max = 16})}}}) {} + clay.Text("Flexible and readable declarative syntax with nested UI element hierarchies.", {fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}) + clay.Text("Mix elements with standard C code like loops, conditionals and functions.", {fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}) clay.Text( "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}), + {fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}, ) } - if clay.UI(clay.ID("SyntaxPageRightImage"))({ layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) { - if clay.UI(clay.ID("SyntaxPageRightImageInner"))({ - layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } }, - aspectRatio = { 1136.0 / 1194.0 }, - image = { imageData = &syntaxImage }, - }) {} + if clay.UI(clay.ID("SyntaxPageRightImage"))({layout = {sizing = {width = widthSizing}, childAlignment = {x = .Center}}}) { + if clay.UI(clay.ID("SyntaxPageRightImageInner"))( + {layout = {sizing = {width = clay.SizingGrow({max = 568})}}, aspectRatio = {1136.0 / 1194.0}, image = {imageData = &syntaxImage}}, + ) {} } } DeclarativeSyntaxPageDesktop :: proc() { - if clay.UI(clay.ID("SyntaxPageDesktop"))({ - layout = { sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } }, - }) { - if clay.UI(clay.ID("SyntaxPage"))({ - layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 }, - border = border2pxRed, - }) { + if clay.UI(clay.ID("SyntaxPageDesktop"))( + {layout = {sizing = {clay.SizingGrow(), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .Center}, padding = {left = 50, right = 50}}}, + ) { + if clay.UI(clay.ID("SyntaxPage"))( + {layout = {sizing = {clay.SizingGrow(), clay.SizingGrow()}, childAlignment = {y = .Center}, padding = clay.PaddingAll(32), childGap = 32}, border = border2pxRed}, + ) { DeclarativeSyntaxPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5)) } } } DeclarativeSyntaxPageMobile :: proc() { - if clay.UI(clay.ID("SyntaxPageMobile"))({ + if clay.UI(clay.ID("SyntaxPageMobile"))( + { layout = { layoutDirection = .TopToBottom, - sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, - childAlignment = { x = .Center, y = .Center }, - padding = { 16, 16, 32, 32 }, + sizing = {clay.SizingGrow(), clay.SizingFit({min = cast(f32)windowHeight - 50})}, + childAlignment = {x = .Center, y = .Center}, + padding = {16, 16, 32, 32}, childGap = 16, }, - }) { + }, + ) { DeclarativeSyntaxPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({})) } } @@ -242,139 +236,125 @@ 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." HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) { - if clay.UI(clay.ID("PerformanceLeftText"))({ layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) { - clay.Text("High Performance", clay.TextConfig(titleTextConfig)) - if clay.UI()({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } }}) {} - clay.Text( - "Fast enough to recompute your entire UI every frame.", - clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}), - ) - clay.Text( - "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( - "Simplify animations and reactive UI design by avoiding the standard performance hacks.", - clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}), - ) + if clay.UI(clay.ID("PerformanceLeftText"))({layout = {sizing = {width = widthSizing}, layoutDirection = .TopToBottom, childGap = 8}}) { + clay.Text("High Performance", titleTextConfig) + if clay.UI()({layout = {sizing = {width = clay.SizingGrow({max = 16})}}}) {} + clay.Text("Fast enough to recompute your entire UI every frame.", {fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}) + clay.Text("Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free.", {fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}) + clay.Text("Simplify animations and reactive UI design by avoiding the standard performance hacks.", {fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}) } - if clay.UI(clay.ID("PerformanceRightImageOuter"))({ layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) { - if clay.UI(clay.ID("PerformanceRightBorder"))({ - layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(400) } }, - border = { COLOR_LIGHT, {2, 2, 2, 2, 2} }, - }) { - if clay.UI(clay.ID("AnimationDemoContainerLeft"))({ - layout = { sizing = { clay.SizingPercent(0.35 + 0.3 * lerpValue), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(16) }, + if clay.UI(clay.ID("PerformanceRightImageOuter"))({layout = {sizing = {width = widthSizing}, childAlignment = {x = .Center}}}) { + if clay.UI(clay.ID("PerformanceRightBorder"))({layout = {sizing = {clay.SizingGrow(), clay.SizingFixed(400)}}, border = {COLOR_LIGHT, {2, 2, 2, 2, 2}}}) { + if clay.UI(clay.ID("AnimationDemoContainerLeft"))( + { + 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), - }) { - clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT})) + }, + ) { + clay.Text(LOREM_IPSUM_TEXT, {fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}) } - if clay.UI(clay.ID("AnimationDemoContainerRight"))({ - layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(16) }, + if clay.UI(clay.ID("AnimationDemoContainerRight"))( + { + layout = {sizing = {clay.SizingGrow(), clay.SizingGrow()}, childAlignment = {y = .Center}, padding = clay.PaddingAll(16)}, 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, {fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}) } } } } HighPerformancePageDesktop :: proc(lerpValue: f32) { - if clay.UI(clay.ID("PerformanceDesktop"))({ - layout = { sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { 82, 82, 32, 32 }, childGap = 64 }, + if clay.UI(clay.ID("PerformanceDesktop"))( + { + layout = {sizing = {clay.SizingGrow(), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .Center}, padding = {82, 82, 32, 32}, childGap = 64}, backgroundColor = COLOR_RED, - }) { + }, + ) { HighPerformancePage(lerpValue, {fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}, clay.SizingPercent(0.5)) } } HighPerformancePageMobile :: proc(lerpValue: f32) { - if clay.UI(clay.ID("PerformanceMobile"))({ + if clay.UI(clay.ID("PerformanceMobile"))( + { layout = { layoutDirection = .TopToBottom, - sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, - childAlignment = { x = .Center, y = .Center }, - padding = { 16, 16, 32, 32 }, + sizing = {clay.SizingGrow(), clay.SizingFit({min = cast(f32)windowHeight - 50})}, + childAlignment = {x = .Center, y = .Center}, + padding = {16, 16, 32, 32}, childGap = 32, }, backgroundColor = COLOR_RED, - }) { + }, + ) { HighPerformancePage(lerpValue, {fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_LIGHT}, clay.SizingGrow({})) } } RendererButtonActive :: proc(index: i32, $text: string) { - if clay.UI()({ - layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) }, - backgroundColor = COLOR_RED, - cornerRadius = clay.CornerRadiusAll(10) - }) { - clay.Text(text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT})) + if clay.UI()({layout = {sizing = {width = clay.SizingFixed(300)}, padding = clay.PaddingAll(16)}, backgroundColor = COLOR_RED, cornerRadius = clay.CornerRadiusAll(10)}) { + clay.Text(text, {fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT}) } } RendererButtonInactive :: proc(index: u32, $text: string) { - if clay.UI()({ border = border2pxRed }) { - if clay.UI(clay.ID("RendererButtonInactiveInner", index))({ - layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) }, - backgroundColor = COLOR_LIGHT, - cornerRadius = clay.CornerRadiusAll(10) - }) { + if clay.UI()({border = border2pxRed}) { + if clay.UI(clay.ID("RendererButtonInactiveInner", index))( + {layout = {sizing = {width = clay.SizingFixed(300)}, padding = clay.PaddingAll(16)}, backgroundColor = COLOR_LIGHT, cornerRadius = clay.CornerRadiusAll(10)}, + ) { clay.Text(text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED})) } } } RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) { - if clay.UI(clay.ID("RendererLeftText"))({ layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) { - clay.Text("Renderer & Platform Agnostic", clay.TextConfig(titleTextConfig)) - if clay.UI()({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {} - clay.Text( - "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}), - ) + if clay.UI(clay.ID("RendererLeftText"))({layout = {sizing = {width = widthSizing}, layoutDirection = .TopToBottom, childGap = 8}}) { + clay.Text("Renderer & Platform Agnostic", titleTextConfig) + if clay.UI()({layout = {sizing = {width = clay.SizingGrow({max = 16})}}}) {} + clay.Text("Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.", {fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}) clay.Text( "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( - "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}), + {fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}, ) + clay.Text("There's even an HTML renderer - you're looking at it right now!", {fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}) } - if clay.UI(clay.ID("RendererRightText"))({ - 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})) - if clay.UI()({ layout = { sizing = { width = clay.SizingGrow({ max = 32 }) } } }) {} + if clay.UI(clay.ID("RendererRightText"))({layout = {sizing = {width = widthSizing}, childAlignment = {x = .Center}, layoutDirection = .TopToBottom, childGap = 16}}) { + clay.Text("Try changing renderer!", {fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE}) + if clay.UI()({layout = {sizing = {width = clay.SizingGrow({max = 32})}}}) {} RendererButtonActive(0, "Raylib Renderer") } } RendererPageDesktop :: proc() { - if clay.UI(clay.ID("RendererPageDesktop"))({ - layout = { sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } }, - }) { - if clay.UI(clay.ID("RendererPage"))({ - layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 }, - border = { COLOR_RED, { left = 2, right = 2 } }, - }) { + if clay.UI(clay.ID("RendererPageDesktop"))( + {layout = {sizing = {clay.SizingGrow(), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .Center}, padding = {left = 50, right = 50}}}, + ) { + if clay.UI(clay.ID("RendererPage"))( + { + layout = {sizing = {clay.SizingGrow(), clay.SizingGrow()}, childAlignment = {y = .Center}, padding = clay.PaddingAll(32), childGap = 32}, + border = {COLOR_RED, {left = 2, right = 2}}, + }, + ) { RendererPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5)) } } } RendererPageMobile :: proc() { - if clay.UI(clay.ID("RendererMobile"))({ + if clay.UI(clay.ID("RendererMobile"))( + { layout = { layoutDirection = .TopToBottom, - sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, - childAlignment = { x = .Center, y = .Center }, - padding = { 16, 16, 32, 32 }, + sizing = {clay.SizingGrow(), clay.SizingFit({min = cast(f32)windowHeight - 50})}, + childAlignment = {x = .Center, y = .Center}, + padding = {16, 16, 32, 32}, childGap = 32, }, backgroundColor = COLOR_LIGHT, - }) { + }, + ) { RendererPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({})) } } @@ -388,47 +368,48 @@ ScrollbarData :: struct { scrollbarData := ScrollbarData{} animationLerpValue: f32 = -1.0 -createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) { +createLayout :: proc(lerpValue: f32, frametime: f32) -> clay.ClayArray(clay.RenderCommand) { mobileScreen := windowWidth < 750 clay.BeginLayout() - if clay.UI(clay.ID("OuterContainer"))({ - layout = { layoutDirection = .TopToBottom, sizing = { clay.SizingGrow(), clay.SizingGrow() } }, - backgroundColor = COLOR_LIGHT, - }) { - if clay.UI(clay.ID("Header"))({ - layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(50) }, childAlignment = { y = .Center }, childGap = 24, padding = { left = 32, right = 32 } }, - }) { - clay.Text("Clay", &headerTextConfig) - if clay.UI()({ layout = { sizing = { width = clay.SizingGrow() } } }) {} + if clay.UI(clay.ID("OuterContainer"))({layout = {layoutDirection = .TopToBottom, sizing = {clay.SizingGrow(), clay.SizingGrow()}}, backgroundColor = COLOR_LIGHT}) { + if clay.UI(clay.ID("Header"))( + {layout = {sizing = {clay.SizingGrow(), clay.SizingFixed(50)}, childAlignment = {y = .Center}, childGap = 24, padding = {left = 32, right = 32}}}, + ) { + clay.Text("Clay", headerTextConfig) + if clay.UI()({layout = {sizing = {width = clay.SizingGrow()}}}) {} if (!mobileScreen) { - if clay.UI(clay.ID("LinkExamplesOuter"))({ backgroundColor = {0, 0, 0, 0} }) { - clay.Text("Examples", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}})) + if clay.UI(clay.ID("LinkExamplesOuter"))({backgroundColor = {0, 0, 0, 0}}) { + clay.Text("Examples", {fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}) } - if clay.UI(clay.ID("LinkDocsOuter"))({ backgroundColor = {0, 0, 0, 0} }) { - clay.Text("Docs", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}})) + if clay.UI(clay.ID("LinkDocsOuter"))({backgroundColor = {0, 0, 0, 0}}) { + clay.Text("Docs", {fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}) } } - if clay.UI(clay.ID("LinkGithubOuter"))({ - layout = { padding = { 16, 16, 6, 6 } }, + if clay.UI(clay.ID("LinkGithubOuter"))( + { + layout = {padding = {16, 16, 6, 6}}, border = border2pxRed, backgroundColor = clay.Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT, - cornerRadius = clay.CornerRadiusAll(10) - }) { - clay.Text("Github", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}})) + cornerRadius = clay.CornerRadiusAll(10), + }, + ) { + clay.Text("Github", {fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}) } } - if clay.UI(clay.ID("TopBorder1"))({ layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_5 } ) {} - if clay.UI(clay.ID("TopBorder2"))({ layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_4 } ) {} - if clay.UI(clay.ID("TopBorder3"))({ layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_3 } ) {} - if clay.UI(clay.ID("TopBorder4"))({ layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_2 } ) {} - if clay.UI(clay.ID("TopBorder5"))({ layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_1 } ) {} - if clay.UI(clay.ID("ScrollContainerBackgroundRectangle"))({ - clip = { vertical = true, childOffset = clay.GetScrollOffset() }, - layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, layoutDirection = clay.LayoutDirection.TopToBottom }, + if clay.UI(clay.ID("TopBorder1"))({layout = {sizing = {clay.SizingGrow(), clay.SizingFixed(4)}}, backgroundColor = COLOR_TOP_BORDER_5}) {} + if clay.UI(clay.ID("TopBorder2"))({layout = {sizing = {clay.SizingGrow(), clay.SizingFixed(4)}}, backgroundColor = COLOR_TOP_BORDER_4}) {} + if clay.UI(clay.ID("TopBorder3"))({layout = {sizing = {clay.SizingGrow(), clay.SizingFixed(4)}}, backgroundColor = COLOR_TOP_BORDER_3}) {} + if clay.UI(clay.ID("TopBorder4"))({layout = {sizing = {clay.SizingGrow(), clay.SizingFixed(4)}}, backgroundColor = COLOR_TOP_BORDER_2}) {} + if clay.UI(clay.ID("TopBorder5"))({layout = {sizing = {clay.SizingGrow(), clay.SizingFixed(4)}}, backgroundColor = COLOR_TOP_BORDER_1}) {} + if clay.UI(clay.ID("ScrollContainerBackgroundRectangle"))( + { + clip = {vertical = true, childOffset = clay.GetScrollOffset()}, + layout = {sizing = {clay.SizingGrow(), clay.SizingGrow()}, layoutDirection = clay.LayoutDirection.TopToBottom}, backgroundColor = COLOR_LIGHT, - border = { COLOR_RED, { betweenChildren = 2} }, - }) { + border = {COLOR_RED, {betweenChildren = 2}}, + }, + ) { if (!mobileScreen) { LandingPageDesktop() FeatureBlocksDesktop() @@ -444,14 +425,11 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) { } } } - return clay.EndLayout() + return clay.EndLayout(frametime) } loadFont :: proc(fontId: u16, fontSize: u16, path: cstring) { - assign_at(&raylib_fonts,fontId,Raylib_Font{ - font = raylib.LoadFontEx(path, cast(i32)fontSize * 2, nil, 0), - fontId = cast(u16)fontId, - }) + assign_at(&raylib_fonts, fontId, Raylib_Font{font = raylib.LoadFontEx(path, cast(i32)fontSize * 2, nil, 0), fontId = cast(u16)fontId}) raylib.SetTextureFilter(raylib_fonts[fontId].font.texture, raylib.TextureFilter.TRILINEAR) } @@ -465,7 +443,7 @@ main :: proc() { minMemorySize: c.size_t = cast(c.size_t)clay.MinMemorySize() memory := make([^]u8, minMemorySize) arena: clay.Arena = clay.CreateArenaWithCapacityAndMemory(minMemorySize, memory) - clay.Initialize(arena, {cast(f32)raylib.GetScreenWidth(), cast(f32)raylib.GetScreenHeight()}, { handler = errorHandler }) + clay.Initialize(arena, {cast(f32)raylib.GetScreenWidth(), cast(f32)raylib.GetScreenHeight()}, {handler = errorHandler}) clay.SetMeasureTextFunction(measure_text, nil) raylib.SetConfigFlags({.VSYNC_HINT, .WINDOW_RESIZABLE, .MSAA_4X_HINT}) @@ -507,7 +485,7 @@ main :: proc() { clay.SetPointerState(transmute(clay.Vector2)raylib.GetMousePosition(), raylib.IsMouseButtonDown(raylib.MouseButton.LEFT)) clay.UpdateScrollContainers(false, transmute(clay.Vector2)raylib.GetMouseWheelMoveV(), raylib.GetFrameTime()) clay.SetLayoutDimensions({cast(f32)raylib.GetScreenWidth(), cast(f32)raylib.GetScreenHeight()}) - renderCommands: clay.ClayArray(clay.RenderCommand) = createLayout(animationLerpValue < 0 ? (animationLerpValue + 1) : (1 - animationLerpValue)) + renderCommands := createLayout(animationLerpValue < 0 ? (animationLerpValue + 1) : (1 - animationLerpValue), raylib.GetFrameTime()) raylib.BeginDrawing() clay_raylib_render(&renderCommands) raylib.EndDrawing() diff --git a/bindings/odin/examples/clay-official-website/clay_renderer_raylib.odin b/bindings/odin/examples/clay-official-website/clay_renderer_raylib.odin index 135ab30..898d61d 100644 --- a/bindings/odin/examples/clay-official-website/clay_renderer_raylib.odin +++ b/bindings/odin/examples/clay-official-website/clay_renderer_raylib.odin @@ -1,10 +1,10 @@ package main -import "core:unicode/utf8" -import "base:runtime" import clay "../../clay-odin" +import "base:runtime" import "core:math" import "core:strings" +import "core:unicode/utf8" import rl "vendor:raylib" Raylib_Font :: struct { @@ -24,11 +24,11 @@ measure_text :: measure_text_ascii measure_text_unicode :: proc "c" (text: clay.StringSlice, config: ^clay.TextElementConfig, userData: rawptr) -> clay.Dimensions { // Needed for grapheme_count context = runtime.default_context() - - line_width: f32 = 0 - - font := raylib_fonts[config.fontId].font - text_str := string(text.chars[:text.length]) + + line_width: f32 = 0 + + font := raylib_fonts[config.fontId].font + text_str := string(text.chars[:text.length]) // This function seems somewhat expensive, if you notice performance issues, you could assume // - 1 codepoint per visual character (no grapheme clusters), where you can get the length from the loop @@ -36,59 +36,60 @@ measure_text_unicode :: proc "c" (text: clay.StringSlice, config: ^clay.TextElem // see `measure_text_ascii` grapheme_count, _, _ := utf8.grapheme_count(text_str) - for letter, byte_idx in text_str { - glyph_index := rl.GetGlyphIndex(font, letter) + for letter, byte_idx in text_str { + glyph_index := rl.GetGlyphIndex(font, letter) glyph := font.glyphs[glyph_index] - if glyph.advanceX != 0 { - line_width += f32(glyph.advanceX) - } else { - line_width += font.recs[glyph_index].width + f32(font.glyphs[glyph_index].offsetX) - } - } + if glyph.advanceX != 0 { + line_width += f32(glyph.advanceX) + } else { + line_width += font.recs[glyph_index].width + f32(font.glyphs[glyph_index].offsetX) + } + } - scaleFactor := f32(config.fontSize) / f32(font.baseSize) + scaleFactor := f32(config.fontSize) / f32(font.baseSize) - // Note: - // I'd expect this to be `grapheme_count - 1`, + // Note: + // I'd expect this to be `grapheme_count - 1`, // but that seems to be one letterSpacing too small // maybe that's a raylib bug, maybe that's Clay? - total_spacing := f32(grapheme_count) * f32(config.letterSpacing) + total_spacing := f32(grapheme_count) * f32(config.letterSpacing) - return {width = line_width * scaleFactor + total_spacing, height = f32(config.fontSize)} + return {width = line_width * scaleFactor + total_spacing, height = f32(config.fontSize)} } -measure_text_ascii :: proc "c" (text: clay.StringSlice, config: ^clay.TextElementConfig, userData: rawptr) -> clay.Dimensions { - line_width: f32 = 0 - - font := raylib_fonts[config.fontId].font - text_str := string(text.chars[:text.length]) +measure_text_ascii :: proc "c" (text: clay.StringSlice, config: ^clay.TextElementConfig, userData: rawptr) -> clay.Dimensions { + line_width: f32 = 0 - for i in 0.. 0 { + tint = overlay_colors[len(overlay_colors) - 1] + } if tint == 0 { tint = {255, 255, 255, 255} } @@ -173,7 +177,7 @@ clay_raylib_render :: proc(render_commands: ^clay.ClayArray(clay.RenderCommand), // Rounded Borders if config.cornerRadius.topLeft > 0 { draw_arc( - bounds.x + config.cornerRadius.topLeft, + bounds.x + config.cornerRadius.topLeft, bounds.y + config.cornerRadius.topLeft, config.cornerRadius.topLeft - f32(config.width.top), config.cornerRadius.topLeft, @@ -206,7 +210,7 @@ clay_raylib_render :: proc(render_commands: ^clay.ClayArray(clay.RenderCommand), } if config.cornerRadius.bottomRight > 0 { draw_arc( - bounds.x + bounds.width - config.cornerRadius.bottomRight, + bounds.x + bounds.width - config.cornerRadius.bottomRight, bounds.y + bounds.height - config.cornerRadius.bottomRight, config.cornerRadius.bottomRight - f32(config.width.bottom), config.cornerRadius.bottomRight, @@ -215,8 +219,13 @@ clay_raylib_render :: proc(render_commands: ^clay.ClayArray(clay.RenderCommand), config.color, ) } - case clay.RenderCommandType.Custom: - // Implement custom element rendering here + case .OverlayColorStart: + config := render_command.renderData.overlayColor + append(&overlay_colors, config.color) + case .OverlayColorEnd: + pop(&overlay_colors) + case .Custom: + // Implement custom element rendering here } } } @@ -224,30 +233,17 @@ clay_raylib_render :: proc(render_commands: ^clay.ClayArray(clay.RenderCommand), // Helper procs, mainly for repeated conversions @(private = "file") -draw_arc :: proc(x, y: f32, inner_rad, outer_rad: f32,start_angle, end_angle: f32, color: clay.Color){ - rl.DrawRing( - {math.round(x),math.round(y)}, - math.round(inner_rad), - outer_rad, - start_angle, - end_angle, - 10, - clay_color_to_rl_color(color), - ) +draw_arc :: proc(x, y: f32, inner_rad, outer_rad: f32, start_angle, end_angle: f32, color: clay.Color) { + rl.DrawRing({math.round(x), math.round(y)}, math.round(inner_rad), outer_rad, start_angle, end_angle, 10, clay_color_to_rl_color(color)) } @(private = "file") draw_rect :: proc(x, y, w, h: f32, color: clay.Color) { - rl.DrawRectangle( - i32(math.round(x)), - i32(math.round(y)), - i32(math.round(w)), - i32(math.round(h)), - clay_color_to_rl_color(color) - ) + rl.DrawRectangle(i32(math.round(x)), i32(math.round(y)), i32(math.round(w)), i32(math.round(h)), clay_color_to_rl_color(color)) } @(private = "file") -draw_rect_rounded :: proc(x,y,w,h: f32, radius: f32, color: clay.Color){ - rl.DrawRectangleRounded({x,y,w,h},radius,8,clay_color_to_rl_color(color)) -} \ No newline at end of file +draw_rect_rounded :: proc(x, y, w, h: f32, radius: f32, color: clay.Color) { + rl.DrawRectangleRounded({x, y, w, h}, radius, 8, clay_color_to_rl_color(color)) +} +