diff --git a/README.md b/README.md index a700339..93296c7 100644 --- a/README.md +++ b/README.md @@ -1332,7 +1332,7 @@ Clay_ImageElementConfig imageConfig = (Clay_ImageElementConfig) { .imageData = & // Declare an image element using a reusable config CLAY({ .image = imageConfig }) {} // Declare an image element using an inline config -CLAY({ .image = { .imageData = &profilePicture }, .aspectRatio = 16 / 9 }) {} +CLAY({ .image = { .imageData = &profilePicture }, .aspectRatio = 16.0 / 9.0 }) {} // Rendering example YourImage *imageToRender = renderCommand->elementConfig.imageElementConfig->imageData; ``` @@ -1347,7 +1347,7 @@ Element is subject to [culling](#visibility-culling). Otherwise, a single `Clay_ **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. @@ -1363,11 +1363,11 @@ Clay_AspectRatioElementConfig { **`.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: -`CLAY({ .aspectRatio = 16 / 9 }) {}` +`CLAY({ .aspectRatio = 16.0 / 9.0 }) {}` **Examples** @@ -1426,7 +1426,7 @@ Clay_ImageElementConfig imageConfig = (Clay_ImageElementConfig) { .imageData = & // Declare an image element using a reusable config CLAY({ .image = imageConfig }) {} // Declare an image element using an inline config -CLAY({ .image = { .imageData = &profilePicture }, .aspectRatio = 16 / 9 }) {} +CLAY({ .image = { .imageData = &profilePicture }, .aspectRatio = 16.0 / 9.0 }) {} // Rendering example YourImage *imageToRender = renderCommand->elementConfig.imageElementConfig->imageData; ``` diff --git a/examples/clay-official-website/build/clay/index.html b/examples/clay-official-website/build/clay/index.html index e626e4b..f68b2d1 100644 --- a/examples/clay-official-website/build/clay/index.html +++ b/examples/clay-official-website/build/clay/index.html @@ -97,6 +97,7 @@ {name: 'a', type: 'float' }, ]}; let stringDefinition = { type: 'struct', members: [ + {name: 'isStaticallyAllocated', type: 'uint32_t'}, {name: 'length', type: 'uint32_t' }, {name: 'chars', type: 'uint32_t' }, ]}; @@ -144,7 +145,6 @@ let imageRenderDataDefinition = { type: 'struct', members: [ { name: 'backgroundColor', ...colorDefinition }, { name: 'cornerRadius', ...cornerRadiusDefinition }, - { name: 'sourceDimensions', ...dimensionsDefinition }, { name: 'imageData', type: 'uint32_t' }, ]}; let customRenderDataDefinition = { type: 'struct', members: [ @@ -158,7 +158,7 @@ { name: 'width', ...borderWidthDefinition }, { name: 'padding', type: 'uint16_t'} ]}; - let scrollRenderDataDefinition = { type: 'struct', members: [ + let clipRenderDataDefinition = { type: 'struct', members: [ { name: 'horizontal', type: 'bool' }, { name: 'vertical', type: 'bool' }, ]}; @@ -168,7 +168,7 @@ { name: 'disablePointerEvents', type: 'uint8_t' }, ]}; let renderCommandDefinition = { - name: 'CLay_RenderCommand', + name: 'Clay_RenderCommand', type: 'struct', members: [ { name: 'boundingBox', type: 'struct', members: [ @@ -183,7 +183,7 @@ { name: 'image', ...imageRenderDataDefinition }, { name: 'custom', ...customRenderDataDefinition }, { name: 'border', ...borderRenderDataDefinition }, - { name: 'scroll', ...scrollRenderDataDefinition }, + { name: 'clip', ...clipRenderDataDefinition }, ]}, { name: 'userData', 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 + 4, window.innerHeight, true); instance.exports.Clay_Initialize(arenaAddress, instance.exports.__heap_base.value); - instance.exports.SetScratchMemory(arenaAddress, clayScratchSpaceAddress); + instance.exports.SetScratchMemory(clayScratchSpaceAddress); renderCommandSize = getStructTotalSize(renderCommandDefinition); renderLoop(); } @@ -570,7 +570,7 @@ } case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): { 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); if (configMemory === elementData.previousMemoryConfig) { break; diff --git a/examples/clay-official-website/build/clay/index.wasm b/examples/clay-official-website/build/clay/index.wasm index e57e631..32882f5 100755 Binary files a/examples/clay-official-website/build/clay/index.wasm and b/examples/clay-official-website/build/clay/index.wasm differ diff --git a/examples/clay-official-website/index.html b/examples/clay-official-website/index.html index e626e4b..f68b2d1 100644 --- a/examples/clay-official-website/index.html +++ b/examples/clay-official-website/index.html @@ -97,6 +97,7 @@ {name: 'a', type: 'float' }, ]}; let stringDefinition = { type: 'struct', members: [ + {name: 'isStaticallyAllocated', type: 'uint32_t'}, {name: 'length', type: 'uint32_t' }, {name: 'chars', type: 'uint32_t' }, ]}; @@ -144,7 +145,6 @@ let imageRenderDataDefinition = { type: 'struct', members: [ { name: 'backgroundColor', ...colorDefinition }, { name: 'cornerRadius', ...cornerRadiusDefinition }, - { name: 'sourceDimensions', ...dimensionsDefinition }, { name: 'imageData', type: 'uint32_t' }, ]}; let customRenderDataDefinition = { type: 'struct', members: [ @@ -158,7 +158,7 @@ { name: 'width', ...borderWidthDefinition }, { name: 'padding', type: 'uint16_t'} ]}; - let scrollRenderDataDefinition = { type: 'struct', members: [ + let clipRenderDataDefinition = { type: 'struct', members: [ { name: 'horizontal', type: 'bool' }, { name: 'vertical', type: 'bool' }, ]}; @@ -168,7 +168,7 @@ { name: 'disablePointerEvents', type: 'uint8_t' }, ]}; let renderCommandDefinition = { - name: 'CLay_RenderCommand', + name: 'Clay_RenderCommand', type: 'struct', members: [ { name: 'boundingBox', type: 'struct', members: [ @@ -183,7 +183,7 @@ { name: 'image', ...imageRenderDataDefinition }, { name: 'custom', ...customRenderDataDefinition }, { name: 'border', ...borderRenderDataDefinition }, - { name: 'scroll', ...scrollRenderDataDefinition }, + { name: 'clip', ...clipRenderDataDefinition }, ]}, { name: 'userData', 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 + 4, window.innerHeight, true); instance.exports.Clay_Initialize(arenaAddress, instance.exports.__heap_base.value); - instance.exports.SetScratchMemory(arenaAddress, clayScratchSpaceAddress); + instance.exports.SetScratchMemory(clayScratchSpaceAddress); renderCommandSize = getStructTotalSize(renderCommandDefinition); renderLoop(); } @@ -570,7 +570,7 @@ } case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): { 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); if (configMemory === elementData.previousMemoryConfig) { break; diff --git a/examples/clay-official-website/main.c b/examples/clay-official-website/main.c index 85eb2ad..3064c66 100644 --- a/examples/clay-official-website/main.c +++ b/examples/clay-official-website/main.c @@ -66,7 +66,7 @@ Clay_String* FrameAllocateString(Clay_String string) { void LandingPageBlob(int index, int fontSize, Clay_Color color, Clay_String text, Clay_String imageURL) { CLAY({ .id = CLAY_IDI("HeroBlob", index), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 480) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .border = { .color = color, .width = { 2, 2, 2, 2 }}, .cornerRadius = CLAY_CORNER_RADIUS(10) }) { - CLAY({ .id = CLAY_IDI("CheckImage", index), .layout = { .sizing = { CLAY_SIZING_FIXED(32) } }, .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 })); } } @@ -156,7 +156,7 @@ void DeclarativeSyntaxPageDesktop() { CLAY_TEXT(CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED })); } CLAY({ .id = CLAY_ID("SyntaxPageRightImage"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) { - CLAY({ .id = CLAY_ID("SyntaxPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .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({ .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({ .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")) } }) {} } } }