Add thumbnails for layers (#286)

Fixes: #285

Author: TrueDoctor

client/web/src/components/panels/LayerTree.vue

@@ -28,7 +28,7 @@
 						@click.alt.exact="handleControlClick(layer)"
 						@click.exact="handleClick(layer)"
 					>
-						<div class="layer-thumbnail"></div>
+						<div class="layer-thumbnail" v-html="layer.thumbnail"></div>
 						<div class="layer-type-icon">
 							<IconLabel :icon="'NodeTypePath'" title="Path" />
 						</div>
@@ -92,6 +92,12 @@
 				width: 64px;
 				height: 100%;
 				background: white;
+
+				svg {
+					width: calc(100% - 4px);
+					height: calc(100% - 4px);
+					margin: 2px;
+				}
 			}
 
 			.layer-type-icon {

client/web/src/utilities/response-handler.ts

@@ -207,6 +207,7 @@ export interface LayerPanelEntry {
 	layer_type: LayerType;
 	path: BigUint64Array;
 	layer_data: LayerData;
+	thumbnail: string;
 }
 function newLayerPanelEntry(input: any): LayerPanelEntry {
 	return {
@@ -215,6 +216,7 @@ function newLayerPanelEntry(input: any): LayerPanelEntry {
 		layer_type: newLayerType(input.layer_type),
 		layer_data: newLayerData(input.layer_data),
 		path: new BigUint64Array(input.path.map((n: number) => BigInt(n))),
+		thumbnail: input.thumbnail,
 	};
 }
 

core/document/src/document.rs

@@ -212,8 +212,8 @@ impl Document {
 	/// Adds a new layer to the folder specified by `path`.
 	/// Passing a negative `insert_index` indexes relative to the end.
 	/// -1 is equivalent to adding the layer to the top.
-	pub fn add_layer(&mut self, path: &[LayerId], layer: Layer, insert_index: isize) -> Result<LayerId, DocumentError> {
-		let _ = self.layer_mut(path).map(|x| x.cache_dirty = true);
+	pub fn add_layer(&mut self, path: &[LayerId], mut layer: Layer, insert_index: isize) -> Result<LayerId, DocumentError> {
+		layer.render();
 		let folder = self.folder_mut(path)?;
 		folder.add_layer(layer, insert_index).ok_or(DocumentError::IndexOutOfBounds)
 	}

core/document/src/layers/folder.rs

@@ -74,6 +74,10 @@ impl Folder {
 		self.layers.as_slice()
 	}
 
+	pub fn layers_mut(&mut self) -> &mut [Layer] {
+		self.layers.as_mut_slice()
+	}
+
 	pub fn layer(&self, id: LayerId) -> Option<&Layer> {
 		let pos = self.layer_ids.iter().position(|x| *x == id)?;
 		Some(&self.layers[pos])

core/document/src/layers/mod.rs

@@ -175,6 +175,10 @@ impl Layer {
 		self.data.to_kurbo_path(self.transform, self.style)
 	}
 
+	pub fn current_bounding_box(&self) -> Option<[DVec2; 2]> {
+		self.bounding_box(self.transform, self.style)
+	}
+
 	pub fn bounding_box(&self, transform: glam::DAffine2, style: style::PathStyle) -> Option<[DVec2; 2]> {
 		if let Ok(folder) = self.as_folder() {
 			folder.bounding_box(transform)

core/editor/src/document/document_file.rs

@@ -41,12 +41,27 @@ fn layer_data<'a>(layer_data: &'a mut HashMap<Vec<LayerId>, LayerData>, path: &[
 pub fn layer_panel_entry(layer_data: &mut LayerData, layer: &Layer, path: Vec<LayerId>) -> LayerPanelEntry {
 	let layer_type: LayerType = (&layer.data).into();
 	let name = layer.name.clone().unwrap_or_else(|| format!("Unnamed {}", layer_type));
+	let arr = layer.current_bounding_box().unwrap_or([DVec2::ZERO, DVec2::ZERO]);
+	let arr = arr.iter().map(|x| (*x).into()).collect::<Vec<(f64, f64)>>();
+	let thumbnail = if let [(x_min, y_min), (x_max, y_max)] = arr.as_slice() {
+		format!(
+			r#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="{} {} {} {}">{}</svg>"#,
+			x_min,
+			y_min,
+			x_max - x_min,
+			y_max - y_min,
+			layer.cache.clone()
+		)
+	} else {
+		String::new()
+	};
 	LayerPanelEntry {
 		name,
 		visible: layer.visible,
 		layer_type,
 		layer_data: *layer_data,
 		path,
+		thumbnail,
 	}
 }
 

core/editor/src/frontend/layer_panel.rs

@@ -10,6 +10,7 @@ pub struct LayerPanelEntry {
 	pub layer_type: LayerType,
 	pub layer_data: LayerData,
 	pub path: Vec<LayerId>,
+	pub thumbnail: String,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq, Hash)]