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 <[email protected]>
Co-authored-by: Keavon Chambers <[email protected]>

Author: 3 people

Cargo.lock

@@ -18,3 +18,7 @@ pub const LINE_ROTATE_SNAP_ANGLE: f64 = 15.;
 
 // SELECT TOOL
 pub const SELECTION_TOLERANCE: f64 = 1.0;
+
+pub const DEFAULT_DOCUMENT_NAME: &str = "Untitled Document";
+pub const FILE_SAVE_SUFFIX: &str = ".graphite";
+pub const FILE_EXPORT_SUFFIX: &str = ".svg";

editor/src/consts.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) {

editor/src/document/document_file.rs

@@ -7,6 +7,7 @@ use log::warn;
 use std::collections::VecDeque;
 
 use super::DocumentMessageHandler;
+use crate::consts::DEFAULT_DOCUMENT_NAME;
 
 #[impl_message(Message, Documents)]
 #[derive(PartialEq, Clone, Debug)]
@@ -24,6 +25,8 @@ pub enum DocumentsMessage {
 	CloseAllDocumentsWithConfirmation,
 	CloseAllDocuments,
 	NewDocument,
+	OpenDocument,
+	OpenDocumentFile(String, String),
 	GetOpenDocumentsList,
 	NextDocument,
 	PrevDocument,
@@ -43,6 +46,45 @@ impl DocumentsMessageHandler {
 	pub fn active_document_mut(&mut self) -> &mut DocumentMessageHandler {
 		&mut self.documents[self.active_document_index]
 	}
+	fn generate_new_document_name(&self) -> String {
+		let mut doc_title_numbers = self
+			.documents
+			.iter()
+			.filter_map(|d| {
+				d.name
+					.rsplit_once(DEFAULT_DOCUMENT_NAME)
+					.map(|(prefix, number)| (prefix.is_empty()).then(|| number.trim().parse::<isize>().ok()).flatten().unwrap_or(1))
+			})
+			.collect::<Vec<isize>>();
+		doc_title_numbers.sort_unstable();
+		doc_title_numbers.iter_mut().enumerate().for_each(|(i, number)| *number = *number - i as isize - 2);
+		// Uses binary search to find the index of the element where number is bigger than i
+		let new_doc_title_num = doc_title_numbers.binary_search(&0).map_or_else(|e| e, |v| v) + 1;
+
+		let name = match new_doc_title_num {
+			1 => DEFAULT_DOCUMENT_NAME.to_string(),
+			_ => format!("{} {}", DEFAULT_DOCUMENT_NAME, new_doc_title_num),
+		};
+		name
+	}
+
+	fn load_document(&mut self, new_document: DocumentMessageHandler, responses: &mut VecDeque<Message>) {
+		self.active_document_index = self.documents.len();
+		self.documents.push(new_document);
+
+		// Send the new list of document tab names
+		let open_documents = self.documents.iter().map(|doc| doc.name.clone()).collect();
+		responses.push_back(FrontendMessage::UpdateOpenDocumentsList { open_documents }.into());
+
+		responses.push_back(
+			FrontendMessage::ExpandFolder {
+				path: Vec::new(),
+				children: Vec::new(),
+			}
+			.into(),
+		);
+		responses.push_back(DocumentsMessage::SelectDocument(self.active_document_index).into());
+	}
 }
 
 impl Default for DocumentsMessageHandler {
@@ -71,6 +113,7 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 					.into(),
 				);
 				responses.push_back(RenderDocument.into());
+				responses.extend(self.active_document_mut().handle_folder_changed(vec![]));
 			}
 			CloseActiveDocumentWithConfirmation => {
 				responses.push_back(
@@ -138,48 +181,21 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 				}
 			}
 			NewDocument => {
-				let digits = ('0'..='9').collect::<Vec<char>>();
-				let mut doc_title_numbers = self
-					.documents
-					.iter()
-					.map(|d| {
-						if d.name.ends_with(digits.as_slice()) {
-							let (_, number) = d.name.split_at(17);
-							number.trim().parse::<usize>().unwrap()
-						} else {
-							1
-						}
-					})
-					.collect::<Vec<usize>>();
-				doc_title_numbers.sort_unstable();
-				let mut new_doc_title_num = 1;
-				while new_doc_title_num <= self.documents.len() {
-					if new_doc_title_num != doc_title_numbers[new_doc_title_num - 1] {
-						break;
-					}
-					new_doc_title_num += 1;
-				}
-				let name = match new_doc_title_num {
-					1 => "Untitled Document".to_string(),
-					_ => format!("Untitled Document {}", new_doc_title_num),
-				};
-
-				self.active_document_index = self.documents.len();
+				let name = self.generate_new_document_name();
 				let new_document = DocumentMessageHandler::with_name(name);
-				self.documents.push(new_document);
-
-				// Send the new list of document tab names
-				let open_documents = self.documents.iter().map(|doc| doc.name.clone()).collect();
-				responses.push_back(FrontendMessage::UpdateOpenDocumentsList { open_documents }.into());
-
-				responses.push_back(
-					FrontendMessage::ExpandFolder {
-						path: Vec::new(),
-						children: Vec::new(),
+				self.load_document(new_document, responses);
+			}
+			OpenDocument => {
+				responses.push_back(FrontendMessage::OpenDocumentBrowse.into());
+			}
+			OpenDocumentFile(name, serialized_contents) => {
+				let document = DocumentMessageHandler::with_name_and_content(name, serialized_contents);
+				match document {
+					Ok(document) => {
+						self.load_document(document, responses);
 					}
-					.into(),
-				);
-				responses.push_back(SelectDocument(self.active_document_index).into());
+					Err(e) => responses.push_back(FrontendMessage::DisplayError { description: e.to_string() }.into()),
+				}
 			}
 			GetOpenDocumentsList => {
 				// Send the list of document tab names

editor/src/document/document_message_handler.rs

@@ -18,7 +18,9 @@ pub enum FrontendMessage {
 	DisplayConfirmationToCloseAllDocuments,
 	UpdateCanvas { document: String },
 	UpdateLayer { path: Vec<LayerId>, data: LayerPanelEntry },
-	ExportDocument { document: String },
+	ExportDocument { document: String, name: String },
+	SaveDocument { document: String, name: String },
+	OpenDocumentBrowse,
 	EnableTextInput,
 	DisableTextInput,
 	UpdateWorkingColors { primary: Color, secondary: Color },
@@ -52,5 +54,6 @@ impl MessageHandler<FrontendMessage, ()> for FrontendMessageHandler {
 		DisableTextInput,
 		SetCanvasZoom,
 		SetCanvasRotation,
+		OpenDocumentBrowse,
 	);
 }

editor/src/frontend/frontend_message_handler.rs

@@ -180,6 +180,8 @@ impl Default for Mapping {
 			entry! {action=ToolMessage::SelectTool(ToolType::Eyedropper), key_down=KeyI},
 			entry! {action=ToolMessage::ResetColors, key_down=KeyX, modifiers=[KeyShift, KeyControl]},
 			entry! {action=ToolMessage::SwapColors, key_down=KeyX, modifiers=[KeyShift]},
+			// Editor Actions
+			entry! {action=FrontendMessage::OpenDocumentBrowse, key_down=KeyO, modifiers=[KeyControl]},
 			// Document Actions
 			entry! {action=DocumentMessage::Undo, key_down=KeyZ, modifiers=[KeyControl]},
 			entry! {action=DocumentMessage::DeselectAllLayers, key_down=KeyA, modifiers=[KeyControl, KeyAlt]},
@@ -188,6 +190,8 @@ impl Default for Mapping {
 			entry! {action=DocumentMessage::DeleteSelectedLayers, key_down=KeyX},
 			entry! {action=DocumentMessage::DeleteSelectedLayers, key_down=KeyBackspace},
 			entry! {action=DocumentMessage::ExportDocument, key_down=KeyE, modifiers=[KeyControl]},
+			entry! {action=DocumentMessage::SaveDocument, key_down=KeyS, modifiers=[KeyControl]},
+			entry! {action=DocumentMessage::SaveDocument, key_down=KeyS, modifiers=[KeyControl, KeyShift]},
 			entry! {action=MovementMessage::MouseMove, message=InputMapperMessage::PointerMove},
 			entry! {action=MovementMessage::RotateCanvasBegin{snap:false}, key_down=Mmb, modifiers=[KeyControl]},
 			entry! {action=MovementMessage::RotateCanvasBegin{snap:true}, key_down=Mmb, modifiers=[KeyControl, KeyShift]},

editor/src/input/input_mapper.rs

@@ -5,18 +5,23 @@ use thiserror::Error;
 /// The error type used by the Graphite editor.
 #[derive(Clone, Debug, Error)]
 pub enum EditorError {
-	#[error("Failed to execute operation: {0}")]
+	#[error("Failed to execute operation:\n{0}")]
 	InvalidOperation(String),
-	#[error("{0}")]
-	Misc(String),
-	#[error("Tried to construct an invalid color {0:?}")]
+
+	#[error("Tried to construct an invalid color:\n{0:?}")]
 	Color(String),
+
 	#[error("The requested tool does not exist")]
 	UnknownTool,
-	#[error("The operation caused a document error {0:?}")]
+
+	#[error("The operation caused a document error:\n{0:?}")]
 	Document(String),
-	#[error("A Rollback was initated but no transaction was in progress")]
+
+	#[error("A rollback was initiated but no transaction was in progress")]
 	NoTransactionInProgress,
+
+	#[error("{0}")]
+	Misc(String),
 }
 
 macro_rules! derive_from {

editor/src/misc/error.rs

@@ -211,7 +211,7 @@
 import { defineComponent } from "vue";
 
 import { makeModifiersBitfield } from "@/utilities/input";
-import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument, SetCanvasZoom, SetCanvasRotation } from "@/utilities/response-handler";
+import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/utilities/response-handler";
 import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
 import { comingSoon } from "@/utilities/errors";
 
@@ -300,37 +300,25 @@ export default defineComponent({
 		async resetWorkingColors() {
 			(await wasm).reset_colors();
 		},
-		download(filename: string, fileData: string) {
-			const svgBlob = new Blob([fileData], { type: "image/svg+xml;charset=utf-8" });
-			const svgUrl = URL.createObjectURL(svgBlob);
-			const element = document.createElement("a");
-
-			element.href = svgUrl;
-			element.setAttribute("download", filename);
-			element.style.display = "none";
-
-			element.click();
-		},
 	},
 	mounted() {
 		registerResponseHandler(ResponseType.UpdateCanvas, (responseData: Response) => {
 			const updateData = responseData as UpdateCanvas;
 			if (updateData) this.viewportSvg = updateData.document;
 		});
-		registerResponseHandler(ResponseType.ExportDocument, (responseData: Response) => {
-			const updateData = responseData as ExportDocument;
-			if (updateData) this.download("canvas.svg", updateData.document);
-		});
+
 		registerResponseHandler(ResponseType.SetActiveTool, (responseData: Response) => {
 			const toolData = responseData as SetActiveTool;
 			if (toolData) this.activeTool = toolData.tool_name;
 		});
+
 		registerResponseHandler(ResponseType.SetCanvasZoom, (responseData: Response) => {
 			const updateData = responseData as SetCanvasZoom;
 			if (updateData) {
 				this.documentZoom = updateData.new_zoom * 100;
 			}
 		});
+
 		registerResponseHandler(ResponseType.SetCanvasRotation, (responseData: Response) => {
 			const updateData = responseData as SetCanvasRotation;
 			if (updateData) {

frontend/src/components/panels/Document.vue

@@ -69,7 +69,7 @@ const menuEntries: MenuListEntries = [
 		children: [
 			[
 				{ label: "New", icon: "File", shortcut: ["Ctrl", "N"], shortcutRequiresLock: true, action: async () => (await wasm).new_document() },
-				{ label: "Open…", shortcut: ["Ctrl", "O"] },
+				{ label: "Open…", shortcut: ["Ctrl", "O"], action: async () => (await wasm).open_document() },
 				{
 					label: "Open Recent",
 					shortcut: ["Ctrl", "⇧", "O"],
@@ -90,8 +90,8 @@ const menuEntries: MenuListEntries = [
 				{ label: "Close All", shortcut: ["Ctrl", "Alt", "W"], action: async () => (await wasm).close_all_documents_with_confirmation() },
 			],
 			[
-				{ label: "Save", shortcut: ["Ctrl", "S"] },
-				{ label: "Save As…", shortcut: ["Ctrl", "⇧", "S"] },
+				{ label: "Save", shortcut: ["Ctrl", "S"], action: async () => (await wasm).save_document() },
+				{ label: "Save As…", shortcut: ["Ctrl", "⇧", "S"], action: async () => (await wasm).save_document() },
 				{ label: "Save All", shortcut: ["Ctrl", "Alt", "S"] },
 				{ label: "Auto-Save", checkbox: true, checked: true },
 			],
@@ -128,10 +128,10 @@ const menuEntries: MenuListEntries = [
 					label: "Order",
 					children: [
 						[
-							{ label: "Raise To Front", shortcut: ["Ctrl", "Shift", "]"], action: async () => (await wasm).reorder_selected_layers(2147483647) },
+							{ label: "Raise To Front", shortcut: ["Ctrl", "Shift", "]"], action: async () => (await wasm).reorder_selected_layers((await wasm).i32_max()) },
 							{ label: "Raise", shortcut: ["Ctrl", "]"], action: async () => (await wasm).reorder_selected_layers(1) },
 							{ label: "Lower", shortcut: ["Ctrl", "["], action: async () => (await wasm).reorder_selected_layers(-1) },
-							{ label: "Lower to Back", shortcut: ["Ctrl", "Shift", "["], action: async () => (await wasm).reorder_selected_layers(-2147483648) },
+							{ label: "Lower to Back", shortcut: ["Ctrl", "Shift", "["], action: async () => (await wasm).reorder_selected_layers((await wasm).i32_min()) },
 						],
 					],
 				},