✨ Add moar filters

gwennlbh · May 3, 2024 · f9e9356 · f9e9356
1 parent a510f68
commit f9e9356
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 12 deletions.
diff --git a/src/canvas.rs b/src/canvas.rs
@@ -431,7 +431,6 @@ impl Canvas {
             svg = svg.add(layer.render(self.colormap.clone(), self.cell_size, layer.object_sizes));
         }
 
-        svg = svg.add(Filter::Glow.definition());
 
         svg.set(
             "viewBox",

diff --git a/src/filter.rs b/src/filter.rs
@@ -3,15 +3,40 @@ use wasm_bindgen::prelude::*;
 use crate::RenderCSS;
 
 #[wasm_bindgen]
-#[derive(Debug, Clone, Copy)]
-pub enum Filter {
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum FilterType {
     Glow,
+    NaturalShadow,
+    Saturation,
+}
+
+#[wasm_bindgen]
+#[derive(Debug, Clone, Copy)]
+pub struct Filter {
+    pub kind: FilterType,
+    pub parameter: f32,
 }
 
 impl Filter {
+    pub fn name(&self) -> &str {
+        match self.kind {
+            FilterType::Glow => "glow",
+            FilterType::NaturalShadow => "natural-shadow-filter",
+            FilterType::Saturation => "saturation",
+        }
+    }
+
+    pub fn id(&self) -> String {
+        format!(
+            "{}-{}",
+            self.name(),
+            self.parameter.to_string().replace(".", "_")
+        )
+    }
+
     pub fn definition(&self) -> svg::node::element::Filter {
-        match self {
-            Filter::Glow => {
+        match self.kind {
+            FilterType::Glow => {
                 // format!(
                 //     r#"
                 //     <filter id="glow">
@@ -25,11 +50,10 @@ impl Filter {
                 //     2.5
                 // ) // TODO parameterize stdDeviation
                 svg::node::element::Filter::new()
-                    .set("id", "glow")
                     .add(
                         // TODO parameterize stdDeviation
                         svg::node::element::FilterEffectGaussianBlur::new()
-                            .set("stdDeviation", 5)
+                            .set("stdDeviation", self.parameter)
                             .set("result", "coloredBlur"),
                     )
                     .add(
@@ -44,20 +68,67 @@ impl Filter {
                             ),
                     )
             }
+            FilterType::NaturalShadow => {
+                /*
+                              <filter id="natural-shadow-filter" x="0" y="0" width="2" height="2">
+                  <feOffset in="SourceGraphic" dx="3" dy="3" />
+                  <feGaussianBlur stdDeviation="12" result="blur" />
+                  <feMerge>
+                    <feMergeNode in="blur" />
+                    <feMergeNode in="SourceGraphic" />
+                  </feMerge>
+                </filter>
+                               */
+                svg::node::element::Filter::new()
+                    .add(
+                        svg::node::element::FilterEffectOffset::new()
+                            .set("in", "SourceGraphic")
+                            .set("dx", self.parameter)
+                            .set("dy", self.parameter),
+                    )
+                    .add(
+                        svg::node::element::FilterEffectGaussianBlur::new()
+                            .set("stdDeviation", self.parameter * 4.0)
+                            .set("result", "blur"),
+                    )
+                    .add(
+                        svg::node::element::FilterEffectMerge::new()
+                            .add(svg::node::element::FilterEffectMergeNode::new().set("in", "blur"))
+                            .add(
+                                svg::node::element::FilterEffectMergeNode::new()
+                                    .set("in", "SourceGraphic"),
+                            ),
+                    )
+            }
+            FilterType::Saturation => {
+                /*
+                <filter id="saturation">
+                    <feColorMatrix type="saturate" values="0.5"/>
+                </filter>
+                */
+                svg::node::element::Filter::new().add(
+                    svg::node::element::FilterEffectColorMatrix::new()
+                        .set("type", "saturate")
+                        .set("values", self.parameter),
+                )
+            }
         }
     }
 }
 
 impl RenderCSS for Filter {
     fn render_fill_css(&self, _colormap: &crate::ColorMapping) -> String {
-        match self {
-            Filter::Glow => {
-                format!("filter: url(#glow);")
-            }
-        }
+        format!("filter: url(#{});", self.name())
     }
 
     fn render_stroke_css(&self, colormap: &crate::ColorMapping) -> String {
         self.render_fill_css(colormap)
     }
 }
+
+impl PartialEq for Filter {
+    fn eq(&self, other: &Self) -> bool {
+        // TODO use way less restrictive epsilon
+        self.kind == other.kind && (self.parameter - other.parameter).abs() < f32::EPSILON
+    }
+}
diff --git a/src/objects.rs b/src/objects.rs
@@ -186,6 +186,11 @@ impl Object {
             .as_ref();
 
         group = group.set("data-object", id).set("style", css);
+
+        for f in filter {
+            group = group.add(f.definition().set("id", f.id()))
+        }
+
         group
     }