File size: 2,389 Bytes
b3f0c1a | 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 | import React from 'react';
import { useControls } from 'leva';
import { useDebugUMAPStore } from '../store';
import { getConfig } from '../config/mapConfig.js';
const getStore = () => useDebugUMAPStore.getState();
/**
* Hook pour gérer l'interface Leva avec Zustand.
* All onChange callbacks read the store via getState() to avoid stale closures.
*/
export function useLeva({ onResetZoom }) {
const configs = useDebugUMAPStore((state) => state.configs);
const resetToDefaults = useDebugUMAPStore((state) => state.resetToDefaults);
const maxConfig = Math.max(0, configs.length - 1);
// eslint-disable-next-line react-hooks/exhaustive-deps
const [controls, setLeva] = useControls(() => ({
Configuration: {
value: Math.min(getStore().currentConfigIndex, maxConfig),
min: 0,
max: maxConfig,
step: 1,
onChange: (v) => {
const s = getStore();
const upperBound = s.configs.length - 1;
const clamped = Math.max(0, Math.min(v, upperBound));
s.setCurrentConfigIndex(clamped);
},
},
'Category Colors': {
value: getStore().useCategoryColors,
onChange: (v) => { getStore().setUseCategoryColors(v); },
},
'Glyph Size': {
value: getStore().baseGlyphSize,
min: getConfig('glyph.size.min', 0.05),
max: getConfig('glyph.size.max', 1.0),
step: getConfig('glyph.size.step', 0.05),
onChange: (v) => { getStore().setBaseGlyphSize(v); },
},
'Dark Mode': {
value: getStore().darkMode,
onChange: (v) => { getStore().setDarkMode(v); },
},
'Show Centroids': {
value: getStore().showCentroids,
onChange: (v) => { getStore().setShowCentroids(v); },
},
'Reset Zoom': { button: true },
'Reset Defaults': { button: true },
}), [maxConfig]);
const resetZoomFlag = controls['Reset Zoom'];
const resetDefaultsFlag = controls['Reset Defaults'];
React.useEffect(() => {
if (resetZoomFlag) onResetZoom();
}, [resetZoomFlag, onResetZoom]);
React.useEffect(() => {
if (resetDefaultsFlag) {
resetToDefaults();
if (setLeva) {
setLeva({
Configuration: 0,
'Category Colors': true,
'Glyph Size': 0.25,
'Dark Mode': false,
'Show Centroids': true,
});
}
}
}, [resetDefaultsFlag, resetToDefaults, setLeva]);
return {};
}
|