Follow up to #11057
Implemented suggestions from reviewers from: a simpler
fit_canvas_to_parent leads to an explicit CSS setting to the canvas.
From my understanding, it has do be set after wgpu creation due to wgpu
overriding the canvas width/height:
4400a58470/examples/src/utils.rs (L68-L74)
# Changelog
- Re-enable a `fit_canvas_to_parent`, it's removal from
https://github.com/bevyengine/bevy/pull/11057 was problematic. Still,
its inner working is more simple than before: bevy doesn't handle its
resizing, winit does.
## Migration Guide
- Cancels the migration from
https://github.com/bevyengine/bevy/pull/11057
		
	
			
		
			
				
	
	
		
			190 lines
		
	
	
		
			6.9 KiB
		
	
	
	
		
			Rust
		
	
	
	
	
	
			
		
		
	
	
			190 lines
		
	
	
		
			6.9 KiB
		
	
	
	
		
			Rust
		
	
	
	
	
	
| //! Illustrates how to change window settings and shows how to affect
 | |
| //! the mouse pointer in various ways.
 | |
| 
 | |
| use bevy::{
 | |
|     core::FrameCount,
 | |
|     diagnostic::{FrameTimeDiagnosticsPlugin, LogDiagnosticsPlugin},
 | |
|     prelude::*,
 | |
|     window::{CursorGrabMode, PresentMode, WindowLevel, WindowTheme},
 | |
| };
 | |
| 
 | |
| fn main() {
 | |
|     App::new()
 | |
|         .add_plugins((
 | |
|             DefaultPlugins.set(WindowPlugin {
 | |
|                 primary_window: Some(Window {
 | |
|                     title: "I am a window!".into(),
 | |
|                     name: Some("bevy.app".into()),
 | |
|                     resolution: (500., 300.).into(),
 | |
|                     present_mode: PresentMode::AutoVsync,
 | |
|                     // Tells wasm to resize the window according to the available canvas
 | |
|                     fit_canvas_to_parent: true,
 | |
|                     // Tells wasm not to override default event handling, like F5, Ctrl+R etc.
 | |
|                     prevent_default_event_handling: false,
 | |
|                     window_theme: Some(WindowTheme::Dark),
 | |
|                     enabled_buttons: bevy::window::EnabledButtons {
 | |
|                         maximize: false,
 | |
|                         ..Default::default()
 | |
|                     },
 | |
|                     // This will spawn an invisible window
 | |
|                     // The window will be made visible in the make_visible() system after 3 frames.
 | |
|                     // This is useful when you want to avoid the white window that shows up before the GPU is ready to render the app.
 | |
|                     visible: false,
 | |
|                     ..default()
 | |
|                 }),
 | |
|                 ..default()
 | |
|             }),
 | |
|             LogDiagnosticsPlugin::default(),
 | |
|             FrameTimeDiagnosticsPlugin,
 | |
|         ))
 | |
|         .add_systems(
 | |
|             Update,
 | |
|             (
 | |
|                 change_title,
 | |
|                 toggle_theme,
 | |
|                 toggle_cursor,
 | |
|                 toggle_vsync,
 | |
|                 toggle_window_controls,
 | |
|                 cycle_cursor_icon,
 | |
|                 switch_level,
 | |
|                 make_visible,
 | |
|             ),
 | |
|         )
 | |
|         .run();
 | |
| }
 | |
| 
 | |
| fn make_visible(mut window: Query<&mut Window>, frames: Res<FrameCount>) {
 | |
|     // The delay may be different for your app or system.
 | |
|     if frames.0 == 3 {
 | |
|         // At this point the gpu is ready to show the app so we can make the window visible.
 | |
|         // Alternatively, you could toggle the visibility in Startup.
 | |
|         // It will work, but it will have one white frame before it starts rendering
 | |
|         window.single_mut().visible = true;
 | |
|     }
 | |
| }
 | |
| 
 | |
| /// This system toggles the vsync mode when pressing the button V.
 | |
| /// You'll see fps increase displayed in the console.
 | |
| fn toggle_vsync(input: Res<ButtonInput<KeyCode>>, mut windows: Query<&mut Window>) {
 | |
|     if input.just_pressed(KeyCode::KeyV) {
 | |
|         let mut window = windows.single_mut();
 | |
| 
 | |
|         window.present_mode = if matches!(window.present_mode, PresentMode::AutoVsync) {
 | |
|             PresentMode::AutoNoVsync
 | |
|         } else {
 | |
|             PresentMode::AutoVsync
 | |
|         };
 | |
|         info!("PRESENT_MODE: {:?}", window.present_mode);
 | |
|     }
 | |
| }
 | |
| 
 | |
| /// This system switches the window level when pressing the T button
 | |
| /// You'll notice it won't be covered by other windows, or will be covered by all the other
 | |
| /// windows depending on the level.
 | |
| ///
 | |
| /// This feature only works on some platforms. Please check the
 | |
| /// [documentation](https://docs.rs/bevy/latest/bevy/prelude/struct.Window.html#structfield.window_level)
 | |
| /// for more details.
 | |
