fix: Prevent opacity from clipping the node bounds (#764)

* fix: Prevent opacity from clipping the node bounds

* clean up

* clean up

* clean up again

* mock restore_to_count

* update mock of save

crates/core/src/skia/skia_renderer.rs

@@ -12,6 +12,7 @@ use freya_node_state::{
     ViewportState,
 };
 use torin::prelude::{
+    Area,
     LayoutNode,
     Torin,
 };
@@ -27,6 +28,7 @@ use crate::{
 };
 
 pub struct SkiaRenderer<'a> {
+    pub canvas_area: Area,
     pub canvas: &'a Canvas,
     pub font_collection: &'a mut FontCollection,
     pub font_manager: &'a FontMgr,
@@ -53,7 +55,7 @@ impl SkiaRenderer<'_> {
                 return;
             };
 
-            self.canvas.save();
+            let initial_layer = self.canvas.save();
 
             let node_transform = &*node_ref.get::<TransformState>().unwrap();
             let node_style = &*node_ref.get::<StyleState>().unwrap();
@@ -90,7 +92,12 @@ impl SkiaRenderer<'_> {
             for (opacity, nodes) in self.opacities.iter_mut() {
                 if nodes.contains(&node_ref.id()) {
                     self.canvas.save_layer_alpha_f(
-                        Rect::new(area.min_x(), area.min_y(), area.max_x(), area.max_y()),
+                        Rect::new(
+                            self.canvas_area.min_x(),
+                            self.canvas_area.min_y(),
+                            self.canvas_area.max_x(),
+                            self.canvas_area.max_y(),
+                        ),
                         *opacity,
                     );
 
@@ -131,7 +138,7 @@ impl SkiaRenderer<'_> {
                 wireframe_renderer::render_wireframe(self.canvas, &area);
             }
 
-            self.canvas.restore();
+            self.canvas.restore_to_count(initial_layer);
         }
     }
 }

crates/engine/src/mocked.rs

@@ -954,14 +954,18 @@ pub struct PlaceholderStyle;
 pub struct Canvas;
 
 impl Canvas {
-    pub fn save(&self) {
+    pub fn save(&self) -> usize {
         unimplemented!("This is mocked")
     }
 
     pub fn restore(&self) {
         unimplemented!("This is mocked")
     }
 
+    pub fn restore_to_count(&self, layer: usize) {
+        unimplemented!("This is mocked")
+    }
+
     pub fn concat(&self, _matrix: &Matrix) {
         unimplemented!("This is mocked")
     }

crates/renderer/src/app.rs

@@ -270,7 +270,12 @@ impl Application {
             freya_dom: &self.sdom.get(),
         });
 
-        self.start_render(hovered_node, canvas, window.scale_factor() as f32);
+        self.start_render(
+            hovered_node,
+            canvas,
+            window.inner_size(),
+            window.scale_factor() as f32,
+        );
 
         self.accessibility
             .render_accessibility(window.title().as_str());
@@ -362,13 +367,22 @@ impl Application {
     }
 
     /// Start rendering the RealDOM to Window
-    pub fn start_render(&mut self, hovered_node: &HoveredNode, canvas: &Canvas, scale_factor: f32) {
+    pub fn start_render(
+        &mut self,
+        hovered_node: &HoveredNode,
+        canvas: &Canvas,
+        windows_size: PhysicalSize<u32>,
+        scale_factor: f32,
+    ) {
         let fdom = self.sdom.get();
 
         let matrices: Vec<(Matrix, Vec<NodeId>)> = Vec::default();
         let opacities: Vec<(f32, Vec<NodeId>)> = Vec::default();
 
         let mut skia_renderer = SkiaRenderer {
+            canvas_area: Area::from_size(
+                (windows_size.width as f32, windows_size.height as f32).into(),
+            ),
             canvas,
             font_collection: &mut self.font_collection,
             font_manager: &self.font_mgr,

crates/testing/src/test_handler.rs

@@ -291,6 +291,7 @@ impl TestingHandler {
         surface.canvas().clear(Color::WHITE);
 
         let mut skia_renderer = SkiaRenderer {
+            canvas_area: Area::from_size((width as f32, height as f32).into()),
             canvas: surface.canvas(),
             font_collection: &mut self.font_collection,
             font_manager: &self.font_mgr,