Handling wheel events

src/App.tsx

@@ -22,7 +22,7 @@ import '@ionic/react/css/display.css';
 import './theme/variables.css';
 
 import Map from './components/map/map';
-import Slippy from './components/slippy/sleepy';
+import Slippy from './components/slippy/slippy';
 import Layer from './components/slippy/layer';
 import { Fragment } from 'react';
 

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,6 +37,7 @@ const Slippy: react.FC<{}> = () => {
       <MouseHandler>
         <SingleTouchHandler>
           <DoubleTouchHandler>
+            <WheelHandler>
               <div
                 style={{
                   position: 'fixed',
@@ -43,6 +45,7 @@ const Slippy: react.FC<{}> = () => {
                   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;

src/store/slippy.ts

@@ -1,11 +1,11 @@
 import { createSlice } from '@reduxjs/toolkit';
 
-import { Point } from '../components/slippy/sleepy';
+import { Point } from '../components/slippy/slippy';
 
 export interface SlippyState {
   scale: number;
   translation: Point;
-  }
+}
 
 const initialSlippyState: SlippyState = {
   scale: 1,
@@ -17,6 +17,7 @@ const slippySlice = createSlice({
   initialState: initialSlippyState,
   reducers: {
     scale(state, action) {
+      console.log(`redux scale: ${JSON.stringify(action.payload)}`);
       state.scale = state.scale * action.payload.factor;
       state.translation.x =
         state.translation.x +
@@ -28,7 +29,7 @@ const slippySlice = createSlice({
           (action.payload.factor - 1);
     },
     translate(state, action) {
-      console.log(`translate: action=${JSON.stringify(action)}`);
+      console.log(`redux translate: action=${JSON.stringify(action)}`);
       state.translation.x = state.translation.x + action.payload.x;
       state.translation.y = state.translation.y + action.payload.y;
     },