Add layer renaming to the Properties panel and move New Layer to that…

…, plus add unpinning to properties sections

editor/src/messages/frontend/frontend_message.rs

@@ -253,11 +253,6 @@ pub enum FrontendMessage {
 		#[serde(rename = "openDocuments")]
 		open_documents: Vec<FrontendDocumentDetails>,
 	},
-	UpdatePropertyPanelOptionsLayout {
-		#[serde(rename = "layoutTarget")]
-		layout_target: LayoutTarget,
-		diff: Vec<WidgetDiff>,
-	},
 	UpdatePropertyPanelSectionsLayout {
 		#[serde(rename = "layoutTarget")]
 		layout_target: LayoutTarget,

editor/src/messages/layout/layout_message_handler.rs

@@ -405,7 +405,6 @@ impl LayoutMessageHandler {
 			LayoutTarget::LayersPanelOptions => FrontendMessage::UpdateLayersPanelOptionsLayout { layout_target, diff },
 			LayoutTarget::MenuBar => unreachable!("Menu bar is not diffed"),
 			LayoutTarget::NodeGraphBar => FrontendMessage::UpdateNodeGraphBarLayout { layout_target, diff },
-			LayoutTarget::PropertiesOptions => FrontendMessage::UpdatePropertyPanelOptionsLayout { layout_target, diff },
 			LayoutTarget::PropertiesSections => FrontendMessage::UpdatePropertyPanelSectionsLayout { layout_target, diff },
 			LayoutTarget::ToolOptions => FrontendMessage::UpdateToolOptionsLayout { layout_target, diff },
 			LayoutTarget::ToolShelf => FrontendMessage::UpdateToolShelfLayout { layout_target, diff },

editor/src/messages/layout/utility_types/layout_widget.rs

@@ -38,8 +38,6 @@ pub enum LayoutTarget {
 	MenuBar,
 	/// Bar at the top of the node graph containing the location and the "Preview" and "Hide" buttons.
 	NodeGraphBar,
-	/// The bar at the top of the Properties panel containing the layer name and icon.
-	PropertiesOptions,
 	/// The body of the Properties panel containing many collapsable sections.
 	PropertiesSections,
 	/// The bar directly above the canvas, left-aligned and to the right of the document mode dropdown.
@@ -303,7 +301,7 @@ pub enum LayoutGroup {
 	},
 	// TODO: Move this from being a child of `enum LayoutGroup` to being a child of `enum Layout`
 	#[serde(rename = "section")]
-	Section { name: String, visible: bool, id: u64, layout: SubLayout },
+	Section { name: String, visible: bool, pinned: bool, id: u64, layout: SubLayout },
 }
 
 impl Default for LayoutGroup {
@@ -385,29 +383,33 @@ impl LayoutGroup {
 				Self::Section {
 					name: current_name,
 					visible: current_visible,
+					pinned: current_pinned,
 					id: current_id,
 					layout: current_layout,
 				},
 				Self::Section {
 					name: new_name,
 					visible: new_visible,
+					pinned: new_pinned,
 					id: new_id,
 					layout: new_layout,
 				},
 			) => {
 				// Resend the entire panel if the lengths, names, visibility, or node IDs are different
 				// TODO: Diff insersion and deletion of items
-				if current_layout.len() != new_layout.len() || *current_name != new_name || *current_visible != new_visible || *current_id != new_id {
+				if current_layout.len() != new_layout.len() || *current_name != new_name || *current_visible != new_visible || *current_pinned != new_pinned || *current_id != new_id {
 					// Update self to reflect new changes
 					current_name.clone_from(&new_name);
 					*current_visible = new_visible;
+					*current_pinned = new_pinned;
 					*current_id = new_id;
 					current_layout.clone_from(&new_layout);
 
 					// Push an update layout group to the diff
 					let new_value = DiffUpdate::LayoutGroup(Self::Section {
 						name: new_name,
 						visible: new_visible,
+						pinned: new_pinned,
 						id: new_id,
 						layout: new_layout,
 					});

editor/src/messages/layout/utility_types/widgets/button_widgets.rs

@@ -45,8 +45,6 @@ pub struct PopoverButton {
 
 	pub icon: Option<String>,
 
-	pub label: Option<String>,
-
 	pub disabled: bool,
 
 	pub tooltip: String,

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -228,7 +228,7 @@ impl MessageHandler<DocumentMessage, DocumentMessageData<'_>> for DocumentMessag
 			DocumentMessage::PropertiesPanel(message) => {
 				let properties_panel_message_handler_data = PropertiesPanelMessageHandlerData {
 					network_interface: &self.network_interface,
-					selection_path: &self.selection_network_path,
+					selection_network_path: &self.selection_network_path,
 					document_name: self.name.as_str(),
 					executor,
 				};

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

@@ -35,6 +35,7 @@ pub struct NodePropertiesContext<'a> {
 	pub executor: &'a mut NodeGraphExecutor,
 	pub network_interface: &'a NodeNetworkInterface,
 	pub selection_network_path: &'a [NodeId],
+	pub document_name: &'a str,
 }
 
 /// Acts as a description for a [DocumentNode] before it gets instantiated as one.

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

@@ -150,7 +150,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphHandlerData<'a>> for NodeGrap
 				responses.add(NodeGraphMessage::RunDocumentGraph);
 			}
 			NodeGraphMessage::CreateNodeFromContextMenu { node_id, node_type, x, y } => {
-				let node_id = node_id.unwrap_or_else(|| NodeId::new());
+				let node_id = node_id.unwrap_or_else(NodeId::new);
 
 				let Some(document_node_type) = document_node_definitions::resolve_document_node_type(&node_type) else {
 					responses.add(DialogMessage::DisplayDialogError {
@@ -1573,14 +1573,26 @@ impl NodeGraphMessageHandler {
 			0 => {
 				let selected_nodes = nodes
 					.iter()
-					.filter_map(|node_id| network.nodes.get(node_id).map(|node| node_properties::generate_node_properties(node, *node_id, context)))
+					.filter_map(|node_id| network.nodes.get(node_id).map(|node| node_properties::generate_node_properties(node, *node_id, false, context)))
 					.collect::<Vec<_>>();
 				if !selected_nodes.is_empty() {
 					return selected_nodes;
 				}
 
+				let mut properties = vec![LayoutGroup::Row {
+					widgets: vec![
+						Separator::new(SeparatorType::Related).widget_holder(),
+						IconLabel::new("File").tooltip("Name of the current document").widget_holder(),
+						Separator::new(SeparatorType::Related).widget_holder(),
+						TextInput::new(context.document_name)
+							.on_update(|text_input| DocumentMessage::RenameDocument { new_name: text_input.value.clone() }.into())
+							.widget_holder(),
+						Separator::new(SeparatorType::Related).widget_holder(),
+					],
+				}];
+
 				// And if no nodes are selected, show properties for all pinned nodes
-				network
+				let pinned_node_properties = network
 					.nodes
 					.iter()
 					.filter_map(|(node_id, node)| {
@@ -1592,12 +1604,15 @@ impl NodeGraphMessageHandler {
 						};
 
 						if pinned {
-							Some(node_properties::generate_node_properties(node, *node_id, context))
+							Some(node_properties::generate_node_properties(node, *node_id, true, context))
 						} else {
 							None
 						}
 					})
-					.collect::<Vec<_>>()
+					.collect::<Vec<_>>();
+
+				properties.extend(pinned_node_properties);
+				properties
 			}
 			// If one layer is selected, filter out all selected nodes that are not upstream of it. If there are no nodes left, show properties for the layer. Otherwise, show nothing.
 			1 => {
@@ -1611,8 +1626,40 @@ impl NodeGraphMessageHandler {
 					return Vec::new();
 				}
 
+				let mut layer_properties = vec![LayoutGroup::Row {
+					widgets: vec![
+						Separator::new(SeparatorType::Related).widget_holder(),
+						IconLabel::new("Layer").tooltip("Name of the selected layer").widget_holder(),
+						Separator::new(SeparatorType::Related).widget_holder(),
+						TextInput::new(context.document_name)
+							.on_update(move |text_input| {
+								NodeGraphMessage::SetDisplayName {
+									node_id: layer,
+									alias: text_input.value.clone(),
+								}
+								.into()
+							})
+							.widget_holder(),
+						Separator::new(SeparatorType::Related).widget_holder(),
+						{
+							let node_chooser = NodeTypeInput::new()
+								.on_update(move |node_type| {
+									NodeGraphMessage::CreateNodeInLayerWithTransaction {
+										node_type: node_type.clone(),
+										layer: LayerNodeIdentifier::new_unchecked(layer),
+									}
+									.into()
+								})
+								.widget_holder();
+							let popover_layout = vec![LayoutGroup::Row { widgets: vec![node_chooser] }];
+							PopoverButton::new().icon(Some("Node".to_string())).popover_layout(popover_layout).widget_holder()
+						},
+						Separator::new(SeparatorType::Related).widget_holder(),
+					],
+				}];
+
 				// Iterate through all the upstream nodes, but stop when we reach another layer (since that's a point where we switch from horizontal to vertical flow)
-				let mut properties = context
+				let node_properties = context
 					.network_interface
 					.upstream_flow_back_from_nodes(vec![layer], context.selection_network_path, network_interface::FlowType::HorizontalFlow)
 					.enumerate()
@@ -1623,18 +1670,13 @@ impl NodeGraphMessageHandler {
 							!context.network_interface.is_layer(node_id, context.selection_network_path)
 						}
 					})
+					.skip(1) // Don't include the layer itself
 					.filter_map(|(_, node_id)| network.nodes.get(&node_id).map(|node| (node, node_id)))
-					.map(|(node, node_id)| node_properties::generate_node_properties(node, node_id, context))
+					.map(|(node, node_id)| node_properties::generate_node_properties(node, node_id, false, context))
 					.collect::<Vec<_>>();
 
-				let layer = LayerNodeIdentifier::new_unchecked(layer);
-				let node_chooser = NodeTypeInput::new()
-					.on_update(move |node_type| NodeGraphMessage::CreateNodeInLayerWithTransaction { node_type: node_type.clone(), layer }.into())
-					.widget_holder();
-				let popover_layout = vec![LayoutGroup::Row { widgets: vec![node_chooser] }];
-				let add_node_button = PopoverButton::new().label(Some("Add Node".to_string())).popover_layout(popover_layout).widget_holder();
-				properties.push(LayoutGroup::Row { widgets: vec![add_node_button] });
-				properties
+				layer_properties.extend(node_properties);
+				layer_properties
 			}
 			// If multiple layers and/or nodes are selected, show nothing
 			_ => Vec::new(),

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

@@ -2253,7 +2253,7 @@ pub(crate) fn index_properties(document_node: &DocumentNode, node_id: NodeId, _c
 	vec![LayoutGroup::Row { widgets: index }]
 }
 
-pub(crate) fn generate_node_properties(document_node: &DocumentNode, node_id: NodeId, context: &mut NodePropertiesContext) -> LayoutGroup {
+pub(crate) fn generate_node_properties(document_node: &DocumentNode, node_id: NodeId, pinned: bool, context: &mut NodePropertiesContext) -> LayoutGroup {
 	let reference = context.network_interface.reference(&node_id, context.selection_network_path).clone();
 	let layout = if let Some(ref reference) = reference {
 		match super::document_node_definitions::resolve_document_node_type(reference) {
@@ -2267,6 +2267,7 @@ pub(crate) fn generate_node_properties(document_node: &DocumentNode, node_id: No
 	LayoutGroup::Section {
 		name: reference.unwrap_or_default(),
 		visible: document_node.visible,
+		pinned,
 		id: node_id.0,
 		layout,
 	}

editor/src/messages/portfolio/document/properties_panel/properties_panel_message_handler.rs

@@ -11,17 +11,13 @@ impl<'a> MessageHandler<PropertiesPanelMessage, (&PersistentData, PropertiesPane
 	fn process_message(&mut self, message: PropertiesPanelMessage, responses: &mut VecDeque<Message>, (persistent_data, data): (&PersistentData, PropertiesPanelMessageHandlerData)) {
 		let PropertiesPanelMessageHandlerData {
 			network_interface,
-			selection_path,
+			selection_network_path,
 			document_name,
 			executor,
 		} = data;
 
 		match message {
 			PropertiesPanelMessage::Clear => {
-				responses.add(LayoutMessage::SendLayout {
-					layout: Layout::WidgetLayout(WidgetLayout::new(vec![])),
-					layout_target: LayoutTarget::PropertiesOptions,
-				});
 				responses.add(LayoutMessage::SendLayout {
 					layout: Layout::WidgetLayout(WidgetLayout::new(vec![])),
 					layout_target: LayoutTarget::PropertiesSections,
@@ -31,27 +27,13 @@ impl<'a> MessageHandler<PropertiesPanelMessage, (&PersistentData, PropertiesPane
 				let mut context = NodePropertiesContext {
 					persistent_data,
 					responses,
-					executor,
 					network_interface,
-					selection_network_path: selection_path,
+					selection_network_path,
+					document_name,
+					executor,
 				};
-
 				let properties_sections = NodeGraphMessageHandler::collate_properties(&mut context);
 
-				let options_bar = vec![LayoutGroup::Row {
-					widgets: vec![
-						IconLabel::new("File").tooltip("Document name").widget_holder(),
-						Separator::new(SeparatorType::Related).widget_holder(),
-						TextInput::new(document_name)
-							.on_update(|text_input| DocumentMessage::RenameDocument { new_name: text_input.value.clone() }.into())
-							.widget_holder(),
-					],
-				}];
-
-				context.responses.add(LayoutMessage::SendLayout {
-					layout: Layout::WidgetLayout(WidgetLayout::new(options_bar)),
-					layout_target: LayoutTarget::PropertiesOptions,
-				});
 				context.responses.add(LayoutMessage::SendLayout {
 					layout: Layout::WidgetLayout(WidgetLayout::new(properties_sections)),
 					layout_target: LayoutTarget::PropertiesSections,

editor/src/messages/portfolio/document/properties_panel/utility_types.rs

@@ -5,7 +5,7 @@ use crate::node_graph_executor::NodeGraphExecutor;
 
 pub struct PropertiesPanelMessageHandlerData<'a> {
 	pub network_interface: &'a NodeNetworkInterface,
-	pub selection_path: &'a [NodeId],
+	pub selection_network_path: &'a [NodeId],
 	pub document_name: &'a str,
 	pub executor: &'a mut NodeGraphExecutor,
 }

frontend/src/components/panels/Properties.svelte

@@ -2,23 +2,16 @@
 	import { getContext, onMount } from "svelte";
 
 	import type { Editor } from "@graphite/wasm-communication/editor";
-	import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPanelSectionsLayout } from "@graphite/wasm-communication/messages";
+	import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelSectionsLayout } from "@graphite/wasm-communication/messages";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
 	const editor = getContext<Editor>("editor");
 
-	let propertiesOptionsLayout = defaultWidgetLayout();
 	let propertiesSectionsLayout = defaultWidgetLayout();
 
 	onMount(() => {
-		editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelOptionsLayout, (updatePropertyPanelOptionsLayout) => {
-			patchWidgetLayout(propertiesOptionsLayout, updatePropertyPanelOptionsLayout);
-			propertiesOptionsLayout = propertiesOptionsLayout;
-		});
-
 		editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => {
 			patchWidgetLayout(propertiesSectionsLayout, updatePropertyPanelSectionsLayout);
 			propertiesSectionsLayout = propertiesSectionsLayout;
@@ -27,9 +20,6 @@
 </script>
 
 <LayoutCol class="properties">
-	<LayoutRow class="options-bar">
-		<WidgetLayout layout={propertiesOptionsLayout} />
-	</LayoutRow>
 	<LayoutCol class="sections" scrollableY={true}>
 		<WidgetLayout layout={propertiesSectionsLayout} />
 	</LayoutCol>

frontend/src/components/widgets/WidgetSection.svelte

@@ -27,8 +27,21 @@
 	<button class="header" class:expanded on:click|stopPropagation={() => (expanded = !expanded)} tabindex="0">
 		<div class="expand-arrow" />
 		<TextLabel bold={true}>{widgetData.name}</TextLabel>
+		{#if widgetData.pinned}
+			<IconButton
+				icon={"CheckboxChecked"}
+				tooltip={"Unpin this node so it's no longer shown here without a selection"}
+				size={24}
+				action={(e) => {
+					editor.handle.unpinNode(widgetData.id);
+					e?.stopPropagation();
+				}}
+				class={"show-only-on-hover"}
+			/>
+		{/if}
 		<IconButton
 			icon={"Trash"}
+			tooltip={"Delete this node from the layer chain"}
 			size={24}
 			action={(e) => {
 				editor.handle.deleteNode(widgetData.id);
@@ -39,6 +52,7 @@
 		<IconButton
 			icon={widgetData.visible ? "EyeVisible" : "EyeHidden"}
 			hoverIcon={widgetData.visible ? "EyeHide" : "EyeShow"}
+			tooltip={widgetData.visible ? "Hide this node" : "Show this node"}
 			size={24}
 			action={(e) => {
 				editor.handle.toggleNodeVisibilityLayerPanel(widgetData.id);
@@ -68,10 +82,7 @@
 	.widget-section {
 		flex: 0 0 auto;
 		margin: 0 4px;
-
-		+ .widget-section {
-			margin-top: 4px;
-		}
+		margin-top: 4px;
 
 		.header {
 			text-align: left;