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

better sticker change handling

Browse source
This commit is contained in:
Fedor Katurov 2020-01-22 12:02:16 +07:00
parent a1f9704c0b
commit 60b8fd51a2
2 changed files with 33 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/StickerDesc.tsx
View file

@ -4,6 +4,7 @@ import classnames from 'classnames';
interface Props { interface Props {
value: string; value: string;
onChange: (text: string) => void; onChange: (text: string) => void;
onBlur: () => void;
} }
type State = { type State = {
@ -50,6 +51,7 @@ class StickerDesc extends React.PureComponent<Props, State> {
onMouseDown={this.blockMouse} onMouseDown={this.blockMouse}
onDragStart={this.blockMouse} onDragStart={this.blockMouse}
ref={el => { this.input = el; }} ref={el => { this.input = el; }}
onBlur={this.props.onBlur}
/> />
</div> </div>
</div> </div>

53
src/map/Sticker/index.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useCallback, useRef } from 'react'; import React, { useEffect, useCallback, useRef, useState } 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';
@ -33,6 +33,7 @@ const Sticker: React.FC<IProps> = ({
mapDropSticker, mapDropSticker,
is_editing, is_editing,
}) => { }) => {
const [text, setText] = useState(sticker.text);
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);
let angle = useRef(sticker.angle); let angle = useRef(sticker.angle);
@ -44,17 +45,20 @@ 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 => { const updateAngle = useCallback(
if (!stickerImage.current || !stickerArrow.current) return; ang => {
if (!stickerImage.current || !stickerArrow.current) return;
const x = Math.cos(ang + Math.PI) * 56 - 30; const x = Math.cos(ang + Math.PI) * 56 - 30;
const y = Math.sin(ang + Math.PI) * 56 - 30; const y = Math.sin(ang + 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(${ang + Math.PI}rad)`; stickerArrow.current.style.transform = `rotate(${ang + Math.PI}rad)`;
}, [stickerArrow, stickerImage, angle]); },
[stickerArrow, stickerImage, angle]
);
const onDragStart = React.useCallback(() => { const onDragStart = React.useCallback(() => {
layer.dragging.disable(); layer.dragging.disable();
@ -115,26 +119,31 @@ const Sticker: React.FC<IProps> = ({
[element, updateAngle, angle] [element, updateAngle, angle]
); );
const onTextChange = React.useCallback( const onTextChange = React.useCallback(text => setText(text), [sticker, onChange]);
text =>
onChange({ const onTextBlur = React.useCallback(() => {
...sticker, onChange({
text, ...sticker,
}), text,
[sticker, onChange] });
); }, [text, onChange, sticker]);
const direction = React.useMemo(() => getLabelDirection(sticker.angle), [sticker.angle]); const direction = React.useMemo(() => getLabelDirection(sticker.angle), [sticker.angle]);
useEffect(() => { useEffect(() => {
updateAngle(sticker.angle); updateAngle(sticker.angle);
angle.current = sticker.angle; angle.current = sticker.angle;
}, [sticker.angle]) }, [sticker.angle]);
useEffect(() => { useEffect(() => {
if (!layer) return; if (!layer) return;
layer.setLatLng(sticker.latlng) layer.setLatLng(sticker.latlng);
}, [layer, sticker.latlng]) }, [layer, sticker.latlng]);
useEffect(() => {
if (!layer) return;
setText(sticker.text);
}, [layer, sticker.text]);
// Attaches onMoveFinished event to item // Attaches onMoveFinished event to item
React.useEffect(() => { React.useEffect(() => {
@ -194,7 +203,7 @@ const Sticker: React.FC<IProps> = ({
<React.Fragment> <React.Fragment>
<div className="sticker-arrow" ref={stickerArrow} /> <div className="sticker-arrow" ref={stickerArrow} />
<div className={classNames(`sticker-label ${direction}`)} ref={stickerImage}> <div className={classNames(`sticker-label ${direction}`)} ref={stickerImage}>
<StickerDesc value={sticker.text} onChange={onTextChange} /> <StickerDesc value={text} onChange={onTextChange} onBlur={onTextBlur} />
<div <div
className="sticker-image" className="sticker-image"