Implement animation export

Author: Keavon

Cargo.lock

@@ -219,6 +219,7 @@ lzma-rust2 = { version = "0.16", default-features = false, features = ["std", "e
 scraper = "0.25"
 linesweeper = "0.3"
 smallvec = "1.13.2"
+zip = { version = "8", default-features = false }
 
 [workspace.lints.rust]
 unexpected_cfgs = { level = "allow", check-cfg = ['cfg(target_arch, values("spirv"))'] }

Cargo.toml

@@ -249,6 +249,12 @@ impl App {
 				});
 			}
 			DesktopFrontendMessage::WriteFile { path, content } => {
+				if let Some(parent) = path.parent()
+					&& !parent.as_os_str().is_empty()
+					&& let Err(e) = fs::create_dir_all(parent)
+				{
+					tracing::error!("Failed to create parent directory {}: {}", parent.display(), e);
+				}
 				if let Err(e) = fs::write(&path, content) {
 					tracing::error!("Failed to write file {}: {}", path.display(), e);
 				}

desktop/src/app.rs

@@ -31,6 +31,15 @@ pub(super) fn handle_desktop_wrapper_message(dispatcher: &mut DesktopWrapperMess
 			SaveFileDialogContext::File { content } => {
 				dispatcher.respond(DesktopFrontendMessage::WriteFile { path, content });
 			}
+			SaveFileDialogContext::MultipleFiles { files } => {
+				// Treat the chosen path as the folder name; strip any extension the user typed (e.g. "MyAnim.png" → "MyAnim").
+				// The `WriteFile` handler creates parent directories if they don't exist, so the folder is materialized on first write.
+				let folder = path.with_extension("");
+				for (filename, content) in files {
+					let file_path = folder.join(&filename);
+					dispatcher.respond(DesktopFrontendMessage::WriteFile { path: file_path, content });
+				}
+			}
 		},
 		DesktopWrapperMessage::OpenFile { path, content } => {
 			let message = PortfolioMessage::OpenFile { path, content };

desktop/wrapper/src/handle_desktop_wrapper_message.rs

@@ -1,5 +1,6 @@
 #[cfg(target_os = "macos")]
 use graphite_editor::messages::layout::utility_types::layout_widget::LayoutTarget;
+use graphite_editor::messages::frontend::utility_types::ExportAnimationFrame;
 use graphite_editor::messages::prelude::FrontendMessage;
 
 use super::DesktopWrapperMessageDispatcher;
@@ -59,6 +60,52 @@ pub(super) fn intercept_frontend_message(dispatcher: &mut DesktopWrapperMessageD
 				context: SaveFileDialogContext::File { content },
 			});
 		}
+		FrontendMessage::TriggerExportAnimation {
+			name,
+			extension,
+			mime,
+			size,
+			folder,
+			frames,
+		} => {
+			// Materialize each frame to bytes; SVG strings are encoded as UTF-8.
+			// Raster-needs-canvas-rasterize frames can't be encoded here without a Rust SVG rasterizer,
+			// so fall through to the frontend zip path in that case.
+			let mut needs_frontend_rasterization = false;
+			let mut materialized = Vec::with_capacity(frames.len());
+			for (index, frame) in frames.iter().enumerate() {
+				let filename = format!("{name}_{:04}.{extension}", index + 1);
+				let bytes = match frame {
+					ExportAnimationFrame::Svg(svg) if extension == "svg" => svg.as_bytes().to_vec(),
+					ExportAnimationFrame::Bytes(bytes) => bytes.to_vec(),
+					ExportAnimationFrame::Svg(_) => {
+						needs_frontend_rasterization = true;
+						break;
+					}
+				};
+				materialized.push((filename, bytes));
+			}
+
+			if needs_frontend_rasterization {
+				return Some(FrontendMessage::TriggerExportAnimation {
+					name,
+					extension,
+					mime,
+					size,
+					folder,
+					frames,
+				});
+			}
+
+			// The dialog name is the folder the frames go into (analogous to the .zip on web).
+			dispatcher.respond(DesktopFrontendMessage::SaveFileDialog {
+				title: "Save Animation Frames Folder As".to_string(),
+				default_filename: name.clone(),
+				default_folder: folder,
+				filters: Vec::new(),
+				context: SaveFileDialogContext::MultipleFiles { files: materialized },
+			});
+		}
 		FrontendMessage::TriggerVisitLink { url } => {
 			dispatcher.respond(DesktopFrontendMessage::OpenUrl(url));
 		}

