mirror of
https://github.com/nicbarker/clay.git
synced 2025-04-20 05:08:04 +00:00
Update odin bindings and html renderer
This commit is contained in:
Nic Barker
parent
a79b6a9faf
commit
06fd9264ac
@ -1,144 +0,0 @@
|
||||
### Odin Language Bindings
|
||||
|
||||
This directory contains bindings for the [Odin](odin-lang.org) programming language, as well as an example implementation of the [clay website](https://nicbarker.com/clay) in Odin.
|
||||
|
||||
Special thanks to
|
||||
|
||||
- [laytan](https://github.com/laytan)
|
||||
- [Dudejoe870](https://github.com/Dudejoe870)
|
||||
- MrStevns from the Odin Discord server
|
||||
|
||||
If you haven't taken a look at the [full documentation for clay](https://github.com/nicbarker/clay/blob/main/README.md), it's recommended that you take a look there first to familiarise yourself with the general concepts. This README is abbreviated and applies to using clay in Odin specifically.
|
||||
|
||||
The **most notable difference** between the C API and the Odin bindings is the use of if statements to create the scope for declaring child elements. When using the equivalent of the [Element Macros](https://github.com/nicbarker/clay/blob/main/README.md#element-macros):
|
||||
|
||||
```C
|
||||
// C form of element macros
|
||||
CLAY_RECTANGLE(CLAY_ID("SideBar"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW() }, .padding = {16, 16}), CLAY_RECTANGLE_CONFIG(.color = COLOR_LIGHT), {
|
||||
// Child elements here
|
||||
});
|
||||
```
|
||||
|
||||
```Odin
|
||||
// Odin form of element macros
|
||||
if clay.Rectangle(clay.ID("SideBar"), clay.Layout({ layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingFixed(300), height = clay.SizingGrow({}) }, padding = {16, 16} }), clay.RectangleConfig({ color = COLOR_LIGHT })) {
|
||||
// Child elements here
|
||||
}
|
||||
```
|
||||
|
||||
### Quick Start
|
||||
|
||||
1. Download the [clay-odin](https://github.com/nicbarker/clay/tree/main/bindings/odin/clay-odin) directory and copy it into your project.
|
||||
|
||||
```Odin
|
||||
import clay "clay-odin"
|
||||
```
|
||||
|
||||
2. Ask clay for how much static memory it needs using [clay.MinMemorySize()](https://github.com/nicbarker/clay/blob/main/README.md#clay_minmemorysize), create an Arena for it to use with [clay.CreateArenaWithCapacityAndMemory(minMemorySize, memory)](https://github.com/nicbarker/clay/blob/main/README.md#clay_createarenawithcapacityandmemory), and initialize it with [clay.Initialize(arena)](https://github.com/nicbarker/clay/blob/main/README.md#clay_initialize).
|
||||
|
||||
```Odin
|
||||
minMemorySize: u32 = clay.MinMemorySize()
|
||||
memory := make([^]u8, minMemorySize)
|
||||
arena: clay.Arena = clay.CreateArenaWithCapacityAndMemory(minMemorySize, memory)
|
||||
clay.Initialize(arena)
|
||||
```
|
||||
|
||||
3. Provide a `measureText(text, config)` proc "c" with [clay.SetMeasureTextFunction(function)](https://github.com/nicbarker/clay/blob/main/README.md#clay_setmeasuretextfunction) so that clay can measure and wrap text.
|
||||
|
||||
```Odin
|
||||
// Example measure text function
|
||||
measureText :: proc "c" (text: ^clay.String, config: ^clay.TextElementConfig) -> clay.Dimensions {
|
||||
// clay.TextElementConfig contains members such as fontId, fontSize, letterSpacing etc
|
||||
// Note: clay.String->chars is not guaranteed to be null terminated
|
||||
}
|
||||
|
||||
// Tell clay how to measure text
|
||||
clay.SetMeasureTextFunction(measureText)
|
||||
```
|
||||
|
||||
4. **Optional** - Call [clay.SetPointerPosition(pointerPosition)](https://github.com/nicbarker/clay/blob/main/README.md#clay_setpointerposition) if you want to use mouse interactions.
|
||||
|
||||
```Odin
|
||||
// Update internal pointer position for handling mouseover / click / touch events
|
||||
clay.SetPointerPosition(clay.Vector2{ mousePositionX, mousePositionY })
|
||||
```
|
||||
|
||||
5. Call [clay.BeginLayout(screenWidth, screenHeight)](https://github.com/nicbarker/clay/blob/main/README.md#clay_beginlayout) and declare your layout using the provided macros.
|
||||
|
||||
```Odin
|
||||
COLOR_LIGHT :: clay.Color{224, 215, 210, 255}
|
||||
COLOR_RED :: clay.Color{168, 66, 28, 255}
|
||||
COLOR_ORANGE :: clay.Color{225, 138, 50, 255}
|
||||
|
||||
// Layout config is just a struct that can be declared statically, or inline
|
||||
sidebarItemLayout := clay.LayoutConfig {
|
||||
sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(50)},
|
||||
}
|
||||
|
||||
// Re-useable components are just normal functions
|
||||
SidebarItemComponent :: proc(index: u32) {
|
||||
if clay.Rectangle(clay.ID("SidebarBlob", index), &sidebarItemLayout, clay.RectangleConfig({color = COLOR_ORANGE})) {}
|
||||
}
|
||||
|
||||
// An example function to begin the "root" of your layout tree
|
||||
CreateLayout :: proc() -> clay.ClayArray(clay.RenderCommand) {
|
||||
clay.BeginLayout(windowWidth, windowHeight)
|
||||
|
||||
// An example of laying out a UI with a fixed width sidebar and flexible width main content
|
||||
// NOTE: To create a scope for child components, the Odin api uses `if` with components that have children
|
||||
if clay.Rectangle(
|
||||
clay.ID("OuterContainer"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, padding = {16, 16}, childGap = 16}),
|
||||
clay.RectangleConfig({color = {250, 250, 255, 255}}),
|
||||
) {
|
||||
if clay.Rectangle(
|
||||
clay.ID("SideBar"),
|
||||
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingFixed(300), height = clay.SizingGrow({})}, padding = {16, 16}, childGap = 16}),
|
||||
clay.RectangleConfig({color = COLOR_LIGHT}),
|
||||
) {
|
||||
if clay.Rectangle(
|
||||
clay.ID("ProfilePictureOuter"),
|
||||
clay.Layout({sizing = {width = clay.SizingGrow({})}, padding = {16, 16}, childGap = 16, childAlignment = {y = .CENTER}}),
|
||||
clay.RectangleConfig({color = COLOR_RED}),
|
||||
) {
|
||||
if clay.Image(
|
||||
clay.ID("ProfilePicture"),
|
||||
clay.Layout({sizing = {width = clay.SizingFixed(60), height = clay.SizingFixed(60)}}),
|
||||
clay.ImageConfig({imageData = &profilePicture, sourceDimensions = {height = 60, width = 60}}),
|
||||
) {}
|
||||
clay.Text(clay.ID("ProfileTitle"), "Clay - UI Library", clay.TextConfig({fontSize = 24, textColor = {255, 255, 255, 255}}))
|
||||
}
|
||||
|
||||
// Standard Odin code like loops etc work inside components
|
||||
for i in 0..<10 {
|
||||
SidebarItemComponent(i)
|
||||
}
|
||||
}
|
||||
|
||||
if clay.Rectangle(
|
||||
clay.ID("MainContent"),
|
||||
clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingGrow({})}}),
|
||||
clay.RectangleConfig({color = COLOR_LIGHT}),
|
||||
) {}
|
||||
}
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
6. Call [clay.EndLayout(screenWidth, screenHeight)](https://github.com/nicbarker/clay/blob/main/README.md#clay_endlayout) and process the resulting [clay.RenderCommandArray](https://github.com/nicbarker/clay/blob/main/README.md#clay_rendercommandarray) in your choice of renderer.
|
||||
|
||||
```Odin
|
||||
renderCommands: clay.ClayArray(clay.RenderCommand) = clay.EndLayout(windowWidth, windowHeight)
|
||||
|
||||
for i: u32 = 0; i < renderCommands.length; i += 1 {
|
||||
renderCommand := clay.RenderCommandArray_Get(&renderCommands, cast(i32)i)
|
||||
|
||||
switch renderCommand.commandType {
|
||||
case .Rectangle:
|
||||
DrawRectangle(renderCommand.boundingBox, renderCommand.config.rectangleElementConfig.color)
|
||||
// ... Implement handling of other command types
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Please see the [full C documentation for clay](https://github.com/nicbarker/clay/blob/main/README.md) for API details. All public C functions and Macros have Odin binding equivalents, generally of the form `CLAY_RECTANGLE` (C) -> `clay.Rectangle` (Odin)
|
||||
@ -86,12 +86,19 @@ RectangleElementConfig :: struct {
|
||||
cornerRadius: CornerRadius,
|
||||
}
|
||||
|
||||
TextWrapMode :: enum EnumBackingType {
|
||||
Words,
|
||||
Newlines,
|
||||
None,
|
||||
}
|
||||
|
||||
TextElementConfig :: struct {
|
||||
textColor: Color,
|
||||
fontId: u16,
|
||||
fontSize: u16,
|
||||
letterSpacing: u16,
|
||||
lineSpacing: u16,
|
||||
wrapMode: TextWrapMode,
|
||||
}
|
||||
|
||||
ImageElementConfig :: struct {
|
||||
@ -242,14 +249,16 @@ foreign Clay {
|
||||
MinMemorySize :: proc() -> u32 ---
|
||||
CreateArenaWithCapacityAndMemory :: proc(capacity: u32, offset: [^]u8) -> Arena ---
|
||||
SetPointerState :: proc(position: Vector2, pointerDown: bool) ---
|
||||
Initialize :: proc(arena: Arena) ---
|
||||
Initialize :: proc(arena: Arena, layoutDimensions: Dimensions) ---
|
||||
UpdateScrollContainers :: proc(isPointerActive: bool, scrollDelta: Vector2, deltaTime: c.float) ---
|
||||
BeginLayout :: proc(screenWidth: c.int, screenHeight: c.int) ---
|
||||
EndLayout :: proc(screenWidth: c.int, screenHeight: c.int) -> ClayArray(RenderCommand) ---
|
||||
SetLayoutDimensions :: proc(dimensions: Dimensions) ---
|
||||
BeginLayout :: proc() ---
|
||||
EndLayout :: proc() -> ClayArray(RenderCommand) ---
|
||||
PointerOver :: proc(id: ElementId) -> bool ---
|
||||
GetScrollContainerData :: proc(id: ElementId) -> ScrollContainerData ---
|
||||
SetMeasureTextFunction :: proc(measureTextFunction: proc "c" (text: ^String, config: ^TextElementConfig) -> Dimensions) ---
|
||||
RenderCommandArray_Get :: proc(array: ^ClayArray(RenderCommand), index: i32) -> ^RenderCommand ---
|
||||
SetDebugModeEnabled :: proc(enabled: bool) ---
|
||||
}
|
||||
|
||||
@(private, link_prefix = "Clay_", default_calling_convention = "c")
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
bindings/odin/clay-official-website
Executable file
BIN
bindings/odin/clay-official-website
Executable file
Binary file not shown.
@ -15,7 +15,8 @@ checkImage3: raylib.Texture2D = {}
|
||||
checkImage4: raylib.Texture2D = {}
|
||||
checkImage5: raylib.Texture2D = {}
|
||||
|
||||
FONT_ID_TITLE_56 :: 0
|
||||
FONT_ID_BODY_16 :: 0
|
||||
FONT_ID_TITLE_56 :: 9
|
||||
FONT_ID_TITLE_52 :: 1
|
||||
FONT_ID_TITLE_48 :: 2
|
||||
FONT_ID_TITLE_36 :: 3
|
||||
@ -24,7 +25,6 @@ FONT_ID_BODY_36 :: 5
|
||||
FONT_ID_BODY_30 :: 6
|
||||
FONT_ID_BODY_28 :: 7
|
||||
FONT_ID_BODY_24 :: 8
|
||||
FONT_ID_BODY_16 :: 9
|
||||
|
||||
COLOR_LIGHT :: clay.Color{244, 235, 230, 255}
|
||||
COLOR_LIGHT_HOVER :: clay.Color{224, 215, 210, 255}
|
||||
@ -429,7 +429,7 @@ animationLerpValue: f32 = -1.0
|
||||
|
||||
createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
|
||||
mobileScreen := windowWidth < 750
|
||||
clay.BeginLayout(windowWidth, windowHeight)
|
||||
clay.BeginLayout()
|
||||
if clay.Rectangle(
|
||||
clay.ID("OuterContainer"),
|
||||
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {clay.SizingGrow({}), clay.SizingGrow({})}}),
|
||||
@ -494,7 +494,7 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
|
||||
}
|
||||
}
|
||||
}
|
||||
return clay.EndLayout(windowWidth, windowHeight)
|
||||
return clay.EndLayout()
|
||||
}
|
||||
|
||||
loadFont :: proc(fontId: u16, fontSize: u16, path: cstring) {
|
||||
@ -510,7 +510,7 @@ main :: proc() {
|
||||
memory := make([^]u8, minMemorySize)
|
||||
arena: clay.Arena = clay.CreateArenaWithCapacityAndMemory(minMemorySize, memory)
|
||||
clay.SetMeasureTextFunction(measureText)
|
||||
clay.Initialize(arena)
|
||||
clay.Initialize(arena, {cast(f32)raylib.GetScreenWidth(), cast(f32)raylib.GetScreenHeight()})
|
||||
|
||||
raylib.SetConfigFlags({.VSYNC_HINT, .WINDOW_RESIZABLE, .WINDOW_HIGHDPI, .MSAA_4X_HINT})
|
||||
raylib.InitWindow(windowWidth, windowHeight, "Raylib Odin Example")
|
||||
@ -533,6 +533,8 @@ main :: proc() {
|
||||
checkImage4 = raylib.LoadTextureFromImage(raylib.LoadImage("resources/check_4.png"))
|
||||
checkImage5 = raylib.LoadTextureFromImage(raylib.LoadImage("resources/check_5.png"))
|
||||
|
||||
debugModeEnabled: bool = false
|
||||
|
||||
for !raylib.WindowShouldClose() {
|
||||
defer free_all(context.temp_allocator)
|
||||
|
||||
@ -542,8 +544,13 @@ main :: proc() {
|
||||
}
|
||||
windowWidth = raylib.GetScreenWidth()
|
||||
windowHeight = raylib.GetScreenHeight()
|
||||
if (raylib.IsKeyPressed(.D)) {
|
||||
debugModeEnabled = !debugModeEnabled
|
||||
clay.SetDebugModeEnabled(debugModeEnabled)
|
||||
}
|
||||
clay.SetPointerState(transmute(clay.Vector2)raylib.GetMousePosition(), raylib.IsMouseButtonDown(raylib.MouseButton.LEFT))
|
||||
clay.UpdateScrollContainers(false, transmute(clay.Vector2)raylib.GetMouseWheelMoveV(), raylib.GetFrameTime())
|
||||
clay.SetLayoutDimensions({cast(f32)raylib.GetScreenWidth(), cast(f32)raylib.GetScreenHeight()})
|
||||
renderCommands: clay.ClayArray(clay.RenderCommand) = createLayout(animationLerpValue < 0 ? (animationLerpValue + 1) : (1 - animationLerpValue))
|
||||
raylib.BeginDrawing()
|
||||
clayRaylibRender(&renderCommands)
|
||||
|
||||
@ -26,7 +26,7 @@ measureText :: proc "c" (text: ^clay.String, config: ^clay.TextElementConfig) ->
|
||||
textHeight := cast(f32)config.fontSize
|
||||
fontToUse := raylibFonts[config.fontId].font
|
||||
|
||||
for i in 0..<int(text.length) {
|
||||
for i in 0 ..< int(text.length) {
|
||||
if (text.chars[i] == '\n') {
|
||||
maxTextWidth = max(maxTextWidth, lineTextWidth)
|
||||
lineTextWidth = 0
|
||||
@ -49,25 +49,25 @@ measureText :: proc "c" (text: ^clay.String, config: ^clay.TextElementConfig) ->
|
||||
}
|
||||
|
||||
clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), allocator := context.temp_allocator) {
|
||||
for i in 0..<int(renderCommands.length) {
|
||||
for i in 0 ..< int(renderCommands.length) {
|
||||
renderCommand := clay.RenderCommandArray_Get(renderCommands, cast(i32)i)
|
||||
boundingBox := renderCommand.boundingBox
|
||||
switch (renderCommand.commandType) {
|
||||
case clay.RenderCommandType.None:
|
||||
{}
|
||||
case clay.RenderCommandType.Text:
|
||||
// Raylib uses standard C strings so isn't compatible with cheap slices, we need to clone the string to append null terminator
|
||||
text := string(renderCommand.text.chars[:renderCommand.text.length])
|
||||
cloned := strings.clone_to_cstring(text, allocator)
|
||||
fontToUse: raylib.Font = raylibFonts[renderCommand.config.textElementConfig.fontId].font
|
||||
raylib.DrawTextEx(
|
||||
fontToUse,
|
||||
cloned,
|
||||
raylib.Vector2{boundingBox.x, boundingBox.y},
|
||||
cast(f32)renderCommand.config.textElementConfig.fontSize,
|
||||
cast(f32)renderCommand.config.textElementConfig.letterSpacing,
|
||||
clayColorToRaylibColor(renderCommand.config.textElementConfig.textColor),
|
||||
)
|
||||
// Raylib uses standard C strings so isn't compatible with cheap slices, we need to clone the string to append null terminator
|
||||
text := string(renderCommand.text.chars[:renderCommand.text.length])
|
||||
cloned := strings.clone_to_cstring(text, allocator)
|
||||
fontToUse: raylib.Font = raylibFonts[renderCommand.config.textElementConfig.fontId].font
|
||||
raylib.DrawTextEx(
|
||||
fontToUse,
|
||||
cloned,
|
||||
raylib.Vector2{boundingBox.x, boundingBox.y},
|
||||
cast(f32)renderCommand.config.textElementConfig.fontSize,
|
||||
cast(f32)renderCommand.config.textElementConfig.letterSpacing,
|
||||
clayColorToRaylibColor(renderCommand.config.textElementConfig.textColor),
|
||||
)
|
||||
case clay.RenderCommandType.Image:
|
||||
// TODO image handling
|
||||
imageTexture := cast(^raylib.Texture2D)renderCommand.config.imageElementConfig.imageData
|
||||
@ -85,20 +85,9 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
|
||||
config: ^clay.RectangleElementConfig = renderCommand.config.rectangleElementConfig
|
||||
if (config.cornerRadius.topLeft > 0) {
|
||||
radius: f32 = (config.cornerRadius.topLeft * 2) / min(boundingBox.width, boundingBox.height)
|
||||
raylib.DrawRectangleRounded(
|
||||
raylib.Rectangle{boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height},
|
||||
radius,
|
||||
8,
|
||||
clayColorToRaylibColor(config.color),
|
||||
)
|
||||
raylib.DrawRectangleRounded(raylib.Rectangle{boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height}, radius, 8, clayColorToRaylibColor(config.color))
|
||||
} else {
|
||||
raylib.DrawRectangle(
|
||||
cast(i32)boundingBox.x,
|
||||
cast(i32)boundingBox.y,
|
||||
cast(i32)boundingBox.width,
|
||||
cast(i32)boundingBox.height,
|
||||
clayColorToRaylibColor(config.color),
|
||||
)
|
||||
raylib.DrawRectangle(cast(i32)boundingBox.x, cast(i32)boundingBox.y, cast(i32)boundingBox.width, cast(i32)boundingBox.height, clayColorToRaylibColor(config.color))
|
||||
}
|
||||
case clay.RenderCommandType.Border:
|
||||
config := renderCommand.config.borderElementConfig
|
||||
@ -166,10 +155,7 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
|
||||
}
|
||||
if (config.cornerRadius.bottomLeft > 0) {
|
||||
raylib.DrawRing(
|
||||
raylib.Vector2 {
|
||||
math.round(boundingBox.x + config.cornerRadius.bottomLeft),
|
||||
math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomLeft),
|
||||
},
|
||||
raylib.Vector2{math.round(boundingBox.x + config.cornerRadius.bottomLeft), math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomLeft)},
|
||||
math.round(config.cornerRadius.bottomLeft - cast(f32)config.top.width),
|
||||
config.cornerRadius.bottomLeft,
|
||||
90,
|
||||
@ -193,7 +179,7 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al
|
||||
)
|
||||
}
|
||||
case clay.RenderCommandType.Custom:
|
||||
// Implement custom element rendering here
|
||||
// Implement custom element rendering here
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
144
clay.h
144
clay.h
@ -479,12 +479,12 @@ Clay_RectangleElementConfig *Clay__RectangleElementConfigArray_Add(Clay__Rectang
|
||||
|
||||
typedef enum
|
||||
{
|
||||
CLAY_TEXT_WRAP_NONE,
|
||||
CLAY_TEXT_WRAP_NEWLINES,
|
||||
CLAY_TEXT_WRAP_WORDS,
|
||||
CLAY_TEXT_WRAP_NEWLINES,
|
||||
CLAY_TEXT_WRAP_NONE,
|
||||
} Clay_TextElementConfigWrapMode;
|
||||
|
||||
typedef struct __attribute__((__packed__))
|
||||
typedef struct
|
||||
{
|
||||
Clay_Color textColor;
|
||||
uint16_t fontId;
|
||||
@ -650,6 +650,39 @@ Clay_ScrollElementConfig *Clay__ScrollElementConfigArray_Add(Clay__ScrollElement
|
||||
#pragma endregion
|
||||
// __GENERATED__ template
|
||||
|
||||
typedef struct
|
||||
{
|
||||
uint32_t elementIndex;
|
||||
Clay_Dimensions preferredDimensions;
|
||||
} Clay__TextElementData;
|
||||
|
||||
Clay__TextElementData CLAY__TEXT_ELEMENT_DATA_DEFAULT = (Clay__TextElementData) {};
|
||||
|
||||
// __GENERATED__ template array_define,array_get,array_add TYPE=Clay__TextElementData NAME=Clay__TextElementDataArray DEFAULT_VALUE=&CLAY__TEXT_ELEMENT_DATA_DEFAULT
|
||||
#pragma region generated
|
||||
typedef struct
|
||||
{
|
||||
uint32_t capacity;
|
||||
uint32_t length;
|
||||
Clay__TextElementData *internalArray;
|
||||
} Clay__TextElementDataArray;
|
||||
|
||||
Clay__TextElementDataArray Clay__TextElementDataArray_Allocate_Arena(uint32_t capacity, Clay_Arena *arena) {
|
||||
return (Clay__TextElementDataArray){.capacity = capacity, .length = 0, .internalArray = (Clay__TextElementData *)Clay__Array_Allocate_Arena(capacity, sizeof(Clay__TextElementData), CLAY__ALIGNMENT(Clay__TextElementData), arena)};
|
||||
}
|
||||
Clay__TextElementData *Clay__TextElementDataArray_Get(Clay__TextElementDataArray *array, int index) {
|
||||
return Clay__Array_RangeCheck(index, array->length) ? &array->internalArray[index] : &CLAY__TEXT_ELEMENT_DATA_DEFAULT;
|
||||
}
|
||||
Clay__TextElementData *Clay__TextElementDataArray_Add(Clay__TextElementDataArray *array, Clay__TextElementData item) {
|
||||
if (Clay__Array_IncrementCapacityCheck(array->length, array->capacity)) {
|
||||
array->internalArray[array->length++] = item;
|
||||
return &array->internalArray[array->length - 1];
|
||||
}
|
||||
return &CLAY__TEXT_ELEMENT_DATA_DEFAULT;
|
||||
}
|
||||
#pragma endregion
|
||||
// __GENERATED__ template
|
||||
|
||||
typedef struct
|
||||
{
|
||||
uint32_t width;
|
||||
@ -1187,7 +1220,7 @@ Clay_RenderCommandArray Clay__renderCommands;
|
||||
Clay__LayoutElementPointerArray Clay__openLayoutElementStack;
|
||||
Clay__int32_tArray Clay__layoutElementChildren;
|
||||
Clay__int32_tArray Clay__layoutElementChildrenBuffer;
|
||||
Clay__LayoutElementPointerArray Clay__textElementPointers;
|
||||
Clay__TextElementDataArray Clay__textElementData;
|
||||
Clay__LayoutElementPointerArray Clay__imageElementPointers;
|
||||
Clay__LayoutElementPointerArray Clay__layoutElementReusableBuffer;
|
||||
// Configs
|
||||
@ -1555,7 +1588,7 @@ void Clay__OpenTextElement(Clay_ElementId id, Clay_String text, Clay_TextElement
|
||||
internalElement->dimensions.height = textMeasured.height;
|
||||
internalElement->text = text;
|
||||
internalElement->minDimensions = (Clay_Dimensions) { .width = textMeasured.height, .height = textMeasured.height }; // TODO not sure this is the best way to decide min width for text
|
||||
Clay__LayoutElementPointerArray_Add(&Clay__textElementPointers, internalElement);
|
||||
Clay__TextElementDataArray_Add(&Clay__textElementData, (Clay__TextElementData) { .preferredDimensions = textMeasured, .elementIndex = Clay__layoutElements.length - 1});
|
||||
Clay__CloseElement();
|
||||
}
|
||||
|
||||
@ -1596,7 +1629,7 @@ void Clay__InitializeEphemeralMemory(Clay_Arena *arena) {
|
||||
Clay__layoutElementTreeRoots = Clay__LayoutElementTreeRootArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena);
|
||||
Clay__layoutElementChildren = Clay__int32_tArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena);
|
||||
Clay__openLayoutElementStack = Clay__LayoutElementPointerArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena);
|
||||
Clay__textElementPointers = Clay__LayoutElementPointerArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena);
|
||||
Clay__textElementData = Clay__TextElementDataArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena);
|
||||
Clay__imageElementPointers = Clay__LayoutElementPointerArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena);
|
||||
Clay__layoutElementReusableBuffer = Clay__LayoutElementPointerArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena); // TODO convert this to indexes instead of pointers
|
||||
Clay__renderCommands = Clay_RenderCommandArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena);
|
||||
@ -1725,7 +1758,7 @@ void Clay__SizeContainersAlongAxis(bool xAxis) {
|
||||
Clay__int32_tArray_Add(&bfsBuffer, childElementIndex);
|
||||
}
|
||||
|
||||
if (childSizing.type != CLAY__SIZING_TYPE_PERCENT && (childElement->elementType != CLAY__LAYOUT_ELEMENT_TYPE_TEXT || childElement->elementConfig.textElementConfig->wrapMode == CLAY_TEXT_WRAP_WORDS)) {
|
||||
if (childSizing.type != CLAY__SIZING_TYPE_PERCENT && (childElement->elementType != CLAY__LAYOUT_ELEMENT_TYPE_TEXT || (childElement->elementConfig.textElementConfig->wrapMode == CLAY_TEXT_WRAP_WORDS))) {
|
||||
Clay__LayoutElementPointerArray_Add(&resizableContainerBuffer, childElement);
|
||||
}
|
||||
|
||||
@ -1813,33 +1846,44 @@ void Clay__CalculateFinalLayout() {
|
||||
Clay__SizeContainersAlongAxis(true);
|
||||
|
||||
// Wrap text
|
||||
uint32_t originalTextLayoutElementDataLength = Clay__textElementPointers.length;
|
||||
uint32_t originalTextLayoutElementDataLength = Clay__textElementData.length;
|
||||
for (int i = 0; i < originalTextLayoutElementDataLength; ++i) {
|
||||
Clay_LayoutElement *containerElement = *Clay__LayoutElementPointerArray_Get(&Clay__textElementPointers, i);
|
||||
Clay__TextElementData *textElementData = Clay__TextElementDataArray_Get(&Clay__textElementData, i);
|
||||
Clay_LayoutElement *containerElement = Clay_LayoutElementArray_Get(&Clay__layoutElements, (int)textElementData->elementIndex);
|
||||
Clay_String text = containerElement->text;
|
||||
Clay_TextElementConfig *textConfig = containerElement->elementConfig.textElementConfig;
|
||||
// Short circuit all wrap calculations if wrap mode is none
|
||||
if (textConfig->wrapMode == CLAY_TEXT_WRAP_NONE) {
|
||||
continue;
|
||||
}
|
||||
containerElement->elementType = CLAY__LAYOUT_ELEMENT_TYPE_CONTAINER;
|
||||
// Clone the style config to prevent pollution of other elements that share this config
|
||||
containerElement->layoutConfig = Clay__LayoutConfigArray_Add(&Clay__layoutConfigs, *containerElement->layoutConfig);
|
||||
containerElement->layoutConfig->layoutDirection = CLAY_TOP_TO_BOTTOM;
|
||||
containerElement->layoutConfig->childGap = textConfig->lineSpacing;
|
||||
containerElement->children = (Clay__LayoutElementChildren) { // Note: this overwrites the text property
|
||||
.length = 0,
|
||||
.elements = &Clay__layoutElementChildren.internalArray[Clay__layoutElementChildren.length]
|
||||
};
|
||||
// Short circuit all wrap calculations if wrap mode is none
|
||||
if (textConfig->wrapMode == CLAY_TEXT_WRAP_NONE || (containerElement->dimensions.width == textElementData->preferredDimensions.width)) {
|
||||
Clay_LayoutElement *newTextLayoutElement = Clay_LayoutElementArray_Add(&Clay__layoutElements, (Clay_LayoutElement) {
|
||||
.id = Clay__RehashWithNumber(containerElement->id, containerElement->children.length),
|
||||
.elementType = CLAY__LAYOUT_ELEMENT_TYPE_TEXT,
|
||||
.text = text,
|
||||
.layoutConfig = &CLAY_LAYOUT_DEFAULT,
|
||||
.elementConfig.textElementConfig = containerElement->elementConfig.textElementConfig,
|
||||
.dimensions = textElementData->preferredDimensions,
|
||||
});
|
||||
containerElement->children.length++;
|
||||
Clay__int32_tArray_Add(&Clay__layoutElementChildren, (int32_t)Clay__layoutElements.length - 1);
|
||||
continue;
|
||||
}
|
||||
containerElement->dimensions.height = 0;
|
||||
float fontSize = containerElement->elementConfig.textElementConfig->fontSize;
|
||||
int lineStartIndex = 0;
|
||||
int wordStartIndex = 0;
|
||||
int wordEndIndex = 0;
|
||||
containerElement->children = (Clay__LayoutElementChildren) { // Note: this overwrites the text property
|
||||
.length = 0,
|
||||
.elements = &Clay__layoutElementChildren.internalArray[Clay__layoutElementChildren.length]
|
||||
};
|
||||
Clay_Dimensions lineDimensions = (Clay_Dimensions){};
|
||||
float spaceWidth = Clay__MeasureText(&CLAY__SPACECHAR, textConfig).width; // todo may as well cache it somewhere
|
||||
while (wordStartIndex <= text.length) {
|
||||
if (text.chars[wordEndIndex] == ' ' || (text.chars[wordEndIndex] == '\n' && textConfig->wrapMode >= CLAY_TEXT_WRAP_NEWLINES) || wordEndIndex == text.length) {
|
||||
if (text.chars[wordEndIndex] == ' ' || (text.chars[wordEndIndex] == '\n' && textConfig->wrapMode <= CLAY_TEXT_WRAP_NEWLINES) || wordEndIndex == text.length) {
|
||||
Clay_String stringToRender = (Clay_String) { .length = wordEndIndex - lineStartIndex, .chars = text.chars + lineStartIndex };
|
||||
Clay_String wordToMeasure = (Clay_String) { .length = wordEndIndex - wordStartIndex, .chars = text.chars + wordStartIndex };
|
||||
// Clip off trailing spaces and newline characters
|
||||
@ -2303,7 +2347,7 @@ const Clay_Color CLAY__DEBUGVIEW_COLOR_HIGHLIGHT = (Clay_Color) {102, 80, 78, 25
|
||||
const int CLAY__DEBUGVIEW_ROW_HEIGHT = 30;
|
||||
const int CLAY__DEBUGVIEW_OUTER_PADDING = 10;
|
||||
const int CLAY__DEBUGVIEW_INDENT_WIDTH = 16;
|
||||
Clay_TextElementConfig Clay__DebugView_TextNameConfig = (Clay_TextElementConfig) {.fontId = 1, .fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4, .wrapMode = CLAY_TEXT_WRAP_NONE };
|
||||
Clay_TextElementConfig Clay__DebugView_TextNameConfig = (Clay_TextElementConfig) {.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4, .wrapMode = CLAY_TEXT_WRAP_NONE };
|
||||
Clay_LayoutConfig Clay__DebugView_ScrollViewItemLayoutConfig = (Clay_LayoutConfig) {};
|
||||
|
||||
Clay_String Clay__IntToString(int integer) {
|
||||
@ -2312,25 +2356,16 @@ Clay_String Clay__IntToString(int integer) {
|
||||
}
|
||||
char *chars = (char *)(Clay__dynamicStringData.internalArray + Clay__dynamicStringData.length);
|
||||
int length = 0;
|
||||
// Save the copy of the number for sign
|
||||
int sign = integer;
|
||||
|
||||
// If the number is negative, make it positive
|
||||
if (integer < 0)
|
||||
if (integer < 0) {
|
||||
integer = -integer;
|
||||
|
||||
// Extract digits from the number and add them to the
|
||||
// string
|
||||
}
|
||||
while (integer > 0) {
|
||||
|
||||
// Convert integer digit to character and store
|
||||
// it in the str
|
||||
chars[length++] = (char)(integer % 10 + '0');
|
||||
integer /= 10;
|
||||
}
|
||||
|
||||
// If the number was negative, add a minus sign to the
|
||||
// string
|
||||
if (sign < 0) {
|
||||
chars[length++] = '-';
|
||||
}
|
||||
@ -2432,7 +2467,11 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int initialRoots
|
||||
Clay_ElementId outerHash = Clay__Rehash(outerId, currentElement->id);
|
||||
Clay_LayoutElementHashMapItem *currentElementData = Clay__GetHashMapItem(currentElement->id);
|
||||
Clay_BoundingBox currentElementBoundingBox = currentElementData->boundingBox;
|
||||
bool offscreen = currentElementBoundingBox.x > (float)Clay__layoutDimensions.width || currentElementBoundingBox.y > (float)Clay__layoutDimensions.height || currentElementBoundingBox.x + currentElementBoundingBox.width < 0 || currentElementBoundingBox.y + currentElementBoundingBox.height < 0;
|
||||
#ifndef CLAY_DISABLE_CULLING
|
||||
bool offscreen = currentElementBoundingBox.x > (float)Clay__layoutDimensions.width || currentElementBoundingBox.y > (float)Clay__layoutDimensions.height || currentElementBoundingBox.x + currentElementBoundingBox.width < 0 || currentElementBoundingBox.y + currentElementBoundingBox.height < 0;
|
||||
#elif
|
||||
bool offscreen = false;
|
||||
#endif
|
||||
Clay_Color outerColor = {0,0,0,0};
|
||||
if (Clay__debugSelectedElementId == currentElement->id) {
|
||||
layoutData.highlightedElementRowIndex = layoutData.rowCount;
|
||||
@ -2440,26 +2479,28 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int initialRoots
|
||||
CLAY_CONTAINER(outerHash, &Clay__DebugView_ScrollViewItemLayoutConfig, {
|
||||
if (!(currentElement->elementType == CLAY__LAYOUT_ELEMENT_TYPE_TEXT || currentElement->children.length == 0)) {
|
||||
CLAY_BORDER_CONTAINER(Clay__Rehash(collapseIconButton, currentElement->id), CLAY_LAYOUT(.sizing = {CLAY_SIZING_FIXED(16), CLAY_SIZING_FIXED(16)}, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER}), CLAY_BORDER_CONFIG_OUTSIDE_RADIUS(1, CLAY__DEBUGVIEW_COLOR_3, 4), {
|
||||
CLAY_TEXT(Clay__Rehash(collapseIcon, currentElement->id), (currentElementData && currentElementData->debugData->collapsed) ? CLAY_STRING("+") : CLAY_STRING("-"), CLAY_TEXT_CONFIG(.fontId = 1, .fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4));
|
||||
CLAY_TEXT(Clay__Rehash(collapseIcon, currentElement->id), (currentElementData && currentElementData->debugData->collapsed) ? CLAY_STRING("+") : CLAY_STRING("-"), CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4));
|
||||
});
|
||||
} else {
|
||||
CLAY_CONTAINER(Clay__Rehash(collapseIconButton, currentElement->id), CLAY_LAYOUT(.sizing = {CLAY_SIZING_FIXED(16), CLAY_SIZING_FIXED(16)}, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER}), {
|
||||
CLAY_RECTANGLE(Clay__Rehash(collapseIcon, currentElement->id), CLAY_LAYOUT(.sizing = {CLAY_SIZING_FIXED(8), CLAY_SIZING_FIXED(8)}), CLAY_RECTANGLE_CONFIG(.color = CLAY__DEBUGVIEW_COLOR_3, .cornerRadius = 2), {});
|
||||
CLAY_RECTANGLE(Clay__Rehash(collapseIcon, currentElement->id), CLAY_LAYOUT(.sizing = {CLAY_SIZING_FIXED(8), CLAY_SIZING_FIXED(8)}), CLAY_RECTANGLE_CONFIG(.color = CLAY__DEBUGVIEW_COLOR_3, .cornerRadius = CLAY_CORNER_RADIUS(2)), {});
|
||||
});
|
||||
}
|
||||
CLAY_CONTAINER(Clay__Rehash(outerHighlightId, currentElement->id), CLAY_LAYOUT(.padding = {0,4}, .childGap = 12, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER }), {
|
||||
if (currentElementData) {
|
||||
if (currentElementData->debugData->collision) {
|
||||
CLAY_TEXT(Clay__Rehash(elementDuplicateWarning, currentElement->id), CLAY_STRING("(Duplicate ID)"), CLAY_TEXT_CONFIG(.fontSize = 16, .fontId = 1, .textColor = { 177, 147, 8, 255}));
|
||||
CLAY_BORDER_CONTAINER(Clay__Rehash(elementOffscreenBorderId, currentElement->id), CLAY_LAYOUT(.padding = { 8, 2 }), CLAY_BORDER_CONFIG_OUTSIDE_RADIUS(1, ((Clay_Color){177, 147, 8, 255}), 4), {
|
||||
CLAY_TEXT(Clay__Rehash(elementDuplicateWarning, currentElement->id), CLAY_STRING("Duplicate ID"), CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_3));
|
||||
});
|
||||
}
|
||||
|
||||
if (offscreen) {
|
||||
CLAY_BORDER_CONTAINER(Clay__Rehash(elementOffscreenBorderId, currentElement->id), CLAY_LAYOUT(.padding = { 8, 2 }), CLAY_BORDER_CONFIG_OUTSIDE_RADIUS(1, CLAY__DEBUGVIEW_COLOR_3, 4), {
|
||||
CLAY_TEXT(Clay__Rehash(elementDuplicateWarning, currentElement->id), CLAY_STRING("Offscreen"), CLAY_TEXT_CONFIG(.fontSize = 16, .fontId = 1, .textColor = CLAY__DEBUGVIEW_COLOR_3));
|
||||
CLAY_TEXT(Clay__Rehash(elementDuplicateWarning, currentElement->id), CLAY_STRING("Offscreen"), CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_3));
|
||||
});
|
||||
}
|
||||
}
|
||||
CLAY_TEXT(Clay__Rehash(elementNameId, currentElement->id), Clay__layoutElementIdStrings.internalArray[currentElementIndex], offscreen ? CLAY_TEXT_CONFIG(.fontSize = 16, .fontId = 1, .textColor = CLAY__DEBUGVIEW_COLOR_3) : &Clay__DebugView_TextNameConfig);
|
||||
CLAY_TEXT(Clay__Rehash(elementNameId, currentElement->id), Clay__layoutElementIdStrings.internalArray[currentElementIndex], offscreen ? CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_3) : &Clay__DebugView_TextNameConfig);
|
||||
Clay_String elementTypeName = (Clay_String){};
|
||||
Clay_Color elementTypeColor = (Clay_Color){};
|
||||
switch (currentElement->elementType) {
|
||||
@ -2475,8 +2516,8 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int initialRoots
|
||||
Clay_Color backgroundColor = elementTypeColor;
|
||||
backgroundColor.a = 90;
|
||||
CLAY_BORDER_CONTAINER(Clay__Rehash(elementTypeBorderId, currentElement->id), &CLAY_LAYOUT_DEFAULT, CLAY_BORDER_CONFIG_OUTSIDE_RADIUS(1, elementTypeColor, 4), {
|
||||
CLAY_RECTANGLE(Clay__Rehash(elementTypeInnerRectId, currentElement->id), CLAY_LAYOUT(.padding = { 8, 2 }), CLAY_RECTANGLE_CONFIG(.color = backgroundColor, .cornerRadius = 4), {
|
||||
CLAY_TEXT(Clay__Rehash(elementTypeTextId, currentElement->id), elementTypeName, CLAY_TEXT_CONFIG(.fontId = 1, .fontSize = 16, .textColor = offscreen ? CLAY__DEBUGVIEW_COLOR_3 : CLAY__DEBUGVIEW_COLOR_4));
|
||||
CLAY_RECTANGLE(Clay__Rehash(elementTypeInnerRectId, currentElement->id), CLAY_LAYOUT(.padding = { 8, 2 }), CLAY_RECTANGLE_CONFIG(.color = backgroundColor, .cornerRadius = CLAY_CORNER_RADIUS(4)), {
|
||||
CLAY_TEXT(Clay__Rehash(elementTypeTextId, currentElement->id), elementTypeName, CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = offscreen ? CLAY__DEBUGVIEW_COLOR_3 : CLAY__DEBUGVIEW_COLOR_4));
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -2485,7 +2526,7 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int initialRoots
|
||||
// Render the text contents below the element as a non-interactive row
|
||||
if (currentElement->elementType == CLAY__LAYOUT_ELEMENT_TYPE_TEXT) {
|
||||
layoutData.rowCount++;
|
||||
Clay_TextElementConfig *rawTextConfig = offscreen ? CLAY_TEXT_CONFIG(.fontSize = 16, .fontId = 1, .textColor = CLAY__DEBUGVIEW_COLOR_3) : &Clay__DebugView_TextNameConfig;
|
||||
Clay_TextElementConfig *rawTextConfig = offscreen ? CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_3) : &Clay__DebugView_TextNameConfig;
|
||||
CLAY_RECTANGLE(Clay__Rehash(textContentsOuterId, currentElement->id), CLAY_LAYOUT(.sizing = { .height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER }), CLAY_RECTANGLE_CONFIG(), {
|
||||
CLAY_CONTAINER(Clay__Rehash(elementTextSpacer, currentElement->id), CLAY_LAYOUT(.sizing = {CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_INDENT_WIDTH + 16)}), {});
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugView_TextOpenQuote", currentElement->id), CLAY_STRING("\""), rawTextConfig);
|
||||
@ -2521,7 +2562,7 @@ void Clay__RenderDebugLayoutSizing(Clay_ElementId baseId, Clay_SizingAxis sizing
|
||||
} else if (sizing.type == CLAY__SIZING_TYPE_PERCENT) {
|
||||
sizingLabel = CLAY_STRING("PERCENT");
|
||||
}
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoSizingDataInternal", 1), sizingLabel, infoTextConfig);
|
||||
CLAY_TEXT(Clay__Rehash(baseId, 1), sizingLabel, infoTextConfig);
|
||||
if (sizing.type == CLAY__SIZING_TYPE_GROW || sizing.type == CLAY__SIZING_TYPE_FIT) {
|
||||
CLAY_TEXT(Clay__Rehash(baseId, 2), CLAY_STRING("("), infoTextConfig);
|
||||
if (sizing.sizeMinMax.min != 0) {
|
||||
@ -2542,9 +2583,9 @@ void Clay__RenderDebugLayoutSizing(Clay_ElementId baseId, Clay_SizingAxis sizing
|
||||
void Clay__RenderDebugViewElementConfigHeader(Clay_String elementId, Clay_String title) {
|
||||
CLAY_RECTANGLE(CLAY_IDI("Clay__DebugViewPanelBorder", 2), CLAY_LAYOUT(.sizing = {.width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(1)}), CLAY_RECTANGLE_CONFIG(.color = CLAY__DEBUGVIEW_COLOR_3), {});
|
||||
CLAY_CONTAINER(CLAY_ID("Clay__DebugViewElementInfoItemHeader"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING} ), {
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoTitle", 1), title, CLAY_TEXT_CONFIG(.fontId = 1, .fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4, .wrapMode = CLAY_TEXT_WRAP_NONE));
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoTitle", 1), title, CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4, .wrapMode = CLAY_TEXT_WRAP_NONE));
|
||||
CLAY_CONTAINER(CLAY_IDI("Clay__DebugViewElementInfoTitleSpacer", 1), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW() }), {});
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoTitle", 2), elementId, CLAY_TEXT_CONFIG(.fontId = 1, .fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_3, .wrapMode = CLAY_TEXT_WRAP_NONE));
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoTitle", 2), elementId, CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_3, .wrapMode = CLAY_TEXT_WRAP_NONE));
|
||||
});
|
||||
CLAY_RECTANGLE(CLAY_IDI("Clay__DebugViewPanelBorder", 3), CLAY_LAYOUT(.sizing = {.width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(1)}), CLAY_RECTANGLE_CONFIG(.color = CLAY__DEBUGVIEW_COLOR_3), {});
|
||||
}
|
||||
@ -2562,7 +2603,7 @@ void Clay__RenderDebugViewColor(Clay_Color color, Clay_TextElementConfig *textCo
|
||||
CLAY_TEXT(CLAY_ID_AUTO, CLAY_STRING(" }"), textConfig);
|
||||
CLAY_CONTAINER(CLAY_ID_AUTO, CLAY_LAYOUT(.sizing = {CLAY_SIZING_FIXED(10) }), {});
|
||||
CLAY_BORDER_CONTAINER(CLAY_ID_AUTO, CLAY_LAYOUT(.sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)}), CLAY_BORDER_CONFIG_OUTSIDE_RADIUS(1, CLAY__DEBUGVIEW_COLOR_4, 4), {
|
||||
CLAY_RECTANGLE(CLAY_ID_AUTO, CLAY_LAYOUT(.sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)}), CLAY_RECTANGLE_CONFIG(.cornerRadius = 4, .color = color), {});
|
||||
CLAY_RECTANGLE(CLAY_ID_AUTO, CLAY_LAYOUT(.sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)}), CLAY_RECTANGLE_CONFIG(.cornerRadius = CLAY_CORNER_RADIUS(4), .color = color), {});
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -2605,8 +2646,8 @@ void Clay__RenderDebugView() {
|
||||
|
||||
uint32_t initialRootsLength = Clay__layoutElementTreeRoots.length;
|
||||
uint32_t initialElementsLength = Clay__layoutElements.length;
|
||||
Clay_TextElementConfig *infoTextConfig = CLAY_TEXT_CONFIG(.fontId = 1, .fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4, .wrapMode = CLAY_TEXT_WRAP_NONE);
|
||||
Clay_TextElementConfig *infoTitleConfig = CLAY_TEXT_CONFIG(.fontId = 1, .fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_3, .wrapMode = CLAY_TEXT_WRAP_NONE);
|
||||
Clay_TextElementConfig *infoTextConfig = CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4, .wrapMode = CLAY_TEXT_WRAP_NONE);
|
||||
Clay_TextElementConfig *infoTitleConfig = CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_3, .wrapMode = CLAY_TEXT_WRAP_NONE);
|
||||
uint32_t scrollId = CLAY_ID("Clay__DebugViewOuterScrollPane").id;
|
||||
float scrollYOffset = 0;
|
||||
for (int i = 0; i < Clay__scrollContainerDatas.length; ++i) {
|
||||
@ -2621,12 +2662,12 @@ void Clay__RenderDebugView() {
|
||||
CLAY_FLOATING_CONTAINER(CLAY_ID("Clay__DebugView"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_FIXED(Clay__debugViewWidth) , CLAY_SIZING_FIXED(Clay__layoutDimensions.height) }), CLAY_FLOATING_CONFIG(.attachment = { .element = CLAY_ATTACH_POINT_LEFT_CENTER, .parent = CLAY_ATTACH_POINT_RIGHT_CENTER }), {
|
||||
CLAY_RECTANGLE(CLAY_ID("Clay__DebugViewLeftBorder"), CLAY_LAYOUT(.sizing = { .width = CLAY_SIZING_FIXED(1), .height = CLAY_SIZING_GROW() }), CLAY_RECTANGLE_CONFIG(.color = CLAY__DEBUGVIEW_COLOR_3), {});
|
||||
CLAY_CONTAINER(CLAY_ID("Clay__DebugViewInner"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = {CLAY_SIZING_GROW(), CLAY_SIZING_GROW()}), {
|
||||
CLAY_RECTANGLE(CLAY_ID("Clay__DebugViewTopHeaderOuter"), CLAY_LAYOUT(.sizing = {CLAY_SIZING_GROW(), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 1)}, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING}), CLAY_RECTANGLE_CONFIG(.color = CLAY__DEBUGVIEW_COLOR_2), {
|
||||
CLAY_RECTANGLE(CLAY_ID("Clay__DebugViewTopHeaderOuter"), CLAY_LAYOUT(.sizing = {CLAY_SIZING_GROW(), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING}), CLAY_RECTANGLE_CONFIG(.color = CLAY__DEBUGVIEW_COLOR_2), {
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewTopHeaderId", 1), CLAY_STRING("Clay Debug Tools"), infoTextConfig);
|
||||
CLAY_CONTAINER(CLAY_ID("Clay__DebugViewTopHeaderSpacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW() }), {});
|
||||
CLAY_BORDER_CONTAINER(CLAY_ID("Clay__DebugViewTopHeaderCloseButtonOuter"), &CLAY_LAYOUT_DEFAULT, CLAY_BORDER_CONFIG_OUTSIDE_RADIUS(1, ((Clay_Color){217,91,67,255}), 4), {
|
||||
CLAY_RECTANGLE(CLAY_ID("Clay__DebugViewTopHeaderCloseButtonInner"), CLAY_LAYOUT(.sizing = {CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 10), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 10)}, .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER}), CLAY_RECTANGLE_CONFIG(.color = ((Clay_Color){217,91,67,80})), {
|
||||
CLAY_TEXT(CLAY_ID("Clay__DebugViewTopHeaderCloseButtonText"), CLAY_STRING("x"), CLAY_TEXT_CONFIG(.fontId = 1, .fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4));
|
||||
CLAY_TEXT(CLAY_ID("Clay__DebugViewTopHeaderCloseButtonText"), CLAY_STRING("x"), CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4));
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -2697,7 +2738,7 @@ void Clay__RenderDebugView() {
|
||||
Clay__RenderDebugLayoutSizing(CLAY_ID("Clay__DebugViewElementInfoSizingDataWidth"), layoutConfig->sizing.width, infoTextConfig);
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoSizingData", 2), CLAY_STRING(", height: "), infoTextConfig);
|
||||
Clay__RenderDebugLayoutSizing(CLAY_ID("Clay__DebugViewElementInfoSizingDataHeight"), layoutConfig->sizing.height, infoTextConfig);
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoSizingData", 2), CLAY_STRING(" }"), infoTextConfig);
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoSizingData", 3), CLAY_STRING(" }"), infoTextConfig);
|
||||
});
|
||||
// .padding
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoLayoutTitle", 4), CLAY_STRING("Padding"), infoTitleConfig);
|
||||
@ -2712,7 +2753,7 @@ void Clay__RenderDebugView() {
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoLayoutTitle", 5), CLAY_STRING("Child Gap"), infoTitleConfig);
|
||||
CLAY_TEXT(CLAY_ID("Clay__DebugViewElementInfoLayoutChildGap"), Clay__IntToString(layoutConfig->childGap), infoTextConfig);
|
||||
// .childAlignment
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoLayoutTitle", 5), CLAY_STRING("Child Alignment"), infoTitleConfig);
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoLayoutTitle", 6), CLAY_STRING("Child Alignment"), infoTitleConfig);
|
||||
CLAY_CONTAINER(CLAY_ID("Clay__DebugViewElementInfoLayoutAlignment"), CLAY_LAYOUT(), {
|
||||
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoLayoutAlignment", 1), CLAY_STRING("{ x: "), infoTextConfig);
|
||||
Clay_String alignX = CLAY_STRING("LEFT");
|
||||
@ -2877,7 +2918,7 @@ void Clay__RenderDebugView() {
|
||||
});
|
||||
} else {
|
||||
CLAY_SCROLL_CONTAINER(CLAY_ID("Clay__DebugViewWarningsScrollPane"), CLAY_LAYOUT(.sizing = {CLAY_SIZING_GROW(), CLAY_SIZING_FIXED(300)}, .childGap = 6), CLAY_SCROLL_CONFIG(.vertical = true), {
|
||||
Clay_TextElementConfig *warningConfig = CLAY_TEXT_CONFIG(.fontId = 1, .fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4, .wrapMode = CLAY_TEXT_WRAP_NONE);
|
||||
Clay_TextElementConfig *warningConfig = CLAY_TEXT_CONFIG(.fontSize = 16, .textColor = CLAY__DEBUGVIEW_COLOR_4, .wrapMode = CLAY_TEXT_WRAP_NONE);
|
||||
CLAY_RECTANGLE(CLAY_ID("Clay__DebugViewWarningsPane"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = {CLAY_SIZING_GROW(), CLAY_SIZING_GROW()}), CLAY_RECTANGLE_CONFIG(.color = CLAY__DEBUGVIEW_COLOR_2), {
|
||||
CLAY_CONTAINER(CLAY_ID("Clay__DebugViewWarningItemHeader"), CLAY_LAYOUT(.sizing = {.height = CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT)}, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = {CLAY__DEBUGVIEW_OUTER_PADDING}, .childGap = 8), {
|
||||
CLAY_TEXT(CLAY_ID("Clay__DebugViewWarningsTitle"), CLAY_STRING("Warnings"), warningConfig);
|
||||
@ -2981,7 +3022,7 @@ void Clay_SetPointerState(Clay_Vector2 position, bool isPointerDown) {
|
||||
}
|
||||
|
||||
CLAY_WASM_EXPORT("Clay_Initialize")
|
||||
void Clay_Initialize(Clay_Arena arena) {
|
||||
void Clay_Initialize(Clay_Arena arena, Clay_Dimensions layoutDimensions) {
|
||||
Clay__internalArena = arena;
|
||||
Clay__InitializePersistentMemory(&Clay__internalArena);
|
||||
Clay__InitializeEphemeralMemory(&Clay__internalArena);
|
||||
@ -2989,6 +3030,7 @@ void Clay_Initialize(Clay_Arena arena) {
|
||||
Clay__layoutElementsHashMap.internalArray[i] = -1;
|
||||
}
|
||||
Clay__measureTextHashMapInternal.length = 1; // Reserve the 0 value to mean "no next element"
|
||||
Clay__layoutDimensions = layoutDimensions;
|
||||
}
|
||||
|
||||
CLAY_WASM_EXPORT("Clay_UpdateScrollContainers")
|
||||
|
||||
@ -63,14 +63,14 @@
|
||||
const CLAY_RENDER_COMMAND_TYPE_CUSTOM = 7;
|
||||
const GLOBAL_FONT_SCALING_FACTOR = 0.8;
|
||||
let renderCommandSize = 0;
|
||||
let scratchSpaceAddress = 0;
|
||||
let scratchSpaceAddress = 8;
|
||||
let heapSpaceAddress = 0;
|
||||
let memoryDataView;
|
||||
let textDecoder = new TextDecoder("utf-8");
|
||||
let previousFrameTime;
|
||||
let fontsById = [
|
||||
'Calistoga',
|
||||
'Quicksand',
|
||||
'Calistoga',
|
||||
'Quicksand',
|
||||
'Quicksand',
|
||||
'Quicksand',
|
||||
@ -117,6 +117,7 @@
|
||||
{ name: 'fontSize', type: 'uint16_t' },
|
||||
{ name: 'letterSpacing', type: 'uint16_t' },
|
||||
{ name: 'lineSpacing', type: 'uint16_t' },
|
||||
{ name: 'wrapMode', type: 'uint32_t' },
|
||||
{ name: 'disablePointerEvents', type: 'uint8_t' }
|
||||
]};
|
||||
let imageConfigDefinition = { name: 'image', type: 'struct', members: [
|
||||
@ -224,7 +225,7 @@
|
||||
window.arrowKeyUpPressedThisFrame = false;
|
||||
let zeroTimeout = null;
|
||||
addEventListener("wheel", (event) => {
|
||||
window.mouseWheelXThisFrame = event.deltaX * 0.1;
|
||||
window.mouseWheelXThisFrame = event.deltaX * -0.1;
|
||||
window.mouseWheelYThisFrame = event.deltaY * -0.1;
|
||||
clearTimeout(zeroTimeout);
|
||||
zeroTimeout = setTimeout(() => {
|
||||
@ -270,6 +271,11 @@
|
||||
if (event.key === "ArrowUp") {
|
||||
window.arrowKeyUpPressedThisFrame = true;
|
||||
}
|
||||
console.log(event.key);
|
||||
if (event.key === "d") {
|
||||
window.dKeyPressedThisFrame = true;
|
||||
console.log('test');
|
||||
}
|
||||
});
|
||||
|
||||
const importObject = {
|
||||
@ -293,7 +299,9 @@
|
||||
let arenaAddress = scratchSpaceAddress;
|
||||
window.instance = instance;
|
||||
createMainArena(arenaAddress, heapSpaceAddress);
|
||||
instance.exports.Clay_Initialize(arenaAddress);
|
||||
memoryDataView.setFloat32(instance.exports.__heap_base.value, window.innerWidth, true);
|
||||
memoryDataView.setFloat32(instance.exports.__heap_base.value + 4, window.innerHeight, true);
|
||||
instance.exports.Clay_Initialize(arenaAddress, instance.exports.__heap_base.value);
|
||||
renderCommandSize = getStructTotalSize(renderCommandDefinition);
|
||||
renderLoop();
|
||||
}
|
||||
@ -346,7 +354,7 @@
|
||||
let elementData = elementCache[renderCommand.id.value];
|
||||
element = elementData.element;
|
||||
if (Array.prototype.indexOf.call(parentElement.element.children, element) !== parentElement.nextElementIndex) {
|
||||
if (parentElement.nextElementIndex === 0) {
|
||||
if (parentElement.nextElementIndex === 0 || !parentElement.element.childNodes[parentElement.nextElementIndex - 1]) {
|
||||
parentElement.element.insertAdjacentElement('afterbegin', element);
|
||||
} else {
|
||||
parentElement.element.childNodes[parentElement.nextElementIndex - 1].insertAdjacentElement('afterend', element);
|
||||
@ -375,7 +383,8 @@
|
||||
let config = readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition);
|
||||
let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
|
||||
let linkContents = config.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.link.chars.value, config.link.chars.value + config.link.length.value))) : 0;
|
||||
if (linkContents.length > 0 && (window.mouseDownThisFrame || window.touchDown) && instance.exports.Clay_PointerOver(renderCommand.id.value)) {
|
||||
memoryDataView.setUint32(0, renderCommand.id.value, true);
|
||||
if (linkContents.length > 0 && (window.mouseDownThisFrame || window.touchDown) && instance.exports.Clay_PointerOver(0)) {
|
||||
window.location.href = linkContents;
|
||||
}
|
||||
if (!dirty && !MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
|
||||
@ -530,7 +539,8 @@
|
||||
ctx.closePath();
|
||||
// Handle link clicks
|
||||
let linkContents = config.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.link.chars.value, config.link.chars.value + config.link.length.value))) : 0;
|
||||
if (linkContents.length > 0 && (window.mouseDownThisFrame || window.touchDown) && instance.exports.Clay_PointerOver(renderCommand.id.value)) {
|
||||
memoryDataView.setUint32(0, renderCommand.id.value, true);
|
||||
if (linkContents.length > 0 && (window.mouseDownThisFrame || window.touchDown) && instance.exports.Clay_PointerOver(0)) {
|
||||
window.location.href = linkContents;
|
||||
}
|
||||
break;
|
||||
@ -676,7 +686,7 @@
|
||||
const elapsed = currentTime - previousFrameTime;
|
||||
previousFrameTime = currentTime;
|
||||
let activeRendererIndex = memoryDataView.getUint32(instance.exports.ACTIVE_RENDERER_INDEX.value, true);
|
||||
instance.exports.UpdateDrawFrame(scratchSpaceAddress, window.innerWidth, window.innerHeight, window.mouseWheelXThisFrame, window.mouseWheelYThisFrame, window.mousePositionXThisFrame, window.mousePositionYThisFrame, window.touchDown, window.mouseDown, window.arrowKeyDownPressedThisFrame, window.arrowKeyUpPressedThisFrame, elapsed / 1000);
|
||||
instance.exports.UpdateDrawFrame(scratchSpaceAddress, window.innerWidth, window.innerHeight, window.mouseWheelXThisFrame, window.mouseWheelYThisFrame, window.mousePositionXThisFrame, window.mousePositionYThisFrame, window.touchDown, window.mouseDown, window.arrowKeyDownPressedThisFrame, window.arrowKeyUpPressedThisFrame, window.dKeyPressedThisFrame, elapsed / 1000);
|
||||
let rendererChanged = activeRendererIndex !== window.previousActiveRendererIndex;
|
||||
switch (activeRendererIndex) {
|
||||
case 0: {
|
||||
@ -701,6 +711,7 @@
|
||||
window.mouseDownThisFrame = false;
|
||||
window.arrowKeyUpPressedThisFrame = false;
|
||||
window.arrowKeyDownPressedThisFrame = false;
|
||||
window.dKeyPressedThisFrame = false;
|
||||
}
|
||||
init();
|
||||
</script>
|
||||
|
||||
@ -7,9 +7,9 @@ double windowWidth = 1024, windowHeight = 768;
|
||||
float modelPageOneZRotation = 0;
|
||||
int ACTIVE_RENDERER_INDEX = 0;
|
||||
|
||||
const uint32_t FONT_ID_TITLE_56 = 0;
|
||||
const uint32_t FONT_ID_BODY_24 = 1;
|
||||
const uint32_t FONT_ID_BODY_16 = 2;
|
||||
const uint32_t FONT_ID_BODY_16 = 0;
|
||||
const uint32_t FONT_ID_TITLE_56 = 1;
|
||||
const uint32_t FONT_ID_BODY_24 = 2;
|
||||
const uint32_t FONT_ID_BODY_36 = 3;
|
||||
const uint32_t FONT_ID_TITLE_36 = 4;
|
||||
const uint32_t FONT_ID_MONOSPACE_24 = 5;
|
||||
@ -55,7 +55,7 @@ void LandingPageDesktop() {
|
||||
CLAY_BORDER_CONTAINER(CLAY_ID("LandingPage1"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = { 32, 32 }, .childGap = 32), CLAY_BORDER_CONFIG(.left = { 2, COLOR_RED }, .right = { 2, COLOR_RED }), {
|
||||
CLAY_CONTAINER(CLAY_ID("LeftText"), CLAY_LAYOUT(.sizing = { .width = CLAY_SIZING_PERCENT(0.55f) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8), {
|
||||
CLAY_TEXT(CLAY_ID("LeftTextTitle"), CLAY_STRING("Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance."), CLAY_TEXT_CONFIG(.fontSize = 56, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED));
|
||||
CLAY_CONTAINER(CLAY_ID("Spacer"), CLAY_LAYOUT(.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(32) }), {});
|
||||
CLAY_CONTAINER(CLAY_ID("LandingPageSpacer"), CLAY_LAYOUT(.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(32) }), {});
|
||||
CLAY_TEXT(CLAY_ID("LeftTextTagline"), CLAY_STRING("Clay is laying out this webpage right now!"), CLAY_TEXT_CONFIG(.fontSize = 36, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE));
|
||||
});
|
||||
CLAY_CONTAINER(CLAY_ID("HeroImageOuter"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_PERCENT(0.45f) }, .childAlignment = { CLAY_ALIGN_X_CENTER }, .childGap = 16), {
|
||||
@ -73,7 +73,7 @@ void LandingPageMobile() {
|
||||
CLAY_CONTAINER(CLAY_ID("LandingPage1Mobile"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT(.min = windowHeight - 70) }, .childAlignment = {CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER}, .padding = { 16, 32 }, .childGap = 32), {
|
||||
CLAY_CONTAINER(CLAY_ID("LeftText"), CLAY_LAYOUT(.sizing = { .width = CLAY_SIZING_GROW() }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8), {
|
||||
CLAY_TEXT(CLAY_ID("LeftTextTitle"), CLAY_STRING("Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance."), CLAY_TEXT_CONFIG(.fontSize = 48, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED));
|
||||
CLAY_CONTAINER(CLAY_ID("Spacer"), CLAY_LAYOUT(.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(32) }), {});
|
||||
CLAY_CONTAINER(CLAY_ID("LandingPageSpacer"), CLAY_LAYOUT(.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(32) }), {});
|
||||
CLAY_TEXT(CLAY_ID("LeftTextTagline"), CLAY_STRING("Clay is laying out this webpage right now!"), CLAY_TEXT_CONFIG(.fontSize = 32, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE));
|
||||
});
|
||||
CLAY_CONTAINER(CLAY_ID("HeroImageOuter"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_GROW() }, .childAlignment = { CLAY_ALIGN_X_CENTER }, .childGap = 16), {
|
||||
@ -171,7 +171,7 @@ void HighPerformancePageDesktop(float lerpValue) {
|
||||
CLAY_RECTANGLE(CLAY_ID("PerformanceDesktop"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_FIT(.min = windowHeight - 50) }, .childAlignment = {0, CLAY_ALIGN_Y_CENTER}, .padding = {.x = 82, 32}, .childGap = 64), CLAY_RECTANGLE_CONFIG(.color = COLOR_RED), {
|
||||
CLAY_CONTAINER(CLAY_ID("PerformanceLeftText"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8), {
|
||||
CLAY_TEXT(CLAY_ID("PerformanceTextTitle"), CLAY_STRING("High Performance"), CLAY_TEXT_CONFIG(.fontSize = 52, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT));
|
||||
CLAY_CONTAINER(CLAY_ID("SyntaxSpacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 16) }), {});
|
||||
CLAY_CONTAINER(CLAY_ID("PerformanceSpacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 16) }), {});
|
||||
CLAY_TEXT(CLAY_IDI("PerformanceTextSubTitle", 1), CLAY_STRING("Fast enough to recompute your entire UI every frame."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT));
|
||||
CLAY_TEXT(CLAY_IDI("PerformanceTextSubTitle", 2), CLAY_STRING("Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT));
|
||||
CLAY_TEXT(CLAY_IDI("PerformanceTextSubTitle", 3), CLAY_STRING("Simplify animations and reactive UI design by avoiding the standard performance hacks."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT));
|
||||
@ -193,7 +193,7 @@ void HighPerformancePageMobile(float lerpValue) {
|
||||
CLAY_RECTANGLE(CLAY_ID("PerformanceMobile"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_FIT(.min = windowHeight - 50) }, .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER}, .padding = {.x = 16, 32}, .childGap = 32), CLAY_RECTANGLE_CONFIG(.color = COLOR_RED), {
|
||||
CLAY_CONTAINER(CLAY_ID("PerformanceLeftText"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW() }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8), {
|
||||
CLAY_TEXT(CLAY_ID("PerformanceTextTitle"), CLAY_STRING("High Performance"), CLAY_TEXT_CONFIG(.fontSize = 48, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_LIGHT));
|
||||
CLAY_CONTAINER(CLAY_ID("SyntaxSpacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 16) }), {});
|
||||
CLAY_CONTAINER(CLAY_ID("PerformanceSpacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 16) }), {});
|
||||
CLAY_TEXT(CLAY_IDI("PerformanceTextSubTitle", 1), CLAY_STRING("Fast enough to recompute your entire UI every frame."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT));
|
||||
CLAY_TEXT(CLAY_IDI("PerformanceTextSubTitle", 2), CLAY_STRING("Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT));
|
||||
CLAY_TEXT(CLAY_IDI("PerformanceTextSubTitle", 3), CLAY_STRING("Simplify animations and reactive UI design by avoiding the standard performance hacks."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT));
|
||||
@ -211,13 +211,13 @@ void HighPerformancePageMobile(float lerpValue) {
|
||||
});
|
||||
}
|
||||
|
||||
void RendererButtonActive(uint32_t id, int index, Clay_String text) {
|
||||
void RendererButtonActive(Clay_ElementId id, int index, Clay_String text) {
|
||||
CLAY_RECTANGLE(id, CLAY_LAYOUT(.sizing = {CLAY_SIZING_FIXED(300) }, .padding = {16, 16}), CLAY_RECTANGLE_CONFIG(.color = Clay_PointerOver(id) ? COLOR_RED_HOVER : COLOR_RED, .cornerRadius = CLAY_CORNER_RADIUS(10)), {
|
||||
CLAY_TEXT(CLAY_ID("RendererButtonActiveText"), text, CLAY_TEXT_CONFIG(.disablePointerEvents = true, .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT));
|
||||
});
|
||||
}
|
||||
|
||||
void RendererButtonInactive(uint32_t id, int index, Clay_String text) {
|
||||
void RendererButtonInactive(Clay_ElementId id, int index, Clay_String text) {
|
||||
CLAY_BORDER_CONTAINER(id, CLAY_LAYOUT(), CLAY_BORDER_CONFIG_OUTSIDE_RADIUS(2, COLOR_RED, 10), {
|
||||
CLAY_RECTANGLE(CLAY_IDI("RendererButtonInactiveInner", index), CLAY_LAYOUT(.sizing = {CLAY_SIZING_FIXED(300) }, .padding = {16, 16}), CLAY_RECTANGLE_CONFIG(.color = Clay_PointerOver(id) ? COLOR_LIGHT_HOVER : COLOR_LIGHT, .cornerRadius = CLAY_CORNER_RADIUS(10), .cursorPointer = true), {
|
||||
CLAY_TEXT(CLAY_IDI("RendererButtonInactiveText", index), text, CLAY_TEXT_CONFIG(.disablePointerEvents = true, .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED));
|
||||
@ -230,14 +230,14 @@ void RendererPageDesktop() {
|
||||
CLAY_BORDER_CONTAINER(CLAY_ID("RendererPage"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() }, .childAlignment = { 0, CLAY_ALIGN_Y_CENTER }, .padding = { 32, 32 }, .childGap = 32), CLAY_BORDER_CONFIG(.left = { 2, COLOR_RED }, .right = { 2, COLOR_RED }), {
|
||||
CLAY_CONTAINER(CLAY_ID("RendererLeftText"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_PERCENT(0.5) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8), {
|
||||
CLAY_TEXT(CLAY_ID("RendererTextTitle"), CLAY_STRING("Renderer & Platform Agnostic"), CLAY_TEXT_CONFIG(.fontSize = 52, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED));
|
||||
CLAY_CONTAINER(CLAY_ID("Spacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 16) }), {});
|
||||
CLAY_CONTAINER(CLAY_ID("RendererSpacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 16) }), {});
|
||||
CLAY_TEXT(CLAY_IDI("RendererTextSubTitle", 1), CLAY_STRING("Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED));
|
||||
CLAY_TEXT(CLAY_IDI("RendererTextSubTitle", 2), CLAY_STRING("Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED));
|
||||
CLAY_TEXT(CLAY_IDI("RendererTextSubTitle", 3), CLAY_STRING("There's even an HTML renderer - you're looking at it right now!"), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED));
|
||||
});
|
||||
CLAY_CONTAINER(CLAY_ID("RendererRightText"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_PERCENT(0.5) }, .childAlignment = {CLAY_ALIGN_X_CENTER}, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 16), {
|
||||
CLAY_TEXT(CLAY_ID("RendererTextRightTitle"), CLAY_STRING("Try changing renderer!"), CLAY_TEXT_CONFIG(.fontSize = 36, .fontId = FONT_ID_BODY_36, .textColor = COLOR_ORANGE));
|
||||
CLAY_CONTAINER(CLAY_ID("Spacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 32) }), {});
|
||||
CLAY_CONTAINER(CLAY_ID("RendererSpacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 32) }), {});
|
||||
if (ACTIVE_RENDERER_INDEX == 0) {
|
||||
RendererButtonActive(CLAY_IDI("RendererSelectButtonActive", 0), 0, CLAY_STRING("HTML Renderer"));
|
||||
RendererButtonInactive(CLAY_ID("RendererSelectButtonCanvas"), 1, CLAY_STRING("Canvas Renderer"));
|
||||
@ -254,14 +254,14 @@ void RendererPageMobile() {
|
||||
CLAY_RECTANGLE(CLAY_ID("RendererMobile"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_FIT(.min = windowHeight - 50) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER}, .padding = {.x = 16, 32}, .childGap = 32), CLAY_RECTANGLE_CONFIG(.color = COLOR_LIGHT), {
|
||||
CLAY_CONTAINER(CLAY_ID("RendererLeftText"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW() }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8), {
|
||||
CLAY_TEXT(CLAY_ID("RendererTextTitle"), CLAY_STRING("Renderer & Platform Agnostic"), CLAY_TEXT_CONFIG(.fontSize = 48, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED));
|
||||
CLAY_CONTAINER(CLAY_ID("Spacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 16) }), {});
|
||||
CLAY_CONTAINER(CLAY_ID("RendererSpacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 16) }), {});
|
||||
CLAY_TEXT(CLAY_IDI("RendererTextSubTitle", 1), CLAY_STRING("Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED));
|
||||
CLAY_TEXT(CLAY_IDI("RendererTextSubTitle", 2), CLAY_STRING("Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED));
|
||||
CLAY_TEXT(CLAY_IDI("RendererTextSubTitle", 3), CLAY_STRING("There's even an HTML renderer - you're looking at it right now!"), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED));
|
||||
});
|
||||
CLAY_CONTAINER(CLAY_ID("RendererRightText"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW() }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 16), {
|
||||
CLAY_TEXT(CLAY_ID("RendererTextRightTitle"), CLAY_STRING("Try changing renderer!"), CLAY_TEXT_CONFIG(.fontSize = 36, .fontId = FONT_ID_BODY_36, .textColor = COLOR_ORANGE));
|
||||
CLAY_CONTAINER(CLAY_ID("Spacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 32) }), {});
|
||||
CLAY_CONTAINER(CLAY_ID("RendererSpacer"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 32) }), {});
|
||||
if (ACTIVE_RENDERER_INDEX == 0) {
|
||||
RendererButtonActive(CLAY_IDI("RendererSelectButtonActive", 0), 0, CLAY_STRING("HTML Renderer"));
|
||||
RendererButtonInactive(CLAY_ID("RendererSelectButtonCanvas"), 1, CLAY_STRING("Canvas Renderer"));
|
||||
@ -285,7 +285,7 @@ float animationLerpValue = -1.0f;
|
||||
|
||||
Clay_RenderCommandArray CreateLayout(float lerpValue) {
|
||||
bool mobileScreen = windowWidth < 750;
|
||||
Clay_BeginLayout((int)windowWidth, (int)windowHeight);
|
||||
Clay_BeginLayout();
|
||||
CLAY_RECTANGLE(CLAY_ID("OuterContainer"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() }), CLAY_RECTANGLE_CONFIG(.color = COLOR_LIGHT), {
|
||||
CLAY_CONTAINER(CLAY_ID("Header"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_FIXED(50) }, .childAlignment = { 0, CLAY_ALIGN_Y_CENTER }, .childGap = 24, .padding = { 32 }), {
|
||||
CLAY_TEXT(CLAY_ID("Logo"), CLAY_STRING("Clay"), &headerTextConfig);
|
||||
@ -299,7 +299,7 @@ Clay_RenderCommandArray CreateLayout(float lerpValue) {
|
||||
CLAY_TEXT(CLAY_ID("LinkDocsText"), CLAY_STRING("Docs"), CLAY_TEXT_CONFIG(.disablePointerEvents = true, .fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255}));
|
||||
});
|
||||
}
|
||||
uint32_t githubButtonId = CLAY_ID("HeaderButtonGithub");
|
||||
Clay_ElementId githubButtonId = CLAY_ID("HeaderButtonGithub");
|
||||
CLAY_BORDER_CONTAINER(CLAY_ID("LinkGithubOuter"), CLAY_LAYOUT(), CLAY_BORDER_CONFIG_OUTSIDE_RADIUS(2, COLOR_RED, 10), {
|
||||
CLAY_RECTANGLE(githubButtonId, CLAY_LAYOUT(.padding = {16, 6}), CLAY_RECTANGLE_CONFIG(.cornerRadius = CLAY_CORNER_RADIUS(10), .link = CLAY_STRING("https://github.com/nicbarker/clay"), .color = Clay_PointerOver(githubButtonId) ? COLOR_LIGHT_HOVER : COLOR_LIGHT), {
|
||||
CLAY_TEXT(CLAY_ID("LinkGithubText"), CLAY_STRING("Github"), CLAY_TEXT_CONFIG(.disablePointerEvents = true, .fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255}));
|
||||
@ -341,16 +341,19 @@ Clay_RenderCommandArray CreateLayout(float lerpValue) {
|
||||
scrollbarColor = (Clay_Color){225, 138, 50, 160};
|
||||
}
|
||||
float scrollHeight = scrollData.scrollContainerDimensions.height - 12;
|
||||
CLAY_FLOATING_CONTAINER(CLAY_ID("ScrollBar"), &CLAY_LAYOUT_DEFAULT, CLAY_FLOATING_CONFIG(.offset = { .x = -6, .y = -(scrollData.scrollPosition->y / scrollData.contentDimensions.height) * scrollHeight + 6}, .zIndex = 1, .parentId = CLAY_ID("OuterScrollContainer"), .attachment = {.element = CLAY_ATTACH_POINT_RIGHT_TOP, .parent = CLAY_ATTACH_POINT_RIGHT_TOP}), {
|
||||
CLAY_FLOATING_CONTAINER(CLAY_ID("ScrollBar"), &CLAY_LAYOUT_DEFAULT, CLAY_FLOATING_CONFIG(.offset = { .x = -6, .y = -(scrollData.scrollPosition->y / scrollData.contentDimensions.height) * scrollHeight + 6}, .zIndex = 1, .parentId = CLAY_ID("OuterScrollContainer").id, .attachment = {.element = CLAY_ATTACH_POINT_RIGHT_TOP, .parent = CLAY_ATTACH_POINT_RIGHT_TOP}), {
|
||||
CLAY_RECTANGLE(CLAY_ID("ScrollBarButton"), CLAY_LAYOUT(.sizing = {CLAY_SIZING_FIXED(10), CLAY_SIZING_FIXED((scrollHeight / scrollData.contentDimensions.height) * scrollHeight)}), CLAY_RECTANGLE_CONFIG(.cornerRadius = CLAY_CORNER_RADIUS(5), .color = scrollbarColor), {});
|
||||
});
|
||||
}
|
||||
return Clay_EndLayout((int)windowWidth, (int)windowHeight);
|
||||
return Clay_EndLayout();
|
||||
}
|
||||
|
||||
CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(float width, float height, float mouseWheelX, float mouseWheelY, float mousePositionX, float mousePositionY, bool isTouchDown, bool isMouseDown, bool arrowKeyDownPressedThisFrame, bool arrowKeyUpPressedThisFrame, float deltaTime) {
|
||||
bool debugModeEnabled = false;
|
||||
|
||||
CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(float width, float height, float mouseWheelX, float mouseWheelY, float mousePositionX, float mousePositionY, bool isTouchDown, bool isMouseDown, bool arrowKeyDownPressedThisFrame, bool arrowKeyUpPressedThisFrame, bool dKeyPressedThisFrame, float deltaTime) {
|
||||
windowWidth = width;
|
||||
windowHeight = height;
|
||||
Clay_SetLayoutDimensions((Clay_Dimensions) { width, height });
|
||||
if (deltaTime == deltaTime) { // NaN propagation can cause pain here
|
||||
animationLerpValue += deltaTime;
|
||||
if (animationLerpValue > 1) {
|
||||
@ -358,6 +361,11 @@ CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(floa
|
||||
}
|
||||
}
|
||||
|
||||
if (dKeyPressedThisFrame) {
|
||||
debugModeEnabled = !debugModeEnabled;
|
||||
Clay_SetDebugModeEnabled(debugModeEnabled);
|
||||
}
|
||||
|
||||
if (isTouchDown || isMouseDown) {
|
||||
if (Clay_PointerOver(CLAY_ID("RendererSelectButtonHTML"))) {
|
||||
ACTIVE_RENDERER_INDEX = 0;
|
||||
@ -367,7 +375,7 @@ CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(floa
|
||||
}
|
||||
//----------------------------------------------------------------------------------
|
||||
// Handle scroll containers
|
||||
Clay_SetPointerPosition((Clay_Vector2) {mousePositionX, mousePositionY});
|
||||
Clay_SetPointerState((Clay_Vector2) {mousePositionX, mousePositionY}, isMouseDown);
|
||||
|
||||
if (!isMouseDown) {
|
||||
scrollbarData.mouseDown = false;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -102,6 +102,7 @@ static inline Clay_Dimensions Raylib_MeasureText(Clay_String *text, Clay_TextEle
|
||||
|
||||
float textHeight = config->fontSize;
|
||||
Font fontToUse = Raylib_fonts[config->fontId].font;
|
||||
float scaleFactor = config->fontSize/(float)fontToUse.baseSize;
|
||||
|
||||
for (int i = 0; i < text->length; ++i)
|
||||
{
|
||||
@ -117,7 +118,7 @@ static inline Clay_Dimensions Raylib_MeasureText(Clay_String *text, Clay_TextEle
|
||||
|
||||
maxTextWidth = fmax(maxTextWidth, lineTextWidth);
|
||||
|
||||
textSize.width = maxTextWidth / 2;
|
||||
textSize.width = maxTextWidth * scaleFactor;
|
||||
textSize.height = textHeight;
|
||||
|
||||
return textSize;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user