Added positioning controls

X-Lovable-Edit-ID: edt-ae1dd1aa-2777-44c1-9a71-ba5742464627
Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>

.lovable/plan.md

@@ -1,44 +1,43 @@
-# Plano: Mini-menu de Captura (Foto + Vídeo) no Modo AR
 
-## Objetivo
+## Modo Posicionar (desktop)
-Adicionar dentro do HUD flutuante do modo AR um pequeno menu de captura com:
-- **📸 Foto** — screenshot do canvas (já existe lógica, expor no AR)
-- **● Gravar / ⏸ Pausar / ▶ Retomar / ■ Parar** — gravação de vídeo do canvas WebXR
 
-## O que será implementado
+Permite que, antes de entrar no AR, o usuário mova e gire a peça **ativa** com o mouse — exatamente como faria com o controle no AR. As outras peças permanecem travadas. Ao desativar o botão, todas ficam fixas nas posições atuais e o estado persiste (já temos `savePlacement` por `fileName`).
 
-### 1. Novo hook `useCanvasRecorder` (`src/hooks/useCanvasRecorder.ts`)
+### Comportamento
-- Usa `canvas.captureStream(30)` + `MediaRecorder` (codec `video/webm;codecs=vp9` com fallback p/ vp8).
-- Estados expostos: `status` (`idle | recording | paused`), `elapsedMs`.
-- Métodos: `start()`, `pause()`, `resume()`, `stop()`.
-- Ao parar: monta `Blob` webm, gera `URL.createObjectURL`, dispara download automático (`tracksteel-AR-<timestamp>.webm`) e também salva uma referência opcional para galeria futura.
-- Captura screenshot via `canvas.toDataURL('image/png')` reutilizando o store (`addScreenshot`) — mesma lógica já presente em `XRHud.tsx`.
 
-### 2. Nova aba "Captura" no HUD 3D (`src/components/three/XRHudInWorld.tsx`)
+- Botão **Posicionar** (ícone Move3D) na barra `ViewerControls`, ao lado de Medir.
-- Adicionar tab `capture` (ícone 🎥) na barra de tabs (junto com Cena, Ferram., Inspeção, Compart., WebXR).
+- Quando ativo:
-- Componente `CaptureTab` com botões 3D (`XR3DButton`):
+  - `OrbitControls` é desabilitado (não conflitar com o arrasto da peça).
-  - **📸 Foto** — chama screenshot, mostra toast "Foto capturada".
+  - Cursor vira `move`.
-  - **● REC** (vermelho quando gravando) — inicia/para gravação.
+  - Apenas a peça com `activeModelId` responde ao mouse. Clicar em outra peça troca a ativa e passa a manipulá-la (as outras voltam a ficar travadas).
-  - **⏸ Pause / ▶ Resume** — alterna pausa (desabilitado quando idle).
+  - **Arrastar com botão esquerdo** → translada no plano da câmera (X/Y da tela projetados para o mundo).
-  - **■ Stop** — finaliza e baixa o arquivo.
+  - **Shift + arrastar esquerdo** ou **arrastar com botão do meio** → translada no eixo Z (profundidade) usando o movimento vertical do mouse.
-  - Texto de status: `● 00:12` em vermelho enquanto grava, amarelo quando pausado.
+  - **Arrastar com botão direito** → rotaciona: movimento horizontal = rotY (yaw), movimento vertical = rotX (pitch). **Shift + direito** = rotZ (roll).
-- Indicador visual flutuante (pequeno círculo vermelho pulsante) visível mesmo com painel fechado quando estiver gravando — anexado ao `headLockRef`.
+  - Cada movimento atualiza `fineTuning` via `setFineTuning` da peça ativa, o que já dispara `savePlacement` (persistência entre sessões/entrar-sair do AR — mesma chave usada hoje).
+- Quando desativado: tudo volta ao normal (Orbit ativo, peças travadas onde foram deixadas). Modo Medir e Posicionar são mutuamente exclusivos.
 
