Mirrors/bevy
2
0
Fork 0
mirror of https://github.com/bevyengine/bevy synced 2024-11-22 12:43:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

ui: create bevy types for flex style

Browse source
This commit is contained in:
Carter Anderson 2020-07-26 12:27:09 -07:00
parent e7b22ac043
commit 3d5e7e54f3
14 changed files with 688 additions and 211 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
crates/bevy_math/src/geometry.rs Normal file
View file

@ -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();
}
}

4
crates/bevy_math/src/lib.rs
View file

@ -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};
}

27
crates/bevy_ui/src/entity.rs
View file

@ -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(),
}

169
crates/bevy_ui/src/flex/convert.rs Normal file
View file

@ -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,
}
}
}

30
crates/bevy_ui/src/flex.rs → crates/bevy_ui/src/flex/mod.rs
View file

@ -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<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 {
..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)
}

2
crates/bevy_ui/src/focus.rs
View file

@ -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 {

8
crates/bevy_ui/src/lib.rs
View file

@ -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,
};
}

232
crates/bevy_ui/src/node.rs
View file

@ -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
}
}

4
examples/game/breakout.rs
View file

@ -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()
});

20
examples/ui/button.rs
View file

@ -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()

8
examples/ui/font_atlas_debug.rs
View file

@ -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,

305
examples/ui/ui.rs
View file

@ -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()
});
}

23
examples/ui/ui_bench.rs
View file

@ -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 {
position: Vec2::new(75.0, 75.0) + cur,
anchors: Anchors::new(0.5, 0.5, 0.5, 0.5),
margins: Margins::new(0.0, 100.0, 0.0, 100.0),
style: Style {
size: Size {
width: Val::Px(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()),

8
examples/window/multiple_windows.rs
View file

@ -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(