alex/musicplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Alexander Heldt
2025-11-30 18:22:15 +01:00
parent 7212df3abb
commit 59429d7721
3 changed files with 150 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/musicplayer/ui/layout.gleam
View File

@@ -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,
)
})
}
}
}

3
src/musicplayer/ui/layout_examples/one.gleam Normal file
View File

@@ -0,0 +1,3 @@
pub fn main() {
echo "hello"
}

159
test/musicplayer/ui/layout_test.gleam
View File

@@ -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("")