app/src/scripts/README.md

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

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