Arrows layer

src/containers/App.tsx

@@ -16,7 +16,7 @@ import { LogoPreview } from '~/components/logo/LogoPreview';
 import { IStickerPack } from '~/constants/stickers';
 import { IDialogs } from '~/constants/dialogs';
 
-import { Map } from '~/containers/map/Map';
+import { Map } from '~/map/Map';
 import { IEditorState } from '~/redux/editor';
 import { IState } from '~/redux/store';
 

src/map/Arrows/index.tsx

@@ -0,0 +1,35 @@
+import { FC, memo, useState, useEffect } from 'react';
+import { MainMap } from '~/constants/map';
+import { connect } from 'react-redux';
+import { IState } from '~/redux/store';
+import { selectMapRoute } from '~/redux/map/selectors';
+import { ArrowsLayer } from '~/utils/map/ArrowsLayer';
+
+const mapStateToProps = (state: IState) => ({
+  route: selectMapRoute(state),
+});
+
+const mapDispatchToProps = {};
+
+type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const ArrowsUnconnected: FC<Props> = memo(({ route }) => {
+  const [layer, setLayer] = useState(null);
+
+  useEffect(() => {
+    const item = new ArrowsLayer({}).addTo(MainMap);
+    setLayer(item);    
+    return () => MainMap.removeLayer(item);
+  }, [MainMap]);
+
+  useEffect(() => {
+    if (!layer) return
+    
+    layer.setLatLngs(route);
+  }, [layer, route])
+  return null;
+});
+
+const Arrows = connect(mapStateToProps, mapDispatchToProps)(ArrowsUnconnected);
+
+export { Arrows };

src/map/KmMarks/index.tsx

@@ -1,20 +1,19 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC, useEffect, useState, memo } from 'react';
 import { KmMarksLayer } from '~/utils/marks';
 import { MainMap } from '~/constants/map';
 import { selectMap } from '~/redux/map/selectors';
 import pick from 'ramda/es/pick';
 import { connect } from 'react-redux';
+import { IState } from '~/redux/store';
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: IState) => ({
   map: pick(['route'], selectMap(state)),
 });
 
 const mapDispatchToProps = {};
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const KmMarksUnconnected: FC<Props> = ({
-  map: { route },
-}) => {
+const KmMarksUnconnected: FC<Props> = memo(({ map: { route } }) => {
   const [layer, setLayer] = useState(null);
 
   useEffect(() => {
@@ -30,7 +29,7 @@ const KmMarksUnconnected: FC<Props> = ({
     layer.setLatLngs(route);
   }, [layer, route]);
   return null;
-};
+});
 
 const KmMarks = connect(mapStateToProps, mapDispatchToProps)(KmMarksUnconnected);
 

src/map/Map/index.tsx

@@ -6,11 +6,12 @@ import { selectMapProvider, selectMapRoute, selectMapStickers } from '~/redux/ma
 import { connect } from 'react-redux';
 import * as MAP_ACTIONS from '~/redux/map/actions';
 
-import { Route } from '~/containers/map/Route';
-import { Router } from '~/containers/map/Router';
-import { TileLayer } from '~/containers/map/TileLayer';
-import { Stickers } from '~/containers/map/Stickers';
-import { KmMarks } from '~/containers/map/KmMarks';
+import { Route } from '~/map/Route';
+import { Router } from '~/map/Router';
+import { TileLayer } from '~/map/TileLayer';
+import { Stickers } from '~/map/Stickers';
+import { KmMarks } from '~/map/KmMarks';
+import { Arrows } from '~/map/Arrows';
 
 import 'leaflet/dist/leaflet.css';
 import { selectEditorEditing, selectEditorMode } from '~/redux/editor/selectors';
@@ -74,9 +75,10 @@ const MapUnconnected: React.FC<IProps> = ({
       />
 
       <Route />
-
       <Router />
+      
       <KmMarks />
+      <Arrows />
     </div>,
     document.getElementById('canvas')
   );

src/map/Route/index.tsx

@@ -1,8 +1,7 @@
 import React, { FC, useEffect, memo, useState, useCallback } from 'react';
-import { IMapRoute } from '../../../redux/map/types';
 import { InteractivePoly } from '~/utils/map/InteractivePoly';
 import { isMobile } from '~/utils/window';
-import { LatLng, Map, LeafletEvent } from 'leaflet';
+import { LatLng } from 'leaflet';
 import { selectEditor } from '~/redux/editor/selectors';
 import pick from 'ramda/es/pick';
 import * as MAP_ACTIONS from '~/redux/map/actions';

src/map/Stickers/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IStickerDump } from '~/redux/map/types';
 import { FeatureGroup, Map } from 'leaflet';
-import { Sticker } from '~/containers/map/Sticker';
+import { Sticker } from '~/map/Sticker';
 import { mapSetSticker, mapDropSticker } from '~/redux/map/actions';
 import { MapContainer, MainMap } from '~/constants/map';
 

src/map/TileLayer/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { TileContext } from "../../../utils/context";
+import { TileContext } from "~/utils/context";
 import { TileLayer as TileLayerInterface, tileLayer, Map } from "leaflet";
 import { DEFAULT_PROVIDER, PROVIDERS } from "~/constants/providers";
 import { IMapReducer } from "~/redux/map";

src/modules/Map.ts

@@ -1,36 +0,0 @@
-import {
-  Map as MapInterface,
-  map,
-  tileLayer,
-  TileLayer,
-} from 'leaflet';
-
-import 'leaflet/dist/leaflet.css';
-import { PROVIDER } from '$config/frontend'; // 
-import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
-
-interface Props {
-  container: string
-}
-
-export class Map {
-  constructor({ container }: Props) {
-    this.map = map(container).setView([55.0153275, 82.9071235], 13);
-    // todo: change coords?
-
-    this.tileLayer.addTo(this.map);
-  }
-
-  map: MapInterface;
-  tileLayer: TileLayer = tileLayer(PROVIDER.url, {
-    attribution: 'Независимое Велосообщество',
-    maxNativeZoom: 18,
-    maxZoom: 18,
-  });
-
-  setProvider = (provider: string): void => {
-    const { url } = (provider && PROVIDERS[provider] && PROVIDERS[provider]) || PROVIDERS[DEFAULT_PROVIDER];
-
-    this.tileLayer.setUrl(url);
-  }
-}

src/utils/map/ArrowsLayer.ts

@@ -3,7 +3,7 @@ import { arrowClusterIcon, createArrow } from "~/utils/arrow";
 import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
 import { angleBetweenPoints, dist2, middleCoord } from "~/utils/geom";
 
-class Component extends LayerGroup {
+class ArrowsLayer extends LayerGroup {
   constructor(props){
     super(props);
   }
@@ -47,19 +47,19 @@ class Component extends LayerGroup {
 }
 
 
-Component.addInitHook(function () {
+ArrowsLayer.addInitHook(function () {
   this.once('add', (event) => {
-    if (event.target instanceof Arrows) {
+    if (event.target instanceof ArrowsLayer) {
       this.map = event.target._map;
       this.arrowLayer.addTo(this.map);
     }
   });
 
   this.once('remove', (event) => {
-    if (event.target instanceof Arrows) {
+    if (event.target instanceof ArrowsLayer) {
       this.arrowLayer.removeFrom(this.map);
     }
   });
 });
 
-export const Arrows = Component;
+export { ArrowsLayer };