Custom draw

tuneup

draw/examples/hellope.odin

@@ -2,6 +2,7 @@ package examples
 
 import "../../draw"
 import "../../vendor/clay"
+import "core:math"
 import "core:os"
 import sdl "vendor:sdl3"
 
@@ -108,6 +109,11 @@ hellope_shapes :: proc() {
 }
 
 hellope_text :: proc() {
+	HELLOPE_ID :: 1
+	ROTATING_SENTENCE_ID :: 2
+	MEASURED_ID :: 3
+	CORNER_SPIN_ID :: 4
+
 	if !sdl.Init({.VIDEO}) do os.exit(1)
 	window := sdl.CreateWindow("Hellope!", 600, 600, {.HIGH_PIXEL_DENSITY})
 	gpu := sdl.CreateGPUDevice({.MSL}, true, nil)
@@ -141,7 +147,7 @@ hellope_text :: proc() {
 			FONT_SIZE,
 			color = draw.WHITE,
 			origin = draw.center_of("Hellope!", JETBRAINS_MONO_REGULAR, FONT_SIZE),
-			id = "hellope",
+			id = HELLOPE_ID,
 		)
 
 		// Rotating sentence — verifies multi-word text rotation around center
@@ -154,7 +160,7 @@ hellope_text :: proc() {
 			color = {255, 200, 50, 255},
 			origin = draw.center_of("Hellope World!", JETBRAINS_MONO_REGULAR, FONT_SIZE),
 			rotation = spin_angle,
-			id = "rotating_sentence",
+			id = ROTATING_SENTENCE_ID,
 		)
 
 		// Uncached text (no id) — created and destroyed each frame, simplest usage
@@ -178,7 +184,7 @@ hellope_text :: proc() {
 			FONT_SIZE,
 			color = draw.WHITE,
 			origin = draw.top_of("Measured!", JETBRAINS_MONO_REGULAR, FONT_SIZE),
-			id = "measured",
+			id = MEASURED_ID,
 		)
 
 		// Rotating text anchored at top-left (no origin offset) — spins around top-left corner
@@ -190,7 +196,7 @@ hellope_text :: proc() {
 			FONT_SIZE,
 			color = {100, 200, 255, 255},
 			rotation = spin_angle,
-			id = "corner_spin",
+			id = CORNER_SPIN_ID,
 		)
 
 		draw.end(gpu, window)
@@ -207,7 +213,7 @@ hellope_clay :: proc() {
 
 	text_config := clay.TextElementConfig {
 		fontId    = JETBRAINS_MONO_REGULAR,
-		fontSize  = 24,
+		fontSize  = 36,
 		textColor = {255, 255, 255, 255},
 	}
 
@@ -240,3 +246,106 @@ hellope_clay :: proc() {
 		draw.end(gpu, window)
 	}
 }
+
+hellope_custom :: proc() {
+	if !sdl.Init({.VIDEO}) do os.exit(1)
+	window := sdl.CreateWindow("Hellope Custom!", 600, 400, {.HIGH_PIXEL_DENSITY})
+	gpu := sdl.CreateGPUDevice({.MSL}, true, nil)
+	if !sdl.ClaimWindowForGPUDevice(gpu, window) do os.exit(1)
+	if !draw.init(gpu, window) do os.exit(1)
+	JETBRAINS_MONO_REGULAR = draw.register_font(JETBRAINS_MONO_REGULAR_RAW)
+
+	text_config := clay.TextElementConfig {
+		fontId    = JETBRAINS_MONO_REGULAR,
+		fontSize  = 24,
+		textColor = {255, 255, 255, 255},
+	}
+
+	gauge := Gauge {
+		value = 0.73,
+		color = {50, 200, 100, 255},
+	}
+	gauge2 := Gauge {
+		value = 0.45,
+		color = {200, 100, 50, 255},
+	}
+	spin_angle: f32 = 0
+
+	for {
+		defer free_all(context.temp_allocator)
+		ev: sdl.Event
+		for sdl.PollEvent(&ev) {
+			if ev.type == .QUIT do return
+		}
+
+		spin_angle += 1
+		gauge.value = (math.sin(spin_angle * 0.02) + 1) * 0.5
+		gauge2.value = (math.cos(spin_angle * 0.03) + 1) * 0.5
+
+		base_layer := draw.begin({width = 600, height = 400})
+		clay.SetLayoutDimensions({width = base_layer.bounds.width, height = base_layer.bounds.height})
+		clay.BeginLayout()
+
+		if clay.UI()(
+		{
+			id = clay.ID("outer"),
+			layout = {
+				sizing = {clay.SizingGrow({}), clay.SizingGrow({})},
+				childAlignment = {x = .Center, y = .Center},
+				layoutDirection = .TopToBottom,
+				childGap = 20,
+			},
+			backgroundColor = {50, 50, 50, 255},
+		},
+		) {
+			if clay.UI()({id = clay.ID("title"), layout = {sizing = {clay.SizingFit({}), clay.SizingFit({})}}}) {
+				clay.Text("Custom Draw Demo", &text_config)
+			}
+
+			if clay.UI()(
+			{
+				id = clay.ID("gauge"),
+				layout = {sizing = {clay.SizingFixed(300), clay.SizingFixed(30)}},
+				custom = {customData = &gauge},
+				backgroundColor = {80, 80, 80, 255},
+			},
+			) {}
+
+			if clay.UI()(
+			{
+				id = clay.ID("gauge2"),
+				layout = {sizing = {clay.SizingFixed(300), clay.SizingFixed(30)}},
+				custom = {customData = &gauge2},
+				backgroundColor = {80, 80, 80, 255},
+			},
+			) {}
+		}
+
+		clay_batch := draw.ClayBatch {
+			bounds = base_layer.bounds,
+			cmds   = clay.EndLayout(),
+		}
+		draw.prepare_clay_batch(base_layer, &clay_batch, {0, 0}, custom_draw = draw_custom)
+		draw.end(gpu, window)
+	}
+
+	Gauge :: struct {
+		value: f32,
+		color: draw.Color,
+	}
+
+	draw_custom :: proc(layer: ^draw.Layer, bounds: draw.Rectangle, render_data: clay.CustomRenderData) {
+		gauge := cast(^Gauge)render_data.customData
+
+		// Background from clay's backgroundColor
+		draw.rectangle(layer, bounds, draw.color_from_clay(render_data.backgroundColor), roundness = 0.25)
+
+		// Fill bar
+		fill := bounds
+		fill.width *= gauge.value
+		draw.rectangle(layer, fill, gauge.color, roundness = 0.25)
+
+		// Border
+		draw.rectangle_lines(layer, bounds, draw.WHITE, thickness = 2, roundness = 0.25)
+	}
+}