mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-24 18:46:40 +07:00
253 lines
6.8 KiB
TypeScript
253 lines
6.8 KiB
TypeScript
import React, { useCallback, useEffect, useRef, useState } 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/map/DomMarker';
|
|
import { createPortal } from 'react-dom';
|
|
import { MainMap } from '~/constants/map';
|
|
import { getAdaptiveScale } from '~/utils/dom';
|
|
|
|
interface IProps {
|
|
sticker: IStickerDump;
|
|
onDragStart?: () => void;
|
|
index: number;
|
|
is_editing: boolean;
|
|
zoom: number;
|
|
|
|
mapSetSticker: (index: number, sticker: IStickerDump) => void;
|
|
mapDropSticker: (index: number) => void;
|
|
}
|
|
|
|
export const getLabelDirection = (angle?: number): 'left' | 'right' =>
|
|
!!angle && angle % Math.PI >= -(Math.PI / 2) && angle % Math.PI <= Math.PI / 2 ? 'left' : 'right';
|
|
|
|
const getX = e =>
|
|
e.touches && e.touches.length > 0
|
|
? { pageX: e.touches[0].pageX, pageY: e.touches[0].pageY }
|
|
: { pageX: e.pageX, pageY: e.pageY };
|
|
|
|
const Sticker: React.FC<IProps> = ({
|
|
sticker,
|
|
index,
|
|
is_editing,
|
|
zoom,
|
|
mapSetSticker,
|
|
mapDropSticker,
|
|
}) => {
|
|
const [text, setText] = useState(sticker.text || '');
|
|
const [layer, setLayer] = React.useState<Marker | null>(null);
|
|
const [dragging, setDragging] = React.useState(false);
|
|
const wrapper = useRef<HTMLDivElement>(null);
|
|
|
|
let angle = useRef(sticker.angle);
|
|
|
|
const element = React.useMemo(() => document.createElement('div'), []);
|
|
|
|
const stickerArrow = React.useRef<HTMLDivElement>(null);
|
|
const stickerImage = React.useRef<HTMLDivElement>(null);
|
|
|
|
const onChange = React.useCallback(state => mapSetSticker(index, state), [mapSetSticker, index]);
|
|
const onDelete = React.useCallback(() => setTimeout(() => mapDropSticker(index), 0), [mapDropSticker, index]);
|
|
|
|
const updateAngle = useCallback(
|
|
ang => {
|
|
const x = Math.cos(ang + Math.PI) * 56 - 30;
|
|
const y = Math.sin(ang + Math.PI) * 56 - 30;
|
|
|
|
if (!stickerImage.current || !stickerArrow.current) {
|
|
return;
|
|
}
|
|
|
|
stickerImage.current.style.left = String(6 + x);
|
|
stickerImage.current.style.top = String(6 + y);
|
|
|
|
stickerArrow.current.style.transform = `rotate(${ang + Math.PI}rad)`;
|
|
},
|
|
[stickerArrow, stickerImage],
|
|
);
|
|
|
|
const onDragStart = React.useCallback(() => {
|
|
if (!layer?.dragging) {
|
|
return;
|
|
}
|
|
|
|
layer.dragging.disable();
|
|
MainMap.dragging.disable();
|
|
MainMap.disableClicks();
|
|
|
|
setDragging(true);
|
|
}, [setDragging, layer]);
|
|
|
|
const onDragStop = React.useCallback(
|
|
event => {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
|
|
if (!layer?.dragging) {
|
|
return;
|
|
}
|
|
|
|
setDragging(false);
|
|
onChange({
|
|
...sticker,
|
|
angle: angle.current,
|
|
});
|
|
|
|
layer.dragging.enable();
|
|
MainMap.dragging.enable();
|
|
|
|
setTimeout(MainMap.enableClicks, 100);
|
|
},
|
|
[setDragging, layer, MainMap, sticker, angle],
|
|
);
|
|
|
|
const onMoveStarted = React.useCallback(() => {
|
|
MainMap.disableClicks();
|
|
}, [onChange, sticker, MainMap]);
|
|
|
|
const onMoveFinished = React.useCallback(
|
|
event => {
|
|
const target = event.target as Marker;
|
|
|
|
onChange({
|
|
...sticker,
|
|
latlng: target.getLatLng(),
|
|
});
|
|
|
|
MainMap.enableClicks();
|
|
},
|
|
[onChange, sticker],
|
|
);
|
|
|
|
const onDrag = React.useCallback(
|
|
event => {
|
|
if (!element) return;
|
|
|
|
const { x, y } = element.getBoundingClientRect() as DOMRect;
|
|
const { pageX, pageY } = getX(event);
|
|
angle.current = parseFloat(Math.atan2(y - pageY, x - pageX).toFixed(2));
|
|
updateAngle(angle.current);
|
|
},
|
|
[element, updateAngle, angle],
|
|
);
|
|
|
|
const onTextChange = React.useCallback(text => setText(text), [sticker, onChange]);
|
|
|
|
const onTextBlur = React.useCallback(() => {
|
|
onChange({
|
|
...sticker,
|
|
text,
|
|
});
|
|
}, [text, onChange, sticker]);
|
|
|
|
const direction = React.useMemo(() => {
|
|
getLabelDirection(sticker?.angle);
|
|
}, [sticker.angle]);
|
|
|
|
useEffect(() => {
|
|
updateAngle(sticker.angle);
|
|
angle.current = sticker.angle;
|
|
}, [sticker.angle]);
|
|
|
|
useEffect(() => {
|
|
if (!layer) return;
|
|
layer.setLatLng(sticker.latlng);
|
|
}, [layer, sticker.latlng]);
|
|
|
|
useEffect(() => {
|
|
if (!layer) return;
|
|
|
|
setText(sticker.text || '');
|
|
}, [layer, sticker.text]);
|
|
|
|
useEffect(() => {
|
|
if (!wrapper || !wrapper.current) return;
|
|
|
|
const scale = getAdaptiveScale(zoom); // adaptive zoom :-)
|
|
|
|
wrapper.current.style.transform = `scale(${scale}) perspective(1px)`;
|
|
}, [zoom, wrapper]);
|
|
|
|
// Attaches onMoveFinished event to item
|
|
React.useEffect(() => {
|
|
if (!layer) return;
|
|
|
|
layer.addEventListener('dragstart', onMoveStarted);
|
|
layer.addEventListener('dragend', 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);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('mousemove', onDrag);
|
|
document.removeEventListener('mouseup', onDragStop);
|
|
};
|
|
}, [dragging, onDrag, onDragStop]);
|
|
|
|
// Initial leaflet marker creation, when element (dom element div) is ready
|
|
React.useEffect(() => {
|
|
const icon = new DomMarker({
|
|
element,
|
|
className: 'sticker-container',
|
|
});
|
|
|
|
const item = marker(sticker.latlng, { icon, draggable: true });
|
|
|
|
setLayer(item);
|
|
|
|
return () => {
|
|
item.remove();
|
|
};
|
|
}, [sticker.latlng, element]);
|
|
|
|
useEffect(() => {
|
|
if (!layer) return;
|
|
|
|
layer.addTo(MainMap.stickerLayer);
|
|
|
|
return () => MainMap.stickerLayer.removeLayer(layer);
|
|
}, [layer]);
|
|
|
|
React.useEffect(() => {
|
|
element.className = is_editing ? 'sticker-container' : 'sticker-container inactive';
|
|
}, [element, is_editing, layer]);
|
|
|
|
|
|
return createPortal(
|
|
<div ref={wrapper} className="sticker-wrapper">
|
|
<div className="sticker-arrow" ref={stickerArrow} />
|
|
<div className={classNames(`sticker-label ${direction}`)} ref={stickerImage}>
|
|
<StickerDesc value={text} onChange={onTextChange} onBlur={onTextBlur} />
|
|
|
|
<div
|
|
className="sticker-image"
|
|
style={{
|
|
backgroundImage: `url('${STICKERS[sticker.set].url}`,
|
|
backgroundPosition: `${-STICKERS[sticker.set].layers[sticker.sticker].off * 72} 50%`,
|
|
}}
|
|
onMouseDown={onDragStart}
|
|
onMouseUp={onDragStop}
|
|
onTouchStart={onDragStart}
|
|
onTouchEnd={onDragStop}
|
|
/>
|
|
|
|
<div className="sticker-delete" onMouseDown={onDelete} onTouchStart={onDelete} />
|
|
</div>
|
|
</div>,
|
|
element,
|
|
);
|
|
};
|
|
|
|
export { Sticker };
|