mirror of
https://github.com/bevyengine/bevy
synced 2024-11-26 06:30:19 +00:00
55dddaf72e
# Objective - Fixes #8074 - Adopts / Supersedes #8104 ## Solution Adapted from #8104 and affords the same benefits. **Additions** - [x] Update scrolling on relayout (height of node or contents may have changed) - [x] Make ScrollPosition component optional for ui nodes to avoid checking every node on scroll - [x] Nested scrollviews **Omissions** - Removed input handling for scrolling from `bevy_ui`. Users should update `ScrollPosition` directly. ### Implementation Adds a new `ScrollPosition` component. Updating this component on a `Node` with an overflow axis set to `OverflowAxis::Scroll` will reposition its children by that amount when calculating node transforms. As before, no impact on the underlying Taffy layout. Calculating this correctly is trickier than it was in #8104 due to `"Update scrolling on relayout"`. **Background** When `ScrollPosition` is updated directly by the user, it can be trivially handled in-engine by adding the parent's scroll position to the final location of each child node. However, _other layout actions_ may result in a situation where `ScrollPosition` needs to be updated. Consider a 1000 pixel tall vertically scrolling list of 100 elements, each 100 pixels tall. Scrolled to the bottom, the `ScrollPosition.offset_y` is 9000, just enough to display the last element in the list. When removing an element from that list, the new desired `ScrollPosition.offset_y` is 8900, but, critically, that is not known until after the sizes and positions of the children of the scrollable node are resolved. All user scrolling code today handles this by delaying the resolution by one frame. One notable disadvantage of this is the inability to support `WinitSettings::desktop_app()`, since there would need to be an input AFTER the layout change that caused the scroll position to update for the results of the scroll position update to render visually. I propose the alternative in this PR, which allows for same-frame resolution of scrolling layout. **Resolution** _Edit: Below resolution is outdated, and replaced with the simpler usage of taffy's `Layout::content_size`._ When recursively iterating the children of a node, each child now returns a `Vec2` representing the location of their own bottom right corner. Then, `[[0,0, [x,y]]` represents a bounding box containing the scrollable area filled by that child. Scrollable parents aggregate those areas into the bounding box of _all_ children, then consider that result against `ScrollPosition` to ensure its validity. In the event that resolution of the layout of the children invalidates the `ScrollPosition` (e.g. scrolled further than there were children to scroll to), _all_ children of that node must be recursively repositioned. The position of each child must change as a result of the change in scroll position. Therefore, this implementation takes care to only spend the cost of the "second layout pass" when a specific node actually had a `ScrollPosition` forcibly updated by the layout of its children. ## Testing Examples in `ui/scroll.rs`. There may be more complex node/style interactions that were unconsidered. --- ## Showcase  ## Alternatives - `bevy_ui` doesn't support scrolling. - `bevy_ui` implements scrolling with a one-frame delay on reactions to layout changes.
370 lines
16 KiB
Rust
370 lines
16 KiB
Rust
//! This example illustrates the various features of Bevy UI.
|
|
|
|
use bevy::{
|
|
a11y::{
|
|
accesskit::{NodeBuilder, Role},
|
|
AccessibilityNode,
|
|
},
|
|
color::palettes::basic::LIME,
|
|
input::mouse::{MouseScrollUnit, MouseWheel},
|
|
picking::focus::HoverMap,
|
|
prelude::*,
|
|
winit::WinitSettings,
|
|
};
|
|
|
|
fn main() {
|
|
let mut app = App::new();
|
|
app.add_plugins(DefaultPlugins)
|
|
// Only run the app when there is user input. This will significantly reduce CPU/GPU use.
|
|
.insert_resource(WinitSettings::desktop_app())
|
|
.add_systems(Startup, setup)
|
|
.add_systems(Update, update_scroll_position);
|
|
|
|
#[cfg(feature = "bevy_dev_tools")]
|
|
{
|
|
app.add_plugins(bevy::dev_tools::ui_debug_overlay::DebugUiPlugin)
|
|
.add_systems(Update, toggle_overlay);
|
|
}
|
|
|
|
app.run();
|
|
}
|
|
|
|
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|
// Camera
|
|
commands.spawn((Camera2dBundle::default(), IsDefaultUiCamera));
|
|
|
|
// root node
|
|
commands
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
justify_content: JustifyContent::SpaceBetween,
|
|
..default()
|
|
},
|
|
..default()
|
|
})
|
|
.insert(Pickable::IGNORE)
|
|
.with_children(|parent| {
|
|
// left vertical fill (border)
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(200.),
|
|
border: UiRect::all(Val::Px(2.)),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(0.65, 0.65, 0.65).into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
// left vertical fill (content)
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.),
|
|
flex_direction: FlexDirection::Column,
|
|
padding: UiRect::all(Val::Px(5.)),
|
|
row_gap: Val::Px(5.),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(0.15, 0.15, 0.15).into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
// text
|
|
parent.spawn((
|
|
TextBundle::from_section(
|
|
"Text Example",
|
|
TextStyle {
|
|
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
font_size: 25.0,
|
|
..default()
|
|
},
|
|
),
|
|
// Because this is a distinct label widget and
|
|
// not button/list item text, this is necessary
|
|
// for accessibility to treat the text accordingly.
|
|
Label,
|
|
));
|
|
|
|
#[cfg(feature = "bevy_dev_tools")]
|
|
// Debug overlay text
|
|
parent.spawn((
|
|
TextBundle::from_section(
|
|
"Press Space to enable debug outlines.",
|
|
TextStyle {
|
|
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
..default()
|
|
},
|
|
),
|
|
Label,
|
|
));
|
|
|
|
#[cfg(not(feature = "bevy_dev_tools"))]
|
|
parent.spawn((
|
|
TextBundle::from_section(
|
|
"Try enabling feature \"bevy_dev_tools\".",
|
|
TextStyle {
|
|
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
..default()
|
|
},
|
|
),
|
|
Label,
|
|
));
|
|
});
|
|
});
|
|
// right vertical fill
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
flex_direction: FlexDirection::Column,
|
|
justify_content: JustifyContent::Center,
|
|
align_items: AlignItems::Center,
|
|
width: Val::Px(200.),
|
|
..default()
|
|
},
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
// Title
|
|
parent.spawn((
|
|
TextBundle::from_section(
|
|
"Scrolling list",
|
|
TextStyle {
|
|
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
font_size: 21.,
|
|
..default()
|
|
},
|
|
),
|
|
Label,
|
|
));
|
|
// Scrolling list
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
flex_direction: FlexDirection::Column,
|
|
align_self: AlignSelf::Stretch,
|
|
height: Val::Percent(50.),
|
|
overflow: Overflow::scroll_y(),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(0.10, 0.10, 0.10).into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
// List items
|
|
for i in 0..25 {
|
|
parent
|
|
.spawn((
|
|
TextBundle::from_section(
|
|
format!("Item {i}"),
|
|
TextStyle {
|
|
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
..default()
|
|
},
|
|
),
|
|
Label,
|
|
AccessibilityNode(NodeBuilder::new(Role::ListItem)),
|
|
))
|
|
.insert(Pickable {
|
|
should_block_lower: false,
|
|
..default()
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(200.0),
|
|
height: Val::Px(200.0),
|
|
position_type: PositionType::Absolute,
|
|
left: Val::Px(210.),
|
|
bottom: Val::Px(10.),
|
|
border: UiRect::all(Val::Px(20.)),
|
|
..default()
|
|
},
|
|
border_color: LIME.into(),
|
|
background_color: Color::srgb(0.4, 0.4, 1.).into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
parent.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(0.8, 0.8, 1.).into(),
|
|
..default()
|
|
});
|
|
});
|
|
// render order test: reddest in the back, whitest in the front (flex center)
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
align_items: AlignItems::Center,
|
|
justify_content: JustifyContent::Center,
|
|
..default()
|
|
},
|
|
..default()
|
|
})
|
|
.insert(Pickable::IGNORE)
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(100.0),
|
|
height: Val::Px(100.0),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(1.0, 0.0, 0.).into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
parent.spawn(NodeBundle {
|
|
style: Style {
|
|
// Take the size of the parent node.
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
left: Val::Px(20.),
|
|
bottom: Val::Px(20.),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(1.0, 0.3, 0.3).into(),
|
|
..default()
|
|
});
|
|
parent.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
left: Val::Px(40.),
|
|
bottom: Val::Px(40.),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(1.0, 0.5, 0.5).into(),
|
|
..default()
|
|
});
|
|
parent.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
left: Val::Px(60.),
|
|
bottom: Val::Px(60.),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(1.0, 0.7, 0.7).into(),
|
|
..default()
|
|
});
|
|
// alpha test
|
|
parent.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
left: Val::Px(80.),
|
|
bottom: Val::Px(80.),
|
|
..default()
|
|
},
|
|
background_color: Color::srgba(1.0, 0.9, 0.9, 0.4).into(),
|
|
..default()
|
|
});
|
|
});
|
|
});
|
|
// bevy logo (flex center)
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
justify_content: JustifyContent::Center,
|
|
align_items: AlignItems::FlexStart,
|
|
..default()
|
|
},
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
// bevy logo (image)
|
|
// A `NodeBundle` is used to display the logo the image as an `ImageBundle` can't automatically
|
|
// size itself with a child node present.
|
|
parent
|
|
.spawn((
|
|
NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(500.0),
|
|
height: Val::Px(125.0),
|
|
margin: UiRect::top(Val::VMin(5.)),
|
|
..default()
|
|
},
|
|
..default()
|
|
},
|
|
UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
|
|
))
|
|
.with_children(|parent| {
|
|
// alt text
|
|
// This UI node takes up no space in the layout and the `Text` component is used by the accessibility module
|
|
// and is not rendered.
|
|
parent.spawn((
|
|
NodeBundle {
|
|
style: Style {
|
|
display: Display::None,
|
|
..Default::default()
|
|
},
|
|
..Default::default()
|
|
},
|
|
Text::from_section("Bevy logo", TextStyle::default()),
|
|
));
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
#[cfg(feature = "bevy_dev_tools")]
|
|
// The system that will enable/disable the debug outlines around the nodes
|
|
fn toggle_overlay(
|
|
input: Res<ButtonInput<KeyCode>>,
|
|
mut options: ResMut<bevy::dev_tools::ui_debug_overlay::UiDebugOptions>,
|
|
) {
|
|
info_once!("The debug outlines are enabled, press Space to turn them on/off");
|
|
if input.just_pressed(KeyCode::Space) {
|
|
// The toggle method will enable the debug_overlay if disabled and disable if enabled
|
|
options.toggle();
|
|
}
|
|
}
|
|
|
|
/// Updates the scroll position of scrollable nodes in response to mouse input
|
|
pub fn update_scroll_position(
|
|
mut mouse_wheel_events: EventReader<MouseWheel>,
|
|
hover_map: Res<HoverMap>,
|
|
mut scrolled_node_query: Query<&mut ScrollPosition>,
|
|
keyboard_input: Res<ButtonInput<KeyCode>>,
|
|
) {
|
|
for mouse_wheel_event in mouse_wheel_events.read() {
|
|
let (mut dx, mut dy) = match mouse_wheel_event.unit {
|
|
MouseScrollUnit::Line => (mouse_wheel_event.x * 20., mouse_wheel_event.y * 20.),
|
|
MouseScrollUnit::Pixel => (mouse_wheel_event.x, mouse_wheel_event.y),
|
|
};
|
|
|
|
if keyboard_input.pressed(KeyCode::ShiftLeft) || keyboard_input.pressed(KeyCode::ShiftRight)
|
|
{
|
|
std::mem::swap(&mut dx, &mut dy);
|
|
}
|
|
|
|
for (_pointer, pointer_map) in hover_map.iter() {
|
|
for (entity, _hit) in pointer_map.iter() {
|
|
if let Ok(mut scroll_position) = scrolled_node_query.get_mut(*entity) {
|
|
scroll_position.offset_x -= dx;
|
|
scroll_position.offset_y -= dy;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|