Update egui::Context::create_viewport documentation and update viewports example

crates/egui/src/context.rs

@@ -2229,12 +2229,15 @@ impl Context {
         self.write(|ctx| ctx.viewport_commands.push((id, command)));
     }
 
-    /// With this you can create a viewport "is a native window"
+    /// This will be a native window if is possible!
-    /// You will need to wrap your viwport state in an ``RwLock`` or ``Mutex``!
+    /// You will need to wrap your viewport state in an ```Arc<RwLock<T>>``` or ```Arc<Mutex<T>>```!
     /// When this is called again with the same title in `ViewportBuilder` the render function for that viewport will be updated!
-    /// The render function will be called when the viewport receives a event or is requested to be redraw
+    /// * `render`: will be called when the viewport receives a event or is requested to be rendered
     ///
-    /// If this is no more called that viewport "native window" will be destroyed!
+    /// If this is no more called that viewport will be destroyed!
+    ///
+    /// If you use a ```egui::CentralPanel``` you need to check if the viewport is a new window like: ```ctx.get_viewport_id() != ViewportId::MAIN```
+    /// If the viewport id is ```ViewportId::MAIN``` you should create ```egui::Area``` then inside the area ```egui::Frame::popup(ctx.style())```
     pub fn create_viewport(
         &self,
         viewport_builder: ViewportBuilder,

examples/viewports/src/main.rs

@@ -3,6 +3,7 @@ use std::sync::RwLock;
 
 use eframe::egui;
 use eframe::egui::ViewportBuilder;
+use eframe::egui::ViewportId;
 use eframe::NativeOptions;
 
 #[cfg(feature = "wgpu")]
@@ -65,7 +66,7 @@ impl eframe::App for App {
                     ViewportBuilder::default().with_title("Async Viewport"),
                     move |ctx| {
                         let mut state = state.write().unwrap();
-                        egui::CentralPanel::default().show(ctx, |ui| {
+                        let content = |ui: &mut egui::Ui| {
                             ui.label(format!("Frame: {}", ctx.frame_nr()));
                             ui.label(format!("Current Viewport Id: {}", ctx.get_viewport_id()));
                             ui.label(format!(
@@ -78,7 +79,16 @@ impl eframe::App for App {
                             if ui.button("Add").clicked() {
                                 *state += 1;
                             }
-                        });
+                        };
+
+                        // This will make the viewport content, a popup if is in the main window
+                        if ctx.get_viewport_id() == ViewportId::MAIN {
+                            egui::Area::new("Async Viewport").show(ctx, |ui| {
+                                egui::Frame::popup(ui.style()).show(ui, content);
+                            });
+                        } else {
+                            egui::CentralPanel::default().show(ctx, content);
+                        }
                     },
                 );
             }
@@ -88,7 +98,7 @@ impl eframe::App for App {
                 ctx.create_viewport_sync(
                     ViewportBuilder::default().with_title("Sync Viewport"),
                     |ctx| {
-                        egui::CentralPanel::default().show(ctx, |ui| {
+                        let content = |ui: &mut egui::Ui| {
                             ui.label(format!("Frame: {}", ctx.frame_nr()));
                             ui.label(format!("Current Viewport Id: {}", ctx.get_viewport_id()));
                             ui.label(format!(
@@ -101,7 +111,16 @@ impl eframe::App for App {
                             if ui.button("Add").clicked() {
                                 self.sync_viewport_state += 1;
                             }
-                        });
+                        };
+
+                        // This will make the viewport content, a popup if is in the main window
+                        if ctx.get_viewport_id() == ViewportId::MAIN {
+                            egui::Area::new("Sync Viewport").show(ctx, |ui| {
+                                egui::Frame::popup(ui.style()).show(ui, content);
+                            });
+                        } else {
+                            egui::CentralPanel::default().show(ctx, content);
+                        }
                     },
                 );
             }