Merge d0d1e01a3f into 6d23a35d15

README.md

@@ -808,7 +808,7 @@ Clay_TextElementConfig {
 
 `CLAY_TEXT_CONFIG(.textColor = {120, 120, 120, 255})`
 
-Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
+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.
 
 ---
 
@@ -990,28 +990,95 @@ typedef struct {
     Clay_CustomElementConfig custom;
     Clay_ScrollElementConfig scroll;
     Clay_BorderElementConfig border;
-    uintptr_t userData;
+    void *userData;
 } Clay_ElementDeclaration;
 ```
 
 **Fields**
 
-**`.color`** - `Clay_Color`
+**`.id`** - `Clay_ElementID`
 
-`.backgroundColor = {120, 120, 120, 255} })`
+`CLAY({ .id = CLAY_ID("FileButton") })`
 
-Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
+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.
+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`
 
-`CLAY_RECTANGLE({ .cornerRadius = { .topLeft = 16, .topRight = 16, .bottomLeft = 16, .bottomRight = 16 })`
+`CLAY({ .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).
 
 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**
 
 ```C
@@ -1285,6 +1352,14 @@ typedef struct Clay_BorderElementConfig
 
 **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`
 
 `CLAY({ .border = { .width = { .left = 2, .right = 10 } } })`
@@ -1303,12 +1378,6 @@ 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**
 
 ```C
@@ -1657,6 +1726,17 @@ 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.
 
