diff --git a/bindings/odin/build-clay-lib.sh b/bindings/odin/build-clay-lib.sh index 770943f..d05badf 100755 --- a/bindings/odin/build-clay-lib.sh +++ b/bindings/odin/build-clay-lib.sh @@ -1,12 +1,12 @@ cp ../../clay.h clay.c; # Intel Mac -clang -c -DCLAY_IMPLEMENTATION -o clay.o -static -target x86_64-apple-darwin clay.c -fPIC && ar r clay-odin/macos/clay.a clay.o; +clang -c -DCLAY_IMPLEMENTATION -o clay.o -ffreestanding -static -target x86_64-apple-darwin clay.c -fPIC && ar r clay-odin/macos/clay.a clay.o; # ARM Mac clang -c -DCLAY_IMPLEMENTATION -g -o clay.o -static clay.c -fPIC && ar r clay-odin/macos-arm64/clay.a clay.o; # x64 Windows -clang -c -DCLAY_IMPLEMENTATION -o clay-odin/windows/clay.lib -target x86_64-pc-windows-msvc -fuse-ld=llvm-lib -static clay.c; +clang -c -DCLAY_IMPLEMENTATION -o clay-odin/windows/clay.lib -ffreestanding -target x86_64-pc-windows-msvc -fuse-ld=llvm-lib -static clay.c; # Linux -clang -c -DCLAY_IMPLEMENTATION -o clay.o -static -target x86_64-unknown-linux-gnu clay.c -fPIC && ar r clay-odin/linux/clay.a clay.o; +clang -c -DCLAY_IMPLEMENTATION -o clay.o -ffreestanding -static -target x86_64-unknown-linux-gnu clay.c -fPIC && ar r clay-odin/linux/clay.a clay.o; # WASM clang -c -DCLAY_IMPLEMENTATION -o clay-odin/wasm/clay.o -target wasm32 -nostdlib -static clay.c; rm clay.o; diff --git a/bindings/odin/clay-odin/clay.odin b/bindings/odin/clay-odin/clay.odin index b84ebe8..a0e615b 100644 --- a/bindings/odin/clay-odin/clay.odin +++ b/bindings/odin/clay-odin/clay.odin @@ -101,7 +101,6 @@ RenderCommandType :: enum EnumBackingType { RectangleElementConfig :: struct { color: Color, - cornerRadius: CornerRadius, } TextWrapMode :: enum EnumBackingType { @@ -135,7 +134,6 @@ BorderElementConfig :: struct { top: BorderData, bottom: BorderData, betweenChildren: BorderData, - cornerRadius: CornerRadius, } ScrollElementConfig :: struct { @@ -143,6 +141,10 @@ ScrollElementConfig :: struct { vertical: bool, } +SharedElementConfig :: struct { + cornerRadius: CornerRadius +} + FloatingAttachPointType :: enum EnumBackingType { LEFT_TOP, LEFT_CENTER, @@ -182,13 +184,18 @@ ElementConfigUnion :: struct #raw_union { borderElementConfig: ^BorderElementConfig, } +TextOrSharedConfig :: struct #raw_union { + text: StringSlice, + sharedConfig: ^SharedElementConfig +} + RenderCommand :: struct { - boundingBox: BoundingBox, - config: ElementConfigUnion, - text: StringSlice, - zIndex: i32, - id: u32, - commandType: RenderCommandType, + boundingBox: BoundingBox, + config: ElementConfigUnion, + textOrSharedConfig: TextOrSharedConfig, + zIndex: i32, + id: u32, + commandType: RenderCommandType, } ScrollContainerData :: struct { @@ -273,10 +280,16 @@ ClayArray :: struct($type: typeid) { internalArray: [^]type, } -TypedConfig :: struct { - type: ElementConfigType, - config: rawptr, - id: ElementId, +ElementDeclaration :: struct { + id: ElementId, + layout: LayoutConfig, + rectangle: RectangleElementConfig, + image: ImageElementConfig, + floating: FloatingElementConfig, + custom: CustomElementConfig, + scroll: ScrollElementConfig, + border: BorderElementConfig, + shared: SharedElementConfig, } ErrorType :: enum { @@ -321,51 +334,27 @@ foreign Clay { @(link_prefix = "Clay_", default_calling_convention = "c", private) foreign Clay { _OpenElement :: proc() --- + _ConfigureOpenElement :: proc(config: ElementDeclaration) --- _CloseElement :: proc() --- - _ElementPostConfiguration :: proc() --- _OpenTextElement :: proc(text: String, textConfig: ^TextElementConfig) --- - _AttachId :: proc(id: ElementId) --- - _AttachLayoutConfig :: proc(layoutConfig: ^LayoutConfig) --- - _AttachElementConfig :: proc(config: rawptr, type: ElementConfigType) --- - _StoreLayoutConfig :: proc(config: LayoutConfig) -> ^LayoutConfig --- - _StoreRectangleElementConfig :: proc(config: RectangleElementConfig) -> ^RectangleElementConfig --- _StoreTextElementConfig :: proc(config: TextElementConfig) -> ^TextElementConfig --- - _StoreImageElementConfig :: proc(config: ImageElementConfig) -> ^ImageElementConfig --- - _StoreFloatingElementConfig :: proc(config: FloatingElementConfig) -> ^FloatingElementConfig --- - _StoreCustomElementConfig :: proc(config: CustomElementConfig) -> ^CustomElementConfig --- - _StoreScrollElementConfig :: proc(config: ScrollElementConfig) -> ^ScrollElementConfig --- - _StoreBorderElementConfig :: proc(config: BorderElementConfig) -> ^BorderElementConfig --- _HashString :: proc(toHash: String, index: u32, seed: u32) -> ElementId --- _GetOpenLayoutElementId :: proc() -> u32 --- } -@(require_results, deferred_none = _CloseElement) -UI :: proc(configs: ..TypedConfig) -> bool { - _OpenElement() - for config in configs { - #partial switch (config.type) { - case ElementConfigType.Id: - _AttachId(config.id) - case ElementConfigType.Layout: - _AttachLayoutConfig(cast(^LayoutConfig)config.config) - case: - _AttachElementConfig(config.config, config.type) - } - } - _ElementPostConfiguration() - return true +ClayOpenElement :: struct { + configure: proc (config: ElementDeclaration) -> bool } -Layout :: proc(config: LayoutConfig) -> TypedConfig { - return {type = ElementConfigType.Layout, config = _StoreLayoutConfig(config) } +ConfigureOpenElement :: proc(config: ElementDeclaration) -> bool { + _ConfigureOpenElement(config) + return true; } -PaddingAll :: proc (padding: u16) -> Padding { - return { padding, padding, padding, padding } -} - -Rectangle :: proc(config: RectangleElementConfig) -> TypedConfig { - return {type = ElementConfigType.Rectangle, config = _StoreRectangleElementConfig(config)} +@(deferred_none = _CloseElement) +UI :: proc() -> ClayOpenElement { + _OpenElement() + return { configure = ConfigureOpenElement } } Text :: proc(text: string, config: ^TextElementConfig) { @@ -376,44 +365,16 @@ TextConfig :: proc(config: TextElementConfig) -> ^TextElementConfig { return _StoreTextElementConfig(config) } -Image :: proc(config: ImageElementConfig) -> TypedConfig { - return {type = ElementConfigType.Image, config = _StoreImageElementConfig(config)} -} - -Floating :: proc(config: FloatingElementConfig) -> TypedConfig { - return {type = ElementConfigType.Floating, config = _StoreFloatingElementConfig(config)} -} - -Custom :: proc(config: CustomElementConfig) -> TypedConfig { - return {type = ElementConfigType.Custom, config = _StoreCustomElementConfig(config)} -} - -Scroll :: proc(config: ScrollElementConfig) -> TypedConfig { - return {type = ElementConfigType.Scroll, config = _StoreScrollElementConfig(config)} -} - -Border :: proc(config: BorderElementConfig) -> TypedConfig { - return {type = ElementConfigType.Border, config = _StoreBorderElementConfig(config)} -} - -BorderOutside :: proc(outsideBorders: BorderData) -> TypedConfig { - return { type = ElementConfigType.Border, config = _StoreBorderElementConfig((BorderElementConfig){left = outsideBorders, right = outsideBorders, top = outsideBorders, bottom = outsideBorders}) } -} - -BorderOutsideRadius :: proc(outsideBorders: BorderData, radius: f32) -> TypedConfig { - return { type = ElementConfigType.Border, config = _StoreBorderElementConfig( - (BorderElementConfig){left = outsideBorders, right = outsideBorders, top = outsideBorders, bottom = outsideBorders, cornerRadius = {radius, radius, radius, radius}}, - ) } +PaddingAll :: proc(allPadding: u16) -> Padding { + return { left = allPadding, right = allPadding, top = allPadding, bottom = allPadding } } -BorderAll :: proc(allBorders: BorderData) -> TypedConfig { - return { type = ElementConfigType.Border, config = _StoreBorderElementConfig((BorderElementConfig){left = allBorders, right = allBorders, top = allBorders, bottom = allBorders, betweenChildren = allBorders}) } +BorderOutside :: proc(outsideBorders: BorderData) -> BorderElementConfig { + return { left = outsideBorders, right = outsideBorders, top = outsideBorders, bottom = outsideBorders } } -BorderAllRadius :: proc(allBorders: BorderData, radius: f32) -> TypedConfig { - return { type = ElementConfigType.Border, config = _StoreBorderElementConfig( - (BorderElementConfig){left = allBorders, right = allBorders, top = allBorders, bottom = allBorders, cornerRadius = {radius, radius, radius, radius}}, - ) } +BorderAll :: proc(allBorders: BorderData) -> BorderElementConfig { + return { left = allBorders, right = allBorders, top = allBorders, bottom = allBorders, betweenChildren = allBorders } } CornerRadiusAll :: proc(radius: f32) -> CornerRadius { @@ -440,6 +401,6 @@ MakeString :: proc(label: string) -> String { return String{chars = raw_data(label), length = cast(c.int)len(label)} } -ID :: proc(label: string, index: u32 = 0) -> TypedConfig { - return { type = ElementConfigType.Id, id = _HashString(MakeString(label), index, 0) } +ID :: proc(label: string, index: u32 = 0) -> ElementId { + return _HashString(MakeString(label), index, 0) } diff --git a/bindings/odin/clay-odin/linux/clay.a b/bindings/odin/clay-odin/linux/clay.a index 79b1ae3..919fcda 100644 Binary files a/bindings/odin/clay-odin/linux/clay.a and b/bindings/odin/clay-odin/linux/clay.a differ diff --git a/bindings/odin/clay-odin/macos-arm64/clay.a b/bindings/odin/clay-odin/macos-arm64/clay.a index 08b256d..0d9aa7c 100644 Binary files a/bindings/odin/clay-odin/macos-arm64/clay.a and b/bindings/odin/clay-odin/macos-arm64/clay.a differ diff --git a/bindings/odin/clay-odin/macos/clay.a b/bindings/odin/clay-odin/macos/clay.a index d7a4750..bedd6ef 100644 Binary files a/bindings/odin/clay-odin/macos/clay.a and b/bindings/odin/clay-odin/macos/clay.a differ diff --git a/bindings/odin/clay-odin/wasm/clay.o b/bindings/odin/clay-odin/wasm/clay.o index fbbf500..359aecf 100644 Binary files a/bindings/odin/clay-odin/wasm/clay.o and b/bindings/odin/clay-odin/wasm/clay.o differ diff --git a/bindings/odin/clay-odin/windows/clay.lib b/bindings/odin/clay-odin/windows/clay.lib index a6c2484..a1ef087 100644 Binary files a/bindings/odin/clay-odin/windows/clay.lib and b/bindings/odin/clay-odin/windows/clay.lib differ diff --git a/bindings/odin/examples/clay-official-website/clay-official-website.odin b/bindings/odin/examples/clay-official-website/clay-official-website.odin index 7dcd1eb..c39eaef 100644 --- a/bindings/odin/examples/clay-official-website/clay-official-website.odin +++ b/bindings/odin/examples/clay-official-website/clay-official-website.odin @@ -58,45 +58,46 @@ headerTextConfig := clay.TextElementConfig { } LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Color, text: string, image: ^raylib.Texture2D) { - if clay.UI( - clay.ID("HeroBlob", index), - clay.Layout({sizing = {width = clay.SizingGrow({max = 480})}, padding = clay.PaddingAll(16), childGap = 16, childAlignment = clay.ChildAlignment{y = .CENTER}}), - clay.BorderOutsideRadius({2, color}, 10), - ) { - if clay.UI( - clay.ID("CheckImage", index), - clay.Layout({sizing = {width = clay.SizingFixed(32)}}), - clay.Image({imageData = image, sourceDimensions = {128, 128}}), - ) {} + if clay.UI().configure({ + id = clay.ID("HeroBlob", index), + layout = { sizing = { width = clay.SizingGrow({ max = 480 }) }, padding = clay.PaddingAll(16), childGap = 16, childAlignment = clay.ChildAlignment{ y = .CENTER } }, + border = clay.BorderOutside({ 2, color }), + shared = { cornerRadius = clay.CornerRadiusAll(10) } + }) { + if clay.UI().configure({ + id = clay.ID("CheckImage", index), + layout = { sizing = { width = clay.SizingFixed(32) } }, + image = { imageData = image, sourceDimensions = { 128, 128 } }, + }) {} clay.Text(text, clay.TextConfig({fontSize = fontSize, fontId = fontId, textColor = color})) } } LandingPageDesktop :: proc() { - if clay.UI( - clay.ID("LandingPage1Desktop"), - clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFit({min = cast(f32)windowHeight - 70})}, childAlignment = {y = .CENTER}, padding = {left = 50, right = 50}}), - ) { - if clay.UI( - clay.ID("LandingPage1"), - clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = clay.PaddingAll(32), childGap = 32}), - clay.Border({left = {2, COLOR_RED}, right = {2, COLOR_RED}}), - ) { - if clay.UI(clay.ID("LeftText"), clay.Layout({sizing = {width = clay.SizingPercent(0.55)}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) { + if clay.UI().configure({ + id = clay.ID("LandingPage1Desktop"), + layout = { sizing = { width = clay.SizingGrow({ }), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, childAlignment = { y = .CENTER }, padding = { left = 50, right = 50 } }, + }) { + if clay.UI().configure({ + id = clay.ID("LandingPage1"), + layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(32), childGap = 32 }, + border = { left = { 2, COLOR_RED }, right = { 2, COLOR_RED } }, + }) { + if clay.UI().configure({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingPercent(0.55) }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) { clay.Text( "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.", clay.TextConfig({fontSize = 56, fontId = FONT_ID_TITLE_56, textColor = COLOR_RED}), ) -// if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {} +// if clay.UI().configure(layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {} clay.Text( "Clay is laying out this webpage right now!", clay.TextConfig({fontSize = 36, fontId = FONT_ID_TITLE_36, textColor = COLOR_ORANGE}), ) } - if clay.UI( - clay.ID("HeroImageOuter"), - clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingPercent(0.45)}, childAlignment = {x = .CENTER}, childGap = 16}), - ) { + if clay.UI().configure({ + id = clay.ID("HeroImageOuter"), + layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingPercent(0.45) }, childAlignment = { x = .CENTER }, childGap = 16 }, + }) { LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, "High performance", &checkImage5) LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, "Flexbox-style responsive layout", &checkImage4) LandingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, "Declarative syntax", &checkImage3) @@ -108,33 +109,31 @@ LandingPageDesktop :: proc() { } LandingPageMobile :: proc() { - if clay.UI( - clay.ID("LandingPage1Mobile"), - clay.Layout( - { - layoutDirection = .TOP_TO_BOTTOM, - sizing = {width = clay.SizingGrow({}), height = clay.SizingFit({min = cast(f32)windowHeight - 70})}, - childAlignment = {x = .CENTER, y = .CENTER}, - padding = {16, 16, 32, 32}, - childGap = 32, - }, - ), - ) { - if clay.UI(clay.ID("LeftText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) { + if clay.UI().configure({ + id = clay.ID("LandingPage1Mobile"), + layout = { + layoutDirection = .TOP_TO_BOTTOM, + sizing = { width = clay.SizingGrow({ }), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, + childAlignment = { x = .CENTER, y = .CENTER }, + padding = { 16, 16, 32, 32 }, + childGap = 32, + }, + }) { + if clay.UI().configure({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingGrow({ }) }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) { clay.Text( "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.", clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}), ) - if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {} + if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({}), height = clay.SizingFixed(32) } } }) {} clay.Text( "Clay is laying out this webpage right now!", clay.TextConfig({fontSize = 32, fontId = FONT_ID_TITLE_32, textColor = COLOR_ORANGE}), ) } - if clay.UI( - clay.ID("HeroImageOuter"), - clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingGrow({})}, childAlignment = {x = .CENTER}, childGap = 16}), - ) { + if clay.UI().configure({ + id = clay.ID("HeroImageOuter"), + layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingGrow({ }) }, childAlignment = { x = .CENTER }, childGap = 16 }, + }) { LandingPageBlob(1, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_5, "High performance", &checkImage5) LandingPageBlob(2, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_4, "Flexbox-style responsive layout", &checkImage4) LandingPageBlob(3, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_3, "Declarative syntax", &checkImage3) @@ -146,20 +145,20 @@ LandingPageMobile :: proc() { FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) { textConfig := clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_RED}) - if clay.UI( - clay.ID("HFileBoxOuter"), - clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = widthSizing}, childAlignment = {y = .CENTER}, padding = {outerPadding, outerPadding, 32, 32}, childGap = 8}), - ) { - if clay.UI(clay.ID("HFileIncludeOuter"), clay.Layout({padding = {8, 8, 4, 4}}), clay.Rectangle({color = COLOR_RED, cornerRadius = clay.CornerRadiusAll(8)})) { + if clay.UI().configure({ + id = clay.ID("HFileBoxOuter"), + layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = widthSizing }, childAlignment = { y = .CENTER }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 }, + }) { + if clay.UI().configure({ id = clay.ID("HFileIncludeOuter"), layout = { padding = { 8, 8, 4, 4 } }, rectangle = { color = COLOR_RED }, shared = { cornerRadius = clay.CornerRadiusAll(8) } }) { clay.Text("#include clay.h", clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_LIGHT})) } clay.Text("~2000 lines of C99.", textConfig) clay.Text("Zero dependencies, including no C standard library.", textConfig) } - if clay.UI( - clay.ID("BringYourOwnRendererOuter"), - clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = widthSizing}, childAlignment = {y = .CENTER}, padding = {outerPadding, outerPadding, 32, 32}, childGap = 8}), - ) { + if clay.UI().configure({ + id = clay.ID("BringYourOwnRendererOuter"), + layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = widthSizing }, childAlignment = { y = .CENTER }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 }, + }) { clay.Text("Renderer agnostic.", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = COLOR_ORANGE})) clay.Text("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", textConfig) clay.Text("Flexible output for easy compositing in your custom engine or environment.", textConfig) @@ -167,31 +166,31 @@ FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) { } FeatureBlocksDesktop :: proc() { - if clay.UI(clay.ID("FeatureBlocksOuter"), clay.Layout({sizing = {width = clay.SizingGrow({})}})) { - if clay.UI( - clay.ID("FeatureBlocksInner"), - clay.Layout({sizing = {width = clay.SizingGrow({})}, childAlignment = {y = .CENTER}}), - clay.Border({betweenChildren = {width = 2, color = COLOR_RED}}), - ) { + if clay.UI().configure({ id = clay.ID("FeatureBlocksOuter"), layout = { sizing = { width = clay.SizingGrow({}) } } }) { + if clay.UI().configure({ + id = clay.ID("FeatureBlocksInner"), + layout = { sizing = { width = clay.SizingGrow({ }) }, childAlignment = { y = .CENTER } }, + border = { betweenChildren = { width = 2, color = COLOR_RED } }, + }) { FeatureBlocks(clay.SizingPercent(0.5), 50) } } } FeatureBlocksMobile :: proc() { - if clay.UI( - clay.ID("FeatureBlocksInner"), - clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingGrow({})}}), - clay.Border({betweenChildren = {width = 2, color = COLOR_RED}}), - ) { + if clay.UI().configure({ + id = clay.ID("FeatureBlocksInner"), + layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingGrow({ }) } }, + border = { betweenChildren = { width = 2, color = COLOR_RED } }, + }) { FeatureBlocks(clay.SizingGrow({}), 16) } } DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) { - if clay.UI(clay.ID("SyntaxPageLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) { + if clay.UI().configure({ id = clay.ID("SyntaxPageLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) { clay.Text("Declarative Syntax", clay.TextConfig(titleTextConfig)) - if clay.UI(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {} + if clay.UI().configure({ id = clay.ID("SyntaxSpacer"), layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {} clay.Text( "Flexible and readable declarative syntax with nested UI element hierarchies.", clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}), @@ -205,43 +204,41 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}), ) } - if clay.UI(clay.ID("SyntaxPageRightImage"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) { - if clay.UI( - clay.ID("SyntaxPageRightImageInner"), - clay.Layout({sizing = {width = clay.SizingGrow({max = 568})}}), - clay.Image({imageData = &syntaxImage, sourceDimensions = {1136, 1194}}), - ) {} + if clay.UI().configure({ id = clay.ID("SyntaxPageRightImage"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .CENTER } } }) { + if clay.UI().configure({ + id = clay.ID("SyntaxPageRightImageInner"), + layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } }, + image = { imageData = &syntaxImage, sourceDimensions = { 1136, 1194 } }, + }) {} } } DeclarativeSyntaxPageDesktop :: proc() { - if clay.UI( - clay.ID("SyntaxPageDesktop"), - clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {left = 50, right = 50}}), - ) { - if clay.UI( - clay.ID("SyntaxPage"), - clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = clay.PaddingAll(32), childGap = 32}), - clay.Border({left = {2, COLOR_RED}, right = {2, COLOR_RED}}), - ) { + if clay.UI().configure({ + id = clay.ID("SyntaxPageDesktop"), + layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .CENTER }, padding = { left = 50, right = 50 } }, + }) { + if clay.UI().configure({ + id = clay.ID("SyntaxPage"), + layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(32), childGap = 32 }, + border = { left = { 2, COLOR_RED }, right = { 2, COLOR_RED } }, + }) { DeclarativeSyntaxPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5)) } } } DeclarativeSyntaxPageMobile :: proc() { - if clay.UI( - clay.ID("SyntaxPageMobile"), - clay.Layout( - { - layoutDirection = .TOP_TO_BOTTOM, - sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, - childAlignment = {x = .CENTER, y = .CENTER}, - padding = {16, 16, 32, 32}, - childGap = 16, - }, - ), - ) { + if clay.UI().configure({ + id = clay.ID("SyntaxPageMobile"), + layout = { + layoutDirection = .TOP_TO_BOTTOM, + sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, + childAlignment = { x = .CENTER, y = .CENTER }, + padding = { 16, 16, 32, 32 }, + childGap = 16, + }, + }) { DeclarativeSyntaxPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({})) } } @@ -253,9 +250,9 @@ ColorLerp :: proc(a: clay.Color, b: clay.Color, amount: f32) -> clay.Color { LOREM_IPSUM_TEXT := "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) { - if clay.UI(clay.ID("PerformanceLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) { + if clay.UI().configure({ id = clay.ID("PerformanceLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) { clay.Text("High Performance", clay.TextConfig(titleTextConfig)) - if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {} + if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } }}) {} clay.Text( "Fast enough to recompute your entire UI every frame.", clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}), @@ -269,24 +266,24 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}), ) } - if clay.UI(clay.ID("PerformanceRightImageOuter"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) { - if clay.UI( - clay.ID("PerformanceRightBorder"), - clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(400)}}), - clay.BorderAll({width = 2, color = COLOR_LIGHT}), - ) { - if clay.UI( - clay.ID("AnimationDemoContainerLeft"), - clay.Layout({sizing = {clay.SizingPercent(0.35 + 0.3 * lerpValue), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = clay.PaddingAll(16)}), - clay.Rectangle({color = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue)}), - ) { + if clay.UI().configure({ id = clay.ID("PerformanceRightImageOuter"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .CENTER } } }) { + if clay.UI().configure({ + id = clay.ID("PerformanceRightBorder"), + layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(400) } }, + border = clay.BorderAll({ width = 2, color = COLOR_LIGHT }), + }) { + if clay.UI().configure({ + id = clay.ID("AnimationDemoContainerLeft"), + layout = { sizing = { clay.SizingPercent(0.35 + 0.3 * lerpValue), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(16) }, + rectangle = { color = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue) }, + }) { clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT})) } - if clay.UI( - clay.ID("AnimationDemoContainerRight"), - clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = clay.PaddingAll(16)}), - clay.Rectangle({color = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue)}), - ) { + if clay.UI().configure({ + id = clay.ID("AnimationDemoContainerRight"), + layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(16) }, + rectangle = { color = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue) }, + }) { clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT})) } } @@ -294,60 +291,58 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon } HighPerformancePageDesktop :: proc(lerpValue: f32) { - if clay.UI( - clay.ID("PerformanceDesktop"), - clay.Layout( - {sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {82, 82, 32, 32}, childGap = 64}, - ), - clay.Rectangle({color = COLOR_RED}), - ) { + if clay.UI().configure({ + id = clay.ID("PerformanceDesktop"), + layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .CENTER }, padding = { 82, 82, 32, 32 }, childGap = 64 }, + rectangle = { color = COLOR_RED }, + }) { HighPerformancePage(lerpValue, {fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}, clay.SizingPercent(0.5)) } } HighPerformancePageMobile :: proc(lerpValue: f32) { - if clay.UI( - clay.ID("PerformanceMobile"), - clay.Layout( - { - layoutDirection = .TOP_TO_BOTTOM, - sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, - childAlignment = {x = .CENTER, y = .CENTER}, - padding = { 16, 16, 32, 32}, - childGap = 32, - }, - ), - clay.Rectangle({color = COLOR_RED}), - ) { + if clay.UI().configure({ + id = clay.ID("PerformanceMobile"), + layout = { + layoutDirection = .TOP_TO_BOTTOM, + sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, + childAlignment = { x = .CENTER, y = .CENTER }, + padding = { 16, 16, 32, 32 }, + childGap = 32, + }, + rectangle = { color = COLOR_RED }, + }) { HighPerformancePage(lerpValue, {fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_LIGHT}, clay.SizingGrow({})) } } RendererButtonActive :: proc(index: i32, text: string) { - if clay.UI( - clay.Layout({sizing = {width = clay.SizingFixed(300)}, padding = clay.PaddingAll(16)}), - clay.Rectangle({color = COLOR_RED, cornerRadius = clay.CornerRadiusAll(10)}), - ) { + if clay.UI().configure({ + layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) }, + rectangle = { color = COLOR_RED }, + shared = { cornerRadius = clay.CornerRadiusAll(10) } + }) { clay.Text(text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT})) } } RendererButtonInactive :: proc(index: u32, text: string) { - if clay.UI(clay.Layout({}), clay.BorderOutsideRadius({2, COLOR_RED}, 10)) { - if clay.UI( - clay.ID("RendererButtonInactiveInner", index), - clay.Layout({sizing = {width = clay.SizingFixed(300)}, padding = clay.PaddingAll(16)}), - clay.Rectangle({color = COLOR_LIGHT, cornerRadius = clay.CornerRadiusAll(10)}), - ) { + if clay.UI().configure({ border = clay.BorderOutside({ 2, COLOR_RED }) }) { + if clay.UI().configure({ + id = clay.ID("RendererButtonInactiveInner", index), + layout = { sizing = { width = clay.SizingFixed(300) }, padding = clay.PaddingAll(16) }, + rectangle = { color = COLOR_LIGHT }, + shared = { cornerRadius = clay.CornerRadiusAll(10) } + }) { clay.Text(text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED})) } } } RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) { - if clay.UI(clay.ID("RendererLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) { + if clay.UI().configure({ id = clay.ID("RendererLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) { clay.Text("Renderer & Platform Agnostic", clay.TextConfig(titleTextConfig)) - if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {} + if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {} clay.Text( "Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.", clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}), @@ -361,45 +356,43 @@ RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay. clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}), ) } - if clay.UI( - clay.ID("RendererRightText"), - clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}, layoutDirection = .TOP_TO_BOTTOM, childGap = 16}), - ) { + if clay.UI().configure({ + id = clay.ID("RendererRightText"), + layout = { sizing = { width = widthSizing }, childAlignment = { x = .CENTER }, layoutDirection = .TOP_TO_BOTTOM, childGap = 16 }, + }) { clay.Text("Try changing renderer!", clay.TextConfig({fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE})) - if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({max = 32})}})) {} + if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 32 }) } } }) {} RendererButtonActive(0, "Raylib Renderer") } } RendererPageDesktop :: proc() { - if clay.UI( - clay.ID("RendererPageDesktop"), - clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {left = 50, right = 50}}), - ) { - if clay.UI( - clay.ID("RendererPage"), - clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = clay.PaddingAll(32), childGap = 32}), - clay.Border({left = {2, COLOR_RED}, right = {2, COLOR_RED}}), - ) { + if clay.UI().configure({ + id = clay.ID("RendererPageDesktop"), + layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .CENTER }, padding = { left = 50, right = 50 } }, + }) { + if clay.UI().configure({ + id = clay.ID("RendererPage"), + layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(32), childGap = 32 }, + border = { left = { 2, COLOR_RED }, right = { 2, COLOR_RED } }, + }) { RendererPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5)) } } } RendererPageMobile :: proc() { - if clay.UI( - clay.ID("RendererMobile"), - clay.Layout( - { - layoutDirection = .TOP_TO_BOTTOM, - sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, - childAlignment = {x = .CENTER, y = .CENTER}, - padding = {16, 16, 32, 32}, - childGap = 32, - }, - ), - clay.Rectangle({color = COLOR_LIGHT}), - ) { + if clay.UI().configure({ + id = clay.ID("RendererMobile"), + layout = { + layoutDirection = .TOP_TO_BOTTOM, + sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, + childAlignment = { x = .CENTER, y = .CENTER }, + padding = { 16, 16, 32, 32 }, + childGap = 32, + }, + rectangle = { color = COLOR_LIGHT }, + }) { RendererPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({})) } } @@ -416,47 +409,48 @@ animationLerpValue: f32 = -1.0 createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) { mobileScreen := windowWidth < 750 clay.BeginLayout() - if clay.UI( - clay.ID("OuterContainer"), - clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {clay.SizingGrow({}), clay.SizingGrow({})}}), - clay.Rectangle({color = COLOR_LIGHT}), - ) { - if clay.UI( - clay.ID("Header"), - clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(50)}, childAlignment = {y = .CENTER}, childGap = 24, padding = {left = 32, right = 32}}), - ) { + if clay.UI().configure({ + id = clay.ID("OuterContainer"), + layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) } }, + rectangle = { color = COLOR_LIGHT }, + }) { + if clay.UI().configure({ + id = clay.ID("Header"), + layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(50) }, childAlignment = { y = .CENTER }, childGap = 24, padding = { left = 32, right = 32 } }, + }) { clay.Text("Clay", &headerTextConfig) - if clay.UI(clay.Layout({sizing = {width = clay.SizingGrow({})}})) {} + if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ }) } } }) {} if (!mobileScreen) { - if clay.UI(clay.ID("LinkExamplesOuter"), clay.Layout({}), clay.Rectangle({color = {0, 0, 0, 0}})) { + if clay.UI().configure({ id = clay.ID("LinkExamplesOuter"), rectangle = {color = {0, 0, 0, 0}} }) { clay.Text("Examples", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}})) } - if clay.UI(clay.ID("LinkDocsOuter"), clay.Layout({}), clay.Rectangle({color = {0, 0, 0, 0}})) { + if clay.UI().configure({ id = clay.ID("LinkDocsOuter"), rectangle = {color = {0, 0, 0, 0}} }) { clay.Text("Docs", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}})) } } - if clay.UI( - clay.ID("LinkGithubOuter"), - clay.Layout({padding = {16, 16, 6, 6}}), - clay.BorderOutsideRadius({2, COLOR_RED}, 10), - clay.Rectangle({cornerRadius = clay.CornerRadiusAll(10), color = clay.PointerOver(clay.GetElementId(clay.MakeString("LinkGithubOuter"))) ? COLOR_LIGHT_HOVER : COLOR_LIGHT}) - ) { + if clay.UI().configure({ + id = clay.ID("LinkGithubOuter"), + layout = { padding = { 16, 16, 6, 6 } }, + border = clay.BorderOutside({ 2, COLOR_RED }), + rectangle = { color = clay.PointerOver(clay.GetElementId(clay.MakeString("LinkGithubOuter"))) ? COLOR_LIGHT_HOVER : COLOR_LIGHT }, + shared = { cornerRadius = clay.CornerRadiusAll(10) } + }) { clay.Text("Github", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}})) } } - if clay.UI(clay.ID("TopBorder1"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_5})) {} - if clay.UI(clay.ID("TopBorder2"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_4})) {} - if clay.UI(clay.ID("TopBorder3"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_3})) {} - if clay.UI(clay.ID("TopBorder4"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_2})) {} - if clay.UI(clay.ID("TopBorder5"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_1})) {} - if clay.UI( - clay.ID("ScrollContainerBackgroundRectangle"), - clay.Scroll({vertical = true}), - clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, layoutDirection = clay.LayoutDirection.TOP_TO_BOTTOM}), - clay.Rectangle({color = COLOR_LIGHT}), - clay.Border({betweenChildren = {2, COLOR_RED}}) - ) { + if clay.UI().configure({ id = clay.ID("TopBorder1"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, rectangle = { color = COLOR_TOP_BORDER_5 } }) {} + if clay.UI().configure({ id = clay.ID("TopBorder2"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, rectangle = { color = COLOR_TOP_BORDER_4 } }) {} + if clay.UI().configure({ id = clay.ID("TopBorder3"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, rectangle = { color = COLOR_TOP_BORDER_3 } }) {} + if clay.UI().configure({ id = clay.ID("TopBorder4"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, rectangle = { color = COLOR_TOP_BORDER_2 } }) {} + if clay.UI().configure({ id = clay.ID("TopBorder5"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, rectangle = { color = COLOR_TOP_BORDER_1 } }) {} + if clay.UI().configure({ + id = clay.ID("ScrollContainerBackgroundRectangle"), + scroll = { vertical = true }, + layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, layoutDirection = clay.LayoutDirection.TOP_TO_BOTTOM }, + rectangle = { color = COLOR_LIGHT }, + border = { betweenChildren = { 2, COLOR_RED } } + }) { if (!mobileScreen) { LandingPageDesktop() FeatureBlocksDesktop() diff --git a/bindings/odin/examples/clay-official-website/clay_renderer_raylib.odin b/bindings/odin/examples/clay-official-website/clay_renderer_raylib.odin index 470e417..3070671 100644 --- a/bindings/odin/examples/clay-official-website/clay_renderer_raylib.odin +++ b/bindings/odin/examples/clay-official-website/clay_renderer_raylib.odin @@ -57,7 +57,7 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al {} 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]) + text := string(renderCommand.textOrSharedConfig.text.chars[:renderCommand.textOrSharedConfig.text.length]) cloned := strings.clone_to_cstring(text, allocator) fontToUse: raylib.Font = raylibFonts[renderCommand.config.textElementConfig.fontId].font raylib.DrawTextEx( @@ -83,21 +83,23 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al raylib.EndScissorMode() case clay.RenderCommandType.Rectangle: config: ^clay.RectangleElementConfig = renderCommand.config.rectangleElementConfig - if (config.cornerRadius.topLeft > 0) { - radius: f32 = (config.cornerRadius.topLeft * 2) / min(boundingBox.width, boundingBox.height) + cornerRadius := renderCommand.textOrSharedConfig.sharedConfig.cornerRadius + if (cornerRadius.topLeft > 0) { + radius: f32 = (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)) } else { 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 + cornerRadius := renderCommand.textOrSharedConfig.sharedConfig.cornerRadius // Left border if (config.left.width > 0) { raylib.DrawRectangle( cast(i32)math.round(boundingBox.x), - cast(i32)math.round(boundingBox.y + config.cornerRadius.topLeft), + cast(i32)math.round(boundingBox.y + cornerRadius.topLeft), cast(i32)config.left.width, - cast(i32)math.round(boundingBox.height - config.cornerRadius.topLeft - config.cornerRadius.bottomLeft), + cast(i32)math.round(boundingBox.height - cornerRadius.topLeft - cornerRadius.bottomLeft), clayColorToRaylibColor(config.left.color), ) } @@ -105,18 +107,18 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al if (config.right.width > 0) { raylib.DrawRectangle( cast(i32)math.round(boundingBox.x + boundingBox.width - cast(f32)config.right.width), - cast(i32)math.round(boundingBox.y + config.cornerRadius.topRight), + cast(i32)math.round(boundingBox.y + cornerRadius.topRight), cast(i32)config.right.width, - cast(i32)math.round(boundingBox.height - config.cornerRadius.topRight - config.cornerRadius.bottomRight), + cast(i32)math.round(boundingBox.height - cornerRadius.topRight - cornerRadius.bottomRight), clayColorToRaylibColor(config.right.color), ) } // Top border if (config.top.width > 0) { raylib.DrawRectangle( - cast(i32)math.round(boundingBox.x + config.cornerRadius.topLeft), + cast(i32)math.round(boundingBox.x + cornerRadius.topLeft), cast(i32)math.round(boundingBox.y), - cast(i32)math.round(boundingBox.width - config.cornerRadius.topLeft - config.cornerRadius.topRight), + cast(i32)math.round(boundingBox.width - cornerRadius.topLeft - cornerRadius.topRight), cast(i32)config.top.width, clayColorToRaylibColor(config.top.color), ) @@ -124,54 +126,54 @@ clayRaylibRender :: proc(renderCommands: ^clay.ClayArray(clay.RenderCommand), al // Bottom border if (config.bottom.width > 0) { raylib.DrawRectangle( - cast(i32)math.round(boundingBox.x + config.cornerRadius.bottomLeft), + cast(i32)math.round(boundingBox.x + cornerRadius.bottomLeft), cast(i32)math.round(boundingBox.y + boundingBox.height - cast(f32)config.bottom.width), - cast(i32)math.round(boundingBox.width - config.cornerRadius.bottomLeft - config.cornerRadius.bottomRight), + cast(i32)math.round(boundingBox.width - cornerRadius.bottomLeft - cornerRadius.bottomRight), cast(i32)config.bottom.width, clayColorToRaylibColor(config.bottom.color), ) } - if (config.cornerRadius.topLeft > 0) { + if (cornerRadius.topLeft > 0) { raylib.DrawRing( - raylib.Vector2{math.round(boundingBox.x + config.cornerRadius.topLeft), math.round(boundingBox.y + config.cornerRadius.topLeft)}, - math.round(config.cornerRadius.topLeft - cast(f32)config.top.width), - config.cornerRadius.topLeft, + raylib.Vector2{math.round(boundingBox.x + cornerRadius.topLeft), math.round(boundingBox.y + cornerRadius.topLeft)}, + math.round(cornerRadius.topLeft - cast(f32)config.top.width), + cornerRadius.topLeft, 180, 270, 10, clayColorToRaylibColor(config.top.color), ) } - if (config.cornerRadius.topRight > 0) { + if (cornerRadius.topRight > 0) { raylib.DrawRing( - raylib.Vector2{math.round(boundingBox.x + boundingBox.width - config.cornerRadius.topRight), math.round(boundingBox.y + config.cornerRadius.topRight)}, - math.round(config.cornerRadius.topRight - cast(f32)config.top.width), - config.cornerRadius.topRight, + raylib.Vector2{math.round(boundingBox.x + boundingBox.width - cornerRadius.topRight), math.round(boundingBox.y + cornerRadius.topRight)}, + math.round(cornerRadius.topRight - cast(f32)config.top.width), + cornerRadius.topRight, 270, 360, 10, clayColorToRaylibColor(config.top.color), ) } - if (config.cornerRadius.bottomLeft > 0) { + if (cornerRadius.bottomLeft > 0) { raylib.DrawRing( - 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, + raylib.Vector2{math.round(boundingBox.x + cornerRadius.bottomLeft), math.round(boundingBox.y + boundingBox.height - cornerRadius.bottomLeft)}, + math.round(cornerRadius.bottomLeft - cast(f32)config.top.width), + cornerRadius.bottomLeft, 90, 180, 10, clayColorToRaylibColor(config.bottom.color), ) } - if (config.cornerRadius.bottomRight > 0) { + if (cornerRadius.bottomRight > 0) { raylib.DrawRing( raylib.Vector2 { - math.round(boundingBox.x + boundingBox.width - config.cornerRadius.bottomRight), - math.round(boundingBox.y + boundingBox.height - config.cornerRadius.bottomRight), + math.round(boundingBox.x + boundingBox.width - cornerRadius.bottomRight), + math.round(boundingBox.y + boundingBox.height - cornerRadius.bottomRight), }, - math.round(config.cornerRadius.bottomRight - cast(f32)config.bottom.width), - config.cornerRadius.bottomRight, + math.round(cornerRadius.bottomRight - cast(f32)config.bottom.width), + cornerRadius.bottomRight, 0.1, 90, 10, diff --git a/clay.h b/clay.h index ff88e4a..d64e0eb 100644 --- a/clay.h +++ b/clay.h @@ -13,8 +13,6 @@ #include #include #include -#include -#include // SIMD includes on supported platforms #ifdef __x86_64__ @@ -2582,7 +2580,8 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR CLAY({ .id = CLAY_IDI("Clay__DebugView_CollapseElement", currentElement->id), .layout = { .sizing = {CLAY_SIZING_FIXED(16), CLAY_SIZING_FIXED(16)}, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER} }, - .border = CLAY_BORDER_OUTSIDE({ 1, CLAY__DEBUGVIEW_COLOR_3 }) + .border = CLAY_BORDER_OUTSIDE({ 1, CLAY__DEBUGVIEW_COLOR_3 }), + .shared = { .cornerRadius = CLAY_CORNER_RADIUS(4) } }) { CLAY_TEXT((currentElementData && currentElementData->debugData->collapsed) ? CLAY_STRING("+") : CLAY_STRING("-"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 })); } @@ -2722,9 +2721,7 @@ void Clay__RenderDebugViewColor(Clay_Color color, Clay_TextElementConfig *textCo CLAY_TEXT(Clay__IntToString(color.a), textConfig); CLAY_TEXT(CLAY_STRING(" }"), textConfig); CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(10), CLAY__DEFAULT_STRUCT } } }) {} - CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }, .border = CLAY_BORDER_OUTSIDE({ 1, CLAY__DEBUGVIEW_COLOR_4 }) }) { - CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }, .rectangle = { .color = color }, .shared = { .cornerRadius = CLAY_CORNER_RADIUS(4) } }) {} - } + CLAY({ .layout = { .sizing = { CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8), CLAY_SIZING_FIXED(CLAY__DEBUGVIEW_ROW_HEIGHT - 8)} }, .border = CLAY_BORDER_OUTSIDE({ 1, CLAY__DEBUGVIEW_COLOR_4 }), .rectangle = { .color = color }, .shared = { .cornerRadius = CLAY_CORNER_RADIUS(4) } }) {} } } @@ -2809,9 +2806,10 @@ void Clay__RenderDebugView(void) { CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0) } } }) {} // Close button 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} }, - .rectangle = { .color = {217,91,67,80} }, + .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} }, + .rectangle = { .color = {217,91,67,80} }, .border = CLAY_BORDER_OUTSIDE({ 1, (CLAY__INIT(Clay_Color){217,91,67,255}) }), + .shared = { .cornerRadius = CLAY_CORNER_RADIUS(4) } }) { Clay_OnHover(HandleDebugViewCloseButtonInteraction, 0); CLAY_TEXT(CLAY_STRING("x"), CLAY_TEXT_CONFIG({ .textColor = CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 })); @@ -2999,7 +2997,7 @@ void Clay__RenderDebugView(void) { } // Image Preview CLAY_TEXT(CLAY_STRING("Preview"), infoTitleConfig); - CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0, imageConfig->sourceDimensions.width) }}, .image = { imageConfig } }) {} + CLAY({ .layout = { .sizing = { CLAY_SIZING_GROW(0, imageConfig->sourceDimensions.width) }}, .image = *imageConfig }) {} } break; }