Enhance Properties panel section behavior and persistence

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

@@ -340,6 +340,7 @@ pub enum LayoutGroup {
 		description: String,
 		visible: bool,
 		pinned: bool,
+		expanded: bool,
 		id: u64,
 		layout: Layout,
 	},
@@ -439,6 +440,7 @@ impl Diffable for LayoutGroup {
 					description: current_description,
 					visible: current_visible,
 					pinned: current_pinned,
+					expanded: current_expanded,
 					id: current_id,
 					layout: current_layout,
 				},
@@ -447,6 +449,7 @@ impl Diffable for LayoutGroup {
 					description: new_description,
 					visible: new_visible,
 					pinned: new_pinned,
+					expanded: new_expanded,
 					id: new_id,
 					layout: new_layout,
 				},
@@ -458,13 +461,15 @@ impl Diffable for LayoutGroup {
 					|| *current_description != new_description
 					|| *current_visible != new_visible
 					|| *current_pinned != new_pinned
+					|| *current_expanded != new_expanded
 					|| *current_id != new_id
 				{
 					// Update self to reflect new changes
 					current_name.clone_from(&new_name);
 					current_description.clone_from(&new_description);
 					*current_visible = new_visible;
 					*current_pinned = new_pinned;
+					*current_expanded = new_expanded;
 					*current_id = new_id;
 					current_layout.clone_from(&new_layout);
 
@@ -474,6 +479,7 @@ impl Diffable for LayoutGroup {
 						description: new_description,
 						visible: new_visible,
 						pinned: new_pinned,
+						expanded: new_expanded,
 						id: new_id,
 						layout: new_layout,
 					}

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

@@ -125,6 +125,7 @@ impl<'a> ModifyInputsContext<'a> {
 	pub fn create_layer(&mut self, new_id: NodeId) -> LayerNodeIdentifier {
 		let new_merge_node = resolve_network_node_type("Merge").expect("Merge node").default_node_template();
 		self.network_interface.insert_node(new_id, new_merge_node, &[]);
+		self.responses.add(PropertiesPanelMessage::SetSectionExpanded { node_id: new_id.0, expanded: false });
 		LayerNodeIdentifier::new(new_id, self.network_interface)
 	}
 

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

@@ -35,6 +35,7 @@ pub struct NodePropertiesContext<'a> {
 	pub network_interface: &'a mut NodeNetworkInterface,
 	pub selection_network_path: &'a [NodeId],
 	pub document_name: &'a str,
+	pub section_expanded: &'a HashMap<u64, bool>,
 }
 
 impl NodePropertiesContext<'_> {

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

@@ -1843,12 +1843,20 @@ pub(crate) fn generate_node_properties(node_id: NodeId, context: &mut NodeProper
 
 	let visible = context.network_interface.is_visible(&node_id, context.selection_network_path);
 	let pinned = context.network_interface.is_pinned(&node_id, context.selection_network_path);
+	let expanded = context.section_expanded.get(&node_id.0).copied().unwrap_or_else(|| {
+		!context
+			.network_interface
+			.reference(&node_id, context.selection_network_path)
+			.as_ref()
+			.is_some_and(|id| id.implementation_name_from_identifier() == "Merge")
+	});
 
 	LayoutGroup::Section {
 		name,
 		description,
 		visible,
 		pinned,
+		expanded,
 		id: node_id.0,
 		layout: Layout(layout),
 	}

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

@@ -6,4 +6,6 @@ pub enum PropertiesPanelMessage {
 	// Messages
 	Clear,
 	Refresh,
+	SetAllSectionsExpanded { expanded: bool },
+	SetSectionExpanded { node_id: u64, expanded: bool },
 }

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

@@ -1,3 +1,5 @@
+use std::collections::HashMap;
+
 use graphene_std::uuid::NodeId;
 
 use crate::messages::layout::utility_types::widget_prelude::*;
@@ -18,7 +20,9 @@ pub struct PropertiesPanelMessageContext<'a> {
 }
 
 #[derive(Debug, Clone, Default, ExtractField)]
-pub struct PropertiesPanelMessageHandler {}
+pub struct PropertiesPanelMessageHandler {
+	pub section_expanded: HashMap<u64, bool>,
+}
 
 #[message_handler_data]
 impl MessageHandler<PropertiesPanelMessage, PropertiesPanelMessageContext<'_>> for PropertiesPanelMessageHandler {
@@ -52,6 +56,7 @@ impl MessageHandler<PropertiesPanelMessage, PropertiesPanelMessageContext<'_>> f
 					selection_network_path,
 					document_name,
 					executor,
+					section_expanded: &self.section_expanded,
 				};
 				let layout = Layout(NodeGraphMessageHandler::collate_properties(&mut node_properties_context));
 
@@ -60,10 +65,64 @@ impl MessageHandler<PropertiesPanelMessage, PropertiesPanelMessageContext<'_>> f
 					layout_target: LayoutTarget::PropertiesPanel,
 				});
 			}
