diff --git a/editor/src/messages/layout/utility_types/layout_widget.rs b/editor/src/messages/layout/utility_types/layout_widget.rs index 086f3d1817..bb565df6af 100644 --- a/editor/src/messages/layout/utility_types/layout_widget.rs +++ b/editor/src/messages/layout/utility_types/layout_widget.rs @@ -241,6 +241,12 @@ impl<'a> Iterator for WidgetIter<'a> { fn next(&mut self) -> Option { 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 { 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); }; diff --git a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs index fcdd7bb3f9..5931bb39b9 100644 --- a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs +++ b/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, diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs index c40a63cee6..c632a12cb4 100644 --- a/editor/src/messages/portfolio/document/document_message_handler.rs +++ b/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 { diff --git a/frontend/src/components/widgets/WidgetRow.svelte b/frontend/src/components/widgets/WidgetRow.svelte index e2820a54eb..9fb0613699 100644 --- a/frontend/src/components/widgets/WidgetRow.svelte +++ b/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.header} - {popoverButton.text} + {#if popoverButton.optionsWidget} + + {:else} + {popoverButton.text} + {/if} {/if} {@const radioInput = narrowWidgetProps(component.props, "RadioInput")} diff --git a/frontend/src/components/widgets/buttons/PopoverButton.svelte b/frontend/src/components/widgets/buttons/PopoverButton.svelte index 3d5179b5cb..13a3ea16c0 100644 --- a/frontend/src/components/widgets/buttons/PopoverButton.svelte +++ b/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 @@ - {#if optionsWidget === undefined} - onClick()} icon={icon || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner /> - {:else} - onClick()} icon={icon || "DropdownArrow"} size={16} {optionsWidget} {layoutTarget} data-floating-menu-spawner /> - {/if} + onClick()} icon={icon || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner /> (open = detail)} type="Popover" direction="Bottom"> diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts index 5d2132643d..47c4524942 100644 --- a/frontend/src/wasm-communication/messages.ts +++ b/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(); - layoutTarget: unknown = undefined; + optionsWidget: LayoutGroup[] | 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 });