muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactored stickers

Browse source
This commit is contained in:
Fedor Katurov 2020-01-14 11:55:41 +07:00
parent 27884b1201
commit 1307ff407e
3 changed files with 18 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/containers/map/Map/index.tsx
View file

@ -68,7 +68,6 @@ const MapUnconnected: React.FC<IProps> = ({
<Stickers <Stickers
stickers={stickers} stickers={stickers}
map={MainMap}
mapSetSticker={mapSetSticker} mapSetSticker={mapSetSticker}
mapDropSticker={mapDropSticker} mapDropSticker={mapDropSticker}
is_editing={editing} is_editing={editing}

34
src/containers/map/Sticker/index.tsx
View file

@ -9,7 +9,6 @@ import { createPortal } from 'react-dom';
import { MapContainer, MainMap } from '~/constants/map'; import { MapContainer, MainMap } from '~/constants/map';
interface IProps { interface IProps {
map: MapContainer;
sticker: IStickerDump; sticker: IStickerDump;
onDragStart?: () => void; onDragStart?: () => void;
index: number; index: number;
@ -28,7 +27,6 @@ const getX = e =>
: { pageX: e.pageX, pageY: e.pageY }; : { pageX: e.pageX, pageY: e.pageY };
const Sticker: React.FC<IProps> = ({ const Sticker: React.FC<IProps> = ({
map,
sticker, sticker,
index, index,
mapSetSticker, mapSetSticker,
@ -60,11 +58,11 @@ const Sticker: React.FC<IProps> = ({
const onDragStart = React.useCallback(() => { const onDragStart = React.useCallback(() => {
layer.dragging.disable(); layer.dragging.disable();
map.dragging.disable(); MainMap.dragging.disable();
map.disableClicks(); MainMap.disableClicks();
setDragging(true); setDragging(true);
}, [setDragging, layer, map]); }, [setDragging, layer, MainMap]);
const onDragStop = React.useCallback( const onDragStop = React.useCallback(
event => { event => {
@ -80,16 +78,16 @@ const Sticker: React.FC<IProps> = ({
}); });
layer.dragging.enable(); layer.dragging.enable();
map.dragging.enable(); MainMap.dragging.enable();
setTimeout(map.enableClicks, 100); setTimeout(MainMap.enableClicks, 100);
}, },
[setDragging, layer, map, sticker, angle] [setDragging, layer, MainMap, sticker, angle]
); );
const onMoveStarted = React.useCallback(() => { const onMoveStarted = React.useCallback(() => {
map.disableClicks(); MainMap.disableClicks();
}, [onChange, sticker, map]); }, [onChange, sticker, MainMap]);
const onMoveFinished = React.useCallback( const onMoveFinished = React.useCallback(
event => { event => {
@ -100,9 +98,9 @@ const Sticker: React.FC<IProps> = ({
latlng: target.getLatLng(), latlng: target.getLatLng(),
}); });
map.enableClicks(); MainMap.enableClicks();
}, },
[onChange, sticker, map] [onChange, sticker, MainMap]
); );
const onDrag = React.useCallback( const onDrag = React.useCallback(
@ -132,18 +130,6 @@ const Sticker: React.FC<IProps> = ({
updateAngle(sticker.angle); updateAngle(sticker.angle);
angle.current = sticker.angle; angle.current = sticker.angle;
}, [sticker.angle]) }, [sticker.angle])
// Updates html element accroding to current angle
// React.useEffect(() => {
// if (!stickerImage.current || !stickerArrow.current) return;
// const x = Math.cos(angle + Math.PI) * 56 - 30;
// const y = Math.sin(angle + Math.PI) * 56 - 30;
// stickerImage.current.style.left = String(6 + x);
// stickerImage.current.style.top = String(6 + y);
// stickerArrow.current.style.transform = `rotate(${angle + Math.PI}rad)`;
// }, [stickerArrow, stickerImage, angle]);
// Attaches onMoveFinished event to item // Attaches onMoveFinished event to item
React.useEffect(() => { React.useEffect(() => {

15
src/containers/map/Stickers/index.tsx
View file

@ -3,32 +3,33 @@ import { IStickerDump } from '~/redux/map/types';
import { FeatureGroup, Map } from 'leaflet'; import { FeatureGroup, Map } from 'leaflet';
import { Sticker } from '~/containers/map/Sticker'; import { Sticker } from '~/containers/map/Sticker';
import { mapSetSticker, mapDropSticker } from '~/redux/map/actions'; import { mapSetSticker, mapDropSticker } from '~/redux/map/actions';
import { MapContainer } from '~/constants/map'; import { MapContainer, MainMap } from '~/constants/map';
interface IProps { interface IProps {
stickers: IStickerDump[]; stickers: IStickerDump[];
is_editing: boolean; is_editing: boolean;
map: MapContainer;
mapSetSticker: typeof mapSetSticker; mapSetSticker: typeof mapSetSticker;
mapDropSticker: typeof mapDropSticker; mapDropSticker: typeof mapDropSticker;
} }
const Stickers: React.FC<IProps> = React.memo( const Stickers: React.FC<IProps> = React.memo(
({ stickers, is_editing, map, mapSetSticker, mapDropSticker }) => { ({ stickers, is_editing, mapSetSticker, mapDropSticker }) => {
const [layer, setLayer] = React.useState<FeatureGroup>(null); const [layer, setLayer] = React.useState<FeatureGroup>(null);
React.useEffect(() => { React.useEffect(() => {
if (!map) return; if (!MainMap) return;
setLayer(new FeatureGroup().addTo(map)); const item = new FeatureGroup().addTo(MainMap.stickerLayer);
}, [map]); setLayer(item);
return () => MainMap.stickerLayer.removeLayer(item);
}, [MainMap]);
return ( return (
<div> <div>
{layer && {layer &&
stickers.map((sticker, index) => ( stickers.map((sticker, index) => (
<Sticker <Sticker
map={map}
sticker={sticker} sticker={sticker}
key={`${sticker.set}.${sticker.sticker}.${index}`} key={`${sticker.set}.${sticker.sticker}.${index}`}
index={index} index={index}