# FontMap Component

## Structure

```
src/components/FontMap/
├── index.js                    # Point d'entrée principal
├── FontMap.js                  # Composant principal unifié
├── hooks/
│   ├── useFontData.js         # Gestion des données de polices
│   ├── useD3Visualization.js  # Logique D3 unifiée
│   └── useTooltip.js          # Gestion des tooltips
├── components/
│   └── controls/
│       ├── DarkModeToggle.js
│       ├── DatasetSelector.js
│       ├── FilterControls.js
│       ├── SearchBar.js
│       └── ZoomControls.js
├── utils/
│   └── fontUtils.js          # Utilitaires pour les polices
└── styles/
    └── FontMap.css           # Styles principaux
```

## Utilisation

```jsx
import { FontMap } from './components/FontMap';

function App() {
  return <FontMap />;
}
```

## Composants

### FontMap (Principal)
Composant principal qui orchestre tous les autres composants et hooks.

### Hooks

#### useFontData
- Gère le chargement des données de polices
- Supporte les datasets 'original' et 'extended'
- Retourne : `{ fonts, loading, fontMapping, error }`

#### useD3Visualization
- Gère toute la logique D3 pour la visualisation
- Inclut le zoom, la magnification, les interactions
- Retourne : `svgRef`

#### useTooltip
- Gère l'affichage et le positionnement des tooltips
- Gère les tooltips hover et sélection avec positionnement intelligent
- Retourne : `{ handleFontSelect, handleFontHover, handleFontUnhover, updateTransform, updatePositions }`

### Contrôles

Tous les composants de contrôles suivent le même pattern :
- Props : `{ value, onChange, darkMode? }`
- Styles cohérents avec le système de design

### Utilitaires

#### fontUtils.js
- `getFontSymbolId()` : Obtient l'ID du symbole SVG
- `matchesSearch()` : Vérifie si une police correspond à une recherche
- `filterFonts()` : Filtre les polices selon les critères
- `calculatePositions()` : Calcule les positions avec simulation Voronoi
- `applyVoronoiRelaxation()` : Applique la relaxation de Voronoi

## Améliorations apportées

1. **Structure claire** : Séparation logique des responsabilités
2. **Pas de duplication** : Un seul composant principal
3. **Hooks réutilisables** : Logique métier extraite
4. **Composants modulaires** : Contrôles indépendants
5. **Utilitaires centralisés** : Fonctions communes dans un module
6. **Exports cohérents** : API claire et prévisible