-### 3. Integração
+### Arquivos a alterar
-- O hook recebe o `<canvas>` via `document.querySelector('canvas')` (mesmo padrão usado em `XRHud.tsx`/`handleScreenshot`).
-- Nenhuma mudança no store global é necessária — o estado de gravação vive no hook, instanciado no nível do `XRSession.tsx` e passado por props ao `XRHudInWorld`, OU mantido dentro do próprio `CaptureTab` via singleton simples.
 
-## Detalhes técnicos
+1. **`src/stores/useModelStore.ts`**
-- `MediaRecorder` com `canvas.captureStream(30)` funciona dentro de sessão WebXR no Quest 3 (Chromium-based browser do Quest suporta).
+   - Adicionar `positionMode: boolean` + `setPositionMode(on)`.
-- Áudio do microfone **não** será incluído (pode ser adicionado depois se solicitado).
+   - Em `setPositionMode(true)` desligar `measureMode`; e vice-versa em `setMeasureMode`.
-- Vídeo gerado é `.webm`; o usuário pode converter para `.mp4` fora do app se quiser.
-- O download é feito ao parar a gravação — o arquivo aparece no armazenamento do Quest (pasta Downloads do browser).
 
-## Arquivos afetados
+2. **`src/components/three/ModelViewer.tsx`**
-- `src/hooks/useCanvasRecorder.ts` (novo)
+   - Novo componente `PositionDragHandler` (dentro do Canvas) que:
-- `src/components/three/XRHudInWorld.tsx` (nova tab + CaptureTab + indicador REC)
+     - Escuta `pointerdown/move/up` no `gl.domElement` quando `positionMode` está on e existe `activeModelId`.
+     - Converte delta de pixels em delta de mundo usando a distância câmera↔peça e o FOV (`2 * dist * tan(fov/2) / canvasHeight`), depois divide pelo `scaleRatio.factor` para gravar em coordenadas locais coerentes com `fineTuning`.
+     - Aplica via `setFineTuning({ posX: ..., posY: ..., posZ: ..., rotX: ..., rotY: ..., rotZ: ... })`.
+   - Em `OrbitControls`, definir `enabled={!positionMode && !measureMode}` (medir já não rotaciona hoje só por cursor, mas reforça).
+   - Cursor: quando `positionMode`, setar `gl.domElement.style.cursor = 'move'`.
 
-## Fora do escopo
+3. **`src/components/ViewerControls.tsx`**
-- Galeria de vídeos dentro do app (apenas download direto por enquanto).
+   - Importar ícone `Move3D` do lucide.
-- Áudio/microfone na gravação.
+   - Novo botão **Posicionar** com `variant={positionMode ? 'default' : 'outline'}` chamando `setPositionMode(!positionMode)`. Label dinâmica: `Posicionar` / `Posicionando — [nome da peça ativa]`.
-- Streaming/upload para nuvem.
+
+### Detalhes técnicos
+
+- A translação é gravada em `fineTuning.pos{X,Y,Z}` (espaço local da peça, antes do `renderFactor` da escala). Para que 1 pixel ↔ 1 mm visual fique coerente, o cálculo divide o delta-mundo por `scaleRatio.factor` (ex: em 1:50, mover 100 px arrasta o objeto 100 px de tela tanto na visualização quanto na coordenada interna).
+- Rotação em graus (já é o formato de `fineTuning.rotX/Y/Z`), sensibilidade ~`0.4°/px`.
+- O bloqueio de outras peças é automático: o handler só atualiza a `activeModelId`. Clicar em outra peça (handler `onClick` já existente em `GLBModel`) muda a ativa.
+- Persistência: `setFineTuning` já chama `savePlacement(fileName, fineTuning)`, então sair/voltar do AR mantém posições.
+- Sem mudanças no AR; apenas no viewer desktop.

src/components/ViewerControls.tsx

@@ -1,4 +1,4 @@
-import { Eye, Grid3X3, Ruler, Trash2, Camera, LayoutGrid, Palette, Box } from 'lucide-react';
+import { Eye, Grid3X3, Ruler, Trash2, Camera, LayoutGrid, Palette, Box, Move3D } from 'lucide-react';
 import { Slider } from '@/components/ui/slider';
 import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -26,7 +26,10 @@ export function ViewerControls() {
     wireframeColor, setWireframeColor,
     wireframeThickness, setWireframeThickness,
     edgeThresholdAngle, setEdgeThresholdAngle,
+    positionMode, setPositionMode,
+    activeModelId, models,
   } = useModelStore();
