Add recursive folder expand/collapse to the Layers panel (#2419)

* added_recursion_fix

* Add tooltip and tidy up color visibility

---------

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

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

@@ -171,6 +171,7 @@ pub enum DocumentMessage {
 	AddTransaction,
 	ToggleLayerExpansion {
 		id: NodeId,
+		recursive: bool,
 	},
 	ToggleSelectedVisibility,
 	ToggleSelectedLocked,

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

@@ -1192,13 +1192,27 @@ impl MessageHandler<DocumentMessage, DocumentMessageData<'_>> for DocumentMessag
 				responses.add_front(DocumentMessage::CommitTransaction);
 				responses.add_front(DocumentMessage::StartTransaction);
 			}
-			DocumentMessage::ToggleLayerExpansion { id } => {
+			DocumentMessage::ToggleLayerExpansion { id, recursive } => {
 				let layer = LayerNodeIdentifier::new(id, &self.network_interface, &[]);
-				if self.collapsed.0.contains(&layer) {
-					self.collapsed.0.retain(|&collapsed_layer| collapsed_layer != layer);
+				let metadata = self.metadata();
+
+				let is_collapsed = self.collapsed.0.contains(&layer);
+
+				if is_collapsed {
+					if recursive {
+						let children: HashSet<_> = layer.children(metadata).collect();
+						self.collapsed.0.retain(|collapsed_layer| !children.contains(collapsed_layer) && collapsed_layer != &layer);
+					} else {
+						self.collapsed.0.retain(|collapsed_layer| collapsed_layer != &layer);
+					}
 				} else {
+					if recursive {
+						let children_to_add: Vec<_> = layer.children(metadata).filter(|child| !self.collapsed.0.contains(child)).collect();
+						self.collapsed.0.extend(children_to_add);
+					}
 					self.collapsed.0.push(layer);
 				}
+
 				responses.add(NodeGraphMessage::SendGraph);
 			}
 			DocumentMessage::ToggleSelectedLocked => responses.add(NodeGraphMessage::ToggleSelectedLocked),

frontend/src/components/Editor.svelte

@@ -152,8 +152,11 @@
 			transparent calc((3px * sqrt(2) / 2) + 0.5px),
 			transparent calc(6px * sqrt(2) / 2)
 		);
-		--inheritance-dots-background: url('data:image/svg+xml;utf8,\
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6" width="6px" height="6px" fill="%23444"><rect width="1" height="1" /><rect x="3" y="3" width="1" height="1" /></svg>\
+		--inheritance-dots-background-4-dimgray: url('data:image/svg+xml;utf8,\
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4" width="4px" height="4px" fill="%23444"><rect width="1" height="1" /><rect x="2" y="2" width="1" height="1" /></svg>\
+			');
+		--inheritance-dots-background-6-lowergray: url('data:image/svg+xml;utf8,\
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4" width="4px" height="4px" fill="%23666"><rect width="1" height="1" /><rect x="2" y="2" width="1" height="1" /></svg>\
 			');
 
 		// Array of 2x3 dots (fill: --color-e-nearwhite)

frontend/src/components/panels/Layers.svelte

@@ -135,8 +135,11 @@
 		editor.handle.toggleLayerLock(id);
 	}
 
-	function handleExpandArrowClick(id: bigint) {
-		editor.handle.toggleLayerExpansion(id);
+	function handleExpandArrowClickWithModifiers(e: MouseEvent, id: bigint) {
+		const accel = platformIsMac() ? e.metaKey : e.ctrlKey;
+		const collapseRecursive = e.altKey || accel;
+		editor.handle.toggleLayerExpansion(id, collapseRecursive);
+		e.stopPropagation();
 	}
 
 	async function onEditLayerName(listing: LayerListingInfo) {
@@ -432,8 +435,10 @@
 							class="expand-arrow"
 							class:expanded={listing.entry.expanded}
 							disabled={!listing.entry.childrenPresent}
-							title={listing.entry.expanded ? "Collapse" : `Expand${listing.entry.ancestorOfSelected ? "\n(A selected layer is contained within)" : ""}`}
-							on:click|stopPropagation={() => handleExpandArrowClick(listing.entry.id)}
+							title={listing.entry.expanded
+								? "Collapse (Click) / Collapse All (Alt Click)"
+								: `Expand (Click) / Expand All (Alt Click)${listing.entry.ancestorOfSelected ? "\n(A selected layer is contained within)" : ""}`}
+							on:click={(e) => handleExpandArrowClickWithModifiers(e, listing.entry.id)}
 							tabindex="0"
 						></button>
 					{/if}
@@ -545,11 +550,11 @@
 				}
 
 				&.ancestor-of-selected .expand-arrow:not(.expanded) {
-					background-image: var(--inheritance-stripes-background);
+					background-image: var(--inheritance-dots-background-6-lowergray);
 				}
 
 				&.descendant-of-selected {
-					background-image: var(--inheritance-dots-background);
+					background-image: var(--inheritance-dots-background-4-dimgray);
 				}
 
 				&.selected-but-not-in-selected-network {

frontend/wasm/src/editor_api.rs

@@ -700,9 +700,9 @@ impl EditorHandle {
 
 	/// Toggle expansions state of a layer from the layer list
 	#[wasm_bindgen(js_name = toggleLayerExpansion)]
-	pub fn toggle_layer_expansion(&self, id: u64) {
+	pub fn toggle_layer_expansion(&self, id: u64, recursive: bool) {
 		let id = NodeId(id);
-		let message = DocumentMessage::ToggleLayerExpansion { id };
+		let message = DocumentMessage::ToggleLayerExpansion { id, recursive };
 		self.dispatch(message);
 	}