Node 'Disable' and 'Preview' UX improvements (#918)

* Don't allow disabling input or output nodes

* Shortcuts to show and preview node

* Update preview tooltip and label

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

frontend/src/components/panels/NodeGraph.vue

@@ -534,8 +534,10 @@ export default defineComponent({
 		},
 		// TODO: Move the event listener from the graph to the window so dragging outside the graph area (or even the browser window) works
 		pointerDown(e: PointerEvent) {
+			// Exit the add node popup by clicking elsewhere in the graph
 			if (this.nodeListLocation && !(e.target as HTMLElement).closest("[data-node-list]")) this.nodeListLocation = undefined;
 
+			// Handle the add node popup on right click
 			if (e.button === 2) {
 				const graphDiv: HTMLDivElement | undefined = (this.$refs.graph as typeof LayoutCol | undefined)?.$el;
 				const graph = graphDiv?.getBoundingClientRect() || new DOMRect();
@@ -558,6 +560,10 @@ export default defineComponent({
 			// If the user is clicking on the add nodes list, exit here
 			if (nodeList) return;
 
+			if (e.altKey && nodeId) {
+				this.editor.instance.togglePreview(BigInt(nodeId));
+			}
+
 			// Clicked on a port dot
 			if (port && node) {
 				const isOutput = Boolean(port.getAttribute("data-port") === "output");

frontend/wasm/src/editor_api.rs

@@ -648,6 +648,13 @@ impl JsEditorHandle {
 		self.dispatch(message);
 	}
 
+	/// Toggle preview on node
+	#[wasm_bindgen(js_name = togglePreview)]
+	pub fn toggle_preview(&self, node_id: NodeId) {
+		let message = NodeGraphMessage::TogglePreview { node_id };
+		self.dispatch(message);
+	}
+
 	/// Pastes an image
 	#[wasm_bindgen(js_name = pasteImage)]
 	pub fn paste_image(&self, mime: String, image_data: Vec<u8>, mouse_x: Option<f64>, mouse_y: Option<f64>) {