Implement IndexedDB document auto-save

editor/Cargo.toml

@@ -17,7 +17,9 @@ thiserror = "1.0.24"
 serde = { version = "1.0", features = ["derive"] }
 graphite-proc-macros = { path = "../proc-macros" }
 glam = { version="0.17", features = ["serde"] }
+rand = "0.8.4"
 rand_chacha = "0.3.1"
+getrandom = "0.2.3"
 spin = "0.9.2"
 kurbo = { git = "https://github.com/GraphiteEditor/kurbo.git", features = [
 	"serde",
@@ -29,3 +31,6 @@ package = "graphite-graphene"
 
 [dev-dependencies]
 env_logger = "0.8.4"
+
+[features]
+js = ["getrandom/js"]

editor/src/communication/mod.rs

@@ -32,7 +32,7 @@ where
 pub fn generate_uuid() -> u64 {
 	let mut lock = RNG.lock();
 	if lock.is_none() {
-		*lock = Some(ChaCha20Rng::seed_from_u64(0));
+		*lock = Some(ChaCha20Rng::from_entropy());
 	}
 	lock.as_mut().map(ChaCha20Rng::next_u64).unwrap()
 }

editor/src/document/document_file.rs

@@ -413,6 +413,14 @@ impl DocumentMessageHandler {
 		self.current_identifier() == self.saved_document_identifier
 	}
 
+	pub fn saved(&mut self, state: bool) {
+		if state {
+			self.saved_document_identifier = self.current_identifier();
+		} else {
+			self.saved_document_identifier = generate_uuid();
+		}
+	}
+
 	pub fn layer_panel_entry(&mut self, path: Vec<LayerId>) -> Result<LayerPanelEntry, EditorError> {
 		let data: LayerData = *layer_data(&mut self.layer_data, &path);
 		let layer = self.graphene_document.layer(&path)?;
@@ -493,7 +501,8 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 				)
 			}
 			SaveDocument => {
-				self.saved_document_identifier = self.current_identifier();
+				self.saved(true);
+				responses.push_back(DocumentsMessage::AutoSaveActiveDocument.into());
 				// Update the save status of the just saved document
 				responses.push_back(DocumentsMessage::UpdateOpenDocumentsList.into());
 

editor/src/document/document_message_handler.rs

@@ -30,8 +30,16 @@ pub enum DocumentsMessage {
 	RequestAboutGraphiteDialog,
 	NewDocument,
 	OpenDocument,
+	OpenDocumentFileWithId {
+		document: String,
+		document_name: String,
+		document_id: u64,
+		document_is_saved: bool,
+	},
 	OpenDocumentFile(String, String),
 	UpdateOpenDocumentsList,
+	AutoSaveDocument(u64),
+	AutoSaveActiveDocument,
 	NextDocument,
 	PrevDocument,
 }
@@ -76,11 +84,19 @@ impl DocumentsMessageHandler {
 		name
 	}
 
-	fn load_document(&mut self, new_document: DocumentMessageHandler, responses: &mut VecDeque<Message>) {
-		let new_id = generate_uuid();
-		self.active_document_id = new_id;
-		self.document_ids.push(new_id);
-		self.documents.insert(new_id, new_document);
+	fn load_document(&mut self, new_document: DocumentMessageHandler, document_id: u64, replace_first_empty: bool, responses: &mut VecDeque<Message>) {
+		// Special case when loading a document on an empty page
+		if replace_first_empty && self.document_ids.len() == 1 {
+			let first_id = self.document_ids[0];
+			let first_document = self.documents.get(&first_id).unwrap();
+			if first_document.serialize_root().len() == 2 {
+				// The first document must not have been touched
+				responses.push_back(DocumentsMessage::CloseDocument(first_id).into());
+			}
+		}
+
+		self.document_ids.push(document_id);
+		self.documents.insert(document_id, new_document);
 
 		// Send the new list of document tab names
 		let open_documents = self
@@ -97,12 +113,7 @@ impl DocumentsMessageHandler {
 
 		responses.push_back(FrontendMessage::UpdateOpenDocumentsList { open_documents }.into());
 
-		responses.push_back(DocumentsMessage::SelectDocument(self.active_document_id).into());
-		responses.push_back(DocumentMessage::RenderDocument.into());
-		responses.push_back(DocumentMessage::DocumentStructureChanged.into());
-		for layer in self.active_document().layer_data.keys() {
-			responses.push_back(DocumentMessage::LayerChanged(layer.clone()).into());
-		}
+		responses.push_back(DocumentsMessage::SelectDocument(document_id).into());
 	}
 
 	// Returns an iterator over the open documents in order
@@ -140,6 +151,10 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 			}
 			Document(message) => self.active_document_mut().process_action(message, ipp, responses),
 			SelectDocument(id) => {
+				let active_document = self.active_document();
+				if !active_document.is_saved() {
+					responses.push_back(DocumentsMessage::AutoSaveDocument(self.active_document_id).into());
+				}
 				self.active_document_id = id;
 				responses.push_back(FrontendMessage::SetActiveDocument { document_id: id }.into());
 				responses.push_back(RenderDocument.into());
@@ -210,6 +225,7 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 				// Update the list of new documents on the front end, active tab, and ensure that document renders
 				responses.push_back(FrontendMessage::UpdateOpenDocumentsList { open_documents }.into());
 				responses.push_back(FrontendMessage::SetActiveDocument { document_id: self.active_document_id }.into());
+				responses.push_back(FrontendMessage::RemoveAutoSaveDocument { document_id: id }.into());
 				responses.push_back(RenderDocument.into());
 				responses.push_back(DocumentMessage::DocumentStructureChanged.into());
 				for layer in self.active_document().layer_data.keys() {
@@ -219,16 +235,32 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 			NewDocument => {
 				let name = self.generate_new_document_name();
 				let new_document = DocumentMessageHandler::with_name(name, ipp);
-				self.load_document(new_document, responses);
+				self.load_document(new_document, generate_uuid(), false, responses);
 			}
 			OpenDocument => {
 				responses.push_back(FrontendMessage::OpenDocumentBrowse.into());
 			}
-			OpenDocumentFile(name, serialized_contents) => {
-				let document = DocumentMessageHandler::with_name_and_content(name, serialized_contents, ipp);
+			OpenDocumentFile(document_name, document) => responses.push_back(
+				DocumentsMessage::OpenDocumentFileWithId {
+					document,
+					document_name,
+					document_id: generate_uuid(),
+					document_is_saved: true,
+				}
+				.into(),
+			),
+			OpenDocumentFileWithId {
+				document_name,
+				document_id,
+				document,
+				document_is_saved,
+			} => {
+				let document = DocumentMessageHandler::with_name_and_content(document_name, document, ipp);
 				match document {
-					Ok(document) => {
-						self.load_document(document, responses);
+					Ok(mut document) => {
+						log::debug!("Setting Saved: {}", document_is_saved);
+						document.saved(document_is_saved);
+						self.load_document(document, document_id, true, responses);
 					}
 					Err(e) => responses.push_back(
 						FrontendMessage::DisplayError {
@@ -254,18 +286,33 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 					.collect::<Vec<_>>();
 				responses.push_back(FrontendMessage::UpdateOpenDocumentsList { open_documents }.into());
 			}
+			AutoSaveDocument(id) => {
+				let document = self.documents.get(&id).unwrap();
+				responses.push_back(
+					FrontendMessage::AutoSaveDocument {
+						document: document.graphene_document.serialize_document(),
+						details: FrontendDocumentDetails {
+							is_saved: document.is_saved(),
+							id,
+							name: document.name.clone(),
+						},
+					}
+					.into(),
+				)
+			}
+			AutoSaveActiveDocument => responses.push_back(DocumentsMessage::AutoSaveDocument(self.active_document_id).into()),
 			NextDocument => {
 				let current_index = self.document_index(self.active_document_id);
 				let next_index = (current_index + 1) % self.document_ids.len();
 				let next_id = self.document_ids[next_index];
-				responses.push_back(SelectDocument(next_id).into());
+				responses.push_back(DocumentsMessage::SelectDocument(next_id).into());
 			}
 			PrevDocument => {
 				let len = self.document_ids.len();
 				let current_index = self.document_index(self.active_document_id);
 				let prev_index = (current_index + len - 1) % len;
 				let prev_id = self.document_ids[prev_index];
-				responses.push_back(SelectDocument(prev_id).into());
+				responses.push_back(DocumentsMessage::SelectDocument(prev_id).into());
 			}
 			Copy => {
 				let paths = self.active_document().selected_layers_sorted();

editor/src/document/movement_handler.rs

@@ -6,7 +6,6 @@ use crate::{
 	input::{mouse::ViewportBounds, mouse::ViewportPosition, InputPreprocessor},
 };
 use graphene::document::Document;
-use graphene::layers::style::ViewMode;
 use graphene::Operation as DocumentOperation;
 
 use glam::DVec2;

editor/src/frontend/frontend_message_handler.rs

@@ -31,6 +31,8 @@ pub enum FrontendMessage {
 	UpdateRulers { origin: (f64, f64), spacing: f64, interval: f64 },
 	ExportDocument { document: String, name: String },
 	SaveDocument { document: String, name: String },
+	AutoSaveDocument { document: String, details: FrontendDocumentDetails },
+	RemoveAutoSaveDocument { document_id: u64 },
 	OpenDocumentBrowse,
 	UpdateWorkingColors { primary: Color, secondary: Color },
 	SetCanvasZoom { new_zoom: f64 },

editor/src/tool/tools/eyedropper.rs

@@ -62,8 +62,8 @@ impl Fsm for EyedropperToolFsmState {
 		self,
 		event: ToolMessage,
 		document: &DocumentMessageHandler,
-		tool_data: &DocumentToolData,
-		data: &mut Self::ToolData,
+		_tool_data: &DocumentToolData,
+		_data: &mut Self::ToolData,
 		input: &InputPreprocessor,
 		responses: &mut VecDeque<Message>,
 	) -> Self {

editor/src/tool/tools/fill.rs

@@ -63,7 +63,7 @@ impl Fsm for FillToolFsmState {
 		event: ToolMessage,
 		document: &DocumentMessageHandler,
 		tool_data: &DocumentToolData,
-		data: &mut Self::ToolData,
+		_data: &mut Self::ToolData,
 		input: &InputPreprocessor,
 		responses: &mut VecDeque<Message>,
 	) -> Self {

frontend/src/App.vue

@@ -230,6 +230,7 @@ import LayoutRow from "@/components/layout/LayoutRow.vue";
 import { createEditorState, EditorState } from "@/state/wasm-loader";
 import { createInputManager, InputManager } from "@/lifetime/input";
 import { initErrorHandling } from "@/lifetime/errors";
+import { createAutoSave } from "@/lifetime/auto-save";
 
 // Vue injects don't play well with TypeScript, and all injects will show up as `any`. As a workaround, we can define these types.
 declare module "@vue/runtime-core" {
@@ -259,6 +260,7 @@ export default defineComponent({
 		const documents = createDocumentsState(editor, dialog);
 		const fullscreen = createFullscreenState();
 		initErrorHandling(editor, dialog);
+		createAutoSave(editor, documents);
 
 		return {
 			editor,

frontend/src/dispatcher/js-messages.ts

@@ -296,6 +296,25 @@ export const LayerTypeOptions = {
 
 export type LayerType = typeof LayerTypeOptions[keyof typeof LayerTypeOptions];
 
+export class FrontendDocumentDetailsIndexedDb extends FrontendDocumentDetails {
+	@Transform(({ value }: { value: BigInt }) => value.toString())
+	// @ts-expect-error Use a string since IndexedDB can not use BigInts for keys
+	id!: string;
+}
+
+export class AutoSaveDocument extends JsMessage {
+	document!: string;
+
+	@Type(() => FrontendDocumentDetailsIndexedDb)
+	details!: FrontendDocumentDetailsIndexedDb;
+}
+
+export class RemoveAutoSaveDocument extends JsMessage {
+	// Use a string since IndexedDB can not use BigInts for keys
+	@Transform(({ value }: { value: BigInt }) => value.toString())
+	document_id!: string;
+}
+
 // Any is used since the type of the object should be known from the rust side
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type JSMessageFactory = (data: any, wasm: WasmInstance, instance: RustEditorInstance) => JsMessage;
@@ -322,5 +341,7 @@ export const messageConstructors: Record<string, MessageMaker> = {
 	DisplayConfirmationToCloseDocument,
 	DisplayConfirmationToCloseAllDocuments,
 	DisplayAboutGraphiteDialog,
+	AutoSaveDocument,
+	RemoveAutoSaveDocument,
 } as const;
 export type JsMessageType = keyof typeof messageConstructors;