diff --git a/frontend/src/components/ui/treatment/FdiToothChart.tsx b/frontend/src/components/ui/treatment/FdiToothChart.tsx index c38fd1d..20fdfae 100644 --- a/frontend/src/components/ui/treatment/FdiToothChart.tsx +++ b/frontend/src/components/ui/treatment/FdiToothChart.tsx @@ -1,10 +1,20 @@ 'use client'; -import { useId } from 'react'; +import { useId, useState } from 'react'; import { FDI_LOWER_LEFT_TO_RIGHT, FDI_UPPER_LEFT_TO_RIGHT, getToothShapeKind } from '@/components/treatment/fdiToothMeta'; import { ToothGlyph } from '@/components/ui/treatment/ToothGlyph'; +import { Dropdown } from '@/components/ui/common/Dropdown'; +import { FDI_CHART_DESIGNS, type FdiChartDesignId } from '@/components/ui/treatment/fdiChartDesigns'; import type { FdiToothId } from '@/types/treatment'; +const TOOTH_NUMBER_GAP = 'mt-1'; + +/** Six teeth each side of the midline (anteriors): slightly larger glyph + wrapper. */ +const MIDLINE_SIX = new Set([ + '13', '12', '11', '21', '22', '23', + '43', '42', '41', '31', '32', '33', +]); + function quadrantMirrored(fdi: FdiToothId): boolean { const q = fdi[0]; return q === '2' || q === '3'; @@ -18,36 +28,123 @@ interface FdiToothChartProps { export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartProps) { const uid = useId().replace(/:/g, ''); + const archPeak = 10; + const [chartDesign, setChartDesign] = useState('clinical'); - const Row = ({ teeth }: { teeth: FdiToothId[] }) => ( -
+ const TOOTH_TWEAKS: Record = { + '18': { glyph: 'w-[1.9rem] h-[4.5rem]', offset: 7, rotate: -11 }, + '17': { glyph: 'w-[2rem] h-[4.75rem]', offset: 8, rotate: -8 }, + '16': { glyph: 'w-[2.1rem] h-[4.95rem]', offset: 9, rotate: -6 }, + '15': { glyph: 'w-[1.8rem] h-[4.8rem]', offset: 9, rotate: -4 }, + '14': { glyph: 'w-[1.8rem] h-[4.85rem]', offset: 9, rotate: -2 }, + '13': { glyph: 'w-[1.9rem] h-[5.28rem]', offset: 8, rotate: -1 }, + '12': { glyph: 'w-[1.8rem] h-[5.02rem]', offset: 7, rotate: -1 }, + '11': { glyph: 'w-[1.8rem] h-[5.08rem]', offset: 7, rotate: -0.5 }, + '21': { glyph: 'w-[1.8rem] h-[5.08rem]', offset: 7, rotate: 0.5 }, + '22': { glyph: 'w-[1.8rem] h-[5.02rem]', offset: 7, rotate: 1 }, + '23': { glyph: 'w-[1.9rem] h-[5.28rem]', offset: 8, rotate: 1 }, + '24': { glyph: 'w-[1.8rem] h-[4.85rem]', offset: 9, rotate: 2 }, + '25': { glyph: 'w-[1.8rem] h-[4.8rem]', offset: 9, rotate: 4 }, + '26': { glyph: 'w-[2.1rem] h-[4.95rem]', offset: 9, rotate: 6 }, + '27': { glyph: 'w-[2rem] h-[4.75rem]', offset: 8, rotate: 8 }, + '28': { glyph: 'w-[1.9rem] h-[4.5rem]', offset: 7, rotate: 11 }, + + '48': { glyph: 'w-[1.9rem] h-[4.55rem]', offset: -7, rotate: -11 }, + '47': { glyph: 'w-[2rem] h-[4.8rem]', offset: -8, rotate: -8 }, + '46': { glyph: 'w-[2.15rem] h-[5rem]', offset: -9, rotate: -6 }, + '45': { glyph: 'w-[1.82rem] h-[4.85rem]', offset: -9, rotate: -4 }, + '44': { glyph: 'w-[1.82rem] h-[4.9rem]', offset: -9, rotate: -2 }, + '43': { glyph: 'w-[1.88rem] h-[5.34rem]', offset: -8, rotate: -1 }, + '42': { glyph: 'w-[1.76rem] h-[5.04rem]', offset: -7, rotate: -1 }, + '41': { glyph: 'w-[1.74rem] h-[4.98rem]', offset: -7, rotate: -0.5 }, + '31': { glyph: 'w-[1.74rem] h-[4.98rem]', offset: -7, rotate: 0.5 }, + '32': { glyph: 'w-[1.76rem] h-[5.04rem]', offset: -7, rotate: 1 }, + '33': { glyph: 'w-[1.88rem] h-[5.34rem]', offset: -8, rotate: 1 }, + '34': { glyph: 'w-[1.82rem] h-[4.9rem]', offset: -9, rotate: 2 }, + '35': { glyph: 'w-[1.82rem] h-[4.85rem]', offset: -9, rotate: 4 }, + '36': { glyph: 'w-[2.15rem] h-[5rem]', offset: -9, rotate: 6 }, + '37': { glyph: 'w-[2rem] h-[4.8rem]', offset: -8, rotate: 8 }, + '38': { glyph: 'w-[1.9rem] h-[4.55rem]', offset: -7, rotate: 11 }, + }; + + const toothSizeClass = (fdi: FdiToothId) => { + const kind = getToothShapeKind(fdi); + const mid = MIDLINE_SIX.has(fdi); + switch (kind) { + case 'incisor': + return mid + ? { wrapper: 'w-[2.1rem]', glyph: 'w-[1.68rem] h-[4.78rem]' } + : { wrapper: 'w-[2rem]', glyph: 'w-[1.6rem] h-[4.6rem]' }; + case 'canine': + return mid + ? { wrapper: 'w-[2.2rem]', glyph: 'w-[1.78rem] h-[5.05rem]' } + : { wrapper: 'w-[2.1rem]', glyph: 'w-[1.7rem] h-[4.9rem]' }; + case 'premolar': + return mid + ? { wrapper: 'w-[2.34rem]', glyph: 'w-[1.93rem] h-[5.02rem]' } + : { wrapper: 'w-[2.25rem]', glyph: 'w-[1.85rem] h-[4.85rem]' }; + case 'molar': + return mid + ? { wrapper: 'w-[2.52rem]', glyph: 'w-[2.12rem] h-[5.1rem]' } + : { wrapper: 'w-[2.45rem]', glyph: 'w-[2.05rem] h-[4.95rem]' }; + default: + return { wrapper: 'w-[2.25rem]', glyph: 'w-[1.85rem] h-[4.85rem]' }; + } + }; + + const archOffset = (index: number, count: number, upper?: boolean) => { + const center = (count - 1) / 2; + const dist = Math.abs(index - center) / center; + const curve = (1 - Math.pow(dist, 1.45)) * archPeak; + return upper ? curve : -curve; + }; + + const archRotate = (index: number, count: number) => { + const center = (count - 1) / 2; + const normalized = (index - center) / center; + return normalized * 6; + }; + + const Row = ({ teeth, upper }: { teeth: FdiToothId[]; upper?: boolean }) => ( +
{teeth.map((fdi, i) => { const kind = getToothShapeKind(fdi); const gid = `${uid}-g-${fdi}-${i}`; const isSel = selected.has(fdi); + const size = toothSizeClass(fdi); + const tweak = TOOTH_TWEAKS[fdi]; + const offsetY = tweak ? tweak.offset : archOffset(i, teeth.length, upper); + const rotate = tweak ? tweak.rotate : archRotate(i, teeth.length); + const alignItems = upper ? 'items-end' : 'items-start'; return ( -
- - - {fdi} - +
+
+ +
); })} @@ -56,28 +153,88 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro return (
-
+

FDI tooth chart

Tap teeth to multi-select (FDI). Selection applies to the active treatment record until you save.

-

- Selected: {selected.size === 0 ? '—' : [...selected].sort().join(', ')} -

+
+ setChartDesign(e.target.value as FdiChartDesignId)} + > + {FDI_CHART_DESIGNS.map((d) => ( + + ))} + +

+ Selected: {selected.size === 0 ? '—' : [...selected].sort().join(', ')} +

+
-
-
-

Upper arch

- -
-
-

Lower arch

- +

Upper arch

+ +
+
+
+ +
+ {FDI_UPPER_LEFT_TO_RIGHT.map((fdi) => { + const size = toothSizeClass(fdi); + const isSel = selected.has(fdi); + return ( + + {fdi} + + ); + })} +
+ +
+ +
+
+ {FDI_LOWER_LEFT_TO_RIGHT.map((fdi) => { + const size = toothSizeClass(fdi); + const isSel = selected.has(fdi); + return ( + + {fdi} + + ); + })} +
+
+ +
+
+ +

Lower arch

); } diff --git a/frontend/src/components/ui/treatment/ToothGlyph.tsx b/frontend/src/components/ui/treatment/ToothGlyph.tsx index badfef6..b933ef6 100644 --- a/frontend/src/components/ui/treatment/ToothGlyph.tsx +++ b/frontend/src/components/ui/treatment/ToothGlyph.tsx @@ -1,140 +1,150 @@ 'use client'; -import { memo } from 'react'; +import { memo, type ReactNode } from 'react'; +import type { FdiToothId } from '@/types/treatment'; import type { ToothShapeKind } from '@/components/treatment/fdiToothMeta'; +import type { FdiChartDesignId } from '@/components/ui/treatment/fdiChartDesigns'; +import { getToothGlyphPaint } from '@/components/ui/treatment/toothGlyphPaint'; +import type { ToothGlyphPaint } from '@/components/ui/treatment/toothGlyphPaint'; +import { getToothPathModel, type ToothPathModel } from '@/components/ui/treatment/toothPathModel'; +import { getTextbookToothPathModel } from '@/components/ui/treatment/toothPathModelTextbook'; +import { wireframeInnerScale, wireframeOriginY } from '@/components/ui/treatment/toothGlyphStructural'; interface ToothGlyphProps { + fdi: FdiToothId; kind: ToothShapeKind; gradientId: string; selected: boolean; + upper?: boolean; mirrored?: boolean; + upsideDown?: boolean; + className?: string; + variant?: FdiChartDesignId; } -/** Stylized single tooth for FDI chart (outline + radial fill). Crown above, root(s) below. */ +function filledSilhouette( + model: ToothPathModel, + crownFill: string, + rootFill: string, + stroke: string, + strokeW: number, +): ReactNode { + return ( + <> + + {model.roots.map((d, i) => ( + + ))} + + ); +} + +function detailOnly(model: ToothPathModel, stroke: string, strokeW: number): ReactNode { + if (!model.detailStroke) return null; + const { d, widthScale } = model.detailStroke; + return ; +} + +function renderClinicalFill(model: ToothPathModel, paint: ToothGlyphPaint): ReactNode { + const { crownFill, rootFill, stroke, strokeW } = paint; + return ( + <> + {filledSilhouette(model, crownFill, rootFill, stroke, strokeW)} + {detailOnly(model, stroke, strokeW)} + + ); +} + +function renderWireframe(model: ToothPathModel, paint: ToothGlyphPaint, kind: ToothShapeKind): ReactNode { + const { stroke, strokeW } = paint; + const outer = paint.wireOuter ?? '#f8fafc'; + const innerCol = paint.wireInner ?? '#64748b'; + const s = wireframeInnerScale(kind); + const crownOy = wireframeOriginY('crown', kind); + const rootOy = wireframeOriginY('root', kind); + const rootScale = (i: number) => s - (model.roots.length > 1 ? i * 0.018 : 0); + + return ( + <> + + + + + + + + {model.roots.map((d, i) => ( + + + + + + + + ))} + {detailOnly(model, stroke, strokeW)} + + ); +} + +/** Clinical uses FDI-specific paths; wireframe uses textbook silhouettes + line sculpture (original combo). */ export const ToothGlyph = memo(function ToothGlyph({ + fdi, kind, gradientId, selected, + upper, mirrored, + upsideDown, + className = 'w-8 h-[4.85rem]', + variant = 'clinical', }: ToothGlyphProps) { - const stroke = selected ? 'var(--color-primary)' : '#1e293b'; - const strokeW = selected ? 2.4 : 1.35; - const filter = selected ? 'drop-shadow(0 0 6px rgba(9, 169, 188, 0.65))' : undefined; + const lastDigit = Number(fdi[1]); + const model: ToothPathModel | null = + variant === 'clinical' + ? getToothPathModel(fdi, kind, upper) + : getTextbookToothPathModel(kind, upper, lastDigit); + const paint = getToothGlyphPaint(variant, gradientId, selected); + const { showClinicalGradient, filter, structuralMode } = paint; - const inner = () => { - switch (kind) { - case 'incisor': - return ( - <> - - - - ); - case 'canine': - return ( - <> - - - - ); - case 'premolar': - return ( - <> - - - - ); - case 'molar': - return ( - <> - - - - - ); - default: - return null; - } - }; + if (!model) { + return ( + + + ? + + + ); + } + + const body = structuralMode === 'wireframe' ? renderWireframe(model, paint, kind) : renderClinicalFill(model, paint); return ( - - - - - - - - {inner()} + {showClinicalGradient && ( + + + + + + + + )} + + {body} + ); }); diff --git a/frontend/src/components/ui/treatment/fdiChartDesigns.ts b/frontend/src/components/ui/treatment/fdiChartDesigns.ts new file mode 100644 index 0000000..86d55b6 --- /dev/null +++ b/frontend/src/components/ui/treatment/fdiChartDesigns.ts @@ -0,0 +1,6 @@ +export const FDI_CHART_DESIGNS = [ + { id: 'clinical', label: 'Clinical (gradient + roots)' }, + { id: 'wireframeSculpt', label: 'Wireframe shells (line sculpture)' }, +] as const; + +export type FdiChartDesignId = (typeof FDI_CHART_DESIGNS)[number]['id']; diff --git a/frontend/src/components/ui/treatment/toothGlyphPaint.ts b/frontend/src/components/ui/treatment/toothGlyphPaint.ts new file mode 100644 index 0000000..ace7f28 --- /dev/null +++ b/frontend/src/components/ui/treatment/toothGlyphPaint.ts @@ -0,0 +1,53 @@ +import type { FdiChartDesignId } from '@/components/ui/treatment/fdiChartDesigns'; + +export type ToothStructuralMode = 'fill' | 'wireframe'; + +export interface ToothGlyphPaint { + crownFill: string; + rootFill: string; + stroke: string; + strokeW: number; + showClinicalGradient: boolean; + structuralMode: ToothStructuralMode; + filter?: string; + wireOuter?: string; + wireInner?: string; +} + +export function getToothGlyphPaint( + variant: FdiChartDesignId, + gradientId: string, + selected: boolean, +): ToothGlyphPaint { + const strokeSel = 'var(--color-primary)'; + const strokeDefault = '#1e293b'; + + if (variant === 'clinical') { + const g = `url(#${gradientId})`; + return { + crownFill: g, + rootFill: g, + stroke: selected ? strokeSel : strokeDefault, + strokeW: selected ? 2.4 : 1.35, + showClinicalGradient: true, + structuralMode: 'fill', + filter: selected ? 'drop-shadow(0 0 6px rgba(9, 169, 188, 0.65))' : undefined, + }; + } + + if (variant === 'wireframeSculpt') { + return { + crownFill: 'none', + rootFill: 'none', + stroke: selected ? strokeSel : '#0f172a', + strokeW: selected ? 1.65 : 1.05, + showClinicalGradient: false, + structuralMode: 'wireframe', + wireOuter: selected ? '#ecfeff' : '#f8fafc', + wireInner: '#64748b', + }; + } + + const _exhaustive: never = variant; + return _exhaustive; +} diff --git a/frontend/src/components/ui/treatment/toothGlyphStructural.ts b/frontend/src/components/ui/treatment/toothGlyphStructural.ts new file mode 100644 index 0000000..1bd5da9 --- /dev/null +++ b/frontend/src/components/ui/treatment/toothGlyphStructural.ts @@ -0,0 +1,15 @@ +import type { ToothShapeKind } from '@/components/treatment/fdiToothMeta'; + +/** Inner “shell” contours: scaled copies of closed paths (wireframe). */ +export function wireframeInnerScale(kind: ToothShapeKind): number { + if (kind === 'molar') return 0.9; + if (kind === 'premolar') return 0.88; + if (kind === 'canine') return 0.87; + return 0.85; +} + +/** Approximate transform origin per region for scaled wireframe rings. */ +export function wireframeOriginY(part: 'crown' | 'root', kind: ToothShapeKind): number { + if (part === 'crown') return kind === 'canine' ? 16 : 18; + return kind === 'molar' ? 50 : kind === 'premolar' ? 46 : 48; +} diff --git a/frontend/src/components/ui/treatment/toothPathModel.ts b/frontend/src/components/ui/treatment/toothPathModel.ts new file mode 100644 index 0000000..b24b2d7 --- /dev/null +++ b/frontend/src/components/ui/treatment/toothPathModel.ts @@ -0,0 +1,113 @@ +import type { FdiToothId } from '@/types/treatment'; +import type { ToothShapeKind } from '@/components/treatment/fdiToothMeta'; + +export interface ToothPathModel { + crown: string; + roots: string[]; + /** Occlusal groove etc. — open path, stroke only */ + detailStroke?: { d: string; widthScale: number }; +} + +/** FDI-specific closed paths for the clinical (gradient) chart. Wireframe uses `getTextbookToothPathModel`. */ +export function getToothPathModel(fdi: FdiToothId, kind: ToothShapeKind, upper?: boolean): ToothPathModel | null { + const lastDigit = Number(fdi[1]); + const isThirdMolar = lastDigit === 8; + const isSecondMolar = lastDigit === 7; + const isFirstMolar = lastDigit === 6; + const isCentralIncisor = lastDigit === 1; + const isLateralIncisor = lastDigit === 2; + + switch (kind) { + case 'incisor': + if (isLateralIncisor) { + return { + crown: 'M12 9 C14 6, 22 6, 24 9 C26 12, 26 25, 23 30 C21 32, 15 32, 13 30 C10 25, 10 12, 12 9 Z', + roots: ['M15.5 30 C14.5 40, 14.5 51, 16 60 C17 65, 19 65, 20 60 C21.5 51, 21.5 40, 20.5 30 Z'], + }; + } + return { + crown: 'M11 8 C13 5, 23 5, 25 8 C27 12, 27 26, 24 31 C22 33, 14 33, 12 31 C9 26, 9 12, 11 8 Z', + roots: ['M15 31 C14 42, 14 53, 16 63 C17 68, 19 68, 20 63 C22 53, 22 42, 21 31 Z'], + }; + case 'canine': + return { + crown: 'M18 6 C22 6, 25 10, 26 15 C26 20, 24 30, 22 33 C20 35, 16 35, 14 33 C12 30, 10 20, 10 15 C11 10, 14 6, 18 6 Z', + roots: ['M16 33 C14 44, 13 55, 14 66 C15 72, 18 75, 20 66 C21 55, 20 44, 20 33 Z'], + }; + case 'premolar': + if (upper && lastDigit === 4) { + return { + crown: 'M9 12 C11 8, 15 7, 18 9 C21 7, 25 8, 27 12 C29 16, 29 25, 26 31 C24 34, 12 34, 10 31 C7 25, 7 16, 9 12 Z', + roots: [ + 'M13 31 C12 39, 12 48, 13 56 C14 62, 16 64, 17 58 C18 54, 18 48, 18 41 Z', + 'M23 31 C24 39, 24 48, 23 56 C22 62, 20 64, 19 58 C18 54, 18 48, 18 41 Z', + ], + }; + } + return { + crown: 'M9 12 C11 8, 15 7, 18 9 C21 7, 25 8, 27 12 C29 16, 29 26, 26 31 C24 34, 12 34, 10 31 C7 26, 7 16, 9 12 Z', + roots: ['M16 31 C15 42, 15 53, 16 62 C17 67, 19 67, 20 62 C21 53, 21 42, 20 31 Z'], + }; + case 'molar': + if (isThirdMolar) { + const crown = + 'M9 15 C11 11, 14 10, 17 11 C20 9, 24 10, 26 14 C28 18, 28 26, 25 31 C23 33, 11 33, 9 31 C6 26, 6 19, 9 15 Z'; + if (upper) { + return { + crown, + roots: [ + 'M14 32 C13 39, 13 47, 14 54 C15 59, 17 61, 18 55 C19 50, 19 41, 18 33 Z', + 'M22 32 C23 39, 23 47, 22 54 C21 59, 19 61, 18 55 C17 50, 17 41, 18 33 Z', + ], + }; + } + return { + crown, + roots: [ + 'M14 32 C12 39, 12 47, 13 55 C14 61, 16 64, 18 57 C19 52, 19 44, 18 36 Z', + 'M22 32 C24 39, 24 47, 23 55 C22 61, 20 64, 18 57 C17 52, 17 44, 18 36 Z', + ], + }; + } + if (isSecondMolar && upper) { + return { + crown: 'M8 14 C10 9, 13 8, 16 10 C18 8, 21 8, 23 10 C26 8, 29 9, 30 14 C31 18, 31 27, 28 32 C26 35, 10 35, 8 32 C5 27, 5 18, 8 14 Z', + roots: [ + 'M11 35 C9 43, 9 50, 10 57 C11 62, 13 64, 14 58 C15 52, 15 44, 14 36 Z', + 'M18 35 C17 44, 17 52, 18 60 C19 66, 20 66, 21 60 C22 52, 22 44, 21 35 Z', + 'M25 35 C27 43, 27 50, 26 57 C25 62, 23 64, 22 58 C21 52, 21 44, 22 36 Z', + ], + }; + } + if (isFirstMolar && !upper) { + return { + crown: 'M7 14 C9 9, 13 8, 16 10 C18 8, 21 8, 23 10 C26 8, 30 9, 31 14 C32 18, 32 27, 29 32 C27 35, 9 35, 7 32 C4 27, 4 18, 7 14 Z', + roots: [ + 'M11 35 C9 43, 9 50, 10 58 C11 64, 14 67, 16 60 C17 56, 17 50, 17 44 Z', + 'M25 35 C27 43, 27 50, 26 58 C25 64, 22 67, 20 60 C19 56, 19 50, 19 44 Z', + ], + detailStroke: { d: 'M15 61 Q18 66 21 61', widthScale: 0.85 }, + }; + } + if (upper) { + return { + crown: 'M7 14 C9 9, 13 8, 16 10 C18 8, 21 8, 23 10 C26 8, 30 9, 31 14 C32 18, 32 27, 29 32 C27 35, 9 35, 7 32 C4 27, 4 18, 7 14 Z', + roots: [ + 'M11 35 C9 43, 9 50, 10 57 C11 62, 13 64, 14 58 C15 52, 15 44, 14 36 Z', + 'M18 35 C17 44, 17 52, 18 60 C19 66, 20 66, 21 60 C22 52, 22 44, 21 35 Z', + 'M25 35 C27 43, 27 50, 26 57 C25 62, 23 64, 22 58 C21 52, 21 44, 22 36 Z', + ], + }; + } + return { + crown: 'M7 14 C9 9, 13 8, 16 10 C18 8, 21 8, 23 10 C26 8, 30 9, 31 14 C32 18, 32 27, 29 32 C27 35, 9 35, 7 32 C4 27, 4 18, 7 14 Z', + roots: [ + 'M11 35 C9 43, 9 50, 10 58 C11 64, 14 67, 16 60 C17 56, 17 50, 17 44 Z', + 'M25 35 C27 43, 27 50, 26 58 C25 64, 22 67, 20 60 C19 56, 19 50, 19 44 Z', + ], + detailStroke: { d: 'M15 61 Q18 66 21 61', widthScale: 0.85 }, + }; + default: + return null; + } +} diff --git a/frontend/src/components/ui/treatment/toothPathModelTextbook.ts b/frontend/src/components/ui/treatment/toothPathModelTextbook.ts new file mode 100644 index 0000000..0a029b3 --- /dev/null +++ b/frontend/src/components/ui/treatment/toothPathModelTextbook.ts @@ -0,0 +1,78 @@ +import type { ToothShapeKind } from '@/components/treatment/fdiToothMeta'; +import type { ToothPathModel } from '@/components/ui/treatment/toothPathModel'; + +/** + * Textbook-style silhouettes (chisel incisor, spear canine, bicuspid premolar, blocky molar). + * Used **only** for “Wireframe shells (line sculpture)” so shapes read like the first presentation, + * distinct from the clinical FDI-accurate paths. + */ +export function getTextbookToothPathModel( + kind: ToothShapeKind, + upper: boolean | undefined, + lastDigit: number, +): ToothPathModel { + switch (kind) { + case 'incisor': { + const lateral = lastDigit === 2; + if (lateral) { + return { + crown: + 'M13 8 L23 8 L24 11 L24.5 26 Q23 30.5 18 31.5 Q13 30.5 11.5 26 L12 11 Z', + roots: ['M15.5 31.5 L20.5 31.5 L20 48 L18.5 69 L17.5 69 L16 48 Z'], + }; + } + return { + crown: + 'M12 8 L24 8 L25 11 L25.5 27 Q24 31 18 32 Q12 31 10.5 27 L11 11 Z', + roots: ['M15 32 L21 32 L20.2 50 L18 70 L17 70 L15.8 50 Z'], + }; + } + case 'canine': + return { + crown: + 'M18 6 L22 11 L24.5 18 L24 28 L21.5 32 L14.5 32 L12 28 L11.5 18 L14 11 Z', + roots: ['M15 32 L21 32 L20.5 52 L19 73 L17 73 L15.5 52 Z'], + }; + case 'premolar': + return { + crown: + 'M8 14 L13 9 Q15.5 7.5 18 9.5 Q20.5 7.5 23 9 L28 14 L29.5 25 L27 32 L9 32 L6.5 25 Z', + roots: [ + 'M13 31.5 L16.5 31.5 L15 52 L12.5 70 L10.5 69 L12 52 Z', + 'M19.5 31.5 L23 31.5 L24.5 52 L25.5 69 L23.5 70 L22 52 Z', + ], + }; + case 'molar': { + const crown = + 'M6 14 L8 9 L12.5 7.5 Q18 9.5 23.5 7.5 L28 9 L30 14 L31 25 L29 32.5 L7 32.5 L5 25 Z'; + const upperMolar = upper === true && lastDigit >= 6 && lastDigit <= 8; + if (upperMolar) { + return { + crown, + roots: [ + 'M8.5 32.5 L12 32.5 L10.5 54 L9 71 L7 69.5 L8.5 54 Z', + 'M15.5 32.5 L20.5 32.5 L19 56 L18 72 L16.5 72 L15.5 56 Z', + 'M24 32.5 L27.5 32.5 L27.5 54 L29 71 L27 69.5 L26 54 Z', + ], + detailStroke: { + d: 'M11 10.5 Q18 12.5 25 10.5 M10 18 Q18 20 26 18', + widthScale: 0.55, + }, + }; + } + return { + crown, + roots: [ + 'M9 32.5 L15 32.5 L13 56 L10.5 71 L8 69.5 L10 56 Z', + 'M21 32.5 L27 32.5 L26 56 L27.5 71 L25 69.5 L24 56 Z', + ], + detailStroke: { + d: 'M12 11 Q18 13.5 24 11 M11 19 Q18 21.5 25 19 M16 62 Q18 65 20 62', + widthScale: 0.5, + }, + }; + } + default: + return { crown: 'M10 10 L26 10 L26 60 L10 60 Z', roots: [] }; + } +}