Replace the Spreadsheet panel with an improved Data panel (#3037)

* Improve the table data panel

* Add the "Window" menu bar section and polish everything

editor/src/messages/portfolio/document/data_panel/data_panel_message.rs

@@ -0,0 +1,33 @@
+use crate::messages::prelude::*;
+use crate::node_graph_executor::InspectResult;
+
+/// The Data panel UI allows the user to visualize the output data of the selected node.
+#[impl_message(Message, DocumentMessage, DataPanel)]
+#[derive(PartialEq, Clone, Debug, serde::Serialize, serde::Deserialize)]
+pub enum DataPanelMessage {
+	UpdateLayout {
+		#[serde(skip)]
+		inspect_result: InspectResult,
+	},
+	ClearLayout,
+
+	PushToElementPath {
+		index: usize,
+	},
+	TruncateElementPath {
+		len: usize,
+	},
+
+	ViewVectorTableTab {
+		tab: VectorTableTab,
+	},
+}
+
+#[derive(PartialEq, Eq, Clone, Copy, Default, Debug, serde::Serialize, serde::Deserialize)]
+pub enum VectorTableTab {
+	#[default]
+	Properties,
+	Points,
+	Segments,
+	Regions,
+}

editor/src/messages/portfolio/document/data_panel/data_panel_message_handler.rs

@@ -0,0 +1,633 @@
+use super::VectorTableTab;
+use crate::messages::layout::utility_types::layout_widget::{Layout, LayoutGroup, LayoutTarget, WidgetLayout};
+use crate::messages::portfolio::document::data_panel::DataPanelMessage;
+use crate::messages::portfolio::document::utility_types::network_interface::NodeNetworkInterface;
+use crate::messages::prelude::*;
+use crate::messages::tool::tool_messages::tool_prelude::*;
+use graph_craft::document::NodeId;
+use graphene_std::Color;
+use graphene_std::Context;
+use graphene_std::memo::IORecord;
+use graphene_std::raster_types::{CPU, GPU, Raster};
+use graphene_std::table::Table;
+use graphene_std::vector::Vector;
+use graphene_std::vector::style::{Fill, FillChoice};
+use graphene_std::{Artboard, Graphic};
+use std::any::Any;
+use std::sync::Arc;
+
+#[derive(ExtractField)]
+pub struct DataPanelMessageContext<'a> {
+	pub network_interface: &'a mut NodeNetworkInterface,
+	pub data_panel_open: bool,
+}
+
+/// The data panel allows for graph data to be previewed.
+#[derive(Default, Debug, Clone, ExtractField)]
+pub struct DataPanelMessageHandler {
+	introspected_node: Option<NodeId>,
+	introspected_data: Option<Arc<dyn Any + Send + Sync>>,
+	element_path: Vec<usize>,
+	active_vector_table_tab: VectorTableTab,
+}
+
+#[message_handler_data]
+impl MessageHandler<DataPanelMessage, DataPanelMessageContext<'_>> for DataPanelMessageHandler {
+	fn process_message(&mut self, message: DataPanelMessage, responses: &mut VecDeque<Message>, context: DataPanelMessageContext) {
+		match message {
+			DataPanelMessage::UpdateLayout { mut inspect_result } => {
+				self.introspected_node = Some(inspect_result.inspect_node);
+				self.introspected_data = inspect_result.take_data();
+				self.update_layout(responses, context);
+			}
+			DataPanelMessage::ClearLayout => {
+				self.introspected_node = None;
+				self.introspected_data = None;
+				self.element_path.clear();
+				self.active_vector_table_tab = VectorTableTab::default();
+				self.update_layout(responses, context);
+			}
+
+			DataPanelMessage::PushToElementPath { index } => {
+				self.element_path.push(index);
+				self.update_layout(responses, context);
+			}
+			DataPanelMessage::TruncateElementPath { len } => {
+				self.element_path.truncate(len);
+				self.update_layout(responses, context);
+			}
+
+			DataPanelMessage::ViewVectorTableTab { tab } => {
+				self.active_vector_table_tab = tab;
+				self.update_layout(responses, context);
+			}
+		}
+	}
+
+	fn actions(&self) -> ActionList {
+		actions!(DataPanelMessage;)
+	}
+}
+
+impl DataPanelMessageHandler {
+	fn update_layout(&mut self, responses: &mut VecDeque<Message>, context: DataPanelMessageContext<'_>) {
+		let DataPanelMessageContext { network_interface, .. } = context;
+
+		let mut layout_data = LayoutData {
+			current_depth: 0,
+			desired_path: &mut self.element_path,
+			breadcrumbs: Vec::new(),
+			vector_table_tab: self.active_vector_table_tab,
+		};
+
+		// Main data visualization
+		let mut layout = self
+			.introspected_data
+			.as_ref()
+			.map(|instrospected_data| generate_layout(instrospected_data, &mut layout_data).unwrap_or_else(|| label("Visualization of this data type is not yet supported")))
+			.unwrap_or_default();
+
+		let mut widgets = Vec::new();
+
+		// Selected layer/node name
+		if let Some(node_id) = self.introspected_node {
+			let is_layer = network_interface.is_layer(&node_id, &[]);
+
+			widgets.extend([
+				if is_layer {
+					IconLabel::new("Layer").tooltip("Name of the selected layer").widget_holder()
+				} else {
+					IconLabel::new("Node").tooltip("Name of the selected node").widget_holder()
+				},
+				Separator::new(SeparatorType::Related).widget_holder(),
+				TextInput::new(network_interface.display_name(&node_id, &[]))
+					.tooltip(if is_layer { "Name of the selected layer" } else { "Name of the selected node" })
+					.on_update(move |text_input| {
+						NodeGraphMessage::SetDisplayName {
+							node_id,
+							alias: text_input.value.clone(),
+							skip_adding_history_step: false,
+						}
+						.into()
+					})
+					.max_width(200)
+					.widget_holder(),
+				Separator::new(SeparatorType::Unrelated).widget_holder(),
+			]);
+		}
+
+		// Element path breadcrumbs
+		if !layout_data.breadcrumbs.is_empty() {
+			let breadcrumb = BreadcrumbTrailButtons::new(layout_data.breadcrumbs)
+				.on_update(|&len| DataPanelMessage::TruncateElementPath { len: len as usize }.into())
+				.widget_holder();
+			widgets.push(breadcrumb);
+		}
+
+		if !widgets.is_empty() {
+			layout.insert(0, LayoutGroup::Row { widgets });
+		}
+
+		responses.add(LayoutMessage::SendLayout {
+			layout: Layout::WidgetLayout(WidgetLayout { layout }),
+			layout_target: LayoutTarget::DataPanel,
+		});
+	}
+}
+
+struct LayoutData<'a> {
+	current_depth: usize,
+	desired_path: &'a mut Vec<usize>,
+	breadcrumbs: Vec<String>,
+	vector_table_tab: VectorTableTab,
+}
+
+macro_rules! generate_layout_downcast {
+	($introspected_data:expr, $data:expr, [ $($ty:ty),* $(,)? ]) => {
+		if false { None }
+		$(
+			else if let Some(io) = $introspected_data.downcast_ref::<IORecord<Context, $ty>>() {
+				Some(io.output.layout_with_breadcrumb($data))
+			}
+		)*
+		else { None }
+	}
+}
+
+// TODO: We simply try all these types sequentially. Find a better strategy.
+fn generate_layout(introspected_data: &Arc<dyn std::any::Any + Send + Sync + 'static>, data: &mut LayoutData) -> Option<Vec<LayoutGroup>> {
+	generate_layout_downcast!(introspected_data, data, [
+		Table<Artboard>,
+		Table<Graphic>,
+		Table<Vector>,
+		Table<Raster<CPU>>,
+		Table<Raster<GPU>>,
+		Table<Color>,
+		Color,
+		Option<Color>,
+		f64,
+		u32,
+		u64,
+		bool,
+		String,
+		Option<f64>,
+		DVec2,
+		DAffine2,
+	])
+}
+
+fn column_headings(value: &[&str]) -> Vec<WidgetHolder> {
+	value.iter().map(|text| TextLabel::new(*text).widget_holder()).collect()
+}
+
+fn label(x: impl Into<String>) -> Vec<LayoutGroup> {
+	let error = vec![TextLabel::new(x).widget_holder()];
+	vec![LayoutGroup::Row { widgets: error }]
+}
+
+trait TableRowLayout {
+	fn type_name() -> &'static str;
+	fn identifier(&self) -> String;
+	fn layout_with_breadcrumb(&self, data: &mut LayoutData) -> Vec<LayoutGroup> {
+		data.breadcrumbs.push(self.identifier());
+		self.element_page(data)
+	}
+	fn element_widget(&self, index: usize) -> WidgetHolder {
+		TextButton::new(self.identifier())
+			.on_update(move |_| DataPanelMessage::PushToElementPath { index }.into())
+			.widget_holder()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		vec![]
+	}
+}
+
+impl<T: TableRowLayout> TableRowLayout for Table<T> {
+	fn type_name() -> &'static str {
+		"Table"
+	}
+	fn identifier(&self) -> String {
+		format!("Table<{}> ({} row{})", T::type_name(), self.len(), if self.len() == 1 { "" } else { "s" })
+	}
+	fn element_page(&self, data: &mut LayoutData) -> Vec<LayoutGroup> {
+		if let Some(index) = data.desired_path.get(data.current_depth).copied() {
+			if let Some(row) = self.get(index) {
+				data.current_depth += 1;
+				let result = row.element.layout_with_breadcrumb(data);
+				data.current_depth -= 1;
+				return result;
+			} else {
+				warn!("Desired path truncated");
+				data.desired_path.truncate(data.current_depth);
+			}
+		}
+
+		let mut rows = self
+			.iter()
+			.enumerate()
+			.map(|(index, row)| {
+				vec![
+					TextLabel::new(format!("{index}")).widget_holder(),
+					row.element.element_widget(index),
+					TextLabel::new(format_transform_matrix(row.transform)).widget_holder(),
+					TextLabel::new(format!("{}", row.alpha_blending)).widget_holder(),
+					TextLabel::new(row.source_node_id.map_or_else(|| "-".to_string(), |id| format!("{}", id.0))).widget_holder(),
+				]
+			})
+			.collect::<Vec<_>>();
+
+		rows.insert(0, column_headings(&["", "element", "transform", "alpha_blending", "source_node_id"]));
+
+		vec![LayoutGroup::Table { rows }]
+	}
+}
+
+impl TableRowLayout for Artboard {
+	fn type_name() -> &'static str {
+		"Artboard"
+	}
+	fn identifier(&self) -> String {
+		self.label.clone()
+	}
+	fn element_page(&self, data: &mut LayoutData) -> Vec<LayoutGroup> {
+		self.content.element_page(data)
+	}
+}
+
+impl TableRowLayout for Graphic {
+	fn type_name() -> &'static str {
+		"Graphic"
+	}
+	fn identifier(&self) -> String {
+		match self {
+			Self::Graphic(table) => table.identifier(),
+			Self::Vector(table) => table.identifier(),
+			Self::RasterCPU(table) => table.identifier(),
+			Self::RasterGPU(table) => table.identifier(),
+			Self::Color(table) => table.identifier(),
+		}
+	}
+	// Don't put a breadcrumb for Graphic
+	fn layout_with_breadcrumb(&self, data: &mut LayoutData) -> Vec<LayoutGroup> {
+		self.element_page(data)
+	}
+	fn element_page(&self, data: &mut LayoutData) -> Vec<LayoutGroup> {
+		match self {
+			Self::Graphic(table) => table.layout_with_breadcrumb(data),
+			Self::Vector(table) => table.layout_with_breadcrumb(data),
+			Self::RasterCPU(table) => table.layout_with_breadcrumb(data),
+			Self::RasterGPU(table) => table.layout_with_breadcrumb(data),
+			Self::Color(table) => table.layout_with_breadcrumb(data),
+		}
+	}
+}
+
+impl TableRowLayout for Vector {
+	fn type_name() -> &'static str {
+		"Vector"
+	}
+	fn identifier(&self) -> String {
+		format!(
+			"Vector ({} point{}, {} segment{})",
+			self.point_domain.ids().len(),
+			if self.point_domain.ids().len() == 1 { "" } else { "s" },
+			self.segment_domain.ids().len(),
+			if self.segment_domain.ids().len() == 1 { "" } else { "s" }
+		)
+	}
+	fn element_page(&self, data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let table_tab_entries = [VectorTableTab::Properties, VectorTableTab::Points, VectorTableTab::Segments, VectorTableTab::Regions]
+			.into_iter()
+			.map(|tab| {
+				RadioEntryData::new(format!("{tab:?}"))
+					.label(format!("{tab:?}"))
+					.on_update(move |_| DataPanelMessage::ViewVectorTableTab { tab }.into())
+			})
+			.collect();
+		let table_tabs = vec![RadioInput::new(table_tab_entries).selected_index(Some(data.vector_table_tab as u32)).widget_holder()];
+
+		let mut table_rows = Vec::new();
+		match data.vector_table_tab {
+			VectorTableTab::Properties => {
+				table_rows.push(column_headings(&["property", "value"]));
+
+				match self.style.fill.clone() {
+					Fill::None => table_rows.push(vec![
+						TextLabel::new("Fill").widget_holder(),
+						ColorInput::new(FillChoice::None).disabled(true).menu_direction(Some(MenuDirection::Top)).widget_holder(),
+					]),
+					Fill::Solid(color) => table_rows.push(vec![
+						TextLabel::new("Fill").widget_holder(),
+						ColorInput::new(FillChoice::Solid(color)).disabled(true).menu_direction(Some(MenuDirection::Top)).widget_holder(),
+					]),
+					Fill::Gradient(gradient) => {
+						table_rows.push(vec![
+							TextLabel::new("Fill").widget_holder(),
+							ColorInput::new(FillChoice::Gradient(gradient.stops))
+								.disabled(true)
+								.menu_direction(Some(MenuDirection::Top))
+								.widget_holder(),
+						]);
+						table_rows.push(vec![
+							TextLabel::new("Fill Gradient Type").widget_holder(),
+							TextLabel::new(gradient.gradient_type.to_string()).widget_holder(),
+						]);
+						table_rows.push(vec![
+							TextLabel::new("Fill Gradient Start").widget_holder(),
+							TextLabel::new(format_dvec2(gradient.start)).widget_holder(),
+						]);
+						table_rows.push(vec![TextLabel::new("Fill Gradient End").widget_holder(), TextLabel::new(format_dvec2(gradient.end)).widget_holder()]);
+						table_rows.push(vec![
+							TextLabel::new("Fill Gradient Transform").widget_holder(),
+							TextLabel::new(format_transform_matrix(&gradient.transform)).widget_holder(),
+						]);
+					}
+				}
+
+				if let Some(stroke) = self.style.stroke.clone() {
+					let color = if let Some(color) = stroke.color { FillChoice::Solid(color) } else { FillChoice::None };
+					table_rows.push(vec![
+						TextLabel::new("Stroke").widget_holder(),
+						ColorInput::new(color).disabled(true).menu_direction(Some(MenuDirection::Top)).widget_holder(),
+					]);
+					table_rows.push(vec![TextLabel::new("Stroke Weight").widget_holder(), TextLabel::new(format!("{} px", stroke.weight)).widget_holder()]);
+					table_rows.push(vec![
+						TextLabel::new("Stroke Dash Lengths").widget_holder(),
+						TextLabel::new(if stroke.dash_lengths.is_empty() {
+							"-".to_string()
+						} else {
+							format!("[{}]", stroke.dash_lengths.iter().map(|x| format!("{x} px")).collect::<Vec<_>>().join(", "))
+						})
+						.widget_holder(),
+					]);
+					table_rows.push(vec![
+						TextLabel::new("Stroke Dash Offset").widget_holder(),
+						TextLabel::new(format!("{}", stroke.dash_offset)).widget_holder(),
+					]);
+					table_rows.push(vec![TextLabel::new("Stroke Cap").widget_holder(), TextLabel::new(stroke.cap.to_string()).widget_holder()]);
+					table_rows.push(vec![TextLabel::new("Stroke Join").widget_holder(), TextLabel::new(stroke.join.to_string()).widget_holder()]);
+					table_rows.push(vec![
+						TextLabel::new("Stroke Join Miter Limit").widget_holder(),
+						TextLabel::new(format!("{}", stroke.join_miter_limit)).widget_holder(),
+					]);
+					table_rows.push(vec![TextLabel::new("Stroke Align").widget_holder(), TextLabel::new(stroke.align.to_string()).widget_holder()]);
+					table_rows.push(vec![
+						TextLabel::new("Stroke Transform").widget_holder(),
+						TextLabel::new(format_transform_matrix(&stroke.transform)).widget_holder(),
+					]);
+					table_rows.push(vec![
+						TextLabel::new("Stroke Non-Scaling").widget_holder(),
+						TextLabel::new((if stroke.non_scaling { "Yes" } else { "No" }).to_string()).widget_holder(),
+					]);
+					table_rows.push(vec![
+						TextLabel::new("Stroke Paint Order").widget_holder(),
+						TextLabel::new(stroke.paint_order.to_string()).widget_holder(),
+					]);
+				}
+
+				let colinear = self.colinear_manipulators.iter().map(|[a, b]| format!("[{a} / {b}]")).collect::<Vec<_>>().join(", ");
+				let colinear = if colinear.is_empty() { "-".to_string() } else { colinear };
+				table_rows.push(vec![TextLabel::new("Colinear Handle IDs").widget_holder(), TextLabel::new(colinear).widget_holder()]);
+
+				table_rows.push(vec![
+					TextLabel::new("Upstream Nested Layers").widget_holder(),
+					TextLabel::new(if self.upstream_nested_layers.is_some() {
+						"Yes (this preserves references to its upstream nested layers for editing by tools)"
+					} else {
+						"No (this doesn't preserve references to its upstream nested layers for editing by tools)"
+					})
+					.widget_holder(),
+				]);
+			}
+			VectorTableTab::Points => {
+				table_rows.push(column_headings(&["", "position"]));
+				table_rows.extend(
+					self.point_domain
+						.iter()
+						.map(|(id, position)| vec![TextLabel::new(format!("{}", id.inner())).widget_holder(), TextLabel::new(format!("{position}")).widget_holder()]),
+				);
+			}
+			VectorTableTab::Segments => {
+				table_rows.push(column_headings(&["", "start_index", "end_index", "handles"]));
+				table_rows.extend(self.segment_domain.iter().map(|(id, start, end, handles)| {
+					vec![
+						TextLabel::new(format!("{}", id.inner())).widget_holder(),
+						TextLabel::new(format!("{start}")).widget_holder(),
+						TextLabel::new(format!("{end}")).widget_holder(),
+						TextLabel::new(format!("{handles:?}")).widget_holder(),
+					]
+				}));
+			}
+			VectorTableTab::Regions => {
+				table_rows.push(column_headings(&["", "segment_range", "fill"]));
+				table_rows.extend(self.region_domain.iter().map(|(id, segment_range, fill)| {
+					vec![
+						TextLabel::new(format!("{}", id.inner())).widget_holder(),
+						TextLabel::new(format!("{segment_range:?}")).widget_holder(),
+						TextLabel::new(format!("{}", fill.inner())).widget_holder(),
+					]
+				}));
+			}
+		}
+
+		vec![LayoutGroup::Row { widgets: table_tabs }, LayoutGroup::Table { rows: table_rows }]
+	}
+}
+
+impl TableRowLayout for Raster<CPU> {
+	fn type_name() -> &'static str {
+		"Raster"
+	}
+	fn identifier(&self) -> String {
+		format!("Raster ({}x{})", self.width, self.height)
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let base64_string = self.data().base64_string.clone().unwrap_or_else(|| {
+			use base64::Engine;
+
+			let output = self.data().to_png();
+			let preamble = "data:image/png;base64,";
+			let mut base64_string = String::with_capacity(preamble.len() + output.len() * 4);
+			base64_string.push_str(preamble);
+			base64::engine::general_purpose::STANDARD.encode_string(output, &mut base64_string);
+			base64_string
+		});
+
+		let widgets = vec![ImageLabel::new(base64_string).widget_holder()];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+impl TableRowLayout for Raster<GPU> {
+	fn type_name() -> &'static str {
+		"Raster"
+	}
+	fn identifier(&self) -> String {
+		format!("Raster ({}x{})", self.data().width(), self.data().height())
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let widgets = vec![TextLabel::new("Raster is a texture on the GPU and cannot currently be displayed here").widget_holder()];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+impl TableRowLayout for Color {
+	fn type_name() -> &'static str {
+		"Color"
+	}
+	fn identifier(&self) -> String {
+		format!("Color (#{})", self.to_gamma_srgb().to_rgba_hex_srgb())
+	}
+	fn element_widget(&self, _index: usize) -> WidgetHolder {
+		ColorInput::new(FillChoice::Solid(*self)).disabled(true).menu_direction(Some(MenuDirection::Top)).widget_holder()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let widgets = vec![self.element_widget(0)];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+impl TableRowLayout for Option<Color> {
+	fn type_name() -> &'static str {
+		"Option<Color>"
+	}
+	fn identifier(&self) -> String {
+		format!(
+			"Option<Color> (#{})",
+			if let Some(color) = self { color.to_linear_srgb().to_rgba_hex_srgb() } else { "None".to_string() }
+		)
+	}
+	fn element_widget(&self, _index: usize) -> WidgetHolder {
+		ColorInput::new(if let Some(color) = self { FillChoice::Solid(*color) } else { FillChoice::None })
+			.disabled(true)
+			.menu_direction(Some(MenuDirection::Top))
+			.widget_holder()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let widgets = vec![self.element_widget(0)];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+impl TableRowLayout for f64 {
+	fn type_name() -> &'static str {
+		"Number (f64)"
+	}
+	fn identifier(&self) -> String {
+		"Number (f64)".to_string()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let widgets = vec![TextLabel::new(self.to_string()).widget_holder()];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+impl TableRowLayout for u32 {
+	fn type_name() -> &'static str {
+		"Number (u32)"
+	}
+	fn identifier(&self) -> String {
+		"Number (u32)".to_string()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let widgets = vec![TextLabel::new(self.to_string()).widget_holder()];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+impl TableRowLayout for u64 {
+	fn type_name() -> &'static str {
+		"Number (u64)"
+	}
+	fn identifier(&self) -> String {
+		"Number (u64)".to_string()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let widgets = vec![TextLabel::new(self.to_string()).widget_holder()];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+impl TableRowLayout for bool {
+	fn type_name() -> &'static str {
+		"Bool"
+	}
+	fn identifier(&self) -> String {
+		"Bool".to_string()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let widgets = vec![TextLabel::new(self.to_string()).widget_holder()];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+impl TableRowLayout for String {
+	fn type_name() -> &'static str {
+		"String"
+	}
+	fn identifier(&self) -> String {
+		"String".to_string()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let widgets = vec![TextLabel::new(self.to_string()).widget_holder()];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+impl TableRowLayout for Option<f64> {
+	fn type_name() -> &'static str {
+		"Option<f64>"
+	}
+	fn identifier(&self) -> String {
+		"Option<f64>".to_string()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let widgets = vec![TextLabel::new(format!("{self:?}")).widget_holder()];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+impl TableRowLayout for DVec2 {
+	fn type_name() -> &'static str {
+		"Vec2"
+	}
+	fn identifier(&self) -> String {
+		"Vec2".to_string()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let widgets = vec![TextLabel::new(format!("({}, {})", self.x, self.y)).widget_holder()];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+impl TableRowLayout for DAffine2 {
+	fn type_name() -> &'static str {
+		"Transform"
+	}
+	fn identifier(&self) -> String {
+		"Transform".to_string()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let widgets = vec![TextLabel::new(format_transform_matrix(self)).widget_holder()];
+		vec![LayoutGroup::Row { widgets }]
+	}
+}
+
+fn format_transform_matrix(transform: &DAffine2) -> String {
+	let (scale, angle, translation) = transform.to_scale_angle_translation();
+	let rotation = if angle == -0. { 0. } else { angle.to_degrees() };
+	let round = |x: f64| (x * 1e3).round() / 1e3;
+
+	format!(
+		"Location: ({} px, {} px) — Rotation: {rotation:2}° — Scale: ({}x, {}x)",
+		round(translation.x),
+		round(translation.y),
+		round(scale.x),
+		round(scale.y)
+	)
+}
+
+fn format_dvec2(value: DVec2) -> String {
+	let round = |x: f64| (x * 1e3).round() / 1e3;
+	format!("({} px, {} px)", round(value.x), round(value.y))
+}

editor/src/messages/portfolio/document/data_panel/mod.rs

@@ -0,0 +1,7 @@
+mod data_panel_message;
+mod data_panel_message_handler;
+
+#[doc(inline)]
+pub use data_panel_message::*;
+#[doc(inline)]
+pub use data_panel_message_handler::*;

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

@@ -2,6 +2,7 @@ use std::path::PathBuf;
 
 use super::utility_types::misc::{GroupFolderType, SnappingState};
 use crate::messages::input_mapper::utility_types::input_keyboard::Key;
+use crate::messages::portfolio::document::data_panel::DataPanelMessage;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
 use crate::messages::portfolio::document::overlays::utility_types::OverlaysType;
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
@@ -33,6 +34,8 @@ pub enum DocumentMessage {
 	Overlays(OverlaysMessage),
 	#[child]
 	PropertiesPanel(PropertiesPanelMessage),
+	#[child]
+	DataPanel(DataPanelMessage),
 
 	// Messages
 	AlignSelectedLayers {

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

@@ -9,6 +9,7 @@ use crate::application::{GRAPHITE_GIT_COMMIT_HASH, generate_uuid};
 use crate::consts::{ASYMPTOTIC_EFFECT, COLOR_OVERLAY_GRAY, DEFAULT_DOCUMENT_NAME, FILE_SAVE_SUFFIX, SCALE_EFFECT, SCROLLBAR_SPACING, VIEWPORT_ROTATE_SNAP_INTERVAL};
 use crate::messages::input_mapper::utility_types::macros::action_keys;
 use crate::messages::layout::utility_types::widget_prelude::*;
+use crate::messages::portfolio::document::data_panel::{DataPanelMessageContext, DataPanelMessageHandler};
 use crate::messages::portfolio::document::graph_operation::utility_types::TransformIn;
 use crate::messages::portfolio::document::node_graph::NodeGraphMessageContext;
 use crate::messages::portfolio::document::overlays::grid_overlays::{grid_overlay, overlay_options};
@@ -18,6 +19,7 @@ use crate::messages::portfolio::document::utility_types::document_metadata::{Doc
 use crate::messages::portfolio::document::utility_types::misc::{AlignAggregate, AlignAxis, DocumentMode, FlipAxis, PTZ};
 use crate::messages::portfolio::document::utility_types::network_interface::{FlowType, InputConnector, NodeTemplate};
 use crate::messages::portfolio::document::utility_types::nodes::RawBuffer;
+use crate::messages::portfolio::utility_types::PanelType;
 use crate::messages::portfolio::utility_types::PersistentData;
 use crate::messages::prelude::*;
 use crate::messages::tool::common_functionality::graph_modification_utils::{self, get_blend_mode, get_fill, get_opacity};
@@ -49,6 +51,9 @@ pub struct DocumentMessageContext<'a> {
 	pub current_tool: &'a ToolType,
 	pub preferences: &'a PreferencesMessageHandler,
 	pub device_pixel_ratio: f64,
+	pub data_panel_open: bool,
+	pub layers_panel_open: bool,
+	pub properties_panel_open: bool,
 }
 
 #[derive(Clone, Debug, serde::Serialize, serde::Deserialize, ExtractField)]
@@ -63,9 +68,11 @@ pub struct DocumentMessageHandler {
 	#[serde(skip)]
 	pub node_graph_handler: NodeGraphMessageHandler,
 	#[serde(skip)]
-	overlays_message_handler: OverlaysMessageHandler,
+	pub overlays_message_handler: OverlaysMessageHandler,
 	#[serde(skip)]
-	properties_panel_message_handler: PropertiesPanelMessageHandler,
+	pub properties_panel_message_handler: PropertiesPanelMessageHandler,
+	#[serde(skip)]
+	pub data_panel_message_handler: DataPanelMessageHandler,
 
 	// ============================================
 	// Fields that are saved in the document format
@@ -144,6 +151,7 @@ impl Default for DocumentMessageHandler {
 			node_graph_handler: NodeGraphMessageHandler::default(),
 			overlays_message_handler: OverlaysMessageHandler::default(),
 			properties_panel_message_handler: PropertiesPanelMessageHandler::default(),
+			data_panel_message_handler: DataPanelMessageHandler::default(),
 			// ============================================
 			// Fields that are saved in the document format
 			// ============================================
@@ -186,6 +194,9 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 			current_tool,
 			preferences,
 			device_pixel_ratio,
+			data_panel_open,
+			layers_panel_open,
+			properties_panel_open,
 		} = context;
 
 		match message {
@@ -223,9 +234,20 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 					document_name: self.name.as_str(),
 					executor,
 					persistent_data,
+					properties_panel_open,
 				};
 				self.properties_panel_message_handler.process_message(message, responses, context);
 			}
+			DocumentMessage::DataPanel(message) => {
+				self.data_panel_message_handler.process_message(
+					message,
+					responses,
+					DataPanelMessageContext {
+						network_interface: &mut self.network_interface,
+						data_panel_open,
+					},
+				);
+			}
 			DocumentMessage::NodeGraph(message) => {
 				self.node_graph_handler.process_message(
 					message,
@@ -241,6 +263,7 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 						graph_fade_artwork_percentage: self.graph_fade_artwork_percentage,
 						navigation_handler: &self.navigation_handler,
 						preferences,
+						layers_panel_open,
 					},
 				);
 			}
@@ -356,12 +379,15 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 			DocumentMessage::DocumentHistoryBackward => self.undo_with_history(ipp, responses),
 			DocumentMessage::DocumentHistoryForward => self.redo_with_history(ipp, responses),
 			DocumentMessage::DocumentStructureChanged => {
-				self.update_layers_panel_control_bar_widgets(responses);
-				self.update_layers_panel_bottom_bar_widgets(responses);
+				if layers_panel_open {
+					self.network_interface.load_structure();
+					let data_buffer: RawBuffer = self.serialize_root();
 
-				self.network_interface.load_structure();
-				let data_buffer: RawBuffer = self.serialize_root();
-				responses.add(FrontendMessage::UpdateDocumentLayerStructure { data_buffer });
+					self.update_layers_panel_control_bar_widgets(layers_panel_open, responses);
+					self.update_layers_panel_bottom_bar_widgets(layers_panel_open, responses);
+
+					responses.add(FrontendMessage::UpdateDocumentLayerStructure { data_buffer });
+				}
 			}
 			DocumentMessage::DrawArtboardOverlays(overlay_context) => {
 				if !overlay_context.visibility_settings.artboard_name() {
@@ -1128,7 +1154,6 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 				}
 			}
 			DocumentMessage::SetActivePanel { active_panel: panel } => {
-				use crate::messages::portfolio::utility_types::PanelType;
 				match panel {
 					PanelType::Document => {
 						if self.graph_view_overlay_open {
@@ -2549,7 +2574,11 @@ impl DocumentMessageHandler {
 		responses.add(NodeGraphMessage::ForceRunDocumentGraph);
 	}
 
-	pub fn update_layers_panel_control_bar_widgets(&self, responses: &mut VecDeque<Message>) {
+	pub fn update_layers_panel_control_bar_widgets(&self, layers_panel_open: bool, responses: &mut VecDeque<Message>) {
+		if !layers_panel_open {
+			return;
+		}
+
 		// Get an iterator over the selected layers (excluding artboards which don't have an opacity or blend mode).
 		let selected_nodes = self.network_interface.selected_nodes();
 		let selected_layers_except_artboards = selected_nodes.selected_layers_except_artboards(&self.network_interface);
@@ -2707,7 +2736,11 @@ impl DocumentMessageHandler {
 		});
 	}
 
-	pub fn update_layers_panel_bottom_bar_widgets(&self, responses: &mut VecDeque<Message>) {
+	pub fn update_layers_panel_bottom_bar_widgets(&self, layers_panel_open: bool, responses: &mut VecDeque<Message>) {
+		if !layers_panel_open {
+			return;
+		}
+
 		let selected_nodes = self.network_interface.selected_nodes();
 		let mut selected_layers = selected_nodes.selected_layers(self.metadata());
 		let selected_layer = selected_layers.next();

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

@@ -1,6 +1,7 @@
 mod document_message;
 mod document_message_handler;
 
+pub mod data_panel;
 pub mod graph_operation;
 pub mod navigation;
 pub mod node_graph;

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

@@ -42,6 +42,7 @@ pub struct NodeGraphMessageContext<'a> {
 	pub graph_fade_artwork_percentage: f64,
 	pub navigation_handler: &'a NavigationMessageHandler,
 	pub preferences: &'a PreferencesMessageHandler,
+	pub layers_panel_open: bool,
 }
 
 #[derive(Debug, Clone, ExtractField)]
@@ -111,6 +112,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 			graph_fade_artwork_percentage,
 			navigation_handler,
 			preferences,
+			layers_panel_open,
 		} = context;
 
 		match message {
@@ -155,11 +157,13 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 				}
 				responses.add(MenuBarMessage::SendLayout);
 				responses.add(NodeGraphMessage::UpdateLayerPanel);
+				responses.add(PropertiesPanelMessage::Refresh);
 				responses.add(NodeGraphMessage::SendSelectedNodes);
 				responses.add(ArtboardToolMessage::UpdateSelectedArtboard);
 				responses.add(DocumentMessage::DocumentStructureChanged);
 				responses.add(OverlaysMessage::Draw);
 				responses.add(NodeGraphMessage::SendGraph);
+				responses.add(PortfolioMessage::SubmitActiveGraphRender);
 			}
 			NodeGraphMessage::CreateWire { output_connector, input_connector } => {
 				// TODO: Add support for flattening NodeInput::Network exports in flatten_with_fns https://github.com/GraphiteEditor/Graphite/issues/1762
@@ -1215,7 +1219,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 										{
 											return None;
 										}
-										log::debug!("preferences.graph_wire_style: {:?}", preferences.graph_wire_style);
+
 										let (wire, is_stack) = network_interface.vector_wire_from_input(&input, preferences.graph_wire_style, selection_network_path)?;
 
 										let node_bbox = kurbo::Rect::new(node_bbox[0].x, node_bbox[0].y, node_bbox[1].x, node_bbox[1].y).to_path(DEFAULT_ACCURACY);
@@ -1485,7 +1489,6 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 				};
 				selected_nodes.set_selected_nodes(nodes);
 				responses.add(BroadcastEvent::SelectionChanged);
-				responses.add(PropertiesPanelMessage::Refresh);
 			}
 			NodeGraphMessage::SendClickTargets => responses.add(FrontendMessage::UpdateClickTargets {
 				click_targets: Some(network_interface.collect_frontend_click_targets(breadcrumb_network_path)),
@@ -1873,7 +1876,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 			}
 
 			NodeGraphMessage::UpdateLayerPanel => {
-				Self::update_layer_panel(network_interface, selection_network_path, collapsed, responses);
+				Self::update_layer_panel(network_interface, selection_network_path, collapsed, layers_panel_open, responses);
 			}
 			NodeGraphMessage::UpdateEdges => {
 				// Update the import/export UI edges whenever the PTZ changes or the bounding box of all nodes changes
@@ -2329,9 +2332,9 @@ impl NodeGraphMessageHandler {
 							.icon(Some("Node".to_string()))
 							.tooltip("Add an operation to the end of this layer's chain of nodes")
 							.popover_layout({
-								let layer_identifier = LayerNodeIdentifier::new(layer, &context.network_interface);
+								let layer_identifier = LayerNodeIdentifier::new(layer, context.network_interface);
 								let compatible_type = {
-									let graph_layer = graph_modification_utils::NodeGraphLayer::new(layer_identifier, &context.network_interface);
+									let graph_layer = graph_modification_utils::NodeGraphLayer::new(layer_identifier, context.network_interface);
 									let node_type = graph_layer.horizontal_layer_flow().nth(1);
 									if let Some(node_id) = node_type {
 										let (output_type, _) = context.network_interface.output_type(&node_id, 0, &[]);
@@ -2585,7 +2588,11 @@ impl NodeGraphMessageHandler {
 		Some(subgraph_names)
 	}
 
-	fn update_layer_panel(network_interface: &NodeNetworkInterface, selection_network_path: &[NodeId], collapsed: &CollapsedLayers, responses: &mut VecDeque<Message>) {
+	fn update_layer_panel(network_interface: &NodeNetworkInterface, selection_network_path: &[NodeId], collapsed: &CollapsedLayers, layers_panel_open: bool, responses: &mut VecDeque<Message>) {
+		if !layers_panel_open {
+			return;
+		}
+
 		let selected_layers = network_interface
 			.selected_nodes()
 			.selected_layers(network_interface.document_metadata())
@@ -2668,7 +2675,7 @@ impl NodeGraphMessageHandler {
 		}
 	}
 
-	pub fn update_node_graph_hints(&self, responses: &mut VecDeque<Message>) {
+	fn update_node_graph_hints(&self, responses: &mut VecDeque<Message>) {
 		// A wire is in progress and its start and end connectors are set
 		let wiring = self.wire_in_progress_from_connector.is_some();
 

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

@@ -14,6 +14,7 @@ pub struct PropertiesPanelMessageContext<'a> {
 	pub document_name: &'a str,
 	pub executor: &'a mut NodeGraphExecutor,
 	pub persistent_data: &'a PersistentData,
+	pub properties_panel_open: bool,
 }
 
 #[derive(Debug, Clone, Default, ExtractField)]
@@ -28,16 +29,22 @@ impl MessageHandler<PropertiesPanelMessage, PropertiesPanelMessageContext<'_>> f
 			document_name,
 			executor,
 			persistent_data,
+			properties_panel_open,
 		} = context;
 
 		match message {
 			PropertiesPanelMessage::Clear => {
 				responses.add(LayoutMessage::SendLayout {
 					layout: Layout::WidgetLayout(WidgetLayout::new(vec![])),
-					layout_target: LayoutTarget::PropertiesSections,
+					layout_target: LayoutTarget::PropertiesPanel,
 				});
 			}
 			PropertiesPanelMessage::Refresh => {
+				if !properties_panel_open {
+					responses.add(PropertiesPanelMessage::Clear);
+					return;
+				}
+
 				let mut node_properties_context = NodePropertiesContext {
 					persistent_data,
 					responses,
@@ -50,7 +57,7 @@ impl MessageHandler<PropertiesPanelMessage, PropertiesPanelMessageContext<'_>> f
 
 				node_properties_context.responses.add(LayoutMessage::SendLayout {
 					layout: Layout::WidgetLayout(WidgetLayout::new(properties_sections)),
-					layout_target: LayoutTarget::PropertiesSections,
+					layout_target: LayoutTarget::PropertiesPanel,
 				});
 			}
 		}