Complete basic UI

Author: adamgerhant

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

@@ -1795,6 +1795,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 					native_node_graph_render: self.native_node_graph_render,
 				});
 				responses.add(NodeGraphMessage::SendGraph);
+				responses.add(MenuBarMessage::SendLayout);
 			}
 			NodeGraphMessage::ToggleSelectedLocked => {
 				let Some(selected_nodes) = network_interface.selected_nodes_in_nested_network(selection_network_path) else {

frontend/src/components/Editor.svelte

@@ -74,6 +74,7 @@
 		// Replace usage of `-rgb` variants with CSS color() function to calculate alpha when browsers support it
 		// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
 		// Specifically, support for the relative syntax is needed: `color(from var(--color-0-black) srgb r g b / 0.5)` to convert black to 50% alpha
+		// Keep in sync with node_graph_overlay/consts.rs
 		--color-0-black: #000;
 		--color-0-black-rgb: 0, 0, 0;
 		--color-1-nearblack: #111;

frontend/wasm/src/wasm_node_graph_ui_executor.rs

@@ -54,10 +54,15 @@ impl WasmNodeGraphUIExecutor {
 		if !self.runtime_busy {
 			self.runtime_busy = true;
 			wasm_bindgen_futures::spawn_local(async move {
-				let Ok(mut runtime) = NODE_UI_RUNTIME.try_lock() else { return };
-				if let Some(runtime) = runtime.as_mut() {
-					runtime.compile(compilation_request).await
-				}
+				let Ok(mut runtime) = NODE_UI_RUNTIME.try_lock() else {
+					log::error!("Could not get runtime when evaluating");
+					return;
+				};
+				let Some(runtime) = runtime.as_mut() else {
+					log::error!("Could not lock runtime when evaluating");
+					return;
+				};
+				runtime.compile(compilation_request).await;
 			})
 		} else {
 			self.queued_compilation = Some(compilation_request);
@@ -66,7 +71,6 @@ impl WasmNodeGraphUIExecutor {
 
 	// Evaluates the node graph in a spawned future, and returns responses with the response_sender
 	fn evaluation_request(&mut self, editor: &Editor) {
-		self.runtime_busy = true;
 		if let Some(active_document) = editor.dispatcher.message_handlers.portfolio_message_handler.active_document() {
 			let Some(network_metadata) = active_document.network_interface.network_metadata(&active_document.breadcrumb_network_path) else {
 				return;
@@ -84,6 +88,8 @@ impl WasmNodeGraphUIExecutor {
 			};
 			let resolution = editor.dispatcher.message_handlers.input_preprocessor_message_handler.viewport_bounds.size().as_uvec2();
 			let evaluation_request = EvaluationRequest { transform, resolution };
+			self.runtime_busy = true;
+
 			wasm_bindgen_futures::spawn_local(async move {
 				let Ok(mut runtime) = NODE_UI_RUNTIME.try_lock() else {
 					log::error!("Could not get runtime when evaluating");
@@ -105,18 +111,24 @@ impl WasmNodeGraphUIExecutor {
 		let mut responses = Vec::new();
 		for runtime_response in self.response_receiver.try_iter() {
 			match runtime_response {
+				UIRuntimeResponse::RuntimeReady => {
+					self.runtime_busy = false;
+				}
 				UIRuntimeResponse::OverlaySVG(svg_string) => {
 					responses.push(FrontendMessage::UpdateNativeNodeGraphSVG { svg_string }.into());
 				}
 				UIRuntimeResponse::OverlayTexture(_texture) => todo!(),
 			}
 		}
-		self.runtime_busy = false;
-		if let Some(compilation_request) = self.queued_compilation.take() {
-			self.compilation_request(compilation_request);
-		} else {
-			self.evaluation_request(editor);
+
+		if !self.runtime_busy {
+			if let Some(compilation_request) = self.queued_compilation.take() {
+				self.compilation_request(compilation_request);
+			} else {
+				self.evaluation_request(editor);
+			}
 		}
+
 		responses
 	}
 }

node-graph/gcore/src/node_graph_overlay.rs

@@ -2,21 +2,35 @@ use graphene_core_shaders::{Ctx, color::Color};
 use kurbo::{BezPath, Point};
 
 use crate::{
-	node_graph_overlay::ui_context::{UIContext, UIRuntimeResponse},
-	table::Table,
+	node_graph_overlay::{
+		nodes_and_wires::draw_node,
+		types::NodeGraphOverlayData,
+		ui_context::{UIContext, UIRuntimeResponse},
+	},
+	table::{Table, TableRow},
+	transform::ApplyTransform,
 	vector::Vector,
 };
 
+pub mod nodes_and_wires;
 pub mod types;
 pub mod ui_context;
+pub mod consts;
 
 #[node_macro::node(skip_impl)]
-pub fn generate_nodes(_: impl Ctx, _node_graph_overlay_data: types::NodeGraphOverlayData) -> Table<Vector> {
-	Table::new()
+pub fn generate_nodes(_: impl Ctx, node_graph_overlay_data: NodeGraphOverlayData) -> Table<Vector> {
+	let mut nodes_and_wires = Table::new();
+	for node in node_graph_overlay_data.nodes_to_render {
+		let vector = draw_node(node);
+		nodes_and_wires.push(TableRow::new_from_element(vector));
+	}
+	nodes_and_wires
 }
 
 #[node_macro::node(skip_impl)]
-pub fn transform_nodes(_ctx: UIContext, nodes: Table<Vector>) -> Table<Vector> {
+pub fn transform_nodes(ui_context: UIContext, mut nodes: Table<Vector>) -> Table<Vector> {
+	let matrix = ui_context.transform.to_daffine2();
+	nodes.apply_transform(&matrix);
 	nodes
 }
 

node-graph/gcore/src/node_graph_overlay/consts.rs

@@ -0,0 +1,41 @@
+pub const GRID_SIZE: f64 = 24.;
+
+// Keep in sync with colors in Editor.svelte
+pub const COLOR_0_BLACK: &str = "000000";
+pub const COLOR_1_NEARBLACK: &str = "111111";
+pub const COLOR_2_MILDBLACK: &str = "222222";
+pub const COLOR_3_DARKGRAY: &str = "333333";
+pub const COLOR_4_DIMGRAY: &str = "444444";
+pub const COLOR_5_DULLGRAY: &str = "555555";
+pub const COLOR_6_LOWERGRAY: &str = "666666";
+pub const COLOR_7_MIDDLEGRAY: &str = "777777";
+pub const COLOR_8_UPPERGRAY: &str = "888888";
+pub const COLOR_9_PALEGRAY: &str = "999999";
+pub const COLOR_A_SOFTGRAY: &str = "AAAAAA";
+pub const COLOR_B_LIGHTGRAY: &str = "BBBBBB";
+pub const COLOR_C_BRIGHTGRAY: &str = "CCCCCC";
+pub const COLOR_D_MILDWHITE: &str = "DDDDDD";
+pub const COLOR_E_NEARWHITE: &str = "EEEEEE";
+pub const COLOR_F_WHITE: &str = "FFFFFF";
+
+pub const COLOR_ERROR_RED: &str = "D6536E";
+pub const COLOR_WARNING_YELLOW: &str = "D5AA43";
+
+pub const COLOR_DATA_GENERAL: &str = "CFCFCF";
+pub const COLOR_DATA_GENERAL_DIM: &str = "8A8A8A";
+pub const COLOR_DATA_NUMBER: &str = "C9A699";
+pub const COLOR_DATA_NUMBER_DIM: &str = "886B60";
+pub const COLOR_DATA_ARTBOARD: &str = "FBF9EB";
+pub const COLOR_DATA_ARTBOARD_DIM: &str = "B9B9A9";
+pub const COLOR_DATA_GRAPHIC: &str = "68C587";
+pub const COLOR_DATA_GRAPHIC_DIM: &str = "37754C";
+pub const COLOR_DATA_RASTER: &str = "E4BB72";
+pub const COLOR_DATA_RASTER_DIM: &str = "9A7B43";
+pub const COLOR_DATA_VECTOR: &str = "65BBE5";
+pub const COLOR_DATA_VECTOR_DIM: &str = "417892";
+pub const COLOR_DATA_COLOR: &str = "CE6EA7";
+pub const COLOR_DATA_COLOR_DIM: &str = "924071";
+pub const COLOR_DATA_GRADIENT: &str = "AF81EB";
+pub const COLOR_DATA_GRADIENT_DIM: &str = "6C489B";
+pub const COLOR_DATA_TYPOGRAPHY: &str = "EEA7A7";
+pub const COLOR_DATA_TYPOGRAPHY_DIM: &str = "955252";

node-graph/gcore/src/node_graph_overlay/nodes_and_wires.rs

@@ -0,0 +1,63 @@
+use graphene_core_shaders::color::{AlphaMut, Color};
+use kurbo::{RoundedRect, Shape};
+
+use crate::{
+	node_graph_overlay::{
+		consts::{self, GRID_SIZE},
+		types::{FrontendNodeToRender, NodeOrLayer},
+	},
+	vector::Vector,
+};
+
+pub fn draw_node(node: FrontendNodeToRender) -> Vector {
+	let node_or_layer = node.node_or_layer.to_enum();
+
+	match &node_or_layer {
+		NodeOrLayer::Node(frontend_node) => {
+			let x0 = frontend_node.position.x as f64 * GRID_SIZE;
+			let y0 = frontend_node.position.y as f64 * GRID_SIZE + GRID_SIZE / 2.;
+			let w = GRID_SIZE * 5.0;
+			let height = 1 + frontend_node.inputs.iter().skip(1).filter(|x| x.is_some()).count();
+			let h = height as f64 * GRID_SIZE;
+
+			let rect = RoundedRect::new(x0, y0, x0 + w, y0 + h, 2.);
+			let bez_path = rect.to_path(0.1);
+			let mut vector = Vector::from_bezpath(bez_path);
+			let border_color = Color::from_rgb_str(consts::COLOR_5_DULLGRAY).unwrap();
+			vector.style.stroke = Some(crate::vector::style::Stroke::new(Some(border_color), 1.));
+			let mut background = if node.metadata.selected {
+				Color::from_rgb_str(consts::COLOR_5_DULLGRAY).unwrap()
+			} else {
+				Color::from_rgb_str(consts::COLOR_2_MILDBLACK).unwrap()
+			};
+			background.set_alpha(0.33);
+			vector.style.fill = crate::vector::style::Fill::Solid(background);
+			vector
+		}
+		NodeOrLayer::Layer(frontend_layer) => {
+			let chain_width = if frontend_layer.chain_width > 0 {
+				frontend_layer.chain_width as f64 * GRID_SIZE + 0.5 * GRID_SIZE
+			} else {
+				0.
+			};
+			let x0 = frontend_layer.position.x as f64 * GRID_SIZE - chain_width + 0.5 * GRID_SIZE;
+			let y0 = frontend_layer.position.y as f64 * GRID_SIZE;
+			let h = 2. * GRID_SIZE;
+			let w = chain_width + 8. * GRID_SIZE;
+
+			let rect = RoundedRect::new(x0, y0, x0 + w, y0 + h, 8.);
+			let bez_path = rect.to_path(0.1);
+			let mut vector = Vector::from_bezpath(bez_path);
+			let border_color = Color::from_rgb_str(consts::COLOR_5_DULLGRAY).unwrap();
+			vector.style.stroke = Some(crate::vector::style::Stroke::new(Some(border_color), 1.));
+			let mut background = if node.metadata.selected {
+				Color::from_rgb_str(consts::COLOR_5_DULLGRAY).unwrap()
+			} else {
+				Color::from_rgb_str(consts::COLOR_2_MILDBLACK).unwrap()
+			};
+			background.set_alpha(0.33);
+			vector.style.fill = crate::vector::style::Fill::Solid(background);
+			vector
+		}
+	}
+}

node-graph/gcore/src/node_graph_overlay/types.rs

@@ -1,3 +1,5 @@
+use glam::{DAffine2, DVec2};
+
 use crate::uuid::NodeId;
 use std::hash::{Hash, Hasher};
 
@@ -8,6 +10,12 @@ pub struct NodeGraphTransform {
 	pub y: f64,
 }
 
+impl NodeGraphTransform {
+	pub fn to_daffine2(&self) -> DAffine2 {
+		DAffine2::from_scale_angle_translation(DVec2::splat(self.scale), 0.0, DVec2::new(self.x, self.y))
+	}
+}
+
 impl Hash for NodeGraphTransform {
 	fn hash<H: Hasher>(&self, state: &mut H) {
 		self.scale.to_bits().hash(state);
@@ -104,12 +112,31 @@ pub struct FrontendXY {
 // 	pub stack: Option<u32>,
 // }
 
+// Should be an enum but those are hard to serialize/deserialize to TS
 #[derive(Clone, Debug, Default, PartialEq, Hash, dyn_any::DynAny, serde::Serialize, serde::Deserialize, specta::Type)]
 pub struct FrontendNodeOrLayer {
 	pub node: Option<FrontendNode>,
 	pub layer: Option<FrontendLayer>,
 }
 
+impl FrontendNodeOrLayer {
+	pub fn to_enum(self) -> NodeOrLayer {
+		let node_or_layer = if let Some(node) = self.node {
+			Some(NodeOrLayer::Node(node))
+		} else if let Some(layer) = self.layer {
+			Some(NodeOrLayer::Layer(layer))
+		} else {
+			None
+		};
+		node_or_layer.unwrap()
+	}
+}
+
+pub enum NodeOrLayer {
+	Node(FrontendNode),
+	Layer(FrontendLayer),
+}
+
 #[derive(Clone, Debug, Default, PartialEq, Hash, dyn_any::DynAny, serde::Serialize, serde::Deserialize, specta::Type)]
 pub struct FrontendGraphInput {
 	#[serde(rename = "dataType")]

node-graph/gcore/src/node_graph_overlay/ui_context.rs

@@ -16,6 +16,7 @@ pub struct UIContextImpl {
 
 #[derive(Debug, Clone, dyn_any::DynAny)]
 pub enum UIRuntimeResponse {
+	RuntimeReady,
 	OverlaySVG(String),
 	OverlayTexture(wgpu::Texture),
 	// OverlayClickTargets(NodeId, ClickTarget)

node-graph/gstd/src/wasm_application_io.rs

@@ -1,10 +1,9 @@
-use glam::DAffine2;
+use glam::DVec2;
 use graph_craft::document::value::RenderOutput;
 pub use graph_craft::document::value::RenderOutputType;
 pub use graph_craft::wasm_application_io::*;
 use graphene_application_io::{ApplicationIo, ExportFormat, RenderConfig};
 use graphene_core::Artboard;
-use graphene_core::bounds::RenderBoundingBox;
 use graphene_core::gradient::GradientStops;
 #[cfg(target_family = "wasm")]
 use graphene_core::math::bbox::Bbox;
@@ -367,13 +366,9 @@ async fn render_node_graph_ui<T: Render + WasmNotSend>(
 	data: impl Node<UIContext, Output = T>,
 ) -> String {
 	let data = data.eval(ui_context.clone()).await;
-	let RenderBoundingBox::Rectangle(bbox) = data.bounding_box(DAffine2::default(), false) else {
-		log::error!("Could not get bounding box for node graph data");
-		return String::new();
-	};
 	let render_params = RenderParams::default();
 	let mut render = SvgRender::new();
 	data.render_svg(&mut render, &render_params);
-	render.format_svg(bbox[0], bbox[1]);
+	render.format_svg(DVec2::ZERO, ui_context.resolution.as_dvec2());
 	render.svg.to_svg_string()
 }

node-graph/interpreted-executor/src/ui_runtime.rs

@@ -29,6 +29,7 @@ impl NodeGraphUIRuntime {
 				log::error!("Error compiling node graph ui network: {e:?}");
 			}
 		};
+		let _ = self.response_sender.send(UIRuntimeResponse::RuntimeReady);
 	}
 
 	pub async fn evaluate(&mut self, evaluation_request: EvaluationRequest) {
@@ -40,6 +41,7 @@ impl NodeGraphUIRuntime {
 			response_sender: self.response_sender.clone(),
 		});
 		let _ = (&self.executor).execute(ui_context).await;
+		let _ = self.response_sender.send(UIRuntimeResponse::RuntimeReady);
 	}
 }