Make vertical layout

This commit is contained in:
Michael Mikovsky
2025-11-10 11:39:02 -07:00
parent a38b37878e
commit fe27093288
5 changed files with 169 additions and 93 deletions
+64 -12
View File
@@ -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>
+2 -1
View File
@@ -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),
}
+19 -10
View File
@@ -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> {
+70 -69
View File
@@ -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)),
// // ]))
// }
+14 -1
View File
@@ -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),