dragging is working

frontend/src/components/map/MapViewer.tsx

@@ -200,126 +200,6 @@ function MapController({ center, zoom, locked }: { center: [number, number]; zoo
   return null;
 }
 
-/**
- * ProcessDragger: Custom DOM-based drag for process markers with real-time visual feedback.
- */
-function ProcessDragger({
-  locked,
-  groupCoordinates,
-  processes,
-  onGroupCoordinatesChange,
-  onProcessesChange,
-}: {
-  locked: boolean;
-  groupCoordinates: Record<string, any>;
-  processes: any[];
-  onGroupCoordinatesChange?: (coords: Record<string, any>) => void;
-  onProcessesChange?: (processes: any[]) => void;
-}) {
-  const map = useMap();
-
-  const isDragging = useRef(false);
-  const dragType = useRef<'group' | 'sub' | null>(null);
-  const dragId = useRef<string>('');
-  const dragEl = useRef<HTMLElement | null>(null);
-  const startMouseX = useRef(0);
-  const startMouseY = useRef(0);
-  const groupCoordsRef = useRef(groupCoordinates);
-  const processesRef = useRef(processes);
-  groupCoordsRef.current = groupCoordinates;
-  processesRef.current = processes;
-
-  useEffect(() => {
-    if (locked) return;
-    const container = map.getContainer();
-
-    // Enable pointer-events on our custom pane so markers receive events
-    const pane = map.getPane('activeMarkerPane');
-    if (pane) pane.style.pointerEvents = 'auto';
-
-    const onMouseDown = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      
-      // Look for draggable marker inside .leaflet-marker-icon wrapper
-      const markerInner = target.closest('.draggable-marker') as HTMLElement | null;
-      if (!markerInner) return;
-
-      const type = markerInner.getAttribute('data-marker-type') as 'group' | 'sub' | null;
-      const id = markerInner.getAttribute('data-marker-id') || '';
-      if (!type || !id) return;
-
-      // The Leaflet wrapper is the parent of our inner div
-      const leafletWrapper = markerInner.parentElement;
-      if (!leafletWrapper) return;
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      isDragging.current = true;
-      dragType.current = type;
-      dragId.current = id;
-      dragEl.current = leafletWrapper;
-      startMouseX.current = e.clientX;
-      startMouseY.current = e.clientY;
-      leafletWrapper.style.transition = 'none';
-      leafletWrapper.style.zIndex = '9999';
-      map.dragging.disable();
-      document.body.style.cursor = 'grabbing';
-    };
-
-    const onMouseMove = (e: MouseEvent) => {
-      if (!isDragging.current || !dragEl.current) return;
-      const dx = e.clientX - startMouseX.current;
-      const dy = e.clientY - startMouseY.current;
-      dragEl.current.style.transform = `translate(${dx}px, ${dy}px)`;
-    };
-
-    const onMouseUp = (e: MouseEvent) => {
-      if (!isDragging.current) return;
-      isDragging.current = false;
-      document.body.style.cursor = '';
-      map.dragging.enable();
-
-      // Reset visual transform
-      if (dragEl.current) {
-        dragEl.current.style.transform = '';
-        dragEl.current.style.transition = '';
-        dragEl.current.style.zIndex = '';
-        dragEl.current = null;
-      }
-
-      const latlng = map.mouseEventToLatLng(e);
-      const lat = latlng.lat.toString();
-      const lon = latlng.lng.toString();
-
-      if (dragType.current === 'group' && onGroupCoordinatesChange) {
-        const gIdx = dragId.current;
-        const newCoords = { ...groupCoordsRef.current };
-        newCoords[gIdx] = { ...(newCoords[gIdx] || {}), lat, lon };
-        onGroupCoordinatesChange(newCoords);
-      } else if (dragType.current === 'sub' && onProcessesChange) {
-        const subIdx = parseInt(dragId.current);
-        const newProcesses = [...processesRef.current];
-        newProcesses[subIdx] = { ...newProcesses[subIdx], lat, lon };
-        onProcessesChange(newProcesses);
-      }
-    };
-
-    container.addEventListener('mousedown', onMouseDown, true);
-    window.addEventListener('mousemove', onMouseMove);
-    window.addEventListener('mouseup', onMouseUp);
-
-    return () => {
-      container.removeEventListener('mousedown', onMouseDown, true);
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('mouseup', onMouseUp);
-      if (pane) pane.style.pointerEvents = '';
-    };
-  }, [locked, map, onGroupCoordinatesChange, onProcessesChange]);
-
-  return null;
-}
-
 function MapMoveHandler({
   onMoveEnd,
   locked,
@@ -1028,12 +908,13 @@ export default function MapViewer({
                 <Marker
                   key={`group-${gIdx}`}
                   position={[lat, lon]}
-                  draggable={false}
+                  draggable={true}
                   pane="activeMarkerPane"
                   eventHandlers={{
                     click: () => {
                       if (onProcessesSelect) onProcessesSelect(subIdxs, !isAnySelected);
-                    }
+                    },
+                    dragend: (e) => handleDragEnd(e, 'group', String(gIdx))
                   }}
                   icon={createDivIcon('', groupNames[gIdx] || `Process ${gIdx + 1}`, '', gScale, isAnySelected, 'group', String(gIdx))}
                 />
@@ -1052,12 +933,13 @@ export default function MapViewer({
                   <Marker
                     key={`sub-${si}`}
                     position={[lat, lon]}
-                    draggable={false}
+                    draggable={true}
                     pane="activeMarkerPane"
                     eventHandlers={{
                       click: () => {
                         if (onProcessesSelect) onProcessesSelect([si], !isSubSelected);
-                      }
+                      },
+                      dragend: (e) => handleDragEnd(e, 'sub', String(si))
                     }}
                     icon={createDivIcon('', p.name, '', p.box_scale ? parseFloat(String(p.box_scale)) : 1.2, isSubSelected, 'sub', String(si))}
                   />
@@ -1091,8 +973,11 @@ export default function MapViewer({
                 <Marker
                   key={`child-${si}-${ci}`}
                   position={[lat, lon]}
-                  draggable={false}
+                  draggable={true}
                   pane="expandedContentPane"
+                  eventHandlers={{
+                    dragend: (e) => handleDragEnd(e, 'child', `${si}-${ci}`)
+                  }}
                   icon={createDivIcon('', child.name, '', child.box_scale ? parseFloat(String(child.box_scale)) : 0.9, isChildSelected, 'child', `${si}-${ci}`)}
                 />
               );
@@ -1162,13 +1047,7 @@ export default function MapViewer({
           }}
         />
 
-        <ProcessDragger
-          locked={locked}
-          groupCoordinates={groupCoordinates}
-          processes={processes}
-          onGroupCoordinatesChange={onGroupCoordinatesChange}
-          onProcessesChange={onProcessesChange}
-        />
+
 
         {onMoveEnd && <MapMoveHandler onMoveEnd={onMoveEnd} locked={locked} />}
         <MapMountFitter center={center} zoom={zoom} />