From 50c053a42aa33c6c8d9037e0af8314039db0bf3b Mon Sep 17 00:00:00 2001 From: Alexander Heldt Date: Sun, 30 Nov 2025 13:29:52 +0100 Subject: [PATCH] wip-working --- src/musicplayer/ui/layout.gleam | 123 +++++++++++++++++++++----- test/musicplayer/ui/layout_test.gleam | 87 ++++++++++++++++++ 2 files changed, 186 insertions(+), 24 deletions(-) create mode 100644 test/musicplayer/ui/layout_test.gleam diff --git a/src/musicplayer/ui/layout.gleam b/src/musicplayer/ui/layout.gleam index 3c8ac87..35d0cf6 100644 --- a/src/musicplayer/ui/layout.gleam +++ b/src/musicplayer/ui/layout.gleam @@ -12,15 +12,40 @@ pub type Layout { } pub type Section { + Section(String) + Root Header Search PlaybackTime } +// pub type Section { +// Root +// Header +// Search +// PlaybackTime +// Test + +// Row1 +// A +// B + +// Row2 +// C +// D +// } + +pub type NodeType { + Container + Row + Cell +} + /// A Nodes width and height is in percentage (of the available width/height of its parent Node) pub type Node { Node( + t: NodeType, content: String, width_percent: Int, height_percent: Int, @@ -32,30 +57,64 @@ pub fn new() -> Layout { let nodes = dict.from_list([ #( - Root, - Node(content: "", width_percent: 100, height_percent: 100, children: [ - // Header, - // Search, - PlaybackTime, - ]), - ), - // #( - // Header, - // Node(content: "Music Player", width: 50, height: 10, children: []), - // ), - // #(Search, Node(content: "", width: 50, height: 10, children: [])), - #( - PlaybackTime, + Section("Root"), Node( - content: "00:00", + t: Container, + content: "container", + width_percent: 100, + height_percent: 100, + children: [ + Section("Row1"), + Section("Row2"), + ], + ), + ), + #( + Section("Row1"), + Node( + t: Row, + content: "row 1", + width_percent: 100, + height_percent: 50, + children: [ + Section("A"), + Section("A"), + ], + ), + ), + #( + Section("A"), + Node( + t: Cell, + content: "cell 1", width_percent: 50, height_percent: 100, children: [], ), ), + #( + Section("B"), + Node( + t: Cell, + content: "cell 2", + width_percent: 50, + height_percent: 100, + children: [], + ), + ), + #( + Section("Row2"), + Node( + t: Row, + content: "row 1", + width_percent: 100, + height_percent: 50, + children: [], + ), + ), ]) - Layout(0, 0, nodes: nodes) + Layout(width: 0, height: 0, nodes: nodes) } pub fn update_section( @@ -100,7 +159,8 @@ pub fn render(layout: Layout) -> Nil { container_height, container_top_left_x, container_top_left_y, - Root, + 0, + Section("Root"), ) } @@ -110,6 +170,7 @@ pub fn render_loop( container_height: Float, container_top_left_x: Int, container_top_left_y: Int, + index: Int, from: Section, ) -> Nil { let margin = 2.0 @@ -117,7 +178,10 @@ pub fn render_loop( case dict.get(layout.nodes, from) { Error(_) -> Nil Ok(node) -> { - list.each(node.children, fn(child) { + list.index_map(node.children, fn(child, i) { #(i, child) }) + |> list.each(fn(ic: #(Int, Section)) { + let #(i, child) = ic + let cw = container_width *. { int.to_float(node.width_percent) /. 100.0 } @@ -132,11 +196,12 @@ pub fn render_loop( let cx = container_top_left_x + 1 let cy = container_top_left_y + 1 - - render_loop(layout, cw, ch, cx, cy, child) + render_loop(layout, cw, ch, cx, cy, i, child) }) 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)) @@ -150,11 +215,21 @@ pub fn render_loop( |> float.floor |> float.truncate - logging.log("width: " <> int.to_string(width)) - logging.log("height: " <> int.to_string(height)) + 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, + ) + } - let cx = container_top_left_x - let cy = container_top_left_y logging.log("cx: " <> int.to_string(cx)) logging.log("cy: " <> int.to_string(cy)) diff --git a/test/musicplayer/ui/layout_test.gleam b/test/musicplayer/ui/layout_test.gleam new file mode 100644 index 0000000..a9f9cc0 --- /dev/null +++ b/test/musicplayer/ui/layout_test.gleam @@ -0,0 +1,87 @@ +// import gleam/dict +// import gleam/int +// import gleeunit + +// import musicplayer/ui/layout.{type Node, Layout, Section} + +// pub fn main() -> Nil { +// gleeunit.main() +// } + +// pub fn foo_test() { +// let expected = "" + +// let layout = +// Layout( +// width: 80, +// height: 20, +// nodes:, +// dict.from_list([ +// #( +// Section("Root"), +// Node( +// t: Container, +// content: "container", +// width_percent: 100, +// height_percent: 100, +// children: [ +// Section("Row1"), +// Section("Row2"), +// ], +// ), +// ), +// #( +// Section("Row1"), +// Node( +// t: Row, +// content: "row 1", +// width_percent: 100, +// height_percent: 50, +// children: [ +// Section("A"), +// Section("B"), +// ], +// ), +// ), +// #( +// Section("A"), +// Node( +// t: Cell, +// content: "cell 1", +// width_percent: 50, +// height_percent: 100, +// children: [], +// ), +// ), +// #( +// B, +// Node( +// t: Cell, +// content: "cell 2", +// width_percent: 50, +// height_percent: 100, +// children: [], +// ), +// ), +// #( +// Section("Row2"), +// Node( +// t: Row, +// content: "row 1", +// width_percent: 100, +// height_percent: 50, +// children: [], +// ), +// ), +// ]), +// ) + +// let container_width = int.to_float(layout.width) +// let container_height = int.to_float(layout.height) +// let container_top_left_x = 1 +// let container_top_left_y = 1 + +// let assert Ok(data) = +// layout.render_loop(layout, container_width, container_height) +// assert data == 123.456789 +// }