Add Isometric Fountain demo artwork

editor/src/messages/dialog/simple_dialogs/demo_artwork_dialog.rs

@@ -5,11 +5,12 @@ use crate::messages::prelude::*;
 pub struct DemoArtworkDialog;
 
 /// `(name, thumbnail, filename)`
-pub const ARTWORK: [(&str, &str, &str); 4] = [
+pub const ARTWORK: [(&str, &str, &str); 5] = [
 	("Valley of Spires", "ThumbnailValleyOfSpires", "valley-of-spires.graphite"),
 	("Red Dress", "ThumbnailRedDress", "red-dress.graphite"),
-	("Just a Potted Cactus", "ThumbnailJustAPottedCactus", "just-a-potted-cactus.graphite"),
+	("Isometric Fountain", "ThumbnailIsometricFountain", "isometric-fountain.graphite"),
 	("Procedural String Lights", "ThumbnailProceduralStringLights", "procedural-string-lights.graphite"),
+	("Just a Potted Cactus", "ThumbnailJustAPottedCactus", "just-a-potted-cactus.graphite"),
 ];
 
 impl DialogLayoutHolder for DemoArtworkDialog {
@@ -25,30 +26,40 @@ impl DialogLayoutHolder for DemoArtworkDialog {
 
 impl LayoutHolder for DemoArtworkDialog {
 	fn layout(&self) -> Layout {
-		let images = ARTWORK
+		let mut rows_of_images_with_buttons: Vec<_> = ARTWORK
+			.chunks(3)
 			.into_iter()
-			.map(|(_, thumbnail, _)| ImageLabel::new(thumbnail.to_string()).width(Some("256px".into())).widget_holder())
-			.collect();
+			.map(|chunk| {
+				let images = chunk
+					.into_iter()
+					.map(|(_, thumbnail, _)| ImageLabel::new(*thumbnail).width(Some("256px".into())).widget_holder())
+					.collect();
 
-		let buttons = ARTWORK
-			.into_iter()
-			.map(|(name, _, filename)| {
-				TextButton::new(name)
-					.min_width(256)
-					.on_update(|_| {
-						DialogMessage::CloseDialogAndThen {
-							followups: vec![FrontendMessage::TriggerFetchAndOpenDocument {
-								name: name.to_string(),
-								filename: filename.to_string(),
-							}
-							.into()],
-						}
-						.into()
+				let buttons = chunk
+					.into_iter()
+					.map(|(name, _, filename)| {
+						TextButton::new(*name)
+							.min_width(256)
+							.on_update(|_| {
+								DialogMessage::CloseDialogAndThen {
+									followups: vec![FrontendMessage::TriggerFetchAndOpenDocument {
+										name: name.to_string(),
+										filename: filename.to_string(),
+									}
+									.into()],
+								}
+								.into()
+							})
+							.widget_holder()
 					})
-					.widget_holder()
-			})
-			.collect();
+					.collect();
 
-		Layout::WidgetLayout(WidgetLayout::new(vec![LayoutGroup::Row { widgets: images }, LayoutGroup::Row { widgets: buttons }]))
+				vec![LayoutGroup::Row { widgets: images }, LayoutGroup::Row { widgets: buttons }, LayoutGroup::Row { widgets: vec![] }]
+			})
+			.flatten()
+			.collect();
+		let _ = rows_of_images_with_buttons.pop();
+
+		Layout::WidgetLayout(WidgetLayout::new(rows_of_images_with_buttons))
 	}
 }

editor/src/messages/portfolio/document/node_graph/node_properties.rs

@@ -322,6 +322,7 @@ fn font_inputs(document_node: &DocumentNode, node_id: NodeId, index: usize, name
 fn vector_widget(document_node: &DocumentNode, node_id: NodeId, index: usize, name: &str, blank_assist: bool) -> Vec<WidgetHolder> {
 	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::Vector, blank_assist);
 
+	widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder());
 	widgets.push(TextLabel::new("Vector data must be supplied through the graph").widget_holder());
 
 	widgets

frontend/src/components/floating-menus/Dialog.svelte

@@ -32,7 +32,7 @@
 		<IconLabel icon={$dialog.icon} class={$dialog.icon.toLowerCase()} />
 		<TextLabel>{$dialog.title}</TextLabel>
 	</LayoutRow>
-	<LayoutRow class="content">
+	<LayoutRow class={`content ${$dialog.title === "Demo Artwork" ? "center" : "" /* TODO: Replace this with a less hacky approach that's compatible with localization/translation */}`}>
 		<LayoutCol class="column-1">
 			{#if $dialog.column1.layout.length > 0}
 				<WidgetLayout layout={$dialog.column1} class="details" />
@@ -114,6 +114,10 @@
 		.content {
 			margin: -4px 0;
 
+			&.center .row {
+				justify-content: center;
+			}
+
 			.column-1 + .column-2 {
 				margin-left: 48px;
 

frontend/src/utility-functions/images.ts

@@ -1,12 +1,14 @@
 /* eslint-disable import/first */
 
 // Demo artwork
+import ThumbnailIsometricFountain from "@graphite-frontend/assets/images/demo-artwork/thumbnail-isometric-fountain.png";
 import ThumbnailJustAPottedCactus from "@graphite-frontend/assets/images/demo-artwork/thumbnail-just-a-potted-cactus.png";
 import ThumbnailProceduralStringLights from "@graphite-frontend/assets/images/demo-artwork/thumbnail-procedural-string-lights.png";
 import ThumbnailRedDress from "@graphite-frontend/assets/images/demo-artwork/thumbnail-red-dress.png";
 import ThumbnailValleyOfSpires from "@graphite-frontend/assets/images/demo-artwork/thumbnail-valley-of-spires.png";
 
 const DEMO_ARTWORK = {
+	ThumbnailIsometricFountain,
 	ThumbnailJustAPottedCactus,
 	ThumbnailProceduralStringLights,
 	ThumbnailValleyOfSpires,