From de2b747a20ce2185c30ba94100bae29c2ddfe538 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Thu, 16 Jan 2020 12:03:02 +0700 Subject: [PATCH] Arrows layer --- src/containers/App.tsx | 2 +- src/map/Arrows/index.tsx | 35 +++++++++++++++++++ src/{containers => }/map/KmMarks/index.tsx | 11 +++--- src/{containers => }/map/Map/index.tsx | 14 ++++---- src/{containers => }/map/Route/index.tsx | 3 +- src/{containers => }/map/Router/index.tsx | 0 src/{containers => }/map/Sticker/index.tsx | 0 src/{containers => }/map/Stickers/index.tsx | 2 +- src/{containers => }/map/TileLayer/index.tsx | 2 +- src/modules/Map.ts | 36 -------------------- src/utils/map/{Arrows.ts => ArrowsLayer.ts} | 10 +++--- 11 files changed, 57 insertions(+), 58 deletions(-) create mode 100644 src/map/Arrows/index.tsx rename src/{containers => }/map/KmMarks/index.tsx (78%) rename src/{containers => }/map/Map/index.tsx (88%) rename src/{containers => }/map/Route/index.tsx (96%) rename src/{containers => }/map/Router/index.tsx (100%) rename src/{containers => }/map/Sticker/index.tsx (100%) rename src/{containers => }/map/Stickers/index.tsx (96%) rename src/{containers => }/map/TileLayer/index.tsx (95%) delete mode 100644 src/modules/Map.ts rename src/utils/map/{Arrows.ts => ArrowsLayer.ts} (88%) diff --git a/src/containers/App.tsx b/src/containers/App.tsx index 3be17a4..e109b32 100644 --- a/src/containers/App.tsx +++ b/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'; diff --git a/src/map/Arrows/index.tsx b/src/map/Arrows/index.tsx new file mode 100644 index 0000000..fa4dbb0 --- /dev/null +++ b/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 mapDispatchToProps & {}; + +const ArrowsUnconnected: FC = 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 }; diff --git a/src/containers/map/KmMarks/index.tsx b/src/map/KmMarks/index.tsx similarity index 78% rename from src/containers/map/KmMarks/index.tsx rename to src/map/KmMarks/index.tsx index 2b06992..2440e96 100644 --- a/src/containers/map/KmMarks/index.tsx +++ b/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 mapDispatchToProps & {}; -const KmMarksUnconnected: FC = ({ - map: { route }, -}) => { +const KmMarksUnconnected: FC = memo(({ map: { route } }) => { const [layer, setLayer] = useState(null); useEffect(() => { @@ -30,7 +29,7 @@ const KmMarksUnconnected: FC = ({ layer.setLatLngs(route); }, [layer, route]); return null; -}; +}); const KmMarks = connect(mapStateToProps, mapDispatchToProps)(KmMarksUnconnected); diff --git a/src/containers/map/Map/index.tsx b/src/map/Map/index.tsx similarity index 88% rename from src/containers/map/Map/index.tsx rename to src/map/Map/index.tsx index 1671d2d..3016e40 100644 --- a/src/containers/map/Map/index.tsx +++ b/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 = ({ /> - + + , document.getElementById('canvas') ); diff --git a/src/containers/map/Route/index.tsx b/src/map/Route/index.tsx similarity index 96% rename from src/containers/map/Route/index.tsx rename to src/map/Route/index.tsx index f7c0a54..993e256 100644 --- a/src/containers/map/Route/index.tsx +++ b/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'; diff --git a/src/containers/map/Router/index.tsx b/src/map/Router/index.tsx similarity index 100% rename from src/containers/map/Router/index.tsx rename to src/map/Router/index.tsx diff --git a/src/containers/map/Sticker/index.tsx b/src/map/Sticker/index.tsx similarity index 100% rename from src/containers/map/Sticker/index.tsx rename to src/map/Sticker/index.tsx diff --git a/src/containers/map/Stickers/index.tsx b/src/map/Stickers/index.tsx similarity index 96% rename from src/containers/map/Stickers/index.tsx rename to src/map/Stickers/index.tsx index bd6fa33..d7d98f8 100644 --- a/src/containers/map/Stickers/index.tsx +++ b/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'; diff --git a/src/containers/map/TileLayer/index.tsx b/src/map/TileLayer/index.tsx similarity index 95% rename from src/containers/map/TileLayer/index.tsx rename to src/map/TileLayer/index.tsx index 15296f1..f01b676 100644 --- a/src/containers/map/TileLayer/index.tsx +++ b/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"; diff --git a/src/modules/Map.ts b/src/modules/Map.ts deleted file mode 100644 index 354845a..0000000 --- a/src/modules/Map.ts +++ /dev/null @@ -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); - } -} diff --git a/src/utils/map/Arrows.ts b/src/utils/map/ArrowsLayer.ts similarity index 88% rename from src/utils/map/Arrows.ts rename to src/utils/map/ArrowsLayer.ts index 5e89229..149f639 100644 --- a/src/utils/map/Arrows.ts +++ b/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 };