Handling wheel events

src/components/slippy/slippy.tsx

@@ -5,6 +5,7 @@ import MouseHandler from './mouse-handler';
 import '../../theme/slippy.css';
 import SingleTouchHandler from './single-touch-handler';
 import DoubleTouchHandler from './double-touch-handler';
+import WheelHandler from './wheel-handler';
 import { useSelector } from 'react-redux';
 import { MapState } from '../../store/map';
 
@@ -36,13 +37,15 @@ const Slippy: react.FC<{}> = () => {
       <MouseHandler>
         <SingleTouchHandler>
           <DoubleTouchHandler>
-            <div
-              style={{
-                position: 'fixed',
-                width: viewport.width + 'px',
-                height: viewport.height + 'px',
-              }}
-            />
+            <WheelHandler>
+              <div
+                style={{
+                  position: 'fixed',
+                  width: viewport.width + 'px',
+                  height: viewport.height + 'px',
+                }}
+              />
+            </WheelHandler>
           </DoubleTouchHandler>
         </SingleTouchHandler>
       </MouseHandler>

src/components/slippy/wheel-handler.tsx

@@ -0,0 +1,67 @@
+import react, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+
+import _ from 'lodash';
+
+import { slippyActions } from '../../store/slippy';
+
+interface WheelHandlerProps {
+  children: any;
+}
+
+const WheelHandler: react.FC<WheelHandlerProps> = (
+  props: WheelHandlerProps
+) => {
+  const dispatch = useDispatch();
+
+  interface WheelState {
+    timestamp: number;
+  }
+
+  const initialWheelState = {
+    timestamp: 0,
+  };
+
+  const [wheelState, setWheelState] = useState(initialWheelState);
+
+  console.log('WheelHandler, wheelState: ' + JSON.stringify(wheelState));
+
+  const genericHandler = (event: any) => {
+    console.log(`Log - Event:  ${event.type}`);
+    if (event.deltaY !== undefined) {
+      console.log(`Wheel : ${event.deltaY}, ${event.deltaMode}`);
+      console.log(
+        `wheelState: ' ${JSON.stringify(wheelState)} (+${
+          Date.now() - wheelState.timestamp
+        }ms) `
+      );
+      return;
+    }
+  };
+
+  const wheelEventHandler = (event: any) => {
+    genericHandler(event);
+    if (
+      event.deltaMode === WheelEvent.DOM_DELTA_PIXEL &&
+      Date.now() - wheelState.timestamp > 100
+    ) {
+      dispatch(
+        slippyActions.scale({
+          factor: event.deltaY > 0 ? 2 : 0.5,
+          center: { x: event.pageX, y: event.pageY },
+        })
+      );
+      setWheelState({
+        timestamp: Date.now(),
+      });
+    }
+  };
+
+  return (
+    <div className='viewport wheel-handler' onWheel={wheelEventHandler}>
+      {props.children}
+    </div>
+  );
+};
+
+export default WheelHandler;