muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-24 18:46:40 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

cleanup

Browse source
This commit is contained in:
Fedor Katurov 2019-12-30 17:59:02 +07:00
parent 848fa9fd02
commit 9f8cb1a875
1 changed files with 40 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,7 +27,14 @@ const getX = e =>
? { pageX: e.touches[0].pageX, pageY: e.touches[0].pageY }
: { pageX: e.pageX, pageY: e.pageY };
const Sticker: React.FC<IProps> = ({ map, sticker, index, mapSetSticker, mapDropSticker, is_editing }) => {
const Sticker: React.FC<IProps> = ({
map,
sticker,
index,
mapSetSticker,
mapDropSticker,
is_editing
}) => {
const [layer, setLayer] = React.useState<Marker>(null);
const [dragging, setDragging] = React.useState(false);
const [angle, setAngle] = React.useState(sticker.angle);
@ -36,8 +43,14 @@ const Sticker: React.FC<IProps> = ({ map, sticker, index, mapSetSticker, mapDrop
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();
@ -57,14 +70,17 @@ const Sticker: React.FC<IProps> = ({ map, sticker, index, mapSetSticker, mapDrop
});
}, [setDragging, layer, map, sticker, angle]);
const onMoveFinished = React.useCallback(event => {
const onMoveFinished = React.useCallback(
event => {
const target = event.target as Marker;
onChange({
...sticker,
latlng: target.getLatLng(),
latlng: target.getLatLng()
});
}, [onChange, sticker]);
},
[onChange, sticker]
);
const onDrag = React.useCallback(
event => {
@ -78,10 +94,14 @@ const Sticker: React.FC<IProps> = ({ map, sticker, index, mapSetSticker, mapDrop
[element]
);
const onTextChange = React.useCallback(text => onChange({
const onTextChange = React.useCallback(
text =>
onChange({
...sticker,
text,
}), [sticker, onChange])
text
}),
[sticker, onChange]
);
const direction = React.useMemo(() => getLabelDirection(angle), [angle]);
@ -136,18 +156,14 @@ const Sticker: React.FC<IProps> = ({ map, sticker, index, mapSetSticker, mapDrop
return () => {
item.removeFrom(map);
item.remove();
}
};
}, [element, map, sticker]);
React.useEffect(() => {
if (is_editing) {
element.className = 'sticker-container';
} else {
element.className = 'sticker-container inactive';
}
}, [element, is_editing])
element.className = is_editing
? "sticker-container"
: "sticker-container inactive";
}, [element, is_editing]);
return createPortal(
<React.Fragment>