Promote Wrap to its own component

crates/bevy_ui/src/entity.rs

@@ -3,7 +3,7 @@
 use crate::{
     layout_components::{
         flex::FlexboxLayout, LayoutStrategy, Offset, Overflow, PositionType, SizeConstraints,
-        Spacing, TextDirection,
+        Spacing, TextDirection, Wrap,
     },
     widget::{Button, ImageMode},
     CalculatedSize, FocusPolicy, Interaction, Node, UiColor, UiImage,
@@ -39,6 +39,8 @@ pub struct NodeBundle {
     pub flexbox_layout: FlexboxLayout,
     /// The direction of the text
     pub text_direction: TextDirection,
+    /// Controls how the content wraps
+    pub wrap: Wrap,
     /// The behavior in case the node overflows its allocated space
     pub overflow: Overflow,
     /// Describes the color of the node
@@ -76,6 +78,8 @@ pub struct ImageBundle {
     pub flexbox_layout: FlexboxLayout,
     /// The direction of the text
     pub text_direction: TextDirection,
+    /// Controls how the content wraps
+    pub wrap: Wrap,
     /// The behavior in case the node overflows its allocated space
     pub overflow: Overflow,
     /// Configures how the image should scale
@@ -117,6 +121,8 @@ pub struct TextBundle {
     pub flexbox_layout: FlexboxLayout,
     /// The direction of the text
     pub text_direction: TextDirection,
+    /// Controls how the content wraps
+    pub wrap: Wrap,
     /// The behavior in case the node overflows its allocated space
     pub overflow: Overflow,
     /// Contains the text of the node
@@ -181,6 +187,7 @@ impl Default for TextBundle {
             size_constraints: Default::default(),
             flexbox_layout: Default::default(),
             text_direction: Default::default(),
+            wrap: Default::default(),
             overflow: Default::default(),
             transform: Default::default(),
             global_transform: Default::default(),
@@ -213,6 +220,8 @@ pub struct ButtonBundle {
     pub flexbox_layout: FlexboxLayout,
     /// The direction of the text
     pub text_direction: TextDirection,
+    /// Controls how the content wraps
+    pub wrap: Wrap,
     /// 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

crates/bevy_ui/src/flex/convert.rs

@@ -1,9 +1,8 @@
-use crate::{
-    layout_components::{
-        flex::{AlignContent, AlignItems, AlignSelf, FlexDirection, FlexWrap, JustifyContent},
-        PositionType,
+use crate::layout_components::{
+    flex::{
+        AlignContent, AlignItems, AlignSelf, FlexDirection, FlexboxLayoutQueryItem, JustifyContent,
     },
-    prelude::{flex::FlexboxLayoutQueryItem, LayoutStrategy},
+    LayoutStrategy, PositionType, Wrap,
 };
 use crate::{Size, UiRect, Val};
 
@@ -45,7 +44,7 @@ pub fn from_flexbox_layout(
         display: (*value.layout_strategy).into(),
         position_type: (*value.position_type).into(),
         flex_direction: value.flexbox_layout.flex_direction.into(),
-        flex_wrap: value.flexbox_layout.wrap.into(),
+        flex_wrap: (*value.wrap).into(),
         align_items: value.flexbox_layout.align_items.into(),
         align_self: value.flexbox_layout.align_self.into(),
         align_content: value.flexbox_layout.align_content.into(),
@@ -156,12 +155,12 @@ impl From<PositionType> for taffy::style::PositionType {
     }
 }
 
-impl From<FlexWrap> for taffy::style::FlexWrap {
-    fn from(value: FlexWrap) -> Self {
+impl From<Wrap> for taffy::style::FlexWrap {
+    fn from(value: Wrap) -> Self {
         match value {
-            FlexWrap::NoWrap => taffy::style::FlexWrap::NoWrap,
-            FlexWrap::Wrap => taffy::style::FlexWrap::Wrap,
-            FlexWrap::WrapReverse => taffy::style::FlexWrap::WrapReverse,
+            Wrap::NoWrap => taffy::style::FlexWrap::NoWrap,
+            Wrap::Wrap => taffy::style::FlexWrap::Wrap,
+            Wrap::WrapReverse => taffy::style::FlexWrap::WrapReverse,
         }
     }
 }

crates/bevy_ui/src/layout_components.rs

@@ -115,12 +115,32 @@ pub enum Overflow {
     Hidden,
 }
 
+/// Defines if child UI items appear on a single line or on multiple lines
+#[derive(
+    Component, Copy, Clone, PartialEq, Eq, Debug, Default, Serialize, Deserialize, Reflect,
+)]
+#[reflect_value(PartialEq, Serialize, Deserialize)]
+pub enum Wrap {
+    /// Single line, will overflow if needed
+    #[default]
+    NoWrap,
+    /// Multiple lines, if needed
+    Wrap,
+    /// Same as [`FlexWrap::Wrap`] but new lines will appear before the previous one
+    WrapReverse,
+}
+
 /// Flexbox-specific layout components
 pub mod flex {
-
+    use super::{
+        LayoutStrategy, Offset, Overflow, PositionType, SizeConstraints, Spacing, TextDirection,
+        Wrap,
+    };
+    use crate::Val;
+    use bevy_ecs::prelude::Component;
     use bevy_ecs::query::{Changed, Or, WorldQuery};
-
-    use super::*;
+    use bevy_reflect::prelude::*;
+    use serde::{Deserialize, Serialize};
 
     /// A query for all of the components in a [`FlexboxLayoutBundle`].
     ///
@@ -141,6 +161,8 @@ pub mod flex {
         pub flexbox_layout: &'static FlexboxLayout,
         /// The direction of the text
         pub text_direction: &'static TextDirection,
+        /// Controls how the content wraps
+        pub wrap: &'static Wrap,
         /// The behavior in case the node overflows its allocated space
         pub overflow: &'static Overflow,
     }
@@ -177,8 +199,6 @@ pub mod flex {
         pub align_content: AlignContent,
         /// Aligns this containers items along the main-axis
         pub justify_content: JustifyContent,
-        /// Controls how the content wraps
-        pub wrap: FlexWrap,
         /// Defines how much a flexbox item should grow if there's space available
         pub grow: f32,
         /// How to shrink if there's not enough space available
@@ -197,7 +217,6 @@ pub mod flex {
                 align_self: Default::default(),
                 align_content: Default::default(),
                 justify_content: Default::default(),
-                wrap: Default::default(),
                 grow: 0.0,
                 shrink: 1.0,
                 basis: Val::Auto,
@@ -298,17 +317,4 @@ pub mod flex {
         /// Like [`JustifyContent::SpaceAround`] but with even spacing between items
         SpaceEvenly,
     }
-
-    /// Defines if flexbox items appear on a single line or on multiple lines
-    #[derive(Copy, Clone, PartialEq, Eq, Debug, Default, Serialize, Deserialize, Reflect)]
-    #[reflect_value(PartialEq, Serialize, Deserialize)]
-    pub enum FlexWrap {
-        /// Single line, will overflow if needed
-        #[default]
-        NoWrap,
-        /// Multiple lines, if needed
-        Wrap,
-        /// Same as [`FlexWrap::Wrap`] but new lines will appear before the previous one
-        WrapReverse,
-    }
 }

crates/bevy_ui/src/lib.rs

@@ -64,7 +64,7 @@ impl Plugin for UiPlugin {
             .register_type::<TextDirection>()
             .register_type::<LayoutStrategy>()
             .register_type::<FlexDirection>()
-            .register_type::<FlexWrap>()
+            .register_type::<Wrap>()
             .register_type::<FocusPolicy>()
             .register_type::<Interaction>()
             .register_type::<JustifyContent>()