Allow constraining Text in percent of window & container size

Cargo.toml

@@ -1452,6 +1452,16 @@ description = "Illustrates various features of Bevy UI"
 category = "UI (User Interface)"
 wasm = true
 
+[[example]]
+name = "text_wrap"
+path = "examples/ui/text_wrap.rs"
+
+[package.metadata.example.text_wrap]
+name = "Text Wrap"
+description = "Illustrates wrapping text"
+category = "UI (User Interface)"
+wasm = true
+
 # Window
 [[example]]
 name = "clear_color"

crates/bevy_ui/src/widget/text.rs

@@ -5,11 +5,13 @@ use bevy_ecs::{
     query::{Changed, Or, With},
     system::{Local, ParamSet, Query, Res, ResMut},
 };
+
+use bevy_hierarchy::Parent;
 use bevy_math::Vec2;
 use bevy_render::texture::Image;
 use bevy_sprite::TextureAtlas;
 use bevy_text::{DefaultTextPipeline, Font, FontAtlasSet, Text, TextError};
-use bevy_window::{WindowId, Windows};
+use bevy_window::Windows;
 
 #[derive(Debug, Default)]
 pub struct QueuedText {
@@ -22,14 +24,26 @@ fn scale_value(value: f32, factor: f64) -> f32 {
 
 /// Defines how `min_size`, `size`, and `max_size` affects the bounds of a text
 /// block.
-pub fn text_constraint(min_size: Val, size: Val, max_size: Val, scale_factor: f64) -> f32 {
+pub fn text_constraint(
+    min_size: Val,
+    size: Val,
+    max_size: Val,
+    scale_factor: f64,
+    window_size: f32,
+) -> f32 {
     // Needs support for percentages
     match (min_size, size, max_size) {
         (_, _, Val::Px(max)) => scale_value(max, scale_factor),
+        (_, _, Val::Percent(max)) => scale_value((max / 100.) * window_size, scale_factor),
         (Val::Px(min), _, _) => scale_value(min, scale_factor),
+        (Val::Percent(min), _, _) => scale_value((min / 100.) * window_size, scale_factor),
         (Val::Undefined, Val::Px(size), Val::Undefined) | (Val::Auto, Val::Px(size), Val::Auto) => {
             scale_value(size, scale_factor)
         }
+        (Val::Undefined, Val::Percent(size), Val::Undefined)
+        | (Val::Auto, Val::Percent(size), Val::Auto) => {
+            scale_value((size / 100.) * window_size, scale_factor)
+        }
         _ => f32::MAX,
     }
 }
@@ -39,7 +53,7 @@ pub fn text_constraint(min_size: Val, size: Val, max_size: Val, scale_factor: f6
 #[allow(clippy::too_many_arguments)]
 pub fn text_system(
     mut queued_text: Local<QueuedText>,
-    mut last_scale_factor: Local<f64>,
+    mut last_window_details: Local<(f64, f32, f32)>,
     mut textures: ResMut<Assets<Image>>,
     fonts: Res<Assets<Font>>,
     windows: Res<Windows>,
@@ -49,15 +63,25 @@ pub fn text_system(
     mut text_queries: ParamSet<(
         Query<Entity, Or<(Changed<Text>, Changed<Style>)>>,
         Query<Entity, (With<Text>, With<Style>)>,
-        Query<(&Text, &Style, &mut CalculatedSize)>,
+        Query<(&Text, &Style, &mut CalculatedSize, Option<&Parent>)>,
     )>,
+    style_query: Query<&Style>,
 ) {
-    let scale_factor = windows.scale_factor(WindowId::primary());
+    // FIXME: this will be problematic for multi-window UI's since its only checking the primary display
+    let (scale_factor, window_width_constraint, window_height_constraint) =
+        if let Some(window) = windows.get_primary() {
+            (window.scale_factor(), window.width(), window.height())
+        } else {
+            (1., f32::MAX, f32::MAX)
+        };
 
     let inv_scale_factor = 1. / scale_factor;
 
     #[allow(clippy::float_cmp)]
-    if *last_scale_factor == scale_factor {
+    if last_window_details.0 == scale_factor
+        && last_window_details.1 == window_width_constraint
+        && last_window_details.2 == window_height_constraint
+    {
         // Adds all entities where the text or the style has changed to the local queue
         for entity in text_queries.p0().iter() {
             queued_text.entities.push(entity);
@@ -67,7 +91,9 @@ pub fn text_system(
         for entity in text_queries.p1().iter() {
             queued_text.entities.push(entity);
         }
-        *last_scale_factor = scale_factor;
+        last_window_details.0 = scale_factor;
+        last_window_details.1 = window_width_constraint;
+        last_window_details.2 = window_height_constraint;
     }
 
     if queued_text.entities.is_empty() {
@@ -78,19 +104,34 @@ pub fn text_system(
     let mut new_queue = Vec::new();
     let mut query = text_queries.p2();
     for entity in queued_text.entities.drain(..) {
-        if let Ok((text, style, mut calculated_size)) = query.get_mut(entity) {
+        if let Ok((text, style, mut calculated_size, parent)) = query.get_mut(entity) {
+            let mut scale_factor_width = scale_factor;
+            let mut scale_factor_height = scale_factor;
+            if let Some(parent) = parent {
+                if let Ok(style) = style_query.get(parent.get()) {
+                    if let Val::Percent(percentage) = style.size.width {
+                        scale_factor_width = percentage as f64 / (scale_factor * 100.);
+                    }
+                    if let Val::Percent(percentage) = style.size.height {
+                        scale_factor_height = percentage as f64 / (scale_factor * 100.);
+                    }
+                }
+            }
+
             let node_size = Vec2::new(
                 text_constraint(
                     style.min_size.width,
                     style.size.width,
                     style.max_size.width,
-                    scale_factor,
+                    scale_factor_width,
+                    window_width_constraint,
                 ),
                 text_constraint(
                     style.min_size.height,
                     style.size.height,
                     style.max_size.height,
-                    scale_factor,
+                    scale_factor_height,
+                    window_height_constraint,
                 ),
             );
 
@@ -128,3 +169,71 @@ pub fn text_system(
 
     queued_text.entities = new_queue;
 }
+
+#[cfg(test)]
+mod tests {
+    use super::text_constraint;
+    use crate::Val;
+
+    #[test]
+    fn should_constrain_based_on_pixel_values() {
+        assert_eq!(
+            text_constraint(Val::Px(100.), Val::Undefined, Val::Undefined, 1., 1.),
+            100.
+        );
+        assert_eq!(
+            text_constraint(Val::Undefined, Val::Undefined, Val::Px(100.), 1., 1.),
+            100.
+        );
+        assert_eq!(
+            text_constraint(Val::Undefined, Val::Px(100.), Val::Undefined, 1., 1.),
+            100.
+        );
+    }
+
+    #[test]
+    fn should_constrain_based_on_percent_values() {
+        assert_eq!(
+            text_constraint(Val::Percent(33.), Val::Undefined, Val::Undefined, 1., 1000.),
+            330.
+        );
+        assert_eq!(
+            text_constraint(Val::Undefined, Val::Undefined, Val::Percent(33.), 1., 1000.),
+            330.
+        );
+        assert_eq!(
+            text_constraint(Val::Undefined, Val::Percent(33.), Val::Undefined, 1., 1000.),
+            330.
+        );
+    }
+
+    #[test]
+    fn should_ignore_min_if_max_is_given() {
+        assert_eq!(
+            text_constraint(
+                Val::Percent(33.),
+                Val::Undefined,
+                Val::Percent(50.),
+                1.,
+                1000.
+            ),
+            500.,
+            "min in percent and max in percent"
+        );
+        assert_eq!(
+            text_constraint(Val::Px(33.), Val::Undefined, Val::Px(50.), 1., 1000.),
+            50.,
+            "min in px and max in px"
+        );
+        assert_eq!(
+            text_constraint(Val::Px(33.), Val::Undefined, Val::Percent(50.), 1., 1000.),
+            500.,
+            "min in px and max in percent"
+        );
+        assert_eq!(
+            text_constraint(Val::Percent(33.), Val::Undefined, Val::Px(50.), 1., 1000.),
+            50.,
+            "min in percent and max in px"
+        );
+    }
+}

examples/README.md

@@ -311,6 +311,7 @@ Example | Description
 [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally)
 [Text](../examples/ui/text.rs) | Illustrates creating and updating text
 [Text Debug](../examples/ui/text_debug.rs) | An example for debugging text layout
+[Text Wrap](../examples/ui/text_wrap.rs) | Illustrates wrapping text
 [Transparency UI](../examples/ui/transparency_ui.rs) | Demonstrates transparency for UI
 [UI](../examples/ui/ui.rs) | Illustrates various features of Bevy UI
 

examples/ui/text_wrap.rs

@@ -0,0 +1,67 @@
+use bevy::prelude::*;
+
+fn main() {
+    App::new()
+        .insert_resource(ClearColor(Color::rgb(0.4, 0.4, 0.4)))
+        .add_plugins(DefaultPlugins)
+        .add_startup_system(setup)
+        .run();
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    commands.spawn_bundle(Camera2dBundle::default());
+
+    commands
+        .spawn_bundle(NodeBundle {
+            // Root Panel, covers the entire screen
+            style: Style {
+                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                justify_content: JustifyContent::SpaceBetween,
+                ..default()
+            },
+            color: Color::NONE.into(),
+            ..default()
+        })
+        .with_children(|parent| {
+            spawn_left_panel(parent, &asset_server);
+        });
+}
+
+fn spawn_left_panel(parent: &mut ChildBuilder, asset_server: &Res<AssetServer>) {
+    parent
+        .spawn_bundle(NodeBundle {
+            style: Style {
+                flex_direction: FlexDirection::ColumnReverse,
+                size: Size::new(Val::Percent(50.0), Val::Percent(100.0)),
+                ..default()
+            },
+            color: Color::rgb(0.10, 0.10, 0.10).into(),
+            ..default()
+        })
+        .with_children(|parent| {
+            parent
+                .spawn_bundle(TextBundle::from_section(
+                        "This is a super long text, that I would hope would get wrapped. It should only fill half the container size",
+                        TextStyle {
+                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                            font_size: 20.0,
+                            color: Color::WHITE,
+                        }
+                    ).with_style(Style {
+                        max_size: Size::new(Val::Percent(50.0), Val::Undefined),
+                        ..default()
+                    }));
+            parent
+                    .spawn_bundle(TextBundle::from_section(
+                            "This is another super long text, that I would hope would get wrapped. It should fill the whole container",
+                            TextStyle {
+                                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                font_size: 20.0,
+                                color: Color::GRAY,
+                            }
+                        ).with_style(Style {
+                            max_size: Size::new(Val::Percent(100.0), Val::Undefined),
+                            ..default()
+                        }));
+                });
+}