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

feat: Reposicionamento vertical dos controles de luminosidade e enquadrar abaixo do card de giro no Visualizador 3D

Browse Source
This commit is contained in:
admbrainsteel
2026-10-08 12:14:48 -03:00
parent 29a4800ff5
commit 885a076122
1 changed files with 48 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/viewer3d/ModelViewer3D.tsx
+48 -48
View File
@@ -1225,54 +1225,11 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
</button>
</div>
{/* Barra de Ferramentas Flutuante Rápida: Luminosidade + Enquadrar + Rotação 90° & Cadeado */}
<div className="flex items-center gap-2 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) */}
<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>
{/* Card de Ajuste e Travamento de Rotação 3D (Tombamento 90° + Cadeado Memorizável) */}
<div
className="flex items-center gap-1.5 p-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 pointer-events-auto"
style={{ minWidth: '130px' }}
>
{/* Card de Ajuste e Travamento de Rotação 3D (Tombamento 90° + Cadeado Memorizável) */}
<div
className="flex items-center gap-1.5 p-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 pointer-events-auto"
style={{ minWidth: '130px' }}
>
{/* Botão Rotacionar / Tombar 90° */}
<button
onClick={handleRotate90X}
@@ -1314,7 +1271,50 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
<Unlock className="w-4 h-4 text-amber-600 dark:text-amber-400" />
)}
</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) */}
<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>
</div>