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

[Renderers/Web] Fix clay official website example struct definitions for web renderers

Browse source
This commit is contained in:
Nic Barker 2025-06-04 10:50:07 +10:00
parent a3003cfa12
commit 80659eda04
5 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -1332,7 +1332,7 @@ Clay_ImageElementConfig imageConfig = (Clay_ImageElementConfig) { .imageData = &
// Declare an image element using a reusable config // Declare an image element using a reusable config
CLAY({ .image = imageConfig }) {} CLAY({ .image = imageConfig }) {}
// Declare an image element using an inline config // Declare an image element using an inline config
CLAY({ .image = { .imageData = &profilePicture }, .aspectRatio = 16 / 9 }) {} CLAY({ .image = { .imageData = &profilePicture }, .aspectRatio = 16.0 / 9.0 }) {}
// Rendering example // Rendering example
YourImage *imageToRender = renderCommand->elementConfig.imageElementConfig->imageData; YourImage *imageToRender = renderCommand->elementConfig.imageElementConfig->imageData;
``` ```
@ -1347,7 +1347,7 @@ Element is subject to [culling](#visibility-culling). Otherwise, a single `Clay_
**Usage** **Usage**
`CLAY({ .aspectRatio = 16 / 9 }) {}` `CLAY({ .aspectRatio = 16.0 / 9.0 }) {}`
**Clay_AspectRatioElementConfig** configures a clay element to enforce a fixed width / height ratio in its final dimensions. Mostly used for image elements, but can also be used for non image elements. **Clay_AspectRatioElementConfig** configures a clay element to enforce a fixed width / height ratio in its final dimensions. Mostly used for image elements, but can also be used for non image elements.
@ -1363,11 +1363,11 @@ Clay_AspectRatioElementConfig {
**`.aspectRatio`** - `float` **`.aspectRatio`** - `float`
`CLAY({ .aspectRatio = { .aspectRatio = 16 / 9 } }) {}` `CLAY({ .aspectRatio = { .aspectRatio = 16.0 / 9.0 } }) {}`
or alternatively, as C will automatically pass the value to the first nested struct field: or alternatively, as C will automatically pass the value to the first nested struct field:
`CLAY({ .aspectRatio = 16 / 9 }) {}` `CLAY({ .aspectRatio = 16.0 / 9.0 }) {}`
**Examples** **Examples**
@ -1426,7 +1426,7 @@ Clay_ImageElementConfig imageConfig = (Clay_ImageElementConfig) { .imageData = &
// Declare an image element using a reusable config // Declare an image element using a reusable config
CLAY({ .image = imageConfig }) {} CLAY({ .image = imageConfig }) {}
// Declare an image element using an inline config // Declare an image element using an inline config
CLAY({ .image = { .imageData = &profilePicture }, .aspectRatio = 16 / 9 }) {} CLAY({ .image = { .imageData = &profilePicture }, .aspectRatio = 16.0 / 9.0 }) {}
// Rendering example // Rendering example
YourImage *imageToRender = renderCommand->elementConfig.imageElementConfig->imageData; YourImage *imageToRender = renderCommand->elementConfig.imageElementConfig->imageData;
``` ```

12
examples/clay-official-website/build/clay/index.html
View file

@ -97,6 +97,7 @@
{name: 'a', type: 'float' }, {name: 'a', type: 'float' },
]}; ]};
let stringDefinition = { type: 'struct', members: [ let stringDefinition = { type: 'struct', members: [
{name: 'isStaticallyAllocated', type: 'uint32_t'},
{name: 'length', type: 'uint32_t' }, {name: 'length', type: 'uint32_t' },
{name: 'chars', type: 'uint32_t' }, {name: 'chars', type: 'uint32_t' },
]}; ]};
@ -144,7 +145,6 @@
let imageRenderDataDefinition = { type: 'struct', members: [ let imageRenderDataDefinition = { type: 'struct', members: [
{ name: 'backgroundColor', ...colorDefinition }, { name: 'backgroundColor', ...colorDefinition },
{ name: 'cornerRadius', ...cornerRadiusDefinition }, { name: 'cornerRadius', ...cornerRadiusDefinition },
{ name: 'sourceDimensions', ...dimensionsDefinition },
{ name: 'imageData', type: 'uint32_t' }, { name: 'imageData', type: 'uint32_t' },
]}; ]};
let customRenderDataDefinition = { type: 'struct', members: [ let customRenderDataDefinition = { type: 'struct', members: [
@ -158,7 +158,7 @@
{ name: 'width', ...borderWidthDefinition }, { name: 'width', ...borderWidthDefinition },
{ name: 'padding', type: 'uint16_t'} { name: 'padding', type: 'uint16_t'}
]}; ]};
let scrollRenderDataDefinition = { type: 'struct', members: [ let clipRenderDataDefinition = { type: 'struct', members: [
{ name: 'horizontal', type: 'bool' }, { name: 'horizontal', type: 'bool' },
{ name: 'vertical', type: 'bool' }, { name: 'vertical', type: 'bool' },
]}; ]};
@ -168,7 +168,7 @@
{ name: 'disablePointerEvents', type: 'uint8_t' }, { name: 'disablePointerEvents', type: 'uint8_t' },
]}; ]};
let renderCommandDefinition = { let renderCommandDefinition = {
name: 'CLay_RenderCommand', name: 'Clay_RenderCommand',
type: 'struct', type: 'struct',
members: [ members: [
{ name: 'boundingBox', type: 'struct', members: [ { name: 'boundingBox', type: 'struct', members: [
@ -183,7 +183,7 @@
{ name: 'image', ...imageRenderDataDefinition }, { name: 'image', ...imageRenderDataDefinition },
{ name: 'custom', ...customRenderDataDefinition }, { name: 'custom', ...customRenderDataDefinition },
{ name: 'border', ...borderRenderDataDefinition }, { name: 'border', ...borderRenderDataDefinition },
{ name: 'scroll', ...scrollRenderDataDefinition }, { name: 'clip', ...clipRenderDataDefinition },
]}, ]},
{ name: 'userData', type: 'uint32_t'}, { name: 'userData', type: 'uint32_t'},
{ name: 'id', type: 'uint32_t' }, { name: 'id', type: 'uint32_t' },
@ -380,7 +380,7 @@
memoryDataView.setFloat32(instance.exports.__heap_base.value, window.innerWidth, true); memoryDataView.setFloat32(instance.exports.__heap_base.value, window.innerWidth, true);
memoryDataView.setFloat32(instance.exports.__heap_base.value + 4, window.innerHeight, true); memoryDataView.setFloat32(instance.exports.__heap_base.value + 4, window.innerHeight, true);
instance.exports.Clay_Initialize(arenaAddress, instance.exports.__heap_base.value); instance.exports.Clay_Initialize(arenaAddress, instance.exports.__heap_base.value);
instance.exports.SetScratchMemory(arenaAddress, clayScratchSpaceAddress); instance.exports.SetScratchMemory(clayScratchSpaceAddress);
renderCommandSize = getStructTotalSize(renderCommandDefinition); renderCommandSize = getStructTotalSize(renderCommandDefinition);
renderLoop(); renderLoop();
} }
@ -570,7 +570,7 @@
} }
case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): { case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): {
scissorStack.push({ nextAllocation: { x: renderCommand.boundingBox.x.value, y: renderCommand.boundingBox.y.value }, element, nextElementIndex: 0 }); scissorStack.push({ nextAllocation: { x: renderCommand.boundingBox.x.value, y: renderCommand.boundingBox.y.value }, element, nextElementIndex: 0 });
let config = renderCommand.renderData.scroll; let config = renderCommand.renderData.clip;
let configMemory = JSON.stringify(config); let configMemory = JSON.stringify(config);
if (configMemory === elementData.previousMemoryConfig) { if (configMemory === elementData.previousMemoryConfig) {
break; break;

BIN
examples/clay-official-website/build/clay/index.wasm
View file

Binary file not shown.

12
examples/clay-official-website/index.html
View file

@ -97,6 +97,7 @@
{name: 'a', type: 'float' }, {name: 'a', type: 'float' },
]}; ]};
let stringDefinition = { type: 'struct', members: [ let stringDefinition = { type: 'struct', members: [
{name: 'isStaticallyAllocated', type: 'uint32_t'},
{name: 'length', type: 'uint32_t' }, {name: 'length', type: 'uint32_t' },
{name: 'chars', type: 'uint32_t' }, {name: 'chars', type: 'uint32_t' },
]}; ]};
@ -144,7 +145,6 @@
let imageRenderDataDefinition = { type: 'struct', members: [ let imageRenderDataDefinition = { type: 'struct', members: [
{ name: 'backgroundColor', ...colorDefinition }, { name: 'backgroundColor', ...colorDefinition },
{ name: 'cornerRadius', ...cornerRadiusDefinition }, { name: 'cornerRadius', ...cornerRadiusDefinition },
{ name: 'sourceDimensions', ...dimensionsDefinition },
{ name: 'imageData', type: 'uint32_t' }, { name: 'imageData', type: 'uint32_t' },
]}; ]};
let customRenderDataDefinition = { type: 'struct', members: [ let customRenderDataDefinition = { type: 'struct', members: [
@ -158,7 +158,7 @@
{ name: 'width', ...borderWidthDefinition }, { name: 'width', ...borderWidthDefinition },
{ name: 'padding', type: 'uint16_t'} { name: 'padding', type: 'uint16_t'}
]}; ]};
let scrollRenderDataDefinition = { type: 'struct', members: [ let clipRenderDataDefinition = { type: 'struct', members: [
{ name: 'horizontal', type: 'bool' }, { name: 'horizontal', type: 'bool' },
{ name: 'vertical', type: 'bool' }, { name: 'vertical', type: 'bool' },
]}; ]};
@ -168,7 +168,7 @@
{ name: 'disablePointerEvents', type: 'uint8_t' }, { name: 'disablePointerEvents', type: 'uint8_t' },
]}; ]};
let renderCommandDefinition = { let renderCommandDefinition = {
name: 'CLay_RenderCommand', name: 'Clay_RenderCommand',
type: 'struct', type: 'struct',
members: [ members: [
{ name: 'boundingBox', type: 'struct', members: [ { name: 'boundingBox', type: 'struct', members: [
@ -183,7 +183,7 @@
{ name: 'image', ...imageRenderDataDefinition }, { name: 'image', ...imageRenderDataDefinition },
{ name: 'custom', ...customRenderDataDefinition }, { name: 'custom', ...customRenderDataDefinition },
{ name: 'border', ...borderRenderDataDefinition }, { name: 'border', ...borderRenderDataDefinition },
{ name: 'scroll', ...scrollRenderDataDefinition }, { name: 'clip', ...clipRenderDataDefinition },
]}, ]},
{ name: 'userData', type: 'uint32_t'}, { name: 'userData', type: 'uint32_t'},
{ name: 'id', type: 'uint32_t' }, { name: 'id', type: 'uint32_t' },
@ -380,7 +380,7 @@
memoryDataView.setFloat32(instance.exports.__heap_base.value, window.innerWidth, true); memoryDataView.setFloat32(instance.exports.__heap_base.value, window.innerWidth, true);
memoryDataView.setFloat32(instance.exports.__heap_base.value + 4, window.innerHeight, true); memoryDataView.setFloat32(instance.exports.__heap_base.value + 4, window.innerHeight, true);
instance.exports.Clay_Initialize(arenaAddress, instance.exports.__heap_base.value); instance.exports.Clay_Initialize(arenaAddress, instance.exports.__heap_base.value);
instance.exports.SetScratchMemory(arenaAddress, clayScratchSpaceAddress); instance.exports.SetScratchMemory(clayScratchSpaceAddress);
renderCommandSize = getStructTotalSize(renderCommandDefinition); renderCommandSize = getStructTotalSize(renderCommandDefinition);
renderLoop(); renderLoop();
} }
@ -570,7 +570,7 @@
} }
case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): { case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): {
scissorStack.push({ nextAllocation: { x: renderCommand.boundingBox.x.value, y: renderCommand.boundingBox.y.value }, element, nextElementIndex: 0 }); scissorStack.push({ nextAllocation: { x: renderCommand.boundingBox.x.value, y: renderCommand.boundingBox.y.value }, element, nextElementIndex: 0 });
let config = renderCommand.renderData.scroll; let config = renderCommand.renderData.clip;
let configMemory = JSON.stringify(config); let configMemory = JSON.stringify(config);
if (configMemory === elementData.previousMemoryConfig) { if (configMemory === elementData.previousMemoryConfig) {
break; break;

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

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