diff --git a/packages/editor/src/components/viewer-overlay.tsx b/packages/editor/src/components/viewer-overlay.tsx index 28f5f876..d89482fb 100644 --- a/packages/editor/src/components/viewer-overlay.tsx +++ b/packages/editor/src/components/viewer-overlay.tsx @@ -26,8 +26,10 @@ import { ChevronRight, Diamond, Layers, + Palette, PenLine, Sparkles, + Square, } from 'lucide-react' import Link from 'next/link' import { useShallow } from 'zustand/react/shallow' @@ -37,6 +39,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, + DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/primitives/dropdown-menu' import { TooltipProvider } from './ui/primitives/tooltip' @@ -87,8 +90,14 @@ const SHADING_OPTIONS = [ { id: 'rendered', name: 'Rendered', detail: 'Full ambient occlusion', icon: Sparkles }, ] as const +const TEXTURE_OPTIONS = [ + { id: true, name: 'Colored', detail: 'Show materials, textures & colours', icon: Palette }, + { id: false, name: 'Monochrome', detail: 'Flat clay surfaces by role', icon: Square }, +] as const + function RenderModeMenu() { const shading = useViewer((s) => s.shading) + const textures = useViewer((s) => s.textures) const active = SHADING_OPTIONS.find((o) => o.id === shading) ?? SHADING_OPTIONS[0] const ActiveIcon = active.icon return ( @@ -121,6 +130,23 @@ function RenderModeMenu() { ) })} + + {TEXTURE_OPTIONS.map((option) => { + const OptionIcon = option.icon + return ( + useViewer.getState().setTextures(option.id)} + > + +
+ {option.name} + {option.detail} +
+ {textures === option.id ? : null} +
+ ) + })} )