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

fix: Alinhamento vertical dos controles 3D - largura uniforme e alinhamento de bordas

Browse Source
This commit is contained in:
admbrainsteel
2026-10-08 14:19:48 -03:00
parent a8275bda8c
commit 9cbc9b383e
1 changed files with 21 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/viewer3d/ModelViewer3D.tsx
+21 -25
View File
@@ -1168,14 +1168,15 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
/>
{/* 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">
<div className="flex items-start gap-2">
<div className="absolute top-4 right-4 z-20 flex flex-col items-stretch gap-2 pointer-events-auto w-[140px]">
{/* Bloco Superior: Botões de Navegação + ViewCube perfeitamente alinhados */}
<div className="w-full flex items-start justify-between">
{/* 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 ${
className={`w-9 h-9 flex items-center justify-center 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'
@@ -1193,7 +1194,7 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
<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 ${
className={`w-9 h-9 flex items-center justify-center 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'
@@ -1209,12 +1210,11 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
{/* Card de Controle de Seleção Flutuante Harmonizado Abaixo do Cubo */}
<div
className={`flex flex-col items-stretch gap-1.5 p-2 rounded-2xl backdrop-blur-md border transition-all duration-200 shadow-lg ${
className={`w-full flex flex-col items-stretch gap-1.5 p-2 rounded-2xl backdrop-blur-md border transition-all duration-200 shadow-lg ${
selectedCount > 0
? 'bg-white/95 dark:bg-slate-900/95 border-slate-300 dark:border-slate-700 shadow-slate-300/40 dark:shadow-slate-950/60 ring-1 ring-blue-500/20'
: 'bg-white/80 dark:bg-slate-900/70 border-slate-200 dark:border-slate-800/80 opacity-75 hover:opacity-100'
}`}
style={{ minWidth: '130px' }}
>
{/* Badge Indicador de Seleção Ativa Sóbrio */}
{selectedCount > 0 && (
@@ -1226,11 +1226,11 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
</div>
)}
{/* Botão Gerar Lista da Seleção (Azul Escuro no claro / Azul Elegante no escuro) */}
{/* Botão Gerar Lista da Seleção */}
<button
onClick={() => setIsSelectionModalOpen(true)}
disabled={selectedCount === 0}
className={`flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-xl text-[11px] font-bold transition-all duration-200 cursor-pointer ${
className={`w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-xl text-[11px] font-bold transition-all duration-200 cursor-pointer ${
selectedCount > 0
? 'bg-blue-950 hover:bg-blue-900 text-white shadow-sm dark:bg-blue-600 dark:hover:bg-blue-500 scale-[1.02] active:scale-[0.98]'
: 'bg-slate-100 dark:bg-slate-800/50 text-slate-400 dark:text-slate-500 border border-slate-200 dark:border-slate-800 cursor-not-allowed opacity-50'
@@ -1245,11 +1245,11 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
<span className="whitespace-nowrap">Gerar lista</span>
</button>
{/* Botão Limpar Seleção Harmonizado */}
{/* Botão Limpar Seleção */}
<button
onClick={handleClearSelection}
disabled={selectedCount === 0}
className={`flex items-center justify-center gap-1.5 px-2.5 py-1 rounded-xl text-[10px] font-semibold transition-all duration-200 cursor-pointer ${
className={`w-full flex items-center justify-center gap-1.5 px-2 py-1 rounded-xl text-[10px] font-semibold transition-all duration-200 cursor-pointer ${
selectedCount > 0
? 'text-slate-600 hover:text-rose-600 hover:bg-rose-50 border border-slate-200 dark:border-slate-700 dark:text-slate-400 dark:hover:text-rose-300 dark:hover:bg-rose-950/30 active:scale-[0.98]'
: 'text-slate-400 dark:text-slate-600 border border-transparent cursor-not-allowed opacity-40'
@@ -1262,24 +1262,21 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
</div>
{/* 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' }}
>
<div className="w-full 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">
{/* Botão Rotacionar / Tombar 90° */}
<button
onClick={handleRotate90X}
disabled={!modelData}
className={`flex-1 flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-xl text-[11px] font-bold transition-all duration-150 active:scale-95 ${
className={`flex-1 min-w-0 flex items-center justify-center gap-1 px-1.5 py-1.5 rounded-xl text-[10px] font-bold transition-all duration-150 active:scale-95 ${
modelData
? 'bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-100 cursor-pointer shadow-sm'
: 'bg-slate-100/50 dark:bg-slate-800/30 text-slate-400 dark:text-slate-600 cursor-not-allowed opacity-50'
}`}
title="Girar o modelo 90° no eixo de tombamento (adequar orientação Z/Y)"
>
<RotateCw className="w-3.5 h-3.5 text-blue-600 dark:text-blue-400" />
<RotateCw className="w-3 h-3 text-blue-600 dark:text-blue-400 shrink-0" />
<span className="whitespace-nowrap">Girar 90°</span>
<span className="text-[10px] font-mono font-normal text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-950 px-1 py-0.2 rounded border border-slate-200 dark:border-slate-800">
<span className="text-[9px] font-mono font-normal text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-950 px-1 py-0.2 rounded border border-slate-200 dark:border-slate-800 shrink-0">
{rotationX}°
</span>
</button>
@@ -1288,7 +1285,7 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
<button
onClick={handleToggleLockRotation}
disabled={!modelData}
className={`flex items-center justify-center p-1.5 rounded-xl transition-all duration-200 active:scale-95 border ${
className={`flex items-center justify-center p-1.5 rounded-xl transition-all duration-200 active:scale-95 border shrink-0 ${
!modelData
? 'bg-slate-100/50 dark:bg-slate-800/30 text-slate-400 border-transparent cursor-not-allowed opacity-40'
: isRotationLocked
@@ -1302,17 +1299,16 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
}
>
{isRotationLocked ? (
<Lock className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
<Lock className="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400" />
) : (
<Unlock className="w-4 h-4 text-amber-600 dark:text-amber-400" />
<Unlock className="w-3.5 h-3.5 text-amber-600 dark:text-amber-400" />
)}
</button>
</div>
{/* Card de Luminosidade Expandido (Alinhado com a largura dos cards acima) */}
{/* Card de Luminosidade Expandido (Alinhado com a largura uniforme da coluna) */}
<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' }}
className="w-full 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 pointer-events-auto"
title="Ajuste de Luminosidade da Estrutura (arraste para clarear ou suavizar sombras das peças)"
>
<button
@@ -1330,9 +1326,9 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
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"
className="flex-1 min-w-0 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">
<span className="text-[10px] font-mono font-bold text-slate-600 dark:text-slate-300 min-w-[28px] text-right shrink-0">
{brightness}%
</span>
</div>