[Core] Add z-index and string base to Render Commands (#227)

bindings/odin/clay-odin/clay.odin

@@ -184,7 +184,8 @@ ElementConfigUnion :: struct #raw_union {
 RenderCommand :: struct {
     boundingBox: BoundingBox,
     config:      ElementConfigUnion,
-    text:        String,
+    text:        StringSlice,
+    zIndex:      i32,
     id:          u32,
     commandType: RenderCommandType,
 }

clay.h

@@ -471,7 +471,8 @@ CLAY__TYPEDEF(Clay_RenderCommandType, CLAY_PACKED_ENUM {
 CLAY__TYPEDEF(Clay_RenderCommand, struct {
     Clay_BoundingBox boundingBox;
     Clay_ElementConfigUnion config;
-    Clay_String text; // TODO I wish there was a way to avoid having to have this on every render command
+    Clay_StringSlice text; // TODO I wish there was a way to avoid having to have this on every render command
+    int32_t zIndex;
     uint32_t id;
     Clay_RenderCommandType commandType;
 });
@@ -2600,6 +2601,7 @@ void Clay__CalculateFinalLayout() {
                 Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand) {
                     .boundingBox = clipHashMapItem->boundingBox,
                     .config = { .scrollElementConfig = Clay__StoreScrollElementConfig(CLAY__INIT(Clay_ScrollElementConfig)CLAY__DEFAULT_STRUCT) },
+                    .zIndex = root->zIndex,
                     .id = Clay__RehashWithNumber(rootElement->id, 10), // TODO need a better strategy for managing derived ids
                     .commandType = CLAY_RENDER_COMMAND_TYPE_SCISSOR_START,
                 });
@@ -2732,7 +2734,8 @@ void Clay__CalculateFinalLayout() {
                                 Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand) {
                                     .boundingBox = { currentElementBoundingBox.x, currentElementBoundingBox.y + yPosition, wrappedLine.dimensions.width, wrappedLine.dimensions.height }, // TODO width
                                     .config = configUnion,
-                                    .text = wrappedLine.line,
+                                    .text = CLAY__INIT(Clay_StringSlice) { .length = wrappedLine.line.length, .chars = wrappedLine.line.chars, .baseChars = currentElement->childrenOrTextContent.textElementData->text.chars },
+                                    .zIndex = root->zIndex,
                                     .id = Clay__HashNumber(lineIndex, currentElement->id).id,
                                     .commandType = CLAY_RENDER_COMMAND_TYPE_TEXT,
                                 });
@@ -3945,7 +3948,8 @@ Clay_RenderCommandArray Clay_EndLayout() {
         context->warningsEnabled = true;
     }
     if (context->booleanWarnings.maxElementsExceeded) {
-        Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand ) { .boundingBox = { context->layoutDimensions.width / 2 - 59 * 4, context->layoutDimensions.height / 2, 0, 0 },  .config = { .textElementConfig = &Clay__DebugView_ErrorTextConfig }, .text = CLAY_STRING("Clay Error: Layout elements exceeded Clay__maxElementCount"), .commandType = CLAY_RENDER_COMMAND_TYPE_TEXT });
+        Clay_String message = CLAY_STRING("Clay Error: Layout elements exceeded Clay__maxElementCount");
+        Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand ) { .boundingBox = { context->layoutDimensions.width / 2 - 59 * 4, context->layoutDimensions.height / 2, 0, 0 },  .config = { .textElementConfig = &Clay__DebugView_ErrorTextConfig }, .text = CLAY__INIT(Clay_StringSlice) { .length = message.length, .chars = message.chars, .baseChars = message.chars }, .commandType = CLAY_RENDER_COMMAND_TYPE_TEXT });
     } else {
         Clay__CalculateFinalLayout();
     }

examples/clay-official-website/build/clay/index.html

@@ -96,6 +96,11 @@
         {name: 'length', type: 'uint32_t' },
         {name: 'chars', type: 'uint32_t' },
     ]};
+    let stringSliceDefinition = { type: 'struct', members: [
+        {name: 'length', type: 'uint32_t' },
+        {name: 'chars', type: 'uint32_t' },
+        {name: 'baseChars', type: 'uint32_t' },
+    ]};
     let borderDefinition = { type: 'struct', members: [
         {name: 'width', type: 'uint32_t'},
         {name: 'color', ...colorDefinition},
@@ -155,7 +160,8 @@
                 { name: 'height', type: 'float' },
             ]},
             { name: 'config', type: 'uint32_t'},
