Revize 7b864a5c

path dragging and adjustment seems functional

frontend/src/features/TrackingTool/MapPath.tsx

@@ -3 +3 @@
 import { RootState } from "../redux/store"
 import { PathVariant, MapPoint } from "./buildPathVariants"
 import TextPath from "react-leaflet-textpath"
-import { setPrimaryIdx, updateMapMarkerPosition } from "./trackingToolSlice"
+import { setPrimaryIdx, updateMapMarker } from "./trackingToolSlice"
 import MapMarker from "./MapMarker"
 import { LatLngTuple } from "leaflet"
 import { Popup } from "react-leaflet"
@@ -35 +35 @@
     useEffect(() => {
         // Either set the path if it exists or set it to an empty array
         setPath(paths && paths.length > idx ? paths[idx] : [])
-    }, [paths])
+    }, [idx, paths])
 
     // Primary path index to set the correct color
     const primaryPathIdx = useSelector(
@@ -59 +59 @@
             (item) => item.active
         )
         if (activeMapPoints.length < 2) {
+            setEdges([])
             return
         }
 
@@ -72 +73 @@
             edges.push(
                 <TextPath
                     // Somehow this refuses to work so let it rerender everything ...
-                    // key={`${start.latitude},${start.longitude}-${end.latitude},${end.longitude}`}
-                    // key={`${start.id}-${end.id}`}
+                    key={`${start.id}-${end.id}:${start.latitude},${start.longitude}-${end.latitude},${end.longitude}`}
                     positions={[
                         [start.latitude, start.longitude],
                         [end.latitude, end.longitude],
@@ -105 +105 @@
         setVertices(
             displayableMapPoints.map((item) => (
                 <MapMarker
-                    key={`${item.catalogItem.latitude}${item.catalogItem.latitude}`}
+                    key={`${item.catalogItem.latitude}${item.catalogItem.longitude}`}
                     position={[
                         item.catalogItem.latitude as number,
                         item.catalogItem.longitude as number,
                     ]}
                     updatePositionCallbackFn={(position: LatLngTuple) => {
-                        // Update the position of the map point
                         dispatch(
-                            updateMapMarkerPosition({
+                            updateMapMarker({
                                 idx,
-                                mapPointIdx: item.idx,
-                                position,
+                                item: new MapPoint(item.idx, item.active, {
+                                    ...item.catalogItem,
+                                    latitude: position[0],
+                                    longitude: position[1],
+                                }),
                             })
                         )
                     }}
@@ -138 +140 @@
                                         <Checkbox
                                             checked={item.active}
                                             onChange={() => {
-                                                item.active = !item.active
-                                                setDisplayableMapPoints([
-                                                    ...displayableMapPoints,
-                                                ])
+                                                dispatch(
+                                                    updateMapMarker({
+                                                        idx,
+                                                        item: new MapPoint(
+                                                            item.idx,
+                                                            !item.active,
+                                                            item.catalogItem
+                                                        ),
+                                                    })
+                                                )
                                             }}
                                         />
                                     }