From c4bd74a5988469352fab5c31b810c2142865f489 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Mon, 12 Sep 2022 15:58:10 +0200
Subject: [PATCH] Handling wheel events

---
 src/App.tsx                                   |  2 +-
 .../slippy/{sleepy.tsx => slippy.tsx}         | 17 +++--
 src/components/slippy/wheel-handler.tsx       | 67 +++++++++++++++++++
 src/store/slippy.ts                           | 13 ++--
 4 files changed, 85 insertions(+), 14 deletions(-)
 rename src/components/slippy/{sleepy.tsx => slippy.tsx} (75%)
 create mode 100644 src/components/slippy/wheel-handler.tsx

diff --git a/src/App.tsx b/src/App.tsx
index c7d5a16..9167ad8 100644
--- a/src/App.tsx
+++ b/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';
 
diff --git a/src/components/slippy/sleepy.tsx b/src/components/slippy/slippy.tsx
similarity index 75%
rename from src/components/slippy/sleepy.tsx
rename to src/components/slippy/slippy.tsx
index df2ee47..4507345 100644
--- a/src/components/slippy/sleepy.tsx
+++ b/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>
diff --git a/src/components/slippy/wheel-handler.tsx b/src/components/slippy/wheel-handler.tsx
new file mode 100644
index 0000000..e9ef1a7
--- /dev/null
+++ b/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;
diff --git a/src/store/slippy.ts b/src/store/slippy.ts
index 7207a0e..2aee334 100644
--- a/src/store/slippy.ts
+++ b/src/store/slippy.ts
@@ -1,12 +1,12 @@
 import { createSlice } from '@reduxjs/toolkit';
 
-import { Point } from '../components/slippy/sleepy';
+import { Point } from '../components/slippy/slippy';
 
 export interface SlippyState {
-    scale: number;
-    translation: Point;
-  }
-  
+  scale: number;
+  translation: Point;
+}
+
 const initialSlippyState: SlippyState = {
   scale: 1,
   translation: { x: 0, y: 0 },
@@ -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;
     },