diff --git a/crates/bevy_math/src/geometry.rs b/crates/bevy_math/src/geometry.rs new file mode 100644 index 0000000000..7baffc9be2 --- /dev/null +++ b/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 { + pub width: T, + pub height: T, +} + +impl Size { + pub fn new(width: T, height: T) -> Self { + Size { width, height } + } +} + +impl Default for Size { + fn default() -> Self { + Self { + width: Default::default(), + height: Default::default(), + } + } +} + +#[derive(Copy, Clone, PartialEq, Debug)] +pub struct Rect { + pub start: T, + pub end: T, + pub top: T, + pub bottom: T, +} + +impl Default for Rect { + fn default() -> Self { + Self { + start: Default::default(), + end: Default::default(), + top: Default::default(), + bottom: Default::default(), + } + } +} + +impl Add for Size where T: Add { + type Output = Size; + fn add(self, rhs: Vec2) -> Self::Output { + Self { + width: self.width + rhs.x(), + height: self.height + rhs.y(), + } + } +} + +impl AddAssign for Size where T: AddAssign { + fn add_assign(&mut self, rhs: Vec2) { + self.width += rhs.x(); + self.height += rhs.y(); + } +} \ No newline at end of file diff --git a/crates/bevy_math/src/lib.rs b/crates/bevy_math/src/lib.rs index 76539fc460..2e69353029 100644 --- a/crates/bevy_math/src/lib.rs +++ b/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}; } diff --git a/crates/bevy_ui/src/entity.rs b/crates/bevy_ui/src/entity.rs index 4aeca30a48..17cf4bac1b 100644 --- a/crates/bevy_ui/src/entity.rs +++ b/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, // TODO: maybe abstract this out pub material: Handle, 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(), } diff --git a/crates/bevy_ui/src/flex/convert.rs b/crates/bevy_ui/src/flex/convert.rs new file mode 100644 index 0000000000..43f10eb2fd --- /dev/null +++ b/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(rect: Rect) -> stretch::geometry::Rect +where + T: From, +{ + stretch::geometry::Rect { + start: rect.start.into(), + end: rect.end.into(), + top: rect.top.into(), + bottom: rect.bottom.into(), + } +} + +fn from_size(size: Size) -> stretch::geometry::Size +where + T: From, +{ + 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 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 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 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 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 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 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 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 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 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 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, + } + } +} diff --git a/crates/bevy_ui/src/flex.rs b/crates/bevy_ui/src/flex/mod.rs similarity index 89% rename from crates/bevy_ui/src/flex.rs rename to crates/bevy_ui/src/flex/mod.rs index e62543f707..9083f8fd3a 100644 --- a/crates/bevy_ui/src/flex.rs +++ b/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::{ - geometry::Size, - result::Layout, - style::{Dimension, Style}, - Stretch, -}; +use stretch::Stretch; pub struct FlexSurface { entity_to_stretch: HashMap, @@ -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 { - ..Default::default() - }, + stretch::style::Style::default(), Vec::new(), ) .unwrap() @@ -77,10 +73,10 @@ impl FlexSurface { stretch .set_style( *node, - Style { - size: Size { - width: Dimension::Points(window.width as f32), - height: Dimension::Points(window.height as f32), + stretch::style::Style { + size: stretch::geometry::Size { + width: stretch::style::Dimension::Points(window.width 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) } diff --git a/crates/bevy_ui/src/focus.rs b/crates/bevy_ui/src/focus.rs index 49002c25af..2219b03044 100644 --- a/crates/bevy_ui/src/focus.rs +++ b/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 { diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs index 92f2ea9e33..16d7fc264b 100644 --- a/crates/bevy_ui/src/lib.rs +++ b/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, - }; - - pub use stretch::{ - geometry::{Point, Rect, Size}, - style::{Style as Flex, *}, + Anchors, Click, Hover, Margins, }; } diff --git a/crates/bevy_ui/src/node.rs b/crates/bevy_ui/src/node.rs index 957b68ea99..019477019e 100644 --- a/crates/bevy_ui/src/node.rs +++ b/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 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 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, + pub margin: Rect, + pub padding: Rect, + pub border: Rect, + pub flex_grow: f32, + pub flex_shrink: f32, + pub flex_basis: Val, + pub size: Size, + pub min_size: Size, + pub max_size: Size, + pub aspect_ratio: Option, +} + +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 + } +} \ No newline at end of file diff --git a/examples/game/breakout.rs b/examples/game/breakout.rs index cebee9b05e..c466d07d43 100644 --- a/examples/game/breakout.rs +++ b/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() }); diff --git a/examples/ui/button.rs b/examples/ui/button.rs index 524f7857a8..0064fee648 100644 --- a/examples/ui/button.rs +++ b/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), - height: Dimension::Percent(1.0), + width: Val::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), - height: Dimension::Points(70.0), + width: Val::Px(150.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), - height: Dimension::Percent(1.0), + width: Val::Percent(1.0), + height: Val::Percent(1.0), }, margin: Rect { - top: Dimension::Points(10.0), + top: Val::Px(10.0), ..Default::default() }, ..Default::default() diff --git a/examples/ui/font_atlas_debug.rs b/examples/ui/font_atlas_debug.rs index bb116a0097..ea69b4c185 100644 --- a/examples/ui/font_atlas_debug.rs +++ b/examples/ui/font_atlas_debug.rs @@ -68,7 +68,13 @@ fn setup(mut commands: Commands, asset_server: Res, 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, diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs index 1dcdfb210b..3485c641d3 100644 --- a/examples/ui/ui.rs +++ b/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), - height: Dimension::Percent(1.0), + width: Val::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), - height: Dimension::Percent(1.0), + width: Val::Px(200.0), + height: Val::Percent(1.0), }, border: Rect { - start: Dimension::Points(10.0), - end: Dimension::Points(10.0), - top: Dimension::Points(10.0), - bottom: Dimension::Points(10.0), + start: Val::Px(10.0), + end: Val::Px(10.0), + top: Val::Px(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), - height: Dimension::Percent(1.0), + width: Val::Percent(1.0), + height: Val::Percent(1.0), }, border: Rect { - bottom: Dimension::Points(5.0), - start: Dimension::Points(5.0), + bottom: Val::Px(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), - height: Dimension::Points(30.0), + width: Val::Px(100.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), - height: Dimension::Percent(1.0), + width: Val::Px(100.0), + height: Val::Percent(1.0), }, border: Rect { - start: Dimension::Points(10.0), - end: Dimension::Points(10.0), - top: Dimension::Points(10.0), - bottom: Dimension::Points(10.0), + 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(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() }); } diff --git a/examples/ui/ui_bench.rs b/examples/ui/ui_bench.rs index e65c3c2dee..ad657661ba 100644 --- a/examples/ui/ui_bench.rs +++ b/examples/ui/ui_bench.rs @@ -11,29 +11,36 @@ fn main() { fn placement_system( time: Res