Implement download/copy ImageFrame layer output (#1194)

* Implement download/copy ImageFrame layer output

* Add note about black transparency when copying

* Introspect node graph output type to conditionally disable the download button

---------

Co-authored-by: Dennis Kobert <dennis@kobert.dev>

document-legacy/src/layers/layer_info.rs

@@ -449,7 +449,7 @@ impl Layer {
 
 	/// Get a mutable reference to the NodeNetwork
 	/// This operation will fail if the [Layer type](Layer::data) is not `LayerDataType::Layer`.
-	pub fn as_node_graph_mut(&mut self) -> Result<&mut graph_craft::document::NodeNetwork, DocumentError> {
+	pub fn as_layer_network_mut(&mut self) -> Result<&mut graph_craft::document::NodeNetwork, DocumentError> {
 		match &mut self.data {
 			LayerDataType::Layer(layer) => Ok(&mut layer.network),
 			_ => Err(DocumentError::NotNodeGraph),
@@ -458,14 +458,14 @@ impl Layer {
 
 	/// Get a reference to the NodeNetwork
 	/// This operation will fail if the [Layer type](Layer::data) is not `LayerDataType::Layer`.
-	pub fn as_node_graph(&self) -> Result<&graph_craft::document::NodeNetwork, DocumentError> {
+	pub fn as_layer_network(&self) -> Result<&graph_craft::document::NodeNetwork, DocumentError> {
 		match &self.data {
 			LayerDataType::Layer(layer) => Ok(&layer.network),
 			_ => Err(DocumentError::NotNodeGraph),
 		}
 	}
 
-	pub fn as_graph_frame(&self) -> Result<&LayerLayer, DocumentError> {
+	pub fn as_layer(&self) -> Result<&LayerLayer, DocumentError> {
 		match &self.data {
 			LayerDataType::Layer(layer) => Ok(layer),
 			_ => Err(DocumentError::NotNodeGraph),

editor/src/messages/frontend/frontend_message.rs

@@ -50,7 +50,23 @@ pub enum FrontendMessage {
 		#[serde(rename = "commitDate")]
 		commit_date: String,
 	},
-	TriggerFileDownload {
+	TriggerCopyToClipboardBlobUrl {
+		#[serde(rename = "blobUrl")]
+		blob_url: String,
+	},
+	TriggerDownloadBlobUrl {
+		#[serde(rename = "layerName")]
+		layer_name: String,
+		#[serde(rename = "blobUrl")]
+		blob_url: String,
+	},
+	TriggerDownloadRaster {
+		svg: String,
+		name: String,
+		mime: String,
+		size: (f64, f64),
+	},
+	TriggerDownloadTextFile {
 		document: String,
 		name: String,
 	},
@@ -107,12 +123,6 @@ pub enum FrontendMessage {
 	TriggerLoadPreferences,
 	TriggerOpenDocument,
 	TriggerPaste,
-	TriggerRasterDownload {
-		svg: String,
-		name: String,
-		mime: String,
-		size: (f64, f64),
-	},
 	TriggerRasterizeRegionBelowLayer {
 		#[serde(rename = "documentId")]
 		document_id: u64,

editor/src/messages/portfolio/document/document_message.rs

@@ -58,6 +58,9 @@ pub enum DocumentMessage {
 	BooleanOperation(BooleanOperationType),
 	ClearLayerTree,
 	CommitTransaction,
+	CopyToClipboardLayerImageOutput {
+		layer_path: Vec<LayerId>,
+	},
 	CreateEmptyFolder {
 		container_path: Vec<LayerId>,
 	},
@@ -72,6 +75,9 @@ pub enum DocumentMessage {
 	DocumentHistoryBackward,
 	DocumentHistoryForward,
 	DocumentStructureChanged,
+	DownloadLayerImageOutput {
+		layer_path: Vec<LayerId>,
+	},
 	DuplicateSelectedLayers,
 	ExportDocument {
 		file_name: String,

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -278,6 +278,15 @@ impl MessageHandler<DocumentMessage, (u64, &InputPreprocessorMessageHandler, &Pe
 				});
 			}
 			CommitTransaction => (),
+			CopyToClipboardLayerImageOutput { layer_path } => {
+				let layer = self.document_legacy.layer(&layer_path).ok();
+
+				let blob_url = layer.and_then(|layer| layer.as_layer().ok()).and_then(|layer_layer| layer_layer.as_blob_url()).cloned();
+
+				if let Some(blob_url) = blob_url {
+					responses.add(FrontendMessage::TriggerCopyToClipboardBlobUrl { blob_url });
+				}
+			}
 			CreateEmptyFolder { mut container_path } => {
 				let id = generate_uuid();
 				container_path.push(id);
@@ -326,6 +335,17 @@ impl MessageHandler<DocumentMessage, (u64, &InputPreprocessorMessageHandler, &Pe
 				let data_buffer: RawBuffer = self.serialize_root().as_slice().into();
 				responses.add(FrontendMessage::UpdateDocumentLayerTreeStructure { data_buffer })
 			}
+			DownloadLayerImageOutput { layer_path } => {
+				let layer = self.document_legacy.layer(&layer_path).ok();
+
+				let layer_name = layer.map(|layer| layer.name.clone().unwrap_or_else(|| "Untitled Layer".to_string()));
+
+				let blob_url = layer.and_then(|layer| layer.as_layer().ok()).and_then(|layer_layer| layer_layer.as_blob_url()).cloned();
+
+				if let (Some(layer_name), Some(blob_url)) = (layer_name, blob_url) {
+					responses.add(FrontendMessage::TriggerDownloadBlobUrl { layer_name, blob_url });
+				}
+			}
 			DuplicateSelectedLayers => {
 				self.backup(responses);
 				responses.add_front(SetSelectedLayers { replacement_selected_layers: vec![] });
@@ -353,6 +373,7 @@ impl MessageHandler<DocumentMessage, (u64, &InputPreprocessorMessageHandler, &Pe
 				let transform = (DAffine2::from_translation(bounds[0]) * DAffine2::from_scale(size)).inverse();
 
 				let document = self.render_document(size, transform, persistent_data, DocumentRenderMode::Root);
+
 				self.restore_document_transform(old_transforms);
 
 				let file_suffix = &format!(".{file_type:?}").to_lowercase();
@@ -362,11 +383,11 @@ impl MessageHandler<DocumentMessage, (u64, &InputPreprocessorMessageHandler, &Pe
 				};
 
 				if file_type == FileType::Svg {
-					responses.add(FrontendMessage::TriggerFileDownload { document, name });
+					responses.add(FrontendMessage::TriggerDownloadTextFile { document, name });
 				} else {
 					let mime = file_type.to_mime().to_string();
 					let size = (size * scale_factor).into();
-					responses.add(FrontendMessage::TriggerRasterDownload { svg: document, name, mime, size });
+					responses.add(FrontendMessage::TriggerDownloadRaster { svg: document, name, mime, size });
 				}
 			}
 			FlipSelectedLayers { flip_axis } => {
@@ -702,7 +723,7 @@ impl MessageHandler<DocumentMessage, (u64, &InputPreprocessorMessageHandler, &Pe
 					true => self.name.clone(),
 					false => self.name.clone() + FILE_SAVE_SUFFIX,
 				};
-				responses.add(FrontendMessage::TriggerFileDownload {
+				responses.add(FrontendMessage::TriggerDownloadTextFile {
 					document: self.serialize_document(),
 					name,
 				})
@@ -968,7 +989,7 @@ impl DocumentMessageHandler {
 	) -> Option<Message> {
 		// Prepare the node graph input image
 
-		let Some(node_network) = self.document_legacy.layer(&layer_path).ok().and_then(|layer| layer.as_node_graph().ok()) else {
+		let Some(node_network) = self.document_legacy.layer(&layer_path).ok().and_then(|layer| layer.as_layer_network().ok()) else {
 			return None;
 		};
 

editor/src/messages/portfolio/document/node_graph/graph_operation_message_handler.rs

@@ -24,7 +24,7 @@ struct ModifyInputsContext<'a> {
 impl<'a> ModifyInputsContext<'a> {
 	/// Get the node network from the document
 	fn new(layer: &'a [LayerId], document: &'a mut Document, node_graph: &'a mut NodeGraphMessageHandler, responses: &'a mut VecDeque<Message>) -> Option<Self> {
-		document.layer_mut(layer).ok().and_then(|layer| layer.as_node_graph_mut().ok()).map(|network| Self {
+		document.layer_mut(layer).ok().and_then(|layer| layer.as_layer_network_mut().ok()).map(|network| Self {
 			network,
 			node_graph,
 			responses,

editor/src/messages/portfolio/document/node_graph/graph_operation_message_handler/transform_utils.rs

@@ -53,7 +53,7 @@ impl LayerBounds {
 	pub fn new(document: &Document, layer_path: &[u64]) -> Self {
 		let layer = document.layer(layer_path).ok();
 		let bounds = layer
-			.and_then(|layer| layer.as_graph_frame().ok())
+			.and_then(|layer| layer.as_layer().ok())
 			.and_then(|frame| frame.as_vector_data().as_ref().map(|vector| vector.nonzero_bounding_box()))
 			.unwrap_or([DVec2::ZERO, DVec2::ONE]);
 		let bounds_transform = DAffine2::IDENTITY;

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs

@@ -118,11 +118,14 @@ pub struct NodeGraphMessageHandler {
 
 impl NodeGraphMessageHandler {
 	fn get_root_network<'a>(&self, document: &'a Document) -> Option<&'a graph_craft::document::NodeNetwork> {
-		self.layer_path.as_ref().and_then(|path| document.layer(path).ok()).and_then(|layer| layer.as_node_graph().ok())
+		self.layer_path.as_ref().and_then(|path| document.layer(path).ok()).and_then(|layer| layer.as_layer_network().ok())
 	}
 
 	fn get_root_network_mut<'a>(&self, document: &'a mut Document) -> Option<&'a mut graph_craft::document::NodeNetwork> {
-		self.layer_path.as_ref().and_then(|path| document.layer_mut(path).ok()).and_then(|layer| layer.as_node_graph_mut().ok())
+		self.layer_path
+			.as_ref()
+			.and_then(|path| document.layer_mut(path).ok())
+			.and_then(|layer| layer.as_layer_network_mut().ok())
 	}
 
 	/// Get the active graph_craft NodeNetwork struct
@@ -726,7 +729,7 @@ impl MessageHandler<NodeGraphMessage, (&mut Document, &mut dyn Iterator<Item = &
 				let network = document
 					.layer_mut(&layer_path)
 					.ok()
-					.and_then(|layer| layer.as_node_graph_mut().ok())
+					.and_then(|layer| layer.as_layer_network_mut().ok())
 					.and_then(|network| network.nested_network_mut(node_path));
 
 				if let Some(network) = network {

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/document_node_types.rs

@@ -274,7 +274,7 @@ fn static_nodes() -> Vec<DocumentNodeType> {
 				default: NodeInput::value(TaggedValue::ImageFrame(ImageFrame::empty()), true),
 			}],
 			outputs: vec![],
-			properties: |_document_node, _node_id, _context| node_properties::string_properties("The graph's output is drawn in the layer"),
+			properties: node_properties::output_properties,
 		},
 		DocumentNodeType {
 			name: "Image Frame",

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs

@@ -7,11 +7,12 @@ use document_legacy::Operation;
 use glam::DVec2;
 use graph_craft::document::value::TaggedValue;
 use graph_craft::document::{DocumentNode, NodeId, NodeInput};
-use graph_craft::imaginate_input::*;
+use graph_craft::{concrete, imaginate_input::*};
 use graphene_core::raster::{BlendMode, Color, ImageFrame, LuminanceCalculation, RedGreenBlue, RelativeAbsolute, SelectiveColorChoice};
 use graphene_core::text::Font;
 use graphene_core::vector::style::{FillType, GradientType, LineCap, LineJoin};
 use graphene_core::EditorApi;
+use graphene_core::{Cow, Type, TypeDescriptor};
 
 use super::document_node_types::NodePropertiesContext;
 use super::{FrontendGraphDataType, IMAGINATE_NODE};
@@ -512,6 +513,37 @@ pub fn blend_properties(document_node: &DocumentNode, node_id: NodeId, _context:
 	vec![backdrop, blend_mode, LayoutGroup::Row { widgets: opacity }]
 }
 
+pub fn output_properties(_document_node: &DocumentNode, _node_id: NodeId, context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
+	let output_type = context.executor.previous_output_type(context.layer_path);
+	let raster_output_type = concrete!(ImageFrame<Color>);
+	let disabled = match output_type {
+		Some(output_type) => output_type != raster_output_type,
+		None => true,
+	};
+
+	let layer_path_1 = context.layer_path.to_vec();
+	let layer_path_2 = context.layer_path.to_vec();
+
+	let label = TextLabel::new("The graph's output is drawn in the layer").widget_holder();
+	let download_button = TextButton::new("Download Render Output")
+		.tooltip("Download the rendered image output as a PNG file")
+		.disabled(disabled)
+		.on_update(move |_| DocumentMessage::DownloadLayerImageOutput { layer_path: layer_path_1.clone() }.into())
+		.widget_holder();
+	let copy_button = TextButton::new("Copy Render Output")
+		.tooltip("Copy the rendered image output to the clipboard")
+		.disabled(disabled)
+		.on_update(move |_| DocumentMessage::CopyToClipboardLayerImageOutput { layer_path: layer_path_2.clone() }.into())
+		.widget_holder();
+
+	vec![
+		LayoutGroup::Row { widgets: vec![label] },
+		LayoutGroup::Row {
+			widgets: vec![download_button, WidgetHolder::related_separator(), copy_button],
+		},
+	]
+}
+
 pub fn mask_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
 	let mask = color_widget(document_node, node_id, 1, "Stencil", ColorInput::default(), true);
 

editor/src/messages/tool/tool_messages/brush_tool.rs

@@ -322,7 +322,7 @@ fn load_existing_points(document: &DocumentMessageHandler) -> Option<(Vec<LayerI
 		return None;
 	}
 	let layer_path = document.selected_layers().next()?.to_vec();
-	let network = document.document_legacy.layer(&layer_path).ok().and_then(|layer| layer.as_node_graph().ok())?;
+	let network = document.document_legacy.layer(&layer_path).ok().and_then(|layer| layer.as_layer_network().ok())?;
 	let brush_node = network.nodes.get(&0)?;
 	if brush_node.implementation != DocumentNodeImplementation::Unresolved("graphene_std::brush::BrushNode".into()) {
 		return None;

editor/src/messages/tool/tool_messages/select_tool.rs

@@ -843,7 +843,7 @@ impl Fsm for SelectToolFsmState {
 						// Check that only one layer is selected
 						if selected_layers.next().is_none() {
 							if let Ok(layer) = document.document_legacy.layer(layer_path) {
-								if let Ok(network) = layer.as_node_graph() {
+								if let Ok(network) = layer.as_layer_network() {
 									if network.nodes.values().any(|node| node.name == "Text") {
 										responses.add_front(ToolMessage::ActivateTool { tool_type: ToolType::Text });
 										responses.add(TextToolMessage::EditSelected);

editor/src/messages/tool/tool_messages/text_tool.rs

@@ -380,7 +380,7 @@ fn resize_overlays(overlays: &mut Vec<Vec<LayerId>>, responses: &mut VecDeque<Me
 
 fn update_overlays(document: &DocumentMessageHandler, tool_data: &mut TextToolData, responses: &mut VecDeque<Message>, render_data: &RenderData) {
 	let get_bounds = |layer: &Layer, path: &[LayerId], document: &DocumentMessageHandler, render_data: &RenderData| {
-		let node_graph = layer.as_node_graph().ok()?;
+		let node_graph = layer.as_layer_network().ok()?;
 		let node_id = get_text_node_id(node_graph)?;
 		let document_node = node_graph.nodes.get(&node_id)?;
 		let (text, font, font_size) = TextToolData::extract_text_node_inputs(document_node)?;
@@ -410,7 +410,7 @@ fn update_overlays(document: &DocumentMessageHandler, tool_data: &mut TextToolDa
 
 fn get_network<'a>(layer_path: &[LayerId], document: &'a DocumentMessageHandler) -> Option<&'a NodeNetwork> {
 	let layer = document.document_legacy.layer(layer_path).ok()?;
-	layer.as_node_graph().ok()
+	layer.as_layer_network().ok()
 }
 
 fn get_text_node_id(network: &NodeNetwork) -> Option<NodeId> {

editor/src/node_graph_executor.rs

@@ -20,7 +20,9 @@ use std::borrow::Cow;
 
 #[derive(Debug, Clone, Default)]
 pub struct NodeGraphExecutor {
-	executor: DynamicExecutor,
+	pub(crate) executor: DynamicExecutor,
+	// TODO: This is a memory leak since layers are never removed
+	pub(crate) last_output_type: HashMap<Vec<LayerId>, Option<Type>>,
 }
 
 impl NodeGraphExecutor {
@@ -55,6 +57,10 @@ impl NodeGraphExecutor {
 		self.executor.introspect(path).flatten()
 	}
 
+	pub fn previous_output_type(&self, path: &[LayerId]) -> Option<Type> {
+		self.last_output_type.get(path).cloned().flatten()
+	}
+
 	/// Computes an input for a node in the graph
 	pub fn compute_input<T: dyn_any::StaticType>(&mut self, old_network: &NodeNetwork, node_path: &[NodeId], mut input_index: usize, editor_api: Cow<EditorApi<'_>>) -> Result<T, String> {
 		let mut network = old_network.clone();
@@ -272,11 +278,13 @@ impl NodeGraphExecutor {
 			// Update the cached vector data on the layer
 			let vector_data: VectorData = dyn_any::downcast(boxed_node_graph_output).map(|v| *v)?;
 			let transform = vector_data.transform.to_cols_array();
+			self.last_output_type.insert(layer_path.clone(), Some(concrete!(VectorData)));
 			responses.add(Operation::SetLayerTransform { path: layer_path.clone(), transform });
 			responses.add(Operation::SetVectorData { path: layer_path, vector_data });
 		} else {
 			// Attempt to downcast to an image frame
 			let ImageFrame { image, transform } = dyn_any::downcast(boxed_node_graph_output).map(|image_frame| *image_frame)?;
+			self.last_output_type.insert(layer_path.clone(), Some(concrete!(ImageFrame<Color>)));
 
 			// Don't update the frame's transform if the new transform is DAffine2::ZERO.
 			let transform = (!transform.abs_diff_eq(DAffine2::ZERO, f64::EPSILON)).then_some(transform.to_cols_array());

frontend/src/io-managers/clipboard.ts

@@ -1,5 +1,6 @@
 import { type Editor } from "@graphite/wasm-communication/editor";
 import { TriggerTextCopy } from "@graphite/wasm-communication/messages";
+import { imageToPNG } from "~src/utility-functions/rasterization";
 
 export function createClipboardManager(editor: Editor): void {
 	// Subscribe to process backend event
@@ -8,3 +9,20 @@ export function createClipboardManager(editor: Editor): void {
 		navigator.clipboard?.writeText?.(triggerTextCopy.copyText);
 	});
 }
+
+export async function copyToClipboardFileURL(url: string): Promise<void> {
+	const response = await fetch(url);
+	const blob = await response.blob();
+
+	// TODO: Remove this if/when we end up returning PNG directly from the backend
+	const pngBlob = await imageToPNG(blob);
+
+	const clipboardItem: Record<string, Blob> = {};
+	clipboardItem[pngBlob.type] = pngBlob;
+	const data = [new ClipboardItem(clipboardItem)];
+
+	// Note: if this image has transparency, it will be lost and appear as black due to limitations of the way browsers handle copying transparent images
+	// This even happens if you just open a regular transparent PNG file in a browser tab, right click > copy, and paste it somewhere (the transparency will show up as black)
+	// This is true, at least, on Windows (it's worth checking on other OSs though)
+	navigator.clipboard.write(data);
+}

frontend/src/state-providers/portfolio.ts

@@ -2,25 +2,28 @@
 
 import {writable} from "svelte/store";
 
-import { downloadFileText, downloadFileBlob, upload } from "@graphite/utility-functions/files";
+import { downloadFileText, downloadFileBlob, upload, downloadFileURL } from "@graphite/utility-functions/files";
 import { imaginateGenerate, imaginateCheckConnection, imaginateTerminate, updateBackendImage } from "@graphite/utility-functions/imaginate";
-import { extractPixelData, rasterizeSVG, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
+import { extractPixelData, imageToPNG, rasterizeSVG, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
 import { type Editor } from "@graphite/wasm-communication/editor";
 import {
 	type FrontendDocumentDetails,
-	TriggerFileDownload,
+	TriggerCopyToClipboardBlobUrl,
-	TriggerImport,
+	TriggerDownloadBlobUrl,
-	TriggerOpenDocument,
+	TriggerDownloadRaster,
-	TriggerRasterDownload,
+	TriggerDownloadTextFile,
+	TriggerImaginateCheckServerStatus,
 	TriggerImaginateGenerate,
 	TriggerImaginateTerminate,
-	TriggerImaginateCheckServerStatus,
+	TriggerImport,
+	TriggerOpenDocument,
 	TriggerRasterizeRegionBelowLayer,
-	UpdateActiveDocument,
-	UpdateOpenDocumentsList,
-	UpdateImageData,
 	TriggerRevokeBlobUrl,
+	UpdateActiveDocument,
+	UpdateImageData,
+	UpdateOpenDocumentsList,
 } from "@graphite/wasm-communication/messages";
+import { copyToClipboardFileURL } from "~src/io-managers/clipboard";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createPortfolioState(editor: Editor) {
@@ -55,10 +58,22 @@ export function createPortfolioState(editor: Editor) {
 		const imageData = await extractPixelData(new Blob([data.content], { type: data.type }));
 		editor.instance.pasteImage(new Uint8Array(imageData.data), imageData.width, imageData.height);
 	});
-	editor.subscriptions.subscribeJsMessage(TriggerFileDownload, (triggerFileDownload) => {
+	editor.subscriptions.subscribeJsMessage(TriggerDownloadTextFile, (triggerFileDownload) => {
 		downloadFileText(triggerFileDownload.name, triggerFileDownload.document);
 	});
-	editor.subscriptions.subscribeJsMessage(TriggerRasterDownload, async (triggerRasterDownload) => {
+	editor.subscriptions.subscribeJsMessage(TriggerDownloadBlobUrl, async (triggerDownloadBlobUrl) => {
+		const data = await fetch(triggerDownloadBlobUrl.blobUrl);
+		const blob = await data.blob();
+
+		// TODO: Remove this if/when we end up returning PNG directly from the backend
+		const pngBlob = await imageToPNG(blob);
+
+		downloadFileBlob(triggerDownloadBlobUrl.layerName, pngBlob);
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerCopyToClipboardBlobUrl, (triggerDownloadBlobUrl) => {
+		copyToClipboardFileURL(triggerDownloadBlobUrl.blobUrl);
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerDownloadRaster, async (triggerRasterDownload) => {
 		const { svg, name, mime, size } = triggerRasterDownload;
 
 		// Fill the canvas with white if it'll be a JPEG (which does not support transparency and defaults to black)

frontend/src/utility-functions/rasterization.ts

@@ -56,6 +56,26 @@ export async function rasterizeSVG(svg: string, width: number, height: number, m
 
 /// Convert an image source (e.g. PNG document) into pixel data, a width, and a height
 export async function extractPixelData(imageData: ImageBitmapSource): Promise<ImageData> {
+	const canvasContext = await imageToCanvasContext(imageData);
+	const width = canvasContext.canvas.width;
+	const height = canvasContext.canvas.height;
+
+	return canvasContext.getImageData(0, 0, width, height);
+}
+
+/// Convert an image source (e.g. BMP document) into a PNG blob
+export async function imageToPNG(imageData: ImageBitmapSource): Promise<Blob> {
+	const canvasContext = await imageToCanvasContext(imageData);
+
+	return new Promise((resolve, reject) => {
+		canvasContext.canvas.toBlob((pngBlob) => {
+			if (pngBlob) resolve(pngBlob);
+			else reject("Converting canvas to blob data failed in imageToPNG()");
+		}, "image/png");
+	});
+}
+
+export async function imageToCanvasContext(imageData: ImageBitmapSource): Promise<CanvasRenderingContext2D> {
 	// Special handling to rasterize an SVG file
 	let svgImageData;
 	if (imageData instanceof File && imageData.type === "image/svg+xml") {
@@ -92,5 +112,5 @@ export async function extractPixelData(imageData: ImageBitmapSource): Promise<Im
 	if (!context) throw new Error("Could not create canvas context");
 	context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
 
-	return context.getImageData(0, 0, width, height);
+	return context;
 }

frontend/src/wasm-communication/messages.ts

@@ -498,12 +498,6 @@ export class UpdateMouseCursor extends JsMessage {
 	readonly cursor!: MouseCursorIcon;
 }
 
-export class TriggerFileDownload extends JsMessage {
-	readonly document!: string;
-
-	readonly name!: string;
-}
-
 export class TriggerLoadAutoSaveDocuments extends JsMessage { }
 
 export class TriggerLoadPreferences extends JsMessage { }
@@ -514,7 +508,17 @@ export class TriggerImport extends JsMessage { }
 
 export class TriggerPaste extends JsMessage { }
 
-export class TriggerRasterDownload extends JsMessage {
+export class TriggerCopyToClipboardBlobUrl extends JsMessage {
+	readonly blobUrl!: string;
+}
+
+export class TriggerDownloadBlobUrl extends JsMessage {
+	readonly layerName!: string;
+	
+	readonly blobUrl!: string;
+}
+
+export class TriggerDownloadRaster extends JsMessage {
 	readonly svg!: string;
 
 	readonly name!: string;
@@ -525,6 +529,12 @@ export class TriggerRasterDownload extends JsMessage {
 	readonly size!: XY;
 }
 
+export class TriggerDownloadTextFile extends JsMessage {
+	readonly document!: string;
+
+	readonly name!: string;
+}
+
 export class TriggerImaginateCheckServerStatus extends JsMessage {
 	readonly hostname!: string;
 }
@@ -1384,12 +1394,14 @@ export const messageMakers: Record<string, MessageMaker> = {
 	DisplayEditableTextboxTransform,
 	DisplayRemoveEditableTextbox,
 	TriggerAboutGraphiteLocalizedCommitDate,
+	TriggerCopyToClipboardBlobUrl,
+	TriggerDownloadBlobUrl,
+	TriggerDownloadRaster,
+	TriggerDownloadTextFile,
+	TriggerFontLoad,
 	TriggerImaginateCheckServerStatus,
 	TriggerImaginateGenerate,
 	TriggerImaginateTerminate,
-	TriggerRasterizeRegionBelowLayer,
-	TriggerFileDownload,
-	TriggerFontLoad,
 	TriggerImport,
 	TriggerIndexedDbRemoveDocument,
 	TriggerIndexedDbWriteDocument,
@@ -1397,7 +1409,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	TriggerLoadPreferences,
 	TriggerOpenDocument,
 	TriggerPaste,
-	TriggerRasterDownload,
+	TriggerRasterizeRegionBelowLayer,
 	TriggerRefreshBoundsOfViewports,
 	TriggerRevokeBlobUrl,
 	TriggerSavePreferences,
@@ -1415,8 +1427,8 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateDocumentModeLayout,
 	UpdateDocumentOverlays,
 	UpdateDocumentRulers,
-	UpdateEyedropperSamplingState,
 	UpdateDocumentScrollbars,
+	UpdateEyedropperSamplingState,
 	UpdateImageData,
 	UpdateInputHints,
 	UpdateLayerTreeOptionsLayout,
@@ -1429,9 +1441,9 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateOpenDocumentsList,
 	UpdatePropertyPanelOptionsLayout,
 	UpdatePropertyPanelSectionsLayout,
-	UpdateZoomWithScroll,
 	UpdateToolOptionsLayout,
 	UpdateToolShelfLayout,
 	UpdateWorkingColorsLayout,
+	UpdateZoomWithScroll,
 } as const;
 export type JsMessageType = keyof typeof messageMakers;