diff --git a/examples/SDL3-simple-demo/main.c b/examples/SDL3-simple-demo/main.c index 0ececbc..2b89dbb 100644 --- a/examples/SDL3-simple-demo/main.c +++ b/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("Button 2")); - Label(CLAY_STRING("Button 3")); + Label(CLAY_STRING("Rounded - Button 1"), 10); + Label(CLAY_STRING("Straight - Button 2") , 0); + 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(); } diff --git a/renderers/SDL3/README b/renderers/SDL3/README index 7dadc47..618097f 100644 --- a/renderers/SDL3/README +++ b/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 diff --git a/renderers/SDL3/clay_renderer_SDL3.c b/renderers/SDL3/clay_renderer_SDL3.c index fe069b7..91ef025 100644 --- a/renderers/SDL3/clay_renderer_SDL3.c +++ b/renderers/SDL3/clay_renderer_SDL3.c @@ -2,27 +2,27 @@ #include #include #include -#include //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) { - /* 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; - +//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_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 clampedRadius = fminf(cornerRadius, minRadius); + const float minRadius = SDL_min(rect.w, rect.h) / 2.0f; + const float clampedRadius = SDL_min(cornerRadius, minRadius); - int totalVertices = 4 + (4 * (NUM_CIRCLE_SEGMENTS * 2)) + 2*4; - int totalIndices = 6 + (4 * (NUM_CIRCLE_SEGMENTS * 3)) + 6*4; + 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]; @@ -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; - for (int i = 0; i < NUM_CIRCLE_SEGMENTS; i++) - { + const float step = (SDL_PI_F/2) / numCircleSegments; + 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 + cosf(angle2) * clampedRadius * signX, cy + sinf(angle2) * 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 + 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_RenderRoundedRect(renderer, rect, radius, color); - SDL_RenderRoundedRect(renderer, rect, config->cornerRadius.topLeft, color); + SDL_RenderFillRoundedRect(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); }