fix(ribir): 🐛 black screen on the first frame

CHANGELOG.md

@@ -25,9 +25,6 @@ Please only add new entries below the [Unreleased](#unreleased---releasedate) he
 
 ## [@Unreleased] - @ReleaseDate
 
-### Changed
-
-- **core**: rename builtin field of delay_drop_until to keep_alive (#561 @wjian23)
 
 ### Features
 
@@ -49,9 +46,17 @@ Please only add new entries below the [Unreleased](#unreleased---releasedate) he
     .with_title("Counter");
   ```
 
+### Changed
+
+- **core**: rename builtin field of delay_drop_until to keep_alive (#561 @wjian23)
+
+### Fixed
+
+- **ribir**: Resolved the issue causing a black screen on the first frame. (#566, @M-Adoo)
+
 ### Breaking
 
-- **ribir**: `App::new_window` not accept window size as the second parameter. (#565, @M-Adoo)
+- **ribir**: Updated `App::new_window` to accept `WindowAttributes` instead of size as the second parameter. (#565, #566, @M-Adoo)
 - **ribir**: The window creation APIs have been updated to use asynchronous methods, improving compatibility with browsers. (#565, @M-Adoo)
 
 ## [0.3.0-alpha.4] - 2024-04-17

core/src/test_helper.rs

@@ -130,6 +130,8 @@ impl ShellWindow for TestShellWindow {
 
   fn set_visible(&mut self, _: bool) {}
 
+  fn is_visible(&self) -> Option<bool> { Some(true) }
+
   fn set_resizable(&mut self, _: bool) {}
 
   fn is_resizable(&self) -> bool { true }

core/src/window.rs

@@ -70,6 +70,7 @@ pub trait ShellWindow {
   fn set_cursor(&mut self, cursor: CursorIcon);
   fn set_title(&mut self, str: &str);
   fn set_icon(&mut self, icon: &PixelImage);
+  fn is_visible(&self) -> Option<bool>;
   fn set_visible(&mut self, visible: bool);
   fn is_resizable(&self) -> bool;
   fn set_resizable(&mut self, resizable: bool);
@@ -312,60 +313,6 @@ impl Window {
   #[inline]
   pub fn id(&self) -> WindowId { self.shell_wnd.borrow().id() }
 
-  /// Return the current focused widget id.
-  pub fn focusing(&self) -> Option<WidgetId> { self.focus_mgr.borrow().focusing() }
-
-  /// The device pixel ratio of Window interface returns the ratio of the
-  /// resolution in physical pixels to the logic pixels for the current display
-  /// device.
-  pub fn device_pixel_ratio(&self) -> f32 { self.shell_wnd.borrow().device_pixel_ratio() }
-
-  pub fn set_title(&self, title: &str) -> &Self {
-    self.shell_wnd.borrow_mut().set_title(title);
-    self
-  }
-
-  pub fn set_icon(&self, icon: &PixelImage) -> &Self {
-    self.shell_wnd.borrow_mut().set_icon(icon);
-    self
-  }
-
-  /// Returns the cursor icon of the window.
-  pub fn get_cursor(&self) -> CursorIcon { self.shell_wnd.borrow().cursor() }
-
-  /// Modifies the cursor icon of the window.
-  pub fn set_cursor(&self, cursor: CursorIcon) -> &Self {
-    self.shell_wnd.borrow_mut().set_cursor(cursor);
-    self
-  }
-
-  /// Sets location of IME candidate box in window global coordinates relative
-  /// to the top left.
-  pub fn set_ime_cursor_area(&self, rect: &Rect) -> &Self {
-    self
-      .shell_wnd
-      .borrow_mut()
-      .set_ime_cursor_area(rect);
-    self
-  }
-
-  pub fn set_ime_allowed(&self, allowed: bool) -> &Self {
-    self
-      .shell_wnd
-      .borrow_mut()
-      .set_ime_allowed(allowed);
-    self
-  }
-
-  pub fn request_resize(&self, size: Size) { self.shell_wnd.borrow_mut().request_resize(size) }
-
-  pub fn size(&self) -> Size { self.shell_wnd.borrow().inner_size() }
-
-  pub fn set_min_size(&self, size: Size) -> &Self {
-    self.shell_wnd.borrow_mut().set_min_size(size);
-    self
-  }
-
   pub fn shell_wnd(&self) -> &RefCell<Box<dyn ShellWindow>> { &self.shell_wnd }
 
   pub(crate) fn add_focus_node(&self, wid: WidgetId, auto_focus: bool, focus_type: FocusType) {
@@ -684,6 +631,70 @@ impl Window {
   }
 }
 
+/// Window attributes configuration.
+impl Window {
+  /// Return the current focused widget id.
+  pub fn focusing(&self) -> Option<WidgetId> { self.focus_mgr.borrow().focusing() }
+
+  /// The device pixel ratio of Window interface returns the ratio of the
+  /// resolution in physical pixels to the logic pixels for the current display
+  /// device.
+  pub fn device_pixel_ratio(&self) -> f32 { self.shell_wnd.borrow().device_pixel_ratio() }
+
+  pub fn set_title(&self, title: &str) -> &Self {
+    self.shell_wnd.borrow_mut().set_title(title);
+    self
+  }
+
+  pub fn set_icon(&self, icon: &PixelImage) -> &Self {
+    self.shell_wnd.borrow_mut().set_icon(icon);
+    self
+  }
+
+  /// Returns the cursor icon of the window.
+  pub fn get_cursor(&self) -> CursorIcon { self.shell_wnd.borrow().cursor() }
+
+  /// Modifies the cursor icon of the window.
+  pub fn set_cursor(&self, cursor: CursorIcon) -> &Self {
+    self.shell_wnd.borrow_mut().set_cursor(cursor);
+    self
+  }
+
+  /// Sets location of IME candidate box in window global coordinates relative
+  /// to the top left.
+  pub fn set_ime_cursor_area(&self, rect: &Rect) -> &Self {
+    self
+      .shell_wnd
+      .borrow_mut()
+      .set_ime_cursor_area(rect);
+    self
+  }
+
+  pub fn set_ime_allowed(&self, allowed: bool) -> &Self {
+    self
+      .shell_wnd
+      .borrow_mut()
+      .set_ime_allowed(allowed);
+    self
+  }
+
+  pub fn is_visible(&self) -> Option<bool> { self.shell_wnd.borrow().is_visible() }
+
+  pub fn set_visible(&self, visible: bool) -> &Self {
+    self.shell_wnd.borrow_mut().set_visible(visible);
+    self
+  }
+
+  pub fn request_resize(&self, size: Size) { self.shell_wnd.borrow_mut().request_resize(size) }
+
+  pub fn size(&self) -> Size { self.shell_wnd.borrow().inner_size() }
+
+  pub fn set_min_size(&self, size: Size) -> &Self {
+    self.shell_wnd.borrow_mut().set_min_size(size);
+    self
+  }
+}
+
 /// Event that delay to emit, emit it when the window is not busy(nobody borrow
 /// parts of the window).
 #[derive(Debug)]

ribir/src/app.rs

@@ -119,10 +119,13 @@ impl App {
           }
           WindowEvent::RedrawRequested => {
             if let Some(wnd) = AppCtx::get_window(wnd_id) {
-              // if this frame is really draw, request another redraw. To make sure the draw
-              // always end with a empty draw and emit an extra tick cycle message.
-              if wnd.draw_frame() {
-                request_redraw(&wnd);
+              // if the window is not visible, don't draw it./
+              if wnd.is_visible() != Some(false) {
+                // if this frame is really draw, request another redraw. To make sure the draw
+                // always end with a empty draw and emit an extra tick cycle message.
+                if wnd.draw_frame() {
+                  request_redraw(&wnd);
+                }
               }
             }
           }
@@ -264,7 +267,6 @@ impl App {
     #[cfg(not(target_family = "wasm"))]
     {
       use winit::platform::run_on_demand::EventLoopExtRunOnDemand;
-      Self::active_window().draw_frame();
       let event_loop = unsafe { App::shared_mut() }
         .event_loop
         .as_mut()

ribir/src/winit_shell_wnd.rs

@@ -105,6 +105,9 @@ impl ShellWindow for WinitShellWnd {
     self.winit_wnd.set_ime_cursor_area(position, size);
   }
 
+  #[inline]
+  fn is_visible(&self) -> Option<bool> { self.winit_wnd.is_visible() }
+
   #[inline]
   fn set_visible(&mut self, visible: bool) { self.winit_wnd.set_visible(visible) }
 
@@ -163,6 +166,8 @@ impl ShellWindow for WinitShellWnd {
       .to_i32()
       .cast_unit();
 
+    self.winit_wnd.pre_present_notify();
+
     self
       .backend
       .draw_commands(viewport, commands, surface);
@@ -243,7 +248,8 @@ impl WinitShellWnd {
       .with_title(attrs.title)
       .with_maximized(attrs.maximized)
       .with_resizable(attrs.resizable)
-      .with_visible(attrs.visible)
+      // hide the window until the render backend is ready
+      .with_visible(false)
       .with_decorations(attrs.decorations);
 
     if let Some(size) = attrs.size {
@@ -267,6 +273,11 @@ impl WinitShellWnd {
     // Safety: a reference to winit_wnd is valid as long as the WinitShellWnd is
     // alive.
     let backend = Backend::new(unsafe { &*ptr }).await;
+
+    // show the window after the render backend is ready
+    if attrs.visible {
+      winit_wnd.set_visible(attrs.visible);
+    }
     WinitShellWnd { backend, winit_wnd, cursor: CursorIcon::Default }
   }
 }