drawing poly

package.json

@@ -80,6 +80,7 @@
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "pt-sans-cyrillic": "0.0.4",
     "raleway-cyrillic": "^4.0.2",
+    "ramda": "^0.26.1",
     "rc-slider": "8.5.0",
     "react": "16.8.1",
     "react-dom": "16.8.1",

src/containers/map/Map/index.tsx

@@ -63,7 +63,7 @@ const MapUnconnected: React.FC<IProps> = ({
   return createPortal(
     <div>
       <TileLayer provider={provider} map={MainMap} />
-      <Route route={route} mapSetRoute={mapSetRoute} map={MainMap} is_editing={editing} />
+      <Route />
       <Stickers
         stickers={stickers}
         map={MainMap}

src/containers/map/Route/index.tsx

@@ -1,78 +1,99 @@
-import React, {
+import React, { FC, useEffect, memo, useState, useCallback } from 'react';
-  FC,
+import { IMapRoute } from '../../../redux/map/types';
-  useEffect,
+import { InteractivePoly } from '~/modules/InteractivePoly';
-  memo,
+import { isMobile } from '~/utils/window';
-  useState,
+import { LatLng, Map } from 'leaflet';
-  useCallback
+import { selectEditor } from '~/redux/editor/selectors';
-} from "react";
+import pick from 'ramda/es/pick';
-import { IMapRoute, ILatLng } from "../../../redux/map/types";
+import * as MAP_ACTIONS from '~/redux/map/actions';
-import { InteractivePoly } from "~/modules/InteractivePoly"; 
+import { connect } from 'react-redux';
-import { isMobile } from "~/utils/window";
+import { selectMap } from '~/redux/map/selectors';
-import { LatLng, Map } from "leaflet";
+import { MainMap } from '~/constants/map';
+import { MODES } from '~/constants/modes';
 
-interface IProps {
+const mapStateToProps = state => ({
-  map: Map;
+  editor: pick(['mode', 'editing'], selectEditor(state)),
-  route: IMapRoute;
+  map: pick(['route'], selectMap(state)),
-  is_editing: boolean;
+});
-  mapSetRoute: (latlngs: ILatLng[]) => void;
-}
 
-const Route: FC<IProps> = memo(({ route, is_editing, mapSetRoute, map }) => {
+const mapDispatchToProps = {
-  const [layer, setLayer] = useState<InteractivePoly>(null);
+  mapSetRoute: MAP_ACTIONS.mapSetRoute,
+};
 
-  useEffect(() => {
+type Props = ReturnType<typeof mapStateToProps> &
-    if (!map) return;
+  typeof mapDispatchToProps & {
+  };
 
-    setLayer(
+const RouteUnconnected: FC<Props> = memo(
-      new InteractivePoly([], {
+  ({ map: { route }, editor: { editing, mode }, mapSetRoute }) => {
-        color: "url(#activePathGradient)",
+    const [layer, setLayer] = useState<InteractivePoly>(null);
-        weight: 6,
+
-        maxMarkers: isMobile() ? 20 : 100,
+    useEffect(() => {
-        smoothFactor: 3,
+      if (!MainMap) return;
-      })
+
-        .addTo(map)
+      setLayer(
+        new InteractivePoly([], {
+          color: 'url(#activePathGradient)',
+          weight: 6,
+          maxMarkers: isMobile() ? 20 : 100,
+          smoothFactor: 3,
+        }).addTo(MainMap)
         // .on("distancechange", console.log)
         // .on("allvertexhide", console.log)
         // .on("allvertexshow", console.log)
+      );
+    }, [MainMap]);
+
+    const onRouteChanged = useCallback(
+      ({ latlngs }) => {
+        // console.log('THIS!');
+        mapSetRoute(latlngs);
+      },
+      [mapSetRoute]
     );
-  }, [map]);
 
+    useEffect(() => {
+      if (!layer) return;
 
-  const onRouteChanged = useCallback(
+      layer.on('latlngschange', onRouteChanged);
-    ({ latlngs }) => {
-      // console.log('THIS!');
-      mapSetRoute(latlngs)
-    },
-    [mapSetRoute]
-  );
 
-  useEffect(() => {
+      return () => layer.off('latlngschange', onRouteChanged);
-    if (!layer) return;
+    }, [layer, onRouteChanged]);
 
-    layer.on("latlngschange", onRouteChanged);
+    useEffect(() => {
+      if (!layer) return;
 
-    return () => layer.off("latlngschange", onRouteChanged);
+      const points = (route && route.length > 0 && route) || [];
-  }, [layer, onRouteChanged]);
 
-  useEffect(() => {
+      layer.setPoints(points as LatLng[]);
-    if (!layer) return;
+    }, [route, layer]);
 
-    const points = (route && route.length > 0 && route) || [];
+    useEffect(() => {
+      if (!layer) return;
 
-    layer.setPoints(points as LatLng[]);
+      if (editing) {
-  }, [route, layer]);
+        layer.editor.enable();
+      } else {
+        layer.editor.disable();
+      }
+    }, [editing, layer]);
 
-  useEffect(() => {
+    useEffect(() => {
-    if (!layer) return;
+      if (!layer) return;
+      
+      if (mode === MODES.POLY && !layer.is_drawing) {
+        layer.editor.continue();
+      }
 
-    if (is_editing) {
+      if (mode !== MODES.POLY && layer.is_drawing) {
-      layer.editor.enable();
+        layer.editor.stop();
-    } else {
+      }
-      layer.editor.disable();
+    }, [mode, layer]);
-    }
-  }, [is_editing, layer]);
 
-  return null;
+    return null;
-});
+  }
+);
+
+const Route = connect(mapStateToProps, mapDispatchToProps)(RouteUnconnected);
 
 export { Route };

src/modules/InteractivePoly.ts

@@ -182,6 +182,11 @@ export class InteractivePoly extends Polyline {
       this.is_drawing = true;
       this.drawing_direction = "backward";
       this.startDrawing();
+    },
+    stop: () => {
+      this.stopDragHinting();
+      this.is_drawing = false;
+      this.stopDrawing();
     }
   };