improvement: FDI tooth chart overhauled.
This commit is contained in:
@@ -3,27 +3,63 @@
|
||||
import { useId, type CSSProperties, type ReactNode } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { FDI_LOWER_LEFT_TO_RIGHT, FDI_UPPER_LEFT_TO_RIGHT, getToothShapeKind } from '@/components/treatment/fdiToothMeta';
|
||||
import {
|
||||
getToothColumnWidthRem,
|
||||
getToothGlyphWidthRem,
|
||||
} from '@/components/treatment/fdiToothScale';
|
||||
import { getRealisticToothAsset } from '@/components/treatment/realisticToothAssets';
|
||||
import { toothEdgeKey } from '@/components/treatment/toothSelectionGroups';
|
||||
import { ToothGlyph } from '@/components/ui/treatment/ToothGlyph';
|
||||
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',
|
||||
]);
|
||||
/** Extra crown↔number space for realistic SVGs (outside arch transform so it is not cancelled). */
|
||||
const REALISTIC_NUMBER_GAP = '2mm';
|
||||
/** Tight interproximal gap between tooth columns. */
|
||||
const TOOTH_GAP = 'gap-x-px';
|
||||
/** Fixed row cell height — must fit tallest scaled canine/root. */
|
||||
const TOOTH_CELL_H = 'h-[7.25rem]';
|
||||
|
||||
function quadrantMirrored(fdi: FdiToothId): boolean {
|
||||
const q = fdi[0];
|
||||
return q === '2' || q === '3';
|
||||
}
|
||||
|
||||
/** Cartoon glyph height factor vs width (realistic assets use aspect ratio from viewBox). */
|
||||
function cartoonHeightRem(fdi: FdiToothId, widthRem: number): number {
|
||||
const kind = getToothShapeKind(fdi);
|
||||
const factor = kind === 'canine' ? 2.85 : kind === 'molar' ? 2.45 : 2.65;
|
||||
return Number((widthRem * factor).toFixed(3));
|
||||
}
|
||||
|
||||
function toothSize(fdi: FdiToothId): {
|
||||
columnWidthRem: number;
|
||||
glyphWidthRem: number;
|
||||
glyphHeightRem: number | 'auto';
|
||||
} {
|
||||
const glyphWidthRem = getToothGlyphWidthRem(fdi);
|
||||
const columnWidthRem = getToothColumnWidthRem(fdi);
|
||||
const realistic = Boolean(getRealisticToothAsset(fdi));
|
||||
return {
|
||||
columnWidthRem,
|
||||
glyphWidthRem,
|
||||
glyphHeightRem: realistic ? 'auto' : cartoonHeightRem(fdi, glyphWidthRem),
|
||||
};
|
||||
}
|
||||
|
||||
interface FdiToothChartProps {
|
||||
selected: ReadonlySet<FdiToothId>;
|
||||
/** Teeth that belong to a connected selection span (dots above/below). */
|
||||
/**
|
||||
* Legacy / read-only: teeth in a connected bridge.
|
||||
* When `linkedEdges` is omitted, filled marks are shown between adjacent
|
||||
* selected teeth that both appear in this set.
|
||||
*/
|
||||
connectedTeeth?: ReadonlySet<FdiToothId>;
|
||||
/** Filled connection edges (`toothEdgeKey(a,b)`). Preferred over `connectedTeeth` for edit mode. */
|
||||
linkedEdges?: ReadonlySet<string>;
|
||||
onToggle?: (fdi: FdiToothId, event: { shiftKey: boolean }) => void;
|
||||
/** Toggle connect/disconnect for an adjacent selected pair. */
|
||||
onToggleLink?: (a: FdiToothId, b: FdiToothId) => void;
|
||||
disabled?: boolean;
|
||||
/** Non-interactive display (Cases / connection history). */
|
||||
readOnly?: boolean;
|
||||
@@ -38,10 +74,52 @@ interface FdiToothChartProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Distal tip for arch look — gentler than pre-SVG angles so realistic glyphs stay readable.
|
||||
* Positive rotate = clockwise.
|
||||
*/
|
||||
const TOOTH_TWEAKS: Partial<Record<FdiToothId, { offset: number; rotate: number }>> = {
|
||||
'18': { offset: 5, rotate: -7 },
|
||||
'17': { offset: 6, rotate: -5 },
|
||||
'16': { offset: 6, rotate: -3.5 },
|
||||
'15': { offset: 6, rotate: -2 },
|
||||
'14': { offset: 5, rotate: -1 },
|
||||
'13': { offset: 5.5, rotate: -0.5 },
|
||||
'12': { offset: 4, rotate: -0.25 },
|
||||
'11': { offset: 5, rotate: 0 },
|
||||
'21': { offset: 5, rotate: 0 },
|
||||
'22': { offset: 4, rotate: 0.25 },
|
||||
'23': { offset: 5.5, rotate: 0.5 },
|
||||
'24': { offset: 5, rotate: 1 },
|
||||
'25': { offset: 6, rotate: 2 },
|
||||
'26': { offset: 6, rotate: 3.5 },
|
||||
'27': { offset: 6, rotate: 5 },
|
||||
'28': { offset: 5, rotate: 7 },
|
||||
|
||||
'48': { offset: -5, rotate: -4 },
|
||||
'47': { offset: -6, rotate: -3 },
|
||||
'46': { offset: -6, rotate: -2 },
|
||||
'45': { offset: -6, rotate: -2 },
|
||||
'44': { offset: -5, rotate: -1 },
|
||||
'43': { offset: -4, rotate: -0.5 },
|
||||
'42': { offset: -4, rotate: -0.25 },
|
||||
'41': { offset: -3, rotate: 0 },
|
||||
'31': { offset: -3, rotate: 0 },
|
||||
'32': { offset: -4, rotate: 0.25 },
|
||||
'33': { offset: -4, rotate: 0.5 },
|
||||
'34': { offset: -5, rotate: 1 },
|
||||
'35': { offset: -6, rotate: 2 },
|
||||
'36': { offset: -6, rotate: 2 },
|
||||
'37': { offset: -6, rotate: 3 },
|
||||
'38': { offset: -5, rotate: 4 },
|
||||
};
|
||||
|
||||
export function FdiToothChart({
|
||||
selected,
|
||||
connectedTeeth,
|
||||
linkedEdges,
|
||||
onToggle,
|
||||
onToggleLink,
|
||||
disabled,
|
||||
readOnly = false,
|
||||
scale = 1,
|
||||
@@ -52,70 +130,12 @@ export function FdiToothChart({
|
||||
}: FdiToothChartProps) {
|
||||
const t = useTranslations('treatment');
|
||||
const uid = useId().replace(/:/g, '');
|
||||
const archPeak = 10;
|
||||
const archPeak = 8;
|
||||
const interactive = !readOnly && Boolean(onToggle);
|
||||
const linkInteractive = interactive && Boolean(onToggleLink);
|
||||
const isDisabled = disabled || readOnly;
|
||||
|
||||
const TOOTH_TWEAKS: Record<FdiToothId, { glyph: string; offset: number; rotate: number }> = {
|
||||
'18': { glyph: 'w-[1.98rem] h-[4.65rem]', 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.98rem] h-[4.65rem]', offset: 7, rotate: 11 },
|
||||
|
||||
'48': { glyph: 'w-[1.98rem] h-[4.7rem]', 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.98rem] h-[4.7rem]', 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 toothSizeClass = (fdi: FdiToothId) => toothSize(fdi);
|
||||
|
||||
const archOffset = (index: number, count: number, upper?: boolean) => {
|
||||
const center = (count - 1) / 2;
|
||||
@@ -127,7 +147,7 @@ export function FdiToothChart({
|
||||
const archRotate = (index: number, count: number) => {
|
||||
const center = (count - 1) / 2;
|
||||
const normalized = (index - center) / center;
|
||||
return normalized * 6;
|
||||
return normalized * 4;
|
||||
};
|
||||
|
||||
const toothAccent = (fdi: FdiToothId) => toothColors?.[fdi];
|
||||
@@ -144,38 +164,93 @@ export function FdiToothChart({
|
||||
return accent ? { color: accent } : undefined;
|
||||
};
|
||||
|
||||
/** Dots + thin links — only for Shift-connected spans (not plain singles). */
|
||||
const ConnectedRail = ({ teeth, upper }: { teeth: FdiToothId[]; upper?: boolean }) => {
|
||||
const hasConnected = teeth.some((fdi) => connectedTeeth?.has(fdi));
|
||||
if (!hasConnected) return null;
|
||||
const edgeIsLinked = (a: FdiToothId, b: FdiToothId): boolean => {
|
||||
const key = toothEdgeKey(a, b);
|
||||
if (linkedEdges) return linkedEdges.has(key);
|
||||
// Read-only fallback: both teeth marked connected.
|
||||
return Boolean(connectedTeeth?.has(a) && connectedTeeth?.has(b));
|
||||
};
|
||||
|
||||
/** Circles sit between neighbors, on the crown side (toward FDI numbers). */
|
||||
const EdgeRail = ({ teeth }: { teeth: FdiToothId[] }) => {
|
||||
const anyVisible = teeth.some((fdi, i) => {
|
||||
const next = teeth[i + 1];
|
||||
if (!next || !selected.has(fdi) || !selected.has(next)) return false;
|
||||
const linked = edgeIsLinked(fdi, next);
|
||||
return linkInteractive || linked;
|
||||
});
|
||||
if (!anyVisible) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-nowrap justify-center gap-x-1 min-w-max mx-auto w-fit ${upper ? 'mb-1' : 'mt-1'}`}
|
||||
aria-hidden
|
||||
className={`flex flex-nowrap justify-center ${TOOTH_GAP} min-w-max mx-auto w-fit h-3.5 items-center`}
|
||||
>
|
||||
{teeth.map((fdi, i) => {
|
||||
const size = toothSizeClass(fdi);
|
||||
const isConnected = Boolean(connectedTeeth?.has(fdi));
|
||||
const prev = i > 0 ? teeth[i - 1] : undefined;
|
||||
const next = teeth[i + 1];
|
||||
const linkToNext = Boolean(isConnected && next && connectedTeeth?.has(next));
|
||||
const showEdge = Boolean(next && selected.has(fdi) && selected.has(next));
|
||||
const linked = showEdge ? edgeIsLinked(fdi, next!) : false;
|
||||
const renderEdge = showEdge && (linkInteractive || linked);
|
||||
// Narrow link across this column when both neighboring edges are filled.
|
||||
const bridgeLine = Boolean(
|
||||
prev &&
|
||||
next &&
|
||||
selected.has(prev) &&
|
||||
selected.has(fdi) &&
|
||||
selected.has(next) &&
|
||||
edgeIsLinked(prev, fdi) &&
|
||||
edgeIsLinked(fdi, next),
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`c-${fdi}`}
|
||||
className={`relative flex h-2.5 items-center justify-center ${size.wrapper}`}
|
||||
title={isConnected ? t('toothConnectedHint') : undefined}
|
||||
key={`e-${fdi}`}
|
||||
className="relative h-3.5 flex items-center justify-center"
|
||||
style={{ width: `${size.columnWidthRem}rem` }}
|
||||
>
|
||||
{linkToNext ? (
|
||||
{bridgeLine ? (
|
||||
<span
|
||||
className="pointer-events-none absolute top-1/2 left-1/2 z-0 h-[2px] -translate-y-1/2 bg-primary/75"
|
||||
style={{ width: 'calc(100% + 0.25rem)' }}
|
||||
className="pointer-events-none absolute inset-x-0 top-1/2 z-0 h-[2px] -translate-y-1/2 bg-primary/75"
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
{isConnected ? (
|
||||
<span className="relative z-10 block h-2 w-2 rounded-full bg-primary shadow-sm" />
|
||||
) : (
|
||||
<span className="block h-2 w-2" />
|
||||
)}
|
||||
{renderEdge ? (
|
||||
linkInteractive ? (
|
||||
<button
|
||||
type="button"
|
||||
disabled={isDisabled}
|
||||
title={linked ? t('toothUnlinkHint') : t('toothLinkHint')}
|
||||
aria-label={
|
||||
linked
|
||||
? t('toothUnlinkAria', { a: fdi, b: next! })
|
||||
: t('toothLinkAria', { a: fdi, b: next! })
|
||||
}
|
||||
aria-pressed={linked}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onToggleLink?.(fdi, next!);
|
||||
}}
|
||||
className={`
|
||||
absolute right-0 z-10 translate-x-1/2 h-3.5 w-3.5 rounded-full border-2 transition-colors
|
||||
focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50
|
||||
${
|
||||
linked
|
||||
? 'border-primary bg-primary shadow-sm'
|
||||
: 'border-primary bg-background-secondary hover:bg-primary/15'
|
||||
}
|
||||
${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
|
||||
`}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="absolute right-0 z-10 translate-x-1/2 h-2.5 w-2.5 rounded-full bg-primary shadow-sm"
|
||||
title={t('toothConnectedHint')}
|
||||
aria-hidden
|
||||
/>
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@@ -184,20 +259,21 @@ export function FdiToothChart({
|
||||
};
|
||||
|
||||
const Row = ({ teeth, upper }: { teeth: FdiToothId[]; upper?: boolean }) => (
|
||||
<div className="flex flex-col items-center min-w-max mx-auto w-fit">
|
||||
{upper ? <ConnectedRail teeth={teeth} upper /> : null}
|
||||
<div className="flex flex-nowrap justify-center gap-x-1 min-w-max mx-auto w-fit">
|
||||
<div className="flex flex-col items-center min-w-max mx-auto w-fit gap-y-0.5">
|
||||
{/* Lower: crowns face numbers above → rail above teeth */}
|
||||
{!upper ? <EdgeRail teeth={teeth} /> : null}
|
||||
<div className={`flex flex-nowrap justify-center ${TOOTH_GAP} min-w-max mx-auto w-fit`}>
|
||||
{teeth.map((fdi, i) => {
|
||||
const kind = getToothShapeKind(fdi);
|
||||
const gid = `${uid}-g-${fdi}-${i}`;
|
||||
const isSel = selected.has(fdi);
|
||||
const isConnected = Boolean(connectedTeeth?.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';
|
||||
const accent = toothAccent(fdi);
|
||||
const realistic = Boolean(getRealisticToothAsset(fdi));
|
||||
|
||||
const glyph = (
|
||||
<ToothGlyph
|
||||
@@ -208,20 +284,30 @@ export function FdiToothChart({
|
||||
upper={upper}
|
||||
mirrored={quadrantMirrored(fdi)}
|
||||
upsideDown={upper}
|
||||
className={tweak?.glyph ?? size.glyph}
|
||||
className="shrink-0 max-h-full"
|
||||
style={{
|
||||
width: `${size.glyphWidthRem}rem`,
|
||||
height: size.glyphHeightRem === 'auto' ? 'auto' : `${size.glyphHeightRem}rem`,
|
||||
}}
|
||||
accentColor={isSel ? accent : undefined}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div key={fdi} className={`flex flex-col items-center ${size.wrapper}`}>
|
||||
<div className={`h-[5.9rem] flex ${alignItems} justify-center`}>
|
||||
<div
|
||||
key={fdi}
|
||||
className="flex flex-col items-center"
|
||||
style={{ width: `${size.columnWidthRem}rem` }}
|
||||
>
|
||||
{!upper && realistic ? (
|
||||
<div style={{ height: REALISTIC_NUMBER_GAP }} aria-hidden />
|
||||
) : null}
|
||||
<div className={`${TOOTH_CELL_H} flex ${alignItems} justify-center`}>
|
||||
{interactive ? (
|
||||
<button
|
||||
type="button"
|
||||
disabled={isDisabled}
|
||||
onMouseDown={(e) => {
|
||||
// Shift+click otherwise triggers browser text-selection / sticky focus boxes.
|
||||
if (e.shiftKey) e.preventDefault();
|
||||
}}
|
||||
onClick={(e) => {
|
||||
@@ -237,9 +323,7 @@ export function FdiToothChart({
|
||||
aria-pressed={isSel}
|
||||
aria-label={
|
||||
isSel
|
||||
? `${t('toothAria', { fdi })}${t('toothSelectedSuffix')}${
|
||||
isConnected ? t('toothConnectedSuffix') : ''
|
||||
}`
|
||||
? `${t('toothAria', { fdi })}${t('toothSelectedSuffix')}`
|
||||
: t('toothAria', { fdi })
|
||||
}
|
||||
>
|
||||
@@ -255,11 +339,15 @@ export function FdiToothChart({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{upper && realistic ? (
|
||||
<div style={{ height: REALISTIC_NUMBER_GAP }} aria-hidden />
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{!upper ? <ConnectedRail teeth={teeth} /> : null}
|
||||
{/* Upper: crowns face numbers below → rail below teeth */}
|
||||
{upper ? <EdgeRail teeth={teeth} /> : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -279,15 +367,18 @@ export function FdiToothChart({
|
||||
/>
|
||||
<div className="relative z-10 space-y-0">
|
||||
<Row teeth={FDI_UPPER_LEFT_TO_RIGHT} upper />
|
||||
<div className={`flex flex-nowrap justify-center gap-x-1 ${TOOTH_NUMBER_GAP}`}>
|
||||
<div className={`flex flex-nowrap justify-center ${TOOTH_GAP} ${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} ${numberColorClass(fdi, isSel)}`}
|
||||
style={numberStyle(fdi, isSel)}
|
||||
className={`text-[10px] tabular-nums text-center leading-none ${numberColorClass(fdi, isSel)}`}
|
||||
style={{
|
||||
width: `${size.columnWidthRem}rem`,
|
||||
...(numberStyle(fdi, isSel) ?? {}),
|
||||
}}
|
||||
>
|
||||
{fdi}
|
||||
</span>
|
||||
@@ -298,15 +389,18 @@ export function FdiToothChart({
|
||||
<div className="my-2 h-px w-full bg-border/70" role="separator" aria-hidden />
|
||||
|
||||
<div className="pt-0.5">
|
||||
<div className="flex flex-nowrap justify-center gap-x-1">
|
||||
<div className={`flex flex-nowrap justify-center ${TOOTH_GAP}`}>
|
||||
{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} ${numberColorClass(fdi, isSel)}`}
|
||||
style={numberStyle(fdi, isSel)}
|
||||
className={`text-[10px] tabular-nums text-center leading-none ${numberColorClass(fdi, isSel)}`}
|
||||
style={{
|
||||
width: `${size.columnWidthRem}rem`,
|
||||
...(numberStyle(fdi, isSel) ?? {}),
|
||||
}}
|
||||
>
|
||||
{fdi}
|
||||
</span>
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { memo, type ReactNode } from 'react';
|
||||
import { memo, type CSSProperties, type ReactNode } from 'react';
|
||||
import type { FdiToothId } from '@/types/treatment';
|
||||
import type { ToothShapeKind } from '@/components/treatment/fdiToothMeta';
|
||||
import { getToothPathModel, type ToothPathModel } from '@/components/treatment/toothPathModel';
|
||||
import {
|
||||
getRealisticToothAsset,
|
||||
type RealisticToothAsset,
|
||||
} from '@/components/treatment/realisticToothAssets';
|
||||
|
||||
interface ToothGlyphProps {
|
||||
fdi: FdiToothId;
|
||||
@@ -14,6 +18,7 @@ interface ToothGlyphProps {
|
||||
mirrored?: boolean;
|
||||
upsideDown?: boolean;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
/** When set, selected tooth glow + fill use this color instead of primary. */
|
||||
accentColor?: string;
|
||||
}
|
||||
@@ -34,19 +39,40 @@ function rgbaFromHex(hex: string, alpha: number): string {
|
||||
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
|
||||
}
|
||||
|
||||
function mixHex(hex: string, toward: string, amount: number): string {
|
||||
const a = hexToRgb(hex);
|
||||
const b = hexToRgb(toward);
|
||||
if (!a || !b) return hex;
|
||||
const t = Math.min(1, Math.max(0, amount));
|
||||
const r = Math.round(a.r + (b.r - a.r) * t);
|
||||
const g = Math.round(a.g + (b.g - a.g) * t);
|
||||
const bl = Math.round(a.b + (b.b - a.b) * t);
|
||||
return `#${[r, g, bl].map((n) => n.toString(16).padStart(2, '0')).join('')}`;
|
||||
}
|
||||
|
||||
function filledSilhouette(
|
||||
model: ToothPathModel,
|
||||
model: Pick<ToothPathModel, 'crown' | 'roots'>,
|
||||
crownFill: string,
|
||||
rootFill: string,
|
||||
stroke: string,
|
||||
strokeW: number,
|
||||
rootsFirst = false,
|
||||
): ReactNode {
|
||||
return (
|
||||
const crown = (
|
||||
<path d={model.crown} fill={crownFill} stroke={stroke} strokeWidth={strokeW} strokeLinejoin="round" />
|
||||
);
|
||||
const roots = model.roots.map((d, i) => (
|
||||
<path key={i} d={d} fill={rootFill} stroke={stroke} strokeWidth={strokeW} strokeLinejoin="round" />
|
||||
));
|
||||
return rootsFirst ? (
|
||||
<>
|
||||
<path d={model.crown} fill={crownFill} stroke={stroke} strokeWidth={strokeW} strokeLinejoin="round" />
|
||||
{model.roots.map((d, i) => (
|
||||
<path key={i} d={d} fill={rootFill} stroke={stroke} strokeWidth={strokeW} strokeLinejoin="round" />
|
||||
))}
|
||||
{roots}
|
||||
{crown}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{crown}
|
||||
{roots}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -74,6 +100,27 @@ function renderClinicalFill(
|
||||
);
|
||||
}
|
||||
|
||||
function renderRealisticFill(
|
||||
asset: RealisticToothAsset,
|
||||
selected: boolean,
|
||||
crownGradId: string,
|
||||
rootGradId: string,
|
||||
accentColor?: string,
|
||||
): ReactNode {
|
||||
const stroke = selected
|
||||
? (accentColor ?? 'var(--color-primary)')
|
||||
: 'var(--tooth-stroke)';
|
||||
const strokeW = selected ? 1.05 : 0.55;
|
||||
return filledSilhouette(
|
||||
asset,
|
||||
`url(#${crownGradId})`,
|
||||
`url(#${rootGradId})`,
|
||||
stroke,
|
||||
strokeW,
|
||||
true,
|
||||
);
|
||||
}
|
||||
|
||||
/** FDI chart tooth: clinical gradient + roots only. */
|
||||
export const ToothGlyph = memo(function ToothGlyph({
|
||||
fdi,
|
||||
@@ -85,17 +132,78 @@ export const ToothGlyph = memo(function ToothGlyph({
|
||||
upsideDown,
|
||||
className = 'w-8 h-[4.85rem]',
|
||||
accentColor,
|
||||
style,
|
||||
}: ToothGlyphProps) {
|
||||
const model: ToothPathModel | null = getToothPathModel(fdi, kind, upper);
|
||||
const realistic = getRealisticToothAsset(fdi);
|
||||
const filter = selected
|
||||
? accentColor
|
||||
? `drop-shadow(0 0 6px ${rgbaFromHex(accentColor, 0.75)})`
|
||||
: 'drop-shadow(0 0 6px rgba(9, 169, 188, 0.65))'
|
||||
: undefined;
|
||||
: 'drop-shadow(0 1px 1.5px rgba(15, 23, 42, 0.18))';
|
||||
const svgStyle: CSSProperties = { filter, ...style };
|
||||
|
||||
if (realistic) {
|
||||
const crownGradId = `${gradientId}-crown`;
|
||||
const rootGradId = `${gradientId}-root`;
|
||||
// Align crown edge toward the FDI numbers (upper: bottom of box, lower: top).
|
||||
const preserveAspectRatio = upper ? 'xMidYMax meet' : 'xMidYMin meet';
|
||||
|
||||
const crownStops = selected
|
||||
? accentColor
|
||||
? { hi: '#ffffff', mid: accentColor, shade: mixHex(accentColor, '#0f172a', 0.22) }
|
||||
: { hi: '#ffffff', mid: '#5eead4', shade: '#0e7490' }
|
||||
: {
|
||||
hi: 'var(--tooth-crown-hi)',
|
||||
mid: 'var(--tooth-crown-mid)',
|
||||
shade: 'var(--tooth-crown-shade)',
|
||||
};
|
||||
|
||||
const rootStops = selected
|
||||
? accentColor
|
||||
? {
|
||||
hi: mixHex(accentColor, '#ffffff', 0.2),
|
||||
mid: mixHex(accentColor, '#0f172a', 0.12),
|
||||
shade: mixHex(accentColor, '#0f172a', 0.32),
|
||||
}
|
||||
: { hi: '#99f6e4', mid: '#14b8a6', shade: '#0f766e' }
|
||||
: {
|
||||
hi: 'var(--tooth-root-hi)',
|
||||
mid: 'var(--tooth-root-mid)',
|
||||
shade: 'var(--tooth-root-shade)',
|
||||
};
|
||||
|
||||
return (
|
||||
<svg
|
||||
viewBox={realistic.viewBox}
|
||||
preserveAspectRatio={preserveAspectRatio}
|
||||
className={`${className} shrink-0`}
|
||||
style={svgStyle}
|
||||
aria-hidden
|
||||
>
|
||||
<defs>
|
||||
<radialGradient id={crownGradId} cx="40%" cy="35%" r="70%">
|
||||
<stop offset="0%" stopColor={crownStops.hi} />
|
||||
<stop offset="55%" stopColor={crownStops.mid} />
|
||||
<stop offset="100%" stopColor={crownStops.shade} />
|
||||
</radialGradient>
|
||||
<linearGradient id={rootGradId} x1="30%" y1="0%" x2="70%" y2="100%">
|
||||
<stop offset="0%" stopColor={rootStops.hi} />
|
||||
<stop offset="55%" stopColor={rootStops.mid} />
|
||||
<stop offset="100%" stopColor={rootStops.shade} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform={realistic.groupTransform}>
|
||||
{renderRealisticFill(realistic, selected, crownGradId, rootGradId, accentColor)}
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const model: ToothPathModel | null = getToothPathModel(fdi, kind, upper);
|
||||
|
||||
if (!model) {
|
||||
return (
|
||||
<svg viewBox="0 0 36 78" className={`${className} shrink-0`} aria-hidden>
|
||||
<svg viewBox="0 0 36 78" className={`${className} shrink-0`} style={style} aria-hidden>
|
||||
<text x="4" y="40" fontSize="8" fill="currentColor" opacity="0.35">
|
||||
?
|
||||
</text>
|
||||
@@ -121,7 +229,7 @@ export const ToothGlyph = memo(function ToothGlyph({
|
||||
<svg
|
||||
viewBox="0 0 36 78"
|
||||
className={`${className} shrink-0`}
|
||||
style={{ filter }}
|
||||
style={svgStyle}
|
||||
aria-hidden
|
||||
>
|
||||
<defs>
|
||||
|
||||
@@ -45,8 +45,12 @@ import {
|
||||
connectedTeethSet,
|
||||
deriveTeethFromGroups,
|
||||
groupsFromFlatTeeth,
|
||||
linkAdjacentTeeth,
|
||||
linkedEdgesFromGroups,
|
||||
pruneToothProsthesisForGroups,
|
||||
toothEdgeKey,
|
||||
toggleToothInGroups,
|
||||
unlinkAdjacentTeeth,
|
||||
} from '@/components/treatment/toothSelectionGroups';
|
||||
import type { LabDispatchAttentionItem } from '@/components/treatment/labDispatchAttention';
|
||||
import { collectLabDispatchAttention } from '@/components/treatment/labDispatchAttention';
|
||||
@@ -614,6 +618,10 @@ export function TreatmentWorkspace({
|
||||
() => connectedTeethSet(activeDetail?.toothSelectionGroups ?? []),
|
||||
[activeDetail?.toothSelectionGroups],
|
||||
);
|
||||
const linkedToothEdges = useMemo(
|
||||
() => linkedEdgesFromGroups(activeDetail?.toothSelectionGroups ?? []),
|
||||
[activeDetail?.toothSelectionGroups],
|
||||
);
|
||||
const rangeAnchorRef = useRef<FdiToothId | null>(null);
|
||||
|
||||
const wholePlanTeethSet = useMemo(() => {
|
||||
@@ -2016,6 +2024,7 @@ export function TreatmentWorkspace({
|
||||
{entryStep === 'teeth' ? (
|
||||
<FdiToothChart
|
||||
selected={chartSelectedTeeth}
|
||||
linkedEdges={showWholeTreatmentPlan ? undefined : linkedToothEdges}
|
||||
connectedTeeth={showWholeTreatmentPlan ? undefined : connectedSelectedTeeth}
|
||||
toothColors={chartToothColors}
|
||||
readOnly={showWholeTreatmentPlan}
|
||||
@@ -2089,6 +2098,53 @@ export function TreatmentWorkspace({
|
||||
}),
|
||||
);
|
||||
}}
|
||||
onToggleLink={(a, b) => {
|
||||
if (
|
||||
!canEditTreatmentForDay ||
|
||||
isDetailLocked(activeDetail) ||
|
||||
showWholeTreatmentPlan ||
|
||||
!activeDetailId
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const detail = details.find((d) => d.clientId === activeDetailId);
|
||||
if (!detail) return;
|
||||
const currentGroups =
|
||||
detail.toothSelectionGroups.length > 0
|
||||
? detail.toothSelectionGroups
|
||||
: groupsFromFlatTeeth(detail.teeth);
|
||||
const edgeLinked = linkedEdgesFromGroups(currentGroups).has(toothEdgeKey(a, b));
|
||||
const nextGroups = edgeLinked
|
||||
? unlinkAdjacentTeeth(currentGroups, a, b)
|
||||
: linkAdjacentTeeth(currentGroups, a, b);
|
||||
if (!nextGroups) return;
|
||||
|
||||
setDetails((prev) =>
|
||||
prev.map((d) =>
|
||||
d.clientId !== activeDetailId
|
||||
? d
|
||||
: {
|
||||
...d,
|
||||
toothSelectionGroups: nextGroups,
|
||||
teeth: deriveTeethFromGroups(nextGroups),
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
setLabCaseDrafts((prev) =>
|
||||
prev.map((lc) => {
|
||||
if (lc.detailClientId !== activeDetailId) return lc;
|
||||
return {
|
||||
...lc,
|
||||
toothProsthesis: pruneToothProsthesisForGroups(
|
||||
lc.toothProsthesis,
|
||||
activeDetailId,
|
||||
nextGroups,
|
||||
),
|
||||
};
|
||||
}),
|
||||
);
|
||||
}}
|
||||
disabled={!canEditTreatmentForDay || isDetailLocked(activeDetail)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
Reference in New Issue
Block a user