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

* Improve the table data panel

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

Author: Keavon

Cargo.lock

@@ -47,6 +47,7 @@ web-sys = { workspace = true }
 bytemuck = { workspace = true }
 vello = { workspace = true }
 tracing = { workspace = true }
+base64 = { workspace = true }
 
 # Required dependencies
 spin = "0.9.8"

editor/Cargo.toml

@@ -26,7 +26,6 @@ pub struct DispatcherMessageHandlers {
 	pub portfolio_message_handler: PortfolioMessageHandler,
 	preferences_message_handler: PreferencesMessageHandler,
 	tool_message_handler: ToolMessageHandler,
-	workspace_message_handler: WorkspaceMessageHandler,
 }
 
 impl DispatcherMessageHandlers {
@@ -231,9 +230,6 @@ impl Dispatcher {
 
 					self.message_handlers.tool_message_handler.process_message(message, &mut queue, context);
 				}
-				Message::Workspace(message) => {
-					self.message_handlers.workspace_message_handler.process_message(message, &mut queue, ());
-				}
 				Message::NoOp => {}
 				Message::Batched { messages } => {
 					messages.iter().for_each(|message| self.handle_message(message.to_owned(), false));

editor/src/dispatcher.rs

@@ -38,9 +38,9 @@ impl MessageHandler<DeferMessage, DeferMessageContext<'_>> for DeferMessageHandl
 				for (_, message) in elements.rev() {
 					responses.add_front(message);
 				}
-				for (id, messages) in self.after_graph_run.iter() {
+				for (&document_id, messages) in self.after_graph_run.iter() {
 					if !messages.is_empty() {
-						responses.add(PortfolioMessage::SubmitGraphRender { document_id: *id, ignore_hash: false });
+						responses.add(PortfolioMessage::SubmitGraphRender { document_id, ignore_hash: false });
 					}
 				}
 			}

editor/src/messages/defer/defer_message_handler.rs

@@ -149,11 +149,16 @@ pub enum FrontendMessage {
 	UpdateGraphViewOverlay {
 		open: bool,
 	},
-	UpdateSpreadsheetState {
+	UpdateDataPanelState {
 		open: bool,
-		node: Option<NodeId>,
 	},
-	UpdateSpreadsheetLayout {
+	UpdatePropertiesPanelState {
+		open: bool,
+	},
+	UpdateLayersPanelState {
+		open: bool,
+	},
+	UpdateDataPanelLayout {
 		#[serde(rename = "layoutTarget")]
 		layout_target: LayoutTarget,
 		diff: Vec<WidgetDiff>,
@@ -296,7 +301,7 @@ pub enum FrontendMessage {
 		#[serde(rename = "openDocuments")]
 		open_documents: Vec<FrontendDocumentDetails>,
 	},
-	UpdatePropertyPanelSectionsLayout {
+	UpdatePropertiesPanelLayout {
 		#[serde(rename = "layoutTarget")]
 		layout_target: LayoutTarget,
 		diff: Vec<WidgetDiff>,

editor/src/messages/frontend/frontend_message.rs

@@ -427,6 +427,7 @@ pub fn input_mappings() -> Mapping {
 		entry!(KeyDown(KeyX); modifiers=[Accel], action_dispatch=PortfolioMessage::Cut { clipboard: Clipboard::Device }),
 		entry!(KeyDown(KeyC); modifiers=[Accel], action_dispatch=PortfolioMessage::Copy { clipboard: Clipboard::Device }),
 		entry!(KeyDown(KeyR); modifiers=[Alt], action_dispatch=PortfolioMessage::ToggleRulers),
+		entry!(KeyDown(KeyD); modifiers=[Alt], action_dispatch=PortfolioMessage::ToggleDataPanelOpen),
 		//
 		// FrontendMessage
 		entry!(KeyDown(KeyV); modifiers=[Accel], action_dispatch=FrontendMessage::TriggerPaste),

editor/src/messages/input_mapper/input_mappings.rs

@@ -308,6 +308,7 @@ impl LayoutMessageHandler {
 
 				responses.add(callback_message);
 			}
+			Widget::ImageLabel(_) => {}
 			Widget::IconLabel(_) => {}
 			Widget::InvisibleStandinInput(invisible) => {
 				let callback_message = match action {
@@ -481,18 +482,18 @@ impl LayoutMessageHandler {
 		diff.iter_mut().for_each(|diff| diff.new_value.apply_keyboard_shortcut(action_input_mapping));
 
 		let message = match layout_target {
+			LayoutTarget::MenuBar => unreachable!("Menu bar is not diffed"),
 			LayoutTarget::DialogButtons => FrontendMessage::UpdateDialogButtons { layout_target, diff },
 			LayoutTarget::DialogColumn1 => FrontendMessage::UpdateDialogColumn1 { layout_target, diff },
 			LayoutTarget::DialogColumn2 => FrontendMessage::UpdateDialogColumn2 { layout_target, diff },
 			LayoutTarget::DocumentBar => FrontendMessage::UpdateDocumentBarLayout { layout_target, diff },
 			LayoutTarget::DocumentMode => FrontendMessage::UpdateDocumentModeLayout { layout_target, diff },
+			LayoutTarget::DataPanel => FrontendMessage::UpdateDataPanelLayout { layout_target, diff },
 			LayoutTarget::LayersPanelControlLeftBar => FrontendMessage::UpdateLayersPanelControlBarLeftLayout { layout_target, diff },
 			LayoutTarget::LayersPanelControlRightBar => FrontendMessage::UpdateLayersPanelControlBarRightLayout { layout_target, diff },
 			LayoutTarget::LayersPanelBottomBar => FrontendMessage::UpdateLayersPanelBottomBarLayout { layout_target, diff },
-			LayoutTarget::MenuBar => unreachable!("Menu bar is not diffed"),
+			LayoutTarget::PropertiesPanel => FrontendMessage::UpdatePropertiesPanelLayout { layout_target, diff },
 			LayoutTarget::NodeGraphControlBar => FrontendMessage::UpdateNodeGraphControlBarLayout { layout_target, diff },
-			LayoutTarget::PropertiesSections => FrontendMessage::UpdatePropertyPanelSectionsLayout { layout_target, diff },
-			LayoutTarget::Spreadsheet => FrontendMessage::UpdateSpreadsheetLayout { layout_target, diff },
 			LayoutTarget::ToolOptions => FrontendMessage::UpdateToolOptionsLayout { layout_target, diff },
 			LayoutTarget::ToolShelf => FrontendMessage::UpdateToolShelfLayout { layout_target, diff },
 			LayoutTarget::WorkingColors => FrontendMessage::UpdateWorkingColorsLayout { layout_target, diff },

editor/src/messages/layout/layout_message_handler.rs

@@ -42,9 +42,9 @@ pub enum LayoutTarget {
 	/// Bar at the top of the node graph containing the location and the "Preview" and "Hide" buttons.
 	NodeGraphControlBar,
 	/// The body of the Properties panel containing many collapsable sections.
-	PropertiesSections,
+	PropertiesPanel,
 	/// The spredsheet panel allows for the visualisation of data in the graph.
-	Spreadsheet,
+	DataPanel,
 	/// The bar directly above the canvas, left-aligned and to the right of the document mode dropdown.
 	ToolOptions,
 	/// The vertical buttons for all of the tools on the left of the canvas.
@@ -369,6 +369,7 @@ impl LayoutGroup {
 				Widget::IconButton(x) => &mut x.tooltip,
 				Widget::IconLabel(x) => &mut x.tooltip,
 				Widget::ImageButton(x) => &mut x.tooltip,
+				Widget::ImageLabel(x) => &mut x.tooltip,
 				Widget::NumberInput(x) => &mut x.tooltip,
 				Widget::ParameterExposeButton(x) => &mut x.tooltip,
 				Widget::PopoverButton(x) => &mut x.tooltip,
@@ -546,6 +547,7 @@ pub enum Widget {
 	IconButton(IconButton),
 	IconLabel(IconLabel),
 	ImageButton(ImageButton),
+	ImageLabel(ImageLabel),
 	InvisibleStandinInput(InvisibleStandinInput),
 	NodeCatalog(NodeCatalog),
 	NumberInput(NumberInput),
@@ -622,6 +624,7 @@ impl DiffUpdate {
 				Widget::TextButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 				Widget::ImageButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 				Widget::IconLabel(_)
+				| Widget::ImageLabel(_)
 				| Widget::CurveInput(_)
 				| Widget::InvisibleStandinInput(_)
 				| Widget::NodeCatalog(_)

editor/src/messages/layout/utility_types/layout_widget.rs

@@ -168,8 +168,6 @@ pub struct ColorInput {
 	#[widget_builder(constructor)]
 	pub value: FillChoice,
 
-	pub disabled: bool,
-
 	// TODO: Implement
 	// #[serde(rename = "allowTransparency")]
 	// #[derivative(Default(value = "false"))]
@@ -179,9 +177,11 @@ pub struct ColorInput {
 	#[derivative(Default(value = "true"))]
 	pub allow_none: bool,
 
-	// TODO: Implement
-	// pub disabled: bool,
-	//
+	pub disabled: bool,
+
+	#[serde(rename = "menuDirection")]
+	pub menu_direction: Option<MenuDirection>,
+
 	pub tooltip: String,
 
 	#[serde(skip)]

editor/src/messages/layout/utility_types/widgets/button_widgets.rs

@@ -416,6 +416,9 @@ pub struct TextInput {
 	#[serde(rename = "minWidth")]
 	pub min_width: u32,
 
+	#[serde(rename = "maxWidth")]
+	pub max_width: u32,
+
 	// Callbacks
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]