Merge d32db64e4e into 0468243ac7

bindings/odin/clay-odin/clay.odin

@@ -229,8 +229,9 @@ RenderCommandData :: struct #raw_union {
 RenderCommand :: struct {
     boundingBox:        BoundingBox,
     renderData:         RenderCommandData,
-    zIndex:             i32,
+    userData:           rawptr,
     id:                 u32,
+    zIndex:             i16,
     commandType:        RenderCommandType,
 }
 
@@ -326,6 +327,7 @@ ElementDeclaration :: struct {
     custom: CustomElementConfig,
     scroll: ScrollElementConfig,
     border: BorderElementConfig,
+    userData: rawptr
 }
 
 ErrorType :: enum {

bindings/odin/examples/clay-official-website/clay_renderer_raylib.odin

@@ -71,9 +71,13 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
             )
         case clay.RenderCommandType.Image:
             config := renderCommand.renderData.image
+            tintColor := config.backgroundColor
+            if (tintColor.rgba == 0) {
+                tintColor = { 255, 255, 255, 255 }
+            }
             // TODO image handling
             imageTexture := cast(^raylib.Texture2D)config.imageData
-            raylib.DrawTextureEx(imageTexture^, raylib.Vector2{boundingBox.x, boundingBox.y}, 0, boundingBox.width / cast(f32)imageTexture.width, clayColorToRaylibColor(config.backgroundColor))
+            raylib.DrawTextureEx(imageTexture^, raylib.Vector2{boundingBox.x, boundingBox.y}, 0, boundingBox.width / cast(f32)imageTexture.width, clayColorToRaylibColor(tintColor))
         case clay.RenderCommandType.ScissorStart:
             raylib.BeginScissorMode(
                 cast(i32)math.round(boundingBox.x),

clay.h

@@ -801,6 +801,7 @@ typedef struct { // todo get this struct into a single cache line
     intptr_t hoverFunctionUserData;
     int32_t nextIndex;
     uint32_t generation;
+    uint32_t idAlias;
     Clay__DebugElementData *debugData;
 } Clay_LayoutElementHashMapItem;
 
@@ -1210,12 +1211,12 @@ bool Clay__PointIsInsideRect(Clay_Vector2 point, Clay_BoundingBox rect) {
     return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
 }
 
-Clay_LayoutElementHashMapItem* Clay__AddHashMapItem(Clay_ElementId elementId, Clay_LayoutElement* layoutElement) {
+Clay_LayoutElementHashMapItem* Clay__AddHashMapItem(Clay_ElementId elementId, Clay_LayoutElement* layoutElement, uint32_t idAlias) {
     Clay_Context* context = Clay_GetCurrentContext();
     if (context->layoutElementsHashMapInternal.length == context->layoutElementsHashMapInternal.capacity - 1) {
         return NULL;
     }
-    Clay_LayoutElementHashMapItem item = { .elementId = elementId, .layoutElement = layoutElement, .nextIndex = -1, .generation = context->generation + 1 };
+    Clay_LayoutElementHashMapItem item = { .elementId = elementId, .layoutElement = layoutElement, .nextIndex = -1, .generation = context->generation + 1, .idAlias = idAlias };
     uint32_t hashBucket = elementId.id % context->layoutElementsHashMap.capacity;
     int32_t hashItemPrevious = -1;
     int32_t hashItemIndex = context->layoutElementsHashMap.internalArray[hashBucket];
@@ -1271,7 +1272,7 @@ void Clay__GenerateIdForAnonymousElement(Clay_LayoutElement *openLayoutElement)
     Clay_LayoutElement *parentElement = Clay_LayoutElementArray_Get(&context->layoutElements, Clay__int32_tArray_GetValue(&context->openLayoutElementStack, context->openLayoutElementStack.length - 2));
     Clay_ElementId elementId = Clay__HashNumber(parentElement->childrenOrTextContent.children.length, parentElement->id);
     openLayoutElement->id = elementId.id;
-    Clay__AddHashMapItem(elementId, openLayoutElement);
+    Clay__AddHashMapItem(elementId, openLayoutElement, 0);
     Clay__StringArray_Add(&context->layoutElementIdStrings, elementId.stringId);
 }
 
@@ -1483,7 +1484,7 @@ void Clay__OpenTextElement(Clay_String text, Clay_TextElementConfig *textConfig)
     Clay__MeasureTextCacheItem *textMeasured = Clay__MeasureTextCached(&text, textConfig);
     Clay_ElementId elementId = Clay__HashNumber(parentElement->childrenOrTextContent.children.length, parentElement->id);
     textElement->id = elementId.id;
-    Clay__AddHashMapItem(elementId, textElement);
+    Clay__AddHashMapItem(elementId, textElement, 0);
     Clay__StringArray_Add(&context->layoutElementIdStrings, elementId.stringId);
     Clay_Dimensions textDimensions = { .width = textMeasured->unwrappedDimensions.width, .height = textConfig->lineHeight > 0 ? (float)textConfig->lineHeight : textMeasured->unwrappedDimensions.height };
     textElement->dimensions = textDimensions;
@@ -2184,6 +2185,12 @@ void Clay__CalculateFinalLayout(void) {
                 Clay_LayoutElementHashMapItem *hashMapItem = Clay__GetHashMapItem(currentElement->id);
                 if (hashMapItem) {
                     hashMapItem->boundingBox = currentElementBoundingBox;
+                    if (hashMapItem->idAlias) {
+                        Clay_LayoutElementHashMapItem *hashMapItemAlias = Clay__GetHashMapItem(hashMapItem->idAlias);
+                        if (hashMapItemAlias) {
+                            hashMapItemAlias->boundingBox = currentElementBoundingBox;
+                        }
+                    }
                 }
 
                 int32_t sortedConfigIndexes[20];
@@ -2219,6 +2226,7 @@ void Clay__CalculateFinalLayout(void) {
                     Clay_ElementConfig *elementConfig = Clay__ElementConfigArraySlice_Get(&currentElement->elementConfigs, sortedConfigIndexes[elementConfigIndex]);
                     Clay_RenderCommand renderCommand = {
                         .boundingBox = currentElementBoundingBox,
+                        .userData = sharedConfig->userData,
                         .id = currentElement->id,
                     };
 
@@ -2399,6 +2407,7 @@ void Clay__CalculateFinalLayout(void) {
                                     .cornerRadius = sharedConfig->cornerRadius,
                                     .width = borderConfig->width
                                 }},
+                                .userData = sharedConfig->userData,
                                 .id = Clay__HashNumber(currentElement->id, currentElement->childrenOrTextContent.children.length).id,
                                 .commandType = CLAY_RENDER_COMMAND_TYPE_BORDER,
                         };
@@ -2415,6 +2424,7 @@ void Clay__CalculateFinalLayout(void) {
                                             .renderData = { .rectangle = {
                                                 .backgroundColor = borderConfig->color,
                                             } },
+                                            .userData = sharedConfig->userData,
                                             .id = Clay__HashNumber(currentElement->id, currentElement->childrenOrTextContent.children.length + 1 + i).id,
                                             .commandType = CLAY_RENDER_COMMAND_TYPE_RECTANGLE,
                                         });
@@ -2426,12 +2436,13 @@ void Clay__CalculateFinalLayout(void) {
                                     Clay_LayoutElement *childElement = Clay_LayoutElementArray_Get(&context->layoutElements, currentElement->childrenOrTextContent.children.elements[i]);
                                     if (i > 0) {
                                         Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand) {
-                                                .boundingBox = { currentElementBoundingBox.x + scrollOffset.x, currentElementBoundingBox.y + borderOffset.y + scrollOffset.y, currentElement->dimensions.width, (float)borderConfig->width.betweenChildren },
-                                                .renderData = { .rectangle = {
-                                                        .backgroundColor = borderConfig->color,
-                                                } },
-                                                .id = Clay__HashNumber(currentElement->id, currentElement->childrenOrTextContent.children.length + 1 + i).id,
-                                                .commandType = CLAY_RENDER_COMMAND_TYPE_RECTANGLE,
+                                            .boundingBox = { currentElementBoundingBox.x + scrollOffset.x, currentElementBoundingBox.y + borderOffset.y + scrollOffset.y, currentElement->dimensions.width, (float)borderConfig->width.betweenChildren },
+                                            .renderData = { .rectangle = {
+                                                    .backgroundColor = borderConfig->color,
+                                            } },
+                                            .userData = sharedConfig->userData,
+                                            .id = Clay__HashNumber(currentElement->id, currentElement->childrenOrTextContent.children.length + 1 + i).id,
+                                            .commandType = CLAY_RENDER_COMMAND_TYPE_RECTANGLE,
                                         });
                                     }
                                     borderOffset.y += (childElement->dimensions.height + (float)layoutConfig->childGap);