desktop/wrapper/src/intercept_frontend_message.rs

@@ -113,6 +113,10 @@ pub enum OpenFileDialogContext {
 pub enum SaveFileDialogContext {
 	Document { document_id: DocumentId, content: Vec<u8> },
 	File { content: Vec<u8> },
+	/// Multiple files written into a folder whose path is the user-chosen path with any extension stripped
+	/// (e.g. picking `MyAnim.png` yields a `MyAnim/` folder). Each `(filename, content)` entry is written
+	/// inside that folder, which is created if it doesn't exist.
+	MultipleFiles { files: Vec<(String, Vec<u8>)> },
 }
 
 pub enum MenuItem {

desktop/wrapper/src/messages.rs

@@ -7,6 +7,10 @@ pub enum ExportDialogMessage {
 	FileType { file_type: FileType },
 	ScaleFactor { factor: f64 },
 	ExportBounds { bounds: ExportBounds },
+	Animated { animated: bool },
+	Fps { fps: f64 },
+	StartSeconds { start: f64 },
+	EndSeconds { end: f64 },
 
 	Submit,
 }

editor/src/messages/dialog/export_dialog/export_dialog_message.rs

@@ -1,4 +1,4 @@
-use crate::messages::frontend::utility_types::{ExportBounds, FileType};
+use crate::messages::frontend::utility_types::{AnimationExport, ExportBounds, FileType};
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
 use crate::messages::prelude::*;
@@ -16,6 +16,10 @@ pub struct ExportDialogMessageHandler {
 	pub bounds: ExportBounds,
 	pub artboards: HashMap<LayerNodeIdentifier, String>,
 	pub has_selection: bool,
+	pub animated: bool,
+	pub fps: f64,
+	pub start_seconds: f64,
+	pub end_seconds: f64,
 }
 
 impl Default for ExportDialogMessageHandler {
@@ -26,10 +30,21 @@ impl Default for ExportDialogMessageHandler {
 			bounds: Default::default(),
 			artboards: Default::default(),
 			has_selection: false,
+			animated: false,
+			fps: 30.,
+			start_seconds: 0.,
+			end_seconds: 1.,
 		}
 	}
 }
 
+impl ExportDialogMessageHandler {
+	fn total_frames(&self) -> u32 {
+		let duration = (self.end_seconds - self.start_seconds).max(0.);
+		((duration * self.fps).round() as i64).max(1) as u32
+	}
+}
+
 #[message_handler_data]
 impl MessageHandler<ExportDialogMessage, ExportDialogMessageContext<'_>> for ExportDialogMessageHandler {
 	fn process_message(&mut self, message: ExportDialogMessage, responses: &mut VecDeque<Message>, context: ExportDialogMessageContext) {
@@ -39,6 +54,15 @@ impl MessageHandler<ExportDialogMessage, ExportDialogMessageContext<'_>> for Exp
 			ExportDialogMessage::FileType { file_type } => self.file_type = file_type,
 			ExportDialogMessage::ScaleFactor { factor } => self.scale_factor = factor,
 			ExportDialogMessage::ExportBounds { bounds } => self.bounds = bounds,
+			ExportDialogMessage::Animated { animated } => self.animated = animated,
+			ExportDialogMessage::Fps { fps } => self.fps = fps.max(0.001),
+			ExportDialogMessage::StartSeconds { start } => {
+				self.start_seconds = start.max(0.);
+				if self.end_seconds < self.start_seconds {
+					self.end_seconds = self.start_seconds;
+				}
+			}
+			ExportDialogMessage::EndSeconds { end } => self.end_seconds = end.max(self.start_seconds),
 
 			ExportDialogMessage::Submit => {
 				// Fall back to "All Artwork" if "Selection" was chosen but nothing is currently selected
@@ -52,13 +76,21 @@ impl MessageHandler<ExportDialogMessage, ExportDialogMessageContext<'_>> for Exp
 					ExportBounds::Artboard(layer) => self.artboards.get(&layer).cloned(),
 					_ => None,
 				};
+
+				let animation = self.animated.then(|| AnimationExport {
+					fps: self.fps,
+					start_seconds: self.start_seconds,
+					total_frames: self.total_frames(),
+				});
+
 				responses.add_front(PortfolioMessage::SubmitDocumentExport {
 					name: portfolio.active_document().map(|document| document.name.clone()).unwrap_or_default(),
 					file_type: self.file_type,
 					scale_factor: self.scale_factor,
 					bounds,
 					artboard_name,
 					artboard_count: self.artboards.len(),
+					animation,
 				})
 			}
 		}
