diff --git a/src/components/map/Handlers.tsx b/src/components/map/Handlers.tsx index a660aa6..3b9c7a3 100644 --- a/src/components/map/Handlers.tsx +++ b/src/components/map/Handlers.tsx @@ -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 = ( @@ -40,6 +42,11 @@ export const Handlers: react.FC = ( //} }; + /** + * + * Mouse handlers + * + */ const initialMouseState = { down: false, starting: { x: -1, y: -1 }, @@ -95,6 +102,49 @@ export const Handlers: react.FC = ( } }; + /** + * + * 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 (
= ( onMouseMove={mouseMoveHandler} onMouseUp={mouseUpHandler} onMouseLeave={mouseLeaveHandler} + onDoubleClick={doubleClickHandler} + onWheel={wheelEventHandler} /> ); }; diff --git a/src/components/map/config.ts b/src/components/map/config.ts index 426e59b..1881126 100644 --- a/src/components/map/config.ts +++ b/src/components/map/config.ts @@ -1,5 +1,7 @@ /**The handlers configuration */ export const handlersConfig = { - /**Controls the activity of the mouse mouse event */ - mouseMoveThrottleDelay: 50, -} \ No newline at end of file + /**Controls the activity of the mouse mouse event */ + mouseMoveThrottleDelay: 50, + /**Controls the activity of the wheel event */ + wheelThrottleDelay: 100, +};