feature: FDI tooth chart UI updated.
This commit is contained in:
@@ -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<FdiToothId>([
|
||||
'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<FdiChartDesignId>('clinical');
|
||||
|
||||
const Row = ({ teeth }: { teeth: FdiToothId[] }) => (
|
||||
<div className="flex flex-wrap justify-center gap-x-1 gap-y-2">
|
||||
const TOOTH_TWEAKS: Record<FdiToothId, { glyph: string; offset: number; rotate: number }> = {
|
||||
'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 }) => (
|
||||
<div className="flex flex-wrap justify-center gap-x-1 gap-y-1">
|
||||
{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 (
|
||||
<div key={fdi} className="flex flex-col items-center w-[2.25rem]">
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => onToggle(fdi)}
|
||||
className={`
|
||||
rounded-[var(--radius-sm)] p-0.5 transition-transform
|
||||
focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50
|
||||
${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 active:scale-95'}
|
||||
`}
|
||||
aria-pressed={isSel}
|
||||
aria-label={`FDI tooth ${fdi}${isSel ? ', selected' : ''}`}
|
||||
>
|
||||
<ToothGlyph kind={kind} gradientId={gid} selected={isSel} mirrored={quadrantMirrored(fdi)} />
|
||||
</button>
|
||||
<span
|
||||
className={`text-[10px] tabular-nums leading-none mt-0.5 font-medium ${
|
||||
isSel ? 'text-primary' : 'text-text-muted'
|
||||
}`}
|
||||
>
|
||||
{fdi}
|
||||
</span>
|
||||
<div key={fdi} className={`flex flex-col items-center ${size.wrapper}`}>
|
||||
<div className={`h-[5.9rem] flex ${alignItems} justify-center`}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => onToggle(fdi)}
|
||||
style={{ transform: `translateY(${offsetY}px) rotate(${rotate}deg)` }}
|
||||
className={`
|
||||
rounded-[var(--radius-sm)] p-0.5 transition-transform
|
||||
focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50
|
||||
${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 active:scale-95'}
|
||||
`}
|
||||
aria-pressed={isSel}
|
||||
aria-label={`FDI tooth ${fdi}${isSel ? ', selected' : ''}`}
|
||||
>
|
||||
<ToothGlyph
|
||||
variant={chartDesign}
|
||||
fdi={fdi}
|
||||
kind={kind}
|
||||
gradientId={gid}
|
||||
selected={isSel}
|
||||
upper={upper}
|
||||
mirrored={quadrantMirrored(fdi)}
|
||||
upsideDown={upper}
|
||||
className={tweak?.glyph ?? size.glyph}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@@ -56,28 +153,88 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
|
||||
|
||||
return (
|
||||
<div className="surface-card p-4 space-y-6">
|
||||
<div className="flex items-start justify-between gap-3 flex-wrap">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-text-primary">FDI tooth chart</h3>
|
||||
<p className="text-xs text-text-muted mt-0.5">
|
||||
Tap teeth to multi-select (FDI). Selection applies to the active treatment record until you save.
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-text-secondary tabular-nums">
|
||||
Selected: {selected.size === 0 ? '—' : [...selected].sort().join(', ')}
|
||||
</p>
|
||||
<div className="flex flex-col gap-2 sm:items-end w-full sm:max-w-xs">
|
||||
<Dropdown
|
||||
label="Chart style (temporary)"
|
||||
value={chartDesign}
|
||||
onChange={(e) => setChartDesign(e.target.value as FdiChartDesignId)}
|
||||
>
|
||||
{FDI_CHART_DESIGNS.map((d) => (
|
||||
<option key={d.id} value={d.id}>
|
||||
{d.label}
|
||||
</option>
|
||||
))}
|
||||
</Dropdown>
|
||||
<p className="text-xs text-text-secondary tabular-nums text-right">
|
||||
Selected: {selected.size === 0 ? '—' : [...selected].sort().join(', ')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wide text-text-muted mb-2 text-center">Upper arch</p>
|
||||
<Row teeth={FDI_UPPER_LEFT_TO_RIGHT} />
|
||||
</div>
|
||||
<div className="border-t border-border/60 pt-4">
|
||||
<p className="text-[11px] uppercase tracking-wide text-text-muted mb-2 text-center">Lower arch</p>
|
||||
<Row teeth={FDI_LOWER_LEFT_TO_RIGHT} />
|
||||
<p className="text-[11px] uppercase tracking-wide text-text-muted mb-1 text-center">Upper arch</p>
|
||||
|
||||
<div className="relative isolate py-1">
|
||||
<div
|
||||
className="pointer-events-none absolute left-1/2 top-3 bottom-3 w-px -translate-x-1/2 bg-border/70"
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="relative z-10 space-y-0">
|
||||
<Row teeth={FDI_UPPER_LEFT_TO_RIGHT} upper />
|
||||
<div className={`flex justify-center gap-x-1 ${TOOTH_NUMBER_GAP}`}>
|
||||
{FDI_UPPER_LEFT_TO_RIGHT.map((fdi) => {
|
||||
const size = toothSizeClass(fdi);
|
||||
const isSel = selected.has(fdi);
|
||||
return (
|
||||
<span
|
||||
key={`u-${fdi}`}
|
||||
className={`text-[10px] tabular-nums text-center leading-none ${size.wrapper} ${
|
||||
isSel ? 'text-primary' : 'text-text-muted'
|
||||
}`}
|
||||
>
|
||||
{fdi}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="my-4 h-px w-full max-w-[min(100%,42rem)] mx-auto bg-border/70"
|
||||
role="separator"
|
||||
aria-hidden
|
||||
/>
|
||||
|
||||
<div className="my-4 pt-1">
|
||||
<div className="flex justify-center gap-x-1">
|
||||
{FDI_LOWER_LEFT_TO_RIGHT.map((fdi) => {
|
||||
const size = toothSizeClass(fdi);
|
||||
const isSel = selected.has(fdi);
|
||||
return (
|
||||
<span
|
||||
key={`l-${fdi}`}
|
||||
className={`text-[10px] tabular-nums text-center leading-none ${size.wrapper} ${
|
||||
isSel ? 'text-primary' : 'text-text-muted'
|
||||
}`}
|
||||
>
|
||||
{fdi}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={TOOTH_NUMBER_GAP}>
|
||||
<Row teeth={FDI_LOWER_LEFT_TO_RIGHT} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] uppercase tracking-wide text-text-muted mt-1 text-center">Lower arch</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user