Handling wheel events

This commit is contained in:
Eric van der Vlist 2022-09-12 15:58:10 +02:00
parent b81b5e509e
commit c4bd74a598
4 changed files with 85 additions and 14 deletions

View File

@ -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';

View File

@ -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>

View File

@ -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;

View File

@ -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;
},