Hugging Face's logo

Spaces:
tfrere
/
fontmap
Running

App Files Community
fontmap
File size: 2,526 Bytes 
eebc40f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
# 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