wip

src/musicplayer/ui/layout.gleam

@@ -18,22 +18,23 @@ pub type Section {
   PlaybackTime
 }
 
-pub type Dimension {
+pub type NodeType {
-  Percent(width: Int, height: Int)
+  Container
-  Flex
+  Row
-}
+  Cell
-
-pub type Style {
-  Style(dimensions: Dimension)
 }
 
 /// A Nodes width and height is in percentage (of the available width/height of its parent Node)
 pub type Node {
-  Row(content: String, style: Style, children: List(Section))
+  Node(
-  Cell(content: String, style: Style)
+    t: NodeType,
+    content: String,
+    width_percent: Int,
+    height_percent: Int,
+    children: List(Section),
+  )
 }
 
-/// The root node must use `Root` section
 pub type Layout {
   Layout(width: Int, height: Int, nodes: dict.Dict(Section, Node))
 }
@@ -43,33 +44,41 @@ pub fn new() -> Layout {
     dict.from_list([
       #(
         Root,
-        Row(
+        Node(
+          t: Container,
           content: "Music Player",
-          style: Style(dimensions: Percent(width: 100, height: 100)),
+          width_percent: 100,
+          height_percent: 100,
           children: [Header, Search, PlaybackTime],
         ),
       ),
       #(
         Header,
-        Row(
+        Node(
+          t: Row,
           content: "Foo (1) | Bar (2) | Baz (3)",
-          style: Style(dimensions: Percent(width: 100, height: 33)),
+          width_percent: 100,
+          height_percent: 33,
           children: [],
         ),
       ),
       #(
         Search,
-        Row(
+        Node(
+          t: Row,
           content: "",
-          style: Style(dimensions: Percent(width: 100, height: 33)),
+          width_percent: 100,
+          height_percent: 33,
           children: [],
         ),
       ),
       #(
         PlaybackTime,
-        Row(
+        Node(
+          t: Row,
           content: "00:00",
-          style: Style(dimensions: Percent(width: 100, height: 33)),
+          width_percent: 100,
+          height_percent: 33,
           children: [],
         ),
       ),
@@ -84,14 +93,15 @@ pub fn update_section(
 ) -> Layout {
   case dict.get(layout.nodes, section) {
     Error(_) -> layout
-    Ok(node) -> {
+    Ok(node) ->
-      let updated = case node {
+      Layout(
-        Cell(..) -> Cell(..node, content: content)
+        ..layout,
-        Row(..) -> Row(..node, content: content)
+        nodes: dict.insert(
-      }
+          layout.nodes,
-
+          section,
-      Layout(..layout, nodes: dict.insert(layout.nodes, section, updated))
+          Node(..node, content: content),
-    }
+        ),
+      )
   }
 }
 
@@ -101,7 +111,6 @@ pub fn update_dimensions(layout: Layout, width: Int, height: Int) -> Layout {
 
 pub fn render(layout: Layout) -> Nil {
   internal.clear_screen()
-
   [layout.width, layout.height]
   |> list.map(int.to_string)
   |> string.join(" ")
@@ -164,75 +173,59 @@ pub fn render_generic(
     Ok(node) -> {
       let margin = 2.0
 
-      let #(width, height) = case node.style.dimensions {
+      let width =
-        Flex -> todo
+        container_width *. { int.to_float(node.width_percent) /. 100.0 }
-        Percent(width:, height:) -> {
+        |> float.floor
-          let width =
+        |> float.truncate
-            container_width *. { int.to_float(width) /. 100.0 }
-            |> float.floor
-            |> float.truncate
 
-          let height =
+      let height =
-            container_height *. { int.to_float(height) /. 100.0 }
+        container_height *. { int.to_float(node.height_percent) /. 100.0 }
-            |> float.floor
+        |> float.floor
-            |> float.truncate
+        |> float.truncate
 
-          #(width, height)
+      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 =
         render_into
         |> renders.box(cx, cy, width, height)
         // + 2 for header margin
-        |> renders.text(node.content, cx, cy)
+        |> renders.text(node.content, cx + 2, cy)
 
-      case node {
+      list.index_map(node.children, fn(child, i) { #(i, child) })
-        Cell(..) -> parent
+      |> list.fold(parent, fn(acc_into, ic) {
-        Row(children:, ..) -> {
+        let #(i, child) = ic
-          list.index_map(children, fn(child, i) { #(i, child) })
-          |> list.fold(parent, fn(acc_into, ic) {
-            let #(i, child) = ic
 
-            let #(width, height) = case node.style.dimensions {
+        let cw =
-              Flex -> todo
+          container_width
-              Percent(width:, height:) -> {
+          *. { int.to_float(node.width_percent) /. 100.0 }
-                let width =
+          -. margin
-                  container_width *. { int.to_float(width) /. 100.0 } -. margin
+          |> float.floor
-                  |> float.floor
 
-                let height =
+        let ch =
-                  container_height
+          container_height
-                  *. { int.to_float(height) /. 100.0 }
+          *. { int.to_float(node.height_percent) /. 100.0 }
-                  -. margin
+          -. margin
-                  |> float.floor
+          |> float.floor
 
-                #(width, height)
+        let child_origin_x = container_tl_x + 1
-              }
+        let child_origin_y = container_tl_y + 1
-            }
 
-            let child_origin_x = container_tl_x + 1
+        render_generic(
-            let child_origin_y = container_tl_y + 1
+          layout,
-
+          cw,
-            render_generic(
+          ch,
-              layout,
+          child_origin_x,
-              width,
+          child_origin_y,
-              height,
+          i,
-              child_origin_x,
+          child,
-              child_origin_y,
+          acc_into,
-              i,
+          renders,
-              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.{Layout, Percent, Section, Style}
+import musicplayer/ui/layout.{Container, Layout, Node, Section}
 import musicplayer/ui/layout_examples/wait_for_input.{wait_for_input}
 
 pub fn main() {
@@ -21,10 +21,12 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
   let nodes =
     dict.from_list([
       #(
-        layout.Root,
+        Section("Root"),
-        layout.Row(
+        Node(
+          t: Container,
           content: "container",
-          style: Style(dimensions: Percent(width: 100, height: 100)),
+          width_percent: 100,
+          height_percent: 100,
           children: [
             Section("Row1"),
             Section("Row2"),
@@ -33,9 +35,11 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
       ),
       #(
         Section("Row1"),
-        layout.Row(
+        Node(
+          t: layout.Row,
           content: "row 1",
-          style: Style(dimensions: Percent(width: 100, height: 50)),
+          width_percent: 100,
+          height_percent: 50,
           children: [
             Section("A"),
             Section("A"),
@@ -44,23 +48,31 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
       ),
       #(
         Section("A"),
-        layout.Cell(
+        Node(
+          t: layout.Cell,
           content: "cell 1",
-          style: Style(dimensions: Percent(width: 50, height: 50)),
+          width_percent: 50,
+          height_percent: 100,
+          children: [],
         ),
       ),
       #(
         Section("B"),
-        layout.Cell(
+        Node(
+          t: layout.Cell,
           content: "cell 2",
-          style: Style(dimensions: Percent(width: 50, height: 50)),
+          width_percent: 50,
+          height_percent: 100,
+          children: [],
         ),
       ),
       #(
         Section("Row2"),
-        layout.Row(
+        Node(
+          t: layout.Row,
           content: "row 2",
-          style: Style(dimensions: Percent(width: 50, height: 50)),
+          width_percent: 100,
+          height_percent: 50,
           children: [],
         ),
       ),

test/musicplayer/ui/layout_test.gleam

@@ -5,23 +5,25 @@ import gleeunit
 import gleeunit/should
 import musicplayer/ui/virtual_ansi
 
-import musicplayer/ui/layout.{Layout, Percent, Section, Style}
+import musicplayer/ui/layout.{Layout, Node, Section}
 
 pub fn main() -> Nil {
   gleeunit.main()
 }
 
-pub fn percent_layout_test() {
+pub fn foo_test() {
   let layout =
     Layout(
       width: 80,
       height: 20,
       nodes: dict.from_list([
         #(
-          layout.Root,
+          Section("Root"),
-          layout.Row(
+          Node(
+            t: layout.Container,
             content: "container",
-            style: Style(dimensions: Percent(width: 100, height: 100)),
+            width_percent: 100,
+            height_percent: 100,
             children: [
               Section("Row1"),
               Section("Row2"),
@@ -30,9 +32,11 @@ pub fn percent_layout_test() {
         ),
         #(
           Section("Row1"),
-          layout.Row(
+          Node(
+            t: layout.Row,
             content: "row 1",
-            style: Style(dimensions: Percent(width: 100, height: 50)),
+            width_percent: 100,
+            height_percent: 50,
             children: [
               Section("A"),
               Section("B"),
@@ -41,23 +45,31 @@ pub fn percent_layout_test() {
         ),
         #(
           Section("A"),
-          layout.Cell(
+          Node(
+            t: layout.Cell,
             content: "cell 1",
-            style: Style(dimensions: Percent(width: 50, height: 100)),
+            width_percent: 50,
+            height_percent: 100,
+            children: [],
           ),
         ),
         #(
           Section("B"),
-          layout.Cell(
+          Node(
+            t: layout.Cell,
             content: "cell 2",
-            style: Style(dimensions: Percent(width: 50, height: 100)),
+            width_percent: 50,
+            height_percent: 100,
+            children: [],
           ),
         ),
         #(
           Section("Row2"),
-          layout.Row(
+          Node(
+            t: layout.Row,
             content: "row 1",
-            style: Style(dimensions: Percent(width: 100, height: 50)),
+            width_percent: 100,
+            height_percent: 50,
             children: [],
           ),
         ),
@@ -88,7 +100,8 @@ container───────────────────────
 └──────────────────────────────────────────────────────────────────────────────┘
 "
 
-  let visual = virtual_ansi.render(layout)
+  let visual =
+    virtual_ansi.render(layout, Section("Root"), layout.width, layout.height)
   case visual == string.trim(expected) {
     True -> Nil
     False -> {

test/musicplayer/ui/virtual_ansi.gleam

@@ -3,12 +3,12 @@ import gleam/int
 import gleam/list
 import gleam/string
 
-import musicplayer/ui/layout.{type Layout, Renders}
+import musicplayer/ui/layout.{type Layout, type Section, Renders}
 
 pub type Screen =
   dict.Dict(#(Int, Int), String)
 
-pub fn render(layout: Layout) -> String {
+pub fn render(layout: Layout, root: Section, width: Int, height: Int) -> String {
   let test_renders =
     Renders(
       box: fn(screen, x, y, w, h) { box(screen, x, y, w, h) },
@@ -18,12 +18,12 @@ pub fn render(layout: Layout) -> String {
   let screen =
     layout.render_generic(
       layout,
-      int.to_float(layout.width),
+      int.to_float(width),
-      int.to_float(layout.height),
+      int.to_float(height),
       1,
       1,
       0,
-      layout.Root,
+      root,
       dict.new(),
       test_renders,
     )