Fix popover layout

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

@@ -241,6 +241,12 @@ impl<'a> Iterator for WidgetIter<'a> {
 	fn next(&mut self) -> Option<Self::Item> {
 		if let Some(item) = self.current_slice.and_then(|slice| slice.first()) {
 			self.current_slice = Some(&self.current_slice.unwrap()[1..]);
+
+			if let WidgetHolder { widget: Widget::PopoverButton(p), .. } = item {
+				self.stack.extend(p.options_widget.iter());
+				return self.next();
+			}
+
 			return Some(item);
 		}
 
@@ -276,6 +282,12 @@ impl<'a> Iterator for WidgetIterMut<'a> {
 	fn next(&mut self) -> Option<Self::Item> {
 		if let Some((first, rest)) = self.current_slice.take().and_then(|slice| slice.split_first_mut()) {
 			self.current_slice = Some(rest);
+
+			if let WidgetHolder { widget: Widget::PopoverButton(p), .. } = first {
+				self.stack.extend(p.options_widget.iter_mut());
+				return self.next();
+			}
+
 			return Some(first);
 		};
 

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

@@ -1,5 +1,6 @@
 use crate::messages::input_mapper::utility_types::misc::ActionKeys;
 use crate::messages::layout::utility_types::layout_widget::WidgetCallback;
+use crate::messages::layout::utility_types::widget_prelude::SubLayout;
 use crate::messages::layout::utility_types::widget_prelude::WidgetLayout;
 use crate::messages::portfolio::document::node_graph::FrontendGraphDataType;
 
@@ -49,7 +50,8 @@ pub struct PopoverButton {
 
 	pub tooltip: String,
 
-	pub options_widget: WidgetLayout,
+	#[serde(rename = "optionsWidget")]
+	pub options_widget: SubLayout,
 
 	#[serde(skip)]
 	pub tooltip_shortcut: Option<ActionKeys>,

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

@@ -1565,15 +1565,23 @@ impl DocumentMessageHandler {
 			WidgetHolder::new(Widget::PopoverButton(PopoverButton {
 				header: "Snapping".into(),
 				text: "Select the vector to snap to.".into(), // TODO: check whether this is an apt description
-				options_widget: WidgetLayout::new(vec![LayoutGroup::Row {
+				options_widget: vec![LayoutGroup::Row {
 					widgets: vec![WidgetHolder::new(Widget::DropdownInput(DropdownInput {
 						entries: vec![vec![
 							DropdownEntryData {
 								label: SnappingOptions::BoundingBoxes.to_string(),
+								on_update: WidgetCallback::new(|_| {
+									info!("Bouding boxes");
+									Message::NoOp
+								}),
 								..DropdownEntryData::default()
 							},
 							DropdownEntryData {
 								label: SnappingOptions::Nodes.to_string(),
+								on_update: WidgetCallback::new(|_| {
+									info!("Nodes");
+									Message::NoOp
+								}),
 								..DropdownEntryData::default()
 							},
 						]],
@@ -1582,7 +1590,7 @@ impl DocumentMessageHandler {
 						interactive: true,
 						..Default::default()
 					}))],
-				}]),
+				}],
 				..Default::default()
 			})),
 			WidgetHolder::new(Widget::Separator(Separator {

frontend/src/components/widgets/WidgetRow.svelte

@@ -5,6 +5,7 @@
 	import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@graphite/wasm-communication/messages";
 
 	import PivotAssist from "@graphite/components/widgets/assists/PivotAssist.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 	import BreadcrumbTrailButtons from "@graphite/components/widgets/buttons/BreadcrumbTrailButtons.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
 	import ParameterExposeButton from "@graphite/components/widgets/buttons/ParameterExposeButton.svelte";
@@ -138,9 +139,13 @@
 		{/if}
 		{@const popoverButton = narrowWidgetProps(component.props, "PopoverButton")}
 		{#if popoverButton}
-			<PopoverButton {...exclude(popoverButton, ["header", "text", "optionsWidget", "layoutTarget"])}>
+			<PopoverButton {...exclude(popoverButton, ["header", "text", "optionsWidget"])}>
 				<TextLabel bold={true}>{popoverButton.header}</TextLabel>
-				<TextLabel multiline={true}>{popoverButton.text}</TextLabel>
+                {#if popoverButton.optionsWidget}
+					<WidgetLayout layout={ { layout: popoverButton.optionsWidget, layoutTarget: layoutTarget} } />
+				{:else}
+					<TextLabel multiline={true}>{popoverButton.text}</TextLabel>
+				{/if}
 			</PopoverButton>
 		{/if}
 		{@const radioInput = narrowWidgetProps(component.props, "RadioInput")}

frontend/src/components/widgets/buttons/PopoverButton.svelte

@@ -3,13 +3,10 @@
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
-	import { WidgetLayout } from "~src/wasm-communication/messages";
 
 	export let icon: IconName = "DropdownArrow";
 	export let tooltip: string | undefined = undefined;
 	export let disabled = false;
-	export let optionsWidget: WidgetLayout;
-	export let layoutTarget: unknown;
 
 	// Callbacks
 	export let action: (() => void) | undefined = undefined;
@@ -23,11 +20,7 @@
 </script>
 
 <LayoutRow class="popover-button">
-	{#if optionsWidget === undefined}
+	<IconButton classes={{ open }} {disabled} action={() => onClick()} icon={icon || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
-		<IconButton classes={{ open }} {disabled} action={() => onClick()} icon={icon || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
-	{:else}
-		<IconButton classes={{ open }} {disabled} action={() => onClick()} icon={icon || "DropdownArrow"} size={16} {optionsWidget} {layoutTarget} data-floating-menu-spawner />
-	{/if}
 
 	<FloatingMenu {open} on:open={({ detail }) => (open = detail)} type="Popover" direction="Bottom">
 		<slot />

frontend/src/wasm-communication/messages.ts

@@ -932,8 +932,7 @@ export class PopoverButton extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 
-    optionsWidget: WidgetLayout = defaultWidgetLayout();
+    optionsWidget: LayoutGroup[] | undefined;
-    layoutTarget: unknown = undefined;
 }
 
 export type RadioEntryData = {
@@ -1129,6 +1128,11 @@ function hoistWidgetHolder(widgetHolder: any): Widget {
 	const props = widgetHolder.widget[kind];
 	props.kind = kind;
 
+	
+	if (kind === "PopoverButton") {
+		props.optionsWidget = props.optionsWidget.map(createLayoutGroup);
+	}
+
 	const { widgetId } = widgetHolder;
 
 	return plainToClass(Widget, { props, widgetId });