mirror of
https://github.com/nicbarker/clay.git
synced 2025-09-18 04:26:18 +00:00
[Core] Split aspect ratio scaling into its own config (#426)
This commit is contained in:
Nic Barker
GitHub
parent
89ce22e894
commit
d6f3957a60
125
README.md
125
README.md
|
|
@ -92,7 +92,7 @@ int main() {
|
|||
.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("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} }));
|
||||
}
|
||||
|
||||
|
|
@ -1062,6 +1062,7 @@ typedef struct {
|
|||
Clay_LayoutConfig layout;
|
||||
Clay_Color backgroundColor;
|
||||
Clay_CornerRadius cornerRadius;
|
||||
Clay_AspectRatioElementConfig aspectRatio;
|
||||
Clay_ImageElementConfig image;
|
||||
Clay_FloatingElementConfig floating;
|
||||
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`
|
||||
|
||||
`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.
|
||||
|
||||
|
|
@ -1294,23 +1303,12 @@ CLAY({ .id = CLAY_ID("Button"), .layout = { .layoutDirection = CLAY_TOP_TO_BOTTO
|
|||
|
||||
```C
|
||||
Clay_ImageElementConfig {
|
||||
Clay_Dimensions sourceDimensions {
|
||||
float width; float height;
|
||||
};
|
||||
void * imageData;
|
||||
};
|
||||
```
|
||||
|
||||
**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 *`
|
||||
|
||||
`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
|
||||
YourImage profilePicture = LoadYourImage("profilePicture.png");
|
||||
// Note that when rendering, .imageData will be void* type.
|
||||
CLAY({ .image = { .imageData = &profilePicture, .sourceDimensions = { 60, 60 } } }) {}
|
||||
CLAY({ .image = { .imageData = &profilePicture } }) {}
|
||||
```
|
||||
|
||||
**Examples**
|
||||
|
|
@ -1330,11 +1328,105 @@ CLAY({ .image = { .imageData = &profilePicture, .sourceDimensions = { 60, 60 } }
|
|||
// Load an image somewhere in your code
|
||||
YourImage profilePicture = LoadYourImage("profilePicture.png");
|
||||
// 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
|
||||
CLAY({ .image = imageConfig }) {}
|
||||
// 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
|
||||
YourImage *imageToRender = renderCommand->elementConfig.imageElementConfig->imageData;
|
||||
```
|
||||
|
|
@ -2020,7 +2112,6 @@ typedef struct {
|
|||
typedef struct {
|
||||
Clay_Color backgroundColor;
|
||||
Clay_CornerRadius cornerRadius;
|
||||
Clay_Dimensions sourceDimensions;
|
||||
void* imageData;
|
||||
} Clay_ImageRenderData;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -113,9 +113,12 @@ TextElementConfig :: struct {
|
|||
textAlignment: TextAlignment,
|
||||
}
|
||||
|
||||
AspectRatioElementConfig :: struct {
|
||||
aspectRatio: f32,
|
||||
}
|
||||
|
||||
ImageElementConfig :: struct {
|
||||
imageData: rawptr,
|
||||
sourceDimensions: Dimensions,
|
||||
}
|
||||
|
||||
CustomElementConfig :: struct {
|
||||
|
|
@ -203,7 +206,6 @@ RectangleRenderData :: struct {
|
|||
ImageRenderData :: struct {
|
||||
backgroundColor: Color,
|
||||
cornerRadius: CornerRadius,
|
||||
sourceDimensions: Dimensions,
|
||||
imageData: rawptr,
|
||||
}
|
||||
|
||||
|
|
@ -340,6 +342,7 @@ ElementDeclaration :: struct {
|
|||
layout: LayoutConfig,
|
||||
backgroundColor: Color,
|
||||
cornerRadius: CornerRadius,
|
||||
aspectRatio: AspectRatioElementConfig,
|
||||
image: ImageElementConfig,
|
||||
floating: FloatingElementConfig,
|
||||
custom: CustomElementConfig,
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -72,7 +72,8 @@ LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Colo
|
|||
if clay.UI()({
|
||||
id = clay.ID("CheckImage", index),
|
||||
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}))
|
||||
}
|
||||
|
|
@ -213,7 +214,8 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi
|
|||
if clay.UI()({
|
||||
id = clay.ID("SyntaxPageRightImageInner"),
|
||||
layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } },
|
||||
image = { imageData = &syntaxImage, sourceDimensions = { 1136, 1194 } },
|
||||
aspectRatio = { 1136.0 / 1194.0 },
|
||||
image = { imageData = &syntaxImage },
|
||||
}) {}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
71
clay.h
71
clay.h
|
|
@ -399,12 +399,20 @@ typedef 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 --------------------------------
|
||||
|
||||
// Controls various settings related to image elements.
|
||||
typedef struct Clay_ImageElementConfig {
|
||||
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__WRAPPER_STRUCT(Clay_ImageElementConfig);
|
||||
|
|
@ -577,8 +585,6 @@ typedef struct Clay_ImageRenderData {
|
|||
// 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.
|
||||
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.
|
||||
void* imageData;
|
||||
} Clay_ImageRenderData;
|
||||
|
|
@ -744,6 +750,8 @@ typedef struct Clay_ElementDeclaration {
|
|||
Clay_Color backgroundColor;
|
||||
// Controls the "radius", or corner rounding of elements, including rectangles, borders and images.
|
||||
Clay_CornerRadius cornerRadius;
|
||||
// Controls settings related to aspect ratio scaling.
|
||||
Clay_AspectRatioElementConfig aspectRatio;
|
||||
// Controls settings related to image elements.
|
||||
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.
|
||||
|
|
@ -1058,6 +1066,7 @@ CLAY__ARRAY_DEFINE(char, Clay__charArray)
|
|||
CLAY__ARRAY_DEFINE_FUNCTIONS(Clay_ElementId, Clay_ElementIdArray)
|
||||
CLAY__ARRAY_DEFINE(Clay_LayoutConfig, Clay__LayoutConfigArray)
|
||||
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_FloatingElementConfig, Clay__FloatingElementConfigArray)
|
||||
CLAY__ARRAY_DEFINE(Clay_CustomElementConfig, Clay__CustomElementConfigArray)
|
||||
|
|
@ -1072,6 +1081,7 @@ typedef CLAY_PACKED_ENUM {
|
|||
CLAY__ELEMENT_CONFIG_TYPE_BORDER,
|
||||
CLAY__ELEMENT_CONFIG_TYPE_FLOATING,
|
||||
CLAY__ELEMENT_CONFIG_TYPE_CLIP,
|
||||
CLAY__ELEMENT_CONFIG_TYPE_ASPECT,
|
||||
CLAY__ELEMENT_CONFIG_TYPE_IMAGE,
|
||||
CLAY__ELEMENT_CONFIG_TYPE_TEXT,
|
||||
CLAY__ELEMENT_CONFIG_TYPE_CUSTOM,
|
||||
|
|
@ -1080,6 +1090,7 @@ typedef CLAY_PACKED_ENUM {
|
|||
|
||||
typedef union {
|
||||
Clay_TextElementConfig *textElementConfig;
|
||||
Clay_AspectRatioElementConfig *aspectRatioElementConfig;
|
||||
Clay_ImageElementConfig *imageElementConfig;
|
||||
Clay_FloatingElementConfig *floatingElementConfig;
|
||||
Clay_CustomElementConfig *customElementConfig;
|
||||
|
|
@ -1236,13 +1247,14 @@ struct Clay_Context {
|
|||
Clay__int32_tArray layoutElementChildren;
|
||||
Clay__int32_tArray layoutElementChildrenBuffer;
|
||||
Clay__TextElementDataArray textElementData;
|
||||
Clay__int32_tArray imageElementPointers;
|
||||
Clay__int32_tArray aspectRatioElementIndexes;
|
||||
Clay__int32_tArray reusableElementIndexBuffer;
|
||||
Clay__int32_tArray layoutElementClipElementIds;
|
||||
// Configs
|
||||
Clay__LayoutConfigArray layoutConfigs;
|
||||
Clay__ElementConfigArray elementConfigs;
|
||||
Clay__TextElementConfigArray textElementConfigs;
|
||||
Clay__AspectRatioElementConfigArray aspectRatioElementConfigs;
|
||||
Clay__ImageElementConfigArray imageElementConfigs;
|
||||
Clay__FloatingElementConfigArray floatingElementConfigs;
|
||||
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_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_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); }
|
||||
|
|
@ -1760,16 +1773,15 @@ bool Clay__ElementHasConfig(Clay_LayoutElement *layoutElement, Clay__ElementConf
|
|||
void Clay__UpdateAspectRatioBox(Clay_LayoutElement *layoutElement) {
|
||||
for (int32_t j = 0; j < layoutElement->elementConfigs.length; j++) {
|
||||
Clay_ElementConfig *config = Clay__ElementConfigArraySlice_Get(&layoutElement->elementConfigs, j);
|
||||
if (config->type == CLAY__ELEMENT_CONFIG_TYPE_IMAGE) {
|
||||
Clay_ImageElementConfig *imageConfig = config->config.imageElementConfig;
|
||||
if (imageConfig->sourceDimensions.width == 0 || imageConfig->sourceDimensions.height == 0) {
|
||||
if (config->type == CLAY__ELEMENT_CONFIG_TYPE_ASPECT) {
|
||||
Clay_AspectRatioElementConfig *aspectConfig = config->config.aspectRatioElementConfig;
|
||||
if (aspectConfig->aspectRatio == 0) {
|
||||
break;
|
||||
}
|
||||
float aspect = imageConfig->sourceDimensions.width / imageConfig->sourceDimensions.height;
|
||||
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) {
|
||||
layoutElement->dimensions.height = layoutElement->dimensions.height * (1 / aspect);
|
||||
layoutElement->dimensions.height = layoutElement->dimensions.height * (1 / aspectConfig->aspectRatio);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
|
@ -2048,7 +2060,10 @@ void Clay__ConfigureOpenElementPtr(const Clay_ElementDeclaration *declaration) {
|
|||
}
|
||||
if (declaration->image.imageData) {
|
||||
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) {
|
||||
Clay_FloatingElementConfig floatingConfig = declaration->floating;
|
||||
|
|
@ -2145,6 +2160,7 @@ void Clay__InitializeEphemeralMemory(Clay_Context* context) {
|
|||
context->layoutConfigs = Clay__LayoutConfigArray_Allocate_Arena(maxElementCount, arena);
|
||||
context->elementConfigs = Clay__ElementConfigArray_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->floatingElementConfigs = Clay__FloatingElementConfigArray_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->openLayoutElementStack = Clay__int32_tArray_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->treeNodeVisited = Clay__boolArray_Allocate_Arena(maxElementCount, arena);
|
||||
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
|
||||
&& 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
|
||||
&& (xAxis || !Clay__ElementHasConfig(childElement, CLAY__ELEMENT_CONFIG_TYPE_IMAGE))
|
||||
&& (xAxis || !Clay__ElementHasConfig(childElement, CLAY__ELEMENT_CONFIG_TYPE_ASPECT))
|
||||
) {
|
||||
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 *childSize = xAxis ? &childElement->dimensions.width : &childElement->dimensions.height;
|
||||
|
||||
if (!xAxis && Clay__ElementHasConfig(childElement, CLAY__ELEMENT_CONFIG_TYPE_IMAGE)) {
|
||||
continue; // Currently we don't support resizing aspect ratio images on the Y axis because it would break the ratio
|
||||
if (!xAxis && Clay__ElementHasConfig(childElement, CLAY__ELEMENT_CONFIG_TYPE_ASPECT)) {
|
||||
continue; // Currently we don't support resizing aspect ratio elements on the Y axis because it would break the ratio
|
||||
}
|
||||
|
||||
float maxSize = parentSize - parentPadding;
|
||||
|
|
@ -2522,14 +2538,14 @@ void Clay__CalculateFinalLayout(void) {
|
|||
containerElement->dimensions.height = lineHeight * (float)textElementData->wrappedLines.length;
|
||||
}
|
||||
|
||||
// Scale vertical image heights according to aspect ratio
|
||||
for (int32_t i = 0; i < context->imageElementPointers.length; ++i) {
|
||||
Clay_LayoutElement* imageElement = Clay_LayoutElementArray_Get(&context->layoutElements, Clay__int32_tArray_GetValue(&context->imageElementPointers, i));
|
||||
Clay_ImageElementConfig *config = Clay__FindElementConfigWithType(imageElement, CLAY__ELEMENT_CONFIG_TYPE_IMAGE).imageElementConfig;
|
||||
imageElement->dimensions.height = (config->sourceDimensions.height / CLAY__MAX(config->sourceDimensions.width, 1)) * imageElement->dimensions.width;
|
||||
// Scale vertical heights according to aspect ratio
|
||||
for (int32_t i = 0; i < context->aspectRatioElementIndexes.length; ++i) {
|
||||
Clay_LayoutElement* aspectElement = Clay_LayoutElementArray_Get(&context->layoutElements, Clay__int32_tArray_GetValue(&context->aspectRatioElementIndexes, i));
|
||||
Clay_AspectRatioElementConfig *config = Clay__FindElementConfigWithType(aspectElement, CLAY__ELEMENT_CONFIG_TYPE_ASPECT).aspectRatioElementConfig;
|
||||
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;
|
||||
dfsBuffer.length = 0;
|
||||
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
|
||||
bool shouldRender = !offscreen;
|
||||
switch (elementConfig->type) {
|
||||
case CLAY__ELEMENT_CONFIG_TYPE_ASPECT:
|
||||
case CLAY__ELEMENT_CONFIG_TYPE_FLOATING:
|
||||
case CLAY__ELEMENT_CONFIG_TYPE_SHARED:
|
||||
case CLAY__ELEMENT_CONFIG_TYPE_BORDER: {
|
||||
|
|
@ -2798,7 +2815,6 @@ void Clay__CalculateFinalLayout(void) {
|
|||
.image = {
|
||||
.backgroundColor = sharedConfig->backgroundColor,
|
||||
.cornerRadius = sharedConfig->cornerRadius,
|
||||
.sourceDimensions = elementConfig->config.imageElementConfig->sourceDimensions,
|
||||
.imageData = elementConfig->config.imageElementConfig->imageData,
|
||||
}
|
||||
};
|
||||
|
|
@ -3584,18 +3600,9 @@ void Clay__RenderDebugView(void) {
|
|||
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 = { .width = CLAY_SIZING_GROW(0, imageConfig->sourceDimensions.width) }}, .image = *imageConfig }) {}
|
||||
CLAY({ .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }}, .image = *imageConfig }) {}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
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 }));
|
||||
}
|
||||
}
|
||||
|
|
@ -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({ .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({ .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({ .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")) } }) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue