Sara/clay
1
0
Fork 0
mirror of https://github.com/nicbarker/clay.git synced 2025-09-18 04:26:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Core] Split aspect ratio scaling into its own config (#426)

Browse source
This commit is contained in:
Nic Barker 2025-06-02 10:36:58 +10:00 committed by GitHub
parent 89ce22e894
commit d6f3957a60
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 167 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
README.md
View file

@ -92,7 +92,7 @@ int main() {
.backgroundColor = COLOR_LIGHT .backgroundColor = COLOR_LIGHT
}) { }) {
CLAY({ .id = CLAY_ID("ProfilePictureOuter"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }, .backgroundColor = COLOR_RED }) { CLAY({ .id = CLAY_ID("ProfilePictureOuter"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }, .backgroundColor = COLOR_RED }) {
CLAY({ .id = CLAY_ID("ProfilePicture"), .layout = { .sizing = { .width = CLAY_SIZING_FIXED(60), .height = CLAY_SIZING_FIXED(60) }}, .image = { .imageData = &profilePicture, .sourceDimensions = {60, 60} } }) {} CLAY({ .id = CLAY_ID("ProfilePicture"), .layout = { .sizing = { .width = CLAY_SIZING_FIXED(60), .height = CLAY_SIZING_FIXED(60) }}, .image = { .imageData = &profilePicture } }) {}
CLAY_TEXT(CLAY_STRING("Clay - UI Library"), CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {255, 255, 255, 255} })); CLAY_TEXT(CLAY_STRING("Clay - UI Library"), CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {255, 255, 255, 255} }));
} }
@ -1062,6 +1062,7 @@ typedef struct {
Clay_LayoutConfig layout; Clay_LayoutConfig layout;
Clay_Color backgroundColor; Clay_Color backgroundColor;
Clay_CornerRadius cornerRadius; Clay_CornerRadius cornerRadius;
Clay_AspectRatioElementConfig aspectRatio;
Clay_ImageElementConfig image; Clay_ImageElementConfig image;
Clay_FloatingElementConfig floating; Clay_FloatingElementConfig floating;
Clay_CustomElementConfig custom; Clay_CustomElementConfig custom;
@ -1108,9 +1109,17 @@ Note that the `CLAY_CORNER_RADIUS(radius)` function-like macro is available to p
--- ---
**`.aspectRatio`** - `Clay_AspectRatioElementConfig`
`CLAY({ .aspectRatio = 1 })`
Uses [Clay_AspectRatioElementConfig](#clay_aspectratioelementconfig). Configures the element as an aspect ratio scaling element. Especially useful for rendering images, but can also be used to enforce a fixed width / height ratio of other elements.
---
**`.image`** - `Clay_ImageElementConfig` **`.image`** - `Clay_ImageElementConfig`
`CLAY({ .image = { .imageData = &myImage, .sourceDimensions = { 640, 480 } } })` `CLAY({ .image = { .imageData = &myImage } })`
Uses [Clay_ImageElementConfig](#clay_imageelementconfig). Configures the element as an image element. Causes a render command with type `IMAGE` to be emitted. Uses [Clay_ImageElementConfig](#clay_imageelementconfig). Configures the element as an image element. Causes a render command with type `IMAGE` to be emitted.
@ -1294,23 +1303,12 @@ CLAY({ .id = CLAY_ID("Button"), .layout = { .layoutDirection = CLAY_TOP_TO_BOTTO
```C ```C
Clay_ImageElementConfig { Clay_ImageElementConfig {
Clay_Dimensions sourceDimensions {
float width; float height;
};
void * imageData; void * imageData;
}; };
``` ```
**Fields** **Fields**
**`.sourceDimensions`** - `Clay_Dimensions`
`CLAY({ .image = { .sourceDimensions = { 1024, 768 } } }) {}`
Used to perform **aspect ratio scaling** on the image element. As of this version of clay, aspect ratio scaling only applies to the `height` of an image (i.e. image height will scale with width growth and limitations, but width will not scale with height growth and limitations)
---
**`.imageData`** - `void *` **`.imageData`** - `void *`
`CLAY({ .image = { .imageData = &myImage } }) {}` `CLAY({ .image = { .imageData = &myImage } }) {}`
@ -1321,7 +1319,7 @@ Used to perform **aspect ratio scaling** on the image element. As of this versio
// Load an image somewhere in your code // Load an image somewhere in your code
YourImage profilePicture = LoadYourImage("profilePicture.png"); YourImage profilePicture = LoadYourImage("profilePicture.png");
// Note that when rendering, .imageData will be void* type. // Note that when rendering, .imageData will be void* type.
CLAY({ .image = { .imageData = &profilePicture, .sourceDimensions = { 60, 60 } } }) {} CLAY({ .image = { .imageData = &profilePicture } }) {}
``` ```
**Examples** **Examples**
@ -1330,11 +1328,105 @@ CLAY({ .image = { .imageData = &profilePicture, .sourceDimensions = { 60, 60 } }
// Load an image somewhere in your code // Load an image somewhere in your code
YourImage profilePicture = LoadYourImage("profilePicture.png"); YourImage profilePicture = LoadYourImage("profilePicture.png");
// Declare a reusable image config // Declare a reusable image config
Clay_ImageElementConfig imageConfig = (Clay_ImageElementConfig) { .imageData = &profilePicture, .sourceDimensions = {60, 60} }; Clay_ImageElementConfig imageConfig = (Clay_ImageElementConfig) { .imageData = &profilePicture };
// Declare an image element using a reusable config // Declare an image element using a reusable config
CLAY({ .image = imageConfig }) {} CLAY({ .image = imageConfig }) {}
// Declare an image element using an inline config // Declare an image element using an inline config
CLAY({ .image = { .imageData = &profilePicture, .sourceDimensions = {60, 60} } }) {} CLAY({ .image = { .imageData = &profilePicture }, .aspectRatio = 16 / 9 }) {}
// Rendering example
YourImage *imageToRender = renderCommand->elementConfig.imageElementConfig->imageData;
```
**Rendering**
Element is subject to [culling](#visibility-culling). Otherwise, a single `Clay_RenderCommand`s with `commandType = CLAY_RENDER_COMMAND_TYPE_IMAGE` will be created. The user will need to access `renderCommand->renderData.image->imageData` to retrieve image data referenced during layout creation. It's also up to the user to decide how / if they wish to blend `renderCommand->renderData.image->backgroundColor` with the image.
---
### Clay_AspectRatioElementConfig
**Usage**
`CLAY({ .aspectRatio = 16 / 9 }) {}`
**Clay_AspectRatioElementConfig** configures a clay element to enforce a fixed width / height ratio in its final dimensions. Mostly used for image elements, but can also be used for non image elements.
**Struct API (Pseudocode)**
```C
Clay_AspectRatioElementConfig {
float aspectRatio;
};
```
**Fields**
**`.aspectRatio`** - `float`
`CLAY({ .aspectRatio = { .aspectRatio = 16 / 9 } }) {}`
or alternatively, as C will automatically pass the value to the first nested struct field:
`CLAY({ .aspectRatio = 16 / 9 }) {}`
**Examples**
```C
// Load an image somewhere in your code
YourImage profilePicture = LoadYourImage("profilePicture.png");
// Declare an image element that will grow along the X axis while maintaining its original aspect ratio
CLAY({
.layout = { .width = CLAY_SIZING_GROW() },
.aspectRatio = profilePicture.width / profilePicture.height,
.image = { .imageData = &profilePicture },
}) {}
```
---
### Clay_ImageElementConfig
**Usage**
`CLAY({ .image = { ...image config } }) {}`
**Clay_ImageElementConfig** configures a clay element to render an image as its background.
**Struct API (Pseudocode)**
```C
Clay_ImageElementConfig {
void * imageData;
};
```
**Fields**
**`.imageData`** - `void *`
`CLAY({ .image = { .imageData = &myImage } }) {}`
`.imageData` is a generic void pointer that can be used to pass through image data to the renderer.
```C
// Load an image somewhere in your code
YourImage profilePicture = LoadYourImage("profilePicture.png");
// Note that when rendering, .imageData will be void* type.
CLAY({ .image = { .imageData = &profilePicture } }) {}
```
Note: for an image to maintain its original aspect ratio when using dynamic scaling, the [.aspectRatio](#clay_aspectratioelementconfig) config option must be used.
**Examples**
```C
// Load an image somewhere in your code
YourImage profilePicture = LoadYourImage("profilePicture.png");
// Declare a reusable image config
Clay_ImageElementConfig imageConfig = (Clay_ImageElementConfig) { .imageData = &profilePicture };
// Declare an image element using a reusable config
CLAY({ .image = imageConfig }) {}
// Declare an image element using an inline config
CLAY({ .image = { .imageData = &profilePicture }, .aspectRatio = 16 / 9 }) {}
// Rendering example // Rendering example
YourImage *imageToRender = renderCommand->elementConfig.imageElementConfig->imageData; YourImage *imageToRender = renderCommand->elementConfig.imageElementConfig->imageData;
``` ```
@ -2020,7 +2112,6 @@ typedef struct {
typedef struct { typedef struct {
Clay_Color backgroundColor; Clay_Color backgroundColor;
Clay_CornerRadius cornerRadius; Clay_CornerRadius cornerRadius;
Clay_Dimensions sourceDimensions;
void* imageData; void* imageData;
} Clay_ImageRenderData; } Clay_ImageRenderData;
``` ```

7
bindings/odin/clay-odin/clay.odin
View file

@ -113,9 +113,12 @@ TextElementConfig :: struct {
textAlignment: TextAlignment, textAlignment: TextAlignment,
} }
AspectRatioElementConfig :: struct {
aspectRatio: f32,
}
ImageElementConfig :: struct { ImageElementConfig :: struct {
imageData: rawptr, imageData: rawptr,
sourceDimensions: Dimensions,
} }
CustomElementConfig :: struct { CustomElementConfig :: struct {
@ -203,7 +206,6 @@ RectangleRenderData :: struct {
ImageRenderData :: struct { ImageRenderData :: struct {
backgroundColor: Color, backgroundColor: Color,
cornerRadius: CornerRadius, cornerRadius: CornerRadius,
sourceDimensions: Dimensions,
imageData: rawptr, imageData: rawptr,
} }
@ -340,6 +342,7 @@ ElementDeclaration :: struct {
layout: LayoutConfig, layout: LayoutConfig,
backgroundColor: Color, backgroundColor: Color,
cornerRadius: CornerRadius, cornerRadius: CornerRadius,
aspectRatio: AspectRatioElementConfig,
image: ImageElementConfig, image: ImageElementConfig,
floating: FloatingElementConfig, floating: FloatingElementConfig,
custom: CustomElementConfig, custom: CustomElementConfig,

BIN
bindings/odin/clay-odin/linux/clay.a
View file

Binary file not shown.

BIN
bindings/odin/clay-odin/macos-arm64/clay.a
View file

Binary file not shown.

BIN
bindings/odin/clay-odin/macos/clay.a
View file

Binary file not shown.

BIN
bindings/odin/clay-odin/wasm/clay.o
View file

Binary file not shown.

BIN
bindings/odin/clay-odin/windows/clay.lib
View file

Binary file not shown.

6
bindings/odin/examples/clay-official-website/clay-official-website.odin
View file

@ -72,7 +72,8 @@ LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Colo
if clay.UI()({ if clay.UI()({
id = clay.ID("CheckImage", index), id = clay.ID("CheckImage", index),
layout = { sizing = { width = clay.SizingFixed(32) } }, layout = { sizing = { width = clay.SizingFixed(32) } },
image = { imageData = image, sourceDimensions = { 128, 128 } }, aspectRatio = { 1.0 },
image = { imageData = image },
}) {} }) {}
clay.Text(text, clay.TextConfig({fontSize = fontSize, fontId = fontId, textColor = color})) clay.Text(text, clay.TextConfig({fontSize = fontSize, fontId = fontId, textColor = color}))
} }
@ -213,7 +214,8 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi
if clay.UI()({ if clay.UI()({
id = clay.ID("SyntaxPageRightImageInner"), id = clay.ID("SyntaxPageRightImageInner"),
layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } }, layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } },
image = { imageData = &syntaxImage, sourceDimensions = { 1136, 1194 } }, aspectRatio = { 1136.0 / 1194.0 },
image = { imageData = &syntaxImage },
}) {} }) {}
} }
} }

71
clay.h
View file

@ -399,12 +399,20 @@ typedef struct Clay_TextElementConfig {
CLAY__WRAPPER_STRUCT(Clay_TextElementConfig); CLAY__WRAPPER_STRUCT(Clay_TextElementConfig);
// Aspect Ratio --------------------------------
// Controls various settings related to aspect ratio scaling element.
typedef struct Clay_AspectRatioElementConfig {
float aspectRatio; // A float representing the target "Aspect ratio" for an element, which is its final width divided by its final height.
} Clay_AspectRatioElementConfig;
CLAY__WRAPPER_STRUCT(Clay_AspectRatioElementConfig);
// Image -------------------------------- // Image --------------------------------
// Controls various settings related to image elements. // Controls various settings related to image elements.
typedef struct Clay_ImageElementConfig { typedef struct Clay_ImageElementConfig {
void* imageData; // A transparent pointer used to pass image data through to the renderer. void* imageData; // A transparent pointer used to pass image data through to the renderer.
Clay_Dimensions sourceDimensions; // The original dimensions of the source image, used to control aspect ratio.
} Clay_ImageElementConfig; } Clay_ImageElementConfig;
CLAY__WRAPPER_STRUCT(Clay_ImageElementConfig); CLAY__WRAPPER_STRUCT(Clay_ImageElementConfig);
@ -577,8 +585,6 @@ typedef struct Clay_ImageRenderData {
// Controls the "radius", or corner rounding of this image. // Controls the "radius", or corner rounding of this image.
// The rounding is determined by drawing a circle inset into the element corner by (radius, radius) pixels. // The rounding is determined by drawing a circle inset into the element corner by (radius, radius) pixels.
Clay_CornerRadius cornerRadius; Clay_CornerRadius cornerRadius;
// The original dimensions of the source image, used to control aspect ratio.
Clay_Dimensions sourceDimensions;
// A pointer transparently passed through from the original element definition, typically used to represent image data. // A pointer transparently passed through from the original element definition, typically used to represent image data.
void* imageData; void* imageData;
} Clay_ImageRenderData; } Clay_ImageRenderData;
@ -744,6 +750,8 @@ typedef struct Clay_ElementDeclaration {
Clay_Color backgroundColor; Clay_Color backgroundColor;
// Controls the "radius", or corner rounding of elements, including rectangles, borders and images. // Controls the "radius", or corner rounding of elements, including rectangles, borders and images.
Clay_CornerRadius cornerRadius; Clay_CornerRadius cornerRadius;
// Controls settings related to aspect ratio scaling.
Clay_AspectRatioElementConfig aspectRatio;
// Controls settings related to image elements. // Controls settings related to image elements.
Clay_ImageElementConfig image; Clay_ImageElementConfig image;
// Controls whether and how an element "floats", which means it layers over the top of other elements in z order, and doesn't affect the position and size of siblings or parent elements. // Controls whether and how an element "floats", which means it layers over the top of other elements in z order, and doesn't affect the position and size of siblings or parent elements.
@ -1058,6 +1066,7 @@ CLAY__ARRAY_DEFINE(char, Clay__charArray)
CLAY__ARRAY_DEFINE_FUNCTIONS(Clay_ElementId, Clay_ElementIdArray) CLAY__ARRAY_DEFINE_FUNCTIONS(Clay_ElementId, Clay_ElementIdArray)
CLAY__ARRAY_DEFINE(Clay_LayoutConfig, Clay__LayoutConfigArray) CLAY__ARRAY_DEFINE(Clay_LayoutConfig, Clay__LayoutConfigArray)
CLAY__ARRAY_DEFINE(Clay_TextElementConfig, Clay__TextElementConfigArray) CLAY__ARRAY_DEFINE(Clay_TextElementConfig, Clay__TextElementConfigArray)
CLAY__ARRAY_DEFINE(Clay_AspectRatioElementConfig, Clay__AspectRatioElementConfigArray)
CLAY__ARRAY_DEFINE(Clay_ImageElementConfig, Clay__ImageElementConfigArray) CLAY__ARRAY_DEFINE(Clay_ImageElementConfig, Clay__ImageElementConfigArray)
CLAY__ARRAY_DEFINE(Clay_FloatingElementConfig, Clay__FloatingElementConfigArray) CLAY__ARRAY_DEFINE(Clay_FloatingElementConfig, Clay__FloatingElementConfigArray)
CLAY__ARRAY_DEFINE(Clay_CustomElementConfig, Clay__CustomElementConfigArray) CLAY__ARRAY_DEFINE(Clay_CustomElementConfig, Clay__CustomElementConfigArray)
@ -1072,6 +1081,7 @@ typedef CLAY_PACKED_ENUM {
CLAY__ELEMENT_CONFIG_TYPE_BORDER, CLAY__ELEMENT_CONFIG_TYPE_BORDER,
CLAY__ELEMENT_CONFIG_TYPE_FLOATING, CLAY__ELEMENT_CONFIG_TYPE_FLOATING,
CLAY__ELEMENT_CONFIG_TYPE_CLIP, CLAY__ELEMENT_CONFIG_TYPE_CLIP,
CLAY__ELEMENT_CONFIG_TYPE_ASPECT,
CLAY__ELEMENT_CONFIG_TYPE_IMAGE, CLAY__ELEMENT_CONFIG_TYPE_IMAGE,
CLAY__ELEMENT_CONFIG_TYPE_TEXT, CLAY__ELEMENT_CONFIG_TYPE_TEXT,
CLAY__ELEMENT_CONFIG_TYPE_CUSTOM, CLAY__ELEMENT_CONFIG_TYPE_CUSTOM,
@ -1080,6 +1090,7 @@ typedef CLAY_PACKED_ENUM {
typedef union { typedef union {
Clay_TextElementConfig *textElementConfig; Clay_TextElementConfig *textElementConfig;
Clay_AspectRatioElementConfig *aspectRatioElementConfig;
Clay_ImageElementConfig *imageElementConfig; Clay_ImageElementConfig *imageElementConfig;
Clay_FloatingElementConfig *floatingElementConfig; Clay_FloatingElementConfig *floatingElementConfig;
Clay_CustomElementConfig *customElementConfig; Clay_CustomElementConfig *customElementConfig;
@ -1236,13 +1247,14 @@ struct Clay_Context {
Clay__int32_tArray layoutElementChildren; Clay__int32_tArray layoutElementChildren;
Clay__int32_tArray layoutElementChildrenBuffer; Clay__int32_tArray layoutElementChildrenBuffer;
Clay__TextElementDataArray textElementData; Clay__TextElementDataArray textElementData;
Clay__int32_tArray imageElementPointers; Clay__int32_tArray aspectRatioElementIndexes;
Clay__int32_tArray reusableElementIndexBuffer; Clay__int32_tArray reusableElementIndexBuffer;
Clay__int32_tArray layoutElementClipElementIds; Clay__int32_tArray layoutElementClipElementIds;
// Configs // Configs
Clay__LayoutConfigArray layoutConfigs; Clay__LayoutConfigArray layoutConfigs;
Clay__ElementConfigArray elementConfigs; Clay__ElementConfigArray elementConfigs;
Clay__TextElementConfigArray textElementConfigs; Clay__TextElementConfigArray textElementConfigs;
Clay__AspectRatioElementConfigArray aspectRatioElementConfigs;
Clay__ImageElementConfigArray imageElementConfigs; Clay__ImageElementConfigArray imageElementConfigs;
Clay__FloatingElementConfigArray floatingElementConfigs; Clay__FloatingElementConfigArray floatingElementConfigs;
Clay__ClipElementConfigArray clipElementConfigs; Clay__ClipElementConfigArray clipElementConfigs;
@ -1310,6 +1322,7 @@ uint32_t Clay__GetParentElementId(void) {
Clay_LayoutConfig * Clay__StoreLayoutConfig(Clay_LayoutConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &CLAY_LAYOUT_DEFAULT : Clay__LayoutConfigArray_Add(&Clay_GetCurrentContext()->layoutConfigs, config); } Clay_LayoutConfig * Clay__StoreLayoutConfig(Clay_LayoutConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &CLAY_LAYOUT_DEFAULT : Clay__LayoutConfigArray_Add(&Clay_GetCurrentContext()->layoutConfigs, config); }
Clay_TextElementConfig * Clay__StoreTextElementConfig(Clay_TextElementConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &Clay_TextElementConfig_DEFAULT : Clay__TextElementConfigArray_Add(&Clay_GetCurrentContext()->textElementConfigs, config); } Clay_TextElementConfig * Clay__StoreTextElementConfig(Clay_TextElementConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &Clay_TextElementConfig_DEFAULT : Clay__TextElementConfigArray_Add(&Clay_GetCurrentContext()->textElementConfigs, config); }
Clay_AspectRatioElementConfig * Clay__StoreAspectRatioElementConfig(Clay_AspectRatioElementConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &Clay_AspectRatioElementConfig_DEFAULT : Clay__AspectRatioElementConfigArray_Add(&Clay_GetCurrentContext()->aspectRatioElementConfigs, config); }
Clay_ImageElementConfig * Clay__StoreImageElementConfig(Clay_ImageElementConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &Clay_ImageElementConfig_DEFAULT : Clay__ImageElementConfigArray_Add(&Clay_GetCurrentContext()->imageElementConfigs, config); } Clay_ImageElementConfig * Clay__StoreImageElementConfig(Clay_ImageElementConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &Clay_ImageElementConfig_DEFAULT : Clay__ImageElementConfigArray_Add(&Clay_GetCurrentContext()->imageElementConfigs, config); }
Clay_FloatingElementConfig * Clay__StoreFloatingElementConfig(Clay_FloatingElementConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &Clay_FloatingElementConfig_DEFAULT : Clay__FloatingElementConfigArray_Add(&Clay_GetCurrentContext()->floatingElementConfigs, config); } Clay_FloatingElementConfig * Clay__StoreFloatingElementConfig(Clay_FloatingElementConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &Clay_FloatingElementConfig_DEFAULT : Clay__FloatingElementConfigArray_Add(&Clay_GetCurrentContext()->floatingElementConfigs, config); }
Clay_CustomElementConfig * Clay__StoreCustomElementConfig(Clay_CustomElementConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &Clay_CustomElementConfig_DEFAULT : Clay__CustomElementConfigArray_Add(&Clay_GetCurrentContext()->customElementConfigs, config); } Clay_CustomElementConfig * Clay__StoreCustomElementConfig(Clay_CustomElementConfig config) { return Clay_GetCurrentContext()->booleanWarnings.maxElementsExceeded ? &Clay_CustomElementConfig_DEFAULT : Clay__CustomElementConfigArray_Add(&Clay_GetCurrentContext()->customElementConfigs, config); }
@ -1760,16 +1773,15 @@ bool Clay__ElementHasConfig(Clay_LayoutElement *layoutElement, Clay__ElementConf
void Clay__UpdateAspectRatioBox(Clay_LayoutElement *layoutElement) { void Clay__UpdateAspectRatioBox(Clay_LayoutElement *layoutElement) {
for (int32_t j = 0; j < layoutElement->elementConfigs.length; j++) { for (int32_t j = 0; j < layoutElement->elementConfigs.length; j++) {
Clay_ElementConfig *config = Clay__ElementConfigArraySlice_Get(&layoutElement->elementConfigs, j); Clay_ElementConfig *config = Clay__ElementConfigArraySlice_Get(&layoutElement->elementConfigs, j);
if (config->type == CLAY__ELEMENT_CONFIG_TYPE_IMAGE) { if (config->type == CLAY__ELEMENT_CONFIG_TYPE_ASPECT) {
Clay_ImageElementConfig *imageConfig = config->config.imageElementConfig; Clay_AspectRatioElementConfig *aspectConfig = config->config.aspectRatioElementConfig;
if (imageConfig->sourceDimensions.width == 0 || imageConfig->sourceDimensions.height == 0) { if (aspectConfig->aspectRatio == 0) {
break; break;
} }
float aspect = imageConfig->sourceDimensions.width / imageConfig->sourceDimensions.height;
if (layoutElement->dimensions.width == 0 && layoutElement->dimensions.height != 0) { if (layoutElement->dimensions.width == 0 && layoutElement->dimensions.height != 0) {
layoutElement->dimensions.width = layoutElement->dimensions.height * aspect; layoutElement->dimensions.width = layoutElement->dimensions.height * aspectConfig->aspectRatio;
} else if (layoutElement->dimensions.width != 0 && layoutElement->dimensions.height == 0) { } else if (layoutElement->dimensions.width != 0 && layoutElement->dimensions.height == 0) {
layoutElement->dimensions.height = layoutElement->dimensions.height * (1 / aspect); layoutElement->dimensions.height = layoutElement->dimensions.height * (1 / aspectConfig->aspectRatio);
} }
break; break;
} }
@ -2048,7 +2060,10 @@ void Clay__ConfigureOpenElementPtr(const Clay_ElementDeclaration *declaration) {
} }
if (declaration->image.imageData) { if (declaration->image.imageData) {
Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .imageElementConfig = Clay__StoreImageElementConfig(declaration->image) }, CLAY__ELEMENT_CONFIG_TYPE_IMAGE); 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 (declaration->aspectRatio.aspectRatio > 0) {
Clay__AttachElementConfig(CLAY__INIT(Clay_ElementConfigUnion) { .aspectRatioElementConfig = Clay__StoreAspectRatioElementConfig(declaration->aspectRatio) }, CLAY__ELEMENT_CONFIG_TYPE_ASPECT);
Clay__int32_tArray_Add(&context->aspectRatioElementIndexes, context->layoutElements.length - 1);
} }
if (declaration->floating.attachTo != CLAY_ATTACH_TO_NONE) { if (declaration->floating.attachTo != CLAY_ATTACH_TO_NONE) {
Clay_FloatingElementConfig floatingConfig = declaration->floating; Clay_FloatingElementConfig floatingConfig = declaration->floating;
@ -2145,6 +2160,7 @@ void Clay__InitializeEphemeralMemory(Clay_Context* context) {
context->layoutConfigs = Clay__LayoutConfigArray_Allocate_Arena(maxElementCount, arena); context->layoutConfigs = Clay__LayoutConfigArray_Allocate_Arena(maxElementCount, arena);
context->elementConfigs = Clay__ElementConfigArray_Allocate_Arena(maxElementCount, arena); context->elementConfigs = Clay__ElementConfigArray_Allocate_Arena(maxElementCount, arena);
context->textElementConfigs = Clay__TextElementConfigArray_Allocate_Arena(maxElementCount, arena); context->textElementConfigs = Clay__TextElementConfigArray_Allocate_Arena(maxElementCount, arena);
context->aspectRatioElementConfigs = Clay__AspectRatioElementConfigArray_Allocate_Arena(maxElementCount, arena);
context->imageElementConfigs = Clay__ImageElementConfigArray_Allocate_Arena(maxElementCount, arena); context->imageElementConfigs = Clay__ImageElementConfigArray_Allocate_Arena(maxElementCount, arena);
context->floatingElementConfigs = Clay__FloatingElementConfigArray_Allocate_Arena(maxElementCount, arena); context->floatingElementConfigs = Clay__FloatingElementConfigArray_Allocate_Arena(maxElementCount, arena);
context->clipElementConfigs = Clay__ClipElementConfigArray_Allocate_Arena(maxElementCount, arena); context->clipElementConfigs = Clay__ClipElementConfigArray_Allocate_Arena(maxElementCount, arena);
@ -2159,7 +2175,7 @@ void Clay__InitializeEphemeralMemory(Clay_Context* context) {
context->layoutElementChildren = Clay__int32_tArray_Allocate_Arena(maxElementCount, arena); context->layoutElementChildren = Clay__int32_tArray_Allocate_Arena(maxElementCount, arena);
context->openLayoutElementStack = Clay__int32_tArray_Allocate_Arena(maxElementCount, arena); context->openLayoutElementStack = Clay__int32_tArray_Allocate_Arena(maxElementCount, arena);
context->textElementData = Clay__TextElementDataArray_Allocate_Arena(maxElementCount, arena); context->textElementData = Clay__TextElementDataArray_Allocate_Arena(maxElementCount, arena);
context->imageElementPointers = Clay__int32_tArray_Allocate_Arena(maxElementCount, arena); context->aspectRatioElementIndexes = Clay__int32_tArray_Allocate_Arena(maxElementCount, arena);
context->renderCommands = Clay_RenderCommandArray_Allocate_Arena(maxElementCount, arena); context->renderCommands = Clay_RenderCommandArray_Allocate_Arena(maxElementCount, arena);
context->treeNodeVisited = Clay__boolArray_Allocate_Arena(maxElementCount, arena); context->treeNodeVisited = Clay__boolArray_Allocate_Arena(maxElementCount, arena);
context->treeNodeVisited.length = context->treeNodeVisited.capacity; // This array is accessed directly rather than behaving as a list context->treeNodeVisited.length = context->treeNodeVisited.capacity; // This array is accessed directly rather than behaving as a list
@ -2248,7 +2264,7 @@ void Clay__SizeContainersAlongAxis(bool xAxis) {
if (childSizing.type != CLAY__SIZING_TYPE_PERCENT if (childSizing.type != CLAY__SIZING_TYPE_PERCENT
&& childSizing.type != CLAY__SIZING_TYPE_FIXED && childSizing.type != CLAY__SIZING_TYPE_FIXED
&& (!Clay__ElementHasConfig(childElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT) || (Clay__FindElementConfigWithType(childElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT).textElementConfig->wrapMode == CLAY_TEXT_WRAP_WORDS)) // todo too many loops && (!Clay__ElementHasConfig(childElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT) || (Clay__FindElementConfigWithType(childElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT).textElementConfig->wrapMode == CLAY_TEXT_WRAP_WORDS)) // todo too many loops
&& (xAxis || !Clay__ElementHasConfig(childElement, CLAY__ELEMENT_CONFIG_TYPE_IMAGE)) && (xAxis || !Clay__ElementHasConfig(childElement, CLAY__ELEMENT_CONFIG_TYPE_ASPECT))
) { ) {
Clay__int32_tArray_Add(&resizableContainerBuffer, childElementIndex); Clay__int32_tArray_Add(&resizableContainerBuffer, childElementIndex);
} }
@ -2382,8 +2398,8 @@ void Clay__SizeContainersAlongAxis(bool xAxis) {
float minSize = xAxis ? childElement->minDimensions.width : childElement->minDimensions.height; float minSize = xAxis ? childElement->minDimensions.width : childElement->minDimensions.height;
float *childSize = xAxis ? &childElement->dimensions.width : &childElement->dimensions.height; float *childSize = xAxis ? &childElement->dimensions.width : &childElement->dimensions.height;
if (!xAxis && Clay__ElementHasConfig(childElement, CLAY__ELEMENT_CONFIG_TYPE_IMAGE)) { if (!xAxis && Clay__ElementHasConfig(childElement, CLAY__ELEMENT_CONFIG_TYPE_ASPECT)) {
continue; // Currently we don't support resizing aspect ratio images on the Y axis because it would break the ratio continue; // Currently we don't support resizing aspect ratio elements on the Y axis because it would break the ratio
} }
float maxSize = parentSize - parentPadding; float maxSize = parentSize - parentPadding;
@ -2522,14 +2538,14 @@ void Clay__CalculateFinalLayout(void) {
containerElement->dimensions.height = lineHeight * (float)textElementData->wrappedLines.length; containerElement->dimensions.height = lineHeight * (float)textElementData->wrappedLines.length;
} }
// Scale vertical image heights according to aspect ratio // Scale vertical heights according to aspect ratio
for (int32_t i = 0; i < context->imageElementPointers.length; ++i) { for (int32_t i = 0; i < context->aspectRatioElementIndexes.length; ++i) {
Clay_LayoutElement* imageElement = Clay_LayoutElementArray_Get(&context->layoutElements, Clay__int32_tArray_GetValue(&context->imageElementPointers, i)); Clay_LayoutElement* aspectElement = Clay_LayoutElementArray_Get(&context->layoutElements, Clay__int32_tArray_GetValue(&context->aspectRatioElementIndexes, i));
Clay_ImageElementConfig *config = Clay__FindElementConfigWithType(imageElement, CLAY__ELEMENT_CONFIG_TYPE_IMAGE).imageElementConfig; Clay_AspectRatioElementConfig *config = Clay__FindElementConfigWithType(aspectElement, CLAY__ELEMENT_CONFIG_TYPE_ASPECT).aspectRatioElementConfig;
imageElement->dimensions.height = (config->sourceDimensions.height / CLAY__MAX(config->sourceDimensions.width, 1)) * imageElement->dimensions.width; aspectElement->dimensions.height = config->aspectRatio * aspectElement->dimensions.width;
} }
// Propagate effect of text wrapping, image aspect scaling etc. on height of parents // Propagate effect of text wrapping, aspect scaling etc. on height of parents
Clay__LayoutElementTreeNodeArray dfsBuffer = context->layoutElementTreeNodeArray1; Clay__LayoutElementTreeNodeArray dfsBuffer = context->layoutElementTreeNodeArray1;
dfsBuffer.length = 0; dfsBuffer.length = 0;
for (int32_t i = 0; i < context->layoutElementTreeRoots.length; ++i) { for (int32_t i = 0; i < context->layoutElementTreeRoots.length; ++i) {
@ -2776,6 +2792,7 @@ void Clay__CalculateFinalLayout(void) {
// Culling - Don't bother to generate render commands for rectangles entirely outside the screen - this won't stop their children from being rendered if they overflow // Culling - Don't bother to generate render commands for rectangles entirely outside the screen - this won't stop their children from being rendered if they overflow
bool shouldRender = !offscreen; bool shouldRender = !offscreen;
switch (elementConfig->type) { switch (elementConfig->type) {
case CLAY__ELEMENT_CONFIG_TYPE_ASPECT:
case CLAY__ELEMENT_CONFIG_TYPE_FLOATING: case CLAY__ELEMENT_CONFIG_TYPE_FLOATING:
case CLAY__ELEMENT_CONFIG_TYPE_SHARED: case CLAY__ELEMENT_CONFIG_TYPE_SHARED:
case CLAY__ELEMENT_CONFIG_TYPE_BORDER: { case CLAY__ELEMENT_CONFIG_TYPE_BORDER: {
@ -2798,7 +2815,6 @@ void Clay__CalculateFinalLayout(void) {
.image = { .image = {
.backgroundColor = sharedConfig->backgroundColor, .backgroundColor = sharedConfig->backgroundColor,
.cornerRadius = sharedConfig->cornerRadius, .cornerRadius = sharedConfig->cornerRadius,
.sourceDimensions = elementConfig->config.imageElementConfig->sourceDimensions,
.imageData = elementConfig->config.imageElementConfig->imageData, .imageData = elementConfig->config.imageElementConfig->imageData,
} }
}; };
@ -3584,18 +3600,9 @@ void Clay__RenderDebugView(void) {
case CLAY__ELEMENT_CONFIG_TYPE_IMAGE: { case CLAY__ELEMENT_CONFIG_TYPE_IMAGE: {
Clay_ImageElementConfig *imageConfig = elementConfig->config.imageElementConfig; Clay_ImageElementConfig *imageConfig = elementConfig->config.imageElementConfig;
CLAY({ .id = CLAY_ID("Clay__DebugViewElementInfoImageBody"), .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM } }) { 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 // Image Preview
CLAY_TEXT(CLAY_STRING("Preview"), infoTitleConfig); CLAY_TEXT(CLAY_STRING("Preview"), infoTitleConfig);
CLAY({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0, imageConfig->sourceDimensions.width) }}, .image = *imageConfig }) {} CLAY({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }}, .image = *imageConfig }) {}
} }
break; break;
} }

8
examples/clay-official-website/main.c
View file

@ -66,7 +66,7 @@ Clay_String* FrameAllocateString(Clay_String string) {
void LandingPageBlob(int index, int fontSize, Clay_Color color, Clay_String text, Clay_String imageURL) { void LandingPageBlob(int index, int fontSize, Clay_Color color, Clay_String text, Clay_String imageURL) {
CLAY({ .id = CLAY_IDI("HeroBlob", index), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 480) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .border = { .color = color, .width = { 2, 2, 2, 2 }}, .cornerRadius = CLAY_CORNER_RADIUS(10) }) { CLAY({ .id = CLAY_IDI("HeroBlob", index), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 480) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .border = { .color = color, .width = { 2, 2, 2, 2 }}, .cornerRadius = CLAY_CORNER_RADIUS(10) }) {
CLAY({ .id = CLAY_IDI("CheckImage", index), .layout = { .sizing = { CLAY_SIZING_FIXED(32) } }, .image = { .sourceDimensions = { 128, 128 }, .imageData = FrameAllocateString(imageURL) } }) {} CLAY({ .id = CLAY_IDI("CheckImage", index), .layout = { .sizing = { CLAY_SIZING_FIXED(32) } }, .aspectRatio = 1, .image = { .imageData = FrameAllocateString(imageURL) } }) {}
CLAY_TEXT(text, CLAY_TEXT_CONFIG({ .fontSize = fontSize, .fontId = FONT_ID_BODY_24, .textColor = color })); CLAY_TEXT(text, CLAY_TEXT_CONFIG({ .fontSize = fontSize, .fontId = FONT_ID_BODY_24, .textColor = color }));
} }
} }
@ -156,7 +156,7 @@ void DeclarativeSyntaxPageDesktop() {
CLAY_TEXT(CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED }));
} }
CLAY({ .id = CLAY_ID("SyntaxPageRightImage"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) { CLAY({ .id = CLAY_ID("SyntaxPageRightImage"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) {
CLAY({ .id = CLAY_ID("SyntaxPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .image = { .sourceDimensions = {1136, 1194}, .imageData = FrameAllocateString(CLAY_STRING("/clay/images/declarative.png")) } }) {} CLAY({ .id = CLAY_ID("SyntaxPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .aspectRatio = 1136 / 1194, .image = { .imageData = FrameAllocateString(CLAY_STRING("/clay/images/declarative.png")) } }) {}
} }
} }
} }
@ -172,7 +172,7 @@ void DeclarativeSyntaxPageMobile() {
CLAY_TEXT(CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); CLAY_TEXT(CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED }));
} }
CLAY({ .id = CLAY_ID("SyntaxPageRightImage"), .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) { CLAY({ .id = CLAY_ID("SyntaxPageRightImage"), .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) {
CLAY({ .id = CLAY_ID("SyntaxPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .image = { .sourceDimensions = {1136, 1194}, .imageData = FrameAllocateString(CLAY_STRING("/clay/images/declarative.png")) } }) {} CLAY({ .id = CLAY_ID("SyntaxPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .aspectRatio = 1136 / 1194, .image = { .imageData = FrameAllocateString(CLAY_STRING("/clay/images/declarative.png")) } }) {}
} }
} }
} }
@ -323,7 +323,7 @@ void DebuggerPageDesktop() {
CLAY_TEXT(CLAY_STRING("Press the \"d\" key to try it out now!"), CLAY_TEXT_CONFIG({ .fontSize = 32, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE })); CLAY_TEXT(CLAY_STRING("Press the \"d\" key to try it out now!"), CLAY_TEXT_CONFIG({ .fontSize = 32, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE }));
} }
CLAY({ .id = CLAY_ID("DebuggerRightImageOuter"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) { CLAY({ .id = CLAY_ID("DebuggerRightImageOuter"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) {
CLAY({ .id = CLAY_ID("DebuggerPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 558) } }, .image = { .sourceDimensions = {1620, 1474}, .imageData = FrameAllocateString(CLAY_STRING("/clay/images/debugger.png")) } }) {} CLAY({ .id = CLAY_ID("DebuggerPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 558) } }, .aspectRatio = 1620 / 1474, .image = {.imageData = FrameAllocateString(CLAY_STRING("/clay/images/debugger.png")) } }) {}
} }
} }
} }

14
examples/raylib-sidebar-scrolling-container/main.c
View file

File diff suppressed because one or more lines are too long