Skip to content

Commit 2f67b61

Browse files
committed
README updates
1 parent 2d6e9af commit 2f67b61

File tree

4 files changed

+86
-45
lines changed

4 files changed

+86
-45
lines changed

README.md

Lines changed: 57 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ The above example, rendered correctly will look something like the following:
139139

140140
In summary, the general order of steps is:
141141

142-
1. [Clay_SetLayoutDimensions(dimensions)](#clay_setdimensions)
142+
1. [Clay_SetLayoutDimensions(dimensions)](#clay_setlayoutdimensions)
143143
2. [Clay_SetPointerState(pointerPosition, isPointerDown)](#clay_setpointerstate)
144144
3. [Clay_UpdateScrollContainers(enableDragScrolling, scrollDelta, deltaTime)](#clay_updatescrollcontainers)
145145
4. [Clay_BeginLayout()](#clay_beginlayout)
@@ -225,7 +225,7 @@ Clay elements can optionally be tagged with a unique identifier using [CLAY_ID()
225225
CLAY(CLAY_ID("OuterContainer"), style) {}
226226
```
227227
228-
Element IDs have two main use cases. Firstly, tagging an element with an ID allows you to query information about the element later, such as its [mouseover state](#clay-pointerover) or dimensions.
228+
Element IDs have two main use cases. Firstly, tagging an element with an ID allows you to query information about the element later, such as its [mouseover state](#clay_pointerover) or dimensions.
229229
230230
Secondly, IDs are visually useful when attempting to read and modify UI code, as well as when using the built-in [debug tools](#debug-tools).
231231
@@ -260,10 +260,10 @@ CLAY(CLAY_RECTANGLE(.color = Clay_Hovered() ? COLOR_BLUE : COLOR_ORANGE)) {
260260
The function `void Clay_OnHover()` allows you to attach a function pointer to the currently open element, which will be called if the mouse / pointer is over the element.
261261
262262
```C
263-
void HandleButtonInteraction(Clay_ElementId elementId, Clay_PointerInfo pointerInfo, intptr_t userData) {
263+
void HandleButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) {
264264
ButtonData *buttonData = (ButtonData *)userData;
265265
// Pointer state allows you to detect mouse down / hold / release
266-
if (pointerInfo.state == CLAY_POINTER_INFO_PRESSED_THIS_FRAME) {
266+
if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
267267
// Do some click handling
268268
NavigateTo(buttonData->link);
269269
}
@@ -516,7 +516,7 @@ Prepares clay to calculate a new layout. Called each frame / layout **before** a
516516

517517
`Clay_RenderCommandArray Clay_EndLayout()`
518518

519-
Ends declaration of element macros and calculates the results of the currrent layout. Renders a [Clay_RenderCommandArray](#clay_rendercommandarrray) containing the results of the layout calculation.
519+
Ends declaration of element macros and calculates the results of the current layout. Renders a [Clay_RenderCommandArray](#clay_rendercommandarray) containing the results of the layout calculation.
520520

521521
### Clay_Hovered
522522

@@ -526,15 +526,15 @@ Called **during** layout declaration, and returns `true` if the pointer position
526526

527527
### Clay_OnHover
528528

529-
`void Clay_OnHover(void (*onHoverFunction)(Clay_ElementId elementId, Clay_PointerInfo pointerInfo, intptr_t userData), intptr_t userData)`
529+
`void Clay_OnHover(void (*onHoverFunction)(Clay_ElementId elementId, Clay_PointerData pointerData, intptr_t userData), intptr_t userData)`
530530

531-
Called **during** layout declaration, this function allows you to attach a function pointer to the currently open element that will be called once per layout if the pointer position previously set with `Clay_SetPointerState` is inside the bounding box of the currently open element. See [Clay_PointerInfo](#clay-pointer-info) for more information on the `pointerInfo` argument.
531+
Called **during** layout declaration, this function allows you to attach a function pointer to the currently open element that will be called once per layout if the pointer position previously set with `Clay_SetPointerState` is inside the bounding box of the currently open element. See [Clay_PointerData](#clay_pointerdata) for more information on the `pointerData` argument.
532532

533533
```C
534-
void HandleButtonInteraction(Clay_ElementId elementId, Clay_PointerInfo pointerInfo, intptr_t userData) {
534+
void HandleButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerData, intptr_t userData) {
535535
ButtonData *buttonData = (ButtonData *)userData;
536536
// Pointer state allows you to detect mouse down / hold / release
537-
if (pointerInfo.state == CLAY_POINTER_INFO_PRESSED_THIS_FRAME) {
537+
if (pointerData.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
538538
// Do some click handling
539539
NavigateTo(buttonData->link);
540540
}
@@ -564,7 +564,7 @@ Returns [Clay_ScrollContainerData](#clay_scrollcontainerdata) for the scroll con
564564
565565
`Clay_ElementId Clay_GetElementId(Clay_String idString)`
566566
567-
Returns a [Clay_ElementId](#clay-elementid) for the provided id string, used for querying element info such as mouseover state, scroll container data, etc.
567+
Returns a [Clay_ElementId](#clay_elementid) for the provided id string, used for querying element info such as mouseover state, scroll container data, etc.
568568
569569
## Element Macros
570570
@@ -762,7 +762,7 @@ CLAY(CLAY_ID("Button"), CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM, .si
762762
763763
**Notes**
764764
765-
**RECTANGLE** configures a clay element to background-fill its bounding box with a color. It uses [Clay_RectangleElementConfig](#clay_rectangleelementconfig) for rectangle specific options.
765+
**RECTANGLE** configures a clay element to background-fill its bounding box with a color. It uses `Clay_RectangleElementConfig` for rectangle specific options.
766766
767767
**Struct API (Pseudocode)**
768768
@@ -1061,7 +1061,7 @@ Element is subject to [culling](#visibility-culling). Otherwise, a single `Clay_
10611061
10621062
**Notes**
10631063
1064-
**SCROLL** configures the element as a scrolling container, enabling masking of children that extend beyond its boundaries. It uses [Clay_ScrollElementConfig](#clay_scrollelementconfig) to configure scroll specific options.
1064+
**SCROLL** configures the element as a scrolling container, enabling masking of children that extend beyond its boundaries. It uses `Clay_ScrollElementConfig` to configure scroll specific options.
10651065
10661066
Note: In order to process scrolling based on pointer position and mouse wheel or touch interactions, you must call `Clay_SetPointerState()` and `Clay_UpdateScrollContainers()` _before_ calling `BeginLayout`.
10671067
@@ -1241,7 +1241,7 @@ Rendering of borders and rounded corners is left up to the user. See the provide
12411241

12421242
Floating containers:
12431243

1244-
- With the [default configuration](#clay_floating_config), attach to the top left corner of their "parent"
1244+
- With the default configuration, attach to the top left corner of their "parent"
12451245
- Don't affect the width and height of their parent
12461246
- Don't affect the positioning of sibling elements
12471247
- Depending on their z-index can appear above or below other elements, partially or completely occluding them
@@ -1438,7 +1438,7 @@ When using `.parentId`, the floating container can be declared anywhere after `B
14381438
14391439
**Notes**
14401440
1441-
**CUSTOM_ELEMENT** uses [Clay_LayoutConfig](#clay_layout) for styling and layout, and allows the user to pass custom data to the renderer.
1441+
**CUSTOM_ELEMENT** allows the user to pass custom data to the renderer.
14421442
14431443
**Struct Definition (Pseudocode)**
14441444
@@ -1522,7 +1522,6 @@ switch (renderCommand->commandType) {
15221522
**Rendering**
15231523

15241524
Element is subject to [culling](#visibility-culling). Otherwise, a single `Clay_RenderCommand` with `commandType = CLAY_RENDER_COMMAND_TYPE_CUSTOM` will be created.
1525-
The user will need to access [Clay_CustomElementConfig](#clay_custom_element_config) to retrieve custom data referenced during layout creation.
15261525

15271526
## Data Structures & Definitions
15281527

@@ -1709,4 +1708,46 @@ Dimensions representing the inner width and height of the content _inside_ the s
17091708

17101709
**`.config`** - `Clay_ScrollElementConfig`
17111710

1712-
The [Clay_ScrollElementConfig](#clay_scroll_config) for the matching scroll container element.
1711+
The [Clay_ScrollElementConfig](#clay_scroll) for the matching scroll container element.
1712+
1713+
### Clay_PointerData
1714+
1715+
```C
1716+
typedef struct
1717+
{
1718+
Clay_Vector2 position;
1719+
Clay_PointerDataInteractionState state;
1720+
} Clay_PointerData;
1721+
```
1722+
1723+
**Fields**
1724+
1725+
**`.position`** - `Clay_Vector2`
1726+
1727+
A Vector2 containing the current x,y coordinates of the mouse pointer, which were originally passed into [Clay_SetPointerState()](#clay_setpointerstate).
1728+
1729+
---
1730+
1731+
**`.state`** - `Clay_PointerDataInteractionState`
1732+
1733+
```C
1734+
typedef enum
1735+
{
1736+
CLAY_POINTER_DATA_PRESSED_THIS_FRAME,
1737+
CLAY_POINTER_DATA_PRESSED,
1738+
CLAY_POINTER_DATA_RELEASED_THIS_FRAME,
1739+
CLAY_POINTER_DATA_RELEASED,
1740+
} Clay_PointerDataInteractionState;
1741+
```
1742+
1743+
An enum value representing the current "state" of the pointer interaction. As an example, consider the case where a user is on a desktop computer, moves the mouse pointer over a button, clicks and holds the left mouse button for a short time, then releases it:
1744+
1745+
- While the mouse pointer is over ("hovering") the button, but no mouse button has been pressed: `CLAY_POINTER_DATA_RELEASED`
1746+
- First frame that the user presses the left mouse button: `CLAY_POINTER_DATA_PRESSED_THIS_FRAME`
1747+
- All subsequent frames where the user is still holding the left mouse button: `CLAY_POINTER_DATA_PRESSED`
1748+
- The single frame where the left mouse button goes from pressed -> released: `CLAY_POINTER_DATA_RELEASED_THIS_FRAME`
1749+
- All subsequent frames while the mouse pointer is still over the button: `CLAY_POINTER_DATA_RELEASED`
1750+
1751+
---
1752+
1753+

clay.h

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -416,17 +416,17 @@ typedef struct
416416

417417
typedef enum
418418
{
419-
CLAY_POINTER_INFO_PRESSED_THIS_FRAME,
420-
CLAY_POINTER_INFO_PRESSED,
421-
CLAY_POINTER_INFO_RELEASED_THIS_FRAME,
422-
CLAY_POINTER_INFO_RELEASED,
423-
} Clay_PointerInfoMouseDownState;
419+
CLAY_POINTER_DATA_PRESSED_THIS_FRAME,
420+
CLAY_POINTER_DATA_PRESSED,
421+
CLAY_POINTER_DATA_RELEASED_THIS_FRAME,
422+
CLAY_POINTER_DATA_RELEASED,
423+
} Clay_PointerDataInteractionState;
424424

425425
typedef struct
426426
{
427427
Clay_Vector2 position;
428-
Clay_PointerInfoMouseDownState state;
429-
} Clay_PointerInfo;
428+
Clay_PointerDataInteractionState state;
429+
} Clay_PointerData;
430430

431431
// Function Forward Declarations ---------------------------------
432432
// Public API functions ---
@@ -440,7 +440,7 @@ void Clay_BeginLayout();
440440
Clay_RenderCommandArray Clay_EndLayout();
441441
Clay_ElementId Clay_GetElementId(Clay_String idString);
442442
bool Clay_Hovered();
443-
void Clay_OnHover(void (*onHoverFunction)(Clay_ElementId elementId, Clay_PointerInfo pointerInfo, intptr_t userData), intptr_t userData);
443+
void Clay_OnHover(void (*onHoverFunction)(Clay_ElementId elementId, Clay_PointerData pointerData, intptr_t userData), intptr_t userData);
444444
Clay_ScrollContainerData Clay_GetScrollContainerData(Clay_ElementId id);
445445
void Clay_SetMeasureTextFunction(Clay_Dimensions (*measureTextFunction)(Clay_String *text, Clay_TextElementConfig *config));
446446
Clay_RenderCommand * Clay_RenderCommandArray_Get(Clay_RenderCommandArray* array, int32_t index);
@@ -1113,7 +1113,7 @@ typedef struct // todo get this struct into a single cache line
11131113
Clay_BoundingBox boundingBox;
11141114
Clay_ElementId elementId;
11151115
Clay_LayoutElement* layoutElement;
1116-
void (*onHoverFunction)(Clay_ElementId elementId, Clay_PointerInfo pointerInfo, intptr_t userData);
1116+
void (*onHoverFunction)(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData);
11171117
intptr_t hoverFunctionUserData;
11181118
int32_t nextIndex;
11191119
uint32_t generation;
@@ -1370,7 +1370,7 @@ Clay_String Clay__WriteStringToCharBuffer(Clay__CharArray *buffer, Clay_String s
13701370
return CLAY__INIT(Clay_String) { .length = string.length, .chars = (const char *)(buffer->internalArray + buffer->length - string.length) };
13711371
}
13721372

1373-
Clay_PointerInfo Clay__pointerInfo = CLAY__INIT(Clay_PointerInfo) { .position = {-1, -1} };
1373+
Clay_PointerData Clay__pointerInfo = CLAY__INIT(Clay_PointerData) { .position = {-1, -1} };
13741374
Clay_Dimensions Clay__layoutDimensions = CLAY__INIT(Clay_Dimensions){};
13751375
Clay_ElementId Clay__dynamicElementIndexBaseHash = CLAY__INIT(Clay_ElementId) { .id = 128476991, .stringId = { .length = 8, .chars = "Auto ID" } };
13761376
uint32_t Clay__dynamicElementIndex = 0;
@@ -2776,7 +2776,7 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
27762776
}
27772777

27782778
if (highlightedRowIndex == layoutData.rowCount) {
2779-
if (Clay__pointerInfo.state == CLAY_POINTER_INFO_PRESSED_THIS_FRAME) {
2779+
if (Clay__pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
27802780
Clay__debugSelectedElementId = currentElement->id;
27812781
}
27822782
highlightedElementId = currentElement->id;
@@ -2872,7 +2872,7 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
28722872
}
28732873
}
28742874

2875-
if (Clay__pointerInfo.state == CLAY_POINTER_INFO_PRESSED_THIS_FRAME) {
2875+
if (Clay__pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
28762876
Clay_ElementId collapseButtonId = Clay__HashString(CLAY_STRING("Clay__DebugView_CollapseElement"), 0, 0);
28772877
if (Clay__pointerInfo.position.x > Clay__layoutDimensions.width - (float)Clay__debugViewWidth && Clay__pointerInfo.position.x < Clay__layoutDimensions.width && Clay__pointerInfo.position.y > 0 && Clay__pointerInfo.position.y < Clay__layoutDimensions.height) {
28782878
for (int i = (int)Clay__pointerOverIds.length - 1; i >= 0; i--) {
@@ -2974,15 +2974,15 @@ void Clay__RenderDebugViewBorder(int index, Clay_Border border, Clay_TextElement
29742974
}
29752975
}
29762976

2977-
void HandleDebugViewCloseButtonInteraction(Clay_ElementId elementId, Clay_PointerInfo pointerInfo, intptr_t userData) {
2978-
if (pointerInfo.state == CLAY_POINTER_INFO_PRESSED_THIS_FRAME) {
2977+
void HandleDebugViewCloseButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) {
2978+
if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
29792979
Clay__debugModeEnabled = false;
29802980
}
29812981
}
29822982

29832983
void Clay__RenderDebugView() {
29842984
Clay_ElementId closeButtonId = Clay__HashString(CLAY_STRING("Clay__DebugViewTopHeaderCloseButtonOuter"), 0, 0);
2985-
if (Clay__pointerInfo.state == CLAY_POINTER_INFO_PRESSED_THIS_FRAME) {
2985+
if (Clay__pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
29862986
for (int i = 0; i < Clay__pointerOverIds.length; ++i) {
29872987
Clay_ElementId *elementId = Clay__ElementIdArray_Get(&Clay__pointerOverIds, i);
29882988
if (elementId->id == closeButtonId.id) {
@@ -3365,16 +3365,16 @@ void Clay_SetPointerState(Clay_Vector2 position, bool isPointerDown) {
33653365
}
33663366

33673367
if (isPointerDown) {
3368-
if (Clay__pointerInfo.state == CLAY_POINTER_INFO_PRESSED_THIS_FRAME) {
3369-
Clay__pointerInfo.state = CLAY_POINTER_INFO_PRESSED;
3370-
} else if (Clay__pointerInfo.state != CLAY_POINTER_INFO_PRESSED) {
3371-
Clay__pointerInfo.state = CLAY_POINTER_INFO_PRESSED_THIS_FRAME;
3368+
if (Clay__pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
3369+
Clay__pointerInfo.state = CLAY_POINTER_DATA_PRESSED;
3370+
} else if (Clay__pointerInfo.state != CLAY_POINTER_DATA_PRESSED) {
3371+
Clay__pointerInfo.state = CLAY_POINTER_DATA_PRESSED_THIS_FRAME;
33723372
}
33733373
} else {
3374-
if (Clay__pointerInfo.state == CLAY_POINTER_INFO_RELEASED_THIS_FRAME) {
3375-
Clay__pointerInfo.state = CLAY_POINTER_INFO_RELEASED;
3376-
} else if (Clay__pointerInfo.state != CLAY_POINTER_INFO_RELEASED) {
3377-
Clay__pointerInfo.state = CLAY_POINTER_INFO_RELEASED_THIS_FRAME;
3374+
if (Clay__pointerInfo.state == CLAY_POINTER_DATA_RELEASED_THIS_FRAME) {
3375+
Clay__pointerInfo.state = CLAY_POINTER_DATA_RELEASED;
3376+
} else if (Clay__pointerInfo.state != CLAY_POINTER_DATA_RELEASED) {
3377+
Clay__pointerInfo.state = CLAY_POINTER_DATA_RELEASED_THIS_FRAME;
33783378
}
33793379
}
33803380
}
@@ -3396,7 +3396,7 @@ void Clay_Initialize(Clay_Arena arena, Clay_Dimensions layoutDimensions) {
33963396

33973397
CLAY_WASM_EXPORT("Clay_UpdateScrollContainers")
33983398
void Clay_UpdateScrollContainers(bool enableDragScrolling, Clay_Vector2 scrollDelta, float deltaTime) {
3399-
bool isPointerActive = enableDragScrolling && (Clay__pointerInfo.state == CLAY_POINTER_INFO_PRESSED || Clay__pointerInfo.state == CLAY_POINTER_INFO_PRESSED_THIS_FRAME);
3399+
bool isPointerActive = enableDragScrolling && (Clay__pointerInfo.state == CLAY_POINTER_DATA_PRESSED || Clay__pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME);
34003400
// Don't apply scroll events to ancestors of the inner element
34013401
int32_t highestPriorityElementIndex = -1;
34023402
Clay__ScrollContainerDataInternal *highestPriorityScrollData = CLAY__NULL;
@@ -3561,7 +3561,7 @@ bool Clay_Hovered() {
35613561
return false;
35623562
}
35633563

3564-
void Clay_OnHover(void (*onHoverFunction)(Clay_ElementId elementId, Clay_PointerInfo pointerInfo, intptr_t userData), intptr_t userData) {
3564+
void Clay_OnHover(void (*onHoverFunction)(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData), intptr_t userData) {
35653565
Clay_LayoutElement *openLayoutElement = Clay__GetOpenLayoutElement();
35663566
if (openLayoutElement->id == 0) {
35673567
Clay__GenerateIdForAnonymousElement(openLayoutElement);

examples/clay-official-website/main.c

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -208,8 +208,8 @@ void HighPerformancePageMobile(float lerpValue) {
208208
}
209209
}
210210

211-
void HandleRendererButtonInteraction(Clay_ElementId elementId, Clay_PointerInfo pointerInfo, intptr_t userData) {
212-
if (pointerInfo.state == CLAY_POINTER_INFO_PRESSED_THIS_FRAME) {
211+
void HandleRendererButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) {
212+
if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
213213
ACTIVE_RENDERER_INDEX = (uint32_t)userData;
214214
}
215215
}

examples/raylib-sidebar-scrolling-container/main.c

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ Texture2D profilePicture;
1313
Clay_String profileText = CLAY_STRING("Profile Page one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen");
1414
Clay_TextElementConfig headerTextConfig = (Clay_TextElementConfig) { .fontId = 1, .fontSize = 16, .textColor = {0,0,0,255} };
1515

16-
void HandleHeaderButtonInteraction(Clay_ElementId elementId, Clay_PointerInfo pointerInfo, intptr_t userData) {
17-
if (pointerInfo.state == CLAY_POINTER_INFO_PRESSED_THIS_FRAME) {
16+
void HandleHeaderButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerData, intptr_t userData) {
17+
if (pointerData.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
1818
// Do some click handling
1919
}
2020
}

0 commit comments

Comments
 (0)