enhancement: add support for fill in svg

crates/core/src/elements/svg.rs

@@ -1,6 +1,9 @@
 use freya_engine::prelude::*;
 use freya_native_core::real_dom::NodeImmutable;
-use freya_node_state::StyleState;
+use freya_node_state::{
+    Fill,
+    StyleState,
+};
 use torin::prelude::LayoutNode;
 
 use super::utils::ElementUtils;
@@ -27,10 +30,40 @@ impl ElementUtils for SvgElement {
         if let Some(svg_data) = &node_style.svg_data {
             let svg_dom = svg::Dom::from_bytes(svg_data.as_slice(), font_manager);
             if let Ok(mut svg_dom) = svg_dom {
-                canvas.save();
+                let (scale_x, scale_y) = (
+                    area.width() / svg_dom.inner().fContainerSize.fWidth,
+                    area.height() / svg_dom.inner().fContainerSize.fHeight,
+                );
+
+                canvas.save_layer(&SaveLayerRec::default());
                 canvas.translate((x, y));
-                svg_dom.set_container_size((area.width() as i32, area.height() as i32));
+
+                if scale_x.is_finite() && scale_y.is_finite() {
+                    canvas.scale((scale_x, scale_y));
+                } else {
+                    svg_dom.set_container_size((area.width(), area.height()));
+                }
+
                 svg_dom.render(canvas);
+
+                if let Some(fill) = node_style.fill.as_ref() {
+                    let mut paint = Paint::default();
+
+                    paint.set_anti_alias(true);
+                    paint.set_blend_mode(BlendMode::SrcIn);
+
+                    match fill {
+                        Fill::Color(color) => {
+                            paint.set_color(*color);
+                        }
+                        Fill::LinearGradient(gradient) => {
+                            paint.set_shader(gradient.into_shader(area));
+                        }
+                    }
+
+                    canvas.draw_paint(&paint);
+                }
+
                 canvas.restore();
             }
         }

crates/elements/src/definitions.rs

@@ -479,6 +479,8 @@ builder_constructors! {
     /// }
     /// ```
     svg {
+        #[doc = include_str!("_docs/attributes/color.md")]
+        fill: String,
         #[doc = include_str!("_docs/attributes/margin.md")]
         margin: String,
        #[doc = include_str!("_docs/attributes/width_height.md")]

crates/engine/src/mocked.rs

@@ -9,6 +9,9 @@ use std::ops::*;
 use bitflags::bitflags;
 use glutin::context::PossiblyCurrentContext;
 
+#[derive(Default, Debug)]
+pub struct SaveLayerRec;
+
 #[derive(Clone, Debug, PartialEq, Copy, Eq)]
 pub struct Color(u32);
 
@@ -589,6 +592,10 @@ impl Paint {
         unimplemented!("This is mocked")
     }
 
+    pub fn set_blend_mode(&mut self, _mode: BlendMode) -> &mut Self {
+        unimplemented!("This is mocked")
+    }
+
     pub fn set_style(&mut self, _style: PaintStyle) -> &mut Self {
         unimplemented!("This is mocked")
     }
@@ -1018,6 +1025,10 @@ impl Canvas {
         unimplemented!("This is mocked")
     }
 
+    pub fn draw_paint(&self, _: &Paint) -> &Self {
+        unimplemented!("This is mocked")
+    }
+
     pub fn draw_line(&self, _p1: impl Into<Point>, _p2: impl Into<Point>, _paint: &Paint) -> &Self {
         unimplemented!("This is mocked")
     }
@@ -1026,6 +1037,10 @@ impl Canvas {
         unimplemented!("This is mocked")
     }
 
+    pub fn save_layer(&self, layer_rec: &SaveLayerRec) -> usize {
+        unimplemented!("This is mocked")
+    }
+
     pub fn save_layer_alpha_f(&self, bounds: impl Into<Option<Rect>>, alpha: f32) -> usize {
         unimplemented!("This is mocked")
     }
@@ -1327,6 +1342,40 @@ impl MaskFilter {
     }
 }
 
+#[repr(i32)]
+#[derive(Debug, Copy, Clone, Hash, PartialEq, Eq)]
+pub enum BlendMode {
+    Clear = 0,
+    Src = 1,
+    Dst = 2,
+    SrcOver = 3,
+    DstOver = 4,
+    SrcIn = 5,
+    DstIn = 6,
+    SrcOut = 7,
+    DstOut = 8,
+    SrcATop = 9,
+    DstATop = 10,
+    Xor = 11,
+    Plus = 12,
+    Modulate = 13,
+    Screen = 14,
+    Overlay = 15,
+    Darken = 16,
+    Lighten = 17,
+    ColorDodge = 18,
+    ColorBurn = 19,
+    HardLight = 20,
+    SoftLight = 21,
+    Difference = 22,
+    Exclusion = 23,
+    Multiply = 24,
+    Hue = 25,
+    Saturation = 26,
+    Color = 27,
+    Luminosity = 28,
+}
+
 impl BlurStyle {
     pub const LastEnum: BlurStyle = BlurStyle::Inner;
 }
@@ -1346,7 +1395,14 @@ pub mod svg {
         Size,
     };
 
-    pub struct Dom;
+    pub struct Dom {
+        pub fContainerSize: SkSize,
+    }
+
+    pub struct SkSize {
+        pub fWidth: f32,
+        pub fHeight: f32,
+    }
 
     impl Dom {
         pub fn from_bytes(_bytes: &[u8], font_mgr: &FontMgr) -> Result<Self, ()> {
@@ -1360,6 +1416,10 @@ pub mod svg {
         pub fn render(&self, _canvas: &Canvas) {
             unimplemented!("This is mocked")
         }
+
+        pub fn inner(&self) -> &Self {
+            unimplemented!("This is mocked")
+        }
     }
 }
 

crates/engine/src/skia.rs

@@ -1,4 +1,5 @@
 pub use skia_safe::{
+    canvas::SaveLayerRec,
     font_style::{
         Slant,
         Weight,
@@ -55,6 +56,8 @@ pub use skia_safe::{
         TextStyle,
         TypefaceFontProvider,
     },
+    wrapper::PointerWrapper,
+    BlendMode,
     BlurStyle,
     Canvas,
     ClipOp,

crates/native-core/src/attributes.rs

@@ -17,6 +17,7 @@ pub enum AttributeName {
     CornerRadius,
     CornerSmoothing,
     Color,
+    Fill,
     FontSize,
     FontFamily,
     FontStyle,
@@ -88,6 +89,7 @@ impl FromStr for AttributeName {
             "corner_radius" => Ok(AttributeName::CornerRadius),
             "corner_smoothing" => Ok(AttributeName::CornerSmoothing),
             "color" => Ok(AttributeName::Color),
+            "fill" => Ok(AttributeName::Fill),
             "font_size" => Ok(AttributeName::FontSize),
             "font_family" => Ok(AttributeName::FontFamily),
             "font_style" => Ok(AttributeName::FontStyle),

crates/state/src/style.rs

@@ -31,6 +31,7 @@ use crate::{
 #[derive(Default, Debug, Clone, PartialEq, Component)]
 pub struct StyleState {
     pub background: Fill,
+    pub fill: Option<Fill>,
     pub border: Border,
     pub shadows: Vec<Shadow>,
     pub corner_radius: CornerRadius,
@@ -54,6 +55,14 @@ impl ParseAttribute for StyleState {
                     self.background = Fill::parse(value)?;
                 }
             }
+            AttributeName::Fill => {
+                if let Some(value) = attr.value.as_text() {
+                    if value == "none" {
+                        return Ok(());
+                    }
+                    self.fill = Some(Fill::parse(value)?);
+                }
+            }
             AttributeName::Border => {
                 if let Some(value) = attr.value.as_text() {
                     let mut border = Border::parse(value)?;
@@ -137,6 +146,7 @@ impl State<CustomAttributeValues> for StyleState {
     const NODE_MASK: NodeMaskBuilder<'static> =
         NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&[
             AttributeName::Background,
+            AttributeName::Fill,
             AttributeName::Layer,
             AttributeName::Border,
             AttributeName::BorderAlign,