File size: 4,343 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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
import React from 'react';
import { useControls, useStoreContext } from 'leva';
import { useDebugUMAPStore } from '../store';
import { getConfig } from '../config/mapConfig.js';
/**
* Hook pour gérer l'interface Leva avec Zustand
*/
export function useLeva({ onResetZoom }) {
const configs = useDebugUMAPStore((state) => state.configs);
const currentConfigIndex = useDebugUMAPStore((state) => state.currentConfigIndex);
const setCurrentConfigIndex = useDebugUMAPStore((state) => state.setCurrentConfigIndex);
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);
const resetToDefaults = useDebugUMAPStore((state) => state.resetToDefaults);
const saveToLocalStorage = useDebugUMAPStore((state) => state.saveToLocalStorage);
// Store Leva pour mettre à jour les contrôles
const store = useStoreContext();
// Configuration des contrôles Leva - Initialiser avec les valeurs du store
const controls = useControls({
// Slider de configuration
Configuration: {
value: currentConfigIndex, // Utiliser la valeur du store
min: 0,
max: Math.max(8, configs.length - 1), // Au moins 8 pour permettre le test
step: 1
},
// Toggle pour les couleurs
'Category Colors': useCategoryColors, // Utiliser la valeur du store
// Slider pour la taille des glyphes
'Glyph Size': {
value: baseGlyphSize, // Utiliser la valeur du store
min: getConfig('glyph.size.min', 0.05),
max: getConfig('glyph.size.max', 1.0),
step: getConfig('glyph.size.step', 0.05)
},
// Toggle pour le dark mode
'Dark Mode': darkMode, // Utiliser la valeur du store
// Toggle pour les centroïdes
'Show Centroids': showCentroids, // Utiliser la valeur du store
// Bouton pour reset zoom
'Reset Zoom': { button: true },
// Bouton pour reset defaults
'Reset Defaults': { button: true }
});
// Mettre à jour le store Zustand quand Leva change
React.useEffect(() => {
if (controls.Configuration !== undefined) {
console.log('useLeva: Configuration changée vers', controls.Configuration);
setCurrentConfigIndex(controls.Configuration);
saveToLocalStorage(); // Sauvegarder automatiquement
}
}, [controls.Configuration, setCurrentConfigIndex, saveToLocalStorage]);
React.useEffect(() => {
if (controls['Category Colors'] !== undefined) {
setUseCategoryColors(controls['Category Colors']);
saveToLocalStorage(); // Sauvegarder automatiquement
}
}, [controls['Category Colors'], setUseCategoryColors, saveToLocalStorage]);
React.useEffect(() => {
if (controls['Glyph Size'] !== undefined) {
setBaseGlyphSize(controls['Glyph Size']);
saveToLocalStorage(); // Sauvegarder automatiquement
}
}, [controls['Glyph Size'], setBaseGlyphSize, saveToLocalStorage]);
React.useEffect(() => {
if (controls['Dark Mode'] !== undefined) {
setDarkMode(controls['Dark Mode']);
saveToLocalStorage(); // Sauvegarder automatiquement
}
}, [controls['Dark Mode'], setDarkMode, saveToLocalStorage]);
React.useEffect(() => {
if (controls['Show Centroids'] !== undefined) {
setShowCentroids(controls['Show Centroids']);
saveToLocalStorage(); // Sauvegarder automatiquement
}
}, [controls['Show Centroids'], setShowCentroids, saveToLocalStorage]);
React.useEffect(() => {
if (controls['Reset Zoom']) {
onResetZoom();
}
}, [controls['Reset Zoom'], onResetZoom]);
React.useEffect(() => {
if (controls['Reset Defaults']) {
resetToDefaults();
}
}, [controls['Reset Defaults'], resetToDefaults]);
// Plus besoin de synchronisation externe car Leva s'initialise avec les bonnes valeurs
return {};
}
|