diff --git a/README.md b/README.md index 6151ef7..4507651 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Download or clone clay.h and include it after defining `CLAY_IMPLEMENTATION` in ```C // Must be defined in one file, _before_ #include "clay.h" #define CLAY_IMPLEMENTATION -#include "clay.h" +#include "../../clay.h" const Clay_Color COLOR_LIGHT = (Clay_Color) {224, 215, 210, 255}; const Clay_Color COLOR_RED = (Clay_Color) {168, 66, 28, 255}; @@ -44,11 +44,16 @@ static inline Clay_Dimensions MeasureText(Clay_StringSlice text, Clay_TextElemen // Clay_TextElementConfig contains members such as fontId, fontSize, letterSpacing etc // Note: Clay_String->chars is not guaranteed to be null terminated return (Clay_Dimensions) { - .width = text.length * config->fontSize, // <- this will only work for monospace fonts, see the renderers/ directory for more advanced text measurement - .height = config->fontSize - } + .width = text.length * config->fontSize, // <- this will only work for monospace fonts, see the renderers/ directory for more advanced text measurement + .height = config->fontSize + }; } +// Layout config is just a struct that can be declared statically, or inline +Clay_LayoutConfig sidebarItemLayout = (Clay_LayoutConfig) { + .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(50) }, +}; + // Re-useable components are just normal functions void SidebarItemComponent() { CLAY(CLAY_LAYOUT(sidebarItemLayout), CLAY_RECTANGLE({ .color = COLOR_ORANGE })) {} @@ -59,9 +64,9 @@ int main() { // a pointer to addressable memory of at least totalMemorySize will work uint64_t totalMemorySize = Clay_MinMemorySize(); Clay_Arena arena = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize)); - + Clay_Initialize(arena, (Clay_Dimensions) { screenWidth, screenHeight }, (Clay_ErrorHandler) { HandleClayErrors }); - + while(renderLoop()) { // Will be different for each renderer / environment // Optional: Update internal layout dimensions to support resizing Clay_SetLayoutDimensions((Clay_Dimensions) { screenWidth, screenHeight }); @@ -69,49 +74,44 @@ int main() { Clay_SetPointerState((Clay_Vector2) { mousePositionX, mousePositionY }, isMouseDown); // Optional: Update internal pointer position for handling mouseover / click / touch events - needed for scrolling and debug tools Clay_UpdateScrollContainers(true, (Clay_Vector2) { mouseWheelX, mouseWheelY }, deltaTime); - - // Layout config is just a struct that can be declared statically, or inline - Clay_LayoutConfig sidebarItemLayout = (Clay_LayoutConfig) { - .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(50) }, - }; - + // All clay layouts are declared between Clay_BeginLayout and Clay_EndLayout Clay_BeginLayout(); - + // An example of laying out a UI with a fixed width sidebar and flexible width main content CLAY(CLAY_ID("OuterContainer"), CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .padding = CLAY_PADDING_ALL(16), .childGap = 16 }), CLAY_RECTANGLE({ .color = {250,250,255,255} })) { CLAY(CLAY_ID("SideBar"), - CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16 }), - CLAY_RECTANGLE({ .color = COLOR_LIGHT }) + CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16 }), + CLAY_RECTANGLE({ .color = COLOR_LIGHT }) ) { - CLAY(CLAY_ID("ProfilePictureOuter"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16, .childGap = 16, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER }), CLAY_RECTANGLE({ .color = COLOR_RED })) { + CLAY(CLAY_ID("ProfilePictureOuter"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }), CLAY_RECTANGLE({ .color = COLOR_RED })) { CLAY(CLAY_ID("ProfilePicture"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_FIXED(60), .height = CLAY_SIZING_FIXED(60) }}), CLAY_IMAGE({ .imageData = &profilePicture, .sourceDimensions = {60, 60} })) {} CLAY_TEXT(CLAY_STRING("Clay - UI Library"), CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {255, 255, 255, 255} })); } - + // Standard C code like loops etc work inside components for (int i = 0; i < 5; i++) { SidebarItemComponent(); } + + CLAY(CLAY_ID("MainContent"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0) }}), CLAY_RECTANGLE({ .color = COLOR_LIGHT })) {} } - - CLAY(CLAY_ID("MainContent"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0) }}), CLAY_RECTANGLE({ .color = COLOR_LIGHT })) {} - } - // All clay layouts are declared between Clay_BeginLayout and Clay_EndLayout - Clay_RenderCommandArray renderCommands = Clay_EndLayout(); + // All clay layouts are declared between Clay_BeginLayout and Clay_EndLayout + Clay_RenderCommandArray renderCommands = Clay_EndLayout(); - // More comprehensive rendering examples can be found in the renderers/ directory - for (int i = 0; i < renderCommands.length; i++) { - Clay_RenderCommand *renderCommand = &renderCommands.internalArray[i]; - - switch (renderCommand->commandType) { - case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: { - DrawRectangle( - renderCommand->boundingBox, - renderCommand->config.rectangleElementConfig->color); + // More comprehensive rendering examples can be found in the renderers/ directory + for (int i = 0; i < renderCommands.length; i++) { + Clay_RenderCommand *renderCommand = &renderCommands.internalArray[i]; + + switch (renderCommand->commandType) { + case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: { + DrawRectangle( + renderCommand->boundingBox, + renderCommand->config.rectangleElementConfig->color); + } + // ... Implement handling of other command types } - // ... Implement handling of other command types } } }