364 lines
12 KiB
Odin
364 lines
12 KiB
Odin
package examples
|
|
|
|
import "core:os"
|
|
import sdl "vendor:sdl3"
|
|
|
|
import "../../draw"
|
|
import "../../vendor/clay"
|
|
import cyber "../cybersteel"
|
|
|
|
// Clay border debug example.
|
|
//
|
|
// Lays out a grid of bordered Clay elements that exercise every code path in
|
|
// `clay_emit_partial_border` and `try_dispatch_clay_rect_border_pair`:
|
|
//
|
|
// 1. Uniform borders (fast path) — sharp, rounded, and the border-thicker-than-radius
|
|
// edge case (inner corner clamps to 0).
|
|
// 2. Background + border combinations — opaque bg + opaque uniform border MERGES into one
|
|
// SDF primitive; translucent border DECLINES the merge to preserve blend fidelity;
|
|
// non-uniform border declines and falls through to the slow path; translucent bg with
|
|
// opaque border still merges (bg alpha doesn't affect merge correctness).
|
|
// 3. Single-side borders — top / right / bottom / left individually.
|
|
// 4. Two-side borders — parallel pairs (no corners drawn) and adjacent pairs (one corner
|
|
// rounds, others stay square).
|
|
// 5. Three-side borders + asymmetric widths.
|
|
// 6. Layout correctness — a vertical list with bottom-border separators (each border
|
|
// lives inside its own item, no bleed between siblings) and a row of adjacent fully
|
|
// bordered siblings (no border overlap, each in its own bounds).
|
|
clay_borders :: proc() {
|
|
if !sdl.Init({.VIDEO}) do os.exit(1)
|
|
window := sdl.CreateWindow("Clay Borders Debug", 1200, 900, {.HIGH_PIXEL_DENSITY})
|
|
gpu := sdl.CreateGPUDevice(draw.PLATFORM_SHADER_FORMAT, true, nil)
|
|
if !sdl.ClaimWindowForGPUDevice(gpu, window) do os.exit(1)
|
|
if !draw.init(gpu, window) do os.exit(1)
|
|
PLEX_SANS_REGULAR = draw.register_font(cyber.SANS_REGULAR_RAW)
|
|
|
|
// Distinct colors so the fill, border, and translucent variants are visually unambiguous.
|
|
BG_PAGE :: draw.Color{25, 25, 30, 255}
|
|
FILL_OPAQUE :: draw.Color{80, 120, 200, 255}
|
|
FILL_TRANSLUCENT :: draw.Color{80, 120, 200, 128}
|
|
BORDER_OPAQUE :: draw.Color{255, 200, 100, 255}
|
|
BORDER_TRANSLUCENT :: draw.Color{255, 200, 100, 128}
|
|
|
|
label_config := clay.TextElementConfig {
|
|
fontId = PLEX_SANS_REGULAR,
|
|
fontSize = 12,
|
|
textColor = {220, 220, 220, 255},
|
|
}
|
|
header_config := clay.TextElementConfig {
|
|
fontId = PLEX_SANS_REGULAR,
|
|
fontSize = 16,
|
|
textColor = {255, 255, 255, 255},
|
|
}
|
|
title_config := clay.TextElementConfig {
|
|
fontId = PLEX_SANS_REGULAR,
|
|
fontSize = 22,
|
|
textColor = {255, 255, 255, 255},
|
|
}
|
|
|
|
for {
|
|
defer free_all(context.temp_allocator)
|
|
ev: sdl.Event
|
|
for sdl.PollEvent(&ev) {
|
|
if ev.type == .QUIT do return
|
|
}
|
|
|
|
base_layer := draw.begin({width = 1200, height = 900})
|
|
clay.SetLayoutDimensions({width = base_layer.bounds.width, height = base_layer.bounds.height})
|
|
clay.BeginLayout()
|
|
|
|
if clay.UI(clay.ID("borders_page"))(
|
|
{
|
|
layout = {
|
|
sizing = {clay.SizingGrow({}), clay.SizingGrow({})},
|
|
padding = clay.PaddingAll(20),
|
|
childGap = 14,
|
|
layoutDirection = .TopToBottom,
|
|
},
|
|
backgroundColor = clay_color(BG_PAGE),
|
|
},
|
|
) {
|
|
clay.Text("Clay Borders Debug", title_config)
|
|
|
|
//----- Section 1: Uniform borders (fast path) -----------------------------------
|
|
clay.Text("Uniform borders (fast path)", header_config)
|
|
if clay.UI(clay.ID("row_uniform"))(border_row_layout()) {
|
|
border_test_card(
|
|
"1px sharp",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{left = 1, right = 1, top = 1, bottom = 1},
|
|
{},
|
|
)
|
|
border_test_card(
|
|
"2px, radius 8",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{left = 2, right = 2, top = 2, bottom = 2},
|
|
{topLeft = 8, topRight = 8, bottomRight = 8, bottomLeft = 8},
|
|
)
|
|
border_test_card(
|
|
"8px, radius 20",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{left = 8, right = 8, top = 8, bottom = 8},
|
|
{topLeft = 20, topRight = 20, bottomRight = 20, bottomLeft = 20},
|
|
)
|
|
border_test_card(
|
|
"10px > radius 5 (inner clamps)",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{left = 10, right = 10, top = 10, bottom = 10},
|
|
{topLeft = 5, topRight = 5, bottomRight = 5, bottomLeft = 5},
|
|
)
|
|
}
|
|
|
|
//----- Section 2: Background + border (merge optimization) ----------------------
|
|
clay.Text("Background + border (merge optimization)", header_config)
|
|
if clay.UI(clay.ID("row_bg_border"))(border_row_layout()) {
|
|
border_test_card(
|
|
"opaque bg + opaque (MERGES: 1 prim)",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{left = 2, right = 2, top = 2, bottom = 2},
|
|
{topLeft = 6, topRight = 6, bottomRight = 6, bottomLeft = 6},
|
|
)
|
|
border_test_card(
|
|
"translucent bg + opaque (MERGES)",
|
|
label_config,
|
|
FILL_TRANSLUCENT,
|
|
BORDER_OPAQUE,
|
|
{left = 3, right = 3, top = 3, bottom = 3},
|
|
{topLeft = 6, topRight = 6, bottomRight = 6, bottomLeft = 6},
|
|
)
|
|
border_test_card(
|
|
"opaque bg + translucent (NO merge)",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_TRANSLUCENT,
|
|
{left = 4, right = 4, top = 4, bottom = 4},
|
|
{topLeft = 8, topRight = 8, bottomRight = 8, bottomLeft = 8},
|
|
)
|
|
border_test_card(
|
|
"opaque bg + non-uniform (NO merge)",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{left = 1, right = 4, top = 2, bottom = 3},
|
|
{topLeft = 6, topRight = 6, bottomRight = 6, bottomLeft = 6},
|
|
)
|
|
}
|
|
|
|
//----- Section 3: Single side borders -------------------------------------------
|
|
clay.Text("Single side", header_config)
|
|
if clay.UI(clay.ID("row_single_side"))(border_row_layout()) {
|
|
border_test_card("top only (4px)", label_config, FILL_OPAQUE, BORDER_OPAQUE, {top = 4}, {})
|
|
border_test_card("right only (4px)", label_config, FILL_OPAQUE, BORDER_OPAQUE, {right = 4}, {})
|
|
border_test_card(
|
|
"bottom only (4px, divider)",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{bottom = 4},
|
|
{},
|
|
)
|
|
border_test_card("left only (4px)", label_config, FILL_OPAQUE, BORDER_OPAQUE, {left = 4}, {})
|
|
}
|
|
|
|
//----- Section 4: Two side borders ----------------------------------------------
|
|
clay.Text("Two sides", header_config)
|
|
if clay.UI(clay.ID("row_two_sides"))(border_row_layout()) {
|
|
border_test_card(
|
|
"T+B parallel (no corners)",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{top = 3, bottom = 3},
|
|
{topLeft = 8, topRight = 8, bottomRight = 8, bottomLeft = 8},
|
|
)
|
|
border_test_card(
|
|
"L+R parallel (no corners)",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{left = 3, right = 3},
|
|
{topLeft = 8, topRight = 8, bottomRight = 8, bottomLeft = 8},
|
|
)
|
|
border_test_card(
|
|
"T+L adjacent (TL rounds)",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{top = 3, left = 3},
|
|
{topLeft = 12, topRight = 12, bottomRight = 12, bottomLeft = 12},
|
|
)
|
|
border_test_card(
|
|
"B+R adjacent (BR rounds)",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{bottom = 3, right = 3},
|
|
{topLeft = 12, topRight = 12, bottomRight = 12, bottomLeft = 12},
|
|
)
|
|
}
|
|
|
|
//----- Section 5: Three sides + asymmetric widths -------------------------------
|
|
clay.Text("Three sides + asymmetric widths", header_config)
|
|
if clay.UI(clay.ID("row_advanced"))(border_row_layout()) {
|
|
border_test_card(
|
|
"T+R+B (no L), rounded",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{top = 3, right = 3, bottom = 3},
|
|
{topLeft = 8, topRight = 8, bottomRight = 8, bottomLeft = 8},
|
|
)
|
|
border_test_card(
|
|
"T+L+R (no B), rounded",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{top = 3, left = 3, right = 3},
|
|
{topLeft = 8, topRight = 8, bottomRight = 8, bottomLeft = 8},
|
|
)
|
|
border_test_card(
|
|
"asym 1/2/3/4 T/R/B/L",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{top = 1, right = 2, bottom = 3, left = 4},
|
|
{},
|
|
)
|
|
border_test_card(
|
|
"asym + rounded",
|
|
label_config,
|
|
FILL_OPAQUE,
|
|
BORDER_OPAQUE,
|
|
{top = 2, right = 4, bottom = 2, left = 4},
|
|
{topLeft = 10, topRight = 10, bottomRight = 10, bottomLeft = 10},
|
|
)
|
|
}
|
|
|
|
//----- Section 6: Layout correctness --------------------------------------------
|
|
clay.Text("Layout correctness", header_config)
|
|
if clay.UI(clay.ID("row_correctness"))(
|
|
{layout = {sizing = {clay.SizingGrow({}), clay.SizingFit({})}, childGap = 14}},
|
|
) {
|
|
// 6a: vertical list with per-item bottom-border separator. Each item's
|
|
// border draws INSIDE its own bounds, so adjacent items don't bleed.
|
|
if clay.UI(clay.ID("list_demo"))(
|
|
{
|
|
layout = {
|
|
sizing = {clay.SizingFixed(300), clay.SizingFit({})},
|
|
padding = clay.PaddingAll(6),
|
|
childGap = 6,
|
|
layoutDirection = .TopToBottom,
|
|
},
|
|
},
|
|
) {
|
|
clay.Text("List with bottom-border separators", label_config)
|
|
if clay.UI(clay.ID("list_outer"))(
|
|
{
|
|
layout = {sizing = {clay.SizingGrow({}), clay.SizingFit({})}, layoutDirection = .TopToBottom},
|
|
backgroundColor = clay_color(FILL_OPAQUE),
|
|
},
|
|
) {
|
|
for index in 0 ..< 5 {
|
|
if clay.UI(clay.ID("list_item", u32(index)))(
|
|
{
|
|
layout = {sizing = {clay.SizingGrow({}), clay.SizingFixed(28)}, padding = clay.PaddingAll(6)},
|
|
border = {color = clay_color(BORDER_OPAQUE), width = {bottom = 1}},
|
|
},
|
|
) {
|
|
clay.Text("Item", label_config)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 6b: row of adjacent fully bordered siblings. With borders rendered
|
|
// INSIDE each element's bounds, the boundary between two siblings shows
|
|
// the natural 2*width sum (no overlap, no bleed).
|
|
if clay.UI(clay.ID("adj_demo"))(
|
|
{
|
|
layout = {
|
|
sizing = {clay.SizingFixed(380), clay.SizingFit({})},
|
|
padding = clay.PaddingAll(6),
|
|
childGap = 6,
|
|
layoutDirection = .TopToBottom,
|
|
},
|
|
},
|
|
) {
|
|
clay.Text("Adjacent bordered siblings (no gap)", label_config)
|
|
if clay.UI(clay.ID("adj_row"))({layout = {sizing = {clay.SizingGrow({}), clay.SizingFit({})}}}) {
|
|
for index in 0 ..< 4 {
|
|
if clay.UI(clay.ID("adj_item", u32(index)))(
|
|
{
|
|
layout = {sizing = {clay.SizingFixed(80), clay.SizingFixed(60)}},
|
|
backgroundColor = clay_color(FILL_OPAQUE),
|
|
border = {color = clay_color(BORDER_OPAQUE), width = {left = 2, right = 2, top = 2, bottom = 2}},
|
|
},
|
|
) {}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
clay_batch := draw.ClayBatch {
|
|
bounds = base_layer.bounds,
|
|
cmds = clay.EndLayout(0),
|
|
}
|
|
draw.prepare_clay_batch(base_layer, &clay_batch)
|
|
draw.end(gpu, window)
|
|
}
|
|
}
|
|
|
|
// Helper: convert a draw.Color (RGBA u8) to clay.Color (RGBA float in 0-255 range).
|
|
clay_color :: proc(c: draw.Color) -> clay.Color {
|
|
return clay.Color{f32(c[0]), f32(c[1]), f32(c[2]), f32(c[3])}
|
|
}
|
|
|
|
// Helper: shared row container declaration for the test sections.
|
|
border_row_layout :: proc() -> clay.ElementDeclaration {
|
|
return clay.ElementDeclaration{layout = {sizing = {clay.SizingGrow({}), clay.SizingFit({})}, childGap = 12}}
|
|
}
|
|
|
|
// One labeled test card: a fixed-width column with a caption above and a sample bordered
|
|
// rectangle below. Uses `clay.ID_LOCAL` for the inner element so each card gets a unique
|
|
// child ID without the caller passing one explicitly.
|
|
border_test_card :: proc(
|
|
label: string,
|
|
label_config: clay.TextElementConfig,
|
|
fill_color: draw.Color,
|
|
border_color: draw.Color,
|
|
border_width: clay.BorderWidth,
|
|
corner_radii: clay.CornerRadius,
|
|
) {
|
|
if clay.UI(clay.ID(label))(
|
|
{
|
|
layout = {
|
|
sizing = {clay.SizingFixed(275), clay.SizingFit({})},
|
|
padding = clay.PaddingAll(4),
|
|
childGap = 6,
|
|
layoutDirection = .TopToBottom,
|
|
},
|
|
},
|
|
) {
|
|
clay.Text(label, label_config)
|
|
if clay.UI(clay.ID_LOCAL("test_inner"))(
|
|
{
|
|
layout = {sizing = {clay.SizingGrow({}), clay.SizingFixed(64)}},
|
|
backgroundColor = clay_color(fill_color),
|
|
border = clay.BorderElementConfig{color = clay_color(border_color), width = border_width},
|
|
cornerRadius = corner_radii,
|
|
},
|
|
) {}
|
|
}
|
|
}
|