From 2bce52fe548fbd7c03a8949cd6b1e289c739fee6 Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Sun, 24 May 2026 18:28:15 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Auto-deploy:=20melhoria=20no=20s?=
 =?UTF-8?q?nap=20e=20medi=C3=A7=C3=A3o=20AR=20em=2024/05/2026=2018:28:15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ViewCube.tsx           | 221 ++++++++++++++++++++++++++
 src/components/three/XRHudInWorld.tsx | 102 +++++++++---
 src/pages/Viewer.tsx                  |   3 +-
 3 files changed, 299 insertions(+), 27 deletions(-)
 create mode 100644 src/components/ViewCube.tsx

diff --git a/src/components/ViewCube.tsx b/src/components/ViewCube.tsx
new file mode 100644
index 0000000..67dfe56
--- /dev/null
+++ b/src/components/ViewCube.tsx
@@ -0,0 +1,221 @@
+import { useState, useEffect } from 'react';
+import { useModelStore } from '@/stores/useModelStore';
+import { Button } from '@/components/ui/button';
+import { RotateCw, RefreshCw, Move, HelpCircle } from 'lucide-react';
+import { toast } from 'sonner';
+
+export function ViewCube() {
+  const { activeModelId, models, setFineTuning } = useModelStore();
+  const activeModel = models.find((m) => m.id === activeModelId);
+
+  // Estados locais para controlar uma rotação interativa ou visualização do cubo
+  const [hoveredFace, setHoveredFace] = useState<string | null>(null);
+
+  if (!activeModelId || !activeModel) return null;
+
+  const alignToFace = (face: string) => {
+    let rotX = 0;
+    let rotY = 0;
+    let rotZ = 0;
+
+    switch (face) {
+      case 'TOPO':
+        rotX = 0;
+        rotY = 0;
+        rotZ = 0;
+        break;
+      case 'FRENTE':
+        rotX = 90;
+        rotY = 0;
+        rotZ = 0;
+        break;
+      case 'DIREITA':
+        rotX = 90;
+        rotY = 0;
+        rotZ = -90;
+        break;
+      case 'ESQUERDA':
+        rotX = 90;
+        rotY = 0;
+        rotZ = 90;
+        break;
+      case 'ATRÁS':
+        rotX = -90;
+        rotY = 180;
+        rotZ = 0;
+        break;
+      case 'BASE':
+        rotX = 180;
+        rotY = 0;
+        rotZ = 0;
+        break;
+    }
+
+    setFineTuning({ rotX, rotY, rotZ });
+    toast.success(`Alinhado para vista ${face}`);
+  };
+
+  // Ajusta a rotação para o múltiplo de 90 graus mais próximo
+  const snapToNearest90 = () => {
+    const ft = activeModel.fineTuning;
+    const rotX = Math.round(ft.rotX / 90) * 90;
+    const rotY = Math.round(ft.rotY / 90) * 90;
+    const rotZ = Math.round(ft.rotZ / 90) * 90;
+    setFineTuning({ rotX, rotY, rotZ });
+    toast.success(`Snap Ortogonal (90°): [${rotX}°, ${rotY}°, ${rotZ}°]`);
+  };
+
+  const resetAllTransforms = () => {
+    setFineTuning({ posX: 0, posY: 0, posZ: 0, rotX: 0, rotY: 0, rotZ: 0, scale: 1 });
+    toast.success('Posição e rotação restauradas para a origem');
+  };
+
+  return (
+    <div className="absolute top-4 right-4 z-20 flex flex-col items-center gap-3 rounded-xl border border-white/10 bg-black/50 p-4 shadow-2xl backdrop-blur-md select-none text-white w-40">
+      {/* Título do Widget */}
+      <span className="font-mono text-[9px] font-semibold text-muted-foreground uppercase tracking-widest text-center">
+        Alinhamento 3D
+      </span>
+
+      {/* Cubo 3D Visual */}
+      <div className="relative h-20 w-20 flex items-center justify-center my-2 group">
+        {/* Container do Cubo Isométrico */}
+        <div 
+          className="h-14 w-14 transition-transform duration-500 ease-out"
+          style={{
+            transformStyle: 'preserve-3d',
+            transform: 'rotateX(-30deg) rotateY(45deg)',
+          }}
+        >
+          {/* TOPO (Z+) */}
+          <div
+            onClick={() => alignToFace('TOPO')}
+            onMouseEnter={() => setHoveredFace('TOPO')}
+            onMouseLeave={() => setHoveredFace(null)}
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+              hoveredFace === 'TOPO' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-800/80 text-zinc-300'
+            }`}
+            style={{
+              transform: 'rotateX(90deg) translateZ(28px)',
+              backfaceVisibility: 'hidden',
+            }}
+          >
+            TOPO
+          </div>
+
+          {/* FRENTE (Y-) */}
+          <div
+            onClick={() => alignToFace('FRENTE')}
+            onMouseEnter={() => setHoveredFace('FRENTE')}
+            onMouseLeave={() => setHoveredFace(null)}
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+              hoveredFace === 'FRENTE' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-700/80 text-zinc-300'
+            }`}
+            style={{
+              transform: 'translateZ(28px)',
+              backfaceVisibility: 'hidden',
+            }}
+          >
+            FRENTE
+          </div>
+
+          {/* DIREITA (X+) */}
+          <div
+            onClick={() => alignToFace('DIREITA')}
+            onMouseEnter={() => setHoveredFace('DIREITA')}
+            onMouseLeave={() => setHoveredFace(null)}
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+              hoveredFace === 'DIREITA' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-850/80 text-zinc-300'
+            }`}
+            style={{
+              transform: 'rotateY(90deg) translateZ(28px)',
+              backfaceVisibility: 'hidden',
+            }}
+          >
+            DIR
+          </div>
+
+          {/* ESQUERDA (X-) */}
+          <div
+            onClick={() => alignToFace('ESQUERDA')}
+            onMouseEnter={() => setHoveredFace('ESQUERDA')}
+            onMouseLeave={() => setHoveredFace(null)}
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+              hoveredFace === 'ESQUERDA' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-850/80 text-zinc-300'
+            }`}
+            style={{
+              transform: 'rotateY(-90deg) translateZ(28px)',
+              backfaceVisibility: 'hidden',
+            }}
+          >
+            ESQ
+          </div>
+
+          {/* ATRÁS (Y+) */}
+          <div
+            onClick={() => alignToFace('ATRÁS')}
+            onMouseEnter={() => setHoveredFace('ATRÁS')}
+            onMouseLeave={() => setHoveredFace(null)}
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+              hoveredFace === 'ATRÁS' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-750/80 text-zinc-300'
+            }`}
+            style={{
+              transform: 'rotateY(180deg) translateZ(28px)',
+              backfaceVisibility: 'hidden',
+            }}
+          >
+            ATRÁS
+          </div>
+
+          {/* BASE (Z-) */}
+          <div
+            onClick={() => alignToFace('BASE')}
+            onMouseEnter={() => setHoveredFace('BASE')}
+            onMouseLeave={() => setHoveredFace(null)}
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+              hoveredFace === 'BASE' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-900/80 text-zinc-300'
+            }`}
+            style={{
+              transform: 'rotateX(-90deg) translateZ(28px)',
+              backfaceVisibility: 'hidden',
+            }}
+          >
+            BASE
+          </div>
+        </div>
+      </div>
+
+      {/* Botões Rápidos de Alinhamento */}
+      <div className="flex flex-col gap-1.5 w-full mt-1">
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full text-[10px] h-7 gap-1 bg-white/5 border-white/10 hover:bg-white/10 hover:text-white"
+          onClick={snapToNearest90}
+          title="Corrige a orientação aproximando para o múltiplo de 90° mais próximo"
+        >
+          <RotateCw className="h-3 w-3 text-primary animate-pulse" />
+          <span>Alinhar 90° (Snap)</span>
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full text-[10px] h-7 gap-1 bg-white/5 border-white/10 hover:bg-white/10 hover:text-white"
+          onClick={resetAllTransforms}
+          title="Zera a posição e a rotação da peça atual"
+        >
+          <RefreshCw className="h-3 w-3 text-destructive" />
+          <span>Resetar Origem</span>
+        </Button>
+      </div>
+
+      {/* Info compacta */}
+      <div className="flex items-center gap-1.5 font-mono text-[8px] text-muted-foreground mt-0.5 select-none justify-center">
+        <span>X: {Math.round(activeModel.fineTuning.rotX)}°</span>
+        <span>Y: {Math.round(activeModel.fineTuning.rotY)}°</span>
+        <span>Z: {Math.round(activeModel.fineTuning.rotZ)}°</span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/three/XRHudInWorld.tsx b/src/components/three/XRHudInWorld.tsx
index 0d8f713..cb99138 100644
--- a/src/components/three/XRHudInWorld.tsx
+++ b/src/components/three/XRHudInWorld.tsx
@@ -363,75 +363,125 @@ function ToolsTab(p: XRHudInWorldProps) {
   const resetScale = useModelStore((s) => s.resetScale);
   const clearMeasurements = useModelStore((s) => s.clearMeasurements);
 
+  const activeId = useModelStore((s) => s.activeModelId);
+  const models = useModelStore((s) => s.models);
+  const activeModel = models.find((m) => m.id === activeId);
+  const setFineTuning = useModelStore((s) => s.setFineTuning);
+
+  const alignToFace = (face: string) => {
+    let rotX = 0, rotY = 0, rotZ = 0;
+    if (face === 'FRENTE') { rotX = 90; }
+    else if (face === 'LADO') { rotX = 90; rotY = 90; }
+    setFineTuning({ rotX, rotY, rotZ });
+  };
+
+  const snapTo90 = () => {
+    if (!activeModel) return;
+    const ft = activeModel.fineTuning;
+    setFineTuning({
+      rotX: Math.round(ft.rotX / 90) * 90,
+      rotY: Math.round(ft.rotY / 90) * 90,
+      rotZ: Math.round(ft.rotZ / 90) * 90,
+    });
+  };
+
+  const resetRot = () => {
+    setFineTuning({ rotX: 0, rotY: 0, rotZ: 0 });
+  };
+
   return (
     <group>
-      <Text position={[-0.24, 0.11, 0]} fontSize={0.008} color="#94a3b8" anchorX="left">Render</Text>
-      <XR3DButton position={[-0.16, 0.085, 0]} size={[0.075, 0.022]} label="Sólido"
+      {/* Fileira 1: Render */}
+      <Text position={[-0.24, 0.125, 0]} fontSize={0.008} color="#94a3b8" anchorX="left">Render</Text>
+      <XR3DButton position={[-0.16, 0.105, 0]} size={[0.075, 0.022]} label="Sólido"
         active={renderMode === 'solid'} onClick={() => setRenderMode('solid')} />
-      <XR3DButton position={[-0.08, 0.085, 0]} size={[0.075, 0.022]} label="Bordas"
+      <XR3DButton position={[-0.08, 0.105, 0]} size={[0.075, 0.022]} label="Bordas"
         active={renderMode === 'edges'} onClick={() => setRenderMode('edges')} />
 
-      <Text position={[-0.24, 0.05, 0]} fontSize={0.008} color="#94a3b8" anchorX="left">Toggles</Text>
-      <XR3DButton position={[-0.16, 0.025, 0]} size={[0.075, 0.022]} label={`Grid ${showGrid ? 'ON' : 'OFF'}`}
+      {/* Fileira 2: Toggles */}
+      <Text position={[-0.24, 0.075, 0]} fontSize={0.008} color="#94a3b8" anchorX="left">Toggles</Text>
+      <XR3DButton position={[-0.16, 0.055, 0]} size={[0.075, 0.022]} label={`Grid ${showGrid ? 'ON' : 'OFF'}`}
         active={showGrid} onClick={() => setShowGrid(!showGrid)} />
-      <XR3DButton position={[-0.08, 0.025, 0]} size={[0.075, 0.022]} label={`Medir ${measureMode ? 'ON' : 'OFF'}`}
+      <XR3DButton position={[-0.08, 0.055, 0]} size={[0.075, 0.022]} label={`Medir ${measureMode ? 'ON' : 'OFF'}`}
         active={measureMode} onClick={() => setMeasureMode(!measureMode)} />
-      <XR3DButton position={[0.0, 0.025, 0]} size={[0.075, 0.022]} label={`Snap ${p.snapToPlanes ? 'ON' : 'OFF'}`}
+      <XR3DButton position={[0.0, 0.055, 0]} size={[0.075, 0.022]} label={`Snap ${p.snapToPlanes ? 'ON' : 'OFF'}`}
         active={p.snapToPlanes} onClick={p.onToggleSnap} />
-      <XR3DButton position={[0.08, 0.025, 0]} size={[0.075, 0.022]}
+      <XR3DButton position={[0.08, 0.055, 0]} size={[0.075, 0.022]}
         label={p.placementMode ? 'Posic…' : 'Reposic.'}
         active={p.placementMode} onClick={p.onTogglePlacement} />
-      <XR3DButton position={[0.16, 0.025, 0]} size={[0.075, 0.022]}
+      <XR3DButton position={[0.16, 0.055, 0]} size={[0.075, 0.022]}
         label={`Zoom ${p.allowScale ? 'ON' : 'OFF'}`}
         active={p.allowScale} onClick={p.onToggleAllowScale} />
 
-      {/* Selecionar — paridade com a tela inicial */}
-      <Text position={[-0.24, -0.005, 0]} fontSize={0.008} color="#94a3b8" anchorX="left">Selecionar</Text>
-      <XR3DButton position={[-0.16, -0.03, 0]} size={[0.075, 0.022]}
+      {/* Fileira 3: Selecionar */}
+      <Text position={[-0.24, 0.025, 0]} fontSize={0.008} color="#94a3b8" anchorX="left">Selecionar</Text>
+      <XR3DButton position={[-0.16, 0.005, 0]} size={[0.075, 0.022]}
         label={selectionMode ? (selectedCount > 0 ? `${selectedCount} sel.` : 'Selec…') : 'Selec'}
         active={selectionMode} onClick={() => setSelectionMode(!selectionMode)} />
-      <XR3DButton position={[-0.08, -0.03, 0]} size={[0.075, 0.022]} label="Esconder"
+      <XR3DButton position={[-0.08, 0.005, 0]} size={[0.075, 0.022]} label="Esconder"
         onClick={hideSelectedElements} />
-      <XR3DButton position={[0.0, -0.03, 0]} size={[0.075, 0.022]} label="Isolar"
+      <XR3DButton position={[0.0, 0.005, 0]} size={[0.075, 0.022]} label="Isolar"
         onClick={isolateSelectedElements} />
-      <XR3DButton position={[0.08, -0.03, 0]} size={[0.075, 0.022]} label="Mostrar"
+      <XR3DButton position={[0.08, 0.005, 0]} size={[0.075, 0.022]} label="Mostrar"
         active={hasHidden} onClick={showAllElements} />
 
-      <Text position={[-0.24, -0.06, 0]} fontSize={0.008} color="#94a3b8" anchorX="left">
+      {/* Fileira 4: Opacidade */}
+      <Text position={[-0.24, -0.025, 0]} fontSize={0.008} color="#94a3b8" anchorX="left">
         Opacidade {Math.round(opacity * 100)}%
       </Text>
-      <XR3DButton position={[-0.16, -0.085, 0]} size={[0.05, 0.022]} label="−25%"
+      <XR3DButton position={[-0.16, -0.045, 0]} size={[0.05, 0.022]} label="−25%"
         onClick={() => setOpacity(Math.max(0, opacity - 0.25))} />
-      <XR3DButton position={[-0.105, -0.085, 0]} size={[0.05, 0.022]} label="−5%"
+      <XR3DButton position={[-0.105, -0.045, 0]} size={[0.05, 0.022]} label="−5%"
         onClick={() => setOpacity(Math.max(0, opacity - 0.05))} />
-      <XR3DButton position={[-0.05, -0.085, 0]} size={[0.05, 0.022]} label="+5%"
+      <XR3DButton position={[-0.05, -0.045, 0]} size={[0.05, 0.022]} label="+5%"
         onClick={() => setOpacity(Math.min(1, opacity + 0.05))} />
-      <XR3DButton position={[0.005, -0.085, 0]} size={[0.05, 0.022]} label="+25%"
+      <XR3DButton position={[0.005, -0.045, 0]} size={[0.05, 0.022]} label="+25%"
         onClick={() => setOpacity(Math.min(1, opacity + 0.25))} />
-      <XR3DButton position={[0.06, -0.085, 0]} size={[0.05, 0.022]} label="100%"
+      <XR3DButton position={[0.06, -0.045, 0]} size={[0.05, 0.022]} label="100%"
         onClick={() => setOpacity(1)} />
 
-      <Text position={[-0.24, -0.115, 0]} fontSize={0.008} color="#94a3b8" anchorX="left">
+      {/* Fileira 5: Escala */}
+      <Text position={[-0.24, -0.075, 0]} fontSize={0.008} color="#94a3b8" anchorX="left">
         Escala {scaleRatio.label}
       </Text>
       {SCALE_LABELS.map((lbl, i) => {
         const preset = SCALE_PRESETS.find((sp) => sp.label === lbl)!;
         return (
           <XR3DButton key={lbl}
-            position={[-0.16 + i * 0.06, -0.14, 0]} size={[0.055, 0.022]} label={lbl}
+            position={[-0.16 + i * 0.06, -0.095, 0]} size={[0.055, 0.022]} label={lbl}
             active={scaleRatio.label === lbl}
             onClick={() => setScaleRatio(preset)} />
         );
       })}
-      <XR3DButton position={[0.10, -0.14, 0]} size={[0.062, 0.022]}
+      <XR3DButton position={[0.10, -0.095, 0]} size={[0.062, 0.022]}
         label="↺ Reset" color="#dc2626"
         onClick={resetScale} fontSize={0.0085} />
-      <XR3DButton position={[0.17, -0.14, 0]} size={[0.062, 0.022]}
+      <XR3DButton position={[0.17, -0.095, 0]} size={[0.062, 0.022]}
         label="✕ Medidas" color="#dc2626"
         onClick={clearMeasurements} fontSize={0.0085} />
 
+      {/* Fileira 6: Rotação / Alinhamento Ortogonal */}
+      <Text position={[-0.24, -0.125, 0]} fontSize={0.008} color="#94a3b8" anchorX="left">
+        Alinhar Rotação
+      </Text>
+      <XR3DButton position={[-0.16, -0.145, 0]} size={[0.075, 0.022]}
+        label="Snap 90°" active={false}
+        onClick={snapTo90} fontSize={0.0075} />
+      <XR3DButton position={[-0.08, -0.145, 0]} size={[0.05, 0.022]}
+        label="Topo" active={false}
+        onClick={() => alignToFace('TOPO')} fontSize={0.0075} />
+      <XR3DButton position={[-0.025, -0.145, 0]} size={[0.05, 0.022]}
+        label="Frente" active={false}
+        onClick={() => alignToFace('FRENTE')} fontSize={0.0075} />
+      <XR3DButton position={[0.03, -0.145, 0]} size={[0.05, 0.022]}
+        label="Lado" active={false}
+        onClick={() => alignToFace('LADO')} fontSize={0.0075} />
+      <XR3DButton position={[0.12, -0.145, 0]} size={[0.09, 0.022]}
+        label="Zerar Rot." color="#dc2626"
+        onClick={resetRot} fontSize={0.0075} />
+
       {measureMode && (
-        <Text position={[-0.24, -0.17, 0]} fontSize={0.0065} color="#a3e635" anchorX="left" maxWidth={0.5}>
+        <Text position={[-0.24, -0.175, 0]} fontSize={0.0055} color="#a3e635" anchorX="left" maxWidth={0.5}>
           Gatilho D: marcar · A: desfazer · B: limpar · Gatilho E: alternar snap
         </Text>
       )}
diff --git a/src/pages/Viewer.tsx b/src/pages/Viewer.tsx
index 14010dd..26b6c2a 100644
--- a/src/pages/Viewer.tsx
+++ b/src/pages/Viewer.tsx
@@ -3,8 +3,8 @@ import { ArrowLeft, Glasses, Box, Ruler, FileText, Upload, Loader2 } from "lucid
 import { Button } from "@/components/ui/button";
 import { useModelStore } from "@/stores/useModelStore";
 import { ModelViewerCanvas } from "@/components/three/ModelViewer";
-import { xrStore } from "@/lib/xrStore";
 import { ViewerControls } from "@/components/ViewerControls";
+import { ViewCube } from "@/components/ViewCube";
 import { InspectionChecklist } from "@/components/InspectionChecklist";
 import { FineTuningControls } from "@/components/FineTuningControls";
 import { MeasurementsList } from "@/components/MeasurementsList";
@@ -143,6 +143,7 @@ const Viewer = () => {
         <div className="relative flex-1">
           <ModelViewerCanvas />
           <ViewerControls />
+          <ViewCube />
         </div>
 
         {/* Side panel */}