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

faster sticker rotation and angle update fix

Browse source
This commit is contained in:
Fedor Katurov 2020-01-14 11:15:46 +07:00
parent 56fd8ec4cd
commit 0710ecdf01
1 changed files with 32 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { useEffect } from 'react'; import React, { useEffect, useCallback, useRef } from 'react';
import { marker, Marker } from 'leaflet'; import { marker, Marker } from 'leaflet';
import { IStickerDump } from '~/redux/map/types'; import { IStickerDump } from '~/redux/map/types';
import { STICKERS } from '~/constants/stickers'; import { STICKERS } from '~/constants/stickers';
@ -37,7 +37,7 @@ const Sticker: React.FC<IProps> = ({
}) => { }) => {
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); let angle = useRef(sticker.angle);
const element = React.useMemo(() => document.createElement('div'), []); const element = React.useMemo(() => document.createElement('div'), []);
const stickerArrow = React.useRef(null); const stickerArrow = React.useRef(null);
@ -46,6 +46,18 @@ const Sticker: React.FC<IProps> = ({
const onChange = React.useCallback(state => mapSetSticker(index, state), [mapSetSticker, index]); const onChange = React.useCallback(state => mapSetSticker(index, state), [mapSetSticker, index]);
const onDelete = React.useCallback(state => mapDropSticker(index), [mapSetSticker, index]); const onDelete = React.useCallback(state => mapDropSticker(index), [mapSetSticker, index]);
const updateAngle = useCallback(ang => {
if (!stickerImage.current || !stickerArrow.current) return;
const x = Math.cos(ang + Math.PI) * 56 - 30;
const y = Math.sin(ang + Math.PI) * 56 - 30;
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, angle]);
const onDragStart = React.useCallback(() => { const onDragStart = React.useCallback(() => {
layer.dragging.disable(); layer.dragging.disable();
map.dragging.disable(); map.dragging.disable();
@ -64,7 +76,7 @@ const Sticker: React.FC<IProps> = ({
setDragging(false); setDragging(false);
onChange({ onChange({
...sticker, ...sticker,
angle, angle: angle.current,
}); });
layer.dragging.enable(); layer.dragging.enable();
@ -99,10 +111,10 @@ const Sticker: React.FC<IProps> = ({
const { x, y } = element.getBoundingClientRect() as DOMRect; const { x, y } = element.getBoundingClientRect() as DOMRect;
const { pageX, pageY } = getX(event); const { pageX, pageY } = getX(event);
angle.current = parseFloat(Math.atan2(y - pageY, x - pageX).toFixed(2));
setAngle(parseFloat(Math.atan2(y - pageY, x - pageX).toFixed(2))); updateAngle(angle.current);
}, },
[element] [element, updateAngle, angle]
); );
const onTextChange = React.useCallback( const onTextChange = React.useCallback(
@ -113,21 +125,25 @@ const Sticker: React.FC<IProps> = ({
}), }),
[sticker, onChange] [sticker, onChange]
); );
const direction = React.useMemo(() => getLabelDirection(sticker.angle), [sticker.angle]);
const direction = React.useMemo(() => getLabelDirection(angle), [angle]); useEffect(() => {
updateAngle(sticker.angle);
angle.current = sticker.angle;
}, [sticker.angle])
// Updates html element accroding to current angle // Updates html element accroding to current angle
React.useEffect(() => { // React.useEffect(() => {
if (!stickerImage.current || !stickerArrow.current) return; // if (!stickerImage.current || !stickerArrow.current) return;
const x = Math.cos(angle + Math.PI) * 56 - 30; // const x = Math.cos(angle + Math.PI) * 56 - 30;
const y = Math.sin(angle + Math.PI) * 56 - 30; // const y = Math.sin(angle + Math.PI) * 56 - 30;
stickerImage.current.style.left = String(6 + x); // stickerImage.current.style.left = String(6 + x);
stickerImage.current.style.top = String(6 + y); // stickerImage.current.style.top = String(6 + y);
stickerArrow.current.style.transform = `rotate(${angle + Math.PI}rad)`; // stickerArrow.current.style.transform = `rotate(${angle + Math.PI}rad)`;
}, [stickerArrow, stickerImage, angle]); // }, [stickerArrow, stickerImage, angle]);
// Attaches onMoveFinished event to item // Attaches onMoveFinished event to item
React.useEffect(() => { React.useEffect(() => {