wip

src/musicplayer/ui/layout.gleam

@@ -18,23 +18,22 @@ pub type Section {
   PlaybackTime
 }
 
-pub type NodeType {
+pub type Dimension {
-  Container
+  Percent(width: Int, height: Int)
-  Row
+  Flex
-  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 {
-  Node(
+  Row(content: String, style: Style, children: List(Section))
-    t: NodeType,
+  Cell(content: String, style: Style)
-    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))
 }
@@ -44,41 +43,33 @@ pub fn new() -> Layout {
     dict.from_list([
       #(
         Root,
-        Node(
+        Row(
-          t: Container,
           content: "Music Player",
-          width_percent: 100,
+          style: Style(dimensions: Percent(width: 100, height: 100)),
-          height_percent: 100,
           children: [Header, Search, PlaybackTime],
         ),
       ),
       #(
         Header,
-        Node(
+        Row(
-          t: Row,
           content: "Foo (1) | Bar (2) | Baz (3)",
-          width_percent: 100,
+          style: Style(dimensions: Percent(width: 100, height: 33)),
-          height_percent: 33,
           children: [],
         ),
       ),
       #(
         Search,
-        Node(
+        Row(
-          t: Row,
           content: "",
-          width_percent: 100,
+          style: Style(dimensions: Percent(width: 100, height: 33)),
-          height_percent: 33,
           children: [],
         ),
       ),
       #(
         PlaybackTime,
-        Node(
+        Row(
-          t: Row,
           content: "00:00",
-          width_percent: 100,
+          style: Style(dimensions: Percent(width: 100, height: 33)),
-          height_percent: 33,
           children: [],
         ),
       ),
@@ -93,15 +84,14 @@ pub fn update_section(
 ) -> Layout {
   case dict.get(layout.nodes, section) {
     Error(_) -> layout
-    Ok(node) ->
+    Ok(node) -> {
-      Layout(
+      let updated = case node {
-        ..layout,
+        Cell(..) -> Cell(..node, content: content)
-        nodes: dict.insert(
+        Row(..) -> Row(..node, content: content)
-          layout.nodes,
+      }
-          section,
+
-          Node(..node, content: content),
+      Layout(..layout, nodes: dict.insert(layout.nodes, section, updated))
-        ),
+    }
-      )
   }
 }
 
@@ -111,6 +101,7 @@ 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(" ")
@@ -173,51 +164,65 @@ pub fn render_generic(
     Ok(node) -> {
       let margin = 2.0
 
+      let #(width, height) = case node.style.dimensions {
+        Flex -> todo
+        Percent(width:, height:) -> {
           let width =
-        container_width *. { int.to_float(node.width_percent) /. 100.0 }
+            container_width *. { int.to_float(width) /. 100.0 }
             |> float.floor
             |> float.truncate
 
           let height =
-        container_height *. { int.to_float(node.height_percent) /. 100.0 }
+            container_height *. { int.to_float(height) /. 100.0 }
             |> float.floor
             |> float.truncate
 
-      let #(cx, cy) = case node.t {
+          #(width, height)
-        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 + 2, cy)
+        |> renders.text(node.content, cx, cy)
 
-      list.index_map(node.children, fn(child, i) { #(i, child) })
+      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 =
+            let #(width, height) = case node.style.dimensions {
-          container_width
+              Flex -> todo
-          *. { int.to_float(node.width_percent) /. 100.0 }
+              Percent(width:, height:) -> {
+                let width =
+                  container_width *. { int.to_float(width) /. 100.0 } -. margin
+                  |> float.floor
+
+                let height =
+                  container_height
+                  *. { int.to_float(height) /. 100.0 }
                   -. margin
                   |> float.floor
 
-        let ch =
+                #(width, height)
-          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,
+              width,
-          ch,
+              height,
               child_origin_x,
               child_origin_y,
               i,
@@ -228,4 +233,6 @@ pub fn render_generic(
           })
         }
       }
+    }
+  }
 }

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}
+import musicplayer/ui/layout.{Layout, Percent, Section, Style}
 import musicplayer/ui/layout_examples/wait_for_input.{wait_for_input}
 
 pub fn main() {
@@ -21,12 +21,10 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
   let nodes =
     dict.from_list([
       #(
-        Section("Root"),
+        layout.Root,
-        Node(
+        layout.Row(
-          t: Container,
           content: "container",
-          width_percent: 100,
+          style: Style(dimensions: Percent(width: 100, height: 100)),
-          height_percent: 100,
           children: [
             Section("Row1"),
             Section("Row2"),
@@ -35,11 +33,9 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
       ),
       #(
         Section("Row1"),
-        Node(
+        layout.Row(
-          t: layout.Row,
           content: "row 1",
-          width_percent: 100,
+          style: Style(dimensions: Percent(width: 100, height: 50)),
-          height_percent: 50,
           children: [
             Section("A"),
             Section("A"),
@@ -48,31 +44,23 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
       ),
       #(
         Section("A"),
-        Node(
+        layout.Cell(
-          t: layout.Cell,
           content: "cell 1",
-          width_percent: 50,
+          style: Style(dimensions: Percent(width: 50, height: 50)),
-          height_percent: 100,
-          children: [],
         ),
       ),
       #(
         Section("B"),
-        Node(
+        layout.Cell(
-          t: layout.Cell,
           content: "cell 2",
-          width_percent: 50,
+          style: Style(dimensions: Percent(width: 50, height: 50)),
-          height_percent: 100,
-          children: [],
         ),
       ),
       #(
         Section("Row2"),
-        Node(
+        layout.Row(
-          t: layout.Row,
           content: "row 2",
-          width_percent: 100,
+          style: Style(dimensions: Percent(width: 50, height: 50)),
-          height_percent: 50,
           children: [],
         ),
       ),

test/musicplayer/ui/layout_test.gleam

@@ -5,25 +5,23 @@ import gleeunit
 import gleeunit/should
 import musicplayer/ui/virtual_ansi
 
-import musicplayer/ui/layout.{Layout, Node, Section}
+import musicplayer/ui/layout.{Layout, Percent, Section, Style}
 
 pub fn main() -> Nil {
   gleeunit.main()
 }
 
-pub fn foo_test() {
+pub fn percent_layout_test() {
   let layout =
     Layout(
       width: 80,
       height: 20,
       nodes: dict.from_list([
         #(
-          Section("Root"),
+          layout.Root,
-          Node(
+          layout.Row(
-            t: layout.Container,
             content: "container",
-            width_percent: 100,
+            style: Style(dimensions: Percent(width: 100, height: 100)),
-            height_percent: 100,
             children: [
               Section("Row1"),
               Section("Row2"),
@@ -32,11 +30,9 @@ pub fn foo_test() {
         ),
         #(
           Section("Row1"),
-          Node(
+          layout.Row(
-            t: layout.Row,
             content: "row 1",
-            width_percent: 100,
+            style: Style(dimensions: Percent(width: 100, height: 50)),
-            height_percent: 50,
             children: [
               Section("A"),
               Section("B"),
@@ -45,31 +41,23 @@ pub fn foo_test() {
         ),
         #(
           Section("A"),
-          Node(
+          layout.Cell(
-            t: layout.Cell,
             content: "cell 1",
-            width_percent: 50,
+            style: Style(dimensions: Percent(width: 50, height: 100)),
-            height_percent: 100,
-            children: [],
           ),
         ),
         #(
           Section("B"),
-          Node(
+          layout.Cell(
-            t: layout.Cell,
             content: "cell 2",
-            width_percent: 50,
+            style: Style(dimensions: Percent(width: 50, height: 100)),
-            height_percent: 100,
-            children: [],
           ),
         ),
         #(
           Section("Row2"),
-          Node(
+          layout.Row(
-            t: layout.Row,
             content: "row 1",
-            width_percent: 100,
+            style: Style(dimensions: Percent(width: 100, height: 50)),
-            height_percent: 50,
             children: [],
           ),
         ),
@@ -100,8 +88,7 @@ container───────────────────────
 └──────────────────────────────────────────────────────────────────────────────┘
 "
 
-  let visual =
+  let visual = virtual_ansi.render(layout)
-    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, type Section, Renders}
+import musicplayer/ui/layout.{type Layout, Renders}
 
 pub type Screen =
   dict.Dict(#(Int, Int), String)
 
-pub fn render(layout: Layout, root: Section, width: Int, height: Int) -> String {
+pub fn render(layout: Layout) -> 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, root: Section, width: Int, height: Int) -> String
   let screen =
     layout.render_generic(
       layout,
-      int.to_float(width),
+      int.to_float(layout.width),
-      int.to_float(height),
+      int.to_float(layout.height),
       1,
       1,
       0,
-      root,
+      layout.Root,
       dict.new(),
       test_renders,
     )