mirror of
https://github.com/nicbarker/clay.git
synced 2026-06-01 22:17:18 +00:00
[bindings/odin] update examples and run odinfmt
This commit is contained in:
A1029384756
parent
4e4e658bf4
commit
2cb241c3dc
3 changed files with 573 additions and 596 deletions
|
|
@ -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())
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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..<len(text_str) {
|
||||
glyph_index := text_str[i] - 32
|
||||
font := raylib_fonts[config.fontId].font
|
||||
text_str := string(text.chars[:text.length])
|
||||
|
||||
for i in 0 ..< len(text_str) {
|
||||
glyph_index := text_str[i] - 32
|
||||
|
||||
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 `len(text_str) - 1`,
|
||||
// Note:
|
||||
// I'd expect this to be `len(text_str) - 1`,
|
||||
// but that seems to be one letterSpacing too small
|
||||
// maybe that's a raylib bug, maybe that's Clay?
|
||||
total_spacing := f32(len(text_str)) * f32(config.letterSpacing)
|
||||
total_spacing := f32(len(text_str)) * 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)}
|
||||
}
|
||||
|
||||
clay_raylib_render :: proc(render_commands: ^clay.ClayArray(clay.RenderCommand), allocator := context.temp_allocator) {
|
||||
overlay_colors := make([dynamic]clay.Color, allocator)
|
||||
for i in 0 ..< render_commands.length {
|
||||
render_command := clay.RenderCommandArray_Get(render_commands, i)
|
||||
bounds := render_command.boundingBox
|
||||
|
|
@ -108,7 +109,10 @@ clay_raylib_render :: proc(render_commands: ^clay.ClayArray(clay.RenderCommand),
|
|||
rl.DrawTextEx(font, cstr_text, {bounds.x, bounds.y}, f32(config.fontSize), f32(config.letterSpacing), clay_color_to_rl_color(config.textColor))
|
||||
case .Image:
|
||||
config := render_command.renderData.image
|
||||
tint := config.backgroundColor
|
||||
tint: clay.Color
|
||||
if len(overlay_colors) > 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))
|
||||
}
|
||||
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))
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue