Add opacity and open to the render data

editor/src/messages/frontend/frontend_message.rs

@@ -244,9 +244,6 @@ pub enum FrontendMessage {
 		#[serde(rename = "setColorChoice")]
 		set_color_choice: Option<String>,
 	},
-	UpdateGraphFadeArtwork {
-		percentage: f64,
-	},
 	UpdateInputHints {
 		#[serde(rename = "hintData")]
 		hint_data: HintData,
@@ -274,9 +271,11 @@ pub enum FrontendMessage {
 	UpdateMouseCursor {
 		cursor: MouseCursorIcon,
 	},
-	UpdateNodeGraphNodes {
+	UpdateNodeGraphRender {
 		#[serde(rename = "nodesToRender")]
 		nodes_to_render: Vec<FrontendNodeToRender>,
+		open: bool,
+		opacity: f64,
 		#[serde(rename = "inSelectedNetwork")]
 		in_selected_network: bool,
 		// Displays a dashed border around the node

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

@@ -561,9 +561,6 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 				self.graph_view_overlay_open = open;
 
 				responses.add(FrontendMessage::UpdateGraphViewOverlay { open });
-				responses.add(FrontendMessage::UpdateGraphFadeArtwork {
-					percentage: self.graph_fade_artwork_percentage,
-				});
 
 				// Update the tilt menu bar buttons to be disabled when the graph is open
 				responses.add(MenuBarMessage::SendLayout);
@@ -579,12 +576,13 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 					responses.add(NavigationMessage::CanvasTiltSet { angle_radians: 0. });
 					responses.add(NodeGraphMessage::SetGridAlignedEdges);
 					responses.add(NodeGraphMessage::UpdateGraphBarRight);
-					responses.add(NodeGraphMessage::SendGraph);
 					responses.add(NodeGraphMessage::UpdateHints);
 				} else {
 					responses.add(ToolMessage::ActivateTool { tool_type: *current_tool });
 					responses.add(OverlaysMessage::Draw); // Redraw overlays when graph is closed
 				}
+
+				responses.add(NodeGraphMessage::SendGraph);
 			}
 			DocumentMessage::GraphViewOverlayToggle => {
 				responses.add(DocumentMessage::GraphViewOverlay { open: !self.graph_view_overlay_open });
@@ -1200,7 +1198,7 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 			}
 			DocumentMessage::SetGraphFadeArtwork { percentage } => {
 				self.graph_fade_artwork_percentage = percentage;
-				responses.add(FrontendMessage::UpdateGraphFadeArtwork { percentage });
+				responses.add(NodeGraphMessage::SendGraph);
 			}
 			DocumentMessage::SetNodePinned { node_id, pinned } => {
 				responses.add(DocumentMessage::AddTransaction);

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

@@ -1634,24 +1634,24 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 				responses.add(DocumentMessage::DocumentStructureChanged);
 				responses.add(PropertiesPanelMessage::Refresh);
 				responses.add(NodeGraphMessage::UpdateActionButtons);
-				if graph_view_overlay_open {
+				let nodes_to_render = network_interface.collect_nodes(&self.node_graph_errors, breadcrumb_network_path);
-					let nodes_to_render = network_interface.collect_nodes(&self.node_graph_errors, breadcrumb_network_path);
+				self.frontend_nodes = nodes_to_render.iter().map(|node| node.metadata.node_id).collect();
-					self.frontend_nodes = nodes_to_render.iter().map(|node| node.metadata.node_id).collect();
+				let previewed_node = network_interface.previewed_node(breadcrumb_network_path);
-					let previewed_node = network_interface.previewed_node(breadcrumb_network_path);
+				responses.add(FrontendMessage::UpdateNodeGraphRender {
-					responses.add(FrontendMessage::UpdateNodeGraphNodes {
+					nodes_to_render,
-						nodes_to_render,
+					open: graph_view_overlay_open,
-						in_selected_network: selection_network_path == breadcrumb_network_path,
+					opacity: graph_fade_artwork_percentage,
-						previewed_node,
+					in_selected_network: selection_network_path == breadcrumb_network_path,
-					});
+					previewed_node,
-					responses.add(NodeGraphMessage::UpdateVisibleNodes);
+				});
+				responses.add(NodeGraphMessage::UpdateVisibleNodes);
 
-					let layer_widths = network_interface.collect_layer_widths(breadcrumb_network_path);
+				let layer_widths = network_interface.collect_layer_widths(breadcrumb_network_path);
 
-					responses.add(NodeGraphMessage::UpdateImportsExports);
+				responses.add(NodeGraphMessage::UpdateImportsExports);
-					responses.add(FrontendMessage::UpdateLayerWidths { layer_widths });
+				responses.add(FrontendMessage::UpdateLayerWidths { layer_widths });
-					responses.add(NodeGraphMessage::SendWires);
+				responses.add(NodeGraphMessage::SendWires);
-					self.update_node_graph_hints(responses);
+				self.update_node_graph_hints(responses);
-				}
 			}
 			NodeGraphMessage::SetGridAlignedEdges => {
 				if graph_view_overlay_open {

editor/src/test_utils.rs

@@ -301,11 +301,11 @@ pub trait FrontendMessageTestUtils {
 
 impl FrontendMessageTestUtils for FrontendMessage {
 	fn check_node_graph_error(&self) {
-		let FrontendMessage::UpdateNodeGraphNodes { nodes, .. } = self else { return };
+		let FrontendMessage::UpdateNodeGraphRender { nodes_to_render, .. } = self else { return };
 
-		for node in nodes {
+		for node in nodes_to_render {
-			if let Some(error) = &node.errors {
+			if let Some(error) = &node.metadata.errors {
-				panic!("error on {}: {}", node.display_name, error);
+				panic!("error on {}: {}", node.metadata.display_name, error);
 			}
 		}
 	}

frontend/src/components/panels/Document.svelte

@@ -565,9 +565,7 @@
 						{/if}
 					</div>
 
-					<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork={`${$document.fadeArtwork}%`} data-graph>
+					<Graph />
-						<Graph />
-					</div>
 				</LayoutCol>
 				<LayoutCol class="ruler-or-scrollbar right-scrollbar">
 					<ScrollbarInput
@@ -825,30 +823,6 @@
 						}
 					}
 
-					.graph-view {
-						pointer-events: none;
-						transition: opacity 0.2s;
-						opacity: 0;
-
-						&.open {
-							cursor: auto;
-							pointer-events: auto;
-							opacity: 1;
-						}
-
-						&::before {
-							content: "";
-							position: absolute;
-							top: 0;
-							left: 0;
-							width: 100%;
-							height: 100%;
-							background: var(--color-2-mildblack);
-							opacity: var(--fade-artwork);
-							pointer-events: none;
-						}
-					}
-
 					.fade-artwork,
 					.graph {
 						position: absolute;

frontend/src/messages.ts

@@ -77,9 +77,13 @@ export class UpdateLayerWidths extends JsMessage {
 	readonly layerWidths!: Map<bigint, number>;
 }
 
-export class UpdateNodeGraphNodes extends JsMessage {
+export class UpdateNodeGraphRender extends JsMessage {
 	readonly nodesToRender!: FrontendNodeToRender[];
 
+	readonly open!: boolean;
+
+	readonly opacity!: number;
+
 	readonly inSelectedNetwork!: boolean;
 
 	readonly previewedNode!: bigint | undefined;
@@ -730,10 +734,6 @@ export class UpdateGraphViewOverlay extends JsMessage {
 	open!: boolean;
 }
 
-export class UpdateGraphFadeArtwork extends JsMessage {
-	readonly percentage!: number;
-}
-
 export class UpdateDataPanelState extends JsMessage {
 	readonly open!: boolean;
 }
@@ -1691,7 +1691,6 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateDocumentScrollbars,
 	UpdateExportReorderIndex,
 	UpdateEyedropperSamplingState,
-	UpdateGraphFadeArtwork,
 	UpdateGraphViewOverlay,
 	UpdateImportReorderIndex,
 	UpdateImportsExports,
@@ -1704,7 +1703,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateMenuBarLayout,
 	UpdateMouseCursor,
 	UpdateNodeGraphControlBarLayout,
-	UpdateNodeGraphNodes,
+	UpdateNodeGraphRender,
 	UpdateNodeGraphTransform,
 	UpdateNodeGraphWires,
 	UpdateNodeThumbnail,

frontend/src/state-providers/document.ts

@@ -13,7 +13,6 @@ import {
 	UpdateWorkingColorsLayout,
 	UpdateNodeGraphControlBarLayout,
 	UpdateGraphViewOverlay,
-	UpdateGraphFadeArtwork,
 } from "@graphite/messages";
 
 export function createDocumentState(editor: Editor) {
@@ -25,19 +24,11 @@ export function createDocumentState(editor: Editor) {
 		toolShelfLayout: defaultWidgetLayout(),
 		workingColorsLayout: defaultWidgetLayout(),
 		nodeGraphControlBarLayout: defaultWidgetLayout(),
-		// Graph view overlay
 		graphViewOverlayOpen: false,
-		fadeArtwork: 100,
 	});
 	const { subscribe, update } = state;
 
 	// Update layouts
-	editor.subscriptions.subscribeJsMessage(UpdateGraphFadeArtwork, (updateGraphFadeArtwork) => {
-		update((state) => {
-			state.fadeArtwork = updateGraphFadeArtwork.percentage;
-			return state;
-		});
-	});
 	editor.subscriptions.subscribeJsMessage(UpdateDocumentModeLayout, async (updateDocumentModeLayout) => {
 		await tick();
 

frontend/src/state-providers/node-graph.ts

@@ -17,7 +17,7 @@ import {
 	UpdateExportReorderIndex,
 	UpdateImportsExports,
 	UpdateLayerWidths,
-	UpdateNodeGraphNodes,
+	UpdateNodeGraphRender,
 	UpdateVisibleNodes,
 	UpdateNodeGraphWires,
 	UpdateNodeGraphTransform,
@@ -33,6 +33,9 @@ export function createNodeGraphState(editor: Editor) {
 		layerWidths: new Map<bigint, number>(),
 		updateImportsExports: undefined as UpdateImportsExports | undefined,
 		nodesToRender: new Map<bigint, FrontendNodeToRender>(),
+		open: false,
+		opacity: 0.8,
+
 		visibleNodes: new Set<bigint>(),
 		/// The index is the exposed input index. The exports have a first key value of u32::MAX.
 		wires: new Map<bigint, Map<number, WirePath>>(),
@@ -98,14 +101,16 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphNodes, (updateNodeGraphNodes) => {
+	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphRender, (updateNodeGraphRender) => {
 		update((state) => {
 			state.nodesToRender.clear();
-			updateNodeGraphNodes.nodesToRender.forEach((node) => {
+			updateNodeGraphRender.nodesToRender.forEach((node) => {
 				state.nodesToRender.set(node.metadata.nodeId, node);
 			});
-			state.inSelectedNetwork = updateNodeGraphNodes.inSelectedNetwork;
+			state.open = updateNodeGraphRender.open;
-			state.previewedNode = updateNodeGraphNodes.previewedNode;
+			state.opacity = updateNodeGraphRender.opacity;
+			state.inSelectedNetwork = updateNodeGraphRender.inSelectedNetwork;
+			state.previewedNode = updateNodeGraphRender.previewedNode;
 			return state;
 		});
 	});