Adding double click and wheel handlers

This commit is contained in:
Eric van der Vlist 2022-10-18 17:42:11 +02:00
parent 4f64d9906c
commit f1ad35a479
2 changed files with 57 additions and 3 deletions

View File

@ -20,6 +20,8 @@ export interface HandlersProperties {
* @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
* * doubleClick to zoom in
* * wheel to zoom in and out
*
*/
export const Handlers: react.FC<HandlersProperties> = (
@ -40,6 +42,11 @@ export const Handlers: react.FC<HandlersProperties> = (
//}
};
/**
*
* Mouse handlers
*
*/
const initialMouseState = {
down: false,
starting: { x: -1, y: -1 },
@ -95,6 +102,49 @@ export const Handlers: react.FC<HandlersProperties> = (
}
};
/**
*
* Double click
*
*/
const doubleClickHandler = (event: any) => {
genericHandler(event);
props.transformMap(null, Math.SQRT2, {
x: event.clientX,
y: event.clientY,
});
};
/**
*
* Wheel handler
*
*/
const initialWheelState = {
timestamp: 0,
};
const wheelState = useRef(initialWheelState);
const wheelEventHandler = (event: any) => {
genericHandler(event);
if (
event.deltaMode === WheelEvent.DOM_DELTA_PIXEL &&
Date.now() - wheelState.current.timestamp >
handlersConfig.wheelThrottleDelay
) {
props.transformMap(null, event.deltaY < 0 ? Math.SQRT2 : Math.SQRT1_2, {
x: event.clientX,
y: event.clientY,
});
wheelState.current = {
timestamp: Date.now(),
};
}
};
return (
<div
className='handler'
@ -103,6 +153,8 @@ export const Handlers: react.FC<HandlersProperties> = (
onMouseMove={mouseMoveHandler}
onMouseUp={mouseUpHandler}
onMouseLeave={mouseLeaveHandler}
onDoubleClick={doubleClickHandler}
onWheel={wheelEventHandler}
/>
);
};

View File

@ -2,4 +2,6 @@
export const handlersConfig = {
/**Controls the activity of the mouse mouse event */
mouseMoveThrottleDelay: 50,
}
/**Controls the activity of the wheel event */
wheelThrottleDelay: 100,
};