Fixed 2d UI visibility

Cargo.toml

@@ -18,6 +18,13 @@ members = [
 ]
 
 [dependencies]
+bevy = { version = "0.9.0", features = [
+  "bevy_winit",
+  "render",
+  "png",
+  "hdr",
+  "wayland",
+] }
 crossbeam-channel = "0.5.1"
 headless_webview = { version = "0.1.1", path = "./crates/headless_webview", features = ["protocol"] }
 headless_webview_engine = { version = "0.1.1", path = "./crates/headless_webview_engine", optional = true }
@@ -29,22 +36,6 @@ serde_json = "1.0"
 url = "2.2"
 mime_guess = "2.0.3"
 
-[dependencies.bevy]
-version = "0.7"
-default-features = false
-features = ["render"]
-
-[dev-dependencies.bevy]
-version = "0.7"
-default-features = false
-features = [
-  "bevy_winit",
-  "render",
-  "png",
-  "hdr",
-  "x11",
-]
-
 [dev-dependencies]
 rand = "0.8.4"
 

examples/3d_scene.rs

@@ -17,20 +17,20 @@ fn setup(
     mut materials: ResMut<Assets<StandardMaterial>>,
 ) {
     // plane
-    commands.spawn_bundle(PbrBundle {
+    commands.spawn(PbrBundle {
         mesh: meshes.add(Mesh::from(shape::Plane { size: 5.0 })),
         material: materials.add(Color::rgb(0.3, 0.5, 0.3).into()),
         ..Default::default()
     });
     // cube
-    commands.spawn_bundle(PbrBundle {
+    commands.spawn(PbrBundle {
         mesh: meshes.add(Mesh::from(shape::Cube { size: 1.0 })),
         material: materials.add(Color::rgb(0.8, 0.7, 0.6).into()),
         transform: Transform::from_xyz(0.0, 0.5, 0.0),
         ..Default::default()
     });
     // light
-    commands.spawn_bundle(PointLightBundle {
+    commands.spawn(PointLightBundle {
         point_light: PointLight {
             intensity: 1500.0,
             shadows_enabled: true,
@@ -40,15 +40,15 @@ fn setup(
         ..Default::default()
     });
     // camera
-    commands.spawn_bundle(PerspectiveCameraBundle {
+    commands.spawn(Camera3dBundle {
         transform: Transform::from_xyz(-2.0, 2.5, 5.0)
             .looking_at(Vec3::new(0.0, 2.0, 0.0), Vec3::Y),
         ..Default::default()
     });
     // webview
-    commands.spawn_bundle(WebviewBundle {
+    commands.spawn(WebviewBundle {
         webview: Webview {
-            uri: Some(String::from("https://bevyengine.org/")),
+            uri: Some(String::from("https://html5test.com/")),
             color: Color::rgba(0.3, 0.3, 0.3, 0.5),
             ..Default::default()
         },

examples/change_detection.rs

@@ -13,15 +13,15 @@ fn main() {
 }
 
 fn setup(mut commands: Commands) {
-    commands.spawn_bundle(UiCameraBundle::default());
+    commands.spawn(Camera2dBundle::default());
 
     commands.insert_resource(Elapsed {
         iteration: 0,
-        timer: Timer::new(Duration::from_millis(2000), true),
+        timer: Timer::new(Duration::from_millis(2000), TimerMode::Repeating),
     });
 }
 
-#[derive(Component, Debug)]
+#[derive(Component, Debug, Resource)]
 struct Elapsed {
     iteration: usize,
     timer: Timer,
@@ -36,16 +36,16 @@ fn change_webview_system(
     if elapsed.timer.tick(time.delta()).just_finished() {
         if elapsed.iteration == 0 {
             // at first tick, spawn the webview
-            commands.spawn_bundle(WebviewUIBundle {
+            commands.spawn(WebviewUIBundle {
                 webview: Webview {
                     uri: Some("https://bevyengine.org/".into()),
                     ..Default::default()
                 },
                 style: Style {
-                    size: Size::new(Val::Percent(50.0), Val::Percent(50.)),
-                    margin: Rect::all(Val::Auto),
-                    justify_content: JustifyContent::Center,
                     align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
+                    margin: UiRect::all(Val::Auto),
+                    size: Size::new(Val::Percent(50.0), Val::Percent(50.)),
                     ..Default::default()
                 },
                 ..Default::default()

examples/commands.rs

@@ -13,16 +13,16 @@ fn main() {
 }
 
 fn setup(mut commands: Commands) {
-    commands.spawn_bundle(UiCameraBundle::default());
+    commands.spawn(Camera2dBundle::default());
 
-    commands.spawn_bundle(WebviewUIBundle {
+    commands.spawn(WebviewUIBundle {
         webview: Webview {
             uri: Some("https://bevyengine.org/".into()),
             ..Default::default()
         },
         style: Style {
             size: Size::new(Val::Percent(50.0), Val::Percent(50.)),
-            margin: Rect::all(Val::Auto),
+            margin: UiRect::all(Val::Auto),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..Default::default()
@@ -32,11 +32,11 @@ fn setup(mut commands: Commands) {
 
     commands.insert_resource(Elapsed {
         iteration: 0,
-        timer: Timer::new(Duration::from_millis(2000), true),
+        timer: Timer::new(Duration::from_millis(2000), TimerMode::Repeating),
     });
 }
 
-#[derive(Component)]
+#[derive(Component, Resource)]
 struct Elapsed {
     iteration: usize,
     timer: Timer,

examples/events.rs

@@ -22,18 +22,17 @@ fn main() {
 struct TimeReceiver;
 
 fn setup(mut commands: Commands) {
-    commands.spawn_bundle(UiCameraBundle::default());
-
+    commands.spawn(Camera2dBundle::default());
     commands
-        .spawn_bundle(WebviewUIBundle {
+        .spawn(WebviewUIBundle {
             webview: Webview {
                 html: Some(include_str!("events.html").into()),
                 color: Color::rgb_u8(58, 58, 58),
                 ..Default::default()
             },
             style: Style {
                 size: Size::new(Val::Percent(50.0), Val::Percent(50.)),
-                margin: Rect::all(Val::Auto),
+                margin: UiRect::all(Val::Auto),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 ..Default::default()
@@ -42,15 +41,15 @@ fn setup(mut commands: Commands) {
         })
         .insert(TimeReceiver);
 
-    commands.insert_resource(TimeTick(Timer::new(Duration::from_millis(1_000), true)));
+    commands.insert_resource(TimeTick(Timer::new(Duration::from_millis(1_000), TimerMode::Repeating)));
 }
 
-#[derive(Deserialize, Debug)]
+#[derive(Deserialize, Resource, Debug)]
 pub struct LoginRequest {
     username: String,
 }
 
-#[derive(Serialize, Debug)]
+#[derive(Serialize, Debug, Resource)]
 pub struct AppTime {
     seconds_since_startup: f64,
 }
@@ -70,7 +69,7 @@ fn login_handler(mut login_request_events: WebviewEventReader<LoginRequest>) {
     }
 }
 
-#[derive(Deserialize, Debug)]
+#[derive(Deserialize,Resource, Debug)]
 pub struct CloseRequest;
 
 fn close_handler(
@@ -86,6 +85,7 @@ fn close_handler(
     }
 }
 
+#[derive(Resource)]
 struct TimeTick(Timer);
 
 fn send_time_to_all_webviews_system(
@@ -95,7 +95,7 @@ fn send_time_to_all_webviews_system(
 ) {
     if tick.0.tick(time.delta()).just_finished() {
         app_time.send(AppTime {
-            seconds_since_startup: time.seconds_since_startup(),
+            seconds_since_startup: time.elapsed_seconds_f64(),
         });
     }
 }

examples/local_assets.rs

@@ -11,17 +11,17 @@ fn main() {
 }
 
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
-    commands.spawn_bundle(UiCameraBundle::default());
+    commands.spawn(Camera2dBundle::default());
 
     // webview
-    commands.spawn_bundle(WebviewUIBundle {
+    commands.spawn(WebviewUIBundle {
         webview: Webview {
             uri: Some(String::from("webview:///test_webview.html")),
             ..Default::default()
         },
         style: Style {
             size: Size::new(Val::Percent(80.0), Val::Percent(80.)),
-            margin: Rect::all(Val::Auto),
+            margin: UiRect::all(Val::Auto),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..Default::default()
@@ -31,27 +31,26 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     // reload button
     commands
-        .spawn_bundle(ButtonBundle {
+        .spawn(ButtonBundle {
             style: Style {
                 size: Size::new(Val::Px(150.0), Val::Px(65.0)),
-                margin: Rect::all(Val::Auto),
+                margin: UiRect::all(Val::Auto),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 ..Default::default()
             },
-            color: NORMAL_BUTTON.into(),
+            background_color: NORMAL_BUTTON.into(),
             ..Default::default()
         })
         .with_children(|parent| {
-            parent.spawn_bundle(TextBundle {
-                text: Text::with_section(
+            parent.spawn(TextBundle {
+                text: Text::from_section(
                     "Reload",
                     TextStyle {
                         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                         font_size: 40.0,
                         color: Color::rgb(0.9, 0.9, 0.9),
-                    },
-                    Default::default(),
+                    }
                 ),
                 ..Default::default()
             });
@@ -64,7 +63,7 @@ const PRESSED_BUTTON: Color = Color::rgb(0.35, 0.75, 0.35);
 
 fn reload_system(
     mut interaction_query: Query<
-        (&Interaction, &mut UiColor),
+        (&Interaction, &mut BackgroundColor),
         (Changed<Interaction>, With<Button>),
     >,
     mut webview_commands: WebviewEventWriter<WebviewCommand>,

examples/react_ui.rs

@@ -19,7 +19,7 @@ fn main() {
         .run();
 }
 
-#[derive(Serialize)]
+#[derive(Serialize, Resource)]
 pub struct CubeCount(usize);
 
 fn setup_webviews(mut commands: Commands) {
@@ -35,7 +35,7 @@ fn setup_webviews(mut commands: Commands) {
     }
 
     // 3d webview
-    commands.spawn_bundle(WebviewBundle {
+    commands.spawn(WebviewBundle {
         webview: Webview {
             uri: Some(String::from("https://bevyengine.org")),
             color: Color::rgba(0., 0., 0., 0.3),
@@ -44,7 +44,6 @@ fn setup_webviews(mut commands: Commands) {
         size: WebviewSize {
             x: 3.,
             y: 2.,
-            ppu: 300.,
             ..Default::default()
         },
         transform: Transform {
@@ -55,15 +54,15 @@ fn setup_webviews(mut commands: Commands) {
     });
 
     // UI webview (REACT)
-    commands.spawn_bundle(WebviewUIBundle {
+    commands.spawn(WebviewUIBundle {
         webview: Webview {
             uri: Some(String::from("http://localhost:3000/")),
             color: Color::rgba(0., 0., 0., 0.0),
             ..Default::default()
         },
         style: Style {
             size: Size::new(Val::Percent(30.0), Val::Percent(80.)),
-            margin: Rect::all(Val::Px(50.)),
+            margin: UiRect::all(Val::Px(50.)),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..Default::default()
@@ -77,31 +76,29 @@ fn setup_scene(
     mut meshes: ResMut<Assets<Mesh>>,
     mut materials: ResMut<Assets<StandardMaterial>>,
 ) {
-    // ui camera
-    commands.spawn_bundle(UiCameraBundle::default());
 
     // camera
-    commands.spawn_bundle(PerspectiveCameraBundle {
+    commands.spawn(Camera3dBundle {
         transform: Transform::from_xyz(-2.0, 2.5, 5.0)
             .looking_at(Vec3::new(0.0, 2.0, 0.0), Vec3::Y),
         ..Default::default()
     });
 
     // plane
-    commands.spawn_bundle(PbrBundle {
+    commands.spawn(PbrBundle {
         mesh: meshes.add(Mesh::from(shape::Plane { size: 5.0 })),
         material: materials.add(Color::rgb(0.3, 0.5, 0.3).into()),
         ..Default::default()
     });
     // cube
-    commands.spawn_bundle(PbrBundle {
+    commands.spawn(PbrBundle {
         mesh: meshes.add(Mesh::from(shape::Cube { size: 1.0 })),
         material: materials.add(Color::rgb(0.8, 0.7, 0.6).into()),
         transform: Transform::from_xyz(0.0, 0.5, 0.0),
         ..Default::default()
     });
     // light
-    commands.spawn_bundle(PointLightBundle {
+    commands.spawn(PointLightBundle {
         point_light: PointLight {
             intensity: 1500.0,
             shadows_enabled: true,
@@ -112,12 +109,12 @@ fn setup_scene(
     });
 }
 
-#[derive(Deserialize, Debug)]
+#[derive(Deserialize, Resource, Debug)]
 pub struct CubeSpawn {
     count: usize,
 }
 
-#[derive(Component)]
+#[derive(Component, Resource)]
 pub struct Cube;
 
 fn cube_spawn_system(
@@ -136,7 +133,7 @@ fn cube_spawn_system(
 
         for _ in 0..event.count {
             commands
-                .spawn_bundle(PbrBundle {
+                .spawn(PbrBundle {
                     mesh: meshes.add(Mesh::from(shape::Cube { size: 0.3 })),
                     material: materials.add(Color::rgb(0.8, 0.7, 0.6).into()),
                     transform: Transform::from_xyz(
@@ -155,7 +152,7 @@ fn cube_spawn_system(
     }
 }
 
-#[derive(Deserialize, Debug)]
+#[derive(Deserialize, Resource, Debug)]
 pub struct CubeDestroy;
 
 fn cube_destroy_system(