Modificaciones

src/components/OrganigramaInteractivo.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import AREAS from '@/data/areas';
-
+/*
 interface Props {
     onAreaSelect: (areaId: number) => void;
     className?: string;
@@ -46,7 +46,8 @@ export default function OrganigramaInteractivo({ onAreaSelect, className, style,
         // Fetch the SVG file from the public path. The SVG is located at /organigrama_FES102025.svg (if placed in public/)
         // There's a copy in src/public; to be served statically, ensure the SVG is available at '/organigrama_FES102025.svg'.
         let mounted = true;
-        fetch('/organigrama231025.svg')
+        //fetch('/organigrama231025.svg')
+        fetch('/Organigrama_con_ids(1).svg')
         .then((r) => r.text())
         .then((text) => {
             if (!mounted) return;
@@ -136,3 +137,75 @@ export default function OrganigramaInteractivo({ onAreaSelect, className, style,
         <div ref={containerRef} className={className} style={style} />
     );
 }
+
+*/
+
+
+interface Props {
+    onAreaSelect: (areaId: number) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    isPanningRef?: React.MutableRefObject<boolean>;
+    onAreaLabel?: (id: number, label: string) => void;
+}
+
+export default function OrganigramaInteractivo({
+    onAreaSelect,
+    className,
+    style,
+    isPanningRef,
+    onAreaLabel
+}: Props) {
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+
+        let mounted = true;
+        fetch('/Organigrama_con_ids(1).svg')
+        .then((r) => r.text())
+        .then((text) => {
+            if (!mounted) return;
+            container.innerHTML = text;
+
+            const svg = container.querySelector('svg');
+            if (!svg) return;
+
+            const onClick = (e: MouseEvent) => {
+            if (isPanningRef && isPanningRef.current) return;
+            const target = e.target as HTMLElement | null;
+            if (!target) return;
+
+            // Buscar el elemento (o ancestro) con un id numérico
+            const areaElement = target.closest('[id]') as HTMLElement | null;
+            if (!areaElement) return;
+
+            const idAttr = areaElement.getAttribute('id');
+            if (!idAttr) return;
+
+            const areaId = parseInt(idAttr, 10);
+            if (isNaN(areaId)) return;
+
+            // Verificar si el id existe en tu banco de datos
+            const area = AREAS.find((a) => a.id === areaId);
+            if (area) {
+                onAreaSelect(area.id);
+                onAreaLabel?.(area.id, area.label);
+            }
+            };
+
+            svg.addEventListener('click', onClick);
+            svg.style.pointerEvents = 'auto';
+
+            return () => svg.removeEventListener('click', onClick);
+        })
+        .catch((err) => console.error('No se pudo cargar SVG:', err));
+
+        return () => {
+        mounted = false;
+        };
+    }, [onAreaSelect]);
+
+    return <div ref={containerRef} className={className} style={style} />;
+}