From fe27093288ecae84ab769aa33ee978c46198eb5a Mon Sep 17 00:00:00 2001
From: Michael Mikovsky <77305074+Astatin3@users.noreply.github.com>
Date: Mon, 10 Nov 2025 11:39:02 -0700
Subject: [PATCH] Make vertical layout

---
 pages/main.xml               |  76 ++++++++++++++++---
 src/parser/mod.rs            |   3 +-
 src/views/box_view.rs        |  29 +++++---
 src/views/mod.rs             | 139 ++++++++++++++++++-----------------
 src/views/vertical_layout.rs |  15 +++-
 5 files changed, 169 insertions(+), 93 deletions(-)

diff --git a/pages/main.xml b/pages/main.xml
index c0cbd80..cfacc16 100644
--- a/pages/main.xml
+++ b/pages/main.xml
@@ -1,28 +1,80 @@
 <ConstraintLayout>
     <BoxView
-        margin_left="10"
-        margin_right="10"
         align_top_to_top="parent"
         align_left_to_left="parent"
         align_bottom_to_bottom="parent"
         align_right_to_right="parent"
-        width="400"
+        width="1200"
         height="parent"
     >
-            <ColoredRectView r="30" g="30" b="30" />
-    </BoxView>
-
-    <BoxView margin="10" align_top_to_top="parent" align_left_to_left="parent">
-            <ColoredRectView r="123" g="12" b="34" />
+            <ColoredRectView r="60" g="30" b="30" />
     </BoxView>
 
     <BoxView
-        margin="10"
         align_top_to_top="parent"
-        align_left_to_right="2"
+        align_left_to_left="parent"
         align_bottom_to_bottom="parent"
-        width="200"
+        align_right_to_right="parent"
+        width="1150"
+        height="parent"
     >
-        <TextView text="12345\nThis is a testing!" font_size="30." />
+
+            <VerticalLayout>
+                <BoxView width="parent" height="60" />
+                <BoxView width="parent" height="30">
+                    <TextView
+                    text="This is a webpage that is NOT made in HTML!"
+                    font_size="30."
+                /></BoxView>
+
+                <!-- First Paragraph -->
+                <BoxView width="parent" height="60" />
+                <BoxView height="30">
+                    <TextView
+                    text="Modern web browsers have a function called 'WebAssembly' that runs compiled,"
+                    font_size="30."
+                />
+                </BoxView>
+                <BoxView height="30">
+                    <TextView
+                    text="high performance code in place of JavaScript. Additionally, there is an element"
+                    font_size="30."
+                />
+                </BoxView>
+                <BoxView height="30">
+                    <TextView
+                    text="called '<canvas>' that can be used to draw graphics."
+                    font_size="30."
+                />
+                </BoxView>
+
+
+                <!-- Second Paragraph -->
+                <BoxView width="parent" height="60" />
+                <BoxView height="30">
+                    <TextView
+                    text="Instead of working on any kind of sane programming language, I have been working"
+                    font_size="30."
+                /></BoxView>
+                <BoxView height="30">
+                    <TextView
+                    text="to essentially write my own version of HTML inside WebAssembly. If you open the"
+                    font_size="30."
+                /></BoxView>
+                <BoxView height="30">
+                    <TextView
+                    text="browser's developer tools, you will see the very strange looking HTML."
+                    font_size="30."
+                /></BoxView>
+
+            </VerticalLayout>
+    </BoxView>
+
+    <BoxView width="300" height="100"
+        align_left_to_left="parent"
+        align_top_to_top="parent"
+        align_right_to_right="parent"
+    >
+        <TextView text="Hello!" font_size="60." />
     </BoxView>
 </ConstraintLayout>
diff --git a/src/parser/mod.rs b/src/parser/mod.rs
index 3ef1170..10106e5 100644
--- a/src/parser/mod.rs
+++ b/src/parser/mod.rs
@@ -2,7 +2,7 @@ use std::collections::HashMap;
 
 use crate::{
     log,
-    views::{Bounds, BoxView, ColorRectView, ConstraintLayout, TextView, View},
+    views::{Bounds, BoxView, ColorRectView, ConstraintLayout, TextView, VerticalLayout, View},
 };
 
 mod parser;
@@ -23,6 +23,7 @@ impl Tag {
             "ConstraintLayout" => ConstraintLayout::from_tag(&self.attributes, &self.children),
             "BoxView" => BoxView::from_tag(&self.attributes, &self.children),
             "TextView" => TextView::from_tag(&self.attributes, &self.children),
+            "VerticalLayout" => VerticalLayout::from_tag(&self.attributes, &self.children),
 
             _ => panic!("Unknown tag: {}", self.name),
         }
