changing gpx color

src/components/dialogs/GpxDialog.tsx

@@ -66,6 +66,16 @@ const GpxDialogUnconnected: FC<Props> = ({
     [gpx, editorSetGpx]
   );
 
+  const onRouteColor = useCallback(
+    index => {
+      if (!gpx.enabled) return;
+      editorSetGpx({
+        list: gpx.list.map((el, i) => (i !== index ? el : { ...el, color: getRandomColor() })),
+      });
+    },
+    [gpx, editorSetGpx]
+  );
+
   const toggleGpx = useCallback(() => {
     editorSetGpx({ enabled: !gpx.enabled });
   }, [gpx, editorSetGpx]);
@@ -83,7 +93,7 @@ const GpxDialogUnconnected: FC<Props> = ({
   const addCurrent = useCallback(() => {
     if (!route.length) return;
 
-    const { path } = getUrlData()
+    const { path } = getUrlData();
 
     editorSetGpx({
       list: [
@@ -115,6 +125,7 @@ const GpxDialogUnconnected: FC<Props> = ({
           onRouteDrop={onRouteDrop}
           onFocusRoute={onFocusRoute}
           onRouteToggle={onRouteToggle}
+          onRouteColor={onRouteColor}
         />
       ))}
 

src/components/gpx/GpxDialogRow.tsx

@@ -12,12 +12,13 @@ interface IProps {
   onFocusRoute: (i: number) => void
   onRouteDrop: (i: number) => void
   onRouteToggle: (i: number) => void
+  onRouteColor: (i: number) => void
 }
 
-const GpxDialogRow: FC<IProps> = ({ item, index, enabled, onRouteToggle, onFocusRoute, onRouteDrop }) => {
+const GpxDialogRow: FC<IProps> = ({ item, index, enabled, onRouteToggle, onFocusRoute, onRouteDrop, onRouteColor }) => {
   return (
     <div className={classnames("gpx-row", { 'gpx-row_disabled': !enabled || !item.enabled })}>
-      <div className="gpx-row__color" style={{ backgroundColor: item.color }}/>
+      <div className="gpx-row__color" style={{ backgroundColor: item.color }} onClick={() => onRouteColor(index)}/>
 
       <div className="gpx-row__title" onClick={() => onFocusRoute(index)}>
         {item.name}

src/map/GpxPolyline/index.tsx

@@ -20,7 +20,7 @@ const GpxPolyline: FC<IProps> = ({ latlngs, color }) => {
     setLayer(item);
 
     return () => MainMap.removeLayer(item);
-  }, [MainMap]);
+  }, [MainMap, color, latlngs]);
 
   useEffect(() => {
     if (!layer) return;