From dbd6a032f719f2ec1394e82db73f52a0c7bfa989 Mon Sep 17 00:00:00 2001
From: 0HyperCube <78500760+0HyperCube@users.noreply.github.com>
Date: Wed, 28 Dec 2022 21:02:03 +0000
Subject: [PATCH] Add a button to refresh the input (#926)

* Add a button to refresh the input

* Align left of refresh button

Co-authored-by: Keavon Chambers <keavon@keavon.com>
---
 .../document_node_types.rs                           |  2 +-
 .../node_graph_message_handler/node_properties.rs    | 12 ++++++++++++
 .../src/components/widgets/groups/WidgetSection.vue  |  4 ++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/document_node_types.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/document_node_types.rs
index 95f75eda4..f1c44afc2 100644
--- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/document_node_types.rs
+++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/document_node_types.rs
@@ -73,7 +73,7 @@ static DOCUMENT_NODE_TYPES: &[DocumentNodeType] = &[
 			default: NodeInput::Network,
 		}],
 		outputs: &[FrontendGraphDataType::Raster],
-		properties: |_document_node, _node_id, _context| node_properties::string_properties("The graph's input is the artwork under the frame layer".to_string()),
+		properties: node_properties::input_properties,
 	},
 	DocumentNodeType {
 		name: "Output",
diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
index df3a439f3..83addf114 100644
--- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
+++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
@@ -144,6 +144,18 @@ fn number_widget(document_node: &DocumentNode, node_id: NodeId, index: usize, na
 	widgets
 }
 
+/// Properties for the input node, with information describing how frames work and a refresh button
+pub fn input_properties(_document_node: &DocumentNode, _node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
+	let information = WidgetHolder::text_widget("The graph's input is the artwork under the frame layer");
+	let refresh_button = WidgetHolder::new(Widget::TextButton(TextButton {
+		label: "Refresh Input".to_string(),
+		tooltip: "Refresh the artwork under the frame".to_string(),
+		on_update: WidgetCallback::new(|_| DocumentMessage::NodeGraphFrameGenerate.into()),
+		..Default::default()
+	}));
+	vec![LayoutGroup::Row { widgets: vec![information] }, LayoutGroup::Row { widgets: vec![refresh_button] }]
+}
+
 pub fn adjust_hsl_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
 	let hue_shift = number_widget(document_node, node_id, 1, "Hue Shift", NumberInput::new().min(-180.).max(180.).unit("°"), true);
 	let saturation_shift = number_widget(document_node, node_id, 2, "Saturation Shift", NumberInput::new().min(-100.).max(100.).unit("%"), true);
diff --git a/frontend/src/components/widgets/groups/WidgetSection.vue b/frontend/src/components/widgets/groups/WidgetSection.vue
index cc29c13ed..98c73bad5 100644
--- a/frontend/src/components/widgets/groups/WidgetSection.vue
+++ b/frontend/src/components/widgets/groups/WidgetSection.vue
@@ -95,6 +95,10 @@
 				margin-bottom: calc(4px - 1px);
 			}
 
+			> .text-button:first-child {
+				margin-left: 16px;
+			}
+
 			> .text-label:first-of-type {
 				flex: 0 0 25%;
 				margin-left: 16px;