diff --git a/src/views/box_view.rs b/src/views/box_view.rs
index 574575c..5d2a6ac 100644
--- a/src/views/box_view.rs
+++ b/src/views/box_view.rs
@@ -9,7 +9,8 @@ use crate::{
 
 #[derive(Debug)]
 pub struct BoxView {
-    view: Box<dyn View>,
+    // view: Box<dyn View>,
+    views: Vec<Box<dyn View>>,
     bounds: (Option<Bounds>, Option<Bounds>),
     constraints: (
         Option<Constraint>,
@@ -20,9 +21,9 @@ pub struct BoxView {
 }
 
 impl BoxView {
-    pub fn new(view: Box<dyn View>) -> Self {
+    pub fn new(views: Vec<Box<dyn View>>) -> Self {
         Self {
-            view,
+            views,
             bounds: (None, None),
             constraints: (None, None, None, None),
         }
@@ -64,18 +65,25 @@ impl BoxView {
 
 impl View for BoxView {
     fn draw(&mut self, renderer: &mut Renderer, x: f32, y: f32, w: f32, h: f32) {
-        self.view.draw(renderer, x, y, w, h);
+        for view in &mut self.views {
+            view.draw(renderer, x, y, w, h);
+        }
     }
 
     fn resize(&mut self, renderer: &mut Renderer, x: f32, y: f32, w: f32, h: f32) {
-        self.view.resize(renderer, x, y, w, h);
+        for view in &mut self.views {
+            view.resize(renderer, x, y, w, h);
+        }
     }
 
     fn from_tag(
         attributes: &std::collections::HashMap<String, String>,
         children: &Vec<Tag>,
     ) -> Box<dyn View> {
-        assert!(children.len() == 1, "BoxView must have exactly one child");
+        // assert!(
+        //     children.len() >= 1,
+        //     "BoxView must have greater than one child"
+        // );
 
         let (mut margin_top, mut margin_left, mut margin_right, mut margin_bottom) =
             (None, None, None, None);
@@ -192,13 +200,14 @@ impl View for BoxView {
                 _ => {}
             }
         }
+        let views = children.iter().map(|c| c.parse()).collect();
 
-        let mut b = Self::new(children[0].parse());
+        let mut this = Self::new(views);
 
-        b.constraints = (align_top, align_left, align_right, align_bottom);
-        b.bounds = Tag::parse_bounds(attributes);
+        this.constraints = (align_top, align_left, align_right, align_bottom);
+        this.bounds = Tag::parse_bounds(attributes);
 
-        Box::new(b)
+        Box::new(this)
     }
 
     fn as_any(self: Box<Self>) -> Box<dyn std::any::Any> {
diff --git a/src/views/mod.rs b/src/views/mod.rs
index 79a418a..9db950a 100644
--- a/src/views/mod.rs
+++ b/src/views/mod.rs
@@ -12,6 +12,7 @@ pub use box_view::BoxView;
 pub use color_rect_view::ColorRectView;
 pub use constraint_layout::ConstraintLayout;
 pub use text_view::TextView;
+pub use vertical_layout::VerticalLayout;
 
 pub trait View: Debug {
     fn draw(&mut self, renderer: &mut Renderer, x: f32, y: f32, w: f32, h: f32);
@@ -54,89 +55,89 @@ pub enum Constraint {
 //     );
 // }
 
-pub fn default_view() -> Box<dyn View> {
-    let mut a = BoxView::new(Box::new(ColorRectView::new(127, 0, 0)));
+// pub fn default_view() -> Box<dyn View> {
+//     let mut a = BoxView::new(Box::new(ColorRectView::new(127, 0, 0)));
 
-    let temp_margin = 10.0;
+//     let temp_margin = 10.0;
 
-    a.set_constraints(
-        Some(Constraint::TopParent(temp_margin)),
-        None,
-        Some(Constraint::Left(temp_margin, 1)),
-        None,
-        // Some(Constraint::BottomParent(temp_margin)),
-    );
-    a.set_bounds(Some(Bounds::Pixels(200.)), Some(Bounds::Pixels(100.)));
+//     a.set_constraints(
+//         Some(Constraint::TopParent(temp_margin)),
+//         None,
+//         Some(Constraint::Left(temp_margin, 1)),
+//         None,
+//         // Some(Constraint::BottomParent(temp_margin)),
+//     );
+//     a.set_bounds(Some(Bounds::Pixels(200.)), Some(Bounds::Pixels(100.)));
 
-    let mut b = BoxView::new(Box::new(ColorRectView::new(0, 127, 0)));
+//     let mut b = BoxView::new(Box::new(ColorRectView::new(0, 127, 0)));
 
-    b.set_constraints(
-        Some(Constraint::TopParent(temp_margin)),
-        None,
-        Some(Constraint::RightParent(temp_margin)),
-        None,
-    );
+//     b.set_constraints(
+//         Some(Constraint::TopParent(temp_margin)),
+//         None,
+//         Some(Constraint::RightParent(temp_margin)),
+//         None,
+//     );
 
-    let mut c = BoxView::new(Box::new(ColorRectView::new(0, 0, 127)));
+//     let mut c = BoxView::new(Box::new(ColorRectView::new(0, 0, 127)));
 
-    c.set_constraints(
-        None,
-        Some(Constraint::LeftParent(temp_margin)),
-        Some(Constraint::RightParent(temp_margin)),
-        Some(Constraint::BottomParent(temp_margin)),
-    );
+//     c.set_constraints(
+//         None,
+//         Some(Constraint::LeftParent(temp_margin)),
+//         Some(Constraint::RightParent(temp_margin)),
+//         Some(Constraint::BottomParent(temp_margin)),
+//     );
 
-    let mut d = BoxView::new(Box::new(ColorRectView::new(127, 127, 0)));
+//     let mut d = BoxView::new(Box::new(ColorRectView::new(127, 127, 0)));
 
-    d.set_constraints(
-        None,
-        Some(Constraint::LeftParent(temp_margin)),
-        None,
-        Some(Constraint::BottomParent(temp_margin)),
-    );
+//     d.set_constraints(
+//         None,
+//         Some(Constraint::LeftParent(temp_margin)),
+//         None,
+//         Some(Constraint::BottomParent(temp_margin)),
+//     );
 
-    let mut center = BoxView::new(Box::new(ColorRectView::new(127, 127, 0)));
+//     let mut center = BoxView::new(Box::new(ColorRectView::new(127, 127, 0)));
 
-    center.set_constraints(
-        Some(Constraint::TopParent(temp_margin)),
-        Some(Constraint::LeftParent(temp_margin)),
-        Some(Constraint::RightParent(temp_margin)),
-        Some(Constraint::BottomParent(temp_margin)),
-    );
+//     center.set_constraints(
+//         Some(Constraint::TopParent(temp_margin)),
+//         Some(Constraint::LeftParent(temp_margin)),
+//         Some(Constraint::RightParent(temp_margin)),
+//         Some(Constraint::BottomParent(temp_margin)),
+//     );
 
-    center.set_bounds(Some(Bounds::Pixels(350.)), Some(Bounds::Pixels(350.)));
+//     center.set_bounds(Some(Bounds::Pixels(350.)), Some(Bounds::Pixels(350.)));
 
-    let mut center_top = BoxView::new(Box::new(ColorRectView::new(127, 0, 127)));
+//     let mut center_top = BoxView::new(Box::new(ColorRectView::new(127, 0, 127)));
 
-    center_top.set_constraints(
-        Some(Constraint::Bottom(0., 4)),
-        // None,
-        // Some(Constraint::Left(0., 4)),
-        None,
-        // None,
-        Some(Constraint::Left(10., 4)),
-        Some(Constraint::Top(0., 4)),
-    );
+//     center_top.set_constraints(
+//         Some(Constraint::Bottom(0., 4)),
+//         // None,
+//         // Some(Constraint::Left(0., 4)),
+//         None,
+//         // None,
+//         Some(Constraint::Left(10., 4)),
+//         Some(Constraint::Top(0., 4)),
+//     );
 
-    let mut inside_top = BoxView::new(Box::new(ColorRectView::new(127, 0, 127)));
+//     let mut inside_top = BoxView::new(Box::new(ColorRectView::new(127, 0, 127)));
 
-    inside_top.set_constraints(
-        Some(Constraint::Bottom(0., 4)),
-        // None,
-        // Some(Constraint::Left(0., 4)),
-        None,
-        // None,
-        Some(Constraint::Right(10., 4)),
-        Some(Constraint::Top(0., 4)),
-    );
+//     inside_top.set_constraints(
+//         Some(Constraint::Bottom(0., 4)),
+//         // None,
+//         // Some(Constraint::Left(0., 4)),
+//         None,
+//         // None,
+//         Some(Constraint::Right(10., 4)),
+//         Some(Constraint::Top(0., 4)),
+//     );
 
-    Box::new(ConstraintLayout::new(vec![
-        a, b, c, d, center, center_top, inside_top,
-    ]))
+//     Box::new(ConstraintLayout::new(vec![
+//         a, b, c, d, center, center_top, inside_top,
+//     ]))
 
-    // Box::new(VerticalLayout::new(vec![
-    //     Box::new(ColorRectView::new(12, 34, 56)),
-    //     Box::new(TextView::new("Testing!\n12345".to_string())),
-    //     Box::new(ColorRectView::new(20, 60, 80)),
-    // ]))
-}
+//     // Box::new(VerticalLayout::new(vec![
+//     //     Box::new(ColorRectView::new(12, 34, 56)),
+//     //     Box::new(TextView::new("Testing!\n12345".to_string())),
+//     //     Box::new(ColorRectView::new(20, 60, 80)),
+//     // ]))
+// }
diff --git a/src/views/vertical_layout.rs b/src/views/vertical_layout.rs
index f3dbddf..e71e3f2 100644
--- a/src/views/vertical_layout.rs
+++ b/src/views/vertical_layout.rs
@@ -54,7 +54,20 @@ impl View for VerticalLayout {
     where
         Self: Sized,
     {
-        todo!("");
+        let mut parsed_children = Vec::new();
+
+        for child in children {
+            let child = child.parse();
+
+            if let Ok(b) = child.as_any().downcast::<BoxView>() {
+                parsed_children.push(*b);
+            } else {
+                panic!("Constraint Layout must contain only BoxView!")
+            }
+        }
+
+        Box::new(Self::new(parsed_children))
+
         // Box::new(Self {
         //     views: children.iter().map(|tag| tag.parse()).collect(),
         //     bounds: (None, None),