@@ -163,6 +195,74 @@ impl LayoutHolder for ExportDialogMessageHandler {
 			DropdownInput::new(entries).selected_index(Some(index as u32)).widget_instance(),
 		];
 
-		Layout(vec![LayoutGroup::row(export_type), LayoutGroup::row(resolution), LayoutGroup::row(export_area)])
+		let animation_checkbox_id = CheckboxId::new();
+		let animation_toggle = vec![
+			TextLabel::new("Animation").table_align(true).min_width(100).for_checkbox(animation_checkbox_id).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
+			CheckboxInput::new(self.animated)
+				.on_update(|checkbox_input: &CheckboxInput| ExportDialogMessage::Animated { animated: checkbox_input.checked }.into())
+				.for_label(animation_checkbox_id)
+				.widget_instance(),
+		];
+
+		let mut layout_groups = vec![
+			LayoutGroup::row(export_type),
+			LayoutGroup::row(resolution),
+			LayoutGroup::row(export_area),
+			LayoutGroup::row(animation_toggle),
+		];
+
+		if self.animated {
+			let fps_row = vec![
+				TextLabel::new("FPS").table_align(true).min_width(100).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
+				NumberInput::new(Some(self.fps))
+					.unit(" fps")
+					.min(0.001)
+					.max(1000.)
+					.increment_step(1.)
+					.on_update(|number_input: &NumberInput| ExportDialogMessage::Fps { fps: number_input.value.unwrap() }.into())
+					.min_width(200)
+					.widget_instance(),
+			];
+
+			let start_row = vec![
+				TextLabel::new("Start").table_align(true).min_width(100).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
+				NumberInput::new(Some(self.start_seconds))
+					.unit(" sec")
+					.min(0.)
+					.increment_step(0.1)
+					.on_update(|number_input: &NumberInput| ExportDialogMessage::StartSeconds { start: number_input.value.unwrap() }.into())
+					.min_width(200)
+					.widget_instance(),
+			];
+
+			let end_row = vec![
+				TextLabel::new("End").table_align(true).min_width(100).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
+				NumberInput::new(Some(self.end_seconds))
+					.unit(" sec")
+					.min(self.start_seconds)
+					.increment_step(0.1)
+					.on_update(|number_input: &NumberInput| ExportDialogMessage::EndSeconds { end: number_input.value.unwrap() }.into())
+					.min_width(200)
+					.widget_instance(),
+			];
+
+			let frame_count = self.total_frames();
+			let frames_row = vec![
+				TextLabel::new("Frames").table_align(true).min_width(100).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
+				TextLabel::new(format!("{frame_count} frame{}", if frame_count == 1 { "" } else { "s" })).widget_instance(),
+			];
+
+			layout_groups.push(LayoutGroup::row(fps_row));
+			layout_groups.push(LayoutGroup::row(start_row));
+			layout_groups.push(LayoutGroup::row(end_row));
+			layout_groups.push(LayoutGroup::row(frames_row));
+		}
+
+		Layout(layout_groups)
 	}
 }

editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs

@@ -1,7 +1,7 @@
 use super::IconName;
 use super::utility_types::{MouseCursorIcon, PersistedState};
 use crate::messages::app_window::app_window_message_handler::AppWindowPlatform;
-use crate::messages::frontend::utility_types::{DocumentInfo, EyedropperPreviewImage};
+use crate::messages::frontend::utility_types::{DocumentInfo, ExportAnimationFrame, EyedropperPreviewImage};
 use crate::messages::input_mapper::utility_types::misc::ActionShortcut;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::node_graph::utility_types::{
@@ -107,6 +107,23 @@ pub enum FrontendMessage {
 		mime: String,
 		size: (f64, f64),
 	},
+	/// Export one or more animation frames as a bundle.
+	/// On web, the frontend zips the frames into an uncompressed `.zip` and triggers a single download.
+	/// On desktop, the wrapper intercepts this and writes each frame as a separate file to a user-chosen folder.
+	TriggerExportAnimation {
+		/// Base name without the index suffix or extension (e.g. "MyDocument" or "MyDocument - Artboard 1").
+		name: String,
+		/// File extension without leading dot ("png", "jpg", "svg").
+		extension: String,
+		/// MIME type matching the extension (e.g. "image/png").
+		mime: String,
+		/// Pixel size of each rasterized frame, used when the frontend needs to canvas-rasterize from SVG.
+		size: (f64, f64),
+		/// Document folder, used as a default location for the desktop save dialog.
+		folder: Option<PathBuf>,
+		/// One entry per frame, in playback order. Each frame is either an SVG string or pre-encoded bytes.
+		frames: Vec<ExportAnimationFrame>,
+	},
 	TriggerFetchAndOpenDocument {
 		name: String,
 		filename: String,

editor/src/messages/frontend/frontend_message.rs

@@ -59,6 +59,14 @@ impl FileType {
 			FileType::Svg => "image/svg+xml",
 		}
 	}
+
+	pub fn to_extension(self) -> &'static str {
+		match self {
+			FileType::Png => "png",
+			FileType::Jpg => "jpg",
+			FileType::Svg => "svg",
+		}
+	}
 }
 
 #[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
@@ -70,6 +78,39 @@ pub enum ExportBounds {
 	Artboard(LayerNodeIdentifier),
 }
 
+#[derive(Clone, Copy, Debug, PartialEq, serde::Serialize, serde::Deserialize)]
+pub struct AnimationExport {
+	pub fps: f64,
+	pub start_seconds: f64,
+	pub total_frames: u32,
+}
+
+impl Default for AnimationExport {
+	fn default() -> Self {
+		Self {
+			fps: 30.,
+			start_seconds: 0.,
+			total_frames: 30,
+		}
+	}
+}
+
+impl AnimationExport {
+	pub fn frame_time_seconds(&self, frame_index: u32) -> f64 {
+		self.start_seconds + frame_index as f64 / self.fps
+	}
+}
+
+/// One frame of a multi-frame animation export, in playback order.
+/// `Svg` is text that the frontend can save directly (for SVG export) or rasterize via canvas (for PNG/JPG export).
+/// `Bytes` is already-encoded image bytes from the GPU export path, ready to write directly.
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize)]
+pub enum ExportAnimationFrame {
+	Svg(String),
+	Bytes(serde_bytes::ByteBuf),
+}
+
 #[cfg_attr(feature = "wasm", derive(tsify::Tsify), tsify(large_number_types_as_bigints))]
 #[derive(Clone, Debug, Default, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
 pub struct EyedropperPreviewImage {