2022-10-18 08:10:23 +00:00
|
|
|
import react, { useState } from 'react';
|
|
|
|
import { throttle } from 'lodash';
|
|
|
|
import { Point } from './types';
|
|
|
|
import { handlersConfig } from './config';
|
|
|
|
|
|
|
|
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
|
|
|
|
* @returns A div with handlers
|
|
|
|
*/
|
|
|
|
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 },
|
|
|
|
};
|
|
|
|
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 },
|
2022-10-18 08:10:23 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const mouseUpHandler = (event: any) => {
|
|
|
|
genericHandler(event);
|
|
|
|
setMouseState(initialMouseState);
|
|
|
|
};
|
|
|
|
|
|
|
|
const mouseMoveHandler = throttle((event: any) => {
|
|
|
|
genericHandler(event);
|
2022-10-18 09:44:50 +00:00
|
|
|
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,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
2022-10-18 08:10:23 +00:00
|
|
|
}, handlersConfig.mouseMoveThrottleDelay);
|
|
|
|
|
|
|
|
const [mouseState, setMouseState] = useState(initialMouseState);
|
|
|
|
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;
|