From bd2ce4b8332a73a9fc7364e1aec2ec98789db02d Mon Sep 17 00:00:00 2001
From: Nic Barker <contact+github@nicbarker.com>
Date: Fri, 7 Feb 2025 09:34:35 +1300
Subject: [PATCH] [Core] Update debug view for new non rectangle API

---
 clay.h | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/clay.h b/clay.h
index cc7b98e..8ca24b6 100644
--- a/clay.h
+++ b/clay.h
@@ -2212,10 +2212,10 @@ void Clay__CalculateFinalLayout(void) {
                     sortMax--;
                 }
 
-                bool emitRectangle;
+                bool emitRectangle = false;
                 // Create the render commands for this element
                 Clay_SharedElementConfig *sharedConfig = Clay__FindElementConfigWithType(currentElement, CLAY__ELEMENT_CONFIG_TYPE_SHARED).sharedElementConfig;
-                if (sharedConfig) {
+                if (sharedConfig && sharedConfig->backgroundColor.a > 0) {
                    emitRectangle = true;
                 }
                 else if (!sharedConfig) {
@@ -2248,7 +2248,7 @@ void Clay__CalculateFinalLayout(void) {
                             renderCommand.commandType = CLAY_RENDER_COMMAND_TYPE_IMAGE;
                             renderCommand.renderData = CLAY__INIT(Clay_RenderData) {
                                 .image = {
-                                    .backgroundColor = emitRectangle ? sharedConfig->backgroundColor : CLAY__INIT(Clay_Color) { 255, 255, 255, 255 },
+                                    .backgroundColor = sharedConfig->backgroundColor,
                                     .cornerRadius = sharedConfig->cornerRadius,
                                     .sourceDimensions = elementConfig->config.imageElementConfig->sourceDimensions,
                                     .imageData = elementConfig->config.imageElementConfig->imageData,
@@ -2647,6 +2647,23 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
                 }
                 for (int32_t elementConfigIndex = 0; elementConfigIndex < currentElement->elementConfigs.length; ++elementConfigIndex) {
                     Clay_ElementConfig *elementConfig = Clay__ElementConfigArraySlice_Get(&currentElement->elementConfigs, elementConfigIndex);
+                    if (elementConfig->type == CLAY__ELEMENT_CONFIG_TYPE_SHARED) {
+                        Clay_Color labelColor = {243,134,48,90};
+                        labelColor.a = 90;
+                        Clay_Color backgroundColor = elementConfig->config.sharedElementConfig->backgroundColor;
+                        Clay_CornerRadius radius = elementConfig->config.sharedElementConfig->cornerRadius;
+                        if (backgroundColor.a > 0) {
+                            CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = labelColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = labelColor, .width = { 1, 1, 1, 1 } } }) {
+                                CLAY_TEXT(CLAY_STRING("Color"), CLAY_TEXT_CONFIG({ .textColor = offscreen ? CLAY__DEBUGVIEW_COLOR_3 : CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
+                            }
+                        }
+                        if (radius.bottomLeft > 0) {
+                            CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = labelColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = labelColor, .width = { 1, 1, 1, 1 } } }) {
+                                CLAY_TEXT(CLAY_STRING("Radius"), CLAY_TEXT_CONFIG({ .textColor = offscreen ? CLAY__DEBUGVIEW_COLOR_3 : CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
+                            }
+                        }
+                        continue;
+                    }
                     Clay__DebugElementConfigTypeLabelConfig config = Clay__DebugGetElementConfigTypeLabel(elementConfig->type);
                     Clay_Color backgroundColor = config.color;
                     backgroundColor.a = 90;
@@ -2964,8 +2981,11 @@ void Clay__RenderDebugView(void) {
                         case CLAY__ELEMENT_CONFIG_TYPE_SHARED: {
                             Clay_SharedElementConfig *sharedConfig = elementConfig->config.sharedElementConfig;
                             CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM }}) {
+                                // .backgroundColor
+                                CLAY_TEXT(CLAY_STRING("Background Color"), infoTitleConfig);
+                                Clay__RenderDebugViewColor(sharedConfig->backgroundColor, infoTextConfig);
                                 // .cornerRadius
-                                CLAY_TEXT(CLAY_STRING("Color"), infoTitleConfig);
+                                CLAY_TEXT(CLAY_STRING("Corner Radius"), infoTitleConfig);
                                 Clay__RenderDebugViewCornerRadius(sharedConfig->cornerRadius, infoTextConfig);
                             }
                             break;