overflow/
overflow.rs

1//! Simple example demonstrating overflow behavior.
2
3use bevy::{color::palettes::css::*, prelude::*, winit::WinitSettings};
4
5fn main() {
6    App::new()
7        .add_plugins(DefaultPlugins)
8        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
9        .insert_resource(WinitSettings::desktop_app())
10        .add_systems(Startup, setup)
11        .add_systems(Update, update_outlines)
12        .run();
13}
14
15fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
16    commands.spawn(Camera2d);
17
18    let text_style = TextFont::default();
19
20    let image = asset_server.load("branding/icon.png");
21
22    commands
23        .spawn((
24            Node {
25                width: Val::Percent(100.),
26                height: Val::Percent(100.),
27                align_items: AlignItems::Center,
28                justify_content: JustifyContent::Center,
29                ..Default::default()
30            },
31            BackgroundColor(ANTIQUE_WHITE.into()),
32        ))
33        .with_children(|parent| {
34            for overflow in [
35                Overflow::visible(),
36                Overflow::clip_x(),
37                Overflow::clip_y(),
38                Overflow::clip(),
39            ] {
40                parent
41                    .spawn(Node {
42                        flex_direction: FlexDirection::Column,
43                        align_items: AlignItems::Center,
44                        margin: UiRect::horizontal(Val::Px(25.)),
45                        ..Default::default()
46                    })
47                    .with_children(|parent| {
48                        let label = format!("{overflow:#?}");
49                        parent
50                            .spawn((
51                                Node {
52                                    padding: UiRect::all(Val::Px(10.)),
53                                    margin: UiRect::bottom(Val::Px(25.)),
54                                    ..Default::default()
55                                },
56                                BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
57                            ))
58                            .with_children(|parent| {
59                                parent.spawn((Text::new(label), text_style.clone()));
60                            });
61                        parent
62                            .spawn((
63                                Node {
64                                    width: Val::Px(100.),
65                                    height: Val::Px(100.),
66                                    padding: UiRect {
67                                        left: Val::Px(25.),
68                                        top: Val::Px(25.),
69                                        ..Default::default()
70                                    },
71                                    border: UiRect::all(Val::Px(5.)),
72                                    overflow,
73                                    ..default()
74                                },
75                                BorderColor(Color::BLACK),
76                                BackgroundColor(GRAY.into()),
77                            ))
78                            .with_children(|parent| {
79                                parent.spawn((
80                                    ImageNode::new(image.clone()),
81                                    Node {
82                                        min_width: Val::Px(100.),
83                                        min_height: Val::Px(100.),
84                                        ..default()
85                                    },
86                                    Interaction::default(),
87                                    Outline {
88                                        width: Val::Px(2.),
89                                        offset: Val::Px(2.),
90                                        color: Color::NONE,
91                                    },
92                                ));
93                            });
94                    });
95            }
96        });
97}
98
99fn update_outlines(mut outlines_query: Query<(&mut Outline, Ref<Interaction>)>) {
100    for (mut outline, interaction) in outlines_query.iter_mut() {
101        if interaction.is_changed() {
102            outline.color = match *interaction {
103                Interaction::Pressed => RED.into(),
104                Interaction::Hovered => WHITE.into(),
105                Interaction::None => Color::NONE,
106            };
107        }
108    }
109}
overflow/overflow.rs

overflow/
overflow.rs
