From 59429d772162cd7acc90103a67b3b7a4ae5aba41 Mon Sep 17 00:00:00 2001 From: Alexander Heldt Date: Sun, 30 Nov 2025 18:22:15 +0100 Subject: [PATCH] wip --- src/musicplayer/ui/layout.gleam | 153 +++++++++--------- src/musicplayer/ui/layout_examples/one.gleam | 3 + test/musicplayer/ui/layout_test.gleam | 159 ++++++++----------- 3 files changed, 150 insertions(+), 165 deletions(-) create mode 100644 src/musicplayer/ui/layout_examples/one.gleam diff --git a/src/musicplayer/ui/layout.gleam b/src/musicplayer/ui/layout.gleam index c4db104..98dbcad 100644 --- a/src/musicplayer/ui/layout.gleam +++ b/src/musicplayer/ui/layout.gleam @@ -3,15 +3,11 @@ import gleam/float import gleam/int import gleam/list import gleam/string -import gleam/string_tree.{type StringTree} +import gleam/string_tree import musicplayer/logging/logging import musicplayer/ui/internal -pub type Layout { - Layout(width: Int, height: Int, nodes: dict.Dict(Section, Node)) -} - pub type Section { Section(String) @@ -21,22 +17,6 @@ pub type Section { PlaybackTime } -// pub type Section { -// Root -// Header -// Search -// PlaybackTime -// Test - -// Row1 -// A -// B - -// Row2 -// C -// D -// } - pub type NodeType { Container Row @@ -54,6 +34,10 @@ pub type Node { ) } +pub type Layout { + Layout(width: Int, height: Int, nodes: dict.Dict(Section, Node)) +} + pub fn new() -> Layout { let nodes = dict.from_list([ @@ -154,8 +138,18 @@ pub fn render(layout: Layout) -> Nil { let container_top_left_x = 1 let container_top_left_y = 1 + let ansi_ops = + RenderOps( + draw_box: fn(tree, x, y, w, h) { + string_tree.append(tree, draw_box(x, y, w, h)) + }, + draw_text: fn(tree, text, x, y) { + string_tree.append(tree, internal.chars_at(text, x, y)) + }, + ) + string_tree.new() - |> render_loop( + |> render_generic( layout, container_width, container_height, @@ -164,53 +158,39 @@ pub fn render(layout: Layout) -> Nil { 0, Section("Root"), _, + ansi_ops, ) |> string_tree.to_string |> internal.print } -pub fn render_loop( +pub type RenderOps(ctx) { + RenderOps( + draw_box: fn(ctx, Int, Int, Int, Int) -> ctx, + draw_text: fn(ctx, String, Int, Int) -> ctx, + ) +} + +pub fn render_generic( layout: Layout, + // Dimensions container_width: Float, container_height: Float, - container_top_left_x: Int, - container_top_left_y: Int, + container_tl_x: Int, + container_tl_y: Int, + // State index: Int, from: Section, - tree: StringTree, -) -> StringTree { - let margin = 2.0 - + current_ctx: ctx, + // <--- Generic State + ops: RenderOps(ctx), + // <--- The Strategy +) -> ctx { case dict.get(layout.nodes, from) { - Error(_) -> tree + Error(_) -> current_ctx Ok(node) -> { - let final_tree = - list.index_map(node.children, fn(child, i) { #(i, child) }) - |> list.fold(tree, fn(updated_tree: StringTree, ic: #(Int, Section)) { - let #(i, child) = ic - - let cw = - container_width - *. { int.to_float(node.width_percent) /. 100.0 } - -. margin - |> float.floor - - let ch = - container_height - *. { int.to_float(node.height_percent) /. 100.0 } - -. margin - |> float.floor - - let cx = container_top_left_x + 1 - let cy = container_top_left_y + 1 - render_loop(layout, cw, ch, cx, cy, i, child, updated_tree) - }) - - logging.log("section: " <> string.inspect(from)) - logging.log("section type: " <> string.inspect(node.t)) - logging.log("index: " <> string.inspect(index)) - logging.log("container width: " <> float.to_string(container_width)) - logging.log("container height: " <> float.to_string(container_height)) + // --- 1. MATH (Shared Logic) --- + let margin = 2.0 let width = container_width *. { int.to_float(node.width_percent) /. 100.0 } @@ -222,28 +202,51 @@ pub fn render_loop( |> float.floor |> float.truncate - logging.log("section width: " <> int.to_string(width)) - logging.log("section height: " <> int.to_string(height)) - let #(cx, cy) = case node.t { - Container -> #(container_top_left_x, container_top_left_y) - Row -> #( - container_top_left_x, - container_top_left_y + { index * height }, - ) - Cell -> #( - container_top_left_x + { index * width }, - container_top_left_y, - ) + Container -> #(container_tl_x, container_tl_y) + Row -> #(container_tl_x, container_tl_y + { index * height }) + Cell -> #(container_tl_x + { index * width }, container_tl_y) } - logging.log("cx: " <> int.to_string(cx)) - logging.log("cy: " <> int.to_string(cy)) + // --- 2. RENDER PARENT (Using Generic Ops) --- + // We modify the context using the provided functions + let ctx_with_parent = + current_ctx + |> ops.draw_box(cx, cy, width, height) + |> ops.draw_text(node.content, cx, cy) - final_tree - |> string_tree.append(draw_box(cx, cy, width, height)) - // Box heading - |> string_tree.append(internal.chars_at(node.content, cx, cy)) + // --- 3. RECURSE CHILDREN --- + list.index_map(node.children, fn(child, i) { #(i, child) }) + |> list.fold(ctx_with_parent, fn(acc_ctx, ic) { + let #(i, child) = ic + + let cw = + container_width + *. { int.to_float(node.width_percent) /. 100.0 } + -. margin + |> float.floor + + let ch = + container_height + *. { int.to_float(node.height_percent) /. 100.0 } + -. margin + |> float.floor + + let child_origin_x = container_tl_x + 1 + let child_origin_y = container_tl_y + 1 + + render_generic( + layout, + cw, + ch, + child_origin_x, + child_origin_y, + i, + child, + acc_ctx, + ops, + ) + }) } } } diff --git a/src/musicplayer/ui/layout_examples/one.gleam b/src/musicplayer/ui/layout_examples/one.gleam new file mode 100644 index 0000000..85c87bf --- /dev/null +++ b/src/musicplayer/ui/layout_examples/one.gleam @@ -0,0 +1,3 @@ +pub fn main() { + echo "hello" +} diff --git a/test/musicplayer/ui/layout_test.gleam b/test/musicplayer/ui/layout_test.gleam index 8f767d2..be68444 100644 --- a/test/musicplayer/ui/layout_test.gleam +++ b/test/musicplayer/ui/layout_test.gleam @@ -5,7 +5,9 @@ import gleam/list import gleam/string import gleeunit -import musicplayer/ui/layout.{type Layout, type Section, Layout, Node, Section} +import musicplayer/ui/layout.{ + type Layout, type Section, Layout, Node, RenderOps, Section, +} pub fn main() -> Nil { gleeunit.main() @@ -76,11 +78,34 @@ pub fn foo_test() { ]), ) + let expected = + " +container──────────────────────────────────────────────────────────────────────┐ +│row 1────────────────────────────────────────────────────────────────────────┐│ +││cell 1───────────────────────────────┐cell 2───────────────────────────────┐││ +│││ ││ │││ +│││ ││ │││ +│││ ││ │││ +│││ ││ │││ +│││ ││ │││ +││└────────────────────────────────────┘└────────────────────────────────────┘││ +│└────────────────────────────────────────────────────────────────────────────┘│ +│row 1────────────────────────────────────────────────────────────────────────┐│ +││ ││ +││ ││ +││ ││ +││ ││ +││ ││ +││ ││ +││ ││ +│└────────────────────────────────────────────────────────────────────────────┘│ +└──────────────────────────────────────────────────────────────────────────────┘ +" + let visual = render_to_visual(layout, Section("Root"), 80, 20) - assert visual == "" + assert visual == string.trim(expected) } -/// The visual grid: (x, y) -> Character pub type Screen = dict.Dict(#(Int, Int), String) @@ -90,94 +115,42 @@ pub fn render_to_visual( width: Int, height: Int, ) -> String { - let screen = dict.new() - - // Initial container settings (matching your render function) - let container_width = int.to_float(width) - let container_height = int.to_float(height) - let container_top_left_x = 1 - let container_top_left_y = 1 - - let final_screen = - render_visual_loop( - layout, - container_width, - container_height, - container_top_left_x, - container_top_left_y, - 0, - // root index - root, - screen, + // 1. Define the Strategy: How to draw on a Dict + let test_ops = + RenderOps( + draw_box: fn(screen, x, y, w, h) { plot_box(screen, x, y, w, h) }, + draw_text: fn(screen, text, x, y) { plot_text(screen, text, x, y) }, ) + // 2. Run the generic logic (reusing the exact math from your real app) + let final_screen = + layout.render_generic( + layout, + int.to_float(width), + int.to_float(height), + 1, + // Start X (1-based for ANSI compatibility) + 1, + // Start Y + 0, + // Root index + root, + dict.new(), + // Initial Context + test_ops, + ) + + // 3. Convert the Grid to a Visual String screen_to_string(final_screen) } -fn render_visual_loop( - layout: Layout, - c_width: Float, - c_height: Float, - c_x: Int, - c_y: Int, - index: Int, - from: Section, - screen: Screen, -) -> Screen { - case dict.get(layout.nodes, from) { - Error(_) -> screen - Ok(node) -> { - let margin = 2.0 - - // 1. RECURSE CHILDREN - // We process children first so the parent draws ON TOP of them later - // (This matches your string_tree.append logic order) - let screen_after_children = - list.index_map(node.children, fn(c, i) { #(i, c) }) - |> list.fold(screen, fn(acc_screen, ic) { - let #(i, child) = ic - - // Logic from your code: - let cw = - c_width *. { int.to_float(node.width_percent) /. 100.0 } -. margin - |> float.floor - let ch = - c_height *. { int.to_float(node.height_percent) /. 100.0 } -. margin - |> float.floor - let cx = c_x + 1 - let cy = c_y + 1 - - render_visual_loop(layout, cw, ch, cx, cy, i, child, acc_screen) - }) - - // 2. CALCULATE CURRENT NODE DIMENSIONS (Logic from your code) - let width = - c_width *. { int.to_float(node.width_percent) /. 100.0 } - |> float.floor - |> float.truncate - let height = - c_height *. { int.to_float(node.height_percent) /. 100.0 } - |> float.floor - |> float.truncate - - // 3. CALCULATE COORDINATES (Logic from your code) - let #(cx, cy) = case node.t { - layout.Container -> #(c_x, c_y) - layout.Row -> #(c_x, c_y + { index * height }) - layout.Cell -> #(c_x + { index * width }, c_y) - } - - // 4. DRAW BOX AND CONTENT - screen_after_children - |> plot_box(cx, cy, width, height) - |> plot_text(node.content, cx, cy) - } - } -} - -// --- Drawing Primitives --- +// ---------------------------------------------------------------------------- +// Plotting Primitives (The "Graphics Engine" for Tests) +// ---------------------------------------------------------------------------- fn plot_text(screen: Screen, text: String, start_x: Int, y: Int) -> Screen { + // We use to_graphemes to ensure Unicode characters (like emoji or box lines) + // are treated as single visual units. text |> string.to_graphemes |> list.index_fold(screen, fn(acc, char, i) { @@ -189,20 +162,20 @@ fn plot_box(screen: Screen, x: Int, y: Int, w: Int, h: Int) -> Screen { let box_chars = #("┌", "┐", "└", "┘", "─", "│") let #(tl, tr, bl, br, hor, ver) = box_chars - // If box is too small to render, return screen as is + // Don't draw impossible boxes case w < 2 || h < 2 { True -> screen False -> { screen - // Corners + // 1. Corners |> dict.insert(#(x, y), tl) |> dict.insert(#(x + w - 1, y), tr) |> dict.insert(#(x, y + h - 1), bl) |> dict.insert(#(x + w - 1, y + h - 1), br) - // Top and Bottom edges + // 2. Top and Bottom edges |> plot_line_hor(x + 1, y, w - 2, hor) |> plot_line_hor(x + 1, y + h - 1, w - 2, hor) - // Side edges + // 3. Side edges |> plot_line_ver(x, y + 1, h - 2, ver) |> plot_line_ver(x + w - 1, y + 1, h - 2, ver) } @@ -231,15 +204,20 @@ fn plot_line_ver( |> list.fold(screen, fn(acc, i) { dict.insert(acc, #(x, y + i), char) }) } -// --- Output Formatting --- +// ---------------------------------------------------------------------------- +// Output Formatting +// ---------------------------------------------------------------------------- fn screen_to_string(screen: Screen) -> String { let keys = dict.keys(screen) + + // Find the bounding box of the drawing let max_x = list.fold(keys, 0, fn(m, k) { int.max(m, k.0) }) let max_y = list.fold(keys, 0, fn(m, k) { int.max(m, k.1) }) + + // We start from 1 because ANSI is 1-based let min_y = list.fold(keys, 1000, fn(m, k) { int.min(m, k.1) }) - // We add +1 to max_x to account for the last character width list.range(min_y, max_y) |> list.map(fn(y) { list.range(1, max_x) @@ -247,6 +225,7 @@ fn screen_to_string(screen: Screen) -> String { case dict.get(screen, #(x, y)) { Ok(char) -> char Error(_) -> " " + // Fill gaps with space } }) |> string.join("")