Feat Widgets

- Widget de Home
- Widget Cards por Provincias
- Widget Mapa por Categorias

Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaNacional.tsx

@@ -11,6 +11,7 @@ import type { ResultadoMapaDto, AmbitoGeography } from '../../../../types/types'
 import { MapaProvincial } from './MapaProvincial';
 import { CabaLupa } from './CabaLupa';
 import { BiZoomIn, BiZoomOut } from "react-icons/bi";
+import toast from 'react-hot-toast';
 
 const DEFAULT_MAP_COLOR = '#E0E0E0';
 const FADED_BACKGROUND_COLOR = '#F0F0F0';
@@ -166,9 +167,45 @@ export const MapaNacional = ({ eleccionId, categoriaId, nivel, nombreAmbito, nom
     };
   }, [position, nivel]);
 
-  const handleZoomIn = () => setPosition(prev => ({ ...prev, zoom: Math.min(prev.zoom * 1.8, 100) }));
+  const panEnabled =
+    nivel === 'provincia' &&
+    initialProvincePositionRef.current !== null &&
+    position.zoom > initialProvincePositionRef.current.zoom &&
+    !nombreMunicipioSeleccionado;
+
+  // --- INICIO DE LA CORRECCIÓN ---
+
+  const handleZoomIn = () => {
+    // Solo mostramos la notificación si el paneo NO está ya habilitado
+    if (!panEnabled && initialProvincePositionRef.current) {
+      // Calculamos cuál será el nuevo nivel de zoom
+      const newZoom = position.zoom * 1.8;
+      // Si el nuevo zoom supera el umbral inicial, activamos la notificación
+      if (newZoom > initialProvincePositionRef.current.zoom) {
+        toast.success('Desplazamiento Habilitado', {
+          icon: '🖐️',
+          style: { background: '#32e5f1ff', color: 'white' },
+          duration: 1000,
+        });
+      }
+    }
+    setPosition(prev => ({ ...prev, zoom: Math.min(prev.zoom * 1.8, 100) }));
+  };
 
   const handleZoomOut = () => {
+    // Solo mostramos la notificación si el paneo SÍ está habilitado actualmente
+    if (panEnabled && initialProvincePositionRef.current) {
+      const newZoom = position.zoom / 1.8;
+      // Si el nuevo zoom es igual o menor al umbral, desactivamos
+      if (newZoom <= initialProvincePositionRef.current.zoom) {
+        toast.error('Desplazamiento Deshabilitado', {
+          icon: '🔒',
+          style: { background: '#32e5f1ff', color: 'white' },
+          duration: 1000,
+        });
+      }
+    }
+    // La lógica para actualizar la posición no cambia
     setPosition(prev => {
       const newZoom = Math.max(prev.zoom / 1.8, 1);
       const initialPos = initialProvincePositionRef.current;
@@ -182,12 +219,6 @@ export const MapaNacional = ({ eleccionId, categoriaId, nivel, nombreAmbito, nom
     setIsPanning(false);
   };
 
-  const panEnabled =
-    nivel === 'provincia' &&
-    initialProvincePositionRef.current !== null &&
-    position.zoom > initialProvincePositionRef.current.zoom &&
-    !nombreMunicipioSeleccionado;
-
   const filterInteractionEvents = (event: any) => {
     if (event.sourceEvent && event.sourceEvent.type === 'wheel') return false;
     return panEnabled;