mirror of
https://github.com/Astatin3/IntroToWebAuthoring.git
synced 2026-06-08 16:18:01 -06:00
Make vertical layout
This commit is contained in:
+64
-12
@@ -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
@@ -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
@@ -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
@@ -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)),
|
||||
// // ]))
|
||||
// }
|
||||
|
||||
@@ -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),
|
||||
|
||||
Reference in New Issue
Block a user