musculo externo abdome
This commit is contained in:
Rodrigo Bertoldo de Sousa Martins committed
1 parent
bc23a068dd
commit
06ace7505c
6 files changed
+213
-36
No files matched your search
@@ -17,7 +17,7 @@ export const MUSCLE_DESCRIPTIONS = {
|
||||
"pectoralis major": "Músculo grande e em leque do tórax anterior; aduz e roda medialmente o braço, e o flexiona a partir de posição estendida.",
|
||||
"pectoralis minor": "Sob o peitoral maior; traciona a escápula para baixo e para frente, e eleva as costelas na respiração forçada.",
|
||||
"rectus abdominis": "Par de músculos verticais na linha média do abdome; flexiona o tronco e comprime o conteúdo abdominal. Na malha 3D aparece como uma superfície lisa, mas na pessoa de verdade é cruzado por 3-4 intersecções tendíneas horizontais que criam o 'tanquinho' — veja a ilustração na descrição.",
|
||||
"external oblique": "Camada mais superficial dos músculos laterais do abdome; flexiona e roda o tronco para o lado oposto, e comprime o abdome. Suas fibras superiores se entrelaçam (interdigitam) com as do serrátil anterior nas costelas, um encaixe que não aparece na malha 3D — veja a ilustração na descrição.",
|
||||
"external oblique": "Camada mais superficial das 4 que formam a parede abdominal (por fora do oblíquo interno e do transverso — veja a ilustração na descrição); flexiona e roda o tronco para o lado oposto, e comprime o abdome. Suas fibras superiores também se entrelaçam com as do serrátil anterior nas costelas.",
|
||||
"internal oblique": "Camada intermediária dos músculos laterais do abdome; flexiona e roda o tronco para o mesmo lado, e comprime o abdome.",
|
||||
"latissimus dorsi": "O maior músculo do dorso; estende, aduz e roda medialmente o braço — o principal músculo do movimento de 'puxar para baixo' (ex: nadar, remar).",
|
||||
"gluteus maximus": "O maior e mais superficial músculo glúteo; principal extensor do quadril, essencial para subir escadas e levantar-se de uma cadeira.",
|
||||
@@ -92,9 +92,9 @@ export const MUSCLE_DESCRIPTIONS = {
|
||||
"thyro-epiglottic part of thyro-arytenoid muscle": "Porção tireoepiglótica do tireoaritenóideo; auxilia a estreitar a entrada da laringe durante a deglutição, protegendo a via aérea.",
|
||||
|
||||
// ---- Coluna, dorso e parede do tronco ----
|
||||
"external abdominal oblique muscle": "Mesma função do 'external oblique': camada mais superficial da parede lateral do abdome, flexiona e roda o tronco para o lado oposto. Suas fibras superiores se entrelaçam (interdigitam) com as do serrátil anterior nas costelas — um encaixe que a malha 3D não modela; veja a ilustração na descrição.",
|
||||
"internal abdominal oblique muscle": "Mesma função do 'internal oblique': camada intermediária, flexiona e roda o tronco para o mesmo lado.",
|
||||
"transversus abdominis muscle": "Camada mais profunda da parede abdominal, com fibras horizontais; comprime o conteúdo abdominal (como uma 'cinta' natural), estabilizando o tronco.",
|
||||
"external abdominal oblique muscle": "Mesma função do 'external oblique': camada mais superficial das 4 que formam a parede abdominal (veja a ilustração na descrição), flexiona e roda o tronco para o lado oposto. Suas fibras superiores também se entrelaçam com as do serrátil anterior nas costelas.",
|
||||
"internal abdominal oblique muscle": "Mesma função do 'internal oblique': camada intermediária, flexiona e roda o tronco para o mesmo lado. Fica sob o oblíquo externo e sobre o transverso do abdome — veja a ilustração na descrição.",
|
||||
"transversus abdominis muscle": "Camada mais profunda da parede abdominal, com fibras horizontais; comprime o conteúdo abdominal (como uma 'cinta' natural), estabilizando o tronco. É a camada mais interna das 4 que formam a parede abdominal — veja a ilustração na descrição.",
|
||||
"rectus abdominis muscle": "Mesma função do 'rectus abdominis': flexiona o tronco e comprime o abdome. Na pessoa de verdade é cruzado por 3-4 intersecções tendíneas horizontais (o 'tanquinho'), que a malha 3D não modela — veja a ilustração na descrição.",
|
||||
"pyramidalis muscle": "Pequeno músculo variável na frente do reto abdominal; tensiona a linha alba.",
|
||||
"quadratus lumborum muscle": "Na parede posterior do abdome; flexiona lateralmente o tronco e estabiliza a 12ª costela durante a respiração.",
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 496" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif">
|
||||
<rect x="0" y="0" width="760" height="496" fill="#ffffff" />
|
||||
|
||||
<!-- Silhueta do tronco -->
|
||||
<path d="M 250 20
|
||||
C 320 5, 440 5, 510 20
|
||||
L 530 90
|
||||
C 545 180, 545 300, 525 400
|
||||
C 500 445, 440 465, 380 465
|
||||
C 320 465, 260 445, 235 400
|
||||
C 215 300, 215 180, 230 90
|
||||
Z"
|
||||
fill="#f0c9a0" stroke="#c9915c" stroke-width="2" />
|
||||
|
||||
<!-- ===== Reto do abdome (faixa central vertical, com intersecções tendíneas) ===== -->
|
||||
<clipPath id="rectusClip">
|
||||
<path d="M 250 20 C 320 5, 440 5, 510 20 L 530 90 C 545 180, 545 300, 525 400 C 500 445, 440 465, 380 465 C 320 465, 260 445, 235 400 C 215 300, 215 180, 230 90 Z" />
|
||||
</clipPath>
|
||||
<g clip-path="url(#rectusClip)">
|
||||
<rect x="337" y="60" width="86" height="380" fill="#c0392b" />
|
||||
<!-- linha alba (linha branca central) -->
|
||||
<rect x="377" y="60" width="6" height="380" fill="#f4e6d7" />
|
||||
<!-- intersecções tendíneas (faixas brancas horizontais) -->
|
||||
<rect x="337" y="130" width="86" height="10" fill="#f4e6d7" />
|
||||
<rect x="337" y="230" width="86" height="10" fill="#f4e6d7" />
|
||||
<rect x="337" y="330" width="86" height="10" fill="#f4e6d7" />
|
||||
<!-- textura de fibra vertical, discreta -->
|
||||
<g stroke="#a5301f" stroke-width="1.5" opacity="0.5">
|
||||
<line x1="345" y1="65" x2="345" y2="435" />
|
||||
<line x1="356" y1="65" x2="356" y2="435" />
|
||||
<line x1="367" y1="65" x2="367" y2="435" />
|
||||
<line x1="393" y1="65" x2="393" y2="435" />
|
||||
<line x1="404" y1="65" x2="404" y2="435" />
|
||||
<line x1="415" y1="65" x2="415" y2="435" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ===== Corte em degraus do lado direito (oblíquo externo > interno > transverso) ===== -->
|
||||
<!-- Degrau 1 (mais superficial): Oblíquo Externo do Abdome -->
|
||||
<g>
|
||||
<rect x="428" y="60" width="102" height="330" fill="#d9573f" stroke="#8f3423" stroke-width="2" />
|
||||
<g stroke="#8f3423" stroke-width="1.6" opacity="0.55">
|
||||
<line x1="432" y1="70" x2="470" y2="100" />
|
||||
<line x1="432" y1="100" x2="490" y2="145" />
|
||||
<line x1="432" y1="130" x2="510" y2="190" />
|
||||
<line x1="432" y1="160" x2="524" y2="235" />
|
||||
<line x1="432" y1="190" x2="524" y2="275" />
|
||||
<line x1="432" y1="220" x2="524" y2="315" />
|
||||
<line x1="432" y1="250" x2="524" y2="355" />
|
||||
<line x1="432" y1="280" x2="500" y2="380" />
|
||||
<line x1="432" y1="310" x2="470" y2="380" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Degrau 2: Oblíquo Interno do Abdome (encaixado dentro do degrau 1) -->
|
||||
<g>
|
||||
<rect x="452" y="130" width="70" height="220" fill="#e8865f" stroke="#8f3423" stroke-width="2" />
|
||||
<g stroke="#8f3423" stroke-width="1.6" opacity="0.55">
|
||||
<line x1="456" y1="340" x2="486" y2="136" />
|
||||
<line x1="472" y1="346" x2="502" y2="136" />
|
||||
<line x1="488" y1="346" x2="518" y2="150" />
|
||||
<line x1="504" y1="346" x2="518" y2="180" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Degrau 3 (mais profundo): Transverso do Abdome -->
|
||||
<g>
|
||||
<rect x="468" y="190" width="42" height="110" fill="#f2b28c" stroke="#8f3423" stroke-width="2" />
|
||||
<g stroke="#8f3423" stroke-width="1.6" opacity="0.55">
|
||||
<line x1="468" y1="210" x2="510" y2="210" />
|
||||
<line x1="468" y1="230" x2="510" y2="230" />
|
||||
<line x1="468" y1="250" x2="510" y2="250" />
|
||||
<line x1="468" y1="270" x2="510" y2="270" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ===== Caixas de rótulo (texto vetorial de verdade, sem risco de ficar ilegível) ===== -->
|
||||
<!-- Reto do abdome -->
|
||||
<line x1="380" y1="180" x2="380" y2="120" stroke="#1f2937" stroke-width="2" />
|
||||
<rect x="290" y="60" width="180" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
|
||||
<text x="380" y="83" text-anchor="middle" font-size="19" font-weight="600" fill="#1f2937">Reto do Abdome</text>
|
||||
<text x="380" y="103" text-anchor="middle" font-size="13" fill="#4b5563">(com intersecções tendíneas)</text>
|
||||
|
||||
<!-- Oblíquo Externo -->
|
||||
<line x1="500" y1="90" x2="620" y2="150" stroke="#1f2937" stroke-width="2" />
|
||||
<rect x="560" y="150" width="190" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
|
||||
<text x="655" y="180" text-anchor="middle" font-size="19" font-weight="600" fill="#1f2937">Oblíquo Externo</text>
|
||||
<text x="655" y="200" text-anchor="middle" font-size="15" fill="#1f2937">do Abdome</text>
|
||||
|
||||
<!-- Oblíquo Interno -->
|
||||
<line x1="500" y1="250" x2="620" y2="290" stroke="#1f2937" stroke-width="2" />
|
||||
<rect x="560" y="290" width="190" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
|
||||
<text x="655" y="320" text-anchor="middle" font-size="19" font-weight="600" fill="#1f2937">Oblíquo Interno</text>
|
||||
<text x="655" y="340" text-anchor="middle" font-size="15" fill="#1f2937">do Abdome</text>
|
||||
|
||||
<!-- Transverso do abdome -->
|
||||
<line x1="489" y1="245" x2="330" y2="330" stroke="#1f2937" stroke-width="2" />
|
||||
<rect x="150" y="330" width="190" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
|
||||
<text x="245" y="360" text-anchor="middle" font-size="19" font-weight="600" fill="#1f2937">Transverso</text>
|
||||
<text x="245" y="380" text-anchor="middle" font-size="15" fill="#1f2937">do Abdome</text>
|
||||
|
||||
<text x="380" y="463" text-anchor="middle" font-size="12" fill="#6b7280">Corte em degraus mostrando as camadas da parede abdominal —</text>
|
||||
<text x="380" y="477" text-anchor="middle" font-size="12" fill="#6b7280">da mais superficial (oblíquo externo) à mais profunda (transverso).</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
@@ -0,0 +1,59 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 420" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif">
|
||||
<rect x="0" y="0" width="760" height="420" fill="#ffffff" />
|
||||
|
||||
<!-- Silhueta simplificada do tórax/costelas laterais -->
|
||||
<path d="M 260 20
|
||||
C 380 5, 470 15, 540 50
|
||||
C 570 90, 585 150, 580 220
|
||||
C 575 290, 545 350, 490 385
|
||||
C 420 405, 330 400, 270 370
|
||||
C 230 330, 215 260, 220 190
|
||||
C 225 120, 235 60, 260 20 Z"
|
||||
fill="#f0c9a0" stroke="#c9915c" stroke-width="2" />
|
||||
|
||||
<!-- Costelas (linhas curvas de referência) -->
|
||||
<g stroke="#c9915c" stroke-width="2" fill="none" opacity="0.55">
|
||||
<path d="M 250 70 C 320 55, 420 55, 500 75" />
|
||||
<path d="M 240 110 C 320 92, 440 92, 520 115" />
|
||||
<path d="M 232 150 C 320 130, 450 130, 535 155" />
|
||||
</g>
|
||||
|
||||
<!-- Serrátil anterior — digitações (triângulos) vindo de cima/lateral -->
|
||||
<g fill="#d9573f" stroke="#8f3423" stroke-width="1.8">
|
||||
<path d="M 300 90 L 340 190 L 260 190 Z" />
|
||||
<path d="M 370 95 L 400 195 L 330 195 Z" />
|
||||
<path d="M 440 105 L 460 200 L 400 200 Z" />
|
||||
<path d="M 500 120 L 505 205 L 460 205 Z" />
|
||||
</g>
|
||||
|
||||
<!-- Oblíquo externo — digitações interdigitando por baixo, entrelaçando -->
|
||||
<g fill="#e8865f" stroke="#8f3423" stroke-width="1.8">
|
||||
<path d="M 275 190 L 320 190 L 300 300 Z" />
|
||||
<path d="M 335 195 L 380 195 L 360 320 Z" />
|
||||
<path d="M 405 200 L 445 200 L 425 335 Z" />
|
||||
<path d="M 465 205 L 505 205 L 490 340 Z" />
|
||||
</g>
|
||||
<!-- corpo do oblíquo externo, abaixo das digitações -->
|
||||
<path d="M 265 300 C 340 285, 430 285, 500 305 C 500 340, 480 375, 430 390 C 370 400, 310 395, 275 370 C 255 345, 258 320, 265 300 Z"
|
||||
fill="#e8865f" stroke="#8f3423" stroke-width="2" />
|
||||
<g stroke="#8f3423" stroke-width="1.4" opacity="0.5">
|
||||
<line x1="290" y1="310" x2="320" y2="380" />
|
||||
<line x1="330" y1="300" x2="360" y2="385" />
|
||||
<line x1="370" y1="295" x2="400" y2="390" />
|
||||
<line x1="410" y1="295" x2="440" y2="385" />
|
||||
<line x1="450" y1="300" x2="470" y2="375" />
|
||||
</g>
|
||||
|
||||
<!-- Rótulos -->
|
||||
<line x1="380" y1="130" x2="380" y2="70" stroke="#1f2937" stroke-width="2" />
|
||||
<rect x="285" y="14" width="190" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
|
||||
<text x="380" y="37" text-anchor="middle" font-size="19" font-weight="600" fill="#1f2937">Serrátil Anterior</text>
|
||||
<text x="380" y="57" text-anchor="middle" font-size="13" fill="#4b5563">(digitações nas costelas)</text>
|
||||
|
||||
<line x1="420" y1="330" x2="560" y2="330" stroke="#1f2937" stroke-width="2" />
|
||||
<rect x="560" y="302" width="190" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
|
||||
<text x="655" y="326" text-anchor="middle" font-size="18" font-weight="600" fill="#1f2937">Oblíquo Externo</text>
|
||||
<text x="655" y="346" text-anchor="middle" font-size="14" fill="#1f2937">do Abdome</text>
|
||||
|
||||
<text x="380" y="410" text-anchor="middle" font-size="12" fill="#6b7280">As digitações dos dois músculos se entrelaçam nas costelas, como os dedos de duas mãos.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -1,6 +1,6 @@
|
||||
import { useAtlasStore } from "../store/useAtlasStore.js";
|
||||
import type { Structure } from "../lib/api.js";
|
||||
import { MUSCLE_REFERENCE_IMAGE, hasMuscleReferenceImage } from "../data/muscleReferenceImages.js";
|
||||
import { muscleReferenceImageFor } from "../data/muscleReferenceImages.js";
|
||||
|
||||
export function StructureInfoPanel({
|
||||
bySlug,
|
||||
@@ -60,17 +60,16 @@ export function StructureInfoPanel({
|
||||
<p className="text-sm text-slate-300 leading-relaxed">{structure.description}</p>
|
||||
)}
|
||||
|
||||
{hasMuscleReferenceImage(structure.slug) && (
|
||||
<div className="rounded-lg border border-white/10 bg-white p-2">
|
||||
<img
|
||||
src={MUSCLE_REFERENCE_IMAGE.image}
|
||||
alt="Ilustração clássica da parede abdominal mostrando reto do abdome, oblíquo externo e serrátil anterior"
|
||||
className="w-full h-auto rounded"
|
||||
/>
|
||||
<p className="text-xs text-slate-600 mt-2 leading-snug">{MUSCLE_REFERENCE_IMAGE.caption}</p>
|
||||
<p className="text-[11px] text-slate-500 mt-1">{MUSCLE_REFERENCE_IMAGE.credit}</p>
|
||||
</div>
|
||||
)}
|
||||
{(() => {
|
||||
const ref = muscleReferenceImageFor(structure.slug);
|
||||
if (!ref) return null;
|
||||
return (
|
||||
<div className="rounded-lg border border-white/10 bg-white p-2">
|
||||
<img src={ref.image} alt={ref.caption} className="w-full h-auto rounded" />
|
||||
<p className="text-xs text-slate-600 mt-2 leading-snug">{ref.caption}</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{structure.regionPath.length > 0 && (
|
||||
<p className="text-xs text-slate-500">{structure.regionPath.join(" › ")}</p>
|
||||
|
||||
@@ -1,26 +1,41 @@
|
||||
// Referência visual 2D pra músculos cuja malha 3D real (Z-Anatomy) não tem
|
||||
// as subdivisões que a ilustração clássica de anatomia mostra — reto do
|
||||
// abdome (intersecções tendíneas, o "tanquinho"), serrátil anterior e
|
||||
// oblíquo externo do abdome (digitações que se entrelaçam nas costelas).
|
||||
// Confirmamos (comparando com a exportação bruta do Z-Anatomy E com o app
|
||||
// oficial completo, não só a amostra do GitHub) que essa é uma limitação
|
||||
// real do dado de origem, não um bug do pipeline — ver extract-manifest.mjs.
|
||||
// Em vez de tentar esculpir essas divisões em cima de uma malha que não as
|
||||
// tem, mostramos a prancha clássica de Gray's Anatomy (Henry Vandyke
|
||||
// Carter, 1918 — domínio público, sem restrição de uso) que já ilustra
|
||||
// exatamente essas três estruturas e como se relacionam.
|
||||
export const MUSCLE_REFERENCE_IMAGE = {
|
||||
image: "/muscular/parede-abdominal-gray392.png",
|
||||
credit:
|
||||
"Henry Vandyke Carter, em Henry Gray, Anatomy of the Human Body (1918) — domínio público (via Wikimedia Commons).",
|
||||
// as subdivisões que os livros de anatomia mostram: as 4 camadas da parede
|
||||
// abdominal (reto, oblíquo externo, oblíquo interno, transverso — cada uma
|
||||
// aparece como uma superfície única e lisa no modelo 3D, sem a
|
||||
// sobreposição em camadas de verdade) e a interdigitação entre serrátil
|
||||
// anterior e oblíquo externo nas costelas. Confirmamos (comparando com a
|
||||
// exportação bruta do Z-Anatomy E com o app oficial completo, não só a
|
||||
// amostra do GitHub) que essa é uma limitação real do dado de origem, não
|
||||
// um bug do pipeline — ver extract-manifest.mjs.
|
||||
//
|
||||
// Em vez de usar uma imagem de terceiros (a primeira tentativa, a prancha
|
||||
// de Gray's Anatomy, saiu com o texto em latim pequeno demais pra ler),
|
||||
// essas são ilustrações esquemáticas PRÓPRIAS em SVG — texto vetorial de
|
||||
// verdade (nunca sai ilegível ou embaralhado, porque não é imagem
|
||||
// rasterizada), em português, sem depender de licença de terceiros.
|
||||
const ABDOMINAL_LAYERS = {
|
||||
image: "/muscular/parede-abdominal-camadas.svg",
|
||||
caption:
|
||||
"No modelo 3D esses três músculos aparecem como superfícies únicas e lisas (o Z-Anatomy não modela essas subdivisões). Esta ilustração clássica mostra onde fica cada um e como se relacionam de verdade.",
|
||||
"No modelo 3D cada um desses músculos aparece como uma superfície única e lisa (o Z-Anatomy não modela a sobreposição real). Este esquema mostra as 4 camadas da parede abdominal, da mais superficial (oblíquo externo) à mais profunda (transverso).",
|
||||
};
|
||||
|
||||
// Substrings do slug (sem o prefixo de sistema nem o sufixo de lado) que
|
||||
// identificam um músculo coberto por essa referência.
|
||||
const MUSCLE_REFERENCE_KEYS = ["rectus-abdominis-muscle", "serratus-anterior-muscle", "external-abdominal-oblique-muscle"];
|
||||
const SERRATUS_OBLIQUE_DIGITATIONS = {
|
||||
image: "/muscular/serratil-obliquo-digitacoes.svg",
|
||||
caption:
|
||||
"No modelo 3D o serrátil anterior e o oblíquo externo aparecem sem esse encaixe (o Z-Anatomy não modela a interdigitação). Este esquema mostra como as digitações dos dois se entrelaçam nas costelas.",
|
||||
};
|
||||
|
||||
export function hasMuscleReferenceImage(slug: string): boolean {
|
||||
return MUSCLE_REFERENCE_KEYS.some((key) => slug.includes(key));
|
||||
// Substring do slug (sem o prefixo de sistema nem o sufixo de lado) →
|
||||
// referência aplicável.
|
||||
const MUSCLE_REFERENCE_MAP: Record<string, typeof ABDOMINAL_LAYERS> = {
|
||||
"rectus-abdominis-muscle": ABDOMINAL_LAYERS,
|
||||
"external-abdominal-oblique-muscle": ABDOMINAL_LAYERS,
|
||||
"internal-abdominal-oblique-muscle": ABDOMINAL_LAYERS,
|
||||
"transversus-abdominis-muscle": ABDOMINAL_LAYERS,
|
||||
"serratus-anterior-muscle": SERRATUS_OBLIQUE_DIGITATIONS,
|
||||
};
|
||||
|
||||
export function muscleReferenceImageFor(slug: string) {
|
||||
const key = Object.keys(MUSCLE_REFERENCE_MAP).find((k) => slug.includes(k));
|
||||
return key ? MUSCLE_REFERENCE_MAP[key] : null;
|
||||
}
|
||||
Reference in new issue
Block a user