Migrate dialogs to Rust and add a New File dialog (#623)

* Migrate coming soon and about dialog to Rust

* Migrate confirm close and close all

* Migrate dialog error

* Improve keyboard navigation throughout UI

* Cleanup and fix panic dialog

* Reduce css spacing to better match old dialogs

* Add new document modal

* Fix crash when generating default name

* Populate rust about graphite data on startup

* Code review changes

* Move one more :focus CSS rule into App.vue

* Add a dialog message and move dialogs

* Split out keyboard input navigation from this branch

* Improvements including simplifying panic dialog code

Co-authored-by: Keavon Chambers <keavon@keavon.com>

Author: 0HyperCube

editor/src/communication/build_metadata.rs

@@ -0,0 +1,45 @@
+use serde::{Deserialize, Serialize};
+
+/// Provides metadata about the build environment.
+///
+/// This data is viewable in the editor via the [`crate::dialog::AboutGraphite`] dialog.
+#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
+pub struct BuildMetadata {
+	pub release: String,
+	pub timestamp: String,
+	pub hash: String,
+	pub branch: String,
+}
+
+impl Default for BuildMetadata {
+	fn default() -> Self {
+		Self {
+			release: "unknown".to_string(),
+			timestamp: "unknown".to_string(),
+			hash: "unknown".to_string(),
+			branch: "unknown".to_string(),
+		}
+	}
+}
+
+impl BuildMetadata {
+	pub fn release_series(&self) -> String {
+		format!("Release Series: {}", self.release)
+	}
+
+	pub fn commit_info(&self) -> String {
+		format!("{}\n{}\n{}", self.commit_timestamp(), self.commit_hash(), self.commit_branch())
+	}
+
+	pub fn commit_timestamp(&self) -> String {
+		format!("Date: {}", self.timestamp)
+	}
+
+	pub fn commit_hash(&self) -> String {
+		format!("Hash: {}", self.hash)
+	}
+
+	pub fn commit_branch(&self) -> String {
+		format!("Branch: {}", self.branch)
+	}
+}

editor/src/communication/dispatcher.rs

@@ -7,16 +7,20 @@ use crate::viewport_tools::tool_message_handler::ToolMessageHandler;
 
 use std::collections::VecDeque;
 
+use super::BuildMetadata;
+
 #[derive(Debug, Default)]
 pub struct Dispatcher {
 	message_queue: VecDeque<Message>,
 	pub responses: Vec<FrontendMessage>,
 	message_handlers: DispatcherMessageHandlers,
+	build_metadata: BuildMetadata,
 }
 
 #[remain::sorted]
 #[derive(Debug, Default)]
 struct DispatcherMessageHandlers {
+	dialog_message_handler: DialogMessageHandler,
 	global_message_handler: GlobalMessageHandler,
 	input_mapper_message_handler: InputMapperMessageHandler,
 	input_preprocessor_message_handler: InputPreprocessorMessageHandler,
@@ -31,6 +35,9 @@ struct DispatcherMessageHandlers {
 const SIDE_EFFECT_FREE_MESSAGES: &[MessageDiscriminant] = &[
 	MessageDiscriminant::Portfolio(PortfolioMessageDiscriminant::Document(DocumentMessageDiscriminant::RenderDocument)),
 	MessageDiscriminant::Portfolio(PortfolioMessageDiscriminant::Document(DocumentMessageDiscriminant::Overlays(OverlaysMessageDiscriminant::Rerender))),
+	MessageDiscriminant::Portfolio(PortfolioMessageDiscriminant::Document(DocumentMessageDiscriminant::Artboard(
+		ArtboardMessageDiscriminant::RenderArtboards,
+	))),
 	MessageDiscriminant::Portfolio(PortfolioMessageDiscriminant::Document(DocumentMessageDiscriminant::FolderChanged)),
 	MessageDiscriminant::Frontend(FrontendMessageDiscriminant::UpdateDocumentLayer),
 	MessageDiscriminant::Frontend(FrontendMessageDiscriminant::DisplayDocumentLayerTreeStructure),
@@ -63,6 +70,11 @@ impl Dispatcher {
 			match message {
 				#[remain::unsorted]
 				NoOp => {}
+				Dialog(message) => {
+					self.message_handlers
+						.dialog_message_handler
+						.process_action(message, (&self.build_metadata, &self.message_handlers.portfolio_message_handler), &mut self.message_queue);
+				}
 				Frontend(message) => {
 					// Image and font loading should be immediately handled
 					if let FrontendMessage::UpdateImageData { .. } | FrontendMessage::TriggerFontLoad { .. } = message {
@@ -101,13 +113,17 @@ impl Dispatcher {
 						&mut self.message_queue,
 					);
 				}
+
+				#[remain::unsorted]
+				PopulateBuildMetadata { new } => self.build_metadata = new,
 			}
 		}
 	}
 
 	pub fn collect_actions(&self) -> ActionList {
 		// TODO: Reduce the number of heap allocations
 		let mut list = Vec::new();
+		list.extend(self.message_handlers.dialog_message_handler.actions());
 		list.extend(self.message_handlers.input_preprocessor_message_handler.actions());
 		list.extend(self.message_handlers.input_mapper_message_handler.actions());
 		list.extend(self.message_handlers.global_message_handler.actions());
@@ -434,18 +450,22 @@ mod test {
 		});
 
 		for response in responses {
-			if let FrontendMessage::DisplayDialogError { title, description } = response {
-				println!();
-				println!("-------------------------------------------------");
-				println!("Failed test due to receiving a DisplayDialogError while loading the graphite sample file!");
-				println!("This is most likely caused by forgetting to bump the `GRAPHITE_DOCUMENT_VERSION` in `editor/src/consts.rs`");
-				println!("Once bumping this version number please replace the `graphite-test-document.graphite` with a valid file");
-				println!("DisplayDialogError details:");
-				println!("Title: {}", title);
-				println!("description: {}", description);
-				println!("-------------------------------------------------");
-				println!();
-				panic!()
+			if let FrontendMessage::UpdateDialogDetails { layout_target: _, layout } = response {
+				if let crate::layout::widgets::LayoutRow::Row { widgets } = &layout[0] {
+					if let crate::layout::widgets::Widget::TextLabel(crate::layout::widgets::TextLabel { value, .. }) = &widgets[0].widget {
+						println!();
+						println!("-------------------------------------------------");
+						println!("Failed test due to receiving a DisplayDialogError while loading the Graphite sample file!");
+						println!("This is most likely caused by forgetting to bump the `GRAPHITE_DOCUMENT_VERSION` in `editor/src/consts.rs`");
+						println!("Once bumping this version number please replace the `graphite-test-document.graphite` with a valid file.");
+						println!("DisplayDialogError details:");
+						println!();
+						println!("Description: {}", value);
+						println!("-------------------------------------------------");
+						println!();
+						panic!()
+					}
+				}
 			}
 		}
 	}

editor/src/communication/message.rs

@@ -1,3 +1,4 @@
+use super::BuildMetadata;
 use crate::message_prelude::*;
 
 use graphite_proc_macros::*;
@@ -23,6 +24,8 @@ pub enum Message {
 	#[remain::unsorted]
 	NoOp,
 	#[child]
+	Dialog(DialogMessage),
+	#[child]
 	Frontend(FrontendMessage),
 	#[child]
 	Global(GlobalMessage),
@@ -36,6 +39,9 @@ pub enum Message {
 	Portfolio(PortfolioMessage),
 	#[child]
 	Tool(ToolMessage),
+
+	#[remain::unsorted]
+	PopulateBuildMetadata { new: BuildMetadata },
 }
 
 impl Message {

editor/src/communication/mod.rs

@@ -1,9 +1,11 @@
+mod build_metadata;
 pub mod dispatcher;
 pub mod message;
 pub mod message_handler;
 
 pub use crate::communication::dispatcher::*;
 pub use crate::input::InputPreprocessorMessageHandler;
+pub use build_metadata::BuildMetadata;
 
 use rand_chacha::rand_core::{RngCore, SeedableRng};
 use rand_chacha::ChaCha20Rng;

editor/src/dialog/dialog_message.rs

@@ -0,0 +1,27 @@
+use crate::message_prelude::*;
+use serde::{Deserialize, Serialize};
+
+use super::NewDocumentDialogUpdate;
+
+#[remain::sorted]
+#[impl_message(Message, Dialog)]
+#[derive(PartialEq, Clone, Debug, Serialize, Deserialize)]
+pub enum DialogMessage {
+	#[remain::unsorted]
+	#[child]
+	NewDocumentDialog(NewDocumentDialogUpdate),
+
+	CloseAllDocumentsWithConfirmation,
+	CloseDialogAndThen {
+		followup: Box<Message>,
+	},
+	DisplayDialogError {
+		title: String,
+		description: String,
+	},
+	RequestAboutGraphiteDialog,
+	RequestComingSoonDialog {
+		issue: Option<i32>,
+	},
+	RequestNewDocumentDialog,
+}

editor/src/dialog/dialog_message_handler.rs

@@ -0,0 +1,60 @@
+use crate::communication::BuildMetadata;
+use crate::document::PortfolioMessageHandler;
+use crate::layout::{layout_message::LayoutTarget, widgets::PropertyHolder};
+use crate::message_prelude::*;
+
+use super::*;
+
+#[derive(Debug, Default, Clone)]
+pub struct DialogMessageHandler {
+	new_document_dialog: NewDocument,
+}
+
+impl MessageHandler<DialogMessage, (&BuildMetadata, &PortfolioMessageHandler)> for DialogMessageHandler {
+	#[remain::check]
+	fn process_action(&mut self, message: DialogMessage, (build_metadata, portfolio): (&BuildMetadata, &PortfolioMessageHandler), responses: &mut VecDeque<Message>) {
+		#[remain::sorted]
+		match message {
+			#[remain::unsorted]
+			DialogMessage::NewDocumentDialog(message) => self.new_document_dialog.process_action(message, (), responses),
+
+			DialogMessage::CloseAllDocumentsWithConfirmation => {
+				let dialog = dialogs::CloseAllDocuments;
+				dialog.register_properties(responses, LayoutTarget::DialogDetails);
+				responses.push_back(FrontendMessage::DisplayDialog { icon: "Copy".to_string() }.into());
+			}
+			DialogMessage::CloseDialogAndThen { followup } => {
+				responses.push_back(FrontendMessage::DisplayDialogDismiss.into());
+				responses.push_back(*followup);
+			}
+			DialogMessage::DisplayDialogError { title, description } => {
+				let dialog = dialogs::Error { title, description };
+				dialog.register_properties(responses, LayoutTarget::DialogDetails);
+				responses.push_back(FrontendMessage::DisplayDialog { icon: "Warning".to_string() }.into());
+			}
+			DialogMessage::RequestAboutGraphiteDialog => {
+				let about_graphite = AboutGraphite {
+					build_metadata: build_metadata.clone(),
+				};
+				about_graphite.register_properties(responses, LayoutTarget::DialogDetails);
+				responses.push_back(FrontendMessage::DisplayDialog { icon: "GraphiteLogo".to_string() }.into());
+			}
+			DialogMessage::RequestComingSoonDialog { issue } => {
+				let coming_soon = ComingSoon { issue };
+				coming_soon.register_properties(responses, LayoutTarget::DialogDetails);
+				responses.push_back(FrontendMessage::DisplayDialog { icon: "Warning".to_string() }.into());
+			}
+			DialogMessage::RequestNewDocumentDialog => {
+				self.new_document_dialog = NewDocument {
+					name: portfolio.generate_new_document_name(),
+					infinite: true,
+					dimensions: glam::UVec2::new(1920, 1080),
+				};
+				self.new_document_dialog.register_properties(responses, LayoutTarget::DialogDetails);
+				responses.push_back(FrontendMessage::DisplayDialog { icon: "File".to_string() }.into());
+			}
+		}
+	}
+
+	advertise_actions!(DialogMessageDiscriminant;RequestNewDocumentDialog,CloseAllDocumentsWithConfirmation);
+}

editor/src/dialog/dialogs/about_dialog.rs

@@ -0,0 +1,50 @@
+use crate::{communication::BuildMetadata, layout::widgets::*, message_prelude::FrontendMessage};
+
+/// A dialog for displaying information on [`BuildMetadata`] viewable via `help -> about graphite` in the menu bar.
+pub struct AboutGraphite {
+	pub build_metadata: BuildMetadata,
+}
+
+impl PropertyHolder for AboutGraphite {
+	fn properties(&self) -> WidgetLayout {
+		let links = [
+			("Website", "https://graphite.rs"),
+			("Credits", "https://github.com/GraphiteEditor/Graphite/graphs/contributors"),
+			("License", "https://raw.githubusercontent.com/GraphiteEditor/Graphite/master/LICENSE.txt"),
+			("Third-Party Licenses", "/third-party-licenses.txt"),
+		];
+		let link_widgets = links
+			.into_iter()
+			.map(|(label, url)| {
+				WidgetHolder::new(Widget::TextButton(TextButton {
+					label: label.to_string(),
+					on_update: WidgetCallback::new(|_| FrontendMessage::TriggerVisitLink { url: url.to_string() }.into()),
+					..Default::default()
+				}))
+			})
+			.collect();
+		WidgetLayout::new(vec![
+			LayoutRow::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: "Graphite".to_string(),
+					bold: true,
+					..Default::default()
+				}))],
+			},
+			LayoutRow::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: self.build_metadata.release_series(),
+					..Default::default()
+				}))],
+			},
+			LayoutRow::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: self.build_metadata.commit_info(),
+					multiline: true,
+					..Default::default()
+				}))],
+			},
+			LayoutRow::Row { widgets: link_widgets },
+		])
+	}
+}

