Add support for saving and opening files (#325)

* Add support for saving a document This is similar to the "export" functionality, except that we store all metadata needed to open the file again. Currently we store the internal representation of the layer which is probably pretty fragile. Example document: ```json { "nodes": {}, "root": { "blend_mode": "Normal", "cache": "...", "cache_dirty": false, "data": { "Folder": { "layer_ids": [ 3902938778642561358 ], "layers": [ { "blend_mode": "Normal", "cache": "...", "cache_dirty": false, "data": { "Shape": { "path": [ { "MoveTo": { "x": 0.0, "y": 0.0 } }, { "LineTo": { "x": 1.0, "y": 0.0 } }, { "LineTo": { "x": 1.0, "y": 1.0 } }, { "LineTo": { "x": 0.0, "y": 1.0 } }, "ClosePath" ], "render_index": 1, "solid": true, "style": { "fill": { "color": { "alpha": 1.0, "blue": 0.0, "green": 0.0, "red": 0.0 } }, "stroke": null } } }, "name": null, "opacity": 1.0, "thumbnail_cache": "...", "transform": { "matrix2": [ 223.0, 0.0, -0.0, 348.0 ], "translation": [ -188.0, -334.0 ] }, "visible": true } ], "next_assignment_id": 3902938778642561359 } }, "name": null, "opacity": 1.0, "thumbnail_cache": "...", "transform": { "matrix2": [ 1.0, 0.0, 0.0, 1.0 ], "translation": [ 479.0, 563.0 ] }, "visible": true }, "version": 0 } ``` * Add support for opening a saved document User can select a file using the browser's file input selector. We parse it as JSON and load it into the internal representation. Concerns: - The file format is fragile - Loading data directly into internal data structures usually creates security vulnerabilities - Error handling: The user is not informed of errors * Serialize Document and skip "cache" fields in Layer Instead of serializing the root layer, we serialize the Document struct directly. Additionally, we mark the "cache" fields in layer as "skip" fields so they don't get serialized. * Opened files use the filename as the tab title * Split "new document" and "open document" handling Open document needs name and content to be provided so having a different interface is cleaner. Also did some refactoring to reuse code. * Show error to user when a file fails to open * Clean up code: better variable naming and structure * Use document name for saved and exported files We pass through the document name in the export and save messages. Additionally, we check if the appropriate file suffixes (.graphite and .svg) need to be added before passing it to the frontend. * Refactor document name generation * Don't assign a default of 1 to Documents that start with something other than DEFAULT_DOCUMENT_NAME * Improve runtime complexity by using binary instead of linear search * Update Layer panel upon document selection * Add File>Open/Ctrl+O; File>Save (As)/Ctrl+(Shift)+S; browse filters extension; split out download()/upload() into files.ts; change unsaved close dialog text Co-authored-by: Dennis Kobert <dennis@kobert.dev> Co-authored-by: Keavon Chambers <keavon@keavon.com>
2026-09-19 19:08:05 +08:00 · 2021-08-14 03:56:52 -04:00
parent 8551121793
commit d4674e5856
18 changed files with 280 additions and 80 deletions
--- a/editor/src/document/document_file.rs
+++ b/editor/src/document/document_file.rs
@@ -1,7 +1,11 @@
 pub use super::layer_panel::*;
-use crate::{frontend::layer_panel::*, EditorError};
+use crate::{
+	consts::{FILE_EXPORT_SUFFIX, FILE_SAVE_SUFFIX},
+	frontend::layer_panel::*,
+	EditorError,
+};
 use glam::{DAffine2, DVec2};
-use graphene::{document::Document as InternalDocument, LayerId};
+use graphene::{document::Document as InternalDocument, DocumentError, LayerId};
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;

@@ -81,6 +85,7 @@ pub enum DocumentMessage {
 	AbortTransaction,
 	CommitTransaction,
 	ExportDocument,
+	SaveDocument,
 	RenderDocument,
 	Undo,
 	NudgeSelectedLayers(f64, f64),
@@ -115,7 +120,7 @@ impl DocumentMessageHandler {
 		document_responses.retain(|response| !matches!(response, DocumentResponse::DocumentChanged));
 		document_responses.len() != len
 	}
-	fn handle_folder_changed(&mut self, path: Vec<LayerId>) -> Option<Message> {
+	pub fn handle_folder_changed(&mut self, path: Vec<LayerId>) -> Option<Message> {
 		let _ = self.document.render_root();
 		self.layer_data(&path).expanded.then(|| {
 			let children = self.layer_panel(path.as_slice()).expect("The provided Path was not valid");
@@ -192,6 +197,18 @@ impl DocumentMessageHandler {
 			movement_handler: MovementMessageHandler::default(),
 		}
 	}
+	pub fn with_name_and_content(name: String, serialized_content: String) -> Result<Self, EditorError> {
+		let mut document = Self::with_name(name);
+		let internal_document = InternalDocument::with_content(&serialized_content);
+		match internal_document {
+			Ok(handle) => {
+				document.document = handle;
+				Ok(document)
+			}
+			Err(DocumentError::InvalidFile(msg)) => Err(EditorError::Document(msg)),
+			_ => Err(EditorError::Document(String::from("Failed to open file"))),
+		}
+	}

 	pub fn layer_data(&mut self, path: &[LayerId]) -> &mut LayerData {
 		layer_data(&mut self.layer_data, path)
@@ -269,6 +286,10 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 			ExportDocument => {
 				let bbox = self.document.visible_layers_bounding_box().unwrap_or([DVec2::ZERO, ipp.viewport_size.as_f64()]);
 				let size = bbox[1] - bbox[0];
+				let name = match self.name.ends_with(FILE_SAVE_SUFFIX) {
+					true => self.name.clone().replace(FILE_SAVE_SUFFIX, FILE_EXPORT_SUFFIX),
+					false => self.name.clone() + FILE_EXPORT_SUFFIX,
+				};
 				responses.push_back(
 					FrontendMessage::ExportDocument {
 						document: format!(
@@ -280,6 +301,20 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 							"\n",
 							self.document.render_root()
 						),
+						name,
+					}
+					.into(),
+				)
+			}
+			SaveDocument => {
+				let name = match self.name.ends_with(FILE_SAVE_SUFFIX) {
+					true => self.name.clone(),
+					false => self.name.clone() + FILE_SAVE_SUFFIX,
+				};
+				responses.push_back(
+					FrontendMessage::SaveDocument {
+						document: self.document.serialize_document(),
+						name,
 					}
 					.into(),
 				)
@@ -484,6 +519,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 			DeselectAllLayers,
 			RenderDocument,
 			ExportDocument,
+			SaveDocument,
 		);

 		if self.layer_data.values().any(|data| data.selected) {