diff --git a/README.md b/README.md index f6058b6..4d10c8f 100644 --- a/README.md +++ b/README.md @@ -990,28 +990,95 @@ typedef struct { Clay_CustomElementConfig custom; Clay_ScrollElementConfig scroll; Clay_BorderElementConfig border; - uintptr_t userData; + void *userData; } Clay_ElementDeclaration; ``` **Fields** -**`.color`** - `Clay_Color` +**`.id`** - `Clay_ElementID` -`.backgroundColor = {120, 120, 120, 255} })` +`CLAY({ .id = CLAY_ID("FileButton") })` -Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout. +Uses [Clay_ElementId](#clay_elementid). Tags the element with an ID that can be later used to query data about the element, and gives it a human readable name in the debug tools. +IDs are typically generated using the [CLAY_ID](#clay_id), [CLAY_IDI](#clay_idi), [CLAY_ID_LOCAL](#clay_id_local) and [CLAY_IDI_LOCAL](#clay_idi_local) macros. + +--- + +**`.layout`** - `Clay_LayoutConfig` + +`CLAY({ .layout = { .padding = { 16, 16, 12, 12 }, .layoutDirection = CLAY_TOP_TO_BOTTOM } })` + +Uses [Clay_LayoutConfig](#clay_layoutconfig). Controls various settings related to _layout_, which can be thought of as "the size and position of this element and its children". + +--- + +**`.backgroundColor`** - `Clay_Color` + +`CLAY({ .backgroundColor = {120, 120, 120, 255} } })` + +Uses [Clay_Color](#clay_color). Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout. --- **`.cornerRadius`** - `float` -`CLAY_RECTANGLE({ .cornerRadius = { .topLeft = 16, .topRight = 16, .bottomLeft = 16, .bottomRight = 16 })` +`CLAY({ .cornerRadius = { .topLeft = 16, .topRight = 16, .bottomLeft = 16, .bottomRight = 16 } })` Defines the radius in pixels for the arc of rectangle corners (`0` is square, `rectangle.width / 2` is circular). Note that the `CLAY_CORNER_RADIUS(radius)` function-like macro is available to provide short hand for setting all four corner radii to the same value. e.g. `CLAY_BORDER({ .cornerRadius = CLAY_CORNER_RADIUS(10) })` +--- + +**`.image`** - `Clay_ImageElementConfig` + +`CLAY({ .image = { .imageData = &myImage, .sourceDimensions = { 640, 480 } } })` + +Uses [Clay_ImageElementConfig](#clay_imageelementconfig). Configures the element as an image element. Causes a render command with type `IMAGE` to be emitted. + +--- + +**`.floating`** - `Clay_FloatingElementConfig` + +`CLAY({ .floating = { .attachTo = CLAY_ATTACH_TO_PARENT } })` + +Uses [Clay_FloatingElementConfig](#clay_floatingelementconfig). Configures the element as an floating element, which allows it to stack "in front" and "on top" of other elements without affecting sibling or parent size or position. + +--- + +**`.custom`** - `Clay_CustomElementConfig` + +`CLAY({ .custom = { .customData = &my3DModel } })` + +Uses [Clay_CustomElementConfig](#clay_customelementconfig). Configures the element as a custom element, which allows you to pass custom data through to the renderer. Causes a render command with type `CUSTOM` to be emitted. + +--- + +**`.scroll`** - `Clay_ScrollElementConfig` + +`CLAY({ .scroll = { .vertical = true } })` + +Uses [Clay_ScrollElementConfig](#clay_scrollelementconfig). Configures the element as a scroll element, which causes child elements to be clipped / masked if they overflow, and together with [Clay_UpdateScrollContainer](#clay_updatescrollcontainers) enables scrolling of child contents. + +--- + +**`.border`** - `Clay_BorderElementConfig` + +`CLAY({ .border = { .width = { .left = 5 }, .color = COLOR_BLUE } })` + +Uses [Clay_BorderElementConfig](#clay_borderelementconfig). Configures the element as a border element, which instructs the renderer to draw coloured border lines along the perimeter of this element's bounding box. Causes a render command with type `BORDER` to be emitted. + +--- + +**`.userData`** - `void *` + +`CLAY({ .userData = &extraData })` + +Transparently passes a pointer through to the corresponding [Clay_RenderCommands](#clay_rendercommand)s generated by this element. + +--- + **Examples** ```C @@ -1657,6 +1724,17 @@ switch (renderCommand->commandType) { Element is subject to [culling](#visibility-culling). Otherwise, a single `Clay_RenderCommand` with `commandType = CLAY_RENDER_COMMAND_TYPE_CUSTOM` will be created. +### Clay_Color + +```C +typedef struct { + float r, g, b, a; +} Clay_Color; +``` + +`Clay_Color` is an RGBA color struct used in Clay's declarations and rendering. By convention the channels are represented as 0-255, but this is left up to the renderer. +Note: when using the debug tools, their internal colors are represented as 0-255. + ### Clay_String ```C