@@ -2444,7 +2455,7 @@ void Clay__CalculateFinalLayout(void) {
                 if (closeScrollElement) {
                     Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand) {
                         .id = Clay__HashNumber(currentElement->id, rootElement->childrenOrTextContent.children.length + 11).id,
-                       .commandType = CLAY_RENDER_COMMAND_TYPE_SCISSOR_END,
+                        .commandType = CLAY_RENDER_COMMAND_TYPE_SCISSOR_END,
                     });
                 }
 
@@ -2512,8 +2523,9 @@ Clay_ElementId Clay__AttachId(Clay_ElementId elementId) {
         return Clay_ElementId_DEFAULT;
     }
     Clay_LayoutElement *openLayoutElement = Clay__GetOpenLayoutElement();
+    uint32_t idAlias = openLayoutElement->id;
     openLayoutElement->id = elementId.id;
-    Clay__AddHashMapItem(elementId, openLayoutElement);
+    Clay__AddHashMapItem(elementId, openLayoutElement, idAlias);
     Clay__StringArray_Add(&context->layoutElementIdStrings, elementId.stringId);
     return elementId;
 }
@@ -3254,6 +3266,10 @@ void Clay_SetPointerState(Clay_Vector2 position, bool isPointerDown) {
                     }
                     Clay__ElementIdArray_Add(&context->pointerOverIds, mapItem->elementId);
                     found = true;