-            { name: 'text', ...stringDefinition },
+            { name: 'text', ...stringSliceDefinition },
+            { name: 'zIndex', type: 'int32_t' },
             { name: 'id', type: 'uint32_t' },
             { name: 'commandType', type: 'uint32_t', },
         ]

examples/clay-official-website/index.html

@@ -96,6 +96,11 @@
         {name: 'length', type: 'uint32_t' },
         {name: 'chars', type: 'uint32_t' },
     ]};
+    let stringSliceDefinition = { type: 'struct', members: [
+        {name: 'length', type: 'uint32_t' },
+        {name: 'chars', type: 'uint32_t' },
+        {name: 'baseChars', type: 'uint32_t' },
+    ]};
     let borderDefinition = { type: 'struct', members: [
         {name: 'width', type: 'uint32_t'},
         {name: 'color', ...colorDefinition},
@@ -155,7 +160,8 @@
                 { name: 'height', type: 'float' },
             ]},
             { name: 'config', type: 'uint32_t'},
-            { name: 'text', ...stringDefinition },
+            { name: 'text', ...stringSliceDefinition },
+            { name: 'zIndex', type: 'int32_t' },
             { name: 'id', type: 'uint32_t' },
             { name: 'commandType', type: 'uint32_t', },
         ]

examples/raylib-sidebar-scrolling-container/CMakeLists.txt

@@ -27,7 +27,7 @@ target_link_libraries(clay_examples_raylib_sidebar_scrolling_container PUBLIC ra
 if(MSVC)
   set(CMAKE_C_FLAGS_DEBUG "/D CLAY_DEBUG")
 else()
-  set(CMAKE_C_FLAGS_DEBUG "${CMAKE_C_FLAGS_DEBUG} -Wall -Werror -DCLAY_DEBUG -fsanitize=address")
+  set(CMAKE_C_FLAGS_DEBUG "${CMAKE_C_FLAGS_DEBUG} -DCLAY_DEBUG -fsanitize=address")
   set(CMAKE_C_FLAGS_RELEASE "${CMAKE_C_FLAGS_RELEASE} -O3")
 endif()
 

renderers/SDL2/clay_renderer_SDL2.c

@@ -58,7 +58,7 @@ static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray ren
             }
             case CLAY_RENDER_COMMAND_TYPE_TEXT: {
                 Clay_TextElementConfig *config = renderCommand->config.textElementConfig;
-                Clay_String text = renderCommand->text;
+                Clay_StringSlice text = renderCommand->text;
                 char *cloned = (char *)calloc(text.length + 1, 1);
                 memcpy(cloned, text.chars, text.length);
                 TTF_Font* font = fonts[config->fontId].font;

renderers/SDL3/clay_renderer_SDL3.c

@@ -158,7 +158,7 @@ static void SDL_RenderClayCommands(SDL_Renderer *renderer, Clay_RenderCommandArr
             } break;
             case CLAY_RENDER_COMMAND_TYPE_TEXT: {
                 const Clay_TextElementConfig *config = rcmd->config.textElementConfig;
-                const Clay_String *text = &rcmd->text;
+                const Clay_StringSlice *text = &rcmd->text;
                 const SDL_Color color = { config->textColor.r, config->textColor.g, config->textColor.b, config->textColor.a };
 
                 TTF_Font *font = gFonts[config->fontId];

renderers/raylib/clay_renderer_raylib.c

@@ -138,7 +138,7 @@ void Clay_Raylib_Render(Clay_RenderCommandArray renderCommands)
         {
             case CLAY_RENDER_COMMAND_TYPE_TEXT: {
                 // Raylib uses standard C strings so isn't compatible with cheap slices, we need to clone the string to append null terminator
-                Clay_String text = renderCommand->text;
+                Clay_StringSlice text = renderCommand->text;
                 char *cloned = (char *)malloc(text.length + 1);
                 memcpy(cloned, text.chars, text.length);
                 cloned[text.length] = '\0';