diff --git a/src/components/map/Handlers.tsx b/src/components/map/Handlers.tsx index 6d04db3..a660aa6 100644 --- a/src/components/map/Handlers.tsx +++ b/src/components/map/Handlers.tsx @@ -1,4 +1,4 @@ -import react, { useState } from 'react'; +import react, { useRef, useState } from 'react'; import { Point } from './types'; import './Handler.css'; import { handlersConfig } from './config'; @@ -46,50 +46,51 @@ export const Handlers: react.FC = ( timestamp: 0, }; - const [mouseState, setMouseState] = useState(initialMouseState); + const mouseState = useRef(initialMouseState); const mouseLeaveHandler = (event: any) => { genericHandler(event); - setMouseState(initialMouseState); + mouseState.current = initialMouseState; }; const mouseDownHandler = (event: any) => { genericHandler(event); - setMouseState({ + mouseState.current = { down: true, starting: { x: event.clientX, y: event.clientY }, timestamp: 0, - }); + }; }; const mouseUpHandler = (event: any) => { genericHandler(event); - setMouseState(initialMouseState); + mouseState.current = initialMouseState; }; const mouseMoveHandler = (event: any) => { if ( - mouseState.down && - Date.now() - mouseState.timestamp > handlersConfig.mouseMoveThrottleDelay + mouseState.current.down && + Date.now() - mouseState.current.timestamp > + handlersConfig.mouseMoveThrottleDelay ) { genericHandler(event); - if (mouseState.down) { + if (mouseState.current.down) { props.transformMap( { - x: event.clientX - mouseState.starting.x, - y: event.clientY - mouseState.starting.y, + x: event.clientX - mouseState.current.starting.x, + y: event.clientY - mouseState.current.starting.y, }, null, null ); - setMouseState({ + mouseState.current = { down: true, starting: { x: event.clientX, y: event.clientY, }, timestamp: Date.now(), - }); + }; } } };