ui: create bevy types for flex style

crates/bevy_math/src/geometry.rs

@@ -0,0 +1,59 @@
+use std::ops::{Add, AddAssign};
+use glam::Vec2;
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub struct Size<T> {
+    pub width: T,
+    pub height: T,
+}
+
+impl<T> Size<T> {
+    pub fn new(width: T, height: T) -> Self {
+        Size { width, height }
+    }
+}
+
+impl<T: Default> Default for Size<T> {
+    fn default() -> Self {
+        Self {
+            width: Default::default(),
+            height: Default::default(),
+        }
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub struct Rect<T> {
+    pub start: T,
+    pub end: T,
+    pub top: T,
+    pub bottom: T,
+}
+
+impl<T: Default> Default for Rect<T> {
+    fn default() -> Self {
+        Self {
+            start: Default::default(),
+            end: Default::default(),
+            top: Default::default(),
+            bottom: Default::default(),
+        }
+    }
+}
+
+impl<T> Add<Vec2> for Size<T> where T: Add<f32, Output=T> {
+    type Output = Size<T>;
+    fn add(self, rhs: Vec2) -> Self::Output {
+        Self {
+            width: self.width + rhs.x(),
+            height: self.height + rhs.y(),
+        }
+    }
+}
+
+impl<T> AddAssign<Vec2> for Size<T> where T: AddAssign<f32> {
+    fn add_assign(&mut self, rhs: Vec2) {
+        self.width += rhs.x();
+        self.height += rhs.y();
+    }
+}

crates/bevy_math/src/lib.rs

@@ -1,10 +1,12 @@
 mod face_toward;
+mod geometry;
 mod perspective;
 
 pub use face_toward::*;
+pub use geometry::*;
 pub use glam::*;
 pub use perspective::*;
 
 pub mod prelude {
-    pub use crate::{FaceToward, Mat3, Mat4, Quat, Vec2, Vec3, Vec4};
+    pub use crate::{FaceToward, Mat3, Mat4, Quat, Rect, Size, Vec2, Vec3, Vec4};
 }

crates/bevy_ui/src/entity.rs

@@ -1,9 +1,8 @@
 use super::Node;
 use crate::{
-    prelude::Flex,
     render::UI_PIPELINE_HANDLE,
     widget::{Button, Text},
-    Click, FocusPolicy, Hover,
+    Click, FocusPolicy, Hover, Style,
 };
 use bevy_asset::Handle;
 use bevy_ecs::Bundle;
@@ -22,7 +21,7 @@ use bevy_transform::{
 #[derive(Bundle)]
 pub struct NodeComponents {
     pub node: Node,
-    pub flex: Flex,
+    pub style: Style,
     pub mesh: Handle<Mesh>, // TODO: maybe abstract this out
     pub material: Handle<ColorMaterial>,
     pub draw: Draw,
@@ -54,7 +53,7 @@ impl Default for NodeComponents {
                 },
             )]),
             node: Default::default(),
-            flex: Flex::default(),
+            style: Default::default(),
             material: Default::default(),
             draw: Default::default(),
             transform: Default::default(),
@@ -66,7 +65,7 @@ impl Default for NodeComponents {
 #[derive(Bundle)]
 pub struct TextComponents {
     pub node: Node,
-    pub flex: Flex,
+    pub style: Style,
     pub draw: Draw,
     pub text: Text,
     pub focus_policy: FocusPolicy,
@@ -77,14 +76,14 @@ pub struct TextComponents {
 impl Default for TextComponents {
     fn default() -> Self {
         TextComponents {
-            text: Text::default(),
-            node: Default::default(),
-            flex: Flex::default(),
             focus_policy: FocusPolicy::Pass,
             draw: Draw {
                 is_transparent: true,
                 ..Default::default()
             },
+            text: Default::default(),
+            node: Default::default(),
+            style: Default::default(),
             transform: Default::default(),
             local_transform: Default::default(),
         }
@@ -95,7 +94,7 @@ impl Default for TextComponents {
 pub struct ButtonComponents {
     pub node: Node,
     pub button: Button,
-    pub flex: Flex,
+    pub style: Style,
     pub click: Click,
     pub hover: Hover,
     pub focus_policy: FocusPolicy,
@@ -111,9 +110,6 @@ impl Default for ButtonComponents {
     fn default() -> Self {
         ButtonComponents {
             button: Button,
-            click: Click::default(),
-            hover: Hover::default(),
-            focus_policy: FocusPolicy::default(),
             mesh: QUAD_HANDLE,
             render_pipelines: RenderPipelines::from_pipelines(vec![RenderPipeline::specialized(
                 UI_PIPELINE_HANDLE,
@@ -133,8 +129,11 @@ impl Default for ButtonComponents {
                     ..Default::default()
                 },
             )]),
+            click: Default::default(),
+            hover: Default::default(),
+            focus_policy: Default::default(),
             node: Default::default(),
-            flex: Flex::default(),
+            style: Default::default(),
             material: Default::default(),
             draw: Default::default(),
             transform: Default::default(),
@@ -169,9 +168,9 @@ impl Default for UiCameraComponents {
                 window_origin: WindowOrigin::BottomLeft,
                 ..Default::default()
             },
+            translation: Translation::new(0.0, 0.0, far - 0.1),
             visible_entities: Default::default(),
             transform: Default::default(),
-            translation: Translation::new(0.0, 0.0, far - 0.1),
             rotation: Default::default(),
             scale: Default::default(),
         }

crates/bevy_ui/src/flex/convert.rs

@@ -0,0 +1,169 @@
+use crate::{
+    AlignContent, AlignItems, AlignSelf, Direction, Display, FlexDirection, FlexWrap,
+    JustifyContent, PositionType, Style, Val,
+};
+use bevy_math::{Rect, Size};
+
+fn from_rect<T, U>(rect: Rect<U>) -> stretch::geometry::Rect<T>
+where
+    T: From<U>,
+{
+    stretch::geometry::Rect {
+        start: rect.start.into(),
+        end: rect.end.into(),
+        top: rect.top.into(),
+        bottom: rect.bottom.into(),
+    }
+}
+
+fn from_size<T, U>(size: Size<U>) -> stretch::geometry::Size<T>
+where
+    T: From<U>,
+{
+    stretch::geometry::Size {
+        width: size.width.into(),
+        height: size.height.into(),
+    }
+}
+
+impl From<&Style> for stretch::style::Style {
+    fn from(value: &Style) -> Self {
+        Self {
+            overflow: stretch::style::Overflow::Visible,
+            display: value.display.into(),
+            position_type: value.position_type.into(),
+            direction: value.direction.into(),
+            flex_direction: value.flex_direction.into(),
+            flex_wrap: value.flex_wrap.into(),
+            align_items: value.align_items.into(),
+            align_self: value.align_self.into(),
+            align_content: value.align_content.into(),
+            justify_content: value.justify_content.into(),
+            position: from_rect(value.position),
+            margin: from_rect(value.margin),
+            padding: from_rect(value.padding),
+            border: from_rect(value.border),
+            flex_grow: value.flex_grow.into(),
+            flex_shrink: value.flex_shrink.into(),
+            flex_basis: value.flex_basis.into(),
+            size: from_size(value.size),
+            min_size: from_size(value.min_size),
+            max_size: from_size(value.max_size),
+            aspect_ratio: match value.aspect_ratio {
+                Some(value) => stretch::number::Number::Defined(value),
+                None => stretch::number::Number::Undefined,
+            },
+        }
+    }
+}
+
+impl From<Val> for stretch::style::Dimension {
+    fn from(val: Val) -> Self {
+        match val {
+            Val::Auto => stretch::style::Dimension::Auto,
+            Val::Percent(value) => stretch::style::Dimension::Percent(value),
+            Val::Px(value) => stretch::style::Dimension::Points(value),
+            Val::Undefined => stretch::style::Dimension::Undefined,
+        }
+    }
+}
+
+impl From<AlignItems> for stretch::style::AlignItems {
+    fn from(value: AlignItems) -> Self {
+        match value {
+            AlignItems::FlexStart => stretch::style::AlignItems::FlexStart,
+            AlignItems::FlexEnd => stretch::style::AlignItems::FlexEnd,
+            AlignItems::Center => stretch::style::AlignItems::Center,
+            AlignItems::Baseline => stretch::style::AlignItems::Baseline,
+            AlignItems::Stretch => stretch::style::AlignItems::Stretch,
+        }
+    }
+}
+
+impl From<AlignSelf> for stretch::style::AlignSelf {
+    fn from(value: AlignSelf) -> Self {
+        match value {
+            AlignSelf::Auto => stretch::style::AlignSelf::Auto,
+            AlignSelf::FlexStart => stretch::style::AlignSelf::FlexStart,
+            AlignSelf::FlexEnd => stretch::style::AlignSelf::FlexEnd,
+            AlignSelf::Center => stretch::style::AlignSelf::Center,
+            AlignSelf::Baseline => stretch::style::AlignSelf::Baseline,
+            AlignSelf::Stretch => stretch::style::AlignSelf::Stretch,
+        }
+    }
+}
+
+impl From<AlignContent> for stretch::style::AlignContent {
+    fn from(value: AlignContent) -> Self {
+        match value {
+            AlignContent::FlexStart => stretch::style::AlignContent::FlexStart,
+            AlignContent::FlexEnd => stretch::style::AlignContent::FlexEnd,
+            AlignContent::Center => stretch::style::AlignContent::Center,
+            AlignContent::Stretch => stretch::style::AlignContent::Stretch,
+            AlignContent::SpaceBetween => stretch::style::AlignContent::SpaceBetween,
+            AlignContent::SpaceAround => stretch::style::AlignContent::SpaceAround,
+        }
+    }
+}
+
+impl From<Direction> for stretch::style::Direction {
+    fn from(value: Direction) -> Self {
+        match value {
+            Direction::Inherit => stretch::style::Direction::Inherit,
+            Direction::LTR => stretch::style::Direction::LTR,
+            Direction::RTL => stretch::style::Direction::RTL,
+        }
+    }
+}
+
+impl From<Display> for stretch::style::Display {
+    fn from(value: Display) -> Self {
+        match value {
+            Display::Flex => stretch::style::Display::Flex,
+            Display::None => stretch::style::Display::None,
+        }
+    }
+}
+
+impl From<FlexDirection> for stretch::style::FlexDirection {
+    fn from(value: FlexDirection) -> Self {
+        match value {
+            FlexDirection::Row => stretch::style::FlexDirection::Row,
+            FlexDirection::Column => stretch::style::FlexDirection::Column,
+            FlexDirection::RowReverse => stretch::style::FlexDirection::RowReverse,
+            FlexDirection::ColumnReverse => stretch::style::FlexDirection::ColumnReverse,
+        }
+    }
+}
+
+impl From<JustifyContent> for stretch::style::JustifyContent {
+    fn from(value: JustifyContent) -> Self {
+        match value {
+            JustifyContent::FlexStart => stretch::style::JustifyContent::FlexStart,
+            JustifyContent::FlexEnd => stretch::style::JustifyContent::FlexEnd,
+            JustifyContent::Center => stretch::style::JustifyContent::Center,
+            JustifyContent::SpaceBetween => stretch::style::JustifyContent::SpaceBetween,
+            JustifyContent::SpaceAround => stretch::style::JustifyContent::SpaceAround,
+            JustifyContent::SpaceEvenly => stretch::style::JustifyContent::SpaceEvenly,
+        }
+    }
+}
+
+impl From<PositionType> for stretch::style::PositionType {
+    fn from(value: PositionType) -> Self {
+        match value {
+            PositionType::Relative => stretch::style::PositionType::Relative,
+            PositionType::Absolute => stretch::style::PositionType::Absolute,
+        }
+    }
+}
+
+impl From<FlexWrap> for stretch::style::FlexWrap {
+    fn from(value: FlexWrap) -> Self {
+        match value {
+            FlexWrap::NoWrap => stretch::style::FlexWrap::NoWrap,
+            FlexWrap::Wrap => stretch::style::FlexWrap::Wrap,
+            FlexWrap::WrapReverse => stretch::style::FlexWrap::WrapReverse,
+        }
+    }
+}

crates/bevy_ui/src/flex/mod.rs

@@ -1,15 +1,12 @@
-use crate::Node;
+mod convert;
+
+use crate::{Style, Node};
 use bevy_ecs::{Changed, Entity, Query, Res, ResMut, With, Without};
 use bevy_math::Vec2;
 use bevy_transform::prelude::{Children, LocalTransform, Parent};
 use bevy_window::{Window, WindowId, Windows};
 use std::collections::HashMap;
-use stretch::{
+use stretch::Stretch;
-    geometry::Size,
-    result::Layout,
-    style::{Dimension, Style},
-    Stretch,
-};
 
 pub struct FlexSurface {
     entity_to_stretch: HashMap<Entity, stretch::node::Node>,
@@ -34,16 +31,17 @@ impl FlexSurface {
         let mut added = false;
         let stretch = &mut self.stretch;
         let stretch_to_entity = &mut self.stretch_to_entity;
+        let stretch_style = style.into();
         let stretch_node = self.entity_to_stretch.entry(entity).or_insert_with(|| {
             added = true;
-            let stretch_node = stretch.new_node(style.clone(), Vec::new()).unwrap();
+            let stretch_node = stretch.new_node(stretch_style, Vec::new()).unwrap();
             stretch_to_entity.insert(stretch_node, entity);
             stretch_node
         });
 
         if !added {
             self.stretch
-                .set_style(*stretch_node, style.clone())
+                .set_style(*stretch_node, stretch_style)
                 .unwrap();
         }
     }
@@ -66,9 +64,7 @@ impl FlexSurface {
         let node = self.window_nodes.entry(window.id).or_insert_with(|| {
             stretch
                 .new_node(
-                    Style {
+                    stretch::style::Style::default(),
-                        ..Default::default()
-                    },
                     Vec::new(),
                 )
                 .unwrap()
@@ -77,10 +73,10 @@ impl FlexSurface {
         stretch
             .set_style(
                 *node,
-                Style {
+                stretch::style::Style {
-                    size: Size {
+                    size: stretch::geometry::Size {
-                        width: Dimension::Points(window.width as f32),
+                        width: stretch::style::Dimension::Points(window.width as f32),
-                        height: Dimension::Points(window.height as f32),
+                        height: stretch::style::Dimension::Points(window.height as f32),
                     },
                     ..Default::default()
                 },
@@ -110,7 +106,7 @@ impl FlexSurface {
         }
     }
 
-    pub fn get_layout(&self, entity: Entity) -> Result<&Layout, stretch::Error> {
+    pub fn get_layout(&self, entity: Entity) -> Result<&stretch::result::Layout, stretch::Error> {
         let stretch_node = self.entity_to_stretch.get(&entity).unwrap();
         self.stretch.layout(*stretch_node)
     }

crates/bevy_ui/src/focus.rs

@@ -5,7 +5,7 @@ use bevy_ecs::prelude::*;
 use bevy_input::{mouse::MouseButton, Input};
 use bevy_math::Vec2;
 use bevy_transform::components::Transform;
-use bevy_window::{CursorMoved, Windows};
+use bevy_window::CursorMoved;
 
 #[derive(Copy, Clone, Eq, PartialEq, Debug)]
 pub enum Click {

crates/bevy_ui/src/lib.rs

@@ -18,13 +18,9 @@ pub use render::*;
 pub mod prelude {
     pub use crate::{
         entity::*,
+        node::*,
         widget::{Button, Text},
-        Anchors, Click, Hover, Margins, Node,
+        Anchors, Click, Hover, Margins,
-    };
-
-    pub use stretch::{
-        geometry::{Point, Rect, Size},
-        style::{Style as Flex, *},
     };
 }
 

crates/bevy_ui/src/node.rs

@@ -1,7 +1,237 @@
-use bevy_math::Vec2;
+use bevy_math::{Rect, Size, Vec2};
 use bevy_render::renderer::RenderResources;
+use std::ops::{AddAssign, Add};
 
 #[derive(Debug, Clone, Default, RenderResources)]
 pub struct Node {
     pub size: Vec2,
 }
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub enum Val {
+    Undefined,
+    Auto,
+    Px(f32),
+    Percent(f32),
+}
+
+impl Default for Val {
+    fn default() -> Self {
+        Val::Undefined
+    }
+}
+
+impl Add<f32> for Val {
+    type Output = Val;
+    fn add(self, rhs: f32) -> Self::Output {
+        match self {
+            Val::Undefined => Val::Undefined,
+            Val::Auto => Val::Auto,
+            Val::Px(value) => Val::Px(value + rhs),
+            Val::Percent(value) => Val::Percent(value + rhs),
+        }
+    }
+}
+
+impl AddAssign<f32> for Val {
+    fn add_assign(&mut self, rhs: f32) {
+        match self {
+            Val::Undefined | Val::Auto => {},
+            Val::Px(value) => *value += rhs,
+            Val::Percent(value) => *value += rhs,
+        }
+    }
+    
+}
+
+#[derive(Clone, PartialEq, Debug)]
+pub struct Style {
+    pub display: Display,
+    pub position_type: PositionType,
+    pub direction: Direction,
+    pub flex_direction: FlexDirection,
+    pub flex_wrap: FlexWrap,
+    pub align_items: AlignItems,
+    pub align_self: AlignSelf,
+    pub align_content: AlignContent,
+    pub justify_content: JustifyContent,
+    pub position: Rect<Val>,
+    pub margin: Rect<Val>,
+    pub padding: Rect<Val>,
+    pub border: Rect<Val>,
+    pub flex_grow: f32,
+    pub flex_shrink: f32,
+    pub flex_basis: Val,
+    pub size: Size<Val>,
+    pub min_size: Size<Val>,
+    pub max_size: Size<Val>,
+    pub aspect_ratio: Option<f32>,
+}
+
+impl Default for Style {
+    fn default() -> Self {
+        Self {
+            display: Default::default(),
+            position_type: Default::default(),
+            direction: Default::default(),
+            flex_direction: Default::default(),
+            flex_wrap: Default::default(),
+            align_items: Default::default(),
+            align_self: Default::default(),
+            align_content: Default::default(),
+            justify_content: Default::default(),
+            position: Default::default(),
+            margin: Default::default(),
+            padding: Default::default(),
+            border: Default::default(),
+            flex_grow: 0.0,
+            flex_shrink: 1.0,
+            flex_basis: Val::Auto,
+            size: Default::default(),
+            min_size: Default::default(),
+            max_size: Default::default(),
+            aspect_ratio: Default::default(),
+        }
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub enum AlignItems {
+    FlexStart,
+    FlexEnd,
+    Center,
+    Baseline,
+    Stretch,
+}
+
+impl Default for AlignItems {
+    fn default() -> AlignItems {
+        AlignItems::Stretch
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub enum AlignSelf {
+    Auto,
+    FlexStart,
+    FlexEnd,
+    Center,
+    Baseline,
+    Stretch,
+}
+
+impl Default for AlignSelf {
+    fn default() -> AlignSelf {
+        AlignSelf::Auto
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub enum AlignContent {
+    FlexStart,
+    FlexEnd,
+    Center,
+    Stretch,
+    SpaceBetween,
+    SpaceAround,
+}
+
+impl Default for AlignContent {
+    fn default() -> AlignContent {
+        AlignContent::Stretch
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub enum Direction {
+    Inherit,
+    LTR,
+    RTL,
+}
+
+impl Default for Direction {
+    fn default() -> Direction {
+        Direction::Inherit
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub enum Display {
+    Flex,
+    None,
+}
+
+impl Default for Display {
+    fn default() -> Display {
+        Display::Flex
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub enum FlexDirection {
+    Row,
+    Column,
+    RowReverse,
+    ColumnReverse,
+}
+
+impl Default for FlexDirection {
+    fn default() -> FlexDirection {
+        FlexDirection::Row
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub enum JustifyContent {
+    FlexStart,
+    FlexEnd,
+    Center,
+    SpaceBetween,
+    SpaceAround,
+    SpaceEvenly,
+}
+
+impl Default for JustifyContent {
+    fn default() -> JustifyContent {
+        JustifyContent::FlexStart
+    }
+}
+
+// TODO: add support for overflow settings
+// #[derive(Copy, Clone, PartialEq, Debug)]
+// pub enum Overflow {
+//     Visible,
+//     Hidden,
+//     Scroll,
+// }
+
+// impl Default for Overflow {
+//     fn default() -> Overflow {
+//         Overflow::Visible
+//     }
+// }
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub enum PositionType {
+    Relative,
+    Absolute,
+}
+
+impl Default for PositionType {
+    fn default() -> PositionType {
+        PositionType::Relative
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub enum FlexWrap {
+    NoWrap,
+    Wrap,
+    WrapReverse,
+}
+
+impl Default for FlexWrap {
+    fn default() -> FlexWrap {
+        FlexWrap::NoWrap
+    }
+}

examples/game/breakout.rs

@@ -74,7 +74,9 @@ fn setup(
                     ..Default::default()
                 },
             },
-            node: Node::new(Anchors::TOP_LEFT, Margins::new(10.0, 50.0, 10.0, 50.0)),
+            style: Style {
+                ..Default::default()
+            },
             ..Default::default()
         });
 

examples/ui/button.rs

@@ -96,10 +96,10 @@ fn setup(
         .spawn(UiCameraComponents::default())
         // wrapper component to center with flexbox
         .spawn(NodeComponents {
-            flex: Flex {
+            style: Style {
                 size: Size {
-                    width: Dimension::Percent(1.0),
+                    width: Val::Percent(1.0),
-                    height: Dimension::Percent(1.0),
+                    height: Val::Percent(1.0),
                 },
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
@@ -111,10 +111,10 @@ fn setup(
         .with_children(|parent| {
             parent
                 .spawn(ButtonComponents {
-                    flex: Flex {
+                    style: Style {
                         size: Size {
-                            width: Dimension::Points(150.0),
+                            width: Val::Px(150.0),
-                            height: Dimension::Points(70.0),
+                            height: Val::Px(70.0),
                         },
                         ..Default::default()
                     },
@@ -123,13 +123,13 @@ fn setup(
                 })
                 .with_children(|parent| {
                     parent.spawn(TextComponents {
-                        flex: Flex {
+                        style: Style {
                             size: Size {
-                                width: Dimension::Percent(1.0),
+                                width: Val::Percent(1.0),
-                                height: Dimension::Percent(1.0),
+                                height: Val::Percent(1.0),
                             },
                             margin: Rect {
-                                top: Dimension::Points(10.0),
+                                top: Val::Px(10.0),
                                 ..Default::default()
                             },
                             ..Default::default()

examples/ui/font_atlas_debug.rs

@@ -68,7 +68,13 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut state: ResM
         .spawn(Camera2dComponents::default())
         // texture
         .spawn(TextComponents {
-            node: Node::new(Anchors::TOP_LEFT, Margins::new(0.0, 250.0, 0.0, 60.0)),
+            style: Style {
+                size: Size {
+                    width: Val::Px(250.0),
+                    height: Val::Px(60.0),
+                },
+                ..Default::default()
+            },
             text: Text {
                 value: "a".to_string(),
                 font: font_handle,

examples/ui/ui.rs

@@ -25,10 +25,10 @@ fn setup(
         .spawn(UiCameraComponents::default())
         // root node
         .spawn(NodeComponents {
-            flex: Flex {
+            style: Style {
                 size: Size {
-                    width: Dimension::Percent(1.0),
+                    width: Val::Percent(1.0),
-                    height: Dimension::Percent(1.0),
+                    height: Val::Percent(1.0),
                 },
                 justify_content: JustifyContent::SpaceBetween,
                 ..Default::default()
@@ -40,16 +40,16 @@ fn setup(
             parent
                 // left vertical fill
                 .spawn(NodeComponents {
-                    flex: Flex {
+                    style: Style {
                         size: Size {
-                            width: Dimension::Points(200.0),
+                            width: Val::Px(200.0),
-                            height: Dimension::Percent(1.0),
+                            height: Val::Percent(1.0),
                         },
                         border: Rect {
-                            start: Dimension::Points(10.0),
+                            start: Val::Px(10.0),
-                            end: Dimension::Points(10.0),
+                            end: Val::Px(10.0),
-                            top: Dimension::Points(10.0),
+                            top: Val::Px(10.0),
-                            bottom: Dimension::Points(10.0),
+                            bottom: Val::Px(10.0),
                         },
                         ..Default::default()
                     },
@@ -59,14 +59,14 @@ fn setup(
                 .with_children(|parent| {
                     parent
                         .spawn(NodeComponents {
-                            flex: Flex {
+                            style: Style {
                                 size: Size {
-                                    width: Dimension::Percent(1.0),
+                                    width: Val::Percent(1.0),
-                                    height: Dimension::Percent(1.0),
+                                    height: Val::Percent(1.0),
                                 },
                                 border: Rect {
-                                    bottom: Dimension::Points(5.0),
+                                    bottom: Val::Px(5.0),
-                                    start: Dimension::Points(5.0),
+                                    start: Val::Px(5.0),
                                     ..Default::default()
                                 },
                                 align_items: AlignItems::FlexEnd,
@@ -77,10 +77,10 @@ fn setup(
                         })
                         .with_children(|parent| {
                             parent.spawn(TextComponents {
-                                flex: Flex {
+                                style: Style {
                                     size: Size {
-                                        width: Dimension::Points(100.0),
+                                        width: Val::Px(100.0),
-                                        height: Dimension::Points(30.0),
+                                        height: Val::Px(30.0),
                                     },
                                     ..Default::default()
                                 },
@@ -101,143 +101,154 @@ fn setup(
                 })
                 // right vertical fill
                 .spawn(NodeComponents {
-                    flex: Flex {
+                    style: Style {
                         size: Size {
-                            width: Dimension::Points(100.0),
+                            width: Val::Px(100.0),
-                            height: Dimension::Percent(1.0),
+                            height: Val::Percent(1.0),
                         },
                         border: Rect {
-                            start: Dimension::Points(10.0),
+                            start: Val::Px(10.0),
-                            end: Dimension::Points(10.0),
+                            end: Val::Px(10.0),
-                            top: Dimension::Points(10.0),
+                            top: Val::Px(10.0),
-                            bottom: Dimension::Points(10.0),
+                            bottom: Val::Px(10.0),
                         },
                         ..Default::default()
                     },
                     material: materials.add(Color::rgb(0.02, 0.02, 0.02).into()),
                     ..Default::default()
+                })
+                // // left vertical fill
+                // .spawn(NodeComponents {
+                //     style: Style {
+                //         size: Size {
+                //             width: Val::Percent(0.20),
+                //             height: Val::Percent(0.20),
+                //         },
+                //         justify_content: JustifyContent::FlexEnd,
+                //         align_items: AlignItems::FlexEnd,
+                //         ..Default::default()
+                //     },
+                //     material: materials.add(Color::rgb(0.02, 0.8, 0.02).into()),
+                //     ..Default::default()
+                // })
+                // .with_children(|parent| {
+                //     parent.spawn(NodeComponents {
+                //         style: Style {
+                //             size: Size {
+                //                 width: Val::Percent(0.50),
+                //                 height: Val::Percent(0.50),
+                //             },
+                //             justify_content: JustifyContent::FlexEnd,
+                //             align_items: AlignItems::FlexEnd,
+                //             ..Default::default()
+                //         },
+                //         material: materials.add(Color::rgb(0.8, 0.02, 0.02).into()),
+                //         ..Default::default()
+                //     });
+                // });
+                // // right vertical fill
+                // .spawn(NodeComponents {
+                //     node: Node::new(Anchors::RIGHT_FULL, Margins::new(10.0, 100.0, 100.0, 100.0)),
+                //     material: materials.add(Color::rgb(0.02, 0.02, 0.02).into()),
+                //     ..Default::default()
+                // })
+                // // render order test: reddest in the back, whitest in the front
+                // .spawn(NodeComponents {
+                //     node: Node::positioned(
+                //         Vec2::new(75.0, 60.0),
+                //         Anchors::CENTER,
+                //         Margins::new(0.0, 100.0, 0.0, 100.0),
+                //     ),
+                //     material: materials.add(Color::rgb(1.0, 0.0, 0.0).into()),
+                //     ..Default::default()
+                // })
+                // .spawn(NodeComponents {
+                //     node: Node::positioned(
+                //         Vec2::new(50.0, 35.0),
+                //         Anchors::CENTER,
+                //         Margins::new(0.0, 100.0, 0.0, 100.0),
+                //     ),
+                //     material: materials.add(Color::rgb(1.0, 0.3, 0.3).into()),
+                //     ..Default::default()
+                // })
+                // .spawn(NodeComponents {
+                //     node: Node::positioned(
+                //         Vec2::new(100.0, 85.0),
+                //         Anchors::CENTER,
+                //         Margins::new(0.0, 100.0, 0.0, 100.0),
+                //     ),
+                //     material: materials.add(Color::rgb(1.0, 0.5, 0.5).into()),
+                //     ..Default::default()
+                // })
+                // .spawn(NodeComponents {
+                //     node: Node::positioned(
+                //         Vec2::new(150.0, 135.0),
+                //         Anchors::CENTER,
+                //         Margins::new(0.0, 100.0, 0.0, 100.0),
+                //     ),
+                //     material: materials.add(Color::rgb(1.0, 0.7, 0.7).into()),
+                //     ..Default::default()
+                // })
+                // // parenting
+                // .spawn(NodeComponents {
+                //     node: Node::positioned(
+                //         Vec2::new(210.0, 0.0),
+                //         Anchors::BOTTOM_LEFT,
+                //         Margins::new(0.0, 200.0, 10.0, 210.0),
+                //     ),
+                //     material: materials.add(Color::rgb(0.1, 0.1, 1.0).into()),
+                //     ..Default::default()
+                // })
+                // .with_children(|parent| {
+                //     parent.spawn(NodeComponents {
+                //         node: Node::new(Anchors::FULL, Margins::new(20.0, 20.0, 20.0, 20.0)),
+                //         material: materials.add(Color::rgb(0.6, 0.6, 1.0).into()),
+                //         ..Default::default()
+                //     });
+                // })
+                // // alpha test
+                // .spawn(NodeComponents {
+                //     node: Node::positioned(
+                //         Vec2::new(200.0, 185.0),
+                //         Anchors::CENTER,
+                //         Margins::new(0.0, 100.0, 0.0, 100.0),
+                //     ),
+                //     material: materials.add(Color::rgba(1.0, 0.9, 0.9, 0.4).into()),
+                //     draw: Draw {
+                //         is_transparent: true,
+                //         ..Default::default()
+                //     },
+                //     ..Default::default()
+                // })
+                // // texture
+                // .spawn(NodeComponents {
+                //     node: Node::new(
+                //         Anchors::CENTER_TOP,
+                //         Margins::new(-250.0, 250.0, 510.0 * aspect, 10.0),
+                //     ),
+                //     material: materials.add(ColorMaterial::texture(texture_handle)),
+                //     draw: Draw {
+                //         is_transparent: true,
+                //         ..Default::default()
+                //     },
+                //     ..Default::default()
+                // });
+                .spawn(NodeComponents {
+                    style: Style {
+                        size: Size {
+                            width: Val::Px(100.0),
+                            height: Val::Px(100.0),
+                        },
+                        border: Rect {
+                            start: Val::Px(10.0),
+                            end: Val::Px(10.0),
+                            top: Val::Px(10.0),
+                            bottom: Val::Px(10.0),
+                        },
+                        ..Default::default()
+                    },
+                    material: materials.add(Color::rgb(1.0, 0.0, 0.0).into()),
+                    ..Default::default()
                 });
-
-            // // left vertical fill
-
-            // .spawn(NodeComponents {
-            //     flex: Flex {
-            //         size: Size {
-            //             width: Dimension::Percent(0.20),
-            //             height: Dimension::Percent(0.20),
-            //         },
-            //         justify_content: JustifyContent::FlexEnd,
-            //         align_items: AlignItems::FlexEnd,
-            //         ..Default::default()
-            //     },
-            //     material: materials.add(Color::rgb(0.02, 0.8, 0.02).into()),
-            //     ..Default::default()
-            // })
-            // .with_children(|parent| {
-            //     parent.spawn(NodeComponents {
-            //         flex: Flex {
-            //             size: Size {
-            //                 width: Dimension::Percent(0.50),
-            //                 height: Dimension::Percent(0.50),
-            //             },
-            //             justify_content: JustifyContent::FlexEnd,
-            //             align_items: AlignItems::FlexEnd,
-            //             ..Default::default()
-            //         },
-            //         material: materials.add(Color::rgb(0.8, 0.02, 0.02).into()),
-            //         ..Default::default()
-            //     });
-            // });
-            // // right vertical fill
-            // .spawn(NodeComponents {
-            //     node: Node::new(Anchors::RIGHT_FULL, Margins::new(10.0, 100.0, 100.0, 100.0)),
-            //     material: materials.add(Color::rgb(0.02, 0.02, 0.02).into()),
-            //     ..Default::default()
-            // })
-            // // render order test: reddest in the back, whitest in the front
-            // .spawn(NodeComponents {
-            //     node: Node::positioned(
-            //         Vec2::new(75.0, 60.0),
-            //         Anchors::CENTER,
-            //         Margins::new(0.0, 100.0, 0.0, 100.0),
-            //     ),
-            //     material: materials.add(Color::rgb(1.0, 0.0, 0.0).into()),
-            //     ..Default::default()
-            // })
-            // .spawn(NodeComponents {
-            //     node: Node::positioned(
-            //         Vec2::new(50.0, 35.0),
-            //         Anchors::CENTER,
-            //         Margins::new(0.0, 100.0, 0.0, 100.0),
-            //     ),
-            //     material: materials.add(Color::rgb(1.0, 0.3, 0.3).into()),
-            //     ..Default::default()
-            // })
-            // .spawn(NodeComponents {
-            //     node: Node::positioned(
-            //         Vec2::new(100.0, 85.0),
-            //         Anchors::CENTER,
-            //         Margins::new(0.0, 100.0, 0.0, 100.0),
-            //     ),
-            //     material: materials.add(Color::rgb(1.0, 0.5, 0.5).into()),
-            //     ..Default::default()
-            // })
-            // .spawn(NodeComponents {
-            //     node: Node::positioned(
-            //         Vec2::new(150.0, 135.0),
-            //         Anchors::CENTER,
-            //         Margins::new(0.0, 100.0, 0.0, 100.0),
-            //     ),
-            //     material: materials.add(Color::rgb(1.0, 0.7, 0.7).into()),
-            //     ..Default::default()
-            // })
-            // // parenting
-            // .spawn(NodeComponents {
-            //     node: Node::positioned(
-            //         Vec2::new(210.0, 0.0),
-            //         Anchors::BOTTOM_LEFT,
-            //         Margins::new(0.0, 200.0, 10.0, 210.0),
-            //     ),
-            //     material: materials.add(Color::rgb(0.1, 0.1, 1.0).into()),
-            //     ..Default::default()
-            // })
-            // .with_children(|parent| {
-            //     parent.spawn(NodeComponents {
-            //         node: Node::new(Anchors::FULL, Margins::new(20.0, 20.0, 20.0, 20.0)),
-            //         material: materials.add(Color::rgb(0.6, 0.6, 1.0).into()),
-            //         ..Default::default()
-            //     });
-            // })
-            // // alpha test
-            // .spawn(NodeComponents {
-            //     node: Node::positioned(
-            //         Vec2::new(200.0, 185.0),
-            //         Anchors::CENTER,
-            //         Margins::new(0.0, 100.0, 0.0, 100.0),
-            //     ),
-            //     material: materials.add(Color::rgba(1.0, 0.9, 0.9, 0.4).into()),
-            //     draw: Draw {
-            //         is_transparent: true,
-            //         ..Default::default()
-            //     },
-            //     ..Default::default()
-            // })
-            // // texture
-            // .spawn(NodeComponents {
-            //     node: Node::new(
-            //         Anchors::CENTER_TOP,
-            //         Margins::new(-250.0, 250.0, 510.0 * aspect, 10.0),
-            //     ),
-            //     material: materials.add(ColorMaterial::texture(texture_handle)),
-            //     draw: Draw {
-            //         is_transparent: true,
-            //         ..Default::default()
-            //     },
-            //     ..Default::default()
-            // });
-        })
-        .spawn(NodeComponents {
-            material: materials.add(Color::rgb(1.0, 0.0, 0.0).into()),
-            ..Default::default()
         });
 }

examples/ui/ui_bench.rs

@@ -11,29 +11,36 @@ fn main() {
 fn placement_system(
     time: Res<Time>,
     materials: Res<Assets<ColorMaterial>>,
-    mut query: Query<(&mut Node, &Handle<ColorMaterial>)>,
+    mut query: Query<(&mut Style, &Handle<ColorMaterial>)>,
 ) {
-    for (mut node, material_handle) in &mut query.iter() {
+    for (mut style, material_handle) in &mut query.iter() {
         let material = materials.get(&material_handle).unwrap();
         if material.color.r > 0.2 {
-            node.position += Vec2::new(0.1 * time.delta_seconds, 0.0);
+            style.position.start += 0.1 * time.delta_seconds;
         }
     }
 }
 
 fn setup(mut commands: Commands, mut materials: ResMut<Assets<ColorMaterial>>) {
+    // 2d camera
     commands.spawn(Camera2dComponents::default());
 
     let mut prev = Vec2::default();
     let count = 1000;
     for i in 0..count {
-        // 2d camera
         let cur = Vec2::new(1.0, 1.0) + prev;
         commands.spawn(NodeComponents {
-            node: Node {
+            style: Style {
-                position: Vec2::new(75.0, 75.0) + cur,
+                size: Size {
-                anchors: Anchors::new(0.5, 0.5, 0.5, 0.5),
+                    width: Val::Px(100.0),
-                margins: Margins::new(0.0, 100.0, 0.0, 100.0),
+                    height: Val::Px(100.0),
+                },
+                position_type: PositionType::Absolute,
+                position: Rect {
+                    start: Val::Px(75.0 + cur.x()),
+                    top: Val::Px(75.0 + cur.y()),
+                    ..Default::default()
+                },
                 ..Default::default()
             },
             material: materials.add(Color::rgb(0.0 + i as f32 / count as f32, 0.1, 0.1).into()),

examples/window/multiple_windows.rs

@@ -6,7 +6,7 @@ use bevy::{
         render_graph::{CameraNode, PassNode, RenderGraph, WindowSwapChainNode, WindowTextureNode},
         texture::{TextureDescriptor, TextureFormat, TextureUsage},
     },
-    window::{CreateWindow, WindowDescriptor, WindowId, WindowReference},
+    window::{CreateWindow, WindowDescriptor, WindowId},
 };
 
 fn main() {
@@ -42,14 +42,14 @@ fn setup(
     // add a swapchain node for our new window
     render_graph.add_node(
         "second_window_swap_chain",
-        WindowSwapChainNode::new(WindowReference::Id(window_id)),
+        WindowSwapChainNode::new(window_id),
     );
 
     // add a new depth texture node for our new window
     render_graph.add_node(
         "second_window_depth_texture",
         WindowTextureNode::new(
-            WindowReference::Id(window_id),
+            window_id,
             TextureDescriptor {
                 format: TextureFormat::Depth32Float,
                 usage: TextureUsage::OUTPUT_ATTACHMENT,
@@ -148,7 +148,7 @@ fn setup(
         .spawn(Camera3dComponents {
             camera: Camera {
                 name: Some("Secondary".to_string()),
-                window: WindowReference::Id(window_id),
+                window: window_id,
                 ..Default::default()
             },
             transform: Transform::new_sync_disabled(Mat4::face_toward(