+  const activeModel = models.find(m => m.id === activeModelId);
 
   const handleScreenshot = useCallback(() => {
     const canvas = document.querySelector('canvas');
@@ -143,6 +146,23 @@ export function ViewerControls() {
           </PopoverContent>
         </Popover>
       )}
+      {/* Posicionar (manual mouse placement) */}
+      <Button
+        variant={positionMode ? 'default' : 'outline'}
+        size="sm"
+        className="gap-2 h-9"
+        onClick={() => setPositionMode(!positionMode)}
+        disabled={!activeModelId}
+        title="Arraste: mover · Shift+arraste ou meio: profundidade · Direito: girar · Shift+direito: rotZ"
+      >
+        <Move3D className="h-3.5 w-3.5" />
+        <span className="font-mono text-xs">
+          {positionMode
+            ? `Posicionando${activeModel ? ` · ${activeModel.fileName.slice(0, 14)}` : ''}`
+            : 'Posicionar'}
+        </span>
+      </Button>
+
       {/* Measure tool */}
       <div className="flex items-end gap-1.5">
         <Button

src/components/three/ModelViewer.tsx

@@ -507,7 +507,141 @@ function GridAutoFollower() {
   return null;
 }
 
+/** Mouse drag handler for desktop "Posicionar" mode: translates/rotates the active model. */
+function PositionDragHandler() {
+  const { camera, gl, scene } = useThree();
+  const positionMode = useModelStore((s) => s.positionMode);
+  const activeId = useModelStore((s) => s.activeModelId);
+
+  useEffect(() => {
+    if (!positionMode) {
+      gl.domElement.style.cursor = 'grab';
+      return;
+    }
+    gl.domElement.style.cursor = 'move';
+
+    const canvas = gl.domElement;
+    let dragging = false;
+    let button = 0;
+    let shiftKey = false;
+    let lastX = 0;
+    let lastY = 0;
+    let pixelsPerWorldUnit = 1;
+
+    const computePixelScale = () => {
+      const st = useModelStore.getState();
+      const active = st.models.find((m) => m.id === st.activeModelId);
+      if (!active) return;
+      // Find the model's group position (approx world): use renderFactor + fineTuning pos
+      const factor = st.scaleRatio?.factor ?? 1;
+      const wp = new THREE.Vector3(
+        active.fineTuning.posX * factor,
+        active.fineTuning.posY * factor,
+        active.fineTuning.posZ * factor,
+      );
+      const dist = camera.position.distanceTo(wp);
+      const perspCam = camera as THREE.PerspectiveCamera;
+      const fov = (perspCam.fov ?? 50) * (Math.PI / 180);
+      const worldPerPixel = (2 * dist * Math.tan(fov / 2)) / canvas.clientHeight;
+      pixelsPerWorldUnit = worldPerPixel; // world units per pixel
+    };
+
+    const onDown = (e: PointerEvent) => {
+      const st = useModelStore.getState();
+      if (!st.positionMode || !st.activeModelId) return;
+      dragging = true;
+      button = e.button;
+      shiftKey = e.shiftKey;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      computePixelScale();
+      (e.target as Element).setPointerCapture?.(e.pointerId);
+      e.preventDefault();
+    };
+
+    const onMove = (e: PointerEvent) => {
+      if (!dragging) return;
+      const st = useModelStore.getState();
+      const active = st.models.find((m) => m.id === st.activeModelId);
+      if (!active) return;
+
+      const dx = e.clientX - lastX;
+      const dy = e.clientY - lastY;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      shiftKey = e.shiftKey;
+
+      const ft = active.fineTuning;
+      const factor = st.scaleRatio?.factor ?? 1;
+
+      if (button === 2) {
+        // Right button: rotate
+        const sens = 0.4; // deg per pixel
+        if (shiftKey) {
+          useModelStore.getState().setFineTuning({ rotZ: ft.rotZ + dx * sens });
+        } else {
+          useModelStore.getState().setFineTuning({
+            rotY: ft.rotY + dx * sens,
+            rotX: ft.rotX + dy * sens,
+          });
+        }
+      } else if (button === 1 || (button === 0 && shiftKey)) {
+        // Middle or Shift+left: depth (Z in camera space)
+        const worldDelta = dy * pixelsPerWorldUnit;
+        const camDir = new THREE.Vector3();
+        camera.getWorldDirection(camDir);
+        const move = camDir.multiplyScalar(worldDelta).divideScalar(factor);
+        useModelStore.getState().setFineTuning({
+          posX: ft.posX + move.x,
+          posY: ft.posY + move.y,
+          posZ: ft.posZ + move.z,
+        });
+      } else {
+        // Left: translate in camera plane
+        const right = new THREE.Vector3();
+        const up = new THREE.Vector3();
+        camera.matrixWorld.extractBasis(right, up, new THREE.Vector3());
+        const worldDX = dx * pixelsPerWorldUnit;
+        const worldDY = -dy * pixelsPerWorldUnit;
+        const move = right.multiplyScalar(worldDX).add(up.multiplyScalar(worldDY)).divideScalar(factor);
+        useModelStore.getState().setFineTuning({
+          posX: ft.posX + move.x,
+          posY: ft.posY + move.y,
+          posZ: ft.posZ + move.z,
+        });
+      }
+    };
+
+    const onUp = (e: PointerEvent) => {
+      dragging = false;
+      (e.target as Element).releasePointerCapture?.(e.pointerId);
+    };
+
+    const onContext = (e: MouseEvent) => e.preventDefault();
+
+    canvas.addEventListener('pointerdown', onDown);
+    canvas.addEventListener('pointermove', onMove);
+    canvas.addEventListener('pointerup', onUp);
+    canvas.addEventListener('pointercancel', onUp);
+    canvas.addEventListener('contextmenu', onContext);
+    return () => {
+      canvas.removeEventListener('pointerdown', onDown);
+      canvas.removeEventListener('pointermove', onMove);
+      canvas.removeEventListener('pointerup', onUp);
+      canvas.removeEventListener('pointercancel', onUp);
+      canvas.removeEventListener('contextmenu', onContext);
+      gl.domElement.style.cursor = 'grab';
+    };
+  }, [positionMode, activeId, camera, gl, scene]);
+
+  return null;
+}
+
+
+
 export function ModelViewerCanvas({ url }: ModelViewerProps) {
+  const positionMode = useModelStore((s) => s.positionMode);
+  const measureMode = useModelStore((s) => s.measureMode);
   return (
     <Canvas
       camera={{ position: [2, 2, 2], fov: 50, near: 0.001, far: 1000 }}
@@ -536,12 +670,15 @@ export function ModelViewerCanvas({ url }: ModelViewerProps) {
       <GridLayer />
       <GridAutoFollower />
 
+      <PositionDragHandler />
+
       <OrbitControls
         makeDefault
         enableDamping
         dampingFactor={0.1}
         minDistance={0.05}
         maxDistance={50}
+        enabled={!positionMode && !measureMode}
       />
     </Canvas>
   );

src/stores/useModelStore.ts

@@ -212,6 +212,8 @@ interface ModelStore {
 
   measureMode: boolean;
   setMeasureMode: (on: boolean) => void;
+  positionMode: boolean;
+  setPositionMode: (on: boolean) => void;
   measurePoints: MeasurePoint[];
   addMeasurePoint: (p: MeasurePoint) => void;
   measurements: Measurement[];
@@ -442,7 +444,9 @@ export const useModelStore = create<ModelStore>((set, get) => ({
   resetChecklist: () => set({ checklist: defaultChecklist.map(i => ({ ...i })) }),
 
   measureMode: false,
-  setMeasureMode: (measureMode) => set({ measureMode, measurePoints: [] }),
+  setMeasureMode: (measureMode) => set((s) => ({ measureMode, measurePoints: [], positionMode: measureMode ? false : s.positionMode })),
+  positionMode: false,
+  setPositionMode: (positionMode) => set((s) => ({ positionMode, measureMode: positionMode ? false : s.measureMode })),
   measurePoints: [],
   addMeasurePoint: (p) => set((state) => {
     const points = [...state.measurePoints, p];