File size: 2,899 Bytes
6bda4a6 |
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 82 83 84 85 |
import React, { useRef, useEffect, useState } from 'react';
import { useLeva, useZoom, useGlyphRenderer, useConfigs, useKeyboardNavigation, useLocalStorage } from './hooks';
import { ConfigDisplay, MapContainer, ErrorDisplay, LoadingDisplay } from './components';
import { useDebugUMAPStore } from './store';
import './styles/index.css';
/**
* Composant principal DebugUMAP - Version refactorisée avec Zustand
*/
const DebugUMAP = () => {
console.log('DebugUMAP: Composant rendu');
const svgRef = useRef(null);
const [svgReady, setSvgReady] = useState(false);
// Hooks pour la gestion de l'état (maintenant via Zustand)
const configs = useDebugUMAPStore((state) => state.configs);
const currentConfig = useDebugUMAPStore((state) => state.getCurrentConfig());
const currentConfigIndex = useDebugUMAPStore((state) => state.currentConfigIndex);
const setCurrentConfigIndex = useDebugUMAPStore((state) => state.setCurrentConfigIndex);
const error = useDebugUMAPStore((state) => state.error);
const loading = useDebugUMAPStore((state) => state.loading);
const useCategoryColors = useDebugUMAPStore((state) => state.useCategoryColors);
const setUseCategoryColors = useDebugUMAPStore((state) => state.setUseCategoryColors);
const baseGlyphSize = useDebugUMAPStore((state) => state.baseGlyphSize);
const setBaseGlyphSize = useDebugUMAPStore((state) => state.setBaseGlyphSize);
const darkMode = useDebugUMAPStore((state) => state.darkMode);
const setDarkMode = useDebugUMAPStore((state) => state.setDarkMode);
const showCentroids = useDebugUMAPStore((state) => state.showCentroids);
const setShowCentroids = useDebugUMAPStore((state) => state.setShowCentroids);
console.log('DebugUMAP: Valeurs du store:', {
configs: configs.length,
loading,
error,
baseGlyphSize,
useCategoryColors,
darkMode
});
// Hook pour la persistance localStorage (en premier pour charger la config)
useLocalStorage();
// Hook pour charger les configurations
useConfigs();
// Détecter quand le SVG est monté
useEffect(() => {
if (svgRef.current && !svgReady) {
console.log('DebugUMAP: SVG détecté, marqué comme prêt');
setSvgReady(true);
}
}, [svgReady]);
// Hook pour le rendu des glyphes
useGlyphRenderer({ svgRef, enabled: svgReady });
// Hook pour le zoom
const { resetZoom } = useZoom(svgRef, baseGlyphSize, svgReady, darkMode);
// Hook pour Leva
useLeva({ onResetZoom: resetZoom });
// Hook pour la navigation au clavier
useKeyboardNavigation();
// États de chargement et d'erreur
if (loading) {
return <LoadingDisplay />;
}
if (error) {
return <ErrorDisplay error={error} />;
}
return (
<div className={`debug-umap-container ${darkMode ? 'dark-mode' : ''}`}>
<ConfigDisplay />
<MapContainer ref={svgRef} />
</div>
);
};
export default DebugUMAP;
|