admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

feature: FDI tooth chart UI finalized.

Browse Source
This commit is contained in:
Admin
2026-05-08 12:42:01 +03:30
parent 1a11323b74
commit b6b408e41e
7 changed files with 22 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/ui/treatment/FdiToothChart.tsx
View File

@@ -1,10 +1,8 @@
'use client';
import { useId, useState } from 'react';
import { useId } 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';
@@ -29,10 +27,9 @@ interface FdiToothChartProps {
export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartProps) {
const uid = useId().replace(/:/g, '');
const archPeak = 10;
const [chartDesign, setChartDesign] = useState<FdiChartDesignId>('clinical');
const TOOTH_TWEAKS: Record<FdiToothId, { glyph: string; offset: number; rotate: number }> = {
'18': { glyph: 'w-[1.9rem] h-[4.5rem]', offset: 7, rotate: -11 },
'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 },
@@ -47,9 +44,9 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
'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 },
'28': { glyph: 'w-[1.98rem] h-[4.65rem]', offset: 7, rotate: 11 },
'48': { glyph: 'w-[1.9rem] h-[4.55rem]', 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 },
@@ -64,7 +61,7 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
'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 },
'38': { glyph: 'w-[1.98rem] h-[4.7rem]', offset: -7, rotate: 11 },
};
const toothSizeClass = (fdi: FdiToothId) => {
@@ -133,7 +130,6 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
aria-label={`FDI tooth ${fdi}${isSel ? ', selected' : ''}`}
>
<ToothGlyph
variant={chartDesign}
fdi={fdi}
kind={kind}
gradientId={gid}
@@ -161,17 +157,6 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
</p>
</div>
<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>