From 7bdf07cae561c7d43e2971f72be38e1ba7dd87b6 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Thu, 9 Jan 2020 12:44:25 +0700 Subject: [PATCH] fixed map clicks on sticker drag --- src/components/dialogs/RouterDialog.tsx | 64 +++++++++------ src/constants/map.ts | 18 +++++ src/containers/map/Map/index.tsx | 70 +++++++--------- src/containers/map/Sticker/index.tsx | 103 +++++++++++------------- src/containers/map/Stickers/index.tsx | 5 +- src/redux/editor/sagas.ts | 29 +++---- src/utils/renderer.ts | 2 +- 7 files changed, 150 insertions(+), 141 deletions(-) create mode 100644 src/constants/map.ts diff --git a/src/components/dialogs/RouterDialog.tsx b/src/components/dialogs/RouterDialog.tsx index a362d9e..0e11cd8 100644 --- a/src/components/dialogs/RouterDialog.tsx +++ b/src/components/dialogs/RouterDialog.tsx @@ -1,25 +1,20 @@ -import React from 'react'; +import React, { FC } from 'react'; import { Icon } from '~/components/panels/Icon'; -import * as EDITOR_ACTIONS from '~/redux/editor/actions' -import classnames from "classnames"; +import * as EDITOR_ACTIONS from '~/redux/editor/actions'; +import classnames from 'classnames'; +import { connect } from 'react-redux'; +import { selectEditor } from '~/redux/editor/selectors'; -type Props = { - routerPoints: number, - width: number, - is_routing: boolean, - - editorRouterCancel: typeof EDITOR_ACTIONS.editorRouterCancel, - editorRouterSubmit: typeof EDITOR_ACTIONS.editorRouterSubmit, -} - -const noPoints = ({ editorRouterCancel }: { editorRouterCancel: typeof EDITOR_ACTIONS.editorRouterCancel }) => ( +const noPoints = ({ + editorRouterCancel, +}: { + editorRouterCancel: typeof EDITOR_ACTIONS.editorRouterCancel; +}) => (
-
- Укажите первую точку на карте -
+
Укажите первую точку на карте
@@ -33,7 +28,11 @@ const noPoints = ({ editorRouterCancel }: { editorRouterCancel: typeof EDITOR_AC ); -const firstPoint = ({ editorRouterCancel }: { editorRouterCancel: typeof EDITOR_ACTIONS.editorRouterCancel }) => ( +const firstPoint = ({ + editorRouterCancel, +}: { + editorRouterCancel: typeof EDITOR_ACTIONS.editorRouterCancel; +}) => (
@@ -53,10 +52,11 @@ const firstPoint = ({ editorRouterCancel }: { editorRouterCancel: typeof EDITOR_ ); const draggablePoints = ({ - editorRouterCancel, editorRouterSubmit + editorRouterCancel, + editorRouterSubmit, }: { - editorRouterCancel: typeof EDITOR_ACTIONS.editorRouterCancel, - editorRouterSubmit: typeof EDITOR_ACTIONS.editorRouterSubmit, + editorRouterCancel: typeof EDITOR_ACTIONS.editorRouterCancel; + editorRouterSubmit: typeof EDITOR_ACTIONS.editorRouterSubmit; }) => (
@@ -79,9 +79,23 @@ const draggablePoints = ({ ); -export const RouterDialog = ({ - routerPoints, editorRouterCancel, editorRouterSubmit, width, is_routing, -}: Props) => ( +const mapStateToProps = state => ({ + editor: selectEditor(state), +}); + +const mapDispatchToProps = { + editorRouterCancel: EDITOR_ACTIONS.editorRouterCancel, + editorRouterSubmit: EDITOR_ACTIONS.editorRouterSubmit, +}; + +type Props = ReturnType & typeof mapDispatchToProps & { width?: number }; + +const RouterDialogUnconnected: FC = ({ + editor: { routerPoints, is_routing }, + editorRouterCancel, + editorRouterSubmit, + width, +}) => (
@@ -90,3 +104,7 @@ export const RouterDialog = ({ {routerPoints >= 2 && draggablePoints({ editorRouterCancel, editorRouterSubmit })}
); + +const RouterDialog = connect(mapStateToProps, mapDispatchToProps)(RouterDialogUnconnected); + +export { RouterDialog }; diff --git a/src/constants/map.ts b/src/constants/map.ts new file mode 100644 index 0000000..241fc28 --- /dev/null +++ b/src/constants/map.ts @@ -0,0 +1,18 @@ +import { Map } from 'leaflet'; + +export class MapContainer extends Map { + disableClicks = () => { + this.clickable = false; + }; + + enableClicks = () => { + this.clickable = true; + }; + + public clickable = true; +} + +export const MainMap = new MapContainer(document.getElementById('canvas')).setView( + [55.0153275, 82.9071235], + 13 +); diff --git a/src/containers/map/Map/index.tsx b/src/containers/map/Map/index.tsx index 2c42cb8..ba5a2b5 100644 --- a/src/containers/map/Map/index.tsx +++ b/src/containers/map/Map/index.tsx @@ -1,20 +1,18 @@ -import { Map as MapInterface, map } from "leaflet"; -import React from "react"; -import { createPortal } from "react-dom"; -import { - selectMapProvider, - selectMapRoute, - selectMapStickers -} from "~/redux/map/selectors"; -import { connect } from "react-redux"; -import * as MAP_ACTIONS from "~/redux/map/actions"; +import React from 'react'; -import { Route } from "~/containers/map/Route"; -import { TileLayer } from "~/containers/map/TileLayer"; -import { Stickers } from "~/containers/map/Stickers"; +import { MainMap } from '~/constants/map'; +import { Map as MapInterface } from 'leaflet'; +import { createPortal } from 'react-dom'; +import { selectMapProvider, selectMapRoute, selectMapStickers } from '~/redux/map/selectors'; +import { connect } from 'react-redux'; +import * as MAP_ACTIONS from '~/redux/map/actions'; + +import { Route } from '~/containers/map/Route'; +import { TileLayer } from '~/containers/map/TileLayer'; +import { Stickers } from '~/containers/map/Stickers'; import 'leaflet/dist/leaflet.css'; -import { selectEditorEditing } from "~/redux/editor/selectors"; +import { selectEditorEditing } from '~/redux/editor/selectors'; const mapStateToProps = state => ({ provider: selectMapProvider(state), @@ -27,15 +25,13 @@ const mapDispatchToProps = { mapSetRoute: MAP_ACTIONS.mapSetRoute, mapDropSticker: MAP_ACTIONS.mapDropSticker, mapSetSticker: MAP_ACTIONS.mapSetSticker, - mapClicked: MAP_ACTIONS.mapClicked + mapClicked: MAP_ACTIONS.mapClicked, }; type IProps = React.HTMLAttributes & ReturnType & typeof mapDispatchToProps & {}; -export let MainMap = map(document.getElementById('canvas')).setView([55.0153275, 82.9071235], 13); - const MapUnconnected: React.FC = ({ provider, route, @@ -45,44 +41,38 @@ const MapUnconnected: React.FC = ({ mapClicked, mapSetRoute, mapSetSticker, - mapDropSticker + mapDropSticker, }) => { - const ref = React.useRef(null); - const [layer, setLayer] = React.useState(null); + const onClick = React.useCallback( + event => { + if (!MainMap.clickable) return; - const onClick = React.useCallback(event => { - mapClicked(event.latlng); - }, [mapClicked]); + mapClicked(event.latlng); + }, + [mapClicked] + ); React.useEffect(() => { - if (!ref.current) return; - - setLayer(MainMap); - }, []); - - React.useEffect(() => { - if (!layer) return; - - layer.addEventListener("click", onClick) + MainMap.addEventListener('click', onClick); return () => { - layer.removeEventListener("click", onClick) - } - }, [layer, onClick]); + MainMap.removeEventListener('click', onClick); + }; + }, [MainMap, onClick]); return createPortal( -
- - +
+ +
, - document.getElementById("canvas") + document.getElementById('canvas') ); }; diff --git a/src/containers/map/Sticker/index.tsx b/src/containers/map/Sticker/index.tsx index f9964bf..6fc4599 100644 --- a/src/containers/map/Sticker/index.tsx +++ b/src/containers/map/Sticker/index.tsx @@ -1,14 +1,15 @@ -import React from "react"; -import { Map, marker, Marker } from "leaflet"; -import { IStickerDump } from "~/redux/map/types"; -import { STICKERS } from "~/constants/stickers"; -import { StickerDesc } from "~/components/StickerDesc"; -import classNames from "classnames"; -import { DomMarker } from "~/utils/DomMarker"; -import { createPortal } from "react-dom"; +import React from 'react'; +import { marker, Marker } from 'leaflet'; +import { IStickerDump } from '~/redux/map/types'; +import { STICKERS } from '~/constants/stickers'; +import { StickerDesc } from '~/components/StickerDesc'; +import classNames from 'classnames'; +import { DomMarker } from '~/utils/DomMarker'; +import { createPortal } from 'react-dom'; +import { MapContainer } from '~/constants/map'; interface IProps { - map: Map; + map: MapContainer; sticker: IStickerDump; index: number; is_editing: boolean; @@ -17,10 +18,8 @@ interface IProps { mapDropSticker: (index: number) => void; } -export const getLabelDirection = (angle: number): "left" | "right" => - angle % Math.PI >= -(Math.PI / 2) && angle % Math.PI <= Math.PI / 2 - ? "left" - : "right"; +export const getLabelDirection = (angle: number): 'left' | 'right' => + angle % Math.PI >= -(Math.PI / 2) && angle % Math.PI <= Math.PI / 2 ? 'left' : 'right'; const getX = e => e.touches && e.touches.length > 0 @@ -33,53 +32,56 @@ const Sticker: React.FC = ({ index, mapSetSticker, mapDropSticker, - is_editing + is_editing, }) => { const [layer, setLayer] = React.useState(null); const [dragging, setDragging] = React.useState(false); const [angle, setAngle] = React.useState(sticker.angle); - const element = React.useMemo(() => document.createElement("div"), []); + const element = React.useMemo(() => document.createElement('div'), []); const stickerArrow = React.useRef(null); const stickerImage = React.useRef(null); - const onChange = React.useCallback(state => mapSetSticker(index, state), [ - mapSetSticker, - index - ]); - const onDelete = React.useCallback(state => mapDropSticker(index), [ - mapSetSticker, - index - ]); + const onChange = React.useCallback(state => mapSetSticker(index, state), [mapSetSticker, index]); + const onDelete = React.useCallback(state => mapDropSticker(index), [mapSetSticker, index]); const onDragStart = React.useCallback(() => { layer.dragging.disable(); map.dragging.disable(); + map.disableClicks(); setDragging(true); }, [setDragging, layer, map]); const onDragStop = React.useCallback(() => { - layer.dragging.enable(); - map.dragging.enable(); - setDragging(false); onChange({ ...sticker, - angle + angle, }); + + layer.dragging.enable(); + map.dragging.enable(); + + setTimeout(map.enableClicks, 100); }, [setDragging, layer, map, sticker, angle]); + const onMoveStarted = React.useCallback(() => { + map.disableClicks(); + }, [onChange, sticker, map]); + const onMoveFinished = React.useCallback( event => { const target = event.target as Marker; onChange({ ...sticker, - latlng: target.getLatLng() + latlng: target.getLatLng(), }); + + map.enableClicks(); }, - [onChange, sticker] + [onChange, sticker, map] ); const onDrag = React.useCallback( @@ -98,7 +100,7 @@ const Sticker: React.FC = ({ text => onChange({ ...sticker, - text + text, }), [sticker, onChange] ); @@ -122,21 +124,25 @@ const Sticker: React.FC = ({ React.useEffect(() => { if (!layer) return; - layer.addEventListener("dragend", onMoveFinished); + layer.addEventListener('dragstart', onMoveStarted); + layer.addEventListener('dragend', onMoveFinished); - return () => layer.removeEventListener("dragend", onMoveFinished); - }, [layer, onMoveFinished]); + return () => { + layer.removeEventListener('dragstart', onMoveStarted); + layer.removeEventListener('dragend', onMoveFinished); + }; + }, [layer, onMoveFinished, onMoveStarted]); // Attaches and detaches handlers when user starts dragging React.useEffect(() => { if (dragging) { - document.addEventListener("mousemove", onDrag); - document.addEventListener("mouseup", onDragStop); + document.addEventListener('mousemove', onDrag); + document.addEventListener('mouseup', onDragStop); } return () => { - document.removeEventListener("mousemove", onDrag); - document.removeEventListener("mouseup", onDragStop); + document.removeEventListener('mousemove', onDrag); + document.removeEventListener('mouseup', onDragStop); }; }, [dragging, onDrag]); @@ -146,7 +152,7 @@ const Sticker: React.FC = ({ const icon = new DomMarker({ element, - className: "sticker-container" + className: 'sticker-container', }); const item = marker(sticker.latlng, { icon, draggable: true }).addTo(map); @@ -160,27 +166,20 @@ const Sticker: React.FC = ({ }, [element, map, sticker]); React.useEffect(() => { - element.className = is_editing - ? "sticker-container" - : "sticker-container inactive"; + element.className = is_editing ? 'sticker-container' : 'sticker-container inactive'; }, [element, is_editing]); return createPortal(
-
+
= ({ onTouchEnd={onDragStop} /> -
+
, element ); }; -export { Sticker }; \ No newline at end of file +export { Sticker }; diff --git a/src/containers/map/Stickers/index.tsx b/src/containers/map/Stickers/index.tsx index 57984d7..6756bec 100644 --- a/src/containers/map/Stickers/index.tsx +++ b/src/containers/map/Stickers/index.tsx @@ -3,17 +3,16 @@ import { IStickerDump } from '~/redux/map/types'; import { FeatureGroup, Map } from 'leaflet'; import { Sticker } from '~/containers/map/Sticker'; import { mapSetSticker, mapDropSticker } from '~/redux/map/actions'; +import { MapContainer } from '~/constants/map'; interface IProps { stickers: IStickerDump[]; is_editing: boolean; - map: Map; + map: MapContainer; mapSetSticker: typeof mapSetSticker; mapDropSticker: typeof mapDropSticker; } -// const { FC, useContext, useState, useEffect } = React; - const Stickers: React.FC = React.memo( ({ stickers, is_editing, map, mapSetSticker, mapDropSticker }) => { const [layer, setLayer] = React.useState(null); diff --git a/src/redux/editor/sagas.ts b/src/redux/editor/sagas.ts index c19fe1d..79df798 100644 --- a/src/redux/editor/sagas.ts +++ b/src/redux/editor/sagas.ts @@ -9,7 +9,6 @@ import { editorSetMode, editorSetReady, editorSetRenderer, - editorSetDialog, editorSetDialogActive, editorClearAll, editorSetFeature, @@ -172,40 +171,25 @@ function* cropAShotSaga(params) { } function* locationChangeSaga({ location }: ReturnType) { - const { - user: { id, random_url }, - }: ReturnType = yield select(selectUser); - const { ready }: ReturnType = yield select(selectEditor); - - const { owner, address }: ReturnType = yield select(selectMap); + const { address }: ReturnType = yield select(selectMap); if (!ready) return; const { path, mode } = getUrlData(location); if (address !== path) { - const map = yield call(loadMapSaga, path); - - if (map && map.route && map.route.owner && mode === 'edit' && map.route.owner !== id) { - return yield call(replaceAddressIfItsBusy, map.random_url, map.address); - } - } else if (mode === 'edit' && owner.id !== id) { - return yield call(replaceAddressIfItsBusy, random_url, address); - } else { - yield put(mapSetAddressOrigin('')); + yield call(loadMapSaga, path); } if (mode !== 'edit') { yield put(editorSetEditing(false)); - // editor.stopEditing(); } else { yield put(editorSetEditing(true)); - // editor.startEditing(); } } -function* keyPressedSaga({ key, target }: ReturnType): any { +function* keyPressedSaga({ key, target }: ReturnType) { if (target === 'INPUT' || target === 'TEXTAREA') { return; } @@ -237,7 +221,6 @@ function* keyPressedSaga({ key, target }: ReturnType): function* getGPXTrackSaga(): SagaIterator { const { route, stickers, title, address }: ReturnType = yield select(selectMap); - // const { title, address }: = yield select(selectUser); if (!route || route.length <= 0) return; @@ -246,6 +229,11 @@ function* getGPXTrackSaga(): SagaIterator { return downloadGPXTrack({ track, title }); } +function* routerCancel() { + yield put(editorSetMode(MODES.NONE)) + // TODO: clear router +} + export function* editorSaga() { yield takeEvery(EDITOR_ACTIONS.STOP_EDITING, stopEditingSaga); yield takeLatest(EDITOR_ACTIONS.TAKE_A_SHOT, takeAShotSaga); @@ -253,4 +241,5 @@ export function* editorSaga() { yield takeLatest(EDITOR_ACTIONS.LOCATION_CHANGED, locationChangeSaga); yield takeLatest(EDITOR_ACTIONS.KEY_PRESSED, keyPressedSaga); yield takeLatest(EDITOR_ACTIONS.GET_GPX_TRACK, getGPXTrackSaga); + yield takeLatest(EDITOR_ACTIONS.ROUTER_CANCEL, routerCancel); } diff --git a/src/utils/renderer.ts b/src/utils/renderer.ts index 650999e..eee1a3a 100644 --- a/src/utils/renderer.ts +++ b/src/utils/renderer.ts @@ -13,7 +13,7 @@ import { middleCoordPx, } from '~/utils/geom'; import { Point } from 'leaflet'; -import { MainMap } from '~/containers/map/Map'; +import { MainMap } from '~/constants/map'; export interface ITilePlacement { minX: number;