From d0f83b2d9ddbcf9c19e187adb290c150417fff4d Mon Sep 17 00:00:00 2001 From: Synthasmagoria Date: Tue, 28 Jul 2026 13:57:58 +0200 Subject: [PATCH 1/2] Toward a more stateless design --- example/main.odin | 28 +++++++++------ ui.odin | 86 ++++++++++++++++++++++++++++++----------------- 2 files changed, 73 insertions(+), 41 deletions(-) diff --git a/example/main.odin b/example/main.odin index 4bf8ef9..90bf6e7 100644 --- a/example/main.odin +++ b/example/main.odin @@ -19,7 +19,7 @@ main :: proc() { ui.init(&ctx, 4000) for !rl.WindowShouldClose() { - ui.start(&ctx, {0, 0}) + ui.start(&ctx, {0, 0}, {WINDOW_WIDTH, WINDOW_HEIGHT}) ui.container_begin( dimensions = {ui.Size_Pixels(WINDOW_WIDTH), ui.Size_Pixels(WINDOW_HEIGHT)}, config = { @@ -29,16 +29,22 @@ main :: proc() { label = "", }, ) - ui.container_begin( - dimensions = {ui.Size_Percentage(1.0), ui.Size_Percentage(0.1)}, - config = { - margin = {0.0, 0.0}, - padding = {0.0, 0.0}, - color = cast([4]u8)rl.GREEN, - label = "", - }, - ) - ui.container_end() + ui.container_begin( + dimensions = {ui.Size_Percentage(1.0), ui.Size_Percentage(0.1)}, + config = { + color = cast([4]u8)rl.GREEN, + label = "", + }, + ) + ui.container_end() + ui.container_begin( + dimensions = {ui.Size_Percentage(1.0), ui.Size_Percentage(0.1)}, + config = { + color = cast([4]u8)rl.GREEN, + label = "", + }, + ) + ui.container_end() ui.container_end() elements := ui.end() diff --git a/ui.odin b/ui.odin index 3411559..6dbbe89 100644 --- a/ui.odin +++ b/ui.odin @@ -15,14 +15,18 @@ rect2 :: struct {x, y, width, height: f32} @private ctx: ^Context Context :: struct { - element_position: v2, - container_stack: [dynamic]^Element, + origin: v2, + containers: [dynamic]int, + container_last_element: [dynamic]int, elements: [dynamic]Element, same_line: bool, } +@private CONTAINER_STACK_SIZE :: 16 + init :: proc(state: ^Context, element_capacity: int, allocator := context.allocator) { - state.container_stack = make(type_of(state.container_stack), 0, 8, allocator) + state.containers = make(type_of(state.containers), 0, CONTAINER_STACK_SIZE, allocator) + state.container_last_element = make(type_of(state.container_last_element), 0, CONTAINER_STACK_SIZE, allocator) state.elements = make(type_of(state.elements), 0, element_capacity, allocator) } @@ -59,14 +63,26 @@ Dimensions :: struct { Axis :: enum {X, Y} -start :: proc(ui_context: ^Context, position: v2) { +start :: proc(ui_context: ^Context, origin: v2, size: v2) { ctx = ui_context - ctx.element_position = position - clear(&ctx.container_stack) + ctx.origin = origin clear(&ctx.elements) + clear(&ctx.containers) + clear(&ctx.container_last_element) + append(&ctx.elements, Element{ + area = {**origin, **size}, + label = "", + color = {0, 0, 0, 0}, + margin = {}, + padding = {}, + type = .Container}) + append(&ctx.containers, 0) + append(&ctx.container_last_element, -1) } end :: proc() -> []Element { + assert(len(ctx.containers) < 2, "Didn't close all containers before ending UI layout mode") + assert(len(ctx.containers) > 0, "Closed base container before ending UI layout mode") elements := ctx.elements[:] ctx = nil return elements @@ -85,29 +101,37 @@ element_get_inner_area :: proc(element: Element) -> rect2 { } container_begin :: proc(dimensions: Dimensions, config: ElementConfiguration) { - ctx.element_position += config.margin + position: v2 + if len(ctx.containers) == 0 { + position = ctx.origin + config.margin + } else { + if alignment_element := _element_container_previous(); alignment_element != nil { + position = rect_get_tl(element_get_inner_area(alignment_element^)) + config.margin + } else { + position = rect_get_tl(element_get_inner_area(_element_previous()^)) + config.margin + } + } size := _resolve_dimensions(dimensions) - config.margin * 2.0 - area := rect2{**ctx.element_position, **size} - ctx.element_position += config.padding - element := Element{area = area, config = config, type = .Container} + element := Element{area = rect2{**position, **size}, config = config, type = .Container} + _append_element(element) + container_index := len(ctx.elements) - 1 + append(&ctx.containers, container_index) + append(&ctx.container_last_element, -1) +} + +@private _append_element :: proc(element: Element) { append(&ctx.elements, element) - container := _element_last() - append(&ctx.container_stack, container) + ctx.container_last_element[len(ctx.containers) - 1] = len(ctx.elements) - 1 } container_end :: proc() { - container := pop(&ctx.container_stack) + container := ctx.elements[pop(&ctx.containers)] + pop(&ctx.container_last_element) // TODO: Set flex - outer := element_get_outer_area(container^) - ctx.element_position = rect_get_bl(outer) + outer := element_get_outer_area(container) } button :: proc(dimensions: Dimensions) { - area := _context_advance_area(dimensions) -} - -_context_advance_area :: proc(dimensions: Dimensions) -> rect2 { - return {} } _resolve_dimensions :: proc(dimensions: Dimensions) -> v2 { @@ -119,7 +143,7 @@ _resolve_size :: proc(size: Size, axis: Axis) -> f32 { case Size_Pixels: return cast(f32)value case Size_Percentage: - if container := _container_last(); container != nil { + if container := _container_current(); container != nil { inner := element_get_inner_area(container^) container_size := inner.width if axis == .X else inner.height return container_size * cast(f32)value @@ -132,16 +156,18 @@ _resolve_size :: proc(size: Size, axis: Axis) -> f32 { unreachable() } -_container_last :: proc() -> ^Element { - if len(ctx.container_stack) == 0 { - return nil - } - return ctx.container_stack[len(ctx.container_stack) - 1] +_container_current :: proc() -> ^Element { + return &ctx.elements[ctx.containers[len(ctx.containers) - 1]] } -_element_last :: proc() -> ^Element { - if len(ctx.elements) == 0 { - return nil - } +_element_previous :: proc() -> ^Element { return &ctx.elements[len(ctx.elements) - 1] } + +_element_container_previous :: proc() -> ^Element { + if previous_index := ctx.container_last_element[len(ctx.containers) - 1]; previous_index != -1 { + return &ctx.elements[previous_index] + } else { + return nil + } +} From 12320fbefac44c40c69e27d97da96b4fc2a8f76a Mon Sep 17 00:00:00 2001 From: Synthasmagoria Date: Tue, 28 Jul 2026 14:25:18 +0200 Subject: [PATCH 2/2] Element size resolver --- example/main.odin | 1 + ui.odin | 91 +++++++++++++++++++++++++---------------------- 2 files changed, 49 insertions(+), 43 deletions(-) diff --git a/example/main.odin b/example/main.odin index 90bf6e7..e917e47 100644 --- a/example/main.odin +++ b/example/main.odin @@ -42,6 +42,7 @@ main :: proc() { config = { color = cast([4]u8)rl.GREEN, label = "", + margin = {0.0, 4.0}, }, ) ui.container_end() diff --git a/ui.odin b/ui.odin index 6dbbe89..028e957 100644 --- a/ui.odin +++ b/ui.odin @@ -3,16 +3,16 @@ package synthas_ui v2 :: [2]f32 rect2 :: struct {x, y, width, height: f32} -@private rect_get_tl :: #force_inline proc(rect: rect2) -> v2 {return {rect.x, rect.y}} -@private rect_get_tr :: #force_inline proc(rect: rect2) -> v2 {return {rect.x + rect.width, rect.y}} -@private rect_get_br :: #force_inline proc(rect: rect2) -> v2 {return {rect.x + rect.width, rect.y + rect.height}} -@private rect_get_bl :: #force_inline proc(rect: rect2) -> v2 {return {rect.x, rect.y + rect.height}} +rect_get_tl :: #force_inline proc(rect: rect2) -> v2 {return {rect.x, rect.y}} +rect_get_tr :: #force_inline proc(rect: rect2) -> v2 {return {rect.x + rect.width, rect.y}} +rect_get_br :: #force_inline proc(rect: rect2) -> v2 {return {rect.x + rect.width, rect.y + rect.height}} +rect_get_bl :: #force_inline proc(rect: rect2) -> v2 {return {rect.x, rect.y + rect.height}} -@private rect_grow :: proc(rect: rect2, amount: v2) -> rect2 { +rect_grow :: proc(rect: rect2, amount: v2) -> rect2 { return {rect.x - amount.x / 2.0, rect.y - amount.y / 2.0, rect.width + amount.x, rect.height + amount.y} } -@private ctx: ^Context +ctx: ^Context Context :: struct { origin: v2, @@ -22,13 +22,7 @@ Context :: struct { same_line: bool, } -@private CONTAINER_STACK_SIZE :: 16 - -init :: proc(state: ^Context, element_capacity: int, allocator := context.allocator) { - state.containers = make(type_of(state.containers), 0, CONTAINER_STACK_SIZE, allocator) - state.container_last_element = make(type_of(state.container_last_element), 0, CONTAINER_STACK_SIZE, allocator) - state.elements = make(type_of(state.elements), 0, element_capacity, allocator) -} +CONTAINER_STACK_SIZE :: 16 Element :: struct { area: rect2, @@ -63,6 +57,12 @@ Dimensions :: struct { Axis :: enum {X, Y} +init :: proc(state: ^Context, element_capacity: int, allocator := context.allocator) { + state.containers = make(type_of(state.containers), 0, CONTAINER_STACK_SIZE, allocator) + state.container_last_element = make(type_of(state.container_last_element), 0, CONTAINER_STACK_SIZE, allocator) + state.elements = make(type_of(state.elements), 0, element_capacity, allocator) +} + start :: proc(ui_context: ^Context, origin: v2, size: v2) { ctx = ui_context ctx.origin = origin @@ -92,59 +92,64 @@ same_line :: proc() { ctx.same_line = true } -element_get_outer_area :: proc(element: Element) -> rect2 { - return rect_grow(element.area, element.margin * 2.0) -} - -element_get_inner_area :: proc(element: Element) -> rect2 { - return rect_grow(element.area, -element.padding * 2.0) -} - container_begin :: proc(dimensions: Dimensions, config: ElementConfiguration) { - position: v2 - if len(ctx.containers) == 0 { - position = ctx.origin + config.margin - } else { - if alignment_element := _element_container_previous(); alignment_element != nil { - position = rect_get_tl(element_get_inner_area(alignment_element^)) + config.margin - } else { - position = rect_get_tl(element_get_inner_area(_element_previous()^)) + config.margin - } - } - size := _resolve_dimensions(dimensions) - config.margin * 2.0 - element := Element{area = rect2{**position, **size}, config = config, type = .Container} + area := _resolve_element_area(dimensions, config.margin) + element := Element{area = area, config = config, type = .Container} _append_element(element) container_index := len(ctx.elements) - 1 append(&ctx.containers, container_index) append(&ctx.container_last_element, -1) } -@private _append_element :: proc(element: Element) { - append(&ctx.elements, element) - ctx.container_last_element[len(ctx.containers) - 1] = len(ctx.elements) - 1 -} - container_end :: proc() { container := ctx.elements[pop(&ctx.containers)] pop(&ctx.container_last_element) // TODO: Set flex - outer := element_get_outer_area(container) + outer := _get_element_outer_area(container) } button :: proc(dimensions: Dimensions) { + } -_resolve_dimensions :: proc(dimensions: Dimensions) -> v2 { - return {_resolve_size(dimensions.width, .X), _resolve_size(dimensions.height, .Y)} +_append_element :: proc(element: Element) { + append(&ctx.elements, element) + ctx.container_last_element[len(ctx.containers) - 1] = len(ctx.elements) - 1 } -_resolve_size :: proc(size: Size, axis: Axis) -> f32 { +_get_element_outer_area :: proc(element: Element) -> rect2 { + return rect_grow(element.area, element.margin * 2.0) +} + +_get_element_inner_area :: proc(element: Element) -> rect2 { + return rect_grow(element.area, -element.padding * 2.0) +} + +_resolve_element_area :: proc(dimensions: Dimensions, margin: v2) -> rect2 { + outer_position := _resolve_element_outer_position() + outer_size := _resolve_element_outer_size(dimensions) + outer_area := rect2{**outer_position, **outer_size} + return rect_grow(outer_area, -margin * 2.0) +} + +_resolve_element_outer_position :: proc() -> v2 { + if alignment_element := _element_container_previous(); alignment_element != nil { + return rect_get_bl(_get_element_inner_area(alignment_element^)) + } + return rect_get_tl(_get_element_inner_area(_element_previous()^)) +} + +_resolve_element_outer_size :: proc(dimensions: Dimensions) -> v2 { + return {_resolve_elemment_outer_size_axis(dimensions.width, .X), _resolve_elemment_outer_size_axis(dimensions.height, .Y)} +} + +_resolve_elemment_outer_size_axis :: proc(size: Size, axis: Axis) -> f32 { switch value in size { case Size_Pixels: return cast(f32)value case Size_Percentage: if container := _container_current(); container != nil { - inner := element_get_inner_area(container^) + inner := _get_element_inner_area(container^) container_size := inner.width if axis == .X else inner.height return container_size * cast(f32)value } else {