diff --git a/clay.h b/clay.h
index 40e6ac3..21ff767 100644
--- a/clay.h
+++ b/clay.h
@@ -13,10 +13,13 @@
#include <stdint.h>
#include <stdbool.h>
#include <stddef.h>
-#include <arm_neon.h>
#include <stdlib.h>
#include <string.h>
+#ifdef __aarch64__
+#include <arm_neon.h>
+#endif
+
// -----------------------------------------
// HEADER DECLARATIONS ---------------------
// -----------------------------------------
@@ -65,7 +68,7 @@
#define CLAY_BORDER_OUTSIDE(...) { .left = __VA_ARGS__, .right = __VA_ARGS__, .top = __VA_ARGS__, .bottom = __VA_ARGS__ }
-#define CLAY_BORDER_OUTSIDE_RADIUS(width, color, radius) Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .borderElementConfig = Clay__StoreBorderElementConfig(CLAY__INIT(Clay_BorderElementConfig) { .left = { width, color }, .right = { width, color }, .top = { width, color }, .bottom = { width, color }, .cornerRadius = CLAY_CORNER_RADIUS(radius) })}, CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER)
+#define CLAY_BORDER_OUTSIDE_RADIUS(width, color, radius) CLAY__INIT(Clay_BorderElementConfig) { .left = { width, color }, .right = { width, color }, .top = { width, color }, .bottom = { width, color }, .cornerRadius = CLAY_CORNER_RADIUS(radius) }
#define CLAY_BORDER_ALL(...) Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .borderElementConfig = Clay__StoreBorderElementConfig(CLAY__INIT(Clay_BorderElementConfig) { .left = __VA_ARGS__, .right = __VA_ARGS__, .top = __VA_ARGS__, .bottom = __VA_ARGS__, .betweenChildren = __VA_ARGS__ } ) }, CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER)
@@ -129,7 +132,7 @@ static uint8_t CLAY__ELEMENT_DEFINITION_LATCH;
*/
#define CLAY(...) \
for (\
- CLAY__ELEMENT_DEFINITION_LATCH = (Clay__OpenElement(CLAY__INIT(Clay_ElementDeclaration) __VA_ARGS__), Clay__ElementPostConfiguration(), 0); \
+ CLAY__ELEMENT_DEFINITION_LATCH = (Clay__OpenElement(), Clay__ConfigureOpenElement(CLAY__INIT(Clay_ElementDeclaration) __VA_ARGS__), 0); \
CLAY__ELEMENT_DEFINITION_LATCH < 1; \
++CLAY__ELEMENT_DEFINITION_LATCH, Clay__CloseElement() \
)
@@ -556,10 +559,10 @@ void Clay_SetMaxMeasureTextCacheWordCount(int32_t maxMeasureTextCacheWordCount);
void Clay_ResetMeasureTextCache(void);
// Internal API functions required by macros
-void Clay__OpenElement(Clay_ElementDeclaration config);
+void Clay__OpenElement();
+void Clay__ConfigureOpenElement(const Clay_ElementDeclaration config);
void Clay__CloseElement(void);
Clay_LayoutConfig * Clay__StoreLayoutConfig(Clay_LayoutConfig config);
-void Clay__ElementPostConfiguration(void);
Clay_ElementId Clay__AttachId(Clay_ElementId id);
void Clay__AttachLayoutConfig(Clay_LayoutConfig *config);
void Clay__AttachElementConfig(Clay_ElementConfigUnion config, Clay__ElementConfigType type);
@@ -1263,97 +1266,6 @@ void Clay__GenerateIdForAnonymousElement(Clay_LayoutElement *openLayoutElement)
Clay__StringArray_Add(&context->layoutElementIdStrings, elementId.stringId);
}
-void Clay__ElementPostConfiguration(void) {
-// Clay_Context* context = Clay_GetCurrentContext();
-// if (context->booleanWarnings.maxElementsExceeded) {
-// return;
-// }
-// Clay_LayoutElement *openLayoutElement = Clay__GetOpenLayoutElement();
-// // ID
-// if (openLayoutElement->id == 0) {
-// Clay__GenerateIdForAnonymousElement(openLayoutElement);
-// }
-// // Layout Config
-// if (!openLayoutElement->layoutConfig) {
-// openLayoutElement->layoutConfig = &CLAY_LAYOUT_DEFAULT;
-// }
-//
-// // Loop through element configs and handle special cases
-// openLayoutElement->elementConfigs.internalArray = &context->elementConfigs.internalArray[context->elementConfigs.length];
-// for (int32_t elementConfigIndex = 0; elementConfigIndex < openLayoutElement->elementConfigs.length; elementConfigIndex++) {
-// Clay_ElementConfig *config = Clay__ElementConfigArray_Add(&context->elementConfigs, *Clay__ElementConfigArray_Get(&context->elementConfigBuffer, context->elementConfigBuffer.length - openLayoutElement->elementConfigs.length + elementConfigIndex));
-// openLayoutElement->configsEnabled |= config->type;
-// switch (config->type) {
-// case CLAY__ELEMENT_CONFIG_TYPE_RECTANGLE:
-// case CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER: break;
-// case CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER: {
-// Clay_FloatingElementConfig *floatingConfig = config->config.floatingElementConfig;
-// // This looks dodgy but because of the auto generated root element the depth of the tree will always be at least 2 here
-// Clay_LayoutElement *hierarchicalParent = Clay_LayoutElementArray_Get(&context->layoutElements, Clay__int32_tArray_GetValue(&context->openLayoutElementStack, context->openLayoutElementStack.length - 2));
-// if (!hierarchicalParent) {
-// break;
-// }
-// uint32_t clipElementId = 0;
-// if (floatingConfig->parentId == 0) {
-// // If no parent id was specified, attach to the elements direct hierarchical parent
-// Clay_FloatingElementConfig newConfig = *floatingConfig;
-// newConfig.parentId = hierarchicalParent->id;
-// floatingConfig = Clay__FloatingElementConfigArray_Add(&context->floatingElementConfigs, newConfig);
-// config->config.floatingElementConfig = floatingConfig;
-// if (context->openClipElementStack.length > 0) {
-// clipElementId = Clay__int32_tArray_GetValue(&context->openClipElementStack, (int)context->openClipElementStack.length - 1);
-// }
-// } else {
-// Clay_LayoutElementHashMapItem *parentItem = Clay__GetHashMapItem(floatingConfig->parentId);
-// if (!parentItem) {
-// context->errorHandler.errorHandlerFunction(CLAY__INIT(Clay_ErrorData) {
-// .errorType = CLAY_ERROR_TYPE_FLOATING_CONTAINER_PARENT_NOT_FOUND,
-// .errorText = CLAY_STRING("A floating element was declared with a parentId, but no element with that ID was found."),
-// .userData = context->errorHandler.userData });
-// } else {
-// clipElementId = Clay__int32_tArray_GetValue(&context->layoutElementClipElementIds, parentItem->layoutElement - context->layoutElements.internalArray);
-// }
-// }
-// Clay__LayoutElementTreeRootArray_Add(&context->layoutElementTreeRoots, CLAY__INIT(Clay__LayoutElementTreeRoot) {
-// .layoutElementIndex = Clay__int32_tArray_GetValue(&context->openLayoutElementStack, context->openLayoutElementStack.length - 1),
-// .parentId = floatingConfig->parentId,
-// .clipElementId = clipElementId,
-// .zIndex = floatingConfig->zIndex,
-// });
-// break;
-// }
-// case CLAY__ELEMENT_CONFIG_TYPE_SCROLL_CONTAINER: {
-// Clay__int32_tArray_Add(&context->openClipElementStack, (int)openLayoutElement->id);
-// // Retrieve or create cached data to track scroll position across frames
-// Clay__ScrollContainerDataInternal *scrollOffset = CLAY__NULL;
-// for (int32_t i = 0; i < context->scrollContainerDatas.length; i++) {
-// Clay__ScrollContainerDataInternal *mapping = Clay__ScrollContainerDataInternalArray_Get(&context->scrollContainerDatas, i);
-// if (openLayoutElement->id == mapping->elementId) {
-// scrollOffset = mapping;
-// scrollOffset->layoutElement = openLayoutElement;
-// scrollOffset->openThisFrame = true;
-// }
-// }
-// if (!scrollOffset) {
-// scrollOffset = Clay__ScrollContainerDataInternalArray_Add(&context->scrollContainerDatas, CLAY__INIT(Clay__ScrollContainerDataInternal){.layoutElement = openLayoutElement, .scrollOrigin = {-1,-1}, .elementId = openLayoutElement->id, .openThisFrame = true});
-// }
-// if (context->externalScrollHandlingEnabled) {
-// scrollOffset->scrollPosition = Clay__QueryScrollOffset(scrollOffset->elementId, context->queryScrollOffsetUserData);
-// }
-// break;
-// }
-// case CLAY__ELEMENT_CONFIG_TYPE_CUSTOM: break;
-// case CLAY__ELEMENT_CONFIG_TYPE_IMAGE: {
-// Clay__int32_tArray_Add(&context->imageElementPointers, context->layoutElements.length - 1);
-// break;
-// }
-// case CLAY__ELEMENT_CONFIG_TYPE_TEXT:
-// default: break;
-// }
-// }
-// context->elementConfigBuffer.length -= openLayoutElement->elementConfigs.length;
-}
-
void Clay__CloseElement(void) {
Clay_Context* context = Clay_GetCurrentContext();
if (context->booleanWarnings.maxElementsExceeded) {
@@ -1497,7 +1409,7 @@ bool Clay__MemCmp(const char *s1, const char *s2, int32_t length);
}
#endif
-void Clay__OpenElementPointer(const Clay_ElementDeclaration* declaration) {
+void Clay__OpenElement() {
Clay_Context* context = Clay_GetCurrentContext();
if (context->layoutElements.length == context->layoutElements.capacity - 1 || context->booleanWarnings.maxElementsExceeded) {
context->booleanWarnings.maxElementsExceeded = true;
@@ -1511,84 +1423,6 @@ void Clay__OpenElementPointer(const Clay_ElementDeclaration* declaration) {
} else {
Clay__int32_tArray_Set(&context->layoutElementClipElementIds, context->layoutElements.length - 1, 0);
}
- openLayoutElement->layoutConfig = Clay__StoreLayoutConfig(declaration->layout);
- if (declaration->id.id != 0) {
- Clay__AttachId(declaration->id);
- } else {
- Clay__GenerateIdForAnonymousElement(openLayoutElement);
- }
-
- openLayoutElement->elementConfigs.internalArray = &context->elementConfigs.internalArray[context->elementConfigs.length];
- if (!Clay__MemCmp((char *)(&declaration->rectangle), (char *)(&Clay_RectangleElementConfig_DEFAULT), sizeof(Clay_RectangleElementConfig))) {
- Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .rectangleElementConfig = Clay__StoreRectangleElementConfig(declaration->rectangle) }, CLAY__ELEMENT_CONFIG_TYPE_RECTANGLE);
- }
- if (!Clay__MemCmp((char *)(&declaration->image), (char *)(&Clay_ImageElementConfig_DEFAULT), sizeof(Clay_ImageElementConfig))) {
- Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .imageElementConfig = Clay__StoreImageElementConfig(declaration->image) }, CLAY__ELEMENT_CONFIG_TYPE_IMAGE);
- Clay__int32_tArray_Add(&context->imageElementPointers, context->layoutElements.length - 1);
- }
- if (!Clay__MemCmp((char *)(&declaration->floating), (char *)(&Clay_FloatingElementConfig_DEFAULT), sizeof(Clay_FloatingElementConfig))) {
- Clay_FloatingElementConfig floatingConfig = declaration->floating;
- // This looks dodgy but because of the auto generated root element the depth of the tree will always be at least 2 here
- Clay_LayoutElement *hierarchicalParent = Clay_LayoutElementArray_Get(&context->layoutElements, Clay__int32_tArray_GetValue(&context->openLayoutElementStack, context->openLayoutElementStack.length - 2));
- if (!hierarchicalParent) {
- return; // TODO error handler
- }
- uint32_t clipElementId = 0;
- if (floatingConfig.parentId == 0) {
- // If no parent id was specified, attach to the elements direct hierarchical parent
- floatingConfig.parentId = hierarchicalParent->id;
- if (context->openClipElementStack.length > 0) {
- clipElementId = Clay__int32_tArray_GetValue(&context->openClipElementStack, (int)context->openClipElementStack.length - 1);
- }
- } else {
- Clay_LayoutElementHashMapItem *parentItem = Clay__GetHashMapItem(floatingConfig.parentId);
- if (!parentItem) {
- context->errorHandler.errorHandlerFunction(CLAY__INIT(Clay_ErrorData) {
- .errorType = CLAY_ERROR_TYPE_FLOATING_CONTAINER_PARENT_NOT_FOUND,
- .errorText = CLAY_STRING("A floating element was declared with a parentId, but no element with that ID was found."),
- .userData = context->errorHandler.userData });
- } else {
- clipElementId = Clay__int32_tArray_GetValue(&context->layoutElementClipElementIds, parentItem->layoutElement - context->layoutElements.internalArray);
- }
- }
- Clay__LayoutElementTreeRootArray_Add(&context->layoutElementTreeRoots, CLAY__INIT(Clay__LayoutElementTreeRoot) {
- .layoutElementIndex = Clay__int32_tArray_GetValue(&context->openLayoutElementStack, context->openLayoutElementStack.length - 1),
- .parentId = floatingConfig.parentId,
- .clipElementId = clipElementId,
- .zIndex = floatingConfig.zIndex,
- });
- Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .floatingElementConfig = Clay__StoreFloatingElementConfig(declaration->floating) }, CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER);
- }
- if (!Clay__MemCmp((char *)(&declaration->custom), (char *)(&Clay_CustomElementConfig_DEFAULT), sizeof(Clay_CustomElementConfig))) {
- Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .customElementConfig = Clay__StoreCustomElementConfig(declaration->custom) }, CLAY__ELEMENT_CONFIG_TYPE_CUSTOM);
- }
- if (!Clay__MemCmp((char *)(&declaration->scroll), (char *)(&Clay_ScrollElementConfig_DEFAULT), sizeof(Clay_ScrollElementConfig))) {
- Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .scrollElementConfig = Clay__StoreScrollElementConfig(declaration->scroll) }, CLAY__ELEMENT_CONFIG_TYPE_SCROLL_CONTAINER);
- Clay__int32_tArray_Add(&context->openClipElementStack, (int)openLayoutElement->id);
- // Retrieve or create cached data to track scroll position across frames
- Clay__ScrollContainerDataInternal *scrollOffset = CLAY__NULL;
- for (int32_t i = 0; i < context->scrollContainerDatas.length; i++) {
- Clay__ScrollContainerDataInternal *mapping = Clay__ScrollContainerDataInternalArray_Get(&context->scrollContainerDatas, i);
- if (openLayoutElement->id == mapping->elementId) {
- scrollOffset = mapping;
- scrollOffset->layoutElement = openLayoutElement;
- scrollOffset->openThisFrame = true;
- }
- }
- if (!scrollOffset) {
- scrollOffset = Clay__ScrollContainerDataInternalArray_Add(&context->scrollContainerDatas, CLAY__INIT(Clay__ScrollContainerDataInternal){.layoutElement = openLayoutElement, .scrollOrigin = {-1,-1}, .elementId = openLayoutElement->id, .openThisFrame = true});
- }
- if (context->externalScrollHandlingEnabled) {
- scrollOffset->scrollPosition = Clay__QueryScrollOffset(scrollOffset->elementId, context->queryScrollOffsetUserData);
- }
- }
- if (!Clay__MemCmp((char *)(&declaration->border), (char *)(&Clay_BorderElementConfig_DEFAULT), sizeof(Clay_BorderElementConfig))) {
- Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .borderElementConfig = Clay__StoreBorderElementConfig(declaration->border) }, CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER);
- }
-}
-
-void Clay__OpenElement(const Clay_ElementDeclaration declaration) {
- Clay__OpenElementPointer(&declaration);
}
void Clay__OpenTextElement(Clay_String text, Clay_TextElementConfig *textConfig) {
@@ -1626,6 +1460,84 @@ void Clay__OpenTextElement(Clay_String text, Clay_TextElementConfig *textConfig)
textElement->layoutConfig = &CLAY_LAYOUT_DEFAULT;
}
+void Clay__ConfigureOpenElement(const Clay_ElementDeclaration declaration) {
+ Clay_Context* context = Clay_GetCurrentContext();
+ Clay_LayoutElement *openLayoutElement = Clay__GetOpenLayoutElement();
+ openLayoutElement->layoutConfig = Clay__StoreLayoutConfig(declaration.layout);
+ if (declaration.id.id != 0) {
+ Clay__AttachId(declaration.id);
+ } else if (openLayoutElement->id == 0) {
+ Clay__GenerateIdForAnonymousElement(openLayoutElement);
+ }
+
+ openLayoutElement->elementConfigs.internalArray = &context->elementConfigs.internalArray[context->elementConfigs.length];
+ if (!Clay__MemCmp((char *)(&declaration.rectangle), (char *)(&Clay_RectangleElementConfig_DEFAULT), sizeof(Clay_RectangleElementConfig))) {
+ Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .rectangleElementConfig = Clay__StoreRectangleElementConfig(declaration.rectangle) }, CLAY__ELEMENT_CONFIG_TYPE_RECTANGLE);
+ }
+ if (!Clay__MemCmp((char *)(&declaration.image), (char *)(&Clay_ImageElementConfig_DEFAULT), sizeof(Clay_ImageElementConfig))) {
+ Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .imageElementConfig = Clay__StoreImageElementConfig(declaration.image) }, CLAY__ELEMENT_CONFIG_TYPE_IMAGE);
+ Clay__int32_tArray_Add(&context->imageElementPointers, context->layoutElements.length - 1);
+ }
+ if (!Clay__MemCmp((char *)(&declaration.floating), (char *)(&Clay_FloatingElementConfig_DEFAULT), sizeof(Clay_FloatingElementConfig))) {
+ Clay_FloatingElementConfig floatingConfig = declaration.floating;
+ // This looks dodgy but because of the auto generated root element the depth of the tree will always be at least 2 here
+ Clay_LayoutElement *hierarchicalParent = Clay_LayoutElementArray_Get(&context->layoutElements, Clay__int32_tArray_GetValue(&context->openLayoutElementStack, context->openLayoutElementStack.length - 2));
+ if (hierarchicalParent) {
+ uint32_t clipElementId = 0;
+ if (floatingConfig.parentId == 0) {
+ // If no parent id was specified, attach to the elements direct hierarchical parent
+ floatingConfig.parentId = hierarchicalParent->id;
+ if (context->openClipElementStack.length > 0) {
+ clipElementId = Clay__int32_tArray_GetValue(&context->openClipElementStack, (int)context->openClipElementStack.length - 1);
+ }
+ } else {
+ Clay_LayoutElementHashMapItem *parentItem = Clay__GetHashMapItem(floatingConfig.parentId);
+ if (!parentItem) {
+ context->errorHandler.errorHandlerFunction(CLAY__INIT(Clay_ErrorData) {
+ .errorType = CLAY_ERROR_TYPE_FLOATING_CONTAINER_PARENT_NOT_FOUND,
+ .errorText = CLAY_STRING("A floating element was declared with a parentId, but no element with that ID was found."),
+ .userData = context->errorHandler.userData });
+ } else {
+ clipElementId = Clay__int32_tArray_GetValue(&context->layoutElementClipElementIds, parentItem->layoutElement - context->layoutElements.internalArray);
+ }
+ }
+ Clay__LayoutElementTreeRootArray_Add(&context->layoutElementTreeRoots, CLAY__INIT(Clay__LayoutElementTreeRoot) {
+ .layoutElementIndex = Clay__int32_tArray_GetValue(&context->openLayoutElementStack, context->openLayoutElementStack.length - 1),
+ .parentId = floatingConfig.parentId,
+ .clipElementId = clipElementId,
+ .zIndex = floatingConfig.zIndex,
+ });
+ Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .floatingElementConfig = Clay__StoreFloatingElementConfig(declaration.floating) }, CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER);
+ }
+ }
+ if (!Clay__MemCmp((char *)(&declaration.custom), (char *)(&Clay_CustomElementConfig_DEFAULT), sizeof(Clay_CustomElementConfig))) {
+ Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .customElementConfig = Clay__StoreCustomElementConfig(declaration.custom) }, CLAY__ELEMENT_CONFIG_TYPE_CUSTOM);
+ }
+ if (!Clay__MemCmp((char *)(&declaration.scroll), (char *)(&Clay_ScrollElementConfig_DEFAULT), sizeof(Clay_ScrollElementConfig))) {
+ Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .scrollElementConfig = Clay__StoreScrollElementConfig(declaration.scroll) }, CLAY__ELEMENT_CONFIG_TYPE_SCROLL_CONTAINER);
+ Clay__int32_tArray_Add(&context->openClipElementStack, (int)openLayoutElement->id);
+ // Retrieve or create cached data to track scroll position across frames
+ Clay__ScrollContainerDataInternal *scrollOffset = CLAY__NULL;
+ for (int32_t i = 0; i < context->scrollContainerDatas.length; i++) {
+ Clay__ScrollContainerDataInternal *mapping = Clay__ScrollContainerDataInternalArray_Get(&context->scrollContainerDatas, i);
+ if (openLayoutElement->id == mapping->elementId) {
+ scrollOffset = mapping;
+ scrollOffset->layoutElement = openLayoutElement;
+ scrollOffset->openThisFrame = true;
+ }
+ }
+ if (!scrollOffset) {
+ scrollOffset = Clay__ScrollContainerDataInternalArray_Add(&context->scrollContainerDatas, CLAY__INIT(Clay__ScrollContainerDataInternal){.layoutElement = openLayoutElement, .scrollOrigin = {-1,-1}, .elementId = openLayoutElement->id, .openThisFrame = true});
+ }
+ if (context->externalScrollHandlingEnabled) {
+ scrollOffset->scrollPosition = Clay__QueryScrollOffset(scrollOffset->elementId, context->queryScrollOffsetUserData);
+ }
+ }
+ if (!Clay__MemCmp((char *)(&declaration.border), (char *)(&Clay_BorderElementConfig_DEFAULT), sizeof(Clay_BorderElementConfig))) {
+ Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .borderElementConfig = Clay__StoreBorderElementConfig(declaration.border) }, CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER);
+ }
+}
+
void Clay__InitializeEphemeralMemory(Clay_Context* context) {
int32_t maxElementCount = context->maxElementCount;
// Ephemeral Memory - reset every frame
@@ -1750,7 +1662,7 @@ void Clay__SizeContainersAlongAxis(bool xAxis) {
if (Clay__ElementHasConfig(rootElement, CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER)) {
Clay_FloatingElementConfig *floatingElementConfig = Clay__FindElementConfigWithType(rootElement, CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER).floatingElementConfig;
Clay_LayoutElementHashMapItem *parentItem = Clay__GetHashMapItem(floatingElementConfig->parentId);
- if (parentItem) {
+ if (parentItem && parentItem != &Clay_LayoutElementHashMapItem_DEFAULT) {
Clay_LayoutElement *parentLayoutElement = parentItem->layoutElement;
if (rootElement->layoutConfig->sizing.width.type == CLAY__SIZING_TYPE_GROW) {
rootElement->dimensions.width = parentLayoutElement->dimensions.width;
@@ -2529,604 +2441,602 @@ Clay_CustomElementConfig * Clay__StoreCustomElementConfig(Clay_CustomElementConf
Clay_ScrollElementConfig * Clay__StoreScrollElementConfig(Clay_ScrollElementConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &Clay_ScrollElementConfig_DEFAULT : Clay__ScrollElementConfigArray_Add(&Clay_GetCurrentContext()->scrollElementConfigs, config); }
Clay_BorderElementConfig * Clay__StoreBorderElementConfig(Clay_BorderElementConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &Clay_BorderElementConfig_DEFAULT : Clay__BorderElementConfigArray_Add(&Clay_GetCurrentContext()->borderElementConfigs, config); }
-//#pragma region DebugTools
-//Clay_Color CLAY__DEBUGVIEW_COLOR_1 = {58, 56, 52, 255};
-//Clay_Color CLAY__DEBUGVIEW_COLOR_2 = {62, 60, 58, 255};
-//Clay_Color CLAY__DEBUGVIEW_COLOR_3 = {141, 133, 135, 255};
-//Clay_Color CLAY__DEBUGVIEW_COLOR_4 = {238, 226, 231, 255};
-//Clay_Color CLAY__DEBUGVIEW_COLOR_SELECTED_ROW = {102, 80, 78, 255};
-//const int32_t CLAY__DEBUGVIEW_ROW_HEIGHT = 30;
-//const int32_t CLAY__DEBUGVIEW_OUTER_PADDING = 10;
-//const int32_t CLAY__DEBUGVIEW_INDENT_WIDTH = 16;
-//Clay_TextElementConfig Clay__DebugView_TextNameConfig = {.textColor = {238, 226, 231, 255}, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE };
-//Clay_LayoutConfig Clay__DebugView_ScrollViewItemLayoutConfig = CLAY__DEFAULT_STRUCT;
-//
-//typedef struct {
-// Clay_String label;
-// Clay_Color color;
-//} Clay__DebugElementConfigTypeLabelConfig;
-//
-//Clay__DebugElementConfigTypeLabelConfig Clay__DebugGetElementConfigTypeLabel(Clay__ElementConfigType type) {
-// switch (type) {
-// case CLAY__ELEMENT_CONFIG_TYPE_RECTANGLE: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Rectangle"), {243,134,48,255} };
-// case CLAY__ELEMENT_CONFIG_TYPE_TEXT: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Text"), {105,210,231,255} };
-// case CLAY__ELEMENT_CONFIG_TYPE_IMAGE: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Image"), {121,189,154,255} };
-// case CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Floating"), {250,105,0,255} };
-// case CLAY__ELEMENT_CONFIG_TYPE_SCROLL_CONTAINER: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Scroll"), {242,196,90,255} };
-// case CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Border"), {108,91,123, 255} };
-// case CLAY__ELEMENT_CONFIG_TYPE_CUSTOM: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Custom"), {11,72,107,255} };
-// default: break;
-// }
-// return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Error"), {0,0,0,255} };
-//}
-//
-//typedef struct {
-// int32_t rowCount;
-// int32_t selectedElementRowIndex;
-//} Clay__RenderDebugLayoutData;
-//
-//// Returns row count
-//Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialRootsLength, int32_t highlightedRowIndex) {
-// Clay_Context* context = Clay_GetCurrentContext();
-// Clay__int32_tArray dfsBuffer = context->reusableElementIndexBuffer;
-// Clay__DebugView_ScrollViewItemLayoutConfig = CLAY__INIT(Clay_LayoutConfig) { .sizing = { .height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT) }, .childGap = 6, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER }};
-// Clay__RenderDebugLayoutData layoutData = CLAY__DEFAULT_STRUCT;
-//
-// uint32_t highlightedElementId = 0;
-//
-// for (int32_t rootIndex = 0; rootIndex < initialRootsLength; ++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;
-// if (rootIndex > 0) {
-// CLAY(CLAY_IDI("Clay__DebugView_EmptyRowOuter", rootIndex), CLAY_LAYOUT({ .sizing = {.width = CLAY_SIZING_GROW(0)}, .padding = {CLAY__DEBUGVIEW_INDENT_WIDTH / 2, 0} })) {
-// CLAY(CLAY_IDI("Clay__DebugView_EmptyRow", rootIndex), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED((float)CLAY__DEBUGVIEW_ROW_HEIGHT) }}), CLAY_BORDER({ .top = { .width = 1, .color = CLAY__DEBUGVIEW_COLOR_3 } })) {}
-// }
-// layoutData.rowCount++;
-// }
-// while (dfsBuffer.length > 0) {
-// int32_t currentElementIndex = Clay__int32_tArray_GetValue(&dfsBuffer, (int)dfsBuffer.length - 1);
-// Clay_LayoutElement *currentElement = Clay_LayoutElementArray_Get(&context->layoutElements, (int)currentElementIndex);
-// if (context->treeNodeVisited.internalArray[dfsBuffer.length - 1]) {
-// if (!Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT) && currentElement->childrenOrTextContent.children.length > 0) {
-// Clay__CloseElement();
-// Clay__CloseElement();
-// Clay__CloseElement();
-// }
-// dfsBuffer.length--;
-// continue;
-// }
-//
-// if (highlightedRowIndex == layoutData.rowCount) {
-// if (context->pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
-// context->debugSelectedElementId = currentElement->id;
-// }
-// highlightedElementId = currentElement->id;
-// }
-//
-// context->treeNodeVisited.internalArray[dfsBuffer.length - 1] = true;
-// Clay_LayoutElementHashMapItem *currentElementData = Clay__GetHashMapItem(currentElement->id);
-// bool offscreen = Clay__ElementIsOffscreen(¤tElementData->boundingBox);
-// if (context->debugSelectedElementId == currentElement->id) {
-// layoutData.selectedElementRowIndex = layoutData.rowCount;
-// }
-// CLAY(CLAY_IDI("Clay__DebugView_ElementOuter", currentElement->id), Clay__AttachLayoutConfig(&Clay__DebugView_ScrollViewItemLayoutConfig)) {
-// // Collapse icon / button
-// if (!(Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT) || currentElement->childrenOrTextContent.children.length == 0)) {
-// CLAY(CLAY_IDI("Clay__DebugView_CollapseElement", currentElement->id),
-// CLAY_LAYOUT({ .sizing = {CLAY_SIZING_FIXED(16), CLAY_SIZING_FIXED(16)}, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER} }),
-// CLAY_BORDER_OUTSIDE_RADIUS(1, CLAY__DEBUGVIEW_COLOR_3, 4)
-// ) {
-// CLAY_TEXT((currentElementData && currentElementData->debugData->collapsed) ? CLAY_STRING("+") : CLAY_STRING("-"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
-// }
-// } else { // Square dot for empty containers
-// CLAY(CLAY_LAYOUT({ .sizing = {CLAY_SIZING_FIXED(16), CLAY_SIZING_FIXED(16)}, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER } })) {
-// CLAY(CLAY_LAYOUT({ .sizing = {CLAY_SIZING_FIXED(8), CLAY_SIZING_FIXED(8)} }), CLAY_RECTANGLE({ .color = CLAY__DEBUGVIEW_COLOR_3, .cornerRadius = CLAY_CORNER_RADIUS(2) })) {}
-// }
-// }
-// // Collisions and offscreen info
-// if (currentElementData) {
-// if (currentElementData->debugData->collision) {
-// CLAY(CLAY_LAYOUT({ .padding = { 8, 8, 2, 2 } }), CLAY_BORDER_OUTSIDE_RADIUS(1, (CLAY__INIT(Clay_Color){177, 147, 8, 255}), 4)) {
-// CLAY_TEXT(CLAY_STRING("Duplicate ID"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16 }));
-// }
-// }
-// if (offscreen) {
-// CLAY(CLAY_LAYOUT({ .padding = { 8, 8, 2, 2 } }), CLAY_BORDER_OUTSIDE_RADIUS(1, CLAY__DEBUGVIEW_COLOR_3, 4)) {
-// CLAY_TEXT(CLAY_STRING("Offscreen"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16 }));
-// }
-// }
-// }
-// Clay_String idString = context->layoutElementIdStrings.internalArray[currentElementIndex];
-// if (idString.length > 0) {
-// CLAY_TEXT(idString, offscreen ? CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16 }) : &Clay__DebugView_TextNameConfig);
-// }
-// for (int32_t elementConfigIndex = 0; elementConfigIndex < currentElement->elementConfigs.length; ++elementConfigIndex) {
-// Clay_ElementConfig *elementConfig = Clay__ElementConfigArraySlice_Get(¤tElement->elementConfigs, elementConfigIndex);
-// Clay__DebugElementConfigTypeLabelConfig config = Clay__DebugGetElementConfigTypeLabel(elementConfig->type);
-// Clay_Color backgroundColor = config.color;
-// backgroundColor.a = 90;
-// CLAY(CLAY_LAYOUT({ .padding = { 8, 8, 2, 2 } }), CLAY_RECTANGLE({ .color = backgroundColor, .cornerRadius = CLAY_CORNER_RADIUS(4) }), CLAY_BORDER_OUTSIDE_RADIUS(1, config.color, 4)) {
-// CLAY_TEXT(config.label, CLAY_TEXT_CONFIG({ .textColor = offscreen ? CLAY__DEBUGVIEW_COLOR_3 : CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
-// }
-// }
-// }
-//
-// // Render the text contents below the element as a non-interactive row
-// if (Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT)) {
-// layoutData.rowCount++;
-// Clay__TextElementData *textElementData = currentElement->childrenOrTextContent.textElementData;
-// Clay_TextElementConfig *rawTextConfig = offscreen ? CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16 }) : &Clay__DebugView_TextNameConfig;
-// CLAY(CLAY_LAYOUT({ .sizing = { .height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }), CLAY_RECTANGLE(CLAY__DEFAULT_STRUCT)) {
-// CLAY(CLAY_LAYOUT({ .sizing = {CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_INDENT_WIDTH + 16), CLAY__DEFAULT_STRUCT} })) {}
-// CLAY_TEXT(CLAY_STRING("\""), rawTextConfig);
-// CLAY_TEXT(textElementData->text.length > 40 ? (CLAY__INIT(Clay_String) { .length = 40, .chars = textElementData->text.chars }) : textElementData->text, rawTextConfig);
-// if (textElementData->text.length > 40) {
-// CLAY_TEXT(CLAY_STRING("..."), rawTextConfig);
-// }
-// CLAY_TEXT(CLAY_STRING("\""), rawTextConfig);
-// }
-// } else if (currentElement->childrenOrTextContent.children.length > 0) {
-// Clay__OpenElement();
-// CLAY_LAYOUT({ .padding = { 8 } });
-// Clay__ElementPostConfiguration();
-// Clay__OpenElement();
-// CLAY_BORDER({ .left = { .width = 1, .color = CLAY__DEBUGVIEW_COLOR_3 }});
-// Clay__ElementPostConfiguration();
-// CLAY(CLAY_LAYOUT({ .sizing = {CLAY_SIZING_FIXED( CLAY__DEBUGVIEW_INDENT_WIDTH), CLAY__DEFAULT_STRUCT}, .childAlignment = { .x = CLAY_ALIGN_X_RIGHT } })) {}
-// Clay__OpenElement();
-// CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM });
-// Clay__ElementPostConfiguration();
-// }
-//
-// layoutData.rowCount++;
-// if (!(Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT) || (currentElementData && currentElementData->debugData->collapsed))) {
-// 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
-// }
-// }
-// }
-// }
-//
-// if (context->pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
-// Clay_ElementId collapseButtonId = Clay__HashString(CLAY_STRING("Clay__DebugView_CollapseElement"), 0, 0);
-// for (int32_t i = (int)context->pointerOverIds.length - 1; i >= 0; i--) {
-// Clay_ElementId *elementId = Clay__ElementIdArray_Get(&context->pointerOverIds, i);
-// if (elementId->baseId == collapseButtonId.baseId) {
-// Clay_LayoutElementHashMapItem *highlightedItem = Clay__GetHashMapItem(elementId->offset);
-// highlightedItem->debugData->collapsed = !highlightedItem->debugData->collapsed;
-// break;
-// }
-// }
-// }
-//
-// if (highlightedElementId) {
-// CLAY(CLAY_ID("Clay__DebugView_ElementHighlight"), CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }), CLAY_FLOATING({ .zIndex = 65535, .parentId = highlightedElementId })) {
-// CLAY(CLAY_ID("Clay__DebugView_ElementHighlightRectangle"), CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }), CLAY_RECTANGLE({.color = Clay__debugViewHighlightColor })) {}
-// }
-// }
-// return layoutData;
-//}
-//
-//void Clay__RenderDebugLayoutSizing(Clay_SizingAxis sizing, Clay_TextElementConfig *infoTextConfig) {
-// Clay_String sizingLabel = CLAY_STRING("GROW");
-// if (sizing.type == CLAY__SIZING_TYPE_FIT) {
-// sizingLabel = CLAY_STRING("FIT");
-// } else if (sizing.type == CLAY__SIZING_TYPE_PERCENT) {
-// sizingLabel = CLAY_STRING("PERCENT");
-// }
-// CLAY_TEXT(sizingLabel, infoTextConfig);
-// if (sizing.type == CLAY__SIZING_TYPE_GROW || sizing.type == CLAY__SIZING_TYPE_FIT) {
-// CLAY_TEXT(CLAY_STRING("("), infoTextConfig);
-// if (sizing.size.minMax.min != 0) {
-// CLAY_TEXT(CLAY_STRING("min: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(sizing.size.minMax.min), infoTextConfig);
-// if (sizing.size.minMax.max != CLAY__MAXFLOAT) {
-// CLAY_TEXT(CLAY_STRING(", "), infoTextConfig);
-// }
-// }
-// if (sizing.size.minMax.max != CLAY__MAXFLOAT) {
-// CLAY_TEXT(CLAY_STRING("max: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(sizing.size.minMax.max), infoTextConfig);
-// }
-// CLAY_TEXT(CLAY_STRING(")"), infoTextConfig);
-// }
-//}
-//
-//void Clay__RenderDebugViewElementConfigHeader(Clay_String elementId, Clay__ElementConfigType type) {
-// Clay__DebugElementConfigTypeLabelConfig config = Clay__DebugGetElementConfigTypeLabel(type);
-// Clay_Color backgroundColor = config.color;
-// backgroundColor.a = 90;
-// CLAY(CLAY_LAYOUT({ .sizing = { CLAY_SIZING_GROW(0)}, .padding = CLAY_PADDING_ALL(CLAY__DEBUGVIEW_OUTER_PADDING), .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } })) {
-// CLAY(CLAY_LAYOUT({ .padding = { 8, 8, 2, 2 } }), CLAY_RECTANGLE({ .color = backgroundColor, .cornerRadius = CLAY_CORNER_RADIUS(4) }), CLAY_BORDER_OUTSIDE_RADIUS(1, config.color, 4)) {
-// CLAY_TEXT(config.label, CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
-// }
-// CLAY(CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(0) } })) {}
-// CLAY_TEXT(elementId, CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE }));
-// }
-//}
-//
-//void Clay__RenderDebugViewColor(Clay_Color color, Clay_TextElementConfig *textConfig) {
-// CLAY(CLAY_LAYOUT({ .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} })) {
-// CLAY_TEXT(CLAY_STRING("{ r: "), textConfig);
-// CLAY_TEXT(Clay__IntToString(color.r), textConfig);
-// CLAY_TEXT(CLAY_STRING(", g: "), textConfig);
-// CLAY_TEXT(Clay__IntToString(color.g), textConfig);
-// CLAY_TEXT(CLAY_STRING(", b: "), textConfig);
-// CLAY_TEXT(Clay__IntToString(color.b), textConfig);
-// CLAY_TEXT(CLAY_STRING(", a: "), textConfig);
-// CLAY_TEXT(Clay__IntToString(color.a), textConfig);
-// CLAY_TEXT(CLAY_STRING(" }"), textConfig);
-// CLAY(CLAY_LAYOUT({ .sizing = { CLAY_SIZING_FIXED(10), CLAY__DEFAULT_STRUCT } })) {}
-// CLAY(CLAY_LAYOUT({ .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }), CLAY_BORDER_OUTSIDE_RADIUS(1, CLAY__DEBUGVIEW_COLOR_4, 4)) {
-// CLAY(CLAY_LAYOUT({ .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }), CLAY_RECTANGLE({ .color = color, .cornerRadius = CLAY_CORNER_RADIUS(4) })) {}
-// }
-// }
-//}
-//
-//void Clay__RenderDebugViewCornerRadius(Clay_CornerRadius cornerRadius, Clay_TextElementConfig *textConfig) {
-// CLAY(CLAY_LAYOUT({ .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} })) {
-// CLAY_TEXT(CLAY_STRING("{ topLeft: "), textConfig);
-// CLAY_TEXT(Clay__IntToString(cornerRadius.topLeft), textConfig);
-// CLAY_TEXT(CLAY_STRING(", topRight: "), textConfig);
-// CLAY_TEXT(Clay__IntToString(cornerRadius.topRight), textConfig);
-// CLAY_TEXT(CLAY_STRING(", bottomLeft: "), textConfig);
-// CLAY_TEXT(Clay__IntToString(cornerRadius.bottomLeft), textConfig);
-// CLAY_TEXT(CLAY_STRING(", bottomRight: "), textConfig);
-// CLAY_TEXT(Clay__IntToString(cornerRadius.bottomRight), textConfig);
-// CLAY_TEXT(CLAY_STRING(" }"), textConfig);
-// }
-//}
-//
-//void Clay__RenderDebugViewBorder(int32_t index, Clay_Border border, Clay_TextElementConfig *textConfig) {
-// (void) index;
-// CLAY(CLAY_LAYOUT({ .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} })) {
-// CLAY_TEXT(CLAY_STRING("{ width: "), textConfig);
-// CLAY_TEXT(Clay__IntToString(border.width), textConfig);
-// CLAY_TEXT(CLAY_STRING(", color: "), textConfig);
-// Clay__RenderDebugViewColor(border.color, textConfig);
-// CLAY_TEXT(CLAY_STRING(" }"), textConfig);
-// }
-//}
-//
-//void HandleDebugViewCloseButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) {
-// Clay_Context* context = Clay_GetCurrentContext();
-// (void) elementId; (void) pointerInfo; (void) userData;
-// if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
-// context->debugModeEnabled = false;
-// }
-//}
-//
-//void Clay__RenderDebugView(void) {
-// Clay_Context* context = Clay_GetCurrentContext();
-// Clay_ElementId closeButtonId = Clay__HashString(CLAY_STRING("Clay__DebugViewTopHeaderCloseButtonOuter"), 0, 0);
-// if (context->pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
-// for (int32_t i = 0; i < context->pointerOverIds.length; ++i) {
-// Clay_ElementId *elementId = Clay__ElementIdArray_Get(&context->pointerOverIds, i);
-// if (elementId->id == closeButtonId.id) {
-// context->debugModeEnabled = false;
-// return;
-// }
-// }
-// }
-//
-// uint32_t initialRootsLength = context->layoutElementTreeRoots.length;
-// uint32_t initialElementsLength = context->layoutElements.length;
-// Clay_TextElementConfig *infoTextConfig = CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE });
-// Clay_TextElementConfig *infoTitleConfig = CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE });
-// Clay_ElementId scrollId = Clay__HashString(CLAY_STRING("Clay__DebugViewOuterScrollPane"), 0, 0);
-// float scrollYOffset = 0;
-// bool pointerInDebugView = context->pointerInfo.position.y < context->layoutDimensions.height - 300;
-// for (int32_t i = 0; i < context->scrollContainerDatas.length; ++i) {
-// Clay__ScrollContainerDataInternal *scrollContainerData = Clay__ScrollContainerDataInternalArray_Get(&context->scrollContainerDatas, i);
-// if (scrollContainerData->elementId == scrollId.id) {
-// if (!context->externalScrollHandlingEnabled) {
-// scrollYOffset = scrollContainerData->scrollPosition.y;
-// } else {
-// pointerInDebugView = context->pointerInfo.position.y + scrollContainerData->scrollPosition.y < context->layoutDimensions.height - 300;
-// }
-// break;
-// }
-// }
-// int32_t highlightedRow = pointerInDebugView
-// ? (int32_t)((context->pointerInfo.position.y - scrollYOffset) / (float)CLAY__DEBUGVIEW_ROW_HEIGHT) - 1
-// : -1;
-// if (context->pointerInfo.position.x < context->layoutDimensions.width - (float)Clay__debugViewWidth) {
-// highlightedRow = -1;
-// }
-// Clay__RenderDebugLayoutData layoutData = CLAY__DEFAULT_STRUCT;
-// CLAY(CLAY_ID("Clay__DebugView"),
-// CLAY_FLOATING({ .zIndex = 65000, .parentId = Clay__HashString(CLAY_STRING("Clay__RootContainer"), 0, 0).id, .attachment = { .element = CLAY_ATTACH_POINT_LEFT_CENTER, .parent = CLAY_ATTACH_POINT_RIGHT_CENTER }}),
-// CLAY_LAYOUT({ .sizing = { CLAY_SIZING_FIXED((float)Clay__debugViewWidth) , CLAY_SIZING_FIXED(context->layoutDimensions.height) }, .layoutDirection = CLAY_TOP_TO_BOTTOM }),
-// CLAY_BORDER({ .bottom = { .width = 1, .color = CLAY__DEBUGVIEW_COLOR_3 }})
-// ) {
-// CLAY(CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }), CLAY_RECTANGLE({ .color = CLAY__DEBUGVIEW_COLOR_2 })) {
-// CLAY_TEXT(CLAY_STRING("Clay Debug Tools"), infoTextConfig);
-// CLAY(CLAY_LAYOUT({ .sizing = { CLAY_SIZING_GROW(0) } })) {}
-// // Close button
-// CLAY(CLAY_BORDER_OUTSIDE_RADIUS(1, (CLAY__INIT(Clay_Color){217,91,67,255}), 4),
-// CLAY_LAYOUT({ .sizing = {CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 10), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 10)}, .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER} }),
-// CLAY_RECTANGLE({ .color = {217,91,67,80} }),
-// Clay_OnHover(HandleDebugViewCloseButtonInteraction, 0)
-// ) {
-// CLAY_TEXT(CLAY_STRING("x"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
-// }
-// }
-// CLAY(CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(1)} }), CLAY_RECTANGLE({ .color = CLAY__DEBUGVIEW_COLOR_3 })) {}
-// CLAY(Clay__AttachId(scrollId), CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }), CLAY_SCROLL({ .horizontal = true, .vertical = true })) {
-// CLAY(CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .layoutDirection = CLAY_TOP_TO_BOTTOM }), CLAY_RECTANGLE({ .color = ((initialElementsLength + initialRootsLength) & 1) == 0 ? CLAY__DEBUGVIEW_COLOR_2 : CLAY__DEBUGVIEW_COLOR_1 })) {
-// Clay_ElementId panelContentsId = Clay__HashString(CLAY_STRING("Clay__DebugViewPaneOuter"), 0, 0);
-// // Element list
-// CLAY(Clay__AttachId(panelContentsId), CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }), CLAY_FLOATING({ .zIndex = 65001, .pointerCaptureMode = CLAY_POINTER_CAPTURE_MODE_PASSTHROUGH })) {
-// CLAY(CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .padding = { CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING }, .layoutDirection = CLAY_TOP_TO_BOTTOM })) {
-// layoutData = Clay__RenderDebugLayoutElementsList((int32_t)initialRootsLength, highlightedRow);
-// }
-// }
-// float contentWidth = Clay__GetHashMapItem(panelContentsId.id)->layoutElement->dimensions.width;
-// CLAY(CLAY_LAYOUT({ .sizing = {CLAY_SIZING_FIXED(contentWidth), CLAY__DEFAULT_STRUCT}, .layoutDirection = CLAY_TOP_TO_BOTTOM })) {}
-// for (int32_t i = 0; i < layoutData.rowCount; i++) {
-// Clay_Color rowColor = (i & 1) == 0 ? CLAY__DEBUGVIEW_COLOR_2 : CLAY__DEBUGVIEW_COLOR_1;
-// if (i == layoutData.selectedElementRowIndex) {
-// rowColor = CLAY__DEBUGVIEW_COLOR_SELECTED_ROW;
-// }
-// if (i == highlightedRow) {
-// rowColor.r *= 1.25f;
-// rowColor.g *= 1.25f;
-// rowColor.b *= 1.25f;
-// }
-// CLAY(CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .layoutDirection = CLAY_TOP_TO_BOTTOM }), CLAY_RECTANGLE({ .color = rowColor })) {}
-// }
-// }
-// }
-// CLAY(CLAY_LAYOUT({ .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(1)} }), CLAY_RECTANGLE({ .color = CLAY__DEBUGVIEW_COLOR_3 })) {}
-// if (context->debugSelectedElementId != 0) {
-// Clay_LayoutElementHashMapItem *selectedItem = Clay__GetHashMapItem(context->debugSelectedElementId);
-// CLAY(
-// CLAY_SCROLL({ .vertical = true }),
-// CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(300)}, .layoutDirection = CLAY_TOP_TO_BOTTOM }),
-// CLAY_RECTANGLE({ .color = CLAY__DEBUGVIEW_COLOR_2 }),
-// CLAY_BORDER({ .betweenChildren = { .width = 1, .color = CLAY__DEBUGVIEW_COLOR_3 }})
-// ) {
-// CLAY(CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT + 8)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING}, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} })) {
-// CLAY_TEXT(CLAY_STRING("Layout Config"), infoTextConfig);
-// CLAY(CLAY_LAYOUT({ .sizing = { CLAY_SIZING_GROW(0) } })) {}
-// if (selectedItem->elementId.stringId.length != 0) {
-// CLAY_TEXT(selectedItem->elementId.stringId, infoTitleConfig);
-// if (selectedItem->elementId.offset != 0) {
-// CLAY_TEXT(CLAY_STRING(" ("), infoTitleConfig);
-// CLAY_TEXT(Clay__IntToString(selectedItem->elementId.offset), infoTitleConfig);
-// CLAY_TEXT(CLAY_STRING(")"), infoTitleConfig);
-// }
-// }
-// }
-// Clay_Padding attributeConfigPadding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 8, 8};
-// // Clay_LayoutConfig debug info
-// CLAY(CLAY_LAYOUT({ .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM })) {
-// // .boundingBox
-// CLAY_TEXT(CLAY_STRING("Bounding Box"), infoTitleConfig);
-// CLAY(CLAY_LAYOUT(CLAY__DEFAULT_STRUCT)) {
-// CLAY_TEXT(CLAY_STRING("{ x: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(selectedItem->boundingBox.x), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(", y: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(selectedItem->boundingBox.y), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(", width: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(selectedItem->boundingBox.width), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(", height: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(selectedItem->boundingBox.height), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
-// }
-// // .layoutDirection
-// CLAY_TEXT(CLAY_STRING("Layout Direction"), infoTitleConfig);
-// Clay_LayoutConfig *layoutConfig = selectedItem->layoutElement->layoutConfig;
-// CLAY_TEXT(layoutConfig->layoutDirection == CLAY_TOP_TO_BOTTOM ? CLAY_STRING("TOP_TO_BOTTOM") : CLAY_STRING("LEFT_TO_RIGHT"), infoTextConfig);
-// // .sizing
-// CLAY_TEXT(CLAY_STRING("Sizing"), infoTitleConfig);
-// CLAY(CLAY_LAYOUT(CLAY__DEFAULT_STRUCT)) {
-// CLAY_TEXT(CLAY_STRING("width: "), infoTextConfig);
-// Clay__RenderDebugLayoutSizing(layoutConfig->sizing.width, infoTextConfig);
-// }
-// CLAY(CLAY_LAYOUT(CLAY__DEFAULT_STRUCT)) {
-// CLAY_TEXT(CLAY_STRING("height: "), infoTextConfig);
-// Clay__RenderDebugLayoutSizing(layoutConfig->sizing.height, infoTextConfig);
-// }
-// // .padding
-// CLAY_TEXT(CLAY_STRING("Padding"), infoTitleConfig);
-// CLAY(CLAY_ID("Clay__DebugViewElementInfoPadding")) {
-// CLAY_TEXT(CLAY_STRING("{ left: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(layoutConfig->padding.left), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(", right: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(layoutConfig->padding.right), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(", top: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(layoutConfig->padding.top), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(", bottom: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(layoutConfig->padding.bottom), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
-// }
-// // .childGap
-// CLAY_TEXT(CLAY_STRING("Child Gap"), infoTitleConfig);
-// CLAY_TEXT(Clay__IntToString(layoutConfig->childGap), infoTextConfig);
-// // .childAlignment
-// CLAY_TEXT(CLAY_STRING("Child Alignment"), infoTitleConfig);
-// CLAY(CLAY_LAYOUT(CLAY__DEFAULT_STRUCT)) {
-// CLAY_TEXT(CLAY_STRING("{ x: "), infoTextConfig);
-// Clay_String alignX = CLAY_STRING("LEFT");
-// if (layoutConfig->childAlignment.x == CLAY_ALIGN_X_CENTER) {
-// alignX = CLAY_STRING("CENTER");
-// } else if (layoutConfig->childAlignment.x == CLAY_ALIGN_X_RIGHT) {
-// alignX = CLAY_STRING("RIGHT");
-// }
-// CLAY_TEXT(alignX, infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(", y: "), infoTextConfig);
-// Clay_String alignY = CLAY_STRING("TOP");
-// if (layoutConfig->childAlignment.y == CLAY_ALIGN_Y_CENTER) {
-// alignY = CLAY_STRING("CENTER");
-// } else if (layoutConfig->childAlignment.y == CLAY_ALIGN_Y_BOTTOM) {
-// alignY = CLAY_STRING("BOTTOM");
-// }
-// CLAY_TEXT(alignY, infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
-// }
-// }
-// for (int32_t elementConfigIndex = 0; elementConfigIndex < selectedItem->layoutElement->elementConfigs.length; ++elementConfigIndex) {
-// Clay_ElementConfig *elementConfig = Clay__ElementConfigArraySlice_Get(&selectedItem->layoutElement->elementConfigs, elementConfigIndex);
-// Clay__RenderDebugViewElementConfigHeader(selectedItem->elementId.stringId, elementConfig->type);
-// switch (elementConfig->type) {
-// case CLAY__ELEMENT_CONFIG_TYPE_RECTANGLE: {
-// Clay_RectangleElementConfig *rectangleConfig = elementConfig->config.rectangleElementConfig;
-// CLAY(CLAY_LAYOUT({ .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM })) {
-// // .color
-// CLAY_TEXT(CLAY_STRING("Color"), infoTitleConfig);
-// Clay__RenderDebugViewColor(rectangleConfig->color, infoTextConfig);
-// // .cornerRadius
-// CLAY_TEXT(CLAY_STRING("Corner Radius"), infoTitleConfig);
-// Clay__RenderDebugViewCornerRadius(rectangleConfig->cornerRadius, infoTextConfig);
-// }
-// break;
-// }
-// case CLAY__ELEMENT_CONFIG_TYPE_TEXT: {
-// Clay_TextElementConfig *textConfig = elementConfig->config.textElementConfig;
-// CLAY(CLAY_LAYOUT({ .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM })) {
-// // .fontSize
-// CLAY_TEXT(CLAY_STRING("Font Size"), infoTitleConfig);
-// CLAY_TEXT(Clay__IntToString(textConfig->fontSize), infoTextConfig);
-// // .fontId
-// CLAY_TEXT(CLAY_STRING("Font ID"), infoTitleConfig);
-// CLAY_TEXT(Clay__IntToString(textConfig->fontId), infoTextConfig);
-// // .lineHeight
-// CLAY_TEXT(CLAY_STRING("Line Height"), infoTitleConfig);
-// CLAY_TEXT(textConfig->lineHeight == 0 ? CLAY_STRING("auto") : Clay__IntToString(textConfig->lineHeight), infoTextConfig);
-// // .letterSpacing
-// CLAY_TEXT(CLAY_STRING("Letter Spacing"), infoTitleConfig);
-// CLAY_TEXT(Clay__IntToString(textConfig->letterSpacing), infoTextConfig);
-// // .lineSpacing
-// CLAY_TEXT(CLAY_STRING("Wrap Mode"), infoTitleConfig);
-// Clay_String wrapMode = CLAY_STRING("WORDS");
-// if (textConfig->wrapMode == CLAY_TEXT_WRAP_NONE) {
-// wrapMode = CLAY_STRING("NONE");
-// } else if (textConfig->wrapMode == CLAY_TEXT_WRAP_NEWLINES) {
-// wrapMode = CLAY_STRING("NEWLINES");
-// }
-// CLAY_TEXT(wrapMode, infoTextConfig);
-// // .textColor
-// CLAY_TEXT(CLAY_STRING("Text Color"), infoTitleConfig);
-// Clay__RenderDebugViewColor(textConfig->textColor, infoTextConfig);
-// }
-// break;
-// }
-// case CLAY__ELEMENT_CONFIG_TYPE_IMAGE: {
-// Clay_ImageElementConfig *imageConfig = elementConfig->config.imageElementConfig;
-// CLAY(CLAY_ID("Clay__DebugViewElementInfoImageBody"), CLAY_LAYOUT({ .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM })) {
-// // .sourceDimensions
-// CLAY_TEXT(CLAY_STRING("Source Dimensions"), infoTitleConfig);
-// CLAY(CLAY_ID("Clay__DebugViewElementInfoImageDimensions")) {
-// CLAY_TEXT(CLAY_STRING("{ width: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(imageConfig->sourceDimensions.width), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(", height: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(imageConfig->sourceDimensions.height), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
-// }
-// // Image Preview
-// CLAY_TEXT(CLAY_STRING("Preview"), infoTitleConfig);
-// CLAY(CLAY_LAYOUT({ .sizing = { CLAY_SIZING_GROW(0, imageConfig->sourceDimensions.width) }}), Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .imageElementConfig = imageConfig }, CLAY__ELEMENT_CONFIG_TYPE_IMAGE)) {}
-// }
-// break;
-// }
-// case CLAY__ELEMENT_CONFIG_TYPE_SCROLL_CONTAINER: {
-// Clay_ScrollElementConfig *scrollConfig = elementConfig->config.scrollElementConfig;
-// CLAY(CLAY_LAYOUT({ .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM })) {
-// // .vertical
-// CLAY_TEXT(CLAY_STRING("Vertical"), infoTitleConfig);
-// CLAY_TEXT(scrollConfig->vertical ? CLAY_STRING("true") : CLAY_STRING("false") , infoTextConfig);
-// // .horizontal
-// CLAY_TEXT(CLAY_STRING("Horizontal"), infoTitleConfig);
-// CLAY_TEXT(scrollConfig->horizontal ? CLAY_STRING("true") : CLAY_STRING("false") , infoTextConfig);
-// }
-// break;
-// }
-// case CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER: {
-// Clay_FloatingElementConfig *floatingConfig = elementConfig->config.floatingElementConfig;
-// CLAY(CLAY_LAYOUT({ .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM })) {
-// // .offset
-// CLAY_TEXT(CLAY_STRING("Offset"), infoTitleConfig);
-// CLAY(CLAY_LAYOUT(CLAY__DEFAULT_STRUCT)) {
-// CLAY_TEXT(CLAY_STRING("{ x: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(floatingConfig->offset.x), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(", y: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(floatingConfig->offset.y), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
-// }
-// // .expand
-// CLAY_TEXT(CLAY_STRING("Expand"), infoTitleConfig);
-// CLAY(CLAY_LAYOUT(CLAY__DEFAULT_STRUCT)) {
-// CLAY_TEXT(CLAY_STRING("{ width: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(floatingConfig->expand.width), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(", height: "), infoTextConfig);
-// CLAY_TEXT(Clay__IntToString(floatingConfig->expand.height), infoTextConfig);
-// CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
-// }
-// // .zIndex
-// CLAY_TEXT(CLAY_STRING("z-index"), infoTitleConfig);
-// CLAY_TEXT(Clay__IntToString(floatingConfig->zIndex), infoTextConfig);
-// // .parentId
-// CLAY_TEXT(CLAY_STRING("Parent"), infoTitleConfig);
-// Clay_LayoutElementHashMapItem *hashItem = Clay__GetHashMapItem(floatingConfig->parentId);
-// CLAY_TEXT(hashItem->elementId.stringId, infoTextConfig);
-// }
-// break;
-// }
-// case CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER: {
-// Clay_BorderElementConfig *borderConfig = elementConfig->config.borderElementConfig;
-// CLAY(CLAY_ID("Clay__DebugViewElementInfoBorderBody"), CLAY_LAYOUT({ .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM })) {
-// // .left
-// CLAY_TEXT(CLAY_STRING("Left Border"), infoTitleConfig);
-// Clay__RenderDebugViewBorder(1, borderConfig->left, infoTextConfig);
-// // .right
-// CLAY_TEXT(CLAY_STRING("Right Border"), infoTitleConfig);
-// Clay__RenderDebugViewBorder(2, borderConfig->right, infoTextConfig);
-// // .top
-// CLAY_TEXT(CLAY_STRING("Top Border"), infoTitleConfig);
-// Clay__RenderDebugViewBorder(3, borderConfig->top, infoTextConfig);
-// // .bottom
-// CLAY_TEXT(CLAY_STRING("Bottom Border"), infoTitleConfig);
-// Clay__RenderDebugViewBorder(4, borderConfig->bottom, infoTextConfig);
-// // .betweenChildren
-// CLAY_TEXT(CLAY_STRING("Border Between Children"), infoTitleConfig);
-// Clay__RenderDebugViewBorder(5, borderConfig->betweenChildren, infoTextConfig);
-// // .cornerRadius
-// CLAY_TEXT(CLAY_STRING("Corner Radius"), infoTitleConfig);
-// Clay__RenderDebugViewCornerRadius(borderConfig->cornerRadius, infoTextConfig);
-// }
-// break;
-// }
-// case CLAY__ELEMENT_CONFIG_TYPE_CUSTOM:
-// default: break;
-// }
-// }
-// }
-// } else {
-// CLAY(CLAY_ID("Clay__DebugViewWarningsScrollPane"), CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(300)}, .childGap = 6, .layoutDirection = CLAY_TOP_TO_BOTTOM }), CLAY_SCROLL({ .horizontal = true, .vertical = true }), CLAY_RECTANGLE({ .color = CLAY__DEBUGVIEW_COLOR_2 })) {
-// Clay_TextElementConfig *warningConfig = CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE });
-// CLAY(CLAY_ID("Clay__DebugViewWarningItemHeader"), CLAY_LAYOUT({ .sizing = {.height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING}, .childGap = 8, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} })) {
-// CLAY_TEXT(CLAY_STRING("Warnings"), warningConfig);
-// }
-// CLAY(CLAY_ID("Clay__DebugViewWarningsTopBorder"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(1)} }), CLAY_RECTANGLE({ .color = {200, 200, 200, 255} })) {}
-// int32_t previousWarningsLength = context->warnings.length;
-// for (int32_t i = 0; i < previousWarningsLength; i++) {
-// Clay__Warning warning = context->warnings.internalArray[i];
-// CLAY(CLAY_IDI("Clay__DebugViewWarningItem", i), CLAY_LAYOUT({ .sizing = {.height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING}, .childGap = 8, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} })) {
-// CLAY_TEXT(warning.baseMessage, warningConfig);
-// if (warning.dynamicMessage.length > 0) {
-// CLAY_TEXT(warning.dynamicMessage, warningConfig);
-// }
-// }
-// }
-// }
-// }
-// }
-//}
-//#pragma endregion
+#pragma region DebugTools
+Clay_Color CLAY__DEBUGVIEW_COLOR_1 = {58, 56, 52, 255};
+Clay_Color CLAY__DEBUGVIEW_COLOR_2 = {62, 60, 58, 255};
+Clay_Color CLAY__DEBUGVIEW_COLOR_3 = {141, 133, 135, 255};
+Clay_Color CLAY__DEBUGVIEW_COLOR_4 = {238, 226, 231, 255};
+Clay_Color CLAY__DEBUGVIEW_COLOR_SELECTED_ROW = {102, 80, 78, 255};
+const int32_t CLAY__DEBUGVIEW_ROW_HEIGHT = 30;
+const int32_t CLAY__DEBUGVIEW_OUTER_PADDING = 10;
+const int32_t CLAY__DEBUGVIEW_INDENT_WIDTH = 16;
+Clay_TextElementConfig Clay__DebugView_TextNameConfig = {.textColor = {238, 226, 231, 255}, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE };
+Clay_LayoutConfig Clay__DebugView_ScrollViewItemLayoutConfig = CLAY__DEFAULT_STRUCT;
+
+typedef struct {
+ Clay_String label;
+ Clay_Color color;
+} Clay__DebugElementConfigTypeLabelConfig;
+
+Clay__DebugElementConfigTypeLabelConfig Clay__DebugGetElementConfigTypeLabel(Clay__ElementConfigType type) {
+ switch (type) {
+ case CLAY__ELEMENT_CONFIG_TYPE_RECTANGLE: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Rectangle"), {243,134,48,255} };
+ case CLAY__ELEMENT_CONFIG_TYPE_TEXT: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Text"), {105,210,231,255} };
+ case CLAY__ELEMENT_CONFIG_TYPE_IMAGE: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Image"), {121,189,154,255} };
+ case CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Floating"), {250,105,0,255} };
+ case CLAY__ELEMENT_CONFIG_TYPE_SCROLL_CONTAINER: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Scroll"), {242,196,90,255} };
+ case CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Border"), {108,91,123, 255} };
+ case CLAY__ELEMENT_CONFIG_TYPE_CUSTOM: return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Custom"), {11,72,107,255} };
+ default: break;
+ }
+ return CLAY__INIT(Clay__DebugElementConfigTypeLabelConfig) { CLAY_STRING("Error"), {0,0,0,255} };
+}
+
+typedef struct {
+ int32_t rowCount;
+ int32_t selectedElementRowIndex;
+} Clay__RenderDebugLayoutData;
+
+// Returns row count
+Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialRootsLength, int32_t highlightedRowIndex) {
+ Clay_Context* context = Clay_GetCurrentContext();
+ Clay__int32_tArray dfsBuffer = context->reusableElementIndexBuffer;
+ Clay__DebugView_ScrollViewItemLayoutConfig = CLAY__INIT(Clay_LayoutConfig) { .sizing = { .height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT) }, .childGap = 6, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER }};
+ Clay__RenderDebugLayoutData layoutData = CLAY__DEFAULT_STRUCT;
+
+ uint32_t highlightedElementId = 0;
+
+ for (int32_t rootIndex = 0; rootIndex < initialRootsLength; ++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;
+ if (rootIndex > 0) {
+ CLAY({ .id = CLAY_IDI("Clay__DebugView_EmptyRowOuter", rootIndex), .layout = { .sizing = {.width = CLAY_SIZING_GROW(0)}, .padding = {CLAY__DEBUGVIEW_INDENT_WIDTH / 2, 0} } }) {
+ CLAY({ .id = CLAY_IDI("Clay__DebugView_EmptyRow", rootIndex), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED((float)CLAY__DEBUGVIEW_ROW_HEIGHT) }}, .border = { .top = { .width = 1, .color = CLAY__DEBUGVIEW_COLOR_3 } } }) {}
+ }
+ layoutData.rowCount++;
+ }
+ while (dfsBuffer.length > 0) {
+ int32_t currentElementIndex = Clay__int32_tArray_GetValue(&dfsBuffer, (int)dfsBuffer.length - 1);
+ Clay_LayoutElement *currentElement = Clay_LayoutElementArray_Get(&context->layoutElements, (int)currentElementIndex);
+ if (context->treeNodeVisited.internalArray[dfsBuffer.length - 1]) {
+ if (!Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT) && currentElement->childrenOrTextContent.children.length > 0) {
+ Clay__CloseElement();
+ Clay__CloseElement();
+ Clay__CloseElement();
+ }
+ dfsBuffer.length--;
+ continue;
+ }
+
+ if (highlightedRowIndex == layoutData.rowCount) {
+ if (context->pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
+ context->debugSelectedElementId = currentElement->id;
+ }
+ highlightedElementId = currentElement->id;
+ }
+
+ context->treeNodeVisited.internalArray[dfsBuffer.length - 1] = true;
+ Clay_LayoutElementHashMapItem *currentElementData = Clay__GetHashMapItem(currentElement->id);
+ bool offscreen = Clay__ElementIsOffscreen(¤tElementData->boundingBox);
+ if (context->debugSelectedElementId == currentElement->id) {
+ layoutData.selectedElementRowIndex = layoutData.rowCount;
+ }
+ CLAY({ .id = CLAY_IDI("Clay__DebugView_ElementOuter", currentElement->id), .layout = Clay__DebugView_ScrollViewItemLayoutConfig }) {
+ // Collapse icon / button
+ if (!(Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT) || currentElement->childrenOrTextContent.children.length == 0)) {
+ CLAY({
+ .id = CLAY_IDI("Clay__DebugView_CollapseElement", currentElement->id),
+ .layout = { .sizing = {CLAY_SIZING_FIXED(16), CLAY_SIZING_FIXED(16)}, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER} },
+ .border = CLAY_BORDER_OUTSIDE_RADIUS(1, CLAY__DEBUGVIEW_COLOR_3, 4)
+ }) {
+ CLAY_TEXT((currentElementData && currentElementData->debugData->collapsed) ? CLAY_STRING("+") : CLAY_STRING("-"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
+ }
+ } else { // Square dot for empty containers
+ CLAY({ .layout = { .sizing = {CLAY_SIZING_FIXED(16), CLAY_SIZING_FIXED(16)}, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER } } }) {
+ CLAY({ .layout = { .sizing = {CLAY_SIZING_FIXED(8), CLAY_SIZING_FIXED(8)} }, .rectangle = { .color = CLAY__DEBUGVIEW_COLOR_3, .cornerRadius = CLAY_CORNER_RADIUS(2) } }) {}
+ }
+ }
+ // Collisions and offscreen info
+ if (currentElementData) {
+ if (currentElementData->debugData->collision) {
+ CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .border = CLAY_BORDER_OUTSIDE_RADIUS(1, (CLAY__INIT(Clay_Color){177, 147, 8, 255}), 4) }) {
+ CLAY_TEXT(CLAY_STRING("Duplicate ID"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16 }));
+ }
+ }
+ if (offscreen) {
+ CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .border = CLAY_BORDER_OUTSIDE_RADIUS(1, CLAY__DEBUGVIEW_COLOR_3, 4) }) {
+ CLAY_TEXT(CLAY_STRING("Offscreen"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16 }));
+ }
+ }
+ }
+ Clay_String idString = context->layoutElementIdStrings.internalArray[currentElementIndex];
+ if (idString.length > 0) {
+ CLAY_TEXT(idString, offscreen ? CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16 }) : &Clay__DebugView_TextNameConfig);
+ }
+ for (int32_t elementConfigIndex = 0; elementConfigIndex < currentElement->elementConfigs.length; ++elementConfigIndex) {
+ Clay_ElementConfig *elementConfig = Clay__ElementConfigArraySlice_Get(¤tElement->elementConfigs, elementConfigIndex);
+ Clay__DebugElementConfigTypeLabelConfig config = Clay__DebugGetElementConfigTypeLabel(elementConfig->type);
+ Clay_Color backgroundColor = config.color;
+ backgroundColor.a = 90;
+ CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .rectangle = { .color = backgroundColor, .cornerRadius = CLAY_CORNER_RADIUS(4) }, .border = CLAY_BORDER_OUTSIDE_RADIUS(1, config.color, 4) }) {
+ CLAY_TEXT(config.label, CLAY_TEXT_CONFIG({ .textColor = offscreen ? CLAY__DEBUGVIEW_COLOR_3 : CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
+ }
+ }
+ }
+
+ // Render the text contents below the element as a non-interactive row
+ if (Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT)) {
+ layoutData.rowCount++;
+ Clay__TextElementData *textElementData = currentElement->childrenOrTextContent.textElementData;
+ Clay_TextElementConfig *rawTextConfig = offscreen ? CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16 }) : &Clay__DebugView_TextNameConfig;
+ CLAY({ .layout = { .sizing = { .height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }, .rectangle = CLAY__DEFAULT_STRUCT }) {
+ CLAY({ .layout = { .sizing = {CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_INDENT_WIDTH + 16), CLAY__DEFAULT_STRUCT} } }) {}
+ CLAY_TEXT(CLAY_STRING("\""), rawTextConfig);
+ CLAY_TEXT(textElementData->text.length > 40 ? (CLAY__INIT(Clay_String) { .length = 40, .chars = textElementData->text.chars }) : textElementData->text, rawTextConfig);
+ if (textElementData->text.length > 40) {
+ CLAY_TEXT(CLAY_STRING("..."), rawTextConfig);
+ }
+ CLAY_TEXT(CLAY_STRING("\""), rawTextConfig);
+ }
+ } else if (currentElement->childrenOrTextContent.children.length > 0) {
+ Clay__OpenElement();
+ Clay__ConfigureOpenElement(CLAY__INIT(Clay_ElementDeclaration) { .layout = { .padding = { 8 } } });
+ Clay__OpenElement();
+ Clay__ConfigureOpenElement(CLAY__INIT(Clay_ElementDeclaration) { .layout = { .padding = { .left = CLAY__DEBUGVIEW_INDENT_WIDTH }}, .border = { .left = { .width = 1, .color = CLAY__DEBUGVIEW_COLOR_3 }}});
+ Clay__OpenElement();
+ Clay__ConfigureOpenElement(CLAY__INIT(Clay_ElementDeclaration) { .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM } });
+ }
+
+ layoutData.rowCount++;
+ if (!(Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT) || (currentElementData && currentElementData->debugData->collapsed))) {
+ 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
+ }
+ }
+ }
+ }
+
+ if (context->pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
+ Clay_ElementId collapseButtonId = Clay__HashString(CLAY_STRING("Clay__DebugView_CollapseElement"), 0, 0);
+ for (int32_t i = (int)context->pointerOverIds.length - 1; i >= 0; i--) {
+ Clay_ElementId *elementId = Clay__ElementIdArray_Get(&context->pointerOverIds, i);
+ if (elementId->baseId == collapseButtonId.baseId) {
+ Clay_LayoutElementHashMapItem *highlightedItem = Clay__GetHashMapItem(elementId->offset);
+ highlightedItem->debugData->collapsed = !highlightedItem->debugData->collapsed;
+ break;
+ }
+ }
+ }
+
+ if (highlightedElementId) {
+ CLAY({ .id = CLAY_ID("Clay__DebugView_ElementHighlight"), .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .floating = { .zIndex = 65535, .parentId = highlightedElementId } }) {
+ CLAY({ .id = CLAY_ID("Clay__DebugView_ElementHighlightRectangle"), .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .rectangle = {.color = Clay__debugViewHighlightColor } }) {}
+ }
+ }
+ return layoutData;
+}
+
+void Clay__RenderDebugLayoutSizing(Clay_SizingAxis sizing, Clay_TextElementConfig *infoTextConfig) {
+ Clay_String sizingLabel = CLAY_STRING("GROW");
+ if (sizing.type == CLAY__SIZING_TYPE_FIT) {
+ sizingLabel = CLAY_STRING("FIT");
+ } else if (sizing.type == CLAY__SIZING_TYPE_PERCENT) {
+ sizingLabel = CLAY_STRING("PERCENT");
+ }
+ CLAY_TEXT(sizingLabel, infoTextConfig);
+ if (sizing.type == CLAY__SIZING_TYPE_GROW || sizing.type == CLAY__SIZING_TYPE_FIT) {
+ CLAY_TEXT(CLAY_STRING("("), infoTextConfig);
+ if (sizing.size.minMax.min != 0) {
+ CLAY_TEXT(CLAY_STRING("min: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(sizing.size.minMax.min), infoTextConfig);
+ if (sizing.size.minMax.max != CLAY__MAXFLOAT) {
+ CLAY_TEXT(CLAY_STRING(", "), infoTextConfig);
+ }
+ }
+ if (sizing.size.minMax.max != CLAY__MAXFLOAT) {
+ CLAY_TEXT(CLAY_STRING("max: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(sizing.size.minMax.max), infoTextConfig);
+ }
+ CLAY_TEXT(CLAY_STRING(")"), infoTextConfig);
+ }
+}
+
+void Clay__RenderDebugViewElementConfigHeader(Clay_String elementId, Clay__ElementConfigType type) {
+ Clay__DebugElementConfigTypeLabelConfig config = Clay__DebugGetElementConfigTypeLabel(type);
+ Clay_Color backgroundColor = config.color;
+ backgroundColor.a = 90;
+ CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0)}, .padding = CLAY_PADDING_ALL(CLAY__DEBUGVIEW_OUTER_PADDING), .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } } }) {
+ CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .rectangle = { .color = backgroundColor, .cornerRadius = CLAY_CORNER_RADIUS(4) }, .border = CLAY_BORDER_OUTSIDE_RADIUS(1, config.color, 4) }) {
+ CLAY_TEXT(config.label, CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
+ }
+ CLAY({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {}
+ CLAY_TEXT(elementId, CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE }));
+ }
+}
+
+void Clay__RenderDebugViewColor(Clay_Color color, Clay_TextElementConfig *textConfig) {
+ CLAY({ .layout = { .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
+ CLAY_TEXT(CLAY_STRING("{ r: "), textConfig);
+ CLAY_TEXT(Clay__IntToString(color.r), textConfig);
+ CLAY_TEXT(CLAY_STRING(", g: "), textConfig);
+ CLAY_TEXT(Clay__IntToString(color.g), textConfig);
+ CLAY_TEXT(CLAY_STRING(", b: "), textConfig);
+ CLAY_TEXT(Clay__IntToString(color.b), textConfig);
+ CLAY_TEXT(CLAY_STRING(", a: "), textConfig);
+ CLAY_TEXT(Clay__IntToString(color.a), textConfig);
+ CLAY_TEXT(CLAY_STRING(" }"), textConfig);
+ CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(10), CLAY__DEFAULT_STRUCT } } }) {}
+ CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }, .border = CLAY_BORDER_OUTSIDE_RADIUS(1, CLAY__DEBUGVIEW_COLOR_4, 4) }) {
+ CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }, .rectangle = { .color = color, .cornerRadius = CLAY_CORNER_RADIUS(4) } }) {}
+ }
+ }
+}
+
+void Clay__RenderDebugViewCornerRadius(Clay_CornerRadius cornerRadius, Clay_TextElementConfig *textConfig) {
+ CLAY({ .layout = { .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
+ CLAY_TEXT(CLAY_STRING("{ topLeft: "), textConfig);
+ CLAY_TEXT(Clay__IntToString(cornerRadius.topLeft), textConfig);
+ CLAY_TEXT(CLAY_STRING(", topRight: "), textConfig);
+ CLAY_TEXT(Clay__IntToString(cornerRadius.topRight), textConfig);
+ CLAY_TEXT(CLAY_STRING(", bottomLeft: "), textConfig);
+ CLAY_TEXT(Clay__IntToString(cornerRadius.bottomLeft), textConfig);
+ CLAY_TEXT(CLAY_STRING(", bottomRight: "), textConfig);
+ CLAY_TEXT(Clay__IntToString(cornerRadius.bottomRight), textConfig);
+ CLAY_TEXT(CLAY_STRING(" }"), textConfig);
+ }
+}
+
+void Clay__RenderDebugViewBorder(int32_t index, Clay_Border border, Clay_TextElementConfig *textConfig) {
+ (void) index;
+ CLAY({ .layout = { .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
+ CLAY_TEXT(CLAY_STRING("{ width: "), textConfig);
+ CLAY_TEXT(Clay__IntToString(border.width), textConfig);
+ CLAY_TEXT(CLAY_STRING(", color: "), textConfig);
+ Clay__RenderDebugViewColor(border.color, textConfig);
+ CLAY_TEXT(CLAY_STRING(" }"), textConfig);
+ }
+}
+
+void HandleDebugViewCloseButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) {
+ Clay_Context* context = Clay_GetCurrentContext();
+ (void) elementId; (void) pointerInfo; (void) userData;
+ if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
+ context->debugModeEnabled = false;
+ }
+}
+
+void Clay__RenderDebugView(void) {
+ Clay_Context* context = Clay_GetCurrentContext();
+ Clay_ElementId closeButtonId = Clay__HashString(CLAY_STRING("Clay__DebugViewTopHeaderCloseButtonOuter"), 0, 0);
+ if (context->pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
+ for (int32_t i = 0; i < context->pointerOverIds.length; ++i) {
+ Clay_ElementId *elementId = Clay__ElementIdArray_Get(&context->pointerOverIds, i);
+ if (elementId->id == closeButtonId.id) {
+ context->debugModeEnabled = false;
+ return;
+ }
+ }
+ }
+
+ uint32_t initialRootsLength = context->layoutElementTreeRoots.length;
+ uint32_t initialElementsLength = context->layoutElements.length;
+ Clay_TextElementConfig *infoTextConfig = CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE });
+ Clay_TextElementConfig *infoTitleConfig = CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_3, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE });
+ Clay_ElementId scrollId = Clay__HashString(CLAY_STRING("Clay__DebugViewOuterScrollPane"), 0, 0);
+ float scrollYOffset = 0;
+ bool pointerInDebugView = context->pointerInfo.position.y < context->layoutDimensions.height - 300;
+ for (int32_t i = 0; i < context->scrollContainerDatas.length; ++i) {
+ Clay__ScrollContainerDataInternal *scrollContainerData = Clay__ScrollContainerDataInternalArray_Get(&context->scrollContainerDatas, i);
+ if (scrollContainerData->elementId == scrollId.id) {
+ if (!context->externalScrollHandlingEnabled) {
+ scrollYOffset = scrollContainerData->scrollPosition.y;
+ } else {
+ pointerInDebugView = context->pointerInfo.position.y + scrollContainerData->scrollPosition.y < context->layoutDimensions.height - 300;
+ }
+ break;
+ }
+ }
+ int32_t highlightedRow = pointerInDebugView
+ ? (int32_t)((context->pointerInfo.position.y - scrollYOffset) / (float)CLAY__DEBUGVIEW_ROW_HEIGHT) - 1
+ : -1;
+ if (context->pointerInfo.position.x < context->layoutDimensions.width - (float)Clay__debugViewWidth) {
+ highlightedRow = -1;
+ }
+ Clay__RenderDebugLayoutData layoutData = CLAY__DEFAULT_STRUCT;
+ CLAY({ .id = CLAY_ID("Clay__DebugView"),
+ .floating = { .zIndex = 65000, .parentId = Clay__HashString(CLAY_STRING("Clay__RootContainer"), 0, 0).id, .attachment = { .element = CLAY_ATTACH_POINT_LEFT_CENTER, .parent = CLAY_ATTACH_POINT_RIGHT_CENTER }},
+ .layout = { .sizing = { CLAY_SIZING_FIXED((float)Clay__debugViewWidth) , CLAY_SIZING_FIXED(context->layoutDimensions.height) }, .layoutDirection = CLAY_TOP_TO_BOTTOM },
+ .border = { .bottom = { .width = 1, .color = CLAY__DEBUGVIEW_COLOR_3 }}
+ }) {
+ CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .rectangle = { .color = CLAY__DEBUGVIEW_COLOR_2 } }) {
+ CLAY_TEXT(CLAY_STRING("Clay Debug Tools"), infoTextConfig);
+ CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0) } } }) {}
+ // Close button
+ CLAY({
+ .border = CLAY_BORDER_OUTSIDE_RADIUS(1, (CLAY__INIT(Clay_Color){217,91,67,255}), 4),
+ .layout = { .sizing = {CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 10), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 10)}, .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER} },
+ .rectangle = { .color = {217,91,67,80} }
+ }) {
+ Clay_OnHover(HandleDebugViewCloseButtonInteraction, 0);
+ CLAY_TEXT(CLAY_STRING("x"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
+ }
+ }
+ CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(1)} }, .rectangle = { .color = CLAY__DEBUGVIEW_COLOR_3 } }) {}
+ CLAY({ .id = scrollId, .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .scroll = { .horizontal = true, .vertical = true } }) {
+ CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .rectangle = { .color = ((initialElementsLength + initialRootsLength) & 1) == 0 ? CLAY__DEBUGVIEW_COLOR_2 : CLAY__DEBUGVIEW_COLOR_1 } }) {
+ Clay_ElementId panelContentsId = Clay__HashString(CLAY_STRING("Clay__DebugViewPaneOuter"), 0, 0);
+ // Element list
+ CLAY({ .id = panelContentsId, .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)} }, .floating = { .zIndex = 65001, .pointerCaptureMode = CLAY_POINTER_CAPTURE_MODE_PASSTHROUGH } }) {
+ CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .padding = { CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING }, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
+ layoutData = Clay__RenderDebugLayoutElementsList((int32_t)initialRootsLength, highlightedRow);
+ }
+ }
+ float contentWidth = Clay__GetHashMapItem(panelContentsId.id)->layoutElement->dimensions.width;
+ CLAY({ .layout = { .sizing = {CLAY_SIZING_FIXED(contentWidth) }, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {}
+ for (int32_t i = 0; i < layoutData.rowCount; i++) {
+ Clay_Color rowColor = (i & 1) == 0 ? CLAY__DEBUGVIEW_COLOR_2 : CLAY__DEBUGVIEW_COLOR_1;
+ if (i == layoutData.selectedElementRowIndex) {
+ rowColor = CLAY__DEBUGVIEW_COLOR_SELECTED_ROW;
+ }
+ if (i == highlightedRow) {
+ rowColor.r *= 1.25f;
+ rowColor.g *= 1.25f;
+ rowColor.b *= 1.25f;
+ }
+ CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .rectangle = { .color = rowColor } }) {}
+ }
+ }
+ }
+ CLAY({ .layout = { .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(1)} }, .rectangle = { .color = CLAY__DEBUGVIEW_COLOR_3 } }) {}
+ if (context->debugSelectedElementId != 0) {
+ Clay_LayoutElementHashMapItem *selectedItem = Clay__GetHashMapItem(context->debugSelectedElementId);
+ CLAY({
+ .scroll = { .vertical = true },
+ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(300)}, .layoutDirection = CLAY_TOP_TO_BOTTOM },
+ .rectangle = { .color = CLAY__DEBUGVIEW_COLOR_2 },
+ .border = { .betweenChildren = { .width = 1, .color = CLAY__DEBUGVIEW_COLOR_3 }}
+ }) {
+ CLAY({ .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT + 8)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING}, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
+ CLAY_TEXT(CLAY_STRING("Layout Config"), infoTextConfig);
+ CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0) } } }) {}
+ if (selectedItem->elementId.stringId.length != 0) {
+ CLAY_TEXT(selectedItem->elementId.stringId, infoTitleConfig);
+ if (selectedItem->elementId.offset != 0) {
+ CLAY_TEXT(CLAY_STRING(" ("), infoTitleConfig);
+ CLAY_TEXT(Clay__IntToString(selectedItem->elementId.offset), infoTitleConfig);
+ CLAY_TEXT(CLAY_STRING(")"), infoTitleConfig);
+ }
+ }
+ }
+ Clay_Padding attributeConfigPadding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING, 8, 8};
+ // Clay_LayoutConfig debug info
+ CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
+ // .boundingBox
+ CLAY_TEXT(CLAY_STRING("Bounding Box"), infoTitleConfig);
+ CLAY({}) {
+ CLAY_TEXT(CLAY_STRING("{ x: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(selectedItem->boundingBox.x), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(", y: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(selectedItem->boundingBox.y), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(", width: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(selectedItem->boundingBox.width), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(", height: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(selectedItem->boundingBox.height), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
+ }
+ // .layoutDirection
+ CLAY_TEXT(CLAY_STRING("Layout Direction"), infoTitleConfig);
+ Clay_LayoutConfig *layoutConfig = selectedItem->layoutElement->layoutConfig;
+ CLAY_TEXT(layoutConfig->layoutDirection == CLAY_TOP_TO_BOTTOM ? CLAY_STRING("TOP_TO_BOTTOM") : CLAY_STRING("LEFT_TO_RIGHT"), infoTextConfig);
+ // .sizing
+ CLAY_TEXT(CLAY_STRING("Sizing"), infoTitleConfig);
+ CLAY({}) {
+ CLAY_TEXT(CLAY_STRING("width: "), infoTextConfig);
+ Clay__RenderDebugLayoutSizing(layoutConfig->sizing.width, infoTextConfig);
+ }
+ CLAY({}) {
+ CLAY_TEXT(CLAY_STRING("height: "), infoTextConfig);
+ Clay__RenderDebugLayoutSizing(layoutConfig->sizing.height, infoTextConfig);
+ }
+ // .padding
+ CLAY_TEXT(CLAY_STRING("Padding"), infoTitleConfig);
+ CLAY({ .id = CLAY_ID("Clay__DebugViewElementInfoPadding") }) {
+ CLAY_TEXT(CLAY_STRING("{ left: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(layoutConfig->padding.left), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(", right: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(layoutConfig->padding.right), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(", top: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(layoutConfig->padding.top), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(", bottom: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(layoutConfig->padding.bottom), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
+ }
+ // .childGap
+ CLAY_TEXT(CLAY_STRING("Child Gap"), infoTitleConfig);
+ CLAY_TEXT(Clay__IntToString(layoutConfig->childGap), infoTextConfig);
+ // .childAlignment
+ CLAY_TEXT(CLAY_STRING("Child Alignment"), infoTitleConfig);
+ CLAY({ .layout = CLAY__DEFAULT_STRUCT }) {
+ CLAY_TEXT(CLAY_STRING("{ x: "), infoTextConfig);
+ Clay_String alignX = CLAY_STRING("LEFT");
+ if (layoutConfig->childAlignment.x == CLAY_ALIGN_X_CENTER) {
+ alignX = CLAY_STRING("CENTER");
+ } else if (layoutConfig->childAlignment.x == CLAY_ALIGN_X_RIGHT) {
+ alignX = CLAY_STRING("RIGHT");
+ }
+ CLAY_TEXT(alignX, infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(", y: "), infoTextConfig);
+ Clay_String alignY = CLAY_STRING("TOP");
+ if (layoutConfig->childAlignment.y == CLAY_ALIGN_Y_CENTER) {
+ alignY = CLAY_STRING("CENTER");
+ } else if (layoutConfig->childAlignment.y == CLAY_ALIGN_Y_BOTTOM) {
+ alignY = CLAY_STRING("BOTTOM");
+ }
+ CLAY_TEXT(alignY, infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
+ }
+ }
+ for (int32_t elementConfigIndex = 0; elementConfigIndex < selectedItem->layoutElement->elementConfigs.length; ++elementConfigIndex) {
+ Clay_ElementConfig *elementConfig = Clay__ElementConfigArraySlice_Get(&selectedItem->layoutElement->elementConfigs, elementConfigIndex);
+ Clay__RenderDebugViewElementConfigHeader(selectedItem->elementId.stringId, elementConfig->type);
+ switch (elementConfig->type) {
+ case CLAY__ELEMENT_CONFIG_TYPE_RECTANGLE: {
+ Clay_RectangleElementConfig *rectangleConfig = elementConfig->config.rectangleElementConfig;
+ CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM }}) {
+ // .color
+ CLAY_TEXT(CLAY_STRING("Color"), infoTitleConfig);
+ Clay__RenderDebugViewColor(rectangleConfig->color, infoTextConfig);
+ // .cornerRadius
+ CLAY_TEXT(CLAY_STRING("Corner Radius"), infoTitleConfig);
+ Clay__RenderDebugViewCornerRadius(rectangleConfig->cornerRadius, infoTextConfig);
+ }
+ break;
+ }
+ case CLAY__ELEMENT_CONFIG_TYPE_TEXT: {
+ Clay_TextElementConfig *textConfig = elementConfig->config.textElementConfig;
+ CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
+ // .fontSize
+ CLAY_TEXT(CLAY_STRING("Font Size"), infoTitleConfig);
+ CLAY_TEXT(Clay__IntToString(textConfig->fontSize), infoTextConfig);
+ // .fontId
+ CLAY_TEXT(CLAY_STRING("Font ID"), infoTitleConfig);
+ CLAY_TEXT(Clay__IntToString(textConfig->fontId), infoTextConfig);
+ // .lineHeight
+ CLAY_TEXT(CLAY_STRING("Line Height"), infoTitleConfig);
+ CLAY_TEXT(textConfig->lineHeight == 0 ? CLAY_STRING("auto") : Clay__IntToString(textConfig->lineHeight), infoTextConfig);
+ // .letterSpacing
+ CLAY_TEXT(CLAY_STRING("Letter Spacing"), infoTitleConfig);
+ CLAY_TEXT(Clay__IntToString(textConfig->letterSpacing), infoTextConfig);
+ // .lineSpacing
+ CLAY_TEXT(CLAY_STRING("Wrap Mode"), infoTitleConfig);
+ Clay_String wrapMode = CLAY_STRING("WORDS");
+ if (textConfig->wrapMode == CLAY_TEXT_WRAP_NONE) {
+ wrapMode = CLAY_STRING("NONE");
+ } else if (textConfig->wrapMode == CLAY_TEXT_WRAP_NEWLINES) {
+ wrapMode = CLAY_STRING("NEWLINES");
+ }
+ CLAY_TEXT(wrapMode, infoTextConfig);
+ // .textColor
+ CLAY_TEXT(CLAY_STRING("Text Color"), infoTitleConfig);
+ Clay__RenderDebugViewColor(textConfig->textColor, infoTextConfig);
+ }
+ break;
+ }
+ case CLAY__ELEMENT_CONFIG_TYPE_IMAGE: {
+ Clay_ImageElementConfig *imageConfig = elementConfig->config.imageElementConfig;
+ CLAY({ .id = CLAY_ID("Clay__DebugViewElementInfoImageBody"), .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
+ // .sourceDimensions
+ CLAY_TEXT(CLAY_STRING("Source Dimensions"), infoTitleConfig);
+ CLAY({ .id = CLAY_ID("Clay__DebugViewElementInfoImageDimensions") }) {
+ CLAY_TEXT(CLAY_STRING("{ width: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(imageConfig->sourceDimensions.width), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(", height: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(imageConfig->sourceDimensions.height), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
+ }
+ // Image Preview
+ CLAY_TEXT(CLAY_STRING("Preview"), infoTitleConfig);
+ CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0, imageConfig->sourceDimensions.width) }}, .image = imageConfig }) {}
+ }
+ break;
+ }
+ case CLAY__ELEMENT_CONFIG_TYPE_SCROLL_CONTAINER: {
+ Clay_ScrollElementConfig *scrollConfig = elementConfig->config.scrollElementConfig;
+ CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
+ // .vertical
+ CLAY_TEXT(CLAY_STRING("Vertical"), infoTitleConfig);
+ CLAY_TEXT(scrollConfig->vertical ? CLAY_STRING("true") : CLAY_STRING("false") , infoTextConfig);
+ // .horizontal
+ CLAY_TEXT(CLAY_STRING("Horizontal"), infoTitleConfig);
+ CLAY_TEXT(scrollConfig->horizontal ? CLAY_STRING("true") : CLAY_STRING("false") , infoTextConfig);
+ }
+ break;
+ }
+ case CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER: {
+ Clay_FloatingElementConfig *floatingConfig = elementConfig->config.floatingElementConfig;
+ CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
+ // .offset
+ CLAY_TEXT(CLAY_STRING("Offset"), infoTitleConfig);
+ CLAY({}) {
+ CLAY_TEXT(CLAY_STRING("{ x: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(floatingConfig->offset.x), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(", y: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(floatingConfig->offset.y), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
+ }
+ // .expand
+ CLAY_TEXT(CLAY_STRING("Expand"), infoTitleConfig);
+ CLAY({}) {
+ CLAY_TEXT(CLAY_STRING("{ width: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(floatingConfig->expand.width), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(", height: "), infoTextConfig);
+ CLAY_TEXT(Clay__IntToString(floatingConfig->expand.height), infoTextConfig);
+ CLAY_TEXT(CLAY_STRING(" }"), infoTextConfig);
+ }
+ // .zIndex
+ CLAY_TEXT(CLAY_STRING("z-index"), infoTitleConfig);
+ CLAY_TEXT(Clay__IntToString(floatingConfig->zIndex), infoTextConfig);
+ // .parentId
+ CLAY_TEXT(CLAY_STRING("Parent"), infoTitleConfig);
+ Clay_LayoutElementHashMapItem *hashItem = Clay__GetHashMapItem(floatingConfig->parentId);
+ CLAY_TEXT(hashItem->elementId.stringId, infoTextConfig);
+ }
+ break;
+ }
+ case CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER: {
+ Clay_BorderElementConfig *borderConfig = elementConfig->config.borderElementConfig;
+ CLAY({ .id = CLAY_ID("Clay__DebugViewElementInfoBorderBody"), .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) {
+ // .left
+ CLAY_TEXT(CLAY_STRING("Left Border"), infoTitleConfig);
+ Clay__RenderDebugViewBorder(1, borderConfig->left, infoTextConfig);
+ // .right
+ CLAY_TEXT(CLAY_STRING("Right Border"), infoTitleConfig);
+ Clay__RenderDebugViewBorder(2, borderConfig->right, infoTextConfig);
+ // .top
+ CLAY_TEXT(CLAY_STRING("Top Border"), infoTitleConfig);
+ Clay__RenderDebugViewBorder(3, borderConfig->top, infoTextConfig);
+ // .bottom
+ CLAY_TEXT(CLAY_STRING("Bottom Border"), infoTitleConfig);
+ Clay__RenderDebugViewBorder(4, borderConfig->bottom, infoTextConfig);
+ // .betweenChildren
+ CLAY_TEXT(CLAY_STRING("Border Between Children"), infoTitleConfig);
+ Clay__RenderDebugViewBorder(5, borderConfig->betweenChildren, infoTextConfig);
+ // .cornerRadius
+ CLAY_TEXT(CLAY_STRING("Corner Radius"), infoTitleConfig);
+ Clay__RenderDebugViewCornerRadius(borderConfig->cornerRadius, infoTextConfig);
+ }
+ break;
+ }
+ case CLAY__ELEMENT_CONFIG_TYPE_CUSTOM:
+ default: break;
+ }
+ }
+ }
+ } else {
+ CLAY({ .id = CLAY_ID("Clay__DebugViewWarningsScrollPane"), .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_FIXED(300)}, .childGap = 6, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .scroll = { .horizontal = true, .vertical = true }, .rectangle = { .color = CLAY__DEBUGVIEW_COLOR_2 } }) {
+ Clay_TextElementConfig *warningConfig = CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16, .wrapMode = CLAY_TEXT_WRAP_NONE });
+ CLAY({ .id = CLAY_ID("Clay__DebugViewWarningItemHeader"), .layout = { .sizing = {.height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING}, .childGap = 8, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
+ CLAY_TEXT(CLAY_STRING("Warnings"), warningConfig);
+ }
+ CLAY({ .id = CLAY_ID("Clay__DebugViewWarningsTopBorder"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(1)} }, .rectangle = { .color = {200, 200, 200, 255} } }) {}
+ int32_t previousWarningsLength = context->warnings.length;
+ for (int32_t i = 0; i < previousWarningsLength; i++) {
+ Clay__Warning warning = context->warnings.internalArray[i];
+ CLAY({ .id = CLAY_IDI("Clay__DebugViewWarningItem", i), .layout = { .sizing = {.height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING, CLAY__DEBUGVIEW_OUTER_PADDING}, .childGap = 8, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} } }) {
+ CLAY_TEXT(warning.baseMessage, warningConfig);
+ if (warning.dynamicMessage.length > 0) {
+ CLAY_TEXT(warning.dynamicMessage, warningConfig);
+ }
+ }
+ }
+ }
+ }
+ }
+}
+#pragma endregion
uint32_t Clay__debugViewWidth = 400;
Clay_Color Clay__debugViewHighlightColor = { 168, 66, 28, 100 };
@@ -3483,9 +3393,10 @@ void Clay_BeginLayout(void) {
rootDimensions.width -= (float)Clay__debugViewWidth;
}
context->booleanWarnings = CLAY__INIT(Clay_BooleanWarnings) CLAY__DEFAULT_STRUCT;
- Clay__OpenElement((Clay_ElementDeclaration) {
- .id = CLAY_ID("Clay__RootContainer"),
- .layout = { .sizing = {CLAY_SIZING_FIXED((rootDimensions.width)), CLAY_SIZING_FIXED(rootDimensions.height)} }
+ Clay__OpenElement();
+ Clay__ConfigureOpenElement((Clay_ElementDeclaration) {
+ .id = CLAY_ID("Clay__RootContainer"),
+ .layout = { .sizing = {CLAY_SIZING_FIXED((rootDimensions.width)), CLAY_SIZING_FIXED(rootDimensions.height)} }
});
Clay__int32_tArray_Add(&context->openLayoutElementStack, 0);
Clay__LayoutElementTreeRootArray_Add(&context->layoutElementTreeRoots, CLAY__INIT(Clay__LayoutElementTreeRoot) { .layoutElementIndex = 0 });
@@ -3499,7 +3410,7 @@ Clay_RenderCommandArray Clay_EndLayout(void) {
Clay__CloseElement();
if (context->debugModeEnabled) {
context->warningsEnabled = false;
-// Clay__RenderDebugView();
+ Clay__RenderDebugView();
context->warningsEnabled = true;
}
if (context->booleanWarnings.maxElementsExceeded) {