mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 11:06:40 +07:00
fixed map clicks on sticker drag
This commit is contained in:
Fedor Katurov
parent
67eeaa7293
commit
7bdf07cae5
7 changed files with 150 additions and 141 deletions
|
|
@ -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<HTMLDivElement> &
|
||||
ReturnType<typeof mapStateToProps> &
|
||||
typeof mapDispatchToProps & {};
|
||||
|
||||
export let MainMap = map(document.getElementById('canvas')).setView([55.0153275, 82.9071235], 13);
|
||||
|
||||
const MapUnconnected: React.FC<IProps> = ({
|
||||
provider,
|
||||
route,
|
||||
|
|
@ -45,44 +41,38 @@ const MapUnconnected: React.FC<IProps> = ({
|
|||
mapClicked,
|
||||
mapSetRoute,
|
||||
mapSetSticker,
|
||||
mapDropSticker
|
||||
mapDropSticker,
|
||||
}) => {
|
||||
const ref = React.useRef(null);
|
||||
const [layer, setLayer] = React.useState<MapInterface>(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(
|
||||
<div ref={ref}>
|
||||
<TileLayer provider={provider} map={layer} />
|
||||
<Route route={route} mapSetRoute={mapSetRoute} map={layer} is_editing={editing} />
|
||||
<div>
|
||||
<TileLayer provider={provider} map={MainMap} />
|
||||
<Route route={route} mapSetRoute={mapSetRoute} map={MainMap} is_editing={editing} />
|
||||
<Stickers
|
||||
stickers={stickers}
|
||||
map={layer}
|
||||
map={MainMap}
|
||||
mapSetSticker={mapSetSticker}
|
||||
mapDropSticker={mapDropSticker}
|
||||
is_editing={editing}
|
||||
/>
|
||||
</div>,
|
||||
document.getElementById("canvas")
|
||||
document.getElementById('canvas')
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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<IProps> = ({
|
|||
index,
|
||||
mapSetSticker,
|
||||
mapDropSticker,
|
||||
is_editing
|
||||
is_editing,
|
||||
}) => {
|
||||
const [layer, setLayer] = React.useState<Marker>(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<IProps> = ({
|
|||
text =>
|
||||
onChange({
|
||||
...sticker,
|
||||
text
|
||||
text,
|
||||
}),
|
||||
[sticker, onChange]
|
||||
);
|
||||
|
|
@ -122,21 +124,25 @@ const Sticker: React.FC<IProps> = ({
|
|||
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<IProps> = ({
|
|||
|
||||
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<IProps> = ({
|
|||
}, [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(
|
||||
<React.Fragment>
|
||||
<div className="sticker-arrow" ref={stickerArrow} />
|
||||
<div
|
||||
className={classNames(`sticker-label ${direction}`, {})}
|
||||
ref={stickerImage}
|
||||
>
|
||||
<div className={classNames(`sticker-label ${direction}`)} ref={stickerImage}>
|
||||
<StickerDesc value={sticker.text} onChange={onTextChange} />
|
||||
|
||||
<div
|
||||
className="sticker-image"
|
||||
style={{
|
||||
backgroundImage: `url('${STICKERS[sticker.set].url}`,
|
||||
backgroundPosition: `${-STICKERS[sticker.set].layers[
|
||||
sticker.sticker
|
||||
].off * 72} 50%`
|
||||
backgroundPosition: `${-STICKERS[sticker.set].layers[sticker.sticker].off * 72} 50%`,
|
||||
}}
|
||||
onMouseDown={onDragStart}
|
||||
onMouseUp={onDragStop}
|
||||
|
|
@ -188,15 +187,11 @@ const Sticker: React.FC<IProps> = ({
|
|||
onTouchEnd={onDragStop}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="sticker-delete"
|
||||
onMouseDown={onDelete}
|
||||
onTouchStart={onDelete}
|
||||
/>
|
||||
<div className="sticker-delete" onMouseDown={onDelete} onTouchStart={onDelete} />
|
||||
</div>
|
||||
</React.Fragment>,
|
||||
element
|
||||
);
|
||||
};
|
||||
|
||||
export { Sticker };
|
||||
export { Sticker };
|
||||
|
|
|
|||
|
|
@ -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<IProps> = React.memo(
|
||||
({ stickers, is_editing, map, mapSetSticker, mapDropSticker }) => {
|
||||
const [layer, setLayer] = React.useState<FeatureGroup>(null);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue