admtracksteel/SteelXR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2026-02-27 02:04:21 +00:00
parent 9dd45c96de
commit c0f153df1c
3 changed files with 120 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ViewerControls.tsx
+73 -3
View File
@@ -1,12 +1,30 @@
import { Eye, Grid3X3, Ruler, Trash2, Camera } from 'lucide-react';
import { Eye, Grid3X3, Ruler, Trash2, Camera, LayoutGrid, Palette } from 'lucide-react';
import { Slider } from '@/components/ui/slider';
import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { useModelStore } from '@/stores/useModelStore';
import { useCallback } from 'react';
import { toast } from 'sonner';
const WIRE_COLORS = [
{ label: 'Cinza', value: '#8899aa' },
{ label: 'Vermelho', value: '#ef4444' },
{ label: 'Verde', value: '#22c55e' },
{ label: 'Azul', value: '#3b82f6' },
{ label: 'Amarelo', value: '#eab308' },
{ label: 'Laranja', value: '#f97316' },
{ label: 'Branco', value: '#e2e8f0' },
];
export function ViewerControls() {
const { opacity, setOpacity, renderMode, setRenderMode, measureMode, setMeasureMode, measurements, clearMeasurements, measurePoints, addScreenshot } = useModelStore();
const {
opacity, setOpacity, renderMode, setRenderMode,
measureMode, setMeasureMode, measurements, clearMeasurements,
measurePoints, addScreenshot,
showGrid, setShowGrid,
wireframeColor, setWireframeColor,
wireframeThickness, setWireframeThickness,
} = useModelStore();
const handleScreenshot = useCallback(() => {
const canvas = document.querySelector('canvas');
@@ -20,7 +38,7 @@ export function ViewerControls() {
}, [addScreenshot]);
return (
<div className="absolute bottom-4 left-4 z-10 flex items-end gap-3">
<div className="absolute bottom-4 left-4 z-10 flex items-end gap-3 flex-wrap">
{/* Opacity slider */}
<div className="rounded-lg border bg-card/90 backdrop-blur-sm p-3 shadow-lg w-56">
<div className="flex items-center justify-between mb-2">
@@ -39,6 +57,17 @@ export function ViewerControls() {
/>
</div>
{/* Grid toggle */}
<Button
variant={showGrid ? 'default' : 'outline'}
size="sm"
className="gap-2 h-9"
onClick={() => setShowGrid(!showGrid)}
>
<LayoutGrid className="h-3.5 w-3.5" />
<span className="font-mono text-xs">Grid</span>
</Button>
{/* Render mode toggle */}
<Button
variant={renderMode === 'wireframe' ? 'default' : 'outline'}
@@ -52,6 +81,47 @@ export function ViewerControls() {
</span>
</Button>
{/* Wireframe settings popover */}
{renderMode === 'wireframe' && (
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" size="sm" className="gap-2 h-9">
<Palette className="h-3.5 w-3.5" />
<div className="h-3 w-3 rounded-full border border-muted-foreground/30" style={{ backgroundColor: wireframeColor }} />
</Button>
</PopoverTrigger>
<PopoverContent className="w-56 space-y-3" side="top" align="start">
<div>
<span className="font-mono text-xs text-muted-foreground">Cor do Wireframe</span>
<div className="mt-2 flex flex-wrap gap-2">
{WIRE_COLORS.map((c) => (
<button
key={c.value}
className={`h-6 w-6 rounded-full border-2 transition-all ${wireframeColor === c.value ? 'border-primary scale-110' : 'border-muted-foreground/30'}`}
style={{ backgroundColor: c.value }}
onClick={() => setWireframeColor(c.value)}
title={c.label}
/>
))}
</div>
</div>
<div>
<div className="flex items-center justify-between mb-1">
<span className="font-mono text-xs text-muted-foreground">Espessura</span>
<span className="font-mono text-xs text-foreground">{wireframeThickness.toFixed(1)}</span>
</div>
<Slider
value={[wireframeThickness]}
min={0.5}
max={5}
step={0.5}
onValueChange={([v]) => setWireframeThickness(v)}
/>
</div>
</PopoverContent>
</Popover>
)}
{/* Measure tool */}
<div className="flex items-end gap-1.5">
<Button