rodrigo/anatomia
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use corpo real exame fisico

Browse Source
This commit is contained in:
Rodrigo Bertoldo de Sousa Martins committed 2026-09-10 20:07:34 -03:00
1 parent 939293ba60
commit 7e8963135b
4 files changed
+166 -108
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/viewer/ExamMarkers.tsx
+58
View File
@@ -0,0 +1,58 @@
import { Html } from "@react-three/drei";
import * as THREE from "three";
import { useAtlasStore } from "../../store/useAtlasStore.js";
import type { ExamPoint, ExamTechnique } from "../../data/physicalExam.js";
import { TECHNIQUES } from "../../data/physicalExam.js";
// Roda DENTRO do mesmo <Canvas> do Scene (recebido via prop "children" —
// ver Scene.tsx) pra poder usar <Html> do drei e o bounding box real do
// corpo carregado (contentBox no store, o mesmo usado pelo plano de corte e
// pela navegação rápida por região). Cada ponto de exame é dado como
// FRAÇÃO do corpo (ver data/physicalExam.ts), convertida aqui pra
// coordenada absoluta — assim os pontos acompanham o corpo real não
// importa a escala/origem carregada.
export function ExamMarkers({
points,
selectedId,
onSelect,
}: {
points: ExamPoint[];
selectedId: string | null;
onSelect: (id: string) => void;
}) {
const contentBox = useAtlasStore((s) => s.contentBox);
if (!contentBox) return null;
const min = new THREE.Vector3(...contentBox.min);
const max = new THREE.Vector3(...contentBox.max);
const techniqueColor = (t: ExamTechnique) => TECHNIQUES.find((x) => x.key === t)?.color ?? "#fff";
return (
<>
{points.map((p) => {
const [fx, fy, fz] = p.fraction;
const position: [number, number, number] = [
THREE.MathUtils.lerp(min.x, max.x, fx),
THREE.MathUtils.lerp(min.y, max.y, fy),
THREE.MathUtils.lerp(min.z, max.z, fz),
];
const isSelected = p.id === selectedId;
const color = techniqueColor(p.technique);
return (
<Html key={p.id} position={position} center distanceFactor={4} zIndexRange={[10, 0]}>
<button
onClick={() => onSelect(p.id)}
title={p.name}
className="w-4 h-4 rounded-full border-2 border-white/80 transition-transform hover:scale-125"
style={{
backgroundColor: color,
boxShadow: isSelected ? `0 0 0 5px ${color}55` : undefined,
transform: isSelected ? "scale(1.4)" : undefined,
}}
/>
</Html>
);
})}
</>
);
}
frontend/src/components/viewer/Scene.tsx
+13 -2
View File
@@ -1,4 +1,4 @@
import { Suspense, useEffect, useMemo, useRef } from "react";
import { Suspense, useEffect, useMemo, useRef, type ReactNode } from "react";
import { Canvas, useThree } from "@react-three/fiber";
import { CameraControls, Grid } from "@react-three/drei";
import * as THREE from "three";
@@ -173,7 +173,17 @@ function CameraController({ modelFiles }: { modelFiles: string[] }) {
);
}
export function Scene({ bySlug }: { bySlug: Map<string, Structure> }) {
export function Scene({
bySlug,
children,
}: {
bySlug: Map<string, Structure>;
// Ponto de extensão pra conteúdo 3D extra dentro do MESMO Canvas (e do
// mesmo contexto do react-three-fiber) — usado pelo módulo de Exame
// Físico pra desenhar os pontos de exame em cima do corpo real, sem
// duplicar toda a lógica de carregamento de malhas/câmera daqui.
children?: ReactNode;
}) {
const visibleSystems = useAtlasStore((s) => s.visibleSystems);
const selectedStructureId = useAtlasStore((s) => s.selectedStructureId);
const selectStructure = useAtlasStore((s) => s.selectStructure);
@@ -245,6 +255,7 @@ export function Scene({ bySlug }: { bySlug: Map<string, Structure> }) {
infiniteGrid
/>
<CameraController modelFiles={modelFiles} />
{children}
</Canvas>
);
}
frontend/src/data/physicalExam.ts
+50 -41
View File
@@ -1,11 +1,20 @@
// Pontos do módulo de Exame Físico — coordenadas no MESMO sistema do
// boneco esquemático (ver components/viewer/Mannequin.tsx): tórax é uma
// caixa centrada em (0, 1.2, 0), abdome em (0, 0.75, 0), braços/pernas são
// cilindros em x = ±0.28 / ±0.11. Convenção usada aqui: x negativo = lado
// DIREITO do paciente, x positivo = lado ESQUERDO do paciente (o boneco é
// visto de frente, então a direita do paciente fica à esquerda de quem
// olha — por isso cada descrição já diz o lado por extenso, pra não
// depender de decorar a convenção).
// Pontos do módulo de Exame Físico, posicionados sobre o corpo 3D REAL do
// Z-Anatomy (não um boneco geométrico) — por isso a posição de cada ponto
// é dada como FRAÇÃO (0 a 1) do bounding box do conteúdo carregado, e não
// como coordenada absoluta: o corpo real não tem escala/origem fixa (é
// recalculado a cada carga, ver computeVisibleBoundingBox em Scene.tsx), só
// a PROPORÇÃO do corpo é estável. As frações de altura (fy) usam as mesmas
// faixas por região já validadas em Scene.tsx (BODY_REGION_Y_RANGES):
// cabeça [0.85,1], pescoço [0.8,0.87], tórax [0.62,0.83], abdome [0.52,0.65],
// pelve [0.42,0.55], membros superiores [0.55,0.88], membros inferiores [0,0.45].
//
// fx = 0..1 esquerda↔direita da TELA (não do paciente — cada ponto já diz
// o lado anatômico por extenso na descrição); fz = 0..1 trás↔frente
// (assumindo o corpo de frente pra +Z, mesma convenção usada em
// PlanesPage). Como as posições são só uma estimativa geométrica (não dá
// pra inspecionar visualmente as coordenadas reais do modelo a partir daqui),
// os números podem precisar de ajuste fino depois de testar no app — se um
// ponto aparecer decolado do corpo, é só mudar a fração aqui.
export type ExamTechnique = "inspecao" | "palpacao" | "percussao" | "ausculta";
export const TECHNIQUES: { key: ExamTechnique; label: string; color: string }[] = [
@@ -20,7 +29,7 @@ export interface ExamPoint {
name: string;
system: string;
technique: ExamTechnique;
position: [number, number, number];
fraction: [number, number, number];
howTo: string;
whatFor: string;
}
@@ -32,7 +41,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Ectoscopia Geral",
system: "Geral",
technique: "inspecao",
position: [0, 1.65, 0.1],
fraction: [0.5, 0.93, 0.85],
howTo: "Observe o paciente por completo antes de tocar: estado geral, nível de consciência, postura, fácies, coloração da pele e mucosas, hidratação.",
whatFor: "Primeira etapa de qualquer exame físico — muitas pistas diagnósticas (icterícia, cianose, palidez, dispneia) aparecem só de olhar, antes de qualquer manobra.",
},
@@ -43,7 +52,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Foco Aórtico",
system: "Cardiovascular",
technique: "ausculta",
position: [-0.05, 1.4, 0.12],
fraction: [0.44, 0.8, 0.85],
howTo: "2º espaço intercostal, à direita do esterno. Ausculte com o diafragma do estetoscópio, paciente sentado ou deitado.",
whatFor: "Melhor foco para a valva aórtica — sopros de estenose/insuficiência aórtica costumam ser mais audíveis aqui.",
},
@@ -52,7 +61,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Foco Pulmonar",
system: "Cardiovascular",
technique: "ausculta",
position: [0.05, 1.4, 0.12],
fraction: [0.56, 0.8, 0.85],
howTo: "2º espaço intercostal, à esquerda do esterno.",
whatFor: "Melhor foco para a valva pulmonar — sopros de estenose/insuficiência pulmonar e desdobramento de B2.",
},
@@ -61,7 +70,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Foco Aórtico Acessório (Erb)",
system: "Cardiovascular",
technique: "ausculta",
position: [0.05, 1.32, 0.12],
fraction: [0.56, 0.76, 0.85],
howTo: "3º espaço intercostal, à esquerda do esterno.",
whatFor: "Bom ponto para captar sopros diastólicos de insuficiência aórtica, que às vezes irradiam melhor pra cá do que pro foco aórtico clássico.",
},
@@ -70,7 +79,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Foco Tricúspide",
system: "Cardiovascular",
technique: "ausculta",
position: [0.05, 1.22, 0.12],
fraction: [0.55, 0.71, 0.85],
howTo: "4º-5º espaço intercostal, na borda esternal esquerda baixa.",
whatFor: "Melhor foco para a valva tricúspide — sopros de insuficiência/estenose tricúspide.",
},
@@ -79,7 +88,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Foco Mitral (Ápice)",
system: "Cardiovascular",
technique: "ausculta",
position: [0.14, 1.16, 0.13],
fraction: [0.62, 0.68, 0.85],
howTo: "5º espaço intercostal esquerdo, na linha hemiclavicular (região do ictus cordis).",
whatFor: "Melhor foco para a valva mitral — sopro de estenose mitral (ruflar diastólico) e insuficiência mitral (sopro holossistólico).",
},
@@ -88,7 +97,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Ictus Cordis (Choque de Ponta)",
system: "Cardiovascular",
technique: "palpacao",
position: [0.16, 1.18, 0.135],
fraction: [0.63, 0.68, 0.86],
howTo: "Palpe com a polpa dos dedos (ou a região tenar) o 5º espaço intercostal esquerdo, linha hemiclavicular.",
whatFor: "Localiza o ápice do coração; desvio lateral ou impulso muito forte sugere cardiomegalia/hipertrofia ventricular.",
},
@@ -97,7 +106,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Frêmito Precordial",
system: "Cardiovascular",
technique: "palpacao",
position: [0.08, 1.28, 0.12],
fraction: [0.58, 0.74, 0.85],
howTo: "Apoie a palma da mão sobre o precórdio e sinta uma vibração (\"gato ronronando\").",
whatFor: "Frêmito = sopro cardíaco intenso o bastante para ser sentido, geralmente indica lesão valvar significativa.",
},
@@ -108,7 +117,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Ápice Pulmonar Direito",
system: "Respiratório",
technique: "ausculta",
position: [-0.12, 1.42, 0.11],
fraction: [0.38, 0.815, 0.8],
howTo: "Ausculte logo acima da clavícula direita, pedindo ao paciente para respirar fundo pela boca.",
whatFor: "Murmúrio vesicular reduzido/ausente ou ruídos adventícios (estertores, sibilos) localizados aqui sugerem acometimento do ápice pulmonar direito.",
},
@@ -117,7 +126,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Ápice Pulmonar Esquerdo",
system: "Respiratório",
technique: "ausculta",
position: [0.12, 1.42, 0.11],
fraction: [0.62, 0.815, 0.8],
howTo: "Mesma manobra do lado esquerdo, logo acima da clavícula esquerda.",
whatFor: "Comparação bilateral é essencial — assimetria entre os dois ápices é o achado mais importante.",
},
@@ -126,7 +135,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Campo Médio Direito",
system: "Respiratório",
technique: "ausculta",
position: [-0.15, 1.22, 0.1],
fraction: [0.35, 0.72, 0.78],
howTo: "Ausculte na linha hemiclavicular/axilar direita, altura do 4º espaço intercostal.",
whatFor: "Zona onde sopros tubários e estertores de pneumonia em lobo médio costumam aparecer primeiro.",
},
@@ -135,7 +144,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Campo Médio Esquerdo",
system: "Respiratório",
technique: "ausculta",
position: [0.15, 1.22, 0.1],
fraction: [0.65, 0.72, 0.78],
howTo: "Mesma altura, do lado esquerdo.",
whatFor: "Comparação bilateral do murmúrio vesicular e de ruídos adventícios.",
},
@@ -144,7 +153,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Base Pulmonar Direita",
system: "Respiratório",
technique: "ausculta",
position: [-0.17, 1.0, 0.08],
fraction: [0.33, 0.645, 0.75],
howTo: "Ausculte nas bases (região inferior do tórax, de preferência também pelas costas).",
whatFor: "Local clássico de estertores crepitantes (insuficiência cardíaca, pneumonia de base) e de derrame pleural (murmúrio abolido).",
},
@@ -153,7 +162,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Base Pulmonar Esquerda",
system: "Respiratório",
technique: "ausculta",
position: [0.17, 1.0, 0.08],
fraction: [0.67, 0.645, 0.75],
howTo: "Mesma região, do lado esquerdo.",
whatFor: "Comparação bilateral das bases — assimetria é o achado mais valioso.",
},
@@ -162,7 +171,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Expansibilidade Torácica",
system: "Respiratório",
technique: "palpacao",
position: [0, 1.05, -0.12],
fraction: [0.5, 0.7, 0.15],
howTo: "Coloque as mãos espalmadas nas costas do paciente, polegares próximos à linha média, e peça para respirar fundo — observe se os polegares se afastam simetricamente.",
whatFor: "Redução da expansibilidade de um lado sugere derrame pleural, atelectasia ou pneumotórax naquele hemitórax.",
},
@@ -171,7 +180,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Frêmito Toracovocal",
system: "Respiratório",
technique: "palpacao",
position: [0.1, 1.15, 0.11],
fraction: [0.6, 0.73, 0.8],
howTo: "Apoie a borda ulnar das mãos no tórax e peça ao paciente para dizer \"trinta e três\" repetidamente, comparando os dois lados.",
whatFor: "Aumentado em condensações (pneumonia); diminuído/abolido em derrame pleural, pneumotórax ou DPOC.",
},
@@ -180,7 +189,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Percussão dos Campos Pulmonares",
system: "Respiratório",
technique: "percussao",
position: [-0.1, 1.15, 0.11],
fraction: [0.4, 0.73, 0.8],
howTo: "Percuta comparando os dois hemitóraxes, de cima para baixo, com o dedo plexímetro bem apoiado entre os espaços intercostais.",
whatFor: "Som claro pulmonar normal; hipertimpanismo sugere pneumotórax; macicez/submacicez sugere derrame pleural ou consolidação.",
},
@@ -191,7 +200,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Inspeção Abdominal",
system: "Abdominal",
technique: "inspecao",
position: [0, 0.82, 0.11],
fraction: [0.5, 0.63, 0.85],
howTo: "Com o paciente deitado e relaxado, observe forma, simetria, distensão, cicatrizes, circulação colateral e peristaltismo visível.",
whatFor: "Abdome distendido, assimétrico ou com peristaltismo visível pode indicar obstrução, massa ou ascite.",
},
@@ -200,7 +209,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Ausculta dos Ruídos Hidroaéreos",
system: "Abdominal",
technique: "ausculta",
position: [0, 0.75, 0.11],
fraction: [0.5, 0.58, 0.8],
howTo: "Ausculte ANTES de palpar ou percutir (essas manobras alteram o peristaltismo) — um ponto já basta, ouça por 1-2 minutos se estiver avaliando ausência de ruídos.",
whatFor: "Ruídos aumentados sugerem obstrução inicial; ausência de ruídos (\"silêncio abdominal\") é sinal de íleo paralítico/abdome agudo.",
},
@@ -209,7 +218,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Percussão Abdominal (Timpanismo)",
system: "Abdominal",
technique: "percussao",
position: [-0.08, 0.72, 0.11],
fraction: [0.44, 0.56, 0.8],
howTo: "Percuta os 4 quadrantes — o timpanismo (som mais alto, de tambor) é normal, pela presença de gás nas alças intestinais.",
whatFor: "Macicez onde deveria haver timpanismo sugere massa, ascite ou visceromegalia; timpanismo excessivo sugere distensão gasosa.",
},
@@ -218,16 +227,16 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Delimitação da Loja Hepática",
system: "Abdominal",
technique: "percussao",
position: [-0.12, 0.85, 0.11],
fraction: [0.35, 0.63, 0.8],
howTo: "Percuta de cima para baixo na linha hemiclavicular direita, do som claro pulmonar até encontrar macicez (borda superior do fígado), depois do timpanismo abdominal até a macicez (borda inferior).",
whatFor: "Estima o tamanho do fígado; um espaço de Traube maciço ou uma loja hepática maior que o esperado sugere hepatomegalia.",
whatFor: "Estima o tamanho do fígado; uma loja hepática maior que o esperado sugere hepatomegalia.",
},
{
id: "palpacao-superficial",
name: "Palpação Superficial",
system: "Abdominal",
technique: "palpacao",
position: [0.08, 0.78, 0.105],
fraction: [0.56, 0.6, 0.78],
howTo: "Com a mão relaxada, palpe levemente todos os quadrantes, avaliando tensão da parede e sensibilidade — sempre deixando a área dolorosa por último.",
whatFor: "Detecta defesa muscular voluntária/involuntária e localiza dor antes de aprofundar a palpação.",
},
@@ -236,7 +245,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Palpação Profunda",
system: "Abdominal",
technique: "palpacao",
position: [0.08, 0.7, 0.105],
fraction: [0.56, 0.55, 0.78],
howTo: "Com as duas mãos sobrepostas, palpe mais profundamente para identificar massas, visceromegalias e pontos dolorosos específicos.",
whatFor: "Identifica massas abdominais, contornos de vísceras e sinais de irritação peritoneal (dor à descompressão brusca).",
},
@@ -245,7 +254,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Ponto de McBurney",
system: "Abdominal",
technique: "palpacao",
position: [-0.13, 0.62, 0.1],
fraction: [0.32, 0.5, 0.78],
howTo: "Localize o ponto entre o terço lateral e os dois terços mediais da linha que liga a espinha ilíaca ântero-superior direita ao umbigo; palpe e avalie a descompressão brusca.",
whatFor: "Dor à palpação (e principalmente à descompressão brusca) neste ponto é clássica de apendicite aguda.",
},
@@ -254,7 +263,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Sinal de Murphy",
system: "Abdominal",
technique: "palpacao",
position: [-0.13, 0.85, 0.105],
fraction: [0.34, 0.64, 0.78],
howTo: "Palpe sob o rebordo costal direito e peça ao paciente para inspirar fundo.",
whatFor: "Sinal positivo = parada súbita da inspiração por dor — sugere colecistite aguda.",
},
@@ -263,7 +272,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Palpação Hepática (Borda do Fígado)",
system: "Abdominal",
technique: "palpacao",
position: [-0.15, 0.82, 0.11],
fraction: [0.33, 0.63, 0.8],
howTo: "Com a mão em garra sob o rebordo costal direito, peça para o paciente inspirar fundo e sinta a borda hepática \"escapar\" sob os dedos.",
whatFor: "Avalia tamanho, consistência e borda do fígado — borda romba/endurecida sugere hepatopatia crônica.",
},
@@ -272,7 +281,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Palpação do Baço",
system: "Abdominal",
technique: "palpacao",
position: [0.15, 0.85, 0.1],
fraction: [0.68, 0.64, 0.75],
howTo: "Com o paciente em decúbito lateral direito, palpe sob o rebordo costal esquerdo durante a inspiração profunda.",
whatFor: "O baço normal não é palpável — se for palpável, geralmente indica esplenomegalia.",
},
@@ -283,7 +292,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Pulso Carotídeo",
system: "Vascular",
technique: "palpacao",
position: [-0.06, 1.5, 0.08],
fraction: [0.44, 0.87, 0.7],
howTo: "Palpe suavemente (nunca os dois lados ao mesmo tempo) na borda anterior do músculo esternocleidomastóideo, no pescoço.",
whatFor: "Avalia amplitude e ritmo do pulso central; útil também pra avaliar sopros carotídeos com a ausculta.",
},
@@ -292,7 +301,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Pulso Radial",
system: "Vascular",
technique: "palpacao",
position: [-0.28, 0.83, 0.03],
fraction: [0.1, 0.58, 0.6],
howTo: "Palpe com 2-3 dedos na face anterior do punho, lateralmente (lado do polegar).",
whatFor: "Pulso periférico mais usado na prática — avalia frequência, ritmo, amplitude e simetria entre os dois lados.",
},
@@ -301,7 +310,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Pulso Femoral",
system: "Vascular",
technique: "palpacao",
position: [-0.1, 0.62, 0.08],
fraction: [0.4, 0.44, 0.75],
howTo: "Palpe na região inguinal, no ponto médio entre a espinha ilíaca ântero-superior e a sínfise púbica.",
whatFor: "Assimetria ou atraso entre pulso femoral e radial (\"pulso em atraso\") sugere coarctação de aorta.",
},
@@ -310,7 +319,7 @@ export const EXAM_POINTS: ExamPoint[] = [
name: "Pulso Pedioso",
system: "Vascular",
technique: "palpacao",
position: [-0.11, -0.02, 0.06],
fraction: [0.38, 0.02, 0.65],
howTo: "Palpe no dorso do pé, lateralmente ao tendão do extensor longo do hálux.",
whatFor: "Ausência sugere doença arterial periférica — compare sempre os dois pés.",
},
frontend/src/routes/PhysicalExamPage.tsx
+45 -65
View File
@@ -1,16 +1,23 @@
import { useMemo, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { CameraControls, Html } from "@react-three/drei";
import { Mannequin } from "../components/viewer/Mannequin.js";
import { useEffect, useMemo, useState } from "react";
import { useSystemStructures } from "../hooks/useSystemStructures.js";
import { useAtlasStore } from "../store/useAtlasStore.js";
import { Scene } from "../components/viewer/Scene.js";
import { ExamMarkers } from "../components/viewer/ExamMarkers.js";
import { LayerToggle } from "../components/LayerToggle.js";
import { QuickRegionNav } from "../components/QuickRegionNav.js";
import { EXAM_POINTS, TECHNIQUES, type ExamTechnique } from "../data/physicalExam.js";
// Módulo de estudo pro exame físico: o mesmo boneco esquemático do módulo
// de Planos e Eixos, agora com pontos clicáveis mostrando ONDE e COMO se
// faz cada manobra (inspeção/palpação/percussão/ausculta) — pensado pra
// quem está estudando propedêutica, não pra troca do atlas 3D real (que
// seria overkill pra um boneco de pontos de exame, que não muda por
// paciente).
// Módulo de estudo pro exame físico, sobre o corpo 3D REAL do Z-Anatomy
// (mesmo visualizador do Atlas — camadas, navegação por região, câmera
// tudo igual), com pontos clicáveis mostrando ONDE e COMO se faz cada
// manobra (inspeção/palpação/percussão/ausculta). Reaproveita o mesmo
// <Scene> do Atlas (via prop "children", ver Scene.tsx) em vez de um corpo
// geométrico à parte.
export default function PhysicalExamPage() {
const visibleSystems = useAtlasStore((s) => s.visibleSystems);
const { bySlug } = useSystemStructures(visibleSystems);
const selectedStructureId = useAtlasStore((s) => s.selectedStructureId);
const [activeTechniques, setActiveTechniques] = useState<Set<ExamTechnique>>(
() => new Set(TECHNIQUES.map((t) => t.key)),
);
@@ -18,6 +25,13 @@ export default function PhysicalExamPage() {
const [leftOpen, setLeftOpen] = useState(false);
const [rightOpen, setRightOpen] = useState(false);
useEffect(() => {
if (selectedStructureId) {
setRightOpen(true);
setLeftOpen(false);
}
}, [selectedStructureId]);
function toggleTechnique(key: ExamTechnique) {
setActiveTechniques((prev) => {
const next = new Set(prev);
@@ -39,18 +53,21 @@ export default function PhysicalExamPage() {
<div className="h-full relative md:grid md:grid-cols-[260px_1fr_320px]">
<aside
className={`fixed md:static inset-y-0 left-0 z-30 w-[86vw] max-w-[280px] md:w-auto
border-r border-white/10 bg-panel p-4 space-y-4 overflow-y-auto
border-r border-white/10 bg-panel p-3 flex flex-col min-h-0 overflow-y-auto
transition-transform duration-200 md:translate-x-0
${leftOpen ? "translate-x-0" : "-translate-x-full"}`}
>
<button
onClick={() => setLeftOpen(false)}
className="md:hidden float-right text-slate-400 hover:text-white text-sm px-2 py-1"
className="md:hidden self-end text-slate-400 hover:text-white text-sm mb-2 px-2 py-1"
aria-label="Fechar painel"
>
✕ Fechar
</button>
<div>
<LayerToggle />
<div className="pt-3 mt-3 border-t border-white/10">
<h3 className="text-xs uppercase tracking-wide text-slate-400 mb-2">Técnicas de Exame</h3>
<div className="space-y-1.5">
{TECHNIQUES.map((t) => (
@@ -68,24 +85,11 @@ export default function PhysicalExamPage() {
</div>
</div>
<div className="pt-3 border-t border-white/10">
<h3 className="text-xs uppercase tracking-wide text-slate-400 mb-2">Como usar</h3>
<p className="text-xs text-slate-400 leading-relaxed">
Marque as técnicas que quer estudar e clique nos pontos coloridos
sobre o boneco. Cada ponto explica onde encostar, como fazer a
manobra e o que ela avalia — pensado como revisão rápida de
propedêutica, não substitui a prática supervisionada.
</p>
</div>
<div className="pt-3 border-t border-white/10 space-y-1">
<h3 className="text-xs uppercase tracking-wide text-slate-400 mb-2">Sistemas cobertos</h3>
{[...new Set(EXAM_POINTS.map((p) => p.system))].map((sys) => (
<p key={sys} className="text-xs text-slate-400">
{sys} ({EXAM_POINTS.filter((p) => p.system === sys).length})
</p>
))}
</div>
<p className="text-[11px] text-slate-500 mt-4 leading-relaxed">
Ligue uma camada (ex: Esquelético) como referência, marque as
técnicas que quer estudar e clique nos pontos coloridos sobre o
corpo. Use o menu de regiões pra focar rápido numa parte do corpo.
</p>
</aside>
{(leftOpen || rightOpen) && (
@@ -99,6 +103,14 @@ export default function PhysicalExamPage() {
)}
<div className="relative h-full min-h-0">
<Scene bySlug={bySlug}>
<ExamMarkers points={visiblePoints} selectedId={selectedId} onSelect={(id) => {
setSelectedId(id);
setRightOpen(true);
}} />
</Scene>
<QuickRegionNav />
<button
onClick={() => setLeftOpen(true)}
className="md:hidden absolute top-3 left-3 z-10 bg-panel/90 border border-white/10 rounded-lg px-3 py-2 text-xs shadow-lg"
@@ -111,38 +123,6 @@ export default function PhysicalExamPage() {
>
ℹ️ Detalhes
</button>
<Canvas dpr={[1, 1.5]} camera={{ position: [1.6, 1.3, 2.0], fov: 45 }}>
<color attach="background" args={["#0b1220"]} />
<ambientLight intensity={0.65} />
<directionalLight position={[2, 3, 2]} intensity={1} />
<Mannequin />
{visiblePoints.map((p) => {
const isSelected = p.id === selectedId;
const color = techniqueColor(p.technique);
return (
<Html key={p.id} position={p.position} center distanceFactor={4} zIndexRange={[10, 0]}>
<button
onClick={() => {
setSelectedId(p.id);
setRightOpen(true);
}}
title={p.name}
className="w-4 h-4 rounded-full border-2 border-white/80 transition-transform hover:scale-125"
style={{
backgroundColor: color,
boxShadow: isSelected ? `0 0 0 5px ${color}55` : undefined,
transform: isSelected ? "scale(1.4)" : undefined,
}}
/>
</Html>
);
})}
<CameraControls makeDefault />
</Canvas>
</div>
<aside
@@ -153,7 +133,7 @@ export default function PhysicalExamPage() {
>
<button
onClick={() => setRightOpen(false)}
className="md:hidden text-slate-400 hover:text-white text-sm px-2 py-1"
className="md:hidden text-slate-400 hover:text-white text-sm mb-2 px-2 py-1"
aria-label="Fechar painel"
>
✕ Fechar
@@ -161,7 +141,7 @@ export default function PhysicalExamPage() {
{!selected ? (
<p className="text-sm text-slate-400">
Clique em um ponto colorido sobre o boneco pra ver a técnica, o
Clique em um ponto colorido sobre o corpo pra ver a técnica, o
local exato e o que ela avalia.
</p>
) : (