106 lines
3.0 KiB
TypeScript
106 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { memo, type ReactNode } from 'react';
|
|
import type { FdiToothId } from '@/types/treatment';
|
|
import type { ToothShapeKind } from '@/components/treatment/fdiToothMeta';
|
|
import { getToothPathModel, type ToothPathModel } from '@/components/ui/treatment/toothPathModel';
|
|
|
|
interface ToothGlyphProps {
|
|
fdi: FdiToothId;
|
|
kind: ToothShapeKind;
|
|
gradientId: string;
|
|
selected: boolean;
|
|
upper?: boolean;
|
|
mirrored?: boolean;
|
|
upsideDown?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
function filledSilhouette(
|
|
model: ToothPathModel,
|
|
crownFill: string,
|
|
rootFill: string,
|
|
stroke: string,
|
|
strokeW: number,
|
|
): ReactNode {
|
|
return (
|
|
<>
|
|
<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" />
|
|
))}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function detailOnly(model: ToothPathModel, stroke: string, strokeW: number): ReactNode {
|
|
if (!model.detailStroke) return null;
|
|
const { d, widthScale } = model.detailStroke;
|
|
return <path d={d} fill="none" stroke={stroke} strokeWidth={strokeW * widthScale} strokeLinecap="round" />;
|
|
}
|
|
|
|
function renderClinicalFill(model: ToothPathModel, selected: boolean, gradientId: string): ReactNode {
|
|
const stroke = selected ? 'var(--color-primary)' : '#1e293b';
|
|
const strokeW = selected ? 2.4 : 1.35;
|
|
const fill = `url(#${gradientId})`;
|
|
return (
|
|
<>
|
|
{filledSilhouette(model, fill, fill, stroke, strokeW)}
|
|
{detailOnly(model, stroke, strokeW)}
|
|
</>
|
|
);
|
|
}
|
|
/** FDI chart tooth: clinical gradient + roots only. */
|
|
export const ToothGlyph = memo(function ToothGlyph({
|
|
fdi,
|
|
kind,
|
|
gradientId,
|
|
selected,
|
|
upper,
|
|
mirrored,
|
|
upsideDown,
|
|
className = 'w-8 h-[4.85rem]',
|
|
}: ToothGlyphProps) {
|
|
const model: ToothPathModel | null = getToothPathModel(fdi, kind, upper);
|
|
const filter = selected ? 'drop-shadow(0 0 6px rgba(9, 169, 188, 0.65))' : undefined;
|
|
|
|
if (!model) {
|
|
return (
|
|
<svg viewBox="0 0 36 78" className={`${className} shrink-0`} aria-hidden>
|
|
<text x="4" y="40" fontSize="8" fill="currentColor" opacity="0.35">
|
|
?
|
|
</text>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const body = renderClinicalFill(model, selected, gradientId);
|
|
|
|
return (
|
|
<svg
|
|
viewBox="0 0 36 78"
|
|
className={`${className} shrink-0`}
|
|
style={{ filter }}
|
|
aria-hidden
|
|
>
|
|
<defs>
|
|
<radialGradient id={gradientId} cx="45%" cy="35%" r="65%">
|
|
<stop offset="0%" stopColor={selected ? '#cffafe' : '#ffffff'} />
|
|
<stop offset="55%" stopColor={selected ? '#5eead4' : '#e0f2fe'} />
|
|
<stop offset="100%" stopColor={selected ? '#0e7490' : '#93c5fd'} />
|
|
</radialGradient>
|
|
</defs>
|
|
<g
|
|
transform={[
|
|
mirrored ? 'translate(36 0) scale(-1 1)' : '',
|
|
upsideDown ? 'translate(0 78) scale(1 -1)' : '',
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ') || undefined}
|
|
>
|
|
{body}
|
|
</g>
|
|
</svg>
|
|
);
|
|
});
|