editor/src/dialog/dialogs/close_all_documents_dialog.rs

@@ -0,0 +1,47 @@
+use crate::layout::widgets::*;
+use crate::message_prelude::{DialogMessage, FrontendMessage, PortfolioMessage};
+
+/// A dialog for confirming the closing of all documents viewable via `file -> close all` in the menu bar.
+pub struct CloseAllDocuments;
+
+impl PropertyHolder for CloseAllDocuments {
+	fn properties(&self) -> WidgetLayout {
+		let button_widgets = vec![
+			WidgetHolder::new(Widget::TextButton(TextButton {
+				label: "Discard All".to_string(),
+				min_width: 96,
+				on_update: WidgetCallback::new(|_| {
+					DialogMessage::CloseDialogAndThen {
+						followup: Box::new(PortfolioMessage::CloseAllDocuments.into()),
+					}
+					.into()
+				}),
+				..Default::default()
+			})),
+			WidgetHolder::new(Widget::TextButton(TextButton {
+				label: "Cancel".to_string(),
+				min_width: 96,
+				on_update: WidgetCallback::new(|_| FrontendMessage::DisplayDialogDismiss.into()),
+				..Default::default()
+			})),
+		];
+
+		WidgetLayout::new(vec![
+			LayoutRow::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: "Close all documents?".to_string(),
+					bold: true,
+					..Default::default()
+				}))],
+			},
+			LayoutRow::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: "Unsaved work will be lost!".to_string(),
+					multiline: true,
+					..Default::default()
+				}))],
+			},
+			LayoutRow::Row { widgets: button_widgets },
+		])
+	}
+}