Compare commits

..

1 Commits

Author SHA1 Message Date
Julio Ernesto Rodríguez Cabañas
6d5bb88bca
Merge 0242c58ff5 into 82ca328ae2 2025-02-11 21:43:36 +00:00
10 changed files with 14 additions and 110 deletions

104
README.md
View File

@ -808,7 +808,7 @@ Clay_TextElementConfig {
`CLAY_TEXT_CONFIG(.textColor = {120, 120, 120, 255})` `CLAY_TEXT_CONFIG(.textColor = {120, 120, 120, 255})`
Uses [Clay_Color](#clay_color). Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout. Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
--- ---
@ -990,95 +990,28 @@ typedef struct {
Clay_CustomElementConfig custom; Clay_CustomElementConfig custom;
Clay_ScrollElementConfig scroll; Clay_ScrollElementConfig scroll;
Clay_BorderElementConfig border; Clay_BorderElementConfig border;
void *userData; uintptr_t userData;
} Clay_ElementDeclaration; } Clay_ElementDeclaration;
``` ```
**Fields** **Fields**
**`.id`** - `Clay_ElementID` **`.color`** - `Clay_Color`
`CLAY({ .id = CLAY_ID("FileButton") })` `.backgroundColor = {120, 120, 120, 255} })`
Uses [Clay_ElementId](#clay_elementid). Tags the element with an ID that can be later used to query data about the element, and gives it a human readable name in the debug tools. Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
IDs are typically generated using the [CLAY_ID](#clay_id), [CLAY_IDI](#clay_idi), [CLAY_ID_LOCAL](#clay_id_local) and [CLAY_IDI_LOCAL](#clay_idi_local) macros.
---
**`.layout`** - `Clay_LayoutConfig`
`CLAY({ .layout = { .padding = { 16, 16, 12, 12 }, .layoutDirection = CLAY_TOP_TO_BOTTOM } })`
Uses [Clay_LayoutConfig](#clay_layoutconfig). Controls various settings related to _layout_, which can be thought of as "the size and position of this element and its children".
---
**`.backgroundColor`** - `Clay_Color`
`CLAY({ .backgroundColor = {120, 120, 120, 255} } })`
Uses [Clay_Color](#clay_color). Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
--- ---
**`.cornerRadius`** - `float` **`.cornerRadius`** - `float`
`CLAY({ .cornerRadius = { .topLeft = 16, .topRight = 16, .bottomLeft = 16, .bottomRight = 16 } })` `CLAY_RECTANGLE({ .cornerRadius = { .topLeft = 16, .topRight = 16, .bottomLeft = 16, .bottomRight = 16 })`
Defines the radius in pixels for the arc of rectangle corners (`0` is square, `rectangle.width / 2` is circular). Defines the radius in pixels for the arc of rectangle corners (`0` is square, `rectangle.width / 2` is circular).
Note that the `CLAY_CORNER_RADIUS(radius)` function-like macro is available to provide short hand for setting all four corner radii to the same value. e.g. `CLAY_BORDER({ .cornerRadius = CLAY_CORNER_RADIUS(10) })` Note that the `CLAY_CORNER_RADIUS(radius)` function-like macro is available to provide short hand for setting all four corner radii to the same value. e.g. `CLAY_BORDER({ .cornerRadius = CLAY_CORNER_RADIUS(10) })`
---
**`.image`** - `Clay_ImageElementConfig`
`CLAY({ .image = { .imageData = &myImage, .sourceDimensions = { 640, 480 } } })`
Uses [Clay_ImageElementConfig](#clay_imageelementconfig). Configures the element as an image element. Causes a render command with type `IMAGE` to be emitted.
---
**`.floating`** - `Clay_FloatingElementConfig`
`CLAY({ .floating = { .attachTo = CLAY_ATTACH_TO_PARENT } })`
Uses [Clay_FloatingElementConfig](#clay_floatingelementconfig). Configures the element as an floating element, which allows it to stack "in front" and "on top" of other elements without affecting sibling or parent size or position.
---
**`.custom`** - `Clay_CustomElementConfig`
`CLAY({ .custom = { .customData = &my3DModel } })`
Uses [Clay_CustomElementConfig](#clay_customelementconfig). Configures the element as a custom element, which allows you to pass custom data through to the renderer. Causes a render command with type `CUSTOM` to be emitted.
---
**`.scroll`** - `Clay_ScrollElementConfig`
`CLAY({ .scroll = { .vertical = true } })`
Uses [Clay_ScrollElementConfig](#clay_scrollelementconfig). Configures the element as a scroll element, which causes child elements to be clipped / masked if they overflow, and together with [Clay_UpdateScrollContainer](#clay_updatescrollcontainers) enables scrolling of child contents.
---
**`.border`** - `Clay_BorderElementConfig`
`CLAY({ .border = { .width = { .left = 5 }, .color = COLOR_BLUE } })`
Uses [Clay_BorderElementConfig](#clay_borderelementconfig). Configures the element as a border element, which instructs the renderer to draw coloured border lines along the perimeter of this element's bounding box. Causes a render command with type `BORDER` to be emitted.
---
**`.userData`** - `void *`
`CLAY({ .userData = &extraData })`
Transparently passes a pointer through to the corresponding [Clay_RenderCommands](#clay_rendercommand)s generated by this element.
---
**Examples** **Examples**
```C ```C
@ -1352,14 +1285,6 @@ typedef struct Clay_BorderElementConfig
**Fields** **Fields**
**`.color`** - `Clay_Color`
`CLAY({ .border = { .color = { 255, 0, 0, 255 } } })`
Uses [Clay_Color](#clay_color). Specifies the shared color for all borders configured by this element. Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
---
**`.width`** - `Clay_BorderWidth` **`.width`** - `Clay_BorderWidth`
`CLAY({ .border = { .width = { .left = 2, .right = 10 } } })` `CLAY({ .border = { .width = { .left = 2, .right = 10 } } })`
@ -1378,6 +1303,12 @@ Configures the width and color of borders to be drawn between children. These bo
--- ---
**`.color`** - `Clay_Color`
`CLAY({ .border = { .color = { 255, 0, 0, 255 } } })`
Defines the radius in pixels for the arc of border corners (`0` is square, `rectangle.width / 2` is circular). It is up to the renderer to decide how to interpolate between differing border widths and colors across shared corners.
**Examples** **Examples**
```C ```C
@ -1726,17 +1657,6 @@ switch (renderCommand->commandType) {
Element is subject to [culling](#visibility-culling). Otherwise, a single `Clay_RenderCommand` with `commandType = CLAY_RENDER_COMMAND_TYPE_CUSTOM` will be created. Element is subject to [culling](#visibility-culling). Otherwise, a single `Clay_RenderCommand` with `commandType = CLAY_RENDER_COMMAND_TYPE_CUSTOM` will be created.
### Clay_Color
```C
typedef struct {
float r, g, b, a;
} Clay_Color;
```
`Clay_Color` is an RGBA color struct used in Clay's declarations and rendering. By convention the channels are represented as 0-255, but this is left up to the renderer.
Note: when using the debug tools, their internal colors are represented as 0-255.
### Clay_String ### Clay_String
```C ```C

View File

@ -96,12 +96,6 @@ TextWrapMode :: enum EnumBackingType {
None, None,
} }
TextAlignment :: enum EnumBackingType {
Left,
Center,
Right,
}
TextElementConfig :: struct { TextElementConfig :: struct {
textColor: Color, textColor: Color,
fontId: u16, fontId: u16,
@ -109,7 +103,6 @@ TextElementConfig :: struct {
letterSpacing: u16, letterSpacing: u16,
lineHeight: u16, lineHeight: u16,
wrapMode: TextWrapMode, wrapMode: TextWrapMode,
textAlignment: TextAlignment,
hashStringContents: bool, hashStringContents: bool,
} }

Binary file not shown.

Binary file not shown.

Binary file not shown.

11
clay.h
View File

@ -3346,7 +3346,7 @@ void Clay__RenderDebugView(void) {
// .letterSpacing // .letterSpacing
CLAY_TEXT(CLAY_STRING("Letter Spacing"), infoTitleConfig); CLAY_TEXT(CLAY_STRING("Letter Spacing"), infoTitleConfig);
CLAY_TEXT(Clay__IntToString(textConfig->letterSpacing), infoTextConfig); CLAY_TEXT(Clay__IntToString(textConfig->letterSpacing), infoTextConfig);
// .wrapMode // .lineSpacing
CLAY_TEXT(CLAY_STRING("Wrap Mode"), infoTitleConfig); CLAY_TEXT(CLAY_STRING("Wrap Mode"), infoTitleConfig);
Clay_String wrapMode = CLAY_STRING("WORDS"); Clay_String wrapMode = CLAY_STRING("WORDS");
if (textConfig->wrapMode == CLAY_TEXT_WRAP_NONE) { if (textConfig->wrapMode == CLAY_TEXT_WRAP_NONE) {
@ -3355,15 +3355,6 @@ void Clay__RenderDebugView(void) {
wrapMode = CLAY_STRING("NEWLINES"); wrapMode = CLAY_STRING("NEWLINES");
} }
CLAY_TEXT(wrapMode, infoTextConfig); CLAY_TEXT(wrapMode, infoTextConfig);
// .textAlignment
CLAY_TEXT(CLAY_STRING("Text Alignment"), infoTitleConfig);
Clay_String textAlignment = CLAY_STRING("LEFT");
if (textConfig->textAlignment == CLAY_TEXT_ALIGN_CENTER) {
textAlignment = CLAY_STRING("CENTER");
} else if (textConfig->textAlignment == CLAY_TEXT_ALIGN_RIGHT) {
textAlignment = CLAY_STRING("RIGHT");
}
CLAY_TEXT(textAlignment, infoTextConfig);
// .textColor // .textColor
CLAY_TEXT(CLAY_STRING("Text Color"), infoTitleConfig); CLAY_TEXT(CLAY_STRING("Text Color"), infoTitleConfig);
Clay__RenderDebugViewColor(textConfig->textColor, infoTextConfig); Clay__RenderDebugViewColor(textConfig->textColor, infoTextConfig);

View File

@ -3,7 +3,7 @@
double windowWidth = 1024, windowHeight = 768; double windowWidth = 1024, windowHeight = 768;
float modelPageOneZRotation = 0; float modelPageOneZRotation = 0;
uint32_t ACTIVE_RENDERER_INDEX = 0; uint32_t ACTIVE_RENDERER_INDEX = 1;
const uint32_t FONT_ID_BODY_16 = 0; const uint32_t FONT_ID_BODY_16 = 0;
const uint32_t FONT_ID_TITLE_56 = 1; const uint32_t FONT_ID_TITLE_56 = 1;