diff --git a/frontend/src/components/graph/NodeMenubar.tsx b/frontend/src/components/graph/NodeMenubar.tsx index 99626cc..20d4ba5 100644 --- a/frontend/src/components/graph/NodeMenubar.tsx +++ b/frontend/src/components/graph/NodeMenubar.tsx @@ -30,11 +30,13 @@ type Props = { insertTagsLabel?: string /** Extra content in Node menu (e.g. Export submenu for render nodes), before the separator */ nodeMenuExtraContent?: React.ReactNode + /** When set, renders a top-level "Output" menu with this content (e.g. render node: preview/raw, viewport, export) */ + outputMenuContent?: React.ReactNode /** When set, renders a top-level "Data" menu with this content (e.g. data nodes) */ dataMenuContent?: React.ReactNode } -export function NodeMenubar({ nodeId, nodeType, editInputsContent, inputsMenuContent, insertTagsContent, insertMenuLabel = 'Insert', insertContentDirect, insertTagsLabel = 'Tags', nodeMenuExtraContent, dataMenuContent }: Props) { +export function NodeMenubar({ nodeId, nodeType, editInputsContent, inputsMenuContent, insertTagsContent, insertMenuLabel = 'Insert', insertContentDirect, insertTagsLabel = 'Tags', nodeMenuExtraContent, outputMenuContent, dataMenuContent }: Props) { const ctx = useContext(FlowContext) const nodes = ctx?.nodes ?? [] const setNodes = ctx?.setNodes @@ -73,6 +75,16 @@ export function NodeMenubar({ nodeId, nodeType, editInputsContent, inputsMenuCon + {outputMenuContent != null && ( + + + Output + + + {outputMenuContent} + + + )} {dataMenuContent != null && ( diff --git a/frontend/src/components/nodes/render/RenderingNode.tsx b/frontend/src/components/nodes/render/RenderingNode.tsx index 62cba35..9104e6b 100644 --- a/frontend/src/components/nodes/render/RenderingNode.tsx +++ b/frontend/src/components/nodes/render/RenderingNode.tsx @@ -27,7 +27,7 @@ import { NodeFooterEdgeIndicators } from '@/components/graph/NodeFooterEdgeIndic import { NodeHeaderTitle } from '@/components/graph/NodeHeaderTitle' import { NodeMenubar } from '@/components/graph/NodeMenubar' import { NodeStatusIndicator } from '@/components/graph/NodeStatusIndicator' -import { MenubarItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger } from '@/components/ui/menubar' +import { MenubarCheckboxItem, MenubarItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger } from '@/components/ui/menubar' import { Sparkles, ZoomIn, ZoomOut, RotateCcw, RotateCw, Copy, Play, ChevronDown } from 'lucide-react' import { InputHandle } from '@/components/graph/NodeHandles' import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch' @@ -41,7 +41,6 @@ import { DropdownMenuLabel, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' -import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group' import { useTheme } from '@/lib/themeContext' import { toast } from 'sonner' @@ -541,40 +540,6 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) { - { - if (v === 'preview' || v === 'raw') setViewMode(v) - }} - aria-label="View mode" - variant="outline" - size="sm" - className="gap-0 rounded-md p-0.5 [&>button]:rounded-none [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:not(:first-child)]:border-l-0" - > - { - e.stopPropagation() - setViewMode('preview') - }} - > - Preview - - { - e.stopPropagation() - setViewMode('raw') - }} - > - Raw - - ) : undefined } @@ -585,11 +550,26 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) { + checked && setViewMode('preview')} + > + Preview + + checked && setViewMode('raw')} + > + Raw + + {outputType === 'image' && ( - Viewport + Viewport size
@@ -631,10 +611,10 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) { )} + - - Export / Copy + Export