Adding double click and wheel handlers

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<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}
     />
   );
 };

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,
-}
+  /**Controls the activity of the mouse mouse event */
+  mouseMoveThrottleDelay: 50,
+  /**Controls the activity of the wheel event */
+  wheelThrottleDelay: 100,
+};