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.

Author: azeemba

editor/src/document/document_file.rs

@@ -293,13 +293,15 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 							"\n",
 							self.document.render_root()
 						),
+						name: self.name.clone(),
 					}
 					.into(),
 				)
 			}
 			SaveDocument => responses.push_back(
 				FrontendMessage::SaveDocument {
 					document: self.document.serialize_document(),
+					name: self.name.clone(),
 				}
 				.into(),
 			),

editor/src/frontend/frontend_message_handler.rs

@@ -18,8 +18,8 @@ pub enum FrontendMessage {
 	DisplayConfirmationToCloseAllDocuments,
 	UpdateCanvas { document: String },
 	UpdateLayer { path: Vec<LayerId>, data: LayerPanelEntry },
-	ExportDocument { document: String },
-	SaveDocument { document: String },
+	ExportDocument { document: String, name: String },
+	SaveDocument { document: String, name: String },
 	EnableTextInput,
 	DisableTextInput,
 	UpdateWorkingColors { primary: Color, secondary: Color },

frontend/src/components/panels/Document.vue

@@ -232,6 +232,7 @@ import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
 import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 
+const FILE_SUFFIX = ".graphite";
 const documentModeEntries: SectionsOfMenuListEntries = [
 	[
 		{ label: "Design Mode", icon: "ViewportDesignMode" },
@@ -332,11 +333,22 @@ export default defineComponent({
 		});
 		registerResponseHandler(ResponseType.ExportDocument, (responseData: Response) => {
 			const updateData = responseData as ExportDocument;
-			if (updateData) this.download("canvas.svg", updateData.document);
+			if (!updateData) return;
+
+			let { name } = updateData;
+			const target_suffix = ".svg";
+			if (name.endsWith(FILE_SUFFIX)) name = name.replace(FILE_SUFFIX, target_suffix);
+			if (!name.endsWith(target_suffix)) name = `${name}${target_suffix}`;
+
+			this.download(name, updateData.document);
 		});
 		registerResponseHandler(ResponseType.SaveDocument, (responseData: Response) => {
 			const saveData = responseData as SaveDocument;
-			if (saveData) this.download("canvas.graphite", saveData.document);
+			if (!saveData) return;
+
+			let { name } = saveData;
+			if (!name.endsWith(FILE_SUFFIX)) name = `${name}${FILE_SUFFIX}`;
+			this.download(name, saveData.document);
 		});
 		registerResponseHandler(ResponseType.SetActiveTool, (responseData: Response) => {
 			const toolData = responseData as SetActiveTool;

frontend/src/utilities/response-handler.ts

@@ -169,19 +169,23 @@ function newUpdateCanvas(input: any): UpdateCanvas {
 
 export interface ExportDocument {
 	document: string;
+	name: string;
 }
-function newExportDocument(input: any): UpdateCanvas {
+function newExportDocument(input: any): ExportDocument {
 	return {
 		document: input.document,
+		name: input.name,
 	};
 }
 
 export interface SaveDocument {
 	document: string;
+	name: string;
 }
 function newSaveDocument(input: any): SaveDocument {
 	return {
 		document: input.document,
+		name: input.name,
 	};
 }