feat: Layout dos botoes 3D - botao de ortogonalidade ao lado do cubo e expansao da luminosidade
This commit is contained in:
@@ -6,7 +6,7 @@ import { ViewCube } from './ViewCube';
|
||||
import { Viewer3DSidebar } from './Viewer3DSidebar';
|
||||
import { PieceHoverTooltip } from './PieceHoverTooltip';
|
||||
import { SelectionListModal, SelectedPieceItem } from './SelectionListModal';
|
||||
import { Trash2, FileSpreadsheet, RotateCcw, RotateCw, Lock, Unlock, Focus, SunMedium } from 'lucide-react';
|
||||
import { Trash2, FileSpreadsheet, RotateCcw, RotateCw, Lock, Unlock, Focus, SunMedium, Compass } from 'lucide-react';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { useToast } from '@/components/ui/use-toast';
|
||||
|
||||
@@ -1167,9 +1167,45 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
|
||||
onBrightnessChange={setBrightness}
|
||||
/>
|
||||
|
||||
{/* Top Right: ViewCube + Painel de Ações de Seleção de Peças */}
|
||||
{/* Top Right: ViewCube + Controles Rápidos de Câmera + Painel de Ações de Seleção de Peças */}
|
||||
<div className="absolute top-4 right-4 z-20 flex flex-col items-end gap-2.5 pointer-events-auto">
|
||||
<ViewCube onSelectView={handleViewCubeSelect} mainCameraRef={activeCameraRef} />
|
||||
<div className="flex items-start gap-2">
|
||||
{/* Botões Rápidos de Navegação ao lado do Cubo (Ortogonalidade e Enquadrar) */}
|
||||
<div className="flex flex-col gap-1.5 items-center justify-center pt-0.5">
|
||||
{/* Botão Alternar Vista Ortogonal / Perspectiva */}
|
||||
<button
|
||||
onClick={handleToggleCamera}
|
||||
className={`flex items-center justify-center p-2 rounded-2xl backdrop-blur-md border transition-all duration-150 active:scale-95 shadow-lg ${
|
||||
isOrthographic
|
||||
? 'bg-emerald-500 text-white border-emerald-400 shadow-emerald-500/30 dark:bg-emerald-600 dark:border-emerald-500'
|
||||
: 'bg-white/95 dark:bg-slate-900/95 text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700 hover:text-emerald-600 dark:hover:text-emerald-400 hover:bg-slate-100 dark:hover:bg-slate-800 shadow-slate-300/30 dark:shadow-slate-950/50'
|
||||
}`}
|
||||
title={
|
||||
isOrthographic
|
||||
? 'Câmera Ortogonal (Paralela Técnica) Ativa. Clique para mudar para Perspectiva.'
|
||||
: 'Câmera Perspectiva (3D Cônica) Ativa. Clique para mudar para Ortogonal.'
|
||||
}
|
||||
>
|
||||
<Compass className={`w-4 h-4 ${isOrthographic ? 'text-white' : 'text-emerald-600 dark:text-emerald-400'}`} />
|
||||
</button>
|
||||
|
||||
{/* Botão Enquadrar / Centralizar Estrutura (Fit to Screen) */}
|
||||
<button
|
||||
onClick={() => fitModelToView(modelGroupRef.current)}
|
||||
disabled={!modelData}
|
||||
className={`flex items-center justify-center p-2 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 transition-all duration-150 active:scale-95 ${
|
||||
modelData
|
||||
? 'text-slate-700 hover:text-cyan-600 dark:text-slate-200 dark:hover:text-cyan-400 hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer'
|
||||
: 'text-slate-400 dark:text-slate-600 opacity-40 cursor-not-allowed'
|
||||
}`}
|
||||
title="Centralizar e Enquadrar Estrutura na Janela (Fit to Screen)"
|
||||
>
|
||||
<Focus className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ViewCube onSelectView={handleViewCubeSelect} mainCameraRef={activeCameraRef} />
|
||||
</div>
|
||||
|
||||
{/* Card de Controle de Seleção Flutuante Harmonizado Abaixo do Cubo */}
|
||||
<div
|
||||
@@ -1273,48 +1309,32 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Barra de Ferramentas: Luminosidade e Enquadrar (Abaixo de Girar 90°, alinhado com o cubo) */}
|
||||
<div className="flex items-center gap-1.5 pointer-events-auto">
|
||||
{/* Card de Luminosidade */}
|
||||
<div
|
||||
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50"
|
||||
title="Ajuste de Luminosidade da Estrutura (arraste para clarear ou suavizar sombras das peças)"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBrightness(100)}
|
||||
title="Clique para resetar luminosidade em 100%"
|
||||
className="hover:scale-110 active:scale-95 transition-transform"
|
||||
>
|
||||
<SunMedium className="w-3.5 h-3.5 text-amber-500 shrink-0" />
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
min="40"
|
||||
max="220"
|
||||
step="5"
|
||||
value={brightness}
|
||||
onChange={(e) => setBrightness(Number(e.target.value))}
|
||||
className="w-16 sm:w-20 h-1.5 bg-slate-300 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500"
|
||||
/>
|
||||
<span className="text-[10px] font-mono font-bold text-slate-600 dark:text-slate-300 min-w-[28px] text-right">
|
||||
{brightness}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Botão Enquadrar / Centralizar Estrutura (Fit to Screen) */}
|
||||
{/* Card de Luminosidade Expandido (Alinhado com a largura dos cards acima) */}
|
||||
<div
|
||||
className="flex items-center gap-2 px-2.5 py-2 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 pointer-events-auto"
|
||||
style={{ width: '100%', minWidth: '145px' }}
|
||||
title="Ajuste de Luminosidade da Estrutura (arraste para clarear ou suavizar sombras das peças)"
|
||||
>
|
||||
<button
|
||||
onClick={() => fitModelToView(modelGroupRef.current)}
|
||||
disabled={!modelData}
|
||||
className={`flex items-center justify-center p-2 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 transition-all duration-150 active:scale-95 ${
|
||||
modelData
|
||||
? 'text-slate-700 hover:text-cyan-600 dark:text-slate-200 dark:hover:text-cyan-400 hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer'
|
||||
: 'text-slate-400 dark:text-slate-600 opacity-40 cursor-not-allowed'
|
||||
}`}
|
||||
title="Centralizar e Enquadrar Estrutura na Janela (Fit to Screen)"
|
||||
type="button"
|
||||
onClick={() => setBrightness(100)}
|
||||
title="Clique para resetar luminosidade em 100%"
|
||||
className="hover:scale-110 active:scale-95 transition-transform shrink-0 cursor-pointer"
|
||||
>
|
||||
<Focus className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
|
||||
<SunMedium className="w-3.5 h-3.5 text-amber-500" />
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
min="40"
|
||||
max="220"
|
||||
step="5"
|
||||
value={brightness}
|
||||
onChange={(e) => setBrightness(Number(e.target.value))}
|
||||
className="flex-1 h-1.5 bg-slate-200 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500"
|
||||
/>
|
||||
<span className="text-[10px] font-mono font-bold text-slate-600 dark:text-slate-300 min-w-[30px] text-right shrink-0">
|
||||
{brightness}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user