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<{}> = () => {
-
+
+
+
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 = (
+ 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 (
+
+ {props.children}
+
+ );
+};
+
+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;
},