[Renderers/SDL3] Add borders and rounded borders functionality. (#220)

examples/SDL3-simple-demo/main.c

@@ -33,12 +33,12 @@ static inline Clay_Dimensions SDL_MeasureText(Clay_StringSlice text, Clay_TextEl
     return (Clay_Dimensions) { (float) width, (float) height };
 }
 
-static void Label(const Clay_String text)
+static void Label(const Clay_String text, const int cornerRadius)
 {
     CLAY(CLAY_LAYOUT({ .padding = {8, 8} }),
         CLAY_RECTANGLE({
             .color = Clay_Hovered() ? COLOR_BLUE : COLOR_ORANGE,
-            .cornerRadius = (Clay_CornerRadius){ 8, 8, 8, 8 },
+            .cornerRadius = cornerRadius,
         })) {
         CLAY_TEXT(text, CLAY_TEXT_CONFIG({
            .textColor = { 255, 255, 255, 255 },
@@ -48,6 +48,24 @@ static void Label(const Clay_String text)
    }
 }
 
+static void LabelBorder(const Clay_String text, const int cornerRadius, const int thickness)
+{
+    CLAY(
+        CLAY_LAYOUT({
+            .padding = {16, 16, 8, 8 } }),
+            CLAY_BORDER_OUTSIDE_RADIUS(
+                thickness,
+                COLOR_BLUE,
+                cornerRadius)
+    ){
+        CLAY_TEXT(text, CLAY_TEXT_CONFIG({
+           .textColor = { 255, 255, 255, 255 },
+           .fontId = FONT_ID,
+           .fontSize = 24,
+        }));
+    }
+}
+
 static Clay_RenderCommandArray Clay_CreateLayout()
 {
     Clay_BeginLayout();
@@ -65,13 +83,21 @@ static Clay_RenderCommandArray Clay_CreateLayout()
             .padding = { 10, 10 },
             .layoutDirection = CLAY_TOP_TO_BOTTOM,
         }),
+        CLAY_BORDER({
+            .left = { 20, COLOR_BLUE },
+            .right = { 20, COLOR_BLUE },
+            .bottom = { 20, COLOR_BLUE }
+        }),
         CLAY_RECTANGLE({
             .color = COLOR_LIGHT,
         })
     ) {
-        Label(CLAY_STRING("Button 1"));
+        Label(CLAY_STRING("Rounded - Button 1"), 10);
-        Label(CLAY_STRING("Button 2"));
+        Label(CLAY_STRING("Straight - Button 2") , 0);
-        Label(CLAY_STRING("Button 3"));
+        Label(CLAY_STRING("Rounded+ - Button 3") , 20);
+        LabelBorder(CLAY_STRING("Border - Button 4"), 0, 5);
+        LabelBorder(CLAY_STRING("RoundedBorder - Button 5"), 10, 5);
+        LabelBorder(CLAY_STRING("RoundedBorder - Button 6"), 40, 15);
     }
     return Clay_EndLayout();
 }

renderers/SDL3/README

@@ -1,5 +1,4 @@
 Please note, the SDL3 renderer is not 100% feature complete. It is currently missing:
 
-- Borders
 - Images
 - Scroll / Scissor handling

renderers/SDL3/clay_renderer_SDL3.c

@@ -2,27 +2,27 @@
 #include <SDL3/SDL_main.h>
 #include <SDL3/SDL.h>
 #include <SDL3_ttf/SDL_ttf.h>
-#include <math.h> //needed to perform the rounded corners rendering
 
 /* This needs to be global because the "MeasureText" callback doesn't have a
  * user data parameter */
 static TTF_Font *gFonts[1];
+/* 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_RenderRoundedRect(SDL_Renderer *renderer, const SDL_FRect rect, const float cornerRadius, const Clay_Color _color) {
+static void SDL_RenderFillRoundedRect(SDL_Renderer *renderer, const SDL_FRect rect, const float cornerRadius, const Clay_Color _color) {
-    /* 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) */
-    const int NUM_CIRCLE_SEGMENTS = 16;
-
     const SDL_FColor color = { _color.r/255, _color.g/255, _color.b/255, _color.a/255 };
 
     int indexCount = 0, vertexCount = 0;
 
-    const float minRadius = fminf(rect.w, rect.h) / 2.0f;
+    const float minRadius = SDL_min(rect.w, rect.h) / 2.0f;
-    const float clampedRadius = fminf(cornerRadius, minRadius);
+    const float clampedRadius = SDL_min(cornerRadius, minRadius);
 
-    int totalVertices = 4 + (4 * (NUM_CIRCLE_SEGMENTS * 2)) + 2*4;
+    const int numCircleSegments = SDL_max(NUM_CIRCLE_SEGMENTS, (int) clampedRadius * 0.5f);
-    int totalIndices = 6 + (4 * (NUM_CIRCLE_SEGMENTS * 3)) + 6*4;
+
+    int totalVertices = 4 + (4 * (numCircleSegments * 2)) + 2*4;
+    int totalIndices = 6 + (4 * (numCircleSegments * 3)) + 6*4;
 
     SDL_Vertex vertices[totalVertices];
     int indices[totalIndices];
@@ -41,9 +41,8 @@ static void SDL_RenderRoundedRect(SDL_Renderer *renderer, const SDL_FRect rect,
     indices[indexCount++] = 3;
 
     //define rounded corners as triangle fans
-    const float step = M_PI_2 / NUM_CIRCLE_SEGMENTS;
+    const float step = (SDL_PI_F/2) / numCircleSegments;
-    for (int i = 0; i < NUM_CIRCLE_SEGMENTS; i++)
+    for (int i = 0; i < numCircleSegments; i++) {
-    {
         const float angle1 = (float)i * step;
         const float angle2 = ((float)i + 1.0f) * step;
 
@@ -55,11 +54,11 @@ static void SDL_RenderRoundedRect(SDL_Renderer *renderer, const SDL_FRect rect,
                 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: SDL_LogError(SDL_LOG_CATEGORY_ERROR, "Invalid corner index"); return;
+                default: return;
             }
 
-            vertices[vertexCount++] = (SDL_Vertex){ {cx + cosf(angle1) * clampedRadius * signX, cy + sinf(angle1) * clampedRadius * signY}, color, {0, 0} };
+            vertices[vertexCount++] = (SDL_Vertex){ {cx + SDL_cosf(angle1) * clampedRadius * signX, cy + SDL_sinf(angle1) * clampedRadius * signY}, color, {0, 0} };
-            vertices[vertexCount++] = (SDL_Vertex){ {cx + cosf(angle2) * clampedRadius * signX, cy + sinf(angle2) * 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;
@@ -113,6 +112,30 @@ static void SDL_RenderRoundedRect(SDL_Renderer *renderer, const SDL_FRect rect,
     SDL_RenderGeometry(renderer, NULL, vertices, vertexCount, indices, indexCount);
 }
 
+static void SDL_RenderArc(SDL_Renderer *renderer, const SDL_FPoint center, const float radius, const float startAngle, const float endAngle, const float thickness, const Clay_Color color) {
+    SDL_SetRenderDrawColor(renderer, color.r, color.g, color.b, color.a);
+
+    const float radStart = startAngle * (SDL_PI_F / 180.0f);
+    const float radEnd = endAngle * (SDL_PI_F / 180.0f);
+
+    const int numCircleSegments = SDL_max(NUM_CIRCLE_SEGMENTS, (int)(radius * 1.5f)); //increase circle segments for larger circles, 1.5 is arbitrary.
+
+    const float angleStep = (radEnd - radStart) / (float)numCircleSegments;
+    const float thicknessStep = 0.4f; //arbitrary value to avoid overlapping lines. Changing THICKNESS_STEP or numCircleSegments might cause artifacts.
+
+    for (float t = thicknessStep; t < thickness - thicknessStep; t += thicknessStep) {
+        SDL_FPoint points[numCircleSegments + 1];
+        const float clampedRadius = SDL_max(radius - t, 1.0f);
+
+        for (int i = 0; i <= numCircleSegments; i++) {
+            const float angle = radStart + i * angleStep;
+            points[i] = (SDL_FPoint){
+                    SDL_roundf(center.x + SDL_cosf(angle) * clampedRadius),
+                    SDL_roundf(center.y + SDL_sinf(angle) * clampedRadius) };
+        }
+        SDL_RenderLines(renderer, points, numCircleSegments + 1);
+    }
+}
 
 static void SDL_RenderClayCommands(SDL_Renderer *renderer, Clay_RenderCommandArray *rcommands)
 {
@@ -128,9 +151,7 @@ static void SDL_RenderClayCommands(SDL_Renderer *renderer, Clay_RenderCommandArr
 
                 SDL_SetRenderDrawColor(renderer, color.r, color.g, color.b, color.a);
                 if (config->cornerRadius.topLeft > 0) {
-                    //const float radius = (config->cornerRadius.topLeft * 2) / (float)((bounding_box.width > bounding_box.height) ? bounding_box.height : bounding_box.width);
+                    SDL_RenderFillRoundedRect(renderer, rect, config->cornerRadius.topLeft, color);
-                    //SDL_RenderRoundedRect(renderer, rect, radius, color);
-                    SDL_RenderRoundedRect(renderer, rect, config->cornerRadius.topLeft, color);
                 } else {
                     SDL_RenderFillRect(renderer, &rect);
                 }
@@ -148,6 +169,72 @@ static void SDL_RenderClayCommands(SDL_Renderer *renderer, Clay_RenderCommandArr
                 SDL_DestroySurface(surface);
                 SDL_DestroyTexture(texture);
             } break;
+            case CLAY_RENDER_COMMAND_TYPE_BORDER: {
+                const Clay_BorderElementConfig *config = rcmd->config.borderElementConfig;
+
+                const float minRadius = SDL_min(rect.w, rect.h) / 2.0f;
+                const Clay_CornerRadius clampedRadii = {
+                    .topLeft = SDL_min(config->cornerRadius.topLeft, minRadius),
+                    .topRight = SDL_min(config->cornerRadius.topRight, minRadius),
+                    .bottomLeft = SDL_min(config->cornerRadius.bottomLeft, minRadius),
+                    .bottomRight = SDL_min(config->cornerRadius.bottomRight, minRadius)
+                };
+                //edges
+                SDL_SetRenderDrawColor(renderer, config->left.color.r, config->left.color.g, config->left.color.b, config->left.color.a);
+                if (config->left.width > 0) {
+                    const float starting_y = rect.y + clampedRadii.topLeft;
+                    const float length = rect.h - clampedRadii.topLeft - clampedRadii.bottomLeft;
+                    SDL_FRect line = { rect.x, starting_y, config->left.width, length };
+                    SDL_RenderFillRect(renderer, &line);
+                }
+                if (config->right.width > 0) {
+                    const float starting_x = rect.x + rect.w - (float)config->right.width;
+                    const float starting_y = rect.y + clampedRadii.topRight;
+                    const float length = rect.h - clampedRadii.topRight - clampedRadii.bottomRight;
+                    SDL_FRect line = { starting_x, starting_y, config->right.width, length };
+                    SDL_RenderFillRect(renderer, &line);
+                }
+                if (config->top.width > 0) {
+                    const float starting_x = rect.x + clampedRadii.topLeft;
+                    const float length = rect.w - clampedRadii.topLeft - clampedRadii.topRight;
+                    SDL_FRect line = { starting_x, rect.y, length, config->top.width };
+                    SDL_RenderFillRect(renderer, &line);
+                }
+                if (config->bottom.width > 0) {
+                    const float starting_x = rect.x + clampedRadii.bottomLeft;
+                    const float starting_y = rect.y + rect.h - (float)config->bottom.width;
+                    const float length = rect.w - clampedRadii.bottomLeft - clampedRadii.bottomRight;
+                    SDL_FRect line = { starting_x, starting_y, length, config->bottom.width };
+                    SDL_SetRenderDrawColor(renderer, config->bottom.color.r, config->bottom.color.g, config->bottom.color.b, config->bottom.color.a);
+                    SDL_RenderFillRect(renderer, &line);
+                }
+                //corners
+                if (config->cornerRadius.topLeft > 0) {
+                    const float centerX = rect.x + clampedRadii.topLeft -1;
+                    const float centerY = rect.y + clampedRadii.topLeft;
+                    SDL_RenderArc(renderer, (SDL_FPoint){centerX, centerY}, clampedRadii.topLeft,
+                        180.0f, 270.0f, config->top.width, config->top.color);
+                }
+                if (config->cornerRadius.topRight > 0) {
+                    const float centerX = rect.x + rect.w - clampedRadii.topRight -1;
+                    const float centerY = rect.y + clampedRadii.topRight;
+                    SDL_RenderArc(renderer, (SDL_FPoint){centerX, centerY}, clampedRadii.topRight,
+                        270.0f, 360.0f, config->top.width, config->top.color);
+                }
+                if (config->cornerRadius.bottomLeft > 0) {
+                    const float centerX = rect.x + clampedRadii.bottomLeft -1;
+                    const float centerY = rect.y + rect.h - clampedRadii.bottomLeft -1;
+                    SDL_RenderArc(renderer, (SDL_FPoint){centerX, centerY}, clampedRadii.bottomLeft,
+                        90.0f, 180.0f, config->bottom.width, config->bottom.color);
+                }
+                if (config->cornerRadius.bottomRight > 0) {
+                    const float centerX = rect.x + rect.w - clampedRadii.bottomRight -1; //TODO: why need to -1 in all calculations???
+                    const float centerY = rect.y + rect.h - clampedRadii.bottomRight -1;
+                    SDL_RenderArc(renderer, (SDL_FPoint){centerX, centerY}, clampedRadii.bottomRight,
+                        0.0f, 90.0f, config->bottom.width, config->bottom.color);
+                }
+
+            } break;
             default:
                 SDL_Log("Unknown render command type: %d", rcmd->commandType);
         }