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

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