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