| 
 | |
| fn switch_level(input: Res<ButtonInput<KeyCode>>, mut windows: Query<&mut Window>) {
 | |
|     if input.just_pressed(KeyCode::KeyT) {
 | |
|         let mut window = windows.single_mut();
 | |
| 
 | |
|         window.window_level = match window.window_level {
 | |
|             WindowLevel::AlwaysOnBottom => WindowLevel::Normal,
 | |
|             WindowLevel::Normal => WindowLevel::AlwaysOnTop,
 | |
|             WindowLevel::AlwaysOnTop => WindowLevel::AlwaysOnBottom,
 | |
|         };
 | |
|         info!("WINDOW_LEVEL: {:?}", window.window_level);
 | |
|     }
 | |
| }
 | |
| 
 | |
| /// This system toggles the window controls when pressing buttons 1, 2 and 3
 | |
| ///
 | |
| /// This feature only works on some platforms. Please check the
 | |
| /// [documentation](https://docs.rs/bevy/latest/bevy/prelude/struct.Window.html#structfield.enabled_buttons)
 | |
| /// for more details.
 | |
| fn toggle_window_controls(input: Res<ButtonInput<KeyCode>>, mut windows: Query<&mut Window>) {
 | |
|     let toggle_minimize = input.just_pressed(KeyCode::Digit1);
 | |
|     let toggle_maximize = input.just_pressed(KeyCode::Digit2);
 | |
|     let toggle_close = input.just_pressed(KeyCode::Digit3);
 | |
| 
 | |
|     if toggle_minimize || toggle_maximize || toggle_close {
 | |
|         let mut window = windows.single_mut();
 | |
| 
 | |
|         if toggle_minimize {
 | |
|             window.enabled_buttons.minimize = !window.enabled_buttons.minimize;
 | |
|         }
 | |
|         if toggle_maximize {
 | |
|             window.enabled_buttons.maximize = !window.enabled_buttons.maximize;
 | |
|         }
 | |
|         if toggle_close {
 | |
|             window.enabled_buttons.close = !window.enabled_buttons.close;
 | |
|         }
 | |
|     }
 | |
| }
 | |
| 
 | |
| /// This system will then change the title during execution
 | |
| fn change_title(mut windows: Query<&mut Window>, time: Res<Time>) {
 | |
|     let mut window = windows.single_mut();
 | |
|     window.title = format!(
 | |
|         "Seconds since startup: {}",
 | |
|         time.elapsed().as_secs_f32().round()
 | |
|     );
 | |
| }
 | |
| 
 | |
| fn toggle_cursor(mut windows: Query<&mut Window>, input: Res<ButtonInput<KeyCode>>) {
 | |
|     if input.just_pressed(KeyCode::Space) {
 | |
|         let mut window = windows.single_mut();
 | |
| 
 | |
|         window.cursor.visible = !window.cursor.visible;
 | |
|         window.cursor.grab_mode = match window.cursor.grab_mode {
 | |
|             CursorGrabMode::None => CursorGrabMode::Locked,
 | |
|             CursorGrabMode::Locked | CursorGrabMode::Confined => CursorGrabMode::None,
 | |
|         };
 | |
|     }
 | |
| }
 | |
| 
 | |
| // This system will toggle the color theme used by the window
 | |
| fn toggle_theme(mut windows: Query<&mut Window>, input: Res<ButtonInput<KeyCode>>) {
 | |
|     if input.just_pressed(KeyCode::KeyF) {
 | |
|         let mut window = windows.single_mut();
 | |
| 
 | |
|         if let Some(current_theme) = window.window_theme {
 | |
|             window.window_theme = match current_theme {
 | |
|                 WindowTheme::Light => Some(WindowTheme::Dark),
 | |
|                 WindowTheme::Dark => Some(WindowTheme::Light),
 | |
|             };
 | |
|         }
 | |
|     }
 | |
| }
 | |
| 
 | |
| /// This system cycles the cursor's icon through a small set of icons when clicking
 | |
| fn cycle_cursor_icon(
 | |
|     mut windows: Query<&mut Window>,
 | |
|     input: Res<ButtonInput<MouseButton>>,
 | |
|     mut index: Local<usize>,
 | |
| ) {
 | |
|     let mut window = windows.single_mut();
 | |
| 
 | |
|     const ICONS: &[CursorIcon] = &[
 | |
|         CursorIcon::Default,
 | |
|         CursorIcon::Pointer,
 | |
|         CursorIcon::Wait,
 | |
|         CursorIcon::Text,
 | |
|         CursorIcon::Copy,
 | |
|     ];
 | |
| 
 | |
|     if input.just_pressed(MouseButton::Left) {
 | |
|         *index = (*index + 1) % ICONS.len();
 | |
|     } else if input.just_pressed(MouseButton::Right) {
 | |
|         *index = if *index == 0 {
 | |
|             ICONS.len() - 1
 | |
|         } else {
 | |
|             *index - 1
 | |
|         };
 | |
|     }
 | |
| 
 | |
|     window.cursor.icon = ICONS[*index];
 | |
| }
 |