File size: 2,603 Bytes
6afedde |
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 |
# Mermaid Zoom Integration
Ce module fournit une intégration du zoom medium-zoom pour les diagrammes Mermaid dans le projet Astro.
## Fonctionnalités
- ✅ **Zoom medium-zoom identique aux images** : Utilise la vraie bibliothèque medium-zoom
- ✅ **Conversion SVG → Image** : Convertit les diagrammes Mermaid en images pour le zoom
- ✅ **Adaptation au thème** : Reconversion automatique lors des changements de thème
- ✅ **Fallback robuste** : Zoom custom si la conversion échoue
- ✅ **Auto-initialisation** : Détection automatique des nouveaux diagrammes
## Architecture
### Fichiers
- `src/scripts/mermaid-zoom.js` : Module principal avec toute la logique
- `src/pages/index.astro` : Import du module (ligne 209)
- `src/styles/components/_mermaid.css` : Styles CSS pour les wrappers
### Fonctions principales
- `convertSvgToImageForMediumZoom()` : Convertit SVG en image pour medium-zoom
- `setupMermaidZoom()` : Wrappe les diagrammes et initialise le zoom
- `initMermaidZoom()` : Fonction principale d'initialisation
- `openMermaidZoom()` / `closeMermaidZoom()` : Zoom custom de fallback
### API globale
```javascript
window.MermaidZoom = {
init: initMermaidZoom, // Initialiser le zoom
setup: setupMermaidZoom, // Wrapper et conversion
cleanup: cleanupMermaidObservers, // Nettoyer les observers
convertSvgToImage: convertSvgToImageForMediumZoom,
openZoom: openMermaidZoom, // Ouvrir zoom custom
closeZoom: closeMermaidZoom // Fermer zoom custom
};
```
## Comment ça marche
1. **Détection** : Le script détecte tous les éléments `.mermaid`
2. **Wrapper** : Crée un `div.mermaid-zoom-wrapper` autour de chaque diagramme
3. **Conversion** : Convertit le SVG en image `<img>` avec `data-zoomable="1"`
4. **Medium-zoom** : Initialise `window.mediumZoom()` sur l'image générée
5. **Thème** : Observer pour reconvertir lors des changements de thème
## Avantages de cette approche
- **Vrai medium-zoom** : Comportement identique aux images existantes
- **Pas d'erreur canvas** : Évite l'erreur "Tainted canvases" en utilisant des URLs blob
- **Réactivité au thème** : Les diagrammes s'adaptent automatiquement
- **Code modulaire** : Facile à maintenir et déboguer
- **Performance** : Une seule conversion par diagramme
## Debug
Le module inclut des logs détaillés :
- `🚀 Mermaid Zoom Script loaded`
- `🔍 Found X Mermaid elements`
- `📦 Wrapping Mermaid element X`
- `🖼️ SVG converted to img element`
- `🎉 REAL medium-zoom initialized on Mermaid!`
- `🎨 Theme changed, reconverting Mermaid image`
|