Toward a more stateless design

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 = {
@@ -32,8 +32,14 @@ main :: proc() {
 			ui.container_begin(
 				dimensions = {ui.Size_Percentage(1.0), ui.Size_Percentage(0.1)},
 				config = {
-				margin = {0.0, 0.0},
+					color = cast([4]u8)rl.GREEN,
-				padding = {0.0, 0.0},
+					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.odin

@@ -15,14 +15,18 @@ rect2 :: struct {x, y, width, height: f32}
 @private ctx: ^Context
 
 Context :: struct {
-	element_position: v2,
+	origin: v2,
-	container_stack: [dynamic]^Element,
+	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
+	ctx.origin = origin
-	clear(&ctx.container_stack)
 	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}
+	element := Element{area = rect2{**position, **size}, config = config, type = .Container}
-	ctx.element_position += config.padding
+	_append_element(element)
-	element := Element{area = area, config = config, type = .Container}
+	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()
+	ctx.container_last_element[len(ctx.containers) - 1] = len(ctx.elements) - 1
-	append(&ctx.container_stack, container)
 }
 
 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^)
+	outer := element_get_outer_area(container)
-	ctx.element_position = rect_get_bl(outer)
 }
 
 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 {
+_container_current :: proc() -> ^Element {
-	if len(ctx.container_stack) == 0 {
+	return &ctx.elements[ctx.containers[len(ctx.containers) - 1]]
-		return nil
-	}
-	return ctx.container_stack[len(ctx.container_stack) - 1]
 }
 
-_element_last :: proc() -> ^Element {
+_element_previous :: proc() -> ^Element {
-	if len(ctx.elements) == 0 {
-		return nil
-	}
 	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
+	}
+}