dyomedea/src/components/map/Handlers.tsx

110 lines
2.6 KiB
TypeScript
Raw Normal View History

2022-10-18 08:10:23 +00:00
import react, { useState } from 'react';
import { Point } from './types';
2022-10-18 11:45:16 +00:00
import './Handler.css';
import { handlersConfig } from './config';
2022-10-18 08:10:23 +00:00
export interface HandlersProperties {
/**Transform the map:
* * Shift the map by a number of pixel
* * Multiply the zoom by deltaZoom around the zoomCenter
* */
transformMap: (
deltaShift: Point | null,
deltaZoom: number | null,
zoomCenter: Point | null
) => void;
}
/**
*
* @param props
2022-10-18 11:45:16 +00:00
* @returns A div with the following handlers
* * mouseLeave, mouseDown and mouseUp to track the mouse state
* * mouseMove to shift the map if the mouse is down
*
2022-10-18 08:10:23 +00:00
*/
export const Handlers: react.FC<HandlersProperties> = (
props: HandlersProperties
) => {
const genericHandler = (event: any) => {
// console.log(`Log - Event: ${event.type}`);
2022-10-18 09:44:50 +00:00
// if (event.clientX !== undefined) {
2022-10-18 08:10:23 +00:00
// console.log(
2022-10-18 09:44:50 +00:00
// `Mouse : ${event.clientX}, ${event.clientY}, target: ${event.target}`
2022-10-18 08:10:23 +00:00
// );
// console.log(
// `mouseState: ' ${JSON.stringify(mouseState)} (+${
// Date.now() - mouseState.timestamp
// }ms) `
// );
// return;
//}
};
const initialMouseState = {
down: false,
starting: { x: -1, y: -1 },
timestamp: 0,
2022-10-18 08:10:23 +00:00
};
const [mouseState, setMouseState] = useState(initialMouseState);
2022-10-18 08:10:23 +00:00
const mouseLeaveHandler = (event: any) => {
genericHandler(event);
setMouseState(initialMouseState);
};
const mouseDownHandler = (event: any) => {
genericHandler(event);
setMouseState({
down: true,
2022-10-18 09:44:50 +00:00
starting: { x: event.clientX, y: event.clientY },
timestamp: 0,
2022-10-18 08:10:23 +00:00
});
};
const mouseUpHandler = (event: any) => {
genericHandler(event);
setMouseState(initialMouseState);
};
const mouseMoveHandler = (event: any) => {
if (
mouseState.down &&
Date.now() - mouseState.timestamp > handlersConfig.mouseMoveThrottleDelay
) {
genericHandler(event);
if (mouseState.down) {
props.transformMap(
{
x: event.clientX - mouseState.starting.x,
y: event.clientY - mouseState.starting.y,
},
null,
null
);
setMouseState({
down: true,
starting: {
x: event.clientX,
y: event.clientY,
},
timestamp: Date.now(),
});
}
2022-10-18 09:44:50 +00:00
}
};
2022-10-18 08:10:23 +00:00
return (
<div
className='handler'
2022-10-18 09:44:50 +00:00
role='presentation'
2022-10-18 08:10:23 +00:00
onMouseDown={mouseDownHandler}
onMouseMove={mouseMoveHandler}
onMouseUp={mouseUpHandler}
onMouseLeave={mouseLeaveHandler}
/>
);
};
export default Handlers;