Collecting Display, Position, Inset, Overflow into LayoutControl

Author: Weibye

crates/bevy_ui/src/flex/convert.rs

@@ -6,7 +6,7 @@ use crate::{
         },
         Position,
     },
-    prelude::FlexContainer,
+    Display,
 };
 use crate::{Size, UiRect, Val};
 
@@ -41,15 +41,15 @@ pub fn from_val_size(
 
 pub fn from_flex_layout(scale_factor: f64, value: FlexLayoutQueryItem<'_>) -> taffy::style::Style {
     taffy::style::Style {
-        display: (*value.layout).into(),
-        position_type: (*value.position).into(),
+        display: (value.control.display).into(),
+        position_type: (value.control.position).into(),
         flex_direction: value.layout.direction.into(),
         flex_wrap: value.layout.wrap.into(),
         align_items: value.layout.align_items.into(),
         align_self: value.child_layout.align_self.into(),
         align_content: value.layout.align_content.into(),
         justify_content: value.layout.justify_content.into(),
-        position: from_rect(scale_factor, value.offset.0),
+        position: from_rect(scale_factor, value.control.inset.0),
         margin: from_rect(scale_factor, value.spacing.margin),
         padding: from_rect(scale_factor, value.spacing.padding),
         border: from_rect(scale_factor, value.spacing.border),
@@ -120,11 +120,11 @@ impl From<AlignContent> for taffy::style::AlignContent {
     }
 }
 
-impl From<FlexContainer> for taffy::style::Display {
-    fn from(value: FlexContainer) -> Self {
-        match value.hide_from_layout {
-            false => taffy::style::Display::Flex,
-            true => taffy::style::Display::None,
+impl From<Display> for taffy::style::Display {
+    fn from(value: Display) -> Self {
+        match value {
+            Display::Flex => taffy::style::Display::Flex,
+            Display::None => taffy::style::Display::None,
         }
     }
 }

crates/bevy_ui/src/layout_components.rs

@@ -5,6 +5,20 @@ use bevy_ecs::prelude::Component;
 use bevy_reflect::prelude::*;
 use serde::{Deserialize, Serialize};
 
+/// Grouping of core control parameter of the layout for this node.
+#[derive(Component, Copy, Clone, PartialEq, Debug, Default, Serialize, Deserialize, Reflect)]
+#[reflect(PartialEq, Serialize, Deserialize)]
+pub struct LayoutControl {
+    /// Defines how the node will parttake in the layouting.
+    pub display: Display,
+    /// The strategy used to position this node.
+    pub position: Position,
+    /// The inset of this UI node, relative to its default position
+    pub inset: Inset,
+    /// The behavior in case the node overflows its allocated space
+    pub overflow: Overflow,
+}
+
 /// Defines how the node will parttake in the layouting.
 #[derive(Copy, Clone, PartialEq, Eq, Debug, Default, Serialize, Deserialize, Reflect)]
 #[reflect(PartialEq, Serialize, Deserialize)]
@@ -21,9 +35,7 @@ pub enum Display {
 }
 
 /// The strategy used to position this node.
-#[derive(
-    Component, Copy, Clone, PartialEq, Eq, Debug, Default, Serialize, Deserialize, Reflect,
-)]
+#[derive(Copy, Clone, PartialEq, Eq, Debug, Default, Serialize, Deserialize, Reflect)]
 #[reflect_value(PartialEq, Serialize, Deserialize)]
 pub enum Position {
     /// Positioned in relation to its parent, while considering all sibling-nodes that also have the [`Position::Relative`] value.
@@ -45,17 +57,7 @@ pub struct Gap(pub Size);
 /// Layouting is performed by the Flexbox layout algorithm where the value of [`Inset`] is considered.
 /// To check the final position of a UI element, read its [`Transform`](bevy_transform::components::Transform) component.
 #[derive(
-    Component,
-    Deref,
-    DerefMut,
-    Copy,
-    Clone,
-    PartialEq,
-    Debug,
-    Default,
-    Serialize,
-    Deserialize,
-    Reflect,
+    Deref, DerefMut, Copy, Clone, PartialEq, Debug, Default, Serialize, Deserialize, Reflect,
 )]
 #[reflect_value(PartialEq, Serialize, Deserialize)]
 pub struct Inset(pub UiRect);
@@ -240,9 +242,7 @@ impl Spacing {
 }
 
 /// Whether to show or hide overflowing items
-#[derive(
-    Component, Copy, Clone, PartialEq, Eq, Debug, Default, Reflect, Serialize, Deserialize,
-)]
+#[derive(Copy, Clone, PartialEq, Eq, Debug, Default, Reflect, Serialize, Deserialize)]
 #[reflect_value(PartialEq, Serialize, Deserialize)]
 pub enum Overflow {
     /// Show overflowing items
@@ -264,31 +264,24 @@ pub mod flex {
     /// See [`FlexLayoutChanged`] when attempting to use this as a query filter.
     #[derive(WorldQuery)]
     pub struct FlexLayoutQuery {
+        pub control: &'static LayoutControl,
         /// Defines how this node's layout should be.
         pub layout: &'static FlexContainer,
         /// Defines how  this node should behave as a child of a node.
         pub child_layout: &'static FlexItem,
-        /// The position of this UI node
-        pub offset: &'static Inset,
-        /// Whether the node should be absolute or relatively positioned
-        pub position: &'static Position,
         /// The constraints on the size of this node
         pub size_constraints: &'static SizeConstraints,
         /// The margin, padding and border of the UI node
         pub spacing: &'static Spacing,
-        /// The behavior in case the node overflows its allocated space
-        pub overflow: &'static Overflow,
     }
 
     /// A type alias for when any of the components in a [`FlexLayoutQuery`] have changed.
     pub type FlexLayoutChanged = Or<(
+        Changed<LayoutControl>,
         Changed<FlexContainer>,
         Changed<FlexItem>,
-        Changed<Inset>,
-        Changed<Position>,
         Changed<SizeConstraints>,
         Changed<Spacing>,
-        Changed<Overflow>,
     )>;
 
     /// The flexbox-specific layout configuration of a UI node
@@ -312,10 +305,6 @@ pub mod flex {
         pub justify_content: JustifyContent,
         /// Controls how the content wraps
         pub wrap: Wrap,
-        /// If true will hide this node from the layouting.
-        ///
-        /// Same as specifying in css `Display: None;`
-        pub hide_from_layout: bool,
         /// The size of the gutters between the rows and columns of the flexbox layout
         pub gap: Gap,
     }

crates/bevy_ui/src/lib.rs

@@ -91,6 +91,7 @@ impl Plugin for UiPlugin {
             .register_type::<AlignItems>()
             .register_type::<AlignSelf>()
             .register_type::<CalculatedSize>()
+            .register_type::<LayoutControl>()
             .register_type::<FlexContainer>()
             .register_type::<FlexItem>()
             .register_type::<Gap>()

crates/bevy_ui/src/node_bundles.rs

@@ -1,10 +1,11 @@
 //! This module contains basic node bundles used to build UIs
 
 use crate::{
-    layout_components::{Inset, Overflow, Position, SizeConstraints, Spacing},
+    layout_components::{Inset, Position, SizeConstraints, Spacing},
     prelude::{FlexContainer, FlexItem},
     widget::Button,
-    BackgroundColor, CalculatedSize, FocusPolicy, Interaction, Node, UiImage, ZIndex,
+    BackgroundColor, CalculatedSize, FocusPolicy, Interaction, LayoutControl, Node, UiImage,
+    ZIndex,
 };
 use bevy_ecs::bundle::Bundle;
 use bevy_render::{
@@ -21,20 +22,18 @@ use bevy_transform::prelude::{GlobalTransform, Transform};
 pub struct NodeBundle {
     /// Describes the size of the node
     pub node: Node,
+    /// Core controls for layouting of this node.
+    ///
+    /// See: [`Display`](crate::Display), [`Position`](crate::Position), [`Inset`](crate::Inset), [`Overflow`](crate::Overflow).
+    pub control: LayoutControl,
     /// Defines how this node's layout should be.
     pub layout: FlexContainer,
     /// Defines how  this node should behave as a child of a node.
     pub child_layout: FlexItem,
-    /// The inset of this UI node, relative to its default position
-    pub inset: Inset,
-    /// Whether the node should be absolute or relatively positioned
-    pub position: Position,
     /// The constraints on the size of this node
     pub size_constraints: SizeConstraints,
     /// The margin, padding and border of the UI node
     pub spacing: Spacing,
-    /// The behavior in case the node overflows its allocated space
-    pub overflow: Overflow,
     /// The background color, which serves as a "fill" for this node
     pub background_color: BackgroundColor,
     /// Whether this node should block interaction with lower nodes
@@ -44,14 +43,14 @@ pub struct NodeBundle {
     /// This field is automatically managed by the UI layout system.
     /// To alter the position of this entity, use the properties of layouting components.
     ///
-    /// See: [`FlexContainer`], [`FlexItem`], [`Inset`], [`Position`], [`SizeConstraints`], [`Spacing`], [`Overflow`].
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub transform: Transform,
     /// The global transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
     /// To alter the position of this entity, use the properties of layouting components.
     ///
-    /// See: [`FlexContainer`], [`FlexItem`], [`Inset`], [`Position`], [`SizeConstraints`], [`Spacing`], [`Overflow`].
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub global_transform: GlobalTransform,
     /// Describes the visibility properties of the node
     pub visibility: Visibility,
@@ -64,15 +63,13 @@ pub struct NodeBundle {
 impl Default for NodeBundle {
     fn default() -> Self {
         NodeBundle {
-            // Transparent background
             node: Default::default(),
+            control: Default::default(),
             layout: Default::default(),
             child_layout: Default::default(),
-            inset: Default::default(),
-            position: Default::default(),
             size_constraints: Default::default(),
             spacing: Default::default(),
-            overflow: Default::default(),
+            // Transparent background
             background_color: Color::NONE.into(),
             focus_policy: Default::default(),
             transform: Default::default(),
@@ -89,20 +86,18 @@ impl Default for NodeBundle {
 pub struct ImageBundle {
     /// Describes the size of the node
     pub node: Node,
+    /// Core controls for layouting of this node.
+    ///
+    /// See: [`Display`](crate::Display), [`Position`](crate::Position), [`Inset`](crate::Inset), [`Overflow`](crate::Overflow).
+    pub control: LayoutControl,
     /// Defines how this node's layout should be.
     pub layout: FlexContainer,
     /// Defines how  this node should behave as a child of a node.
     pub child_layout: FlexItem,
-    /// The inset of this UI node, relative to its default position
-    pub inset: Inset,
-    /// Whether the node should be absolute or relatively positioned
-    pub position: Position,
     /// The constraints on the size of this node
     pub size_constraints: SizeConstraints,
     /// The margin, padding and border of the UI node
     pub spacing: Spacing,
-    /// The behavior in case the node overflows its allocated space
-    pub overflow: Overflow,
     /// The calculated size based on the given image
     pub calculated_size: CalculatedSize,
     /// The background color, which serves as a "fill" for this node
@@ -118,14 +113,14 @@ pub struct ImageBundle {
     /// This field is automatically managed by the UI layout system.
     /// To alter the position of this entity, use the properties of layouting components.
     ///
-    /// See: [`FlexContainer`], [`FlexItem`], [`Inset`], [`Position`], [`SizeConstraints`], [`Spacing`], [`Overflow`].
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub transform: Transform,
     /// The global transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
     /// To alter the position of this entity, use the properties of layouting components.
     ///
-    /// See: [`FlexContainer`], [`FlexItem`], [`Inset`], [`Position`], [`SizeConstraints`], [`Spacing`], [`Overflow`].
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub global_transform: GlobalTransform,
     /// Describes the visibility properties of the node
     pub visibility: Visibility,
@@ -140,20 +135,18 @@ pub struct ImageBundle {
 pub struct TextBundle {
     /// Describes the size of the node
     pub node: Node,
+    /// Core controls for layouting of this node.
+    ///
+    /// See: [`Display`](crate::Display), [`Position`](crate::Position), [`Inset`](crate::Inset), [`Overflow`](crate::Overflow).
+    pub control: LayoutControl,
     /// Defines how this node's layout should be.
     pub layout: FlexContainer,
     /// Defines how  this node should behave as a child of a node.
     pub child_layout: FlexItem,
-    /// The inset of this UI node, relative to its default position
-    pub inset: Inset,
-    /// Whether the node should be absolute or relatively positioned
-    pub position: Position,
     /// The constraints on the size of this node
     pub size_constraints: SizeConstraints,
     /// The margin, padding and border of the UI node
     pub spacing: Spacing,
-    /// The behavior in case the node overflows its allocated space
-    pub overflow: Overflow,
     /// Contains the text of the node
     pub text: Text,
     /// The calculated size based on the given image
@@ -165,14 +158,14 @@ pub struct TextBundle {
     /// This field is automatically managed by the UI layout system.
     /// To alter the position of this entity, use the properties of layouting components.
     ///
-    /// See: [`FlexContainer`], [`FlexItem`], [`Inset`], [`Position`], [`SizeConstraints`], [`Spacing`], [`Overflow`].
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub transform: Transform,
     /// The global transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
     /// To alter the position of this entity, use the properties of layouting components.
     ///
-    /// See: [`FlexContainer`], [`FlexItem`], [`Inset`], [`Position`], [`SizeConstraints`], [`Spacing`], [`Overflow`].
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub global_transform: GlobalTransform,
     /// Describes the visibility properties of the node
     pub visibility: Visibility,
@@ -235,13 +228,13 @@ impl TextBundle {
 
     /// Returns this [`TextBundle`] with a new [`Position`].
     pub const fn with_position(mut self, position: Position) -> Self {
-        self.position = position;
+        self.control.position = position;
         self
     }
 
     /// Returns this [`TextBundle`] with a new [`Inset`].
     pub const fn with_inset(mut self, inset: Inset) -> Self {
-        self.inset = inset;
+        self.control.inset = inset;
         self
     }
 }
@@ -254,16 +247,14 @@ impl Default for TextBundle {
             node: Default::default(),
             calculated_size: Default::default(),
             layout: Default::default(),
+            control: Default::default(),
             child_layout: Default::default(),
-            position: Default::default(),
             size_constraints: Default::default(),
-            overflow: Default::default(),
             transform: Default::default(),
             global_transform: Default::default(),
             visibility: Default::default(),
             computed_visibility: Default::default(),
             z_index: Default::default(),
-            inset: Default::default(),
             spacing: Default::default(),
         }
     }
@@ -276,20 +267,18 @@ pub struct ButtonBundle {
     pub node: Node,
     /// Marker component that signals this node is a button
     pub button: Button,
+    /// Core controls for layouting of this node.
+    ///
+    /// See: [`Display`](crate::Display), [`Position`](crate::Position), [`Inset`](crate::Inset), [`Overflow`](crate::Overflow).
+    pub control: LayoutControl,
     /// Defines how this node's layout should be.
     pub layout: FlexContainer,
     /// Defines how  this node should behave as a child of a node.
     pub child_layout: FlexItem,
-    /// The inset of this UI node, relative to its default position
-    pub inset: Inset,
-    /// Whether the node should be absolute or relatively positioned
-    pub position: Position,
     /// The constraints on the size of this node
     pub size_constraints: SizeConstraints,
     /// The margin, padding and border of the UI node
     pub spacing: Spacing,
-    /// The behavior in case the node overflows its allocated space
-    pub overflow: Overflow,
     /// Describes whether and how the button has been interacted with by the input
     pub interaction: Interaction,
     /// Whether this node should block interaction with lower nodes
@@ -305,14 +294,14 @@ pub struct ButtonBundle {
     /// This field is automatically managed by the UI layout system.
     /// To alter the position of this entity, use the properties of layouting components.
     ///
-    /// See: [`FlexContainer`], [`FlexItem`], [`Inset`], [`Position`], [`SizeConstraints`], [`Spacing`], [`Overflow`].
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub transform: Transform,
     /// The global transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
     /// To alter the position of this entity, use the properties of layouting components.
     ///
-    /// See: [`FlexContainer`], [`FlexItem`], [`Inset`], [`Position`], [`SizeConstraints`], [`Spacing`], [`Overflow`].
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub global_transform: GlobalTransform,
     /// Describes the visibility properties of the node
     pub visibility: Visibility,