Adicionou contadores de escala

X-Lovable-Edit-ID: edt-9453b67c-1852-44ce-9e57-ad213e5047fc
Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
2026-05-14 11:30:35 +00:00
10 changed files with 270 additions and 126 deletions
+77 -92
View File
@@ -1,111 +1,96 @@
## Objetivo ## Objetivo
Construir uma **"giga de teste"** (DevKit) que vista o app com simulação completa de XR + instrumentação, permitindo: Adicionar um botão **"Escala"** com presets de redução (1:2, 1:4, 1:8, 1:10, 1:20, 1:33, 1:50, 1:100, 1:200) e ampliação (2:1, 4:1, 10:1), disponível tanto no Viewer 2D quanto no XR. Ao mudar a escala, o app ajusta automaticamente as ferramentas que dependem de tamanho real (medições, sensibilidade do ajuste fino, snap, hover auto-detect), mantendo todos os números exibidos em **mm reais da peça**.
1. **Você (sem Quest):** validar quase 100% do fluxo direto no navegador, incluindo grab, posicionamento e medição. ## Conceito chave
2. **Testador (com Quest):** receber um build com painel de diagnóstico visível e log persistente, devolvendo feedback objetivo.
3. **Remoção limpa:** quando o app estiver maduro, apagar 1 pasta + remover 3 imports + apagar 1 flag → app puro restaurado.
## Princípios de isolamento - "1:N" significa: o modelo é renderizado **N vezes menor** que o real (renderScale = 1/N).
- "N:1" significa: renderizado N vezes maior (renderScale = N).
- Os dados do modelo continuam em mm reais. Só o `scale` aplicado ao `<group>` muda.
- **Medições, sensibilidades, indicadores e relatório PDF continuam exibindo mm REAIS** — o app multiplica/divide pelo fator quando necessário.
- Todo código do DevKit vive em **`src/devkit/`** (pasta nova). Nada de código de simulação espalhado pelo app. ## Mudanças
- Ativação por **flag única** `?devkit=1` na URL **OU** `localStorage.setItem('devkit', '1')`. Sem flag → app roda exatamente como hoje.
- Componentes do DevKit são montados condicionalmente em **3 pontos de injeção** apenas (todos em `XRSession.tsx`). Esses pontos ficam marcados com comentário `// DEVKIT: remove this block` para facilitar a limpeza futura.
- Zero alteração de lógica de negócio. Tudo que o DevKit faz é **observar** (logger), **simular** (fake inputs) ou **adicionar UI extra** (painel).
## Componentes do DevKit ### 1. Store (`useModelStore.ts`)
### 1. `devkit/DevKitFlag.ts` — detector de modo Adicionar:
Hook `useDevKit()` retorna `boolean`. Lê `URLSearchParams` + `localStorage`. Se `true`, ativa todo o resto.
### 2. `devkit/SimXRSession.tsx` — modo "Faux-XR" pra desktop
**Resolve seu problema #1:** validar tudo sem headset.
Quando ativado (botão "🧪 Simular XR" no header, só aparece com `?devkit=1`):
- Não chama `store.enterAR()` (que falha sem HTTPS/headset compatível).
- Em vez disso, força `inXR=true` num estado paralelo `simXR`.
- Renderiza a árvore `XRGrabbable + XRModel` **sem** `XRHitTestPlacement` (auto-posiciona em `[0,0,-1.5]`).
- Substitui leitura de `session.inputSources` por uma fonte **fake** (ver #3).
- Câmera fica controlável por `OrbitControls` (você navega como quiser).
### 3. `devkit/FakeControllers.tsx` — controles virtuais com mouse/teclado
**Resolve seu problema #2:** testar grab sem Touch Plus.
- Desenha 2 esferas coloridas (L=azul, R=vermelho) na cena, posicionáveis por **arrastar com mouse**.
- Atalhos teclado:
- `Q` / `W` → segurar grip esquerdo / direito (analógico simulado em 1.0)
- `A` / `S` → segurar trigger esquerdo / direito
- `Setas` → mover controle ativo
- `Shift + Setas` → mover controle no eixo Z
- Expõe um `FakeInputProvider` (Context) que `useControllerGrab` consome **quando em modo DevKit**. Sem DevKit, hook continua lendo `session.inputSources` real.
- **Mudança mínima em `useControllerGrab.ts`:** uma linha checando `if (devkit) return useFakeInputs()`. Removível.
### 4. `devkit/DevPanel.tsx` — painel de diagnóstico flutuante
Painel HTML overlay (canto direito), só visível com `?devkit=1`:
- **Aba "Inputs":** valores ao vivo de cada controle (real ou fake) — grip, trigger, axes, hasPose
- **Aba "Cena":** posição/rotação/escala do grupo grabável, contagem de meshes, bbox
- **Aba "XR":** `session?.mode`, hit-test ativo, planos detectados (count + labels), FPS
- **Aba "Logs":** últimos 100 console.logs com timestamp, filtro por tag (`[XR]`, `[grab]`, `[HitTest]`)
- Botão **"Exportar relatório"** → baixa JSON com snapshot atual + screenshot do canvas. **Você pede pro testador clicar isso e te enviar o arquivo.**
### 5. `devkit/XRDevHud.tsx` — HUD in-world expandido (substitui o `XRDebugHud` atual quando ativo)
Painel 3D maior, ancorado no pulso esquerdo (não na câmera, pra não atrapalhar). Mostra mesmas infos da aba "Inputs" + "XR" do DevPanel. Visível **dentro do headset**, essencial pro testador.
### 6. `devkit/SmokeTest.tsx` — roteiro automático
Rota nova `/devkit/smoke` (só roteada com `?devkit=1`):
- Sequência scriptada: carrega demo → simula grip esquerdo → move 50cm → solta → mede 2 pontos → screenshot → checklist.
- Cada passo mostra ✅/❌ + tempo.
- Você roda antes de mandar build pro testador.
### 7. `devkit/RecordSession.tsx` — gravador de "macros"
Botão "Gravar" no DevPanel: captura por 30s todos inputs + posições da cena num JSON. Botão "Reproduzir": replay do macro. Útil pra reproduzir um bug que o testador relatou ("clico aqui, viro assim, peça desaparece").
## Pontos de injeção em `XRSession.tsx`
Apenas 3 blocos curtos, todos cercados por `{devkit && <... />}`:
```tsx
// DEVKIT: remove this block
{devkit && <SimXRButton onActivate={setSimXR} />}
// DEVKIT: remove this block
{devkit && simXR && <FakeControllers />}
// DEVKIT: remove this block
{devkit && <DevPanel />}
```
E uma linha em `useControllerGrab.ts`:
```ts ```ts
// DEVKIT: remove this conditional scaleRatio: { label: '1:1', factor: 1 } // factor = renderScale
if (typeof window !== 'undefined' && useDevKitFake()) return fakeRef; setScaleRatio: (r) => void
```
Lista de presets exportada (label + factor).
`fineTuning.scale` continua existindo para o gesto two-hand do XR; o novo `scaleRatio` é aplicado **por cima** (multiplicado) no grupo do modelo.
### 2. Cálculo de medições (`addMeasurePoint`)
Pontos A/B vêm em coordenadas world já escaladas. Para reportar mm reais:
```
distanceMM_real = distanciaWorld_mm / scaleRatio.factor
```
Atualizar a função `addMeasurePoint` para dividir pela escala atual antes de salvar `distanceMM`. Tooltips e PDF continuam usando o valor salvo (sem mudança).
### 3. Ajuste fino (`FineTuningControls` + XRHud joystick)
`POSITION_STEP` deve representar **1 mm real**. Aplicar:
```
worldStep = POSITION_STEP * scaleRatio.factor
```
Isso garante que clicar "+" desloca visualmente proporcional à escala (em escala 1:100, mexer "1 mm real" desloca 0,01 mm na cena — coerente).
Mesmo tratamento para o joystick no XR (incremento por frame multiplicado por `scaleRatio.factor`).
### 4. Auto-detect (hover hole/edge) e snap
Os limiares de detecção de furo/aresta e raio de snap são em metros world. Multiplicar pelo `scaleRatio.factor` para que continuem capturando os mesmos elementos físicos da peça.
### 5. ModelViewer
No `<group>` do modelo, multiplicar o scale final:
```
finalScale = fineTuning.scale * scaleRatio.factor
``` ```
## Como remover o DevKit no futuro (1 minuto) ### 6. UI — novo componente `ScaleSelector`
1. `rm -rf src/devkit/` Botão com ícone de régua + label atual ("1:1", "1:50"…). Ao clicar abre um Popover/Sheet com grid:
2. Em `XRSession.tsx`: deletar 3 blocos marcados `// DEVKIT:` + import.
3. Em `useControllerGrab.ts`: deletar linha marcada `// DEVKIT:`.
4. Pronto — app puro, zero resíduo.
## Entregas desta primeira leva (priorizadas) ```text
Reduzir Ampliar
[1:1*] [1:2] [1:4] [1:8] [2:1]
[1:10] [1:20] [1:33] [1:50] [4:1]
[1:100] [1:200] [10:1]
```
Pra não fazer tudo de uma vez, **proponho entregar nesta ordem**, validando cada etapa antes da próxima: Toast ao trocar: *"Escala 1:50 — medições e controles ajustados para mm reais"*.
**Fase 1 (essencial — destrava você hoje):** Inserir o componente em:
- DevKitFlag + SimXRSession + FakeControllers + DevPanel (aba Inputs + Logs) - **`ViewerControls`** (canto dos controles flutuantes do Viewer 2D)
- **`XRHud`** (linha de ferramentas, próximo ao toggle "Escala ON/OFF" two-hand)
**Fase 2 (essencial — instrumenta o testador):** ### 7. MeasurementsList & FineTuningControls
- XRDevHud expandido + DevPanel aba Cena/XR + Exportar relatório
**Fase 3 (qualidade de vida):** Adicionar pequeno badge "Escala atual: 1:50" no topo dos painéis de Medições e Ajuste Fino para o usuário lembrar que os valores exibidos são mm reais.
- SmokeTest + RecordSession
Posso entregar a **Fase 1 inteira** agora numa única leva, e as fases 2 e 3 sob demanda quando você validar que a 1 te serve. Cabe? ## O que NÃO muda
## Detalhes técnicos - Gesto two-hand de escala (`allowScale`) continua funcionando para ajuste livre — mas se o usuário usar o preset, o gesto reseta para 1.0 e o preset assume.
- Relatório PDF: registra a escala atual no cabeçalho.
- Grid e checklist: sem alteração.
- **Sem novas dependências.** Tudo com Three.js, R3F, Zustand já presentes. ## Arquivos tocados
- **TypeScript rigoroso.** Tipos compartilhados entre real e fake (mesma interface `ControllerGrabSnapshot`).
- **Zero impacto em produção:** sem flag, bundle do DevKit nem é importado se usarmos `React.lazy()` na entrada. - `src/stores/useModelStore.ts` — novo estado + ajuste em `addMeasurePoint`
- **Hot-swappable:** ligar/desligar o DevKit não recarrega a página (estado da cena preservado). - `src/components/ScaleSelector.tsx` — novo (popover com presets)
- `src/components/ViewerControls.tsx` — incluir `<ScaleSelector />`
- `src/components/XRHud.tsx` — incluir `<ScaleSelector />` + multiplicar passos do joystick
- `src/components/FineTuningControls.tsx` — multiplicar passos pela escala + badge
- `src/components/MeasurementsList.tsx` — badge da escala
- `src/components/three/ModelViewer.tsx` — aplicar `scaleRatio.factor` no group + ajustar threshold de snap/hover
- `src/lib/generateReport.ts` — incluir escala no cabeçalho do PDF
## Validação
- Carregar viga demo, medir uma aresta conhecida em 1:1 → trocar para 1:10 → remedir mesma aresta → valor em mm deve permanecer igual.
- Em 1:50, clicar "+" no ajuste fino X uma vez → modelo desloca visualmente pouquíssimo (esperado), mas valor exibido sobe 1 mm.
- No XR, joystick em 1:100 não "voa" o modelo a metros de distância.
+10 -5
View File
@@ -44,7 +44,7 @@ function AxisControl({
} }
export function FineTuningControls() { export function FineTuningControls() {
const { fineTuning, setFineTuning, resetFineTuning } = useModelStore(); const { fineTuning, setFineTuning, resetFineTuning, scaleRatio } = useModelStore();
return ( return (
<div className="space-y-3"> <div className="space-y-3">
@@ -52,10 +52,15 @@ export function FineTuningControls() {
<h3 className="font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground"> <h3 className="font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
Ajuste Fino Ajuste Fino
</h3> </h3>
<Button variant="ghost" size="sm" className="h-6 text-[10px] gap-1" onClick={resetFineTuning}> <div className="flex items-center gap-2">
<RefreshCw className="h-3 w-3" /> <span className="font-mono text-[10px] text-primary" title="Passos em mm reais (compensados pela escala)">
Resetar {scaleRatio.label}
</Button> </span>
<Button variant="ghost" size="sm" className="h-6 text-[10px] gap-1" onClick={resetFineTuning}>
<RefreshCw className="h-3 w-3" />
Resetar
</Button>
</div>
</div> </div>
{/* Position */} {/* Position */}
+9 -4
View File
@@ -3,15 +3,20 @@ import { Button } from '@/components/ui/button';
import { useModelStore } from '@/stores/useModelStore'; import { useModelStore } from '@/stores/useModelStore';
export function MeasurementsList() { export function MeasurementsList() {
const { measurements, removeMeasurement } = useModelStore(); const { measurements, removeMeasurement, scaleRatio } = useModelStore();
if (measurements.length === 0) return null; if (measurements.length === 0) return null;
return ( return (
<div className="space-y-2"> <div className="space-y-2">
<h3 className="font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground"> <div className="flex items-center justify-between">
Medições <h3 className="font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
</h3> Medições
</h3>
<span className="font-mono text-[10px] text-primary" title="Valores em mm reais (compensados pela escala)">
mm reais · {scaleRatio.label}
</span>
</div>
<div className="space-y-1.5"> <div className="space-y-1.5">
{measurements.map((m, i) => ( {measurements.map((m, i) => (
<div key={m.id} className="flex items-center justify-between rounded-lg border bg-muted/30 px-3 py-2"> <div key={m.id} className="flex items-center justify-between rounded-lg border bg-muted/30 px-3 py-2">
+102
View File
@@ -0,0 +1,102 @@
import { Maximize, Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { useModelStore, SCALE_PRESETS, type ScaleRatio } from '@/stores/useModelStore';
import { toast } from 'sonner';
interface ScaleSelectorProps {
/** "compact" = small icon-style for XR HUD, "default" = labeled button for 2D viewer */
variant?: 'default' | 'compact';
}
export function ScaleSelector({ variant = 'default' }: ScaleSelectorProps) {
const { scaleRatio, setScaleRatio, resetFineTuning } = useModelStore();
const reductions = SCALE_PRESETS.filter(p => p.factor < 1);
const enlargements = SCALE_PRESETS.filter(p => p.factor > 1);
const oneToOne = SCALE_PRESETS.find(p => p.label === '1:1')!;
const apply = (r: ScaleRatio) => {
setScaleRatio(r);
// Reset two-hand scale gesture so it doesn't fight the preset.
if (r.label !== '1:1') resetFineTuning();
toast.success(`Escala ${r.label}`, {
description: 'Medições e ajuste fino mostrados em mm reais.',
});
};
const Trigger = variant === 'compact' ? (
<Button variant="outline" size="sm" className="h-8 gap-1.5 text-[10px] font-mono" title="Escala do modelo">
<Maximize className="h-3.5 w-3.5" />
{scaleRatio.label}
</Button>
) : (
<Button variant={scaleRatio.label !== '1:1' ? 'default' : 'outline'} size="sm" className="gap-2 h-9">
<Maximize className="h-3.5 w-3.5" />
<span className="font-mono text-xs">Escala {scaleRatio.label}</span>
</Button>
);
return (
<Popover>
<PopoverTrigger asChild>{Trigger}</PopoverTrigger>
<PopoverContent className="w-72 space-y-3" side="top" align="start">
<div>
<p className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground mb-1">
Escala atual
</p>
<p className="font-mono text-sm font-bold text-primary">{scaleRatio.label}</p>
<p className="text-[10px] text-muted-foreground mt-1">
Medições, ajuste fino e snap são compensados todos os valores exibidos continuam em mm reais.
</p>
</div>
<div>
<p className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground mb-1.5">
Real
</p>
<PresetButton current={scaleRatio} preset={oneToOne} onSelect={apply} />
</div>
<div>
<p className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground mb-1.5">
Reduzir (modelo menor)
</p>
<div className="grid grid-cols-3 gap-1.5">
{reductions.map(p => (
<PresetButton key={p.label} current={scaleRatio} preset={p} onSelect={apply} />
))}
</div>
</div>
<div>
<p className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground mb-1.5">
Ampliar (modelo maior)
</p>
<div className="grid grid-cols-3 gap-1.5">
{enlargements.map(p => (
<PresetButton key={p.label} current={scaleRatio} preset={p} onSelect={apply} />
))}
</div>
</div>
</PopoverContent>
</Popover>
);
}
function PresetButton({
preset, current, onSelect,
}: { preset: ScaleRatio; current: ScaleRatio; onSelect: (r: ScaleRatio) => void }) {
const active = preset.label === current.label;
return (
<Button
variant={active ? 'default' : 'outline'}
size="sm"
className="h-8 font-mono text-[11px] gap-1"
onClick={() => onSelect(preset)}
>
{active && <Check className="h-3 w-3" />}
{preset.label}
</Button>
);
}
+4 -1
View File
@@ -3,6 +3,7 @@ import { Slider } from '@/components/ui/slider';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { useModelStore } from '@/stores/useModelStore'; import { useModelStore } from '@/stores/useModelStore';
import { ScaleSelector } from '@/components/ScaleSelector';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { toast } from 'sonner'; import { toast } from 'sonner';
@@ -69,7 +70,9 @@ export function ViewerControls() {
<span className="font-mono text-xs">Grid</span> <span className="font-mono text-xs">Grid</span>
</Button> </Button>
{/* Render mode cycle: solid -> wireframe -> edges */} {/* Scale presets */}
<ScaleSelector />
<Button <Button
variant={renderMode !== 'solid' ? 'default' : 'outline'} variant={renderMode !== 'solid' ? 'default' : 'outline'}
size="sm" size="sm"
+4
View File
@@ -9,6 +9,7 @@ import { Slider } from '@/components/ui/slider';
import { ScrollArea } from '@/components/ui/scroll-area'; import { ScrollArea } from '@/components/ui/scroll-area';
import { useModelStore } from '@/stores/useModelStore'; import { useModelStore } from '@/stores/useModelStore';
import { InspectionChecklist } from '@/components/InspectionChecklist'; import { InspectionChecklist } from '@/components/InspectionChecklist';
import { ScaleSelector } from '@/components/ScaleSelector';
import { toast } from 'sonner'; import { toast } from 'sonner';
const POSITION_STEP = 0.001; const POSITION_STEP = 0.001;
@@ -310,6 +311,9 @@ export function XRHud({ freeMove, onToggleFreeMove, placementMode = false, onTog
</Button> </Button>
)} )}
{/* Scale presets */}
<ScaleSelector variant="compact" />
<Button <Button
variant={freeMove ? 'default' : 'outline'} variant={freeMove ? 'default' : 'outline'}
size="sm" className="h-8 gap-1.5 text-[10px] font-mono" size="sm" className="h-8 gap-1.5 text-[10px] font-mono"
+15 -11
View File
@@ -118,19 +118,23 @@ function GLBModel({ url }: { url: string }) {
const rotYRad = (fineTuning.rotY * Math.PI) / 180; const rotYRad = (fineTuning.rotY * Math.PI) / 180;
const rotZRad = (fineTuning.rotZ * Math.PI) / 180; const rotZRad = (fineTuning.rotZ * Math.PI) / 180;
const s = fineTuning.scale ?? 1; const s = fineTuning.scale ?? 1;
const scaleRatio = useModelStore((st) => st.scaleRatio);
const renderFactor = scaleRatio?.factor ?? 1;
return ( return (
<group <group scale={[renderFactor, renderFactor, renderFactor]}>
ref={ref} <group
position={[ ref={ref}
-modelInfo.center.x + fineTuning.posX, position={[
-modelInfo.center.y + fineTuning.posY, -modelInfo.center.x + fineTuning.posX,
-modelInfo.center.z + fineTuning.posZ, -modelInfo.center.y + fineTuning.posY,
]} -modelInfo.center.z + fineTuning.posZ,
rotation={[rotXRad, rotYRad, rotZRad]} ]}
scale={[s, s, s]} rotation={[rotXRad, rotYRad, rotZRad]}
> scale={[s, s, s]}
<primitive object={scene} /> >
<primitive object={scene} />
</group>
</group> </group>
); );
} }
+2 -1
View File
@@ -8,6 +8,7 @@ interface ReportData {
checklist: ChecklistItem[]; checklist: ChecklistItem[];
measurements: Measurement[]; measurements: Measurement[];
screenshots: string[]; screenshots: string[];
scaleLabel?: string;
} }
const STATUS_LABELS: Record<string, string> = { const STATUS_LABELS: Record<string, string> = {
@@ -74,7 +75,7 @@ export async function generateInspectionReport(data: ReportData) {
const infoLines = [ const infoLines = [
['Arquivo:', data.fileName], ['Arquivo:', data.fileName],
['Tamanho:', `${(data.fileSize / (1024 * 1024)).toFixed(2)} MB`], ['Tamanho:', `${(data.fileSize / (1024 * 1024)).toFixed(2)} MB`],
['Escala:', '1:1 (mm)'], ['Escala:', `${data.scaleLabel ?? '1:1'} — valores em mm reais`],
]; ];
for (const [label, value] of infoLines) { for (const [label, value] of infoLines) {
pdf.setFont('helvetica', 'bold'); pdf.setFont('helvetica', 'bold');
+15 -11
View File
@@ -117,19 +117,23 @@ function XRModel({ url }: { url: string }) {
const rotYRad = (fineTuning.rotY * Math.PI) / 180; const rotYRad = (fineTuning.rotY * Math.PI) / 180;
const rotZRad = (fineTuning.rotZ * Math.PI) / 180; const rotZRad = (fineTuning.rotZ * Math.PI) / 180;
const s = fineTuning.scale ?? 1; const s = fineTuning.scale ?? 1;
const scaleRatio = useModelStore((st) => st.scaleRatio);
const renderFactor = scaleRatio?.factor ?? 1;
return ( return (
<group <group scale={[renderFactor, renderFactor, renderFactor]}>
ref={ref} <group
position={[ ref={ref}
-modelInfo.center.x + fineTuning.posX, position={[
-modelInfo.center.y + fineTuning.posY, -modelInfo.center.x + fineTuning.posX,
-modelInfo.center.z + fineTuning.posZ, -modelInfo.center.y + fineTuning.posY,
]} -modelInfo.center.z + fineTuning.posZ,
rotation={[rotXRad, rotYRad, rotZRad]} ]}
scale={[s, s, s]} rotation={[rotXRad, rotYRad, rotZRad]}
> scale={[s, s, s]}
<primitive object={scene} /> >
<primitive object={scene} />
</group>
</group> </group>
); );
} }
+32 -1
View File
@@ -1,5 +1,26 @@
import { create } from 'zustand'; import { create } from 'zustand';
export interface ScaleRatio {
label: string; // e.g. "1:50", "2:1", "1:1"
factor: number; // render multiplier: 1:50 => 0.02, 2:1 => 2, 1:1 => 1
}
export const SCALE_PRESETS: ScaleRatio[] = [
{ label: '10:1', factor: 10 },
{ label: '4:1', factor: 4 },
{ label: '2:1', factor: 2 },
{ label: '1:1', factor: 1 },
{ label: '1:2', factor: 1 / 2 },
{ label: '1:4', factor: 1 / 4 },
{ label: '1:8', factor: 1 / 8 },
{ label: '1:10', factor: 1 / 10 },
{ label: '1:20', factor: 1 / 20 },
{ label: '1:33', factor: 1 / 33 },
{ label: '1:50', factor: 1 / 50 },
{ label: '1:100', factor: 1 / 100 },
{ label: '1:200', factor: 1 / 200 },
];
interface ModelInfo { interface ModelInfo {
fileName: string; fileName: string;
fileSize: number; fileSize: number;
@@ -71,6 +92,9 @@ interface ModelStore {
xrSupported: boolean | null; xrSupported: boolean | null;
setXrSupported: (supported: boolean | null) => void; setXrSupported: (supported: boolean | null) => void;
scaleRatio: ScaleRatio;
setScaleRatio: (r: ScaleRatio) => void;
opacity: number; opacity: number;
setOpacity: (opacity: number) => void; setOpacity: (opacity: number) => void;
@@ -139,6 +163,9 @@ export const useModelStore = create<ModelStore>((set) => ({
xrSupported: null, xrSupported: null,
setXrSupported: (xrSupported) => set({ xrSupported }), setXrSupported: (xrSupported) => set({ xrSupported }),
scaleRatio: SCALE_PRESETS.find(p => p.label === '1:1')!,
setScaleRatio: (scaleRatio) => set({ scaleRatio }),
opacity: 1, opacity: 1,
setOpacity: (opacity) => set({ opacity }), setOpacity: (opacity) => set({ opacity }),
@@ -185,7 +212,11 @@ export const useModelStore = create<ModelStore>((set) => ({
const dx = (a.x - b.x) * 1000; const dx = (a.x - b.x) * 1000;
const dy = (a.y - b.y) * 1000; const dy = (a.y - b.y) * 1000;
const dz = (a.z - b.z) * 1000; const dz = (a.z - b.z) * 1000;
const distanceMM = Math.sqrt(dx * dx + dy * dy + dz * dz); const distanceWorldMM = Math.sqrt(dx * dx + dy * dy + dz * dz);
// Compensate for current render scale: world ≠ real when scaled.
// realMM = worldMM / factor (factor 1/50 → multiply by 50).
const factor = state.scaleRatio?.factor ?? 1;
const distanceMM = distanceWorldMM / factor;
const measurement: Measurement = { const measurement: Measurement = {
id: `m_${Date.now()}`, id: `m_${Date.now()}`,
pointA: a, pointA: a,