+### 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
 
 ```C

bindings/odin/clay-odin/clay.odin

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

clay.h

@@ -327,6 +327,16 @@ typedef CLAY_PACKED_ENUM {
     CLAY_TEXT_WRAP_NONE,
 } Clay_TextElementConfigWrapMode;
 
+// Controls how wrapped lines of text are horizontally aligned within the outer text bounding box.
+typedef CLAY_PACKED_ENUM {
+    // (default) Horizontally aligns wrapped lines of text to the left hand side of their bounding box.
+    CLAY_TEXT_ALIGN_LEFT,
+    // Horizontally aligns wrapped lines of text to the center of their bounding box.
+    CLAY_TEXT_ALIGN_CENTER,
+    // Horizontally aligns wrapped lines of text to the right hand side of their bounding box.
+    CLAY_TEXT_ALIGN_RIGHT,
+} Clay_TextAlignment;
+
 // Controls various functionality related to text elements.
 typedef struct {
     // The RGBA color of the font to render, conventionally specified as 0-255.
@@ -345,6 +355,11 @@ typedef struct {
     // CLAY_TEXT_WRAP_NEWLINES doesn't break on space characters, only on newlines.
     // CLAY_TEXT_WRAP_NONE disables wrapping entirely.
     Clay_TextElementConfigWrapMode wrapMode;
+    // Controls how wrapped lines of text are horizontally aligned within the outer text bounding box.
+    // CLAY_TEXT_ALIGN_LEFT (default) - Horizontally aligns wrapped lines of text to the left hand side of their bounding box.
+    // CLAY_TEXT_ALIGN_CENTER - Horizontally aligns wrapped lines of text to the center of their bounding box.
+    // CLAY_TEXT_ALIGN_RIGHT - Horizontally aligns wrapped lines of text to the right hand side of their bounding box.
+    Clay_TextAlignment textAlignment;
     // When set to true, clay will hash the entire text contents of this string as an identifier for its internal
     // text measurement cache, rather than just the pointer and length. This will incur significant performance cost for
     // long bodies of text.
@@ -2256,6 +2271,7 @@ void Clay__CalculateFinalLayout(void) {
             textElementData->wrappedLines.length++;
             continue;
         }
+        float spaceWidth = Clay__MeasureText(CLAY__INIT(Clay_StringSlice) { .length = 1, .chars = CLAY__SPACECHAR.chars, .baseChars = CLAY__SPACECHAR.chars }, textConfig, context->measureTextUserData).width;
         int32_t wordIndex = measureTextCacheItem->measuredWordsStartIndex;
         while (wordIndex != -1) {
             if (context->wrappedTextLines.length > context->wrappedTextLines.capacity - 1) {
@@ -2272,7 +2288,8 @@ void Clay__CalculateFinalLayout(void) {
             // measuredWord->length == 0 means a newline character
             else if (measuredWord->length == 0 || lineWidth + measuredWord->width > containerElement->dimensions.width) {
                 // Wrapped text lines list has overflowed, just render out the line
-                Clay__WrappedTextLineArray_Add(&context->wrappedTextLines, CLAY__INIT(Clay__WrappedTextLine) { { lineWidth, lineHeight }, { .length = lineLengthChars, .chars = &textElementData->text.chars[lineStartOffset] } });
+                bool finalCharIsSpace = textElementData->text.chars[lineStartOffset + lineLengthChars - 1] == ' ';
+                Clay__WrappedTextLineArray_Add(&context->wrappedTextLines, CLAY__INIT(Clay__WrappedTextLine) { { lineWidth + (finalCharIsSpace ? -spaceWidth : 0), lineHeight }, { .length = lineLengthChars + (finalCharIsSpace ? -1 : 0), .chars = &textElementData->text.chars[lineStartOffset] } });
                 textElementData->wrappedLines.length++;
                 if (lineLengthChars == 0 || measuredWord->length == 0) {
                     wordIndex = measuredWord->next;
@@ -2604,8 +2621,15 @@ void Clay__CalculateFinalLayout(void) {
                                     yPosition += finalLineHeight;
                                     continue;
                                 }
+                                float offset = (currentElementBoundingBox.width - wrappedLine->dimensions.width);
+                                if (textElementConfig->textAlignment == CLAY_TEXT_ALIGN_LEFT) {
+                                    offset = 0;
+                                }
+                                if (textElementConfig->textAlignment == CLAY_TEXT_ALIGN_CENTER) {
+                                    offset /= 2;
+                                }
                                 Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand) {
-                                    .boundingBox = { currentElementBoundingBox.x, currentElementBoundingBox.y + yPosition, wrappedLine->dimensions.width, wrappedLine->dimensions.height },
+                                    .boundingBox = { currentElementBoundingBox.x + offset, currentElementBoundingBox.y + yPosition, wrappedLine->dimensions.width, wrappedLine->dimensions.height },
                                     .renderData = { .text = {
                                         .stringContents = CLAY__INIT(Clay_StringSlice) { .length = wrappedLine->line.length, .chars = wrappedLine->line.chars, .baseChars = currentElement->childrenOrTextContent.textElementData->text.chars },
                                         .textColor = textElementConfig->textColor,
@@ -3322,7 +3346,7 @@ void Clay__RenderDebugView(void) {
                                 // .letterSpacing
                                 CLAY_TEXT(CLAY_STRING("Letter Spacing"), infoTitleConfig);
                                 CLAY_TEXT(Clay__IntToString(textConfig->letterSpacing), infoTextConfig);
-                                // .lineSpacing
+                                // .wrapMode
                                 CLAY_TEXT(CLAY_STRING("Wrap Mode"), infoTitleConfig);
                                 Clay_String wrapMode = CLAY_STRING("WORDS");
                                 if (textConfig->wrapMode == CLAY_TEXT_WRAP_NONE) {
@@ -3331,6 +3355,15 @@ void Clay__RenderDebugView(void) {
                                     wrapMode = CLAY_STRING("NEWLINES");
                                 }
                                 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
                                 CLAY_TEXT(CLAY_STRING("Text Color"), infoTitleConfig);
                                 Clay__RenderDebugViewColor(textConfig->textColor, infoTextConfig);

examples/clay-official-website/main.c

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

examples/raylib-sidebar-scrolling-container/main.c

@@ -48,7 +48,7 @@ Clay_RenderCommandArray CreateLayout(void) {
         CLAY({ .id = CLAY_ID("SideBar"), .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0) }, .padding = {16, 16, 16, 16 }, .childGap = 16 }, .backgroundColor = {150, 150, 255, 255} }) {
             CLAY({ .id = CLAY_ID("ProfilePictureOuter"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .padding = { 8, 8, 8, 8 }, .childGap = 8, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }, .backgroundColor = {130, 130, 255, 255} }) {
                 CLAY({ .id = CLAY_ID("ProfilePicture"), .layout = { .sizing = { .width = CLAY_SIZING_FIXED(60), .height = CLAY_SIZING_FIXED(60) } }, .image = { .imageData = &profilePicture, .sourceDimensions = {60, 60} }}) {}
-                CLAY_TEXT(profileText, CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {0, 0, 0, 255} }));
+                CLAY_TEXT(profileText, CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {0, 0, 0, 255}, .textAlignment = CLAY_TEXT_ALIGN_RIGHT }));
             }
             CLAY({ .id = CLAY_ID("SidebarBlob1"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(50) }}, .backgroundColor = {110, 110, 255, 255} }) {}
             CLAY({ .id = CLAY_ID("SidebarBlob2"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(50) }}, .backgroundColor = {110, 110, 255, 255} }) {}
@@ -87,7 +87,7 @@ Clay_RenderCommandArray CreateLayout(void) {
                  }
 
                  CLAY_TEXT(CLAY_STRING("Faucibus purus in massa tempor nec. Nec ullamcorper sit amet risus nullam eget felis eget nunc. Diam vulputate ut pharetra sit amet aliquam id diam. Lacus suspendisse faucibus interdum posuere lorem. A diam sollicitudin tempor id. Amet massa vitae tortor condimentum lacinia. Aliquet nibh praesent tristique magna."),
-                     CLAY_TEXT_CONFIG({ .fontSize = 24, .lineHeight = 60, .textColor = {0,0,0,255} }));
+                           CLAY_TEXT_CONFIG({ .fontSize = 24, .lineHeight = 60, .textColor = {0,0,0,255}, .textAlignment = CLAY_TEXT_ALIGN_CENTER }));
 
                  CLAY_TEXT(CLAY_STRING("Suspendisse in est ante in nibh. Amet venenatis urna cursus eget nunc scelerisque viverra. Elementum sagittis vitae et leo duis ut diam quam nulla. Enim nulla aliquet porttitor lacus. Pellentesque habitant morbi tristique senectus et. Facilisi nullam vehicula ipsum a arcu cursus vitae.\nSem fringilla ut morbi tincidunt. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Velit sed ullamcorper morbi tincidunt ornare massa. Varius quam quisque id diam vel quam. Nulla pellentesque dignissim enim sit amet venenatis. Enim lobortis scelerisque fermentum dui faucibus in. Pretium viverra suspendisse potenti nullam ac tortor vitae. Lectus vestibulum mattis ullamcorper velit sed. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Habitant morbi tristique senectus et. Integer vitae justo eget magna fermentum iaculis eu. Semper quis lectus nulla at volutpat diam. Enim praesent elementum facilisis leo. Massa vitae tortor condimentum lacinia quis vel."),
                      CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {0,0,0,255} }));