Blend modes (#252)

* Add backend for selecting layer blend mode

* Change dropdown input to support callback on change

* Add debug messages

* Fix canvas update for blend-modes

* Finish up and polish blend modes implementations

* Add changes from code review

Co-authored-by: Keavon Chambers <keavon@keavon.com>
Co-authored-by: Dennis Kobert <dennis@kobert.dev>

core/document/src/document.rs

@@ -221,7 +221,9 @@ impl Document {
 	/// Deletes the layer specified by `path`.
 	pub fn delete(&mut self, path: &[LayerId]) -> Result<(), DocumentError> {
 		let (path, id) = split_path(path)?;
-		let _ = self.layer_mut(path).map(|x| x.cache_dirty = true);
+		if let Ok(layer) = self.layer_mut(path) {
+			layer.cache_dirty = true;
+		}
 		self.document_folder_mut(path)?.as_folder_mut()?.remove_layer(id)?;
 		Ok(())
 	}
@@ -393,13 +395,21 @@ impl Document {
 				Some(responses)
 			}
 			Operation::ToggleVisibility { path } => {
-				let _ = self.layer_mut(&path).map(|layer| {
+				if let Ok(layer) = self.layer_mut(&path) {
 					layer.visible = !layer.visible;
 					layer.cache_dirty = true;
-				});
+				}
 				let path = path.as_slice()[..path.len() - 1].to_vec();
 				Some(vec![DocumentResponse::DocumentChanged, DocumentResponse::FolderChanged { path }])
 			}
+			Operation::SetLayerBlendMode { path, blend_mode } => {
+				self.mark_as_dirty(path)?;
+				self.layer_mut(&path).unwrap().blend_mode = *blend_mode;
+
+				let path = path.as_slice()[..path.len() - 1].to_vec();
+
+				Some(vec![DocumentResponse::DocumentChanged, DocumentResponse::FolderChanged { path: path.clone() }])
+			}
 			Operation::FillLayer { path, color } => {
 				let layer = self.layer_mut(path).unwrap();
 				layer.style.set_fill(layers::style::Fill::new(*color));

core/document/src/layers/mod.rs

@@ -24,12 +24,15 @@ use crate::LayerId;
 pub use folder::Folder;
 use serde::{Deserialize, Serialize};
 
+use std::fmt::Write;
+
 pub trait LayerData {
 	fn render(&mut self, svg: &mut String, transform: glam::DAffine2, style: style::PathStyle);
 	fn to_kurbo_path(&self, transform: glam::DAffine2, style: style::PathStyle) -> BezPath;
 	fn intersects_quad(&self, quad: [DVec2; 4], path: &mut Vec<LayerId>, intersections: &mut Vec<Vec<LayerId>>, style: style::PathStyle);
 }
 
+// TODO: Rename this `LayerDataType` to not be plural in a separate commit (together with `enum ToolOptions`)
 #[derive(Debug, Clone, PartialEq, Deserialize, Serialize)]
 pub enum LayerDataTypes {
 	Folder(Folder),
@@ -40,6 +43,48 @@ pub enum LayerDataTypes {
 	Shape(Shape),
 }
 
+#[derive(PartialEq, Copy, Clone, Debug, Serialize, Deserialize)]
+pub enum BlendMode {
+	Normal,
+	Multiply,
+	Darken,
+	ColorBurn,
+	Screen,
+	Lighten,
+	ColorDodge,
+	Overlay,
+	SoftLight,
+	HardLight,
+	Difference,
+	Exclusion,
+	Hue,
+	Saturation,
+	Color,
+	Luminosity,
+}
+impl BlendMode {
+	fn to_svg_style_name(&self) -> &str {
+		match self {
+			BlendMode::Normal => "normal",
+			BlendMode::Multiply => "multiply",
+			BlendMode::Darken => "darken",
+			BlendMode::ColorBurn => "color-burn",
+			BlendMode::Screen => "screen",
+			BlendMode::Lighten => "lighten",
+			BlendMode::ColorDodge => "color-dodge",
+			BlendMode::Overlay => "overlay",
+			BlendMode::SoftLight => "soft-light",
+			BlendMode::HardLight => "hard-light",
+			BlendMode::Difference => "difference",
+			BlendMode::Exclusion => "exclusion",
+			BlendMode::Hue => "hue",
+			BlendMode::Saturation => "saturation",
+			BlendMode::Color => "color",
+			BlendMode::Luminosity => "luminosity",
+		}
+	}
+}
+
 macro_rules! call_render {
 	($self:ident.render($svg:ident, $transform:ident, $style:ident) { $($variant:ident),* }) => {
 		match $self {
@@ -56,7 +101,7 @@ macro_rules! call_kurbo_path {
 }
 
 macro_rules! call_intersects_quad {
-    ($self:ident.intersects_quad($quad:ident, $path:ident, $intersections:ident, $style:ident) { $($variant:ident),* }) => {
+	($self:ident.intersects_quad($quad:ident, $path:ident, $intersections:ident, $style:ident) { $($variant:ident),* }) => {
 		match $self {
 			$(Self::$variant(x) => x.intersects_quad($quad, $path, $intersections, $style)),*
 		}
@@ -76,6 +121,7 @@ impl LayerDataTypes {
 			}
 		}
 	}
+
 	pub fn to_kurbo_path(&self, transform: glam::DAffine2, style: style::PathStyle) -> BezPath {
 		call_kurbo_path! {
 			self.to_kurbo_path(transform, style) {
@@ -125,7 +171,9 @@ pub struct Layer {
 	pub transform: glam::DAffine2,
 	pub style: style::PathStyle,
 	pub cache: String,
+	pub thumbnail_cache: String,
 	pub cache_dirty: bool,
+	pub blend_mode: BlendMode,
 }
 
 impl Layer {
@@ -137,7 +185,9 @@ impl Layer {
 			transform: glam::DAffine2::from_cols_array(&transform),
 			style,
 			cache: String::new(),
+			thumbnail_cache: String::new(),
 			cache_dirty: true,
+			blend_mode: BlendMode::Normal,
 		}
 	}
 
@@ -146,8 +196,17 @@ impl Layer {
 			return "";
 		}
 		if self.cache_dirty {
+			self.thumbnail_cache.clear();
+			self.data.render(&mut self.thumbnail_cache, self.transform, self.style);
+
 			self.cache.clear();
-			self.data.render(&mut self.cache, self.transform, self.style);
+			let _ = write!(
+				self.cache,
+				r#"<g style="mix-blend-mode: {}">{}</g>"#,
+				self.blend_mode.to_svg_style_name(),
+				self.thumbnail_cache.as_str()
+			);
+
 			self.cache_dirty = false;
 		}
 		self.cache.as_str()

core/document/src/layers/style/mod.rs

@@ -1,10 +1,10 @@
 use crate::color::Color;
 use serde::{Deserialize, Serialize};
-const OPACITY_PERCISION: usize = 3;
+const OPACITY_PRECISION: usize = 3;
 
 fn format_opacity(name: &str, opacity: f32) -> String {
-	if (opacity - 1.).abs() > 10f32.powi(-(OPACITY_PERCISION as i32)) {
-		format!(r#" {}-opacity="{:.percision$}""#, name, opacity, percision = OPACITY_PERCISION)
+	if (opacity - 1.).abs() > 10f32.powi(-(OPACITY_PRECISION as i32)) {
+		format!(r#" {}-opacity="{:.precision$}""#, name, opacity, precision = OPACITY_PRECISION)
 	} else {
 		String::new()
 	}

core/document/src/operation.rs

@@ -1,6 +1,6 @@
 use crate::{
 	color::Color,
-	layers::{style, Layer},
+	layers::{style, BlendMode, Layer},
 	LayerId,
 };
 
@@ -72,6 +72,10 @@ pub enum Operation {
 	ToggleVisibility {
 		path: Vec<LayerId>,
 	},
+	SetLayerBlendMode {
+		path: Vec<LayerId>,
+		blend_mode: BlendMode,
+	},
 	FillLayer {
 		path: Vec<LayerId>,
 		color: Color,