Compare commits

...

6 Commits

Author SHA1 Message Date
Harrison Lambeth
34f81cf886
Merge b97bf246c8 into c73dffbb6f 2025-02-13 16:23:26 -05:00
Nic Barker
c73dffbb6f
[Github] Create FUNDING.yml
Some checks failed
CMake on multiple platforms / build (Release, cl, cl, windows-latest) (push) Has been cancelled
CMake on multiple platforms / build (Release, clang, clang++, ubuntu-latest) (push) Has been cancelled
CMake on multiple platforms / build (Release, gcc, g++, ubuntu-latest) (push) Has been cancelled
2025-02-14 10:17:29 +13:00
Timothy Hoyt
eb553962e8
[Renderers/SDL2] Added rounded corner borders and fixed other issues (#258) 2025-02-14 10:14:11 +13:00
Nic Barker
d9e02ab1d3 [Core] Fix aspect ratio scaling of images when only one sizing axis was specified 2025-02-14 10:05:16 +13:00
Harrison Lambeth
b97bf246c8 Fix some things that broke after rebasing 2025-01-29 19:21:31 -07:00
Harrison Lambeth
3f39223eb4 Clay_GetElementIdsAtPoint 2025-01-29 19:07:45 -07:00
3 changed files with 270 additions and 26 deletions

1
.github/FUNDING.yml vendored Normal file
View File

@ -0,0 +1 @@
github: [nicbarker]

85
clay.h
View File

@ -764,6 +764,12 @@ typedef struct {
void *userData; void *userData;
} Clay_ErrorHandler; } Clay_ErrorHandler;
typedef struct
{
int32_t length;
const Clay_ElementId *results;
} Clay_PointQueryResult;
// Function Forward Declarations --------------------------------- // Function Forward Declarations ---------------------------------
// Public API functions ------------------------------------------ // Public API functions ------------------------------------------
@ -855,6 +861,7 @@ void Clay_SetMaxMeasureTextCacheWordCount(int32_t maxMeasureTextCacheWordCount);
// Resets Clay's internal text measurement cache, useful if memory to represent strings is being re-used. // Resets Clay's internal text measurement cache, useful if memory to represent strings is being re-used.
// Similar behaviour can be achieved on an individual text element level by using Clay_TextElementConfig.hashStringContents // Similar behaviour can be achieved on an individual text element level by using Clay_TextElementConfig.hashStringContents
void Clay_ResetMeasureTextCache(void); void Clay_ResetMeasureTextCache(void);
Clay_PointQueryResult Clay_GetElementIdsAtPoint(Clay_Vector2 point);
// Internal API functions required by macros ---------------------- // Internal API functions required by macros ----------------------
@ -1217,6 +1224,8 @@ struct Clay_Context {
Clay__boolArray treeNodeVisited; Clay__boolArray treeNodeVisited;
Clay__charArray dynamicStringData; Clay__charArray dynamicStringData;
Clay__DebugElementDataArray debugElementData; Clay__DebugElementDataArray debugElementData;
// Point querying
Clay__ElementIdArray pointQueryIds;
}; };
Clay_Context* Clay__Context_Allocate_Arena(Clay_Arena *arena) { Clay_Context* Clay__Context_Allocate_Arena(Clay_Arena *arena) {
@ -1598,6 +1607,25 @@ bool Clay__ElementHasConfig(Clay_LayoutElement *layoutElement, Clay__ElementConf
return false; return false;
} }
void Clay__UpdateAspectRatioBox(Clay_LayoutElement *layoutElement) {
for (int32_t j = 0; j < layoutElement->elementConfigs.length; j++) {
Clay_ElementConfig *config = Clay__ElementConfigArraySlice_Get(&layoutElement->elementConfigs, j);
if (config->type == CLAY__ELEMENT_CONFIG_TYPE_IMAGE) {
Clay_ImageElementConfig *imageConfig = config->config.imageElementConfig;
if (imageConfig->sourceDimensions.width == 0 || imageConfig->sourceDimensions.height == 0) {
break;
}
float aspect = imageConfig->sourceDimensions.width / imageConfig->sourceDimensions.height;
if (layoutElement->dimensions.width == 0 && layoutElement->dimensions.height != 0) {
layoutElement->dimensions.width = layoutElement->dimensions.height * aspect;
} else if (layoutElement->dimensions.width != 0 && layoutElement->dimensions.height == 0) {
layoutElement->dimensions.height = layoutElement->dimensions.height * (1 / aspect);
}
break;
}
}
}
void Clay__CloseElement(void) { void Clay__CloseElement(void) {
Clay_Context* context = Clay_GetCurrentContext(); Clay_Context* context = Clay_GetCurrentContext();
if (context->booleanWarnings.maxElementsExceeded) { if (context->booleanWarnings.maxElementsExceeded) {
@ -1684,6 +1712,8 @@ void Clay__CloseElement(void) {
openLayoutElement->dimensions.height = 0; openLayoutElement->dimensions.height = 0;
} }
Clay__UpdateAspectRatioBox(openLayoutElement);
bool elementIsFloating = Clay__ElementHasConfig(openLayoutElement, CLAY__ELEMENT_CONFIG_TYPE_FLOATING); bool elementIsFloating = Clay__ElementHasConfig(openLayoutElement, CLAY__ELEMENT_CONFIG_TYPE_FLOATING);
// Close the currently open element // Close the currently open element
@ -1987,6 +2017,7 @@ void Clay__InitializePersistentMemory(Clay_Context* context) {
context->measureTextHashMap = Clay__int32_tArray_Allocate_Arena(maxElementCount, arena); context->measureTextHashMap = Clay__int32_tArray_Allocate_Arena(maxElementCount, arena);
context->measuredWords = Clay__MeasuredWordArray_Allocate_Arena(maxMeasureTextCacheWordCount, arena); context->measuredWords = Clay__MeasuredWordArray_Allocate_Arena(maxMeasureTextCacheWordCount, arena);
context->pointerOverIds = Clay__ElementIdArray_Allocate_Arena(maxElementCount, arena); context->pointerOverIds = Clay__ElementIdArray_Allocate_Arena(maxElementCount, arena);
context->pointQueryIds = Clay__ElementIdArray_Allocate_Arena(maxElementCount, arena);
context->debugElementData = Clay__DebugElementDataArray_Allocate_Arena(maxElementCount, arena); context->debugElementData = Clay__DebugElementDataArray_Allocate_Arena(maxElementCount, arena);
context->arenaResetOffset = arena->nextAllocation; context->arenaResetOffset = arena->nextAllocation;
} }
@ -2125,6 +2156,7 @@ void Clay__SizeContainersAlongAxis(bool xAxis) {
if (sizingAlongAxis) { if (sizingAlongAxis) {
innerContentSize += *childSize; innerContentSize += *childSize;
} }
Clay__UpdateAspectRatioBox(childElement);
} }
} }
@ -3676,6 +3708,59 @@ void Clay_SetPointerState(Clay_Vector2 position, bool isPointerDown) {
} }
} }
CLAY_WASM_EXPORT("Clay_GetElementIdsAtPoint")
Clay_PointQueryResult Clay_GetElementIdsAtPoint(Clay_Vector2 position) {
Clay_Context* context = Clay_GetCurrentContext();
if (context->booleanWarnings.maxElementsExceeded) {
return CLAY__INIT(Clay_PointQueryResult) { 0, NULL };
}
context->pointQueryIds.length = 0;
Clay__int32_tArray dfsBuffer = context->layoutElementChildrenBuffer;
for (int32_t rootIndex = context->layoutElementTreeRoots.length - 1; rootIndex >= 0; --rootIndex) {
dfsBuffer.length = 0;
Clay__LayoutElementTreeRoot *root = Clay__LayoutElementTreeRootArray_Get(&context->layoutElementTreeRoots, rootIndex);
Clay__int32_tArray_Add(&dfsBuffer, (int32_t)root->layoutElementIndex);
context->treeNodeVisited.internalArray[0] = false;
bool found = false;
while (dfsBuffer.length > 0) {
if (context->treeNodeVisited.internalArray[dfsBuffer.length - 1]) {
dfsBuffer.length--;
continue;
}
context->treeNodeVisited.internalArray[dfsBuffer.length - 1] = true;
Clay_LayoutElement *currentElement = Clay_LayoutElementArray_Get(&context->layoutElements, Clay__int32_tArray_GetValue(&dfsBuffer, (int)dfsBuffer.length - 1));
Clay_LayoutElementHashMapItem *mapItem = Clay__GetHashMapItem(currentElement->id); // TODO think of a way around this, maybe the fact that it's essentially a binary tree limits the cost, but the worst case is not great
Clay_BoundingBox elementBox = mapItem->boundingBox;
elementBox.x -= root->pointerOffset.x;
elementBox.y -= root->pointerOffset.y;
if (mapItem) {
if ((Clay__PointIsInsideRect(position, elementBox))) {
Clay__ElementIdArray_Add(&context->pointQueryIds, mapItem->elementId);
found = true;
}
if (Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT)) {
dfsBuffer.length--;
continue;
}
for (int32_t i = currentElement->childrenOrTextContent.children.length - 1; i >= 0; --i) {
Clay__int32_tArray_Add(&dfsBuffer, currentElement->childrenOrTextContent.children.elements[i]);
context->treeNodeVisited.internalArray[dfsBuffer.length - 1] = false; // TODO needs to be ranged checked
}
} else {
dfsBuffer.length--;
}
}
Clay_LayoutElement *rootElement = Clay_LayoutElementArray_Get(&context->layoutElements, root->layoutElementIndex);
if (found && Clay__ElementHasConfig(rootElement, CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER) &&
Clay__FindElementConfigWithType(rootElement, CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER).floatingElementConfig->pointerCaptureMode == CLAY_POINTER_CAPTURE_MODE_CAPTURE) {
break;
}
}
return CLAY__INIT(Clay_PointQueryResult) { context->pointQueryIds.length, context->pointQueryIds.internalArray };
}
CLAY_WASM_EXPORT("Clay_Initialize") CLAY_WASM_EXPORT("Clay_Initialize")
Clay_Context* Clay_Initialize(Clay_Arena arena, Clay_Dimensions layoutDimensions, Clay_ErrorHandler errorHandler) { Clay_Context* Clay_Initialize(Clay_Arena arena, Clay_Dimensions layoutDimensions, Clay_ErrorHandler errorHandler) {
Clay_Context *context = Clay__Context_Allocate_Arena(&arena); Clay_Context *context = Clay__Context_Allocate_Arena(&arena);

View File

@ -4,6 +4,10 @@
#include <SDL_image.h> #include <SDL_image.h>
#include <stdio.h> #include <stdio.h>
#ifndef M_PI
#define M_PI 3.14159
#endif
#define CLAY_COLOR_TO_SDL_COLOR_ARGS(color) color.r, color.g, color.b, color.a #define CLAY_COLOR_TO_SDL_COLOR_ARGS(color) color.r, color.g, color.b, color.a
typedef struct typedef struct
@ -48,8 +52,8 @@ static void SDL_RenderFillRoundedRect(SDL_Renderer* renderer, const SDL_FRect re
int indexCount = 0, vertexCount = 0; int indexCount = 0, vertexCount = 0;
const float minRadius = SDL_min(rect.w, rect.h) / 2.0f; const float maxRadius = SDL_min(rect.w, rect.h) / 2.0f;
const float clampedRadius = SDL_min(cornerRadius, minRadius); const float clampedRadius = SDL_min(cornerRadius, maxRadius);
const int numCircleSegments = SDL_max(NUM_CIRCLE_SEGMENTS, (int)clampedRadius * 0.5f); const int numCircleSegments = SDL_max(NUM_CIRCLE_SEGMENTS, (int)clampedRadius * 0.5f);
@ -141,6 +145,121 @@ static void SDL_RenderFillRoundedRect(SDL_Renderer* renderer, const SDL_FRect re
SDL_RenderGeometry(renderer, NULL, vertices, vertexCount, indices, indexCount); SDL_RenderGeometry(renderer, NULL, vertices, vertexCount, indices, indexCount);
} }
//all rendering is performed by a single SDL call, using twi sets of arcing triangles, inner and outer, that fit together; along with two tringles to fill the end gaps.
void SDL_RenderCornerBorder(SDL_Renderer *renderer, Clay_BoundingBox* boundingBox, Clay_BorderRenderData* config, int cornerIndex, Clay_Color _color){
/////////////////////////////////
//The arc is constructed of outer triangles and inner triangles (if needed).
//First three vertices are first outer triangle's vertices
//Each two vertices after that are the inner-middle and second-outer vertex of
//each outer triangle after the first, because there first-outer vertex is equal to the
//second-outer vertex of the previous triangle. Indices set accordingly.
//The final two vertices are the missing vertices for the first and last inner triangles (if needed)
//Everything is in clockwise order (CW).
/////////////////////////////////
const SDL_Color color = (SDL_Color) {
.r = (Uint8)_color.r,
.g = (Uint8)_color.g,
.b = (Uint8)_color.b,
.a = (Uint8)_color.a,
};
float centerX, centerY, outerRadius, clampedRadius, startAngle, borderWidth;
const float maxRadius = SDL_min(boundingBox->width, boundingBox->height) / 2.0f;
SDL_Vertex vertices[512];
int indices[512];
int indexCount = 0, vertexCount = 0;
switch (cornerIndex) {
case(0):
startAngle = M_PI;
outerRadius = SDL_min(config->cornerRadius.topLeft, maxRadius);
centerX = boundingBox->x + outerRadius;
centerY = boundingBox->y + outerRadius;
borderWidth = config->width.top;
break;
case(1):
startAngle = 3*M_PI/2;
outerRadius = SDL_min(config->cornerRadius.topRight, maxRadius);
centerX = boundingBox->x + boundingBox->width - outerRadius;
centerY = boundingBox->y + outerRadius;
borderWidth = config->width.top;
break;
case(2):
startAngle = 0;
outerRadius = SDL_min(config->cornerRadius.bottomRight, maxRadius);
centerX = boundingBox->x + boundingBox->width - outerRadius;
centerY = boundingBox->y + boundingBox->height - outerRadius;
borderWidth = config->width.bottom;
break;
case(3):
startAngle = M_PI/2;
outerRadius = SDL_min(config->cornerRadius.bottomLeft, maxRadius);
centerX = boundingBox->x + outerRadius;
centerY = boundingBox->y + boundingBox->height - outerRadius;
borderWidth = config->width.bottom;
break;
default: break;
}
const float innerRadius = outerRadius - borderWidth;
const int minNumOuterTriangles = NUM_CIRCLE_SEGMENTS;
const int numOuterTriangles = SDL_max(minNumOuterTriangles, ceilf(outerRadius * 0.5f));
const float angleStep = M_PI / (2.0*(float)numOuterTriangles);
//outer triangles, in CW order
for (int i = 0; i < numOuterTriangles; i++) {
float angle1 = startAngle + i*angleStep; //first-outer vertex angle
float angle2 = startAngle + ((float)i + 0.5) * angleStep; //inner-middle vertex angle
float angle3 = startAngle + (i+1)*angleStep; // second-outer vertex angle
if( i == 0){ //first outer triangle
vertices[vertexCount++] = (SDL_Vertex){ {centerX + SDL_cosf(angle1) * outerRadius, centerY + SDL_sinf(angle1) * outerRadius}, color, {0, 0} }; //vertex index = 0
}
indices[indexCount++] = vertexCount - 1; //will be second-outer vertex of last outer triangle if not first outer triangle.
vertices[vertexCount++] = (innerRadius > 0)?
(SDL_Vertex){ {centerX + SDL_cosf(angle2) * (innerRadius), centerY + SDL_sinf(angle2) * (innerRadius)}, color, {0, 0}}:
(SDL_Vertex){ {centerX, centerY }, color, {0, 0}};
indices[indexCount++] = vertexCount - 1;
vertices[vertexCount++] = (SDL_Vertex){ {centerX + SDL_cosf(angle3) * outerRadius, centerY + SDL_sinf(angle3) * outerRadius}, color, {0, 0} };
indices[indexCount++] = vertexCount - 1;
}
if(innerRadius > 0){
// inner triangles in CW order (except the first and last)
for (int i = 0; i < numOuterTriangles - 1; i++){ //skip the last outer triangle
if(i==0){ //first outer triangle -> second inner triangle
indices[indexCount++] = 1; //inner-middle vertex of first outer triangle
indices[indexCount++] = 2; //second-outer vertex of first outer triangle
indices[indexCount++] = 3; //innder-middle vertex of second-outer triangle
}else{
int baseIndex = 3; //skip first outer triangle
indices[indexCount++] = baseIndex + (i-1)*2; // inner-middle vertex of current outer triangle
indices[indexCount++] = baseIndex + (i-1)*2 + 1; // second-outer vertex of current outer triangle
indices[indexCount++] = baseIndex + (i-1)*2 + 2; // inner-middle vertex of next outer triangle
}
}
float endAngle = startAngle + M_PI/2.0;
//last inner triangle
indices[indexCount++] = vertexCount - 2; //inner-middle vertex of last outer triangle
indices[indexCount++] = vertexCount - 1; //second-outer vertex of last outer triangle
vertices[vertexCount++] = (SDL_Vertex){ {centerX + SDL_cosf(endAngle) * innerRadius, centerY + SDL_sinf(endAngle) * innerRadius}, color, {0, 0} }; //missing vertex
indices[indexCount++] = vertexCount - 1;
// //first inner triangle
indices[indexCount++] = 0; //first-outer vertex of first outer triangle
indices[indexCount++] = 1; //inner-middle vertex of first outer triangle
vertices[vertexCount++] = (SDL_Vertex){ {centerX + SDL_cosf(startAngle) * innerRadius, centerY + SDL_sinf(startAngle) * innerRadius}, color, {0, 0} }; //missing vertex
indices[indexCount++] = vertexCount - 1;
}
SDL_RenderGeometry(renderer, NULL, vertices, vertexCount, indices, indexCount);
}
SDL_Rect currentClippingRectangle; SDL_Rect currentClippingRectangle;
static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray renderCommands, SDL2_Font *fonts) static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray renderCommands, SDL2_Font *fonts)
@ -228,35 +347,74 @@ static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray ren
} }
case CLAY_RENDER_COMMAND_TYPE_BORDER: { case CLAY_RENDER_COMMAND_TYPE_BORDER: {
Clay_BorderRenderData *config = &renderCommand->renderData.border; Clay_BorderRenderData *config = &renderCommand->renderData.border;
SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color));
if (config->width.left > 0) { if(boundingBox.width > 0 & boundingBox.height > 0){
SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color)); const float maxRadius = SDL_min(boundingBox.width, boundingBox.height) / 2.0f;
SDL_FRect rect = { boundingBox.x, boundingBox.y + config->cornerRadius.topLeft, config->width.left, boundingBox.height - config->cornerRadius.topLeft - config->cornerRadius.bottomLeft };
SDL_RenderFillRectF(renderer, &rect);
}
if (config->width.right > 0) { if (config->width.left > 0) {
SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color)); const float clampedRadiusTop = SDL_min((float)config->cornerRadius.topLeft, maxRadius);
SDL_FRect rect = { boundingBox.x + boundingBox.width - config->width.right, boundingBox.y + config->cornerRadius.topRight, config->width.right, boundingBox.height - config->cornerRadius.topRight - config->cornerRadius.bottomRight }; const float clampedRadiusBottom = SDL_min((float)config->cornerRadius.bottomLeft, maxRadius);
SDL_RenderFillRectF(renderer, &rect); SDL_FRect rect = {
} boundingBox.x,
boundingBox.y + clampedRadiusTop,
(float)config->width.left,
(float)boundingBox.height - clampedRadiusTop - clampedRadiusBottom
};
SDL_RenderFillRectF(renderer, &rect);
}
if (config->width.right > 0) {
const float clampedRadiusTop = SDL_min((float)config->cornerRadius.topRight, maxRadius);
const float clampedRadiusBottom = SDL_min((float)config->cornerRadius.bottomRight, maxRadius);
SDL_FRect rect = {
boundingBox.x + boundingBox.width - config->width.right,
boundingBox.y + clampedRadiusTop,
(float)config->width.right,
(float)boundingBox.height - clampedRadiusTop - clampedRadiusBottom
};
SDL_RenderFillRectF(renderer, &rect);
}
if (config->width.top > 0) {
const float clampedRadiusLeft = SDL_min((float)config->cornerRadius.topLeft, maxRadius);
const float clampedRadiusRight = SDL_min((float)config->cornerRadius.topRight, maxRadius);
SDL_FRect rect = {
boundingBox.x + clampedRadiusLeft,
boundingBox.y,
boundingBox.width - clampedRadiusLeft - clampedRadiusRight,
(float)config->width.top };
SDL_RenderFillRectF(renderer, &rect);
}
if (config->width.bottom > 0) {
const float clampedRadiusLeft = SDL_min((float)config->cornerRadius.bottomLeft, maxRadius);
const float clampedRadiusRight = SDL_min((float)config->cornerRadius.bottomRight, maxRadius);
SDL_FRect rect = {
boundingBox.x + clampedRadiusLeft,
boundingBox.y + boundingBox.height - config->width.bottom,
boundingBox.width - clampedRadiusLeft - clampedRadiusRight,
(float)config->width.bottom
};
SDL_RenderFillRectF(renderer, &rect);
}
//corner index: 0->3 topLeft -> CW -> bottonLeft
if (config->width.top > 0 & config->cornerRadius.topLeft > 0) {
SDL_RenderCornerBorder(renderer, &boundingBox, config, 0, config->color);
}
if (config->width.right > 0) { if (config->width.top > 0 & config->cornerRadius.topRight> 0) {
SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color)); SDL_RenderCornerBorder(renderer, &boundingBox, config, 1, config->color);
SDL_FRect rect = { boundingBox.x + boundingBox.width - config->width.right, boundingBox.y + config->cornerRadius.topRight, config->width.right, boundingBox.height - config->cornerRadius.topRight - config->cornerRadius.bottomRight }; }
SDL_RenderFillRectF(renderer, &rect);
}
if (config->width.top > 0) { if (config->width.bottom > 0 & config->cornerRadius.bottomLeft > 0) {
SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color)); SDL_RenderCornerBorder(renderer, &boundingBox, config, 2, config->color);
SDL_FRect rect = { boundingBox.x + config->cornerRadius.topLeft, boundingBox.y, boundingBox.width - config->cornerRadius.topLeft - config->cornerRadius.topRight, config->width.top }; }
SDL_RenderFillRectF(renderer, &rect);
}
if (config->width.bottom > 0) { if (config->width.bottom > 0 & config->cornerRadius.bottomLeft > 0) {
SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color)); SDL_RenderCornerBorder(renderer, &boundingBox, config, 3, config->color);
SDL_FRect rect = { boundingBox.x + config->cornerRadius.bottomLeft, boundingBox.y + boundingBox.height - config->width.bottom, boundingBox.width - config->cornerRadius.bottomLeft - config->cornerRadius.bottomRight, config->width.bottom }; }
SDL_RenderFillRectF(renderer, &rect);
} }
break; break;