feat: Ferramenta de rotação 90° e trava de memória no Analisador 3D

src/components/viewer3d/AnalyzerViewer3D.tsx

@@ -6,6 +6,9 @@ import { DefectItem, ColorizationMode } from '@/types/analisador3d';
 import { ViewCube } from './ViewCube';
 import {
   RotateCcw,
+  RotateCw,
+  Lock,
+  Unlock,
   Eye,
   Maximize2,
   Minimize2,
@@ -19,6 +22,8 @@ import {
   HelpCircle,
   Cpu
 } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { useToast } from '@/hooks/use-toast';
 
 interface AnalyzerViewer3DProps {
   modelData: LoadedIFCResult | null;
@@ -33,6 +38,8 @@ interface AnalyzerViewer3DProps {
   isFullscreen?: boolean;
   onToggleFullscreen?: () => void;
   theme?: 'dark' | 'light';
+  selectedOF?: string;
+  initialRotation?: { x: number; y: number; z: number } | null;
 }
 
 export const AnalyzerViewer3D: React.FC<AnalyzerViewer3DProps> = ({
@@ -48,7 +55,13 @@ export const AnalyzerViewer3D: React.FC<AnalyzerViewer3DProps> = ({
   isFullscreen = false,
   onToggleFullscreen,
   theme = 'dark',
+  selectedOF,
+  initialRotation,
 }) => {
+  const { toast } = useToast();
+  const [rotationX, setRotationX] = useState<number>(0);
+  const [rotationY, setRotationY] = useState<number>(0);
+  const [isRotationLocked, setIsRotationLocked] = useState<boolean>(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const canvasContainerRef = useRef<HTMLDivElement>(null);
   const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
@@ -192,7 +205,41 @@ export const AnalyzerViewer3D: React.FC<AnalyzerViewer3DProps> = ({
     };
   }, [theme]);
 
-  // 2. Carrega o modelo na cena diretamente sem deep clone circular
+  // Centraliza e enquadra perfeitamente o modelo na câmera (Fit View)
+  const fitModelToView = useCallback((targetObj?: THREE.Object3D) => {
+    const obj = targetObj || modelGroupRef.current;
+    if (!obj || !cameraRef.current || !controlsRef.current) return;
+
+    obj.updateMatrixWorld(true);
+    const box = new THREE.Box3().setFromObject(obj);
+    if (box.isEmpty()) return;
+
+    const center = box.getCenter(new THREE.Vector3());
+    const size = box.getSize(new THREE.Vector3());
+    const maxDim = Math.max(size.x, size.y, size.z);
+    if (maxDim <= 0) return;
+
+    const fov = 45 * (Math.PI / 180);
+    let cameraDistance = Math.abs(maxDim / (2 * Math.tan(fov / 2))) * 1.6;
+    cameraDistance = Math.max(cameraDistance, 5);
+
+    const camera = cameraRef.current;
+    camera.near = Math.max(0.01, maxDim / 500);
+    camera.far = Math.max(2000, maxDim * 20);
+    camera.updateProjectionMatrix();
+    camera.position.set(center.x + cameraDistance * 0.7, center.y + cameraDistance * 0.5, center.z + cameraDistance * 0.7);
+    camera.lookAt(center);
+
+    controlsRef.current.target.copy(center);
+    controlsRef.current.maxDistance = Math.max(1500, maxDim * 10);
+    controlsRef.current.update();
+
+    if (gridRef.current) {
+      gridRef.current.position.set(center.x, box.min.y, center.z);
+    }
+  }, []);
+
+  // 2. Carrega o modelo na cena diretamente sem deep clone circular e aplica rotação
   useEffect(() => {
     const scene = sceneRef.current;
     if (!scene) return;
@@ -209,32 +256,101 @@ export const AnalyzerViewer3D: React.FC<AnalyzerViewer3DProps> = ({
     modelGroupRef.current = group;
     scene.add(group);
 
-    // Ajusta piso do grid com base no tamanho do modelo
+    // Recupera rotação memorizada para esta OF (localStorage ou banco de dados)
-    const bbox = new THREE.Box3().setFromObject(group);
+    const storageKey = selectedOF ? `tracksteel_model_rot_${selectedOF}` : null;
-    if (!bbox.isEmpty()) {
+    let savedX = 0;
-      const center = new THREE.Vector3();
+    let savedY = 0;
-      bbox.getCenter(center);
+    let isLocked = false;
-      const size = new THREE.Vector3();
-      bbox.getSize(size);
 
-      // Centraliza grupo na origem
+    if (storageKey) {
-      group.position.x = -center.x;
+      const stored = localStorage.getItem(storageKey);
-      group.position.y = -bbox.min.y;
+      if (stored) {
-      group.position.z = -center.z;
+        try {
-
+          const parsed = JSON.parse(stored);
-      if (gridRef.current) {
+          if (typeof parsed.x === 'number') savedX = parsed.x;
-        gridRef.current.position.y = 0;
+          if (typeof parsed.y === 'number') savedY = parsed.y;
-      }
+          isLocked = true;
-
+        } catch (e) {}
-      // Ajusta câmera
-      const maxDim = Math.max(size.x, size.y, size.z);
-      if (cameraRef.current && controlsRef.current) {
-        cameraRef.current.position.set(maxDim * 1.3, maxDim * 1.1, maxDim * 1.5);
-        controlsRef.current.target.set(0, size.y / 2, 0);
-        controlsRef.current.update();
       }
     }
-  }, [modelData]);
+
+    if (!isLocked && initialRotation) {
+      if (typeof initialRotation.x === 'number') savedX = initialRotation.x;
+      if (typeof initialRotation.y === 'number') savedY = initialRotation.y;
+      isLocked = true;
+    }
+
+    setRotationX(savedX);
+    setRotationY(savedY);
+    setIsRotationLocked(isLocked);
+
+    // Aplica rotação inicial no grupo do modelo
+    group.rotation.set(
+      THREE.MathUtils.degToRad(savedX),
+      THREE.MathUtils.degToRad(savedY),
+      0
+    );
+    group.updateMatrixWorld(true);
+
+    fitModelToView(group);
+  }, [modelData, selectedOF, initialRotation, fitModelToView]);
+
+  // Gira o modelo em 90 graus no eixo X (tombamento vertical para alinhar Z-Up do CAD com Y-Up)
+  const handleRotate90X = useCallback(() => {
+    if (!modelGroupRef.current) return;
+
+    const nextX = (rotationX + 90) % 360;
+    setRotationX(nextX);
+    setIsRotationLocked(false);
+
+    modelGroupRef.current.rotation.x = THREE.MathUtils.degToRad(nextX);
+    modelGroupRef.current.rotation.y = THREE.MathUtils.degToRad(rotationY);
+    modelGroupRef.current.updateMatrixWorld(true);
+
+    fitModelToView(modelGroupRef.current);
+  }, [rotationX, rotationY, fitModelToView]);
+
+  // Alterna o bloqueio/gravação da posição ideal de visualização no banco e no navegador
+  const handleToggleLockRotation = useCallback(async () => {
+    if (!selectedOF) {
+      toast({
+        title: 'Aviso',
+        description: 'Selecione uma OF para memorizar a rotação do modelo.',
+      });
+      return;
+    }
+
+    if (!isRotationLocked) {
+      // Trava e grava a rotação
+      setIsRotationLocked(true);
+      const rotData = { x: rotationX, y: rotationY, z: 0 };
+
+      // 1. Grava no localStorage para acesso instantâneo
+      localStorage.setItem(`tracksteel_model_rot_${selectedOF}`, JSON.stringify(rotData));
+
+      // 2. Persiste na nuvem/Supabase na tabela ordens_fabricacao
+      try {
+        await supabase
+          .from('ordens_fabricacao' as any)
+          .update({ model_3d_rotation: rotData })
+          .eq('num_of', selectedOF);
+      } catch (err) {
+        console.error('Erro ao salvar rotação no banco:', err);
+      }
+
+      toast({
+        title: 'Posição Travada e Salva',
+        description: `Posição ideal de visualização (${rotationX}°) gravada com sucesso para a OF ${selectedOF}.`,
+      });
+    } else {
+      // Destrava para permitir novo ajuste
+      setIsRotationLocked(false);
+      toast({
+        title: 'Posição Destravada',
+        description: 'Clique em "Girar 90°" para ajustar e trave no cadeado novamente quando estiver na posição correta.',
+      });
+    }
+  }, [selectedOF, isRotationLocked, rotationX, rotationY, toast]);
 
   // 3. Aplica Colorização Dinâmica com base no modo selecionado e na peça/defeito ativo
   useEffect(() => {
@@ -423,13 +539,63 @@ export const AnalyzerViewer3D: React.FC<AnalyzerViewer3DProps> = ({
         onPointerDown={handlePointerDown}
       />
 
-      {/* ViewCube Superior Direito */}
+      {/* Top Right: ViewCube + Widget de Rotação 90° & Cadeado de Memória */}
-      {cameraRef.current && controlsRef.current && (
+      <div className="absolute top-3 right-3 z-20 flex flex-col items-end gap-2.5 pointer-events-auto">
-        <ViewCube
+        {cameraRef.current && controlsRef.current && (
-          onSelectView={handleViewCubeSelect}
+          <ViewCube
-          mainCameraRef={cameraRef as React.MutableRefObject<THREE.Camera | null>}
+            onSelectView={handleViewCubeSelect}
-        />
+            mainCameraRef={cameraRef as React.MutableRefObject<THREE.Camera | null>}
-      )}
+          />
+        )}
+
+        {/* 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}
+            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 ${
+              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" />
+            <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">
+              {rotationX}°
+            </span>
+          </button>
+
+          {/* Botão Cadeado: Travar / Gravar ou Destravar */}
+          <button
+            onClick={handleToggleLockRotation}
+            disabled={!modelData}
+            className={`flex items-center justify-center p-1.5 rounded-xl transition-all duration-200 active:scale-95 border ${
+              !modelData
+                ? 'bg-slate-100/50 dark:bg-slate-800/30 text-slate-400 border-transparent cursor-not-allowed opacity-40'
+                : isRotationLocked
+                ? 'bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border-emerald-300 dark:bg-emerald-950/60 dark:hover:bg-emerald-900/80 dark:text-emerald-300 dark:border-emerald-700/80 shadow-sm cursor-pointer'
+                : 'bg-amber-50 hover:bg-amber-100 text-amber-700 border-amber-300 dark:bg-amber-950/50 dark:hover:bg-amber-900/70 dark:text-amber-300 dark:border-amber-700/70 shadow-sm cursor-pointer animate-pulse'
+            }`}
+            title={
+              isRotationLocked
+                ? 'Posição TRAVADA e salva para esta OF. Clique para destravar e ajustar.'
+                : 'Posição DESTRAVADA. Clique aqui no cadeado para travar e salvar a posição ideal.'
+            }
+          >
+            {isRotationLocked ? (
+              <Lock className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
+            ) : (
+              <Unlock className="w-4 h-4 text-amber-600 dark:text-amber-400" />
+            )}
+          </button>
+        </div>
+      </div>
 
       {/* Barra de Ferramentas Flutuante Superior */}
       <div className="absolute top-3 left-3 flex items-center gap-1.5 p-1.5 bg-white/95 dark:bg-slate-900/90 backdrop-blur-md border border-slate-200 dark:border-slate-700/80 rounded-lg shadow-md z-20">
@@ -538,7 +704,7 @@ export const AnalyzerViewer3D: React.FC<AnalyzerViewer3DProps> = ({
 
       {/* Alerta de elemento selecionado flutuante */}
       {selectedPieceMark && (
-        <div className="absolute top-3 right-16 px-3 py-1.5 bg-indigo-50 dark:bg-indigo-950/90 border border-indigo-200 dark:border-indigo-700/80 rounded-lg shadow-md text-xs flex items-center gap-2 z-20">
+        <div className="absolute top-3 left-[225px] px-3 py-1.5 bg-indigo-50 dark:bg-indigo-950/90 border border-indigo-200 dark:border-indigo-700/80 rounded-lg shadow-md text-xs flex items-center gap-2 z-20">
           <Crosshair className="w-3.5 h-3.5 text-indigo-600 dark:text-indigo-400 animate-spin" style={{ animationDuration: '6s' }} />
           <span className="text-indigo-900 dark:text-indigo-200">
             Foco Ativo: <strong className="text-indigo-700 dark:text-white font-mono">{selectedPieceMark}</strong>

src/pages/Analisador3D.tsx

@@ -42,6 +42,7 @@ interface OFOption {
   peso_total?: number;
   ifc_url?: string | null;
   ifc_filename?: string | null;
+  model_3d_rotation?: { x: number; y: number; z: number } | null;
 }
 
 export default function Analisador3D() {
@@ -103,7 +104,7 @@ export default function Analisador3D() {
       try {
         const { data, error } = await supabase
           .from('ordens_fabricacao' as any)
-          .select('id, num_of, descritivo, peso_total, ifc_url, ifc_filename')
+          .select('id, num_of, descritivo, peso_total, ifc_url, ifc_filename, model_3d_rotation')
           .order('num_of', { ascending: false });
 
         if (!error && data) {
@@ -114,6 +115,7 @@ export default function Analisador3D() {
             peso_total: Number(item.peso_total || 0),
             ifc_url: item.ifc_url || null,
             ifc_filename: item.ifc_filename || null,
+            model_3d_rotation: item.model_3d_rotation || null,
           }));
           setOfs(list);
           if (list.length > 0 && !selectedOF) {
@@ -797,6 +799,8 @@ export default function Analisador3D() {
             isFullscreen={isFullscreen}
             onToggleFullscreen={() => setIsFullscreen(!isFullscreen)}
             theme={isDarkTheme ? 'dark' : 'light'}
+            selectedOF={selectedOF}
+            initialRotation={currentOFObj?.model_3d_rotation || null}
           />
         </div>
       </div>