| # 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` |
|
|
