wip

src/musicplayer/ui/layout.gleam

@@ -18,19 +18,14 @@ pub type Section {
   PlaybackTime
 }
 
-pub type NodeType {
-  Container
-  Row
-  Cell
-}
-
 pub type Style {
   Style(width_percent: Int, height_percent: Int)
 }
 
 /// 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, style: Style, children: List(Section))
+  Row(content: String, style: Style, children: List(Section))
+  Cell(content: String, style: Style)
 }
 
 pub type Layout {
@@ -42,8 +37,7 @@ pub fn new() -> Layout {
     dict.from_list([
       #(
         Root,
-        Node(
-          t: Container,
+        Row(
           content: "Music Player",
           style: Style(width_percent: 100, height_percent: 100),
           children: [Header, Search, PlaybackTime],
@@ -51,8 +45,7 @@ pub fn new() -> Layout {
       ),
       #(
         Header,
-        Node(
-          t: Row,
+        Row(
           content: "Foo (1) | Bar (2) | Baz (3)",
           style: Style(width_percent: 100, height_percent: 33),
           children: [],
@@ -60,8 +53,7 @@ pub fn new() -> Layout {
       ),
       #(
         Search,
-        Node(
-          t: Row,
+        Row(
           content: "",
           style: Style(width_percent: 100, height_percent: 33),
           children: [],
@@ -69,8 +61,7 @@ pub fn new() -> Layout {
       ),
       #(
         PlaybackTime,
-        Node(
-          t: Row,
+        Row(
           content: "00:00",
           style: Style(width_percent: 100, height_percent: 33),
           children: [],
@@ -87,15 +78,14 @@ pub fn update_section(
 ) -> Layout {
   case dict.get(layout.nodes, section) {
     Error(_) -> layout
-    Ok(node) ->
-      Layout(
-        ..layout,
-        nodes: dict.insert(
-          layout.nodes,
-          section,
-          Node(..node, content: content),
-        ),
-      )
+    Ok(node) -> {
+      let updated = case node {
+        Cell(..) -> Cell(..node, content: content)
+        Row(..) -> Row(..node, content: content)
+      }
+
+      Layout(..layout, nodes: dict.insert(layout.nodes, section, updated))
+    }
   }
 }
 
@@ -177,10 +167,9 @@ pub fn render_generic(
         |> float.floor
         |> float.truncate
 
-      let #(cx, cy) = case node.t {
-        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)
+      let #(cx, cy) = case node {
+        Row(..) -> #(container_tl_x, container_tl_y + { index * height })
+        Cell(..) -> #(container_tl_x + { index * width }, container_tl_y)
       }
 
       let parent =
@@ -189,37 +178,42 @@ pub fn render_generic(
         // + 2 for header margin
         |> renders.text(node.content, cx, cy)
 
-      list.index_map(node.children, fn(child, i) { #(i, child) })
-      |> list.fold(parent, fn(acc_into, ic) {
-        let #(i, child) = ic
+      case node {
+        Cell(..) -> parent
+        Row(children:, ..) -> {
+          list.index_map(children, fn(child, i) { #(i, child) })
+          |> list.fold(parent, fn(acc_into, ic) {
+            let #(i, child) = ic
 
-        let cw =
-          container_width
-          *. { int.to_float(node.style.width_percent) /. 100.0 }
-          -. margin
-          |> float.floor
+            let cw =
+              container_width
+              *. { int.to_float(node.style.width_percent) /. 100.0 }
+              -. margin
+              |> float.floor
 
-        let ch =
-          container_height
-          *. { int.to_float(node.style.height_percent) /. 100.0 }
-          -. margin
-          |> float.floor
+            let ch =
+              container_height
+              *. { int.to_float(node.style.height_percent) /. 100.0 }
+              -. margin
+              |> float.floor
 
-        let child_origin_x = container_tl_x + 1
-        let child_origin_y = container_tl_y + 1
+            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_into,
-          renders,
-        )
-      })
+            render_generic(
+              layout,
+              cw,
+              ch,
+              child_origin_x,
+              child_origin_y,
+              i,
+              child,
+              acc_into,
+              renders,
+            )
+          })
+        }
+      }
     }
   }
 }

src/musicplayer/ui/layout_examples/layout_examples.gleam

@@ -1,7 +1,7 @@
 import gleam/dict
 
 import musicplayer/ui/internal
-import musicplayer/ui/layout.{Container, Layout, Node, Section, Style}
+import musicplayer/ui/layout.{Layout, Section, Style}
 import musicplayer/ui/layout_examples/wait_for_input.{wait_for_input}
 
 pub fn main() {
@@ -22,8 +22,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
     dict.from_list([
       #(
         Section("Root"),
-        Node(
-          t: Container,
+        layout.Row(
           content: "container",
           style: Style(width_percent: 100, height_percent: 100),
           children: [
@@ -34,8 +33,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
       ),
       #(
         Section("Row1"),
-        Node(
-          t: layout.Row,
+        layout.Row(
           content: "row 1",
           style: Style(width_percent: 100, height_percent: 50),
           children: [
@@ -46,26 +44,21 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
       ),
       #(
         Section("A"),
-        Node(
-          t: layout.Cell,
+        layout.Cell(
           content: "cell 1",
           style: Style(width_percent: 50, height_percent: 100),
-          children: [],
         ),
       ),
       #(
         Section("B"),
-        Node(
-          t: layout.Cell,
+        layout.Cell(
           content: "cell 2",
           style: Style(width_percent: 50, height_percent: 100),
-          children: [],
         ),
       ),
       #(
         Section("Row2"),
-        Node(
-          t: layout.Row,
+        layout.Row(
           content: "row 2",
           style: Style(width_percent: 100, height_percent: 50),
           children: [],