+			PropertiesPanelMessage::SetAllSectionsExpanded { expanded } => {
+				let mut layout = {
+					let mut node_properties_context = NodePropertiesContext {
+						persistent_data,
+						responses,
+						network_interface,
+						selection_network_path,
+						document_name,
+						executor,
+						section_expanded: &self.section_expanded,
+					};
+					Layout(NodeGraphMessageHandler::collate_properties(&mut node_properties_context))
+				};
+
+				Self::update_all_section_expansion_recursive(&mut layout.0, expanded, &mut self.section_expanded, network_interface, selection_network_path);
+
+				responses.add(LayoutMessage::SendLayout {
+					layout,
+					layout_target: LayoutTarget::PropertiesPanel,
+				});
+			}
+			PropertiesPanelMessage::SetSectionExpanded { node_id, expanded } => {
+				self.section_expanded.insert(node_id, expanded);
+				responses.add(PropertiesPanelMessage::Refresh);
+			}
 		}
 	}
 
 	fn actions(&self) -> ActionList {
 		actions!(PropertiesMessageDiscriminant;)
 	}
 }
+
+impl PropertiesPanelMessageHandler {
+	fn update_all_section_expansion_recursive(
+		layout: &mut [LayoutGroup],
+		expanded: bool,
+		section_expanded: &mut HashMap<u64, bool>,
+		network_interface: &NodeNetworkInterface,
+		selection_network_path: &[NodeId],
+	) {
+		for group in layout {
+			if let LayoutGroup::Section {
+				id, layout, expanded: group_expanded, ..
+			} = group
+			{
+				let is_merge_node = network_interface
+					.reference(&NodeId(*id), selection_network_path)
+					.as_ref()
+					.is_some_and(|id| id.implementation_name_from_identifier() == "Merge");
+
+				if !is_merge_node {
+					*group_expanded = expanded;
+					section_expanded.insert(*id, expanded);
+				}
+
+				Self::update_all_section_expansion_recursive(&mut layout.0, expanded, section_expanded, network_interface, selection_network_path);
+			}
+		}
+	}
+}

frontend/src/components/widgets/WidgetSection.svelte

@@ -16,14 +16,23 @@
 	export { className as class };
 	export let classes: Record<string, boolean> = {};
 
-	let expanded = true;
+	$: expanded = widgetData.expanded;
 
 	const editor = getContext<Editor>("editor");
 </script>
 
-<!-- TODO: Implement collapsable sections with properties system -->
 <LayoutCol class={`widget-section ${className}`.trim()} {classes}>
-	<button class="header" class:expanded on:click|stopPropagation={() => (expanded = !expanded)} tabindex="0">
+	<button
+		class="header"
+		class:expanded
+		on:click|stopPropagation={(e) => {
+			if (e.altKey) {
+				editor.handle.setAllSectionsExpanded(!expanded);
+			} else {
+				editor.handle.setSectionExpanded(widgetData.id, !expanded);
+			}
+		}}
+	>
 		<div class="expand-arrow"></div>
 		<TextLabel tooltipLabel={widgetData.name} tooltipDescription={widgetData.description} bold={true}>{widgetData.name}</TextLabel>
 		<IconButton

frontend/src/messages.ts

@@ -1587,7 +1587,7 @@ export function isWidgetTable(layoutTable: LayoutGroup): layoutTable is WidgetTa
 	return Boolean((layoutTable as WidgetTable)?.tableWidgets);
 }
 
-export type WidgetSection = { name: string; description: string; visible: boolean; pinned: boolean; id: bigint; layout: Layout };
+export type WidgetSection = { name: string; description: string; visible: boolean; pinned: boolean; expanded: boolean; id: bigint; layout: Layout };
 export function isWidgetSection(layoutRow: LayoutGroup): layoutRow is WidgetSection {
 	return Boolean((layoutRow as WidgetSection)?.layout);
 }
@@ -1612,6 +1612,7 @@ function createLayoutGroup(layoutGroup: any): LayoutGroup {
 			description: layoutGroup.section.description,
 			visible: layoutGroup.section.visible,
 			pinned: layoutGroup.section.pinned,
+			expanded: layoutGroup.section.expanded,
 			id: layoutGroup.section.id,
 			layout: layoutGroup.section.layout.map(createLayoutGroup),
 		};

frontend/wasm/src/editor_api.rs

@@ -849,6 +849,20 @@ impl EditorHandle {
 		self.dispatch(message);
 	}
 
+	/// Set section expanded state in the Properties panel
+	#[wasm_bindgen(js_name = setSectionExpanded)]
+	pub fn set_section_expanded(&self, node_id: u64, expanded: bool) {
+		let message = DocumentMessage::PropertiesPanel(PropertiesPanelMessage::SetSectionExpanded { node_id, expanded });
+		self.dispatch(message);
+	}
+
+	/// Set all sections expanded state in the Properties panel
+	#[wasm_bindgen(js_name = setAllSectionsExpanded)]
+	pub fn set_all_sections_expanded(&self, expanded: bool) {
+		let message = DocumentMessage::PropertiesPanel(PropertiesPanelMessage::SetAllSectionsExpanded { expanded });
+		self.dispatch(message);
+	}
+
 	/// Set the active panel to the most recently clicked panel
 	#[wasm_bindgen(js_name = setActivePanel)]
 	pub fn set_active_panel(&self, panel: String) {