FemtoVG: Fix panic when used with WebGL

In earlier refactorings, passing through the id of the HTML canvas element got "lost". Restore this by handling it in the place where we also have access to the element.

This restores rendering as part #9345 , but the size of the canvas is still wrong. But if resized manually you can see rendering now :)

cc #9345

Author: tronical

internal/renderers/femtovg/lib.rs

@@ -86,8 +86,6 @@ pub struct FemtoVGRenderer<B: GraphicsBackend> {
     rendering_first_time: Cell<bool>,
     // Last field, so that it's dropped last and for example the OpenGL context exists and is current when destroying the FemtoVG canvas
     graphics_backend: B,
-    #[cfg(target_arch = "wasm32")]
-    canvas_id: RefCell<String>,
 }
 
 impl<B: GraphicsBackend> FemtoVGRenderer<B> {
@@ -260,29 +258,13 @@ impl<B: GraphicsBackend> FemtoVGRenderer<B> {
         Ok(())
     }
 
-    #[cfg(not(target_arch = "wasm32"))]
     fn with_graphics_api(
         &self,
         callback: impl FnOnce(i_slint_core::api::GraphicsAPI<'_>),
     ) -> Result<(), PlatformError> {
         self.graphics_backend.with_graphics_api(|api| callback(api.unwrap()))
     }
 
-    #[cfg(target_arch = "wasm32")]
-    fn with_graphics_api(
-        &self,
-        callback: impl FnOnce(i_slint_core::api::GraphicsAPI<'_>),
-    ) -> Result<(), PlatformError> {
-        use i_slint_core::api::GraphicsAPI;
-
-        let canvas_id = self.canvas_id.borrow();
-
-        let api =
-            GraphicsAPI::WebGL { canvas_element_id: canvas_id.as_str(), context_type: "webgl2" };
-        callback(api);
-        Ok(())
-    }
-
     fn window_adapter(&self) -> Result<Rc<dyn WindowAdapter>, PlatformError> {
         self.maybe_window_adapter.borrow().as_ref().and_then(|w| w.upgrade()).ok_or_else(|| {
             "Renderer must be associated with component before use".to_string().into()
@@ -542,8 +524,6 @@ impl<B: GraphicsBackend> FemtoVGRendererExt for FemtoVGRenderer<B> {
             rendering_metrics_collector: Default::default(),
             rendering_first_time: Cell::new(true),
             graphics_backend: B::new_suspended(),
-            #[cfg(target_arch = "wasm32")]
-            canvas_id: Default::default(),
         }
     }
 

internal/renderers/femtovg/opengl.rs

@@ -89,6 +89,8 @@ unsafe impl OpenGLInterface for SuspendedRenderer {
 
 pub struct OpenGLBackend {
     opengl_context: RefCell<Box<dyn OpenGLInterface>>,
+    #[cfg(target_family = "wasm")]
+    html_canvas: RefCell<Option<web_sys::HtmlCanvasElement>>,
 }
 
 impl OpenGLBackend {
@@ -140,6 +142,10 @@ impl OpenGLBackend {
         .unwrap();
 
         *self.opengl_context.borrow_mut() = opengl_context;
+        #[cfg(target_family = "wasm")]
+        {
+            *self.html_canvas.borrow_mut() = Some(html_canvas);
+        }
 
         let canvas = Rc::new(RefCell::new(femtovg_canvas));
         renderer.reset_canvas(canvas);
@@ -161,7 +167,11 @@ impl GraphicsBackend for OpenGLBackend {
     const NAME: &'static str = "OpenGL";
 
     fn new_suspended() -> Self {
-        Self { opengl_context: RefCell::new(Box::new(SuspendedRenderer {})) }
+        Self {
+            opengl_context: RefCell::new(Box::new(SuspendedRenderer {})),
+            #[cfg(target_family = "wasm")]
+            html_canvas: RefCell::new(None),
+        }
     }
 
     fn clear_graphics_context(&self) {
@@ -188,6 +198,7 @@ impl GraphicsBackend for OpenGLBackend {
         self.opengl_context.borrow().swap_buffers()
     }
 
+    #[cfg(not(target_family = "wasm"))]
     fn with_graphics_api<R>(
         &self,
         callback: impl FnOnce(Option<i_slint_core::api::GraphicsAPI<'_>>) -> R,
@@ -201,6 +212,20 @@ impl GraphicsBackend for OpenGLBackend {
         Ok(callback(Some(api)))
     }
 
+    #[cfg(target_family = "wasm")]
+    fn with_graphics_api<R>(
+        &self,
+        callback: impl FnOnce(Option<i_slint_core::api::GraphicsAPI<'_>>) -> R,
+    ) -> Result<R, i_slint_core::platform::PlatformError> {
+        use i_slint_core::api::GraphicsAPI;
+
+        let id =
+            self.html_canvas.borrow().as_ref().map_or_else(|| String::new(), |canvas| canvas.id());
+
+        let api = GraphicsAPI::WebGL { canvas_element_id: &id, context_type: "webgl2" };
+        Ok(callback(Some(api)))
+    }
+
     /// This function is called by the renderers when the surface needs to be resized, typically
     /// in response to the windowing system notifying of a change in the window system.
     /// For most implementations this is a no-op, with the exception for wayland for example.