+
+                    if (mapItem->idAlias != 0) {
+                        Clay__ElementIdArray_Add(&context->pointerOverIds, CLAY__INIT(Clay_ElementId) { .id = mapItem->idAlias });
+                    }
                 }
                 if (Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT)) {
                     dfsBuffer.length--;

renderers/SDL2/README

@@ -1,7 +1,3 @@
-Please note, the SDL2 renderer is not 100% feature complete. It is currently missing:
-
-- Rounded rectangle corners
-
 Note: on Mac OSX, SDL2 for some reason decides to automatically disable momentum scrolling on macbook trackpads.
 You can re enable it in objective C using:
 

renderers/SDL2/clay_renderer_SDL2.c

@@ -33,6 +33,117 @@ static Clay_Dimensions SDL2_MeasureText(Clay_StringSlice text, Clay_TextElementC
     };
 }
 
+/* Global for convenience. Even in 4K this is enough for smooth curves (low radius or rect size coupled with
+ * no AA or low resolution might make it appear as jagged curves) */
+static int NUM_CIRCLE_SEGMENTS = 16;
+
+//all rendering is performed by a single SDL call, avoiding multiple RenderRect + plumbing choice for circles.
+static void SDL_RenderFillRoundedRect(SDL_Renderer* renderer, const SDL_FRect rect, const float cornerRadius, const Clay_Color _color) {
+    const SDL_Color color = (SDL_Color) {
+            .r = (Uint8)_color.r,
+            .g = (Uint8)_color.g,
+            .b = (Uint8)_color.b,
+            .a = (Uint8)_color.a,
+    };
+
+    int indexCount = 0, vertexCount = 0;
+
+    const float minRadius = SDL_min(rect.w, rect.h) / 2.0f;
+    const float clampedRadius = SDL_min(cornerRadius, minRadius);
+
+    const int numCircleSegments = SDL_max(NUM_CIRCLE_SEGMENTS, (int)clampedRadius * 0.5f);
+
+    int totalVertices = 4 + (4 * (numCircleSegments * 2)) + 2 * 4;
+    int totalIndices = 6 + (4 * (numCircleSegments * 3)) + 6 * 4;
+
+    SDL_Vertex vertices[totalVertices];
+    int indices[totalIndices];
+
+    //define center rectangle
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + clampedRadius, rect.y + clampedRadius}, color, {0, 0} }; //0 center TL
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w - clampedRadius, rect.y + clampedRadius}, color, {1, 0} }; //1 center TR
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w - clampedRadius, rect.y + rect.h - clampedRadius}, color, {1, 1} }; //2 center BR
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + clampedRadius, rect.y + rect.h - clampedRadius}, color, {0, 1} }; //3 center BL
+
+    indices[indexCount++] = 0;
+    indices[indexCount++] = 1;
+    indices[indexCount++] = 3;
+    indices[indexCount++] = 1;
+    indices[indexCount++] = 2;
+    indices[indexCount++] = 3;
+
+    //define rounded corners as triangle fans
+    const float step = (M_PI / 2) / numCircleSegments;
+    for (int i = 0; i < numCircleSegments; i++) {
+        const float angle1 = (float)i * step;
+        const float angle2 = ((float)i + 1.0f) * step;
+
+        for (int j = 0; j < 4; j++) {  // Iterate over four corners
+            float cx, cy, signX, signY;
+
+            switch (j) {
+            case 0: cx = rect.x + clampedRadius; cy = rect.y + clampedRadius; signX = -1; signY = -1; break; // Top-left
+            case 1: cx = rect.x + rect.w - clampedRadius; cy = rect.y + clampedRadius; signX = 1; signY = -1; break; // Top-right
+            case 2: cx = rect.x + rect.w - clampedRadius; cy = rect.y + rect.h - clampedRadius; signX = 1; signY = 1; break; // Bottom-right
+            case 3: cx = rect.x + clampedRadius; cy = rect.y + rect.h - clampedRadius; signX = -1; signY = 1; break; // Bottom-left
+            default: return;
+            }
+
+            vertices[vertexCount++] = (SDL_Vertex){ {cx + SDL_cosf(angle1) * clampedRadius * signX, cy + SDL_sinf(angle1) * clampedRadius * signY}, color, {0, 0} };
+            vertices[vertexCount++] = (SDL_Vertex){ {cx + SDL_cosf(angle2) * clampedRadius * signX, cy + SDL_sinf(angle2) * clampedRadius * signY}, color, {0, 0} };
+
+            indices[indexCount++] = j;  // Connect to corresponding central rectangle vertex
+            indices[indexCount++] = vertexCount - 2;
+            indices[indexCount++] = vertexCount - 1;
+        }
+    }
+
+    //Define edge rectangles
+    // Top edge
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + clampedRadius, rect.y}, color, {0, 0} }; //TL
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w - clampedRadius, rect.y}, color, {1, 0} }; //TR
+
+    indices[indexCount++] = 0;
+    indices[indexCount++] = vertexCount - 2; //TL
+    indices[indexCount++] = vertexCount - 1; //TR
+    indices[indexCount++] = 1;
+    indices[indexCount++] = 0;
+    indices[indexCount++] = vertexCount - 1; //TR
+    // Right edge
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w, rect.y + clampedRadius}, color, {1, 0} }; //RT
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w, rect.y + rect.h - clampedRadius}, color, {1, 1} }; //RB
+
+    indices[indexCount++] = 1;
+    indices[indexCount++] = vertexCount - 2; //RT
+    indices[indexCount++] = vertexCount - 1; //RB
+    indices[indexCount++] = 2;
+    indices[indexCount++] = 1;
+    indices[indexCount++] = vertexCount - 1; //RB
+    // Bottom edge
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w - clampedRadius, rect.y + rect.h}, color, {1, 1} }; //BR
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + clampedRadius, rect.y + rect.h}, color, {0, 1} }; //BL
+
+    indices[indexCount++] = 2;
+    indices[indexCount++] = vertexCount - 2; //BR
+    indices[indexCount++] = vertexCount - 1; //BL
+    indices[indexCount++] = 3;
+    indices[indexCount++] = 2;
+    indices[indexCount++] = vertexCount - 1; //BL
+    // Left edge
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x, rect.y + rect.h - clampedRadius}, color, {0, 1} }; //LB
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x, rect.y + clampedRadius}, color, {0, 0} }; //LT
+
+    indices[indexCount++] = 3;
+    indices[indexCount++] = vertexCount - 2; //LB
+    indices[indexCount++] = vertexCount - 1; //LT
+    indices[indexCount++] = 0;
+    indices[indexCount++] = 3;
+    indices[indexCount++] = vertexCount - 1; //LT
+
+    // Render everything
+    SDL_RenderGeometry(renderer, NULL, vertices, vertexCount, indices, indexCount);
+}
+
 SDL_Rect currentClippingRectangle;
 
 static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray renderCommands, SDL2_Font *fonts)
@@ -53,7 +164,12 @@ static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray ren
                         .w = boundingBox.width,
                         .h = boundingBox.height,
                 };
-                SDL_RenderFillRectF(renderer, &rect);
+                if (config->cornerRadius.topLeft > 0) {
+                    SDL_RenderFillRoundedRect(renderer, rect, config->cornerRadius.topLeft, color);
+                }
+                else {
+                    SDL_RenderFillRectF(renderer, &rect);
+                }
                 break;
             }
             case CLAY_RENDER_COMMAND_TYPE_TEXT: {