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 './theme/variables.css';
import Map from './components/map/map'; 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 Layer from './components/slippy/layer';
import { Fragment } from 'react'; import { Fragment } from 'react';

View File

@ -5,6 +5,7 @@ import MouseHandler from './mouse-handler';
import '../../theme/slippy.css'; import '../../theme/slippy.css';
import SingleTouchHandler from './single-touch-handler'; import SingleTouchHandler from './single-touch-handler';
import DoubleTouchHandler from './double-touch-handler'; import DoubleTouchHandler from './double-touch-handler';
import WheelHandler from './wheel-handler';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { MapState } from '../../store/map'; import { MapState } from '../../store/map';
@ -36,6 +37,7 @@ const Slippy: react.FC<{}> = () => {
<MouseHandler> <MouseHandler>
<SingleTouchHandler> <SingleTouchHandler>
<DoubleTouchHandler> <DoubleTouchHandler>
<WheelHandler>
<div <div
style={{ style={{
position: 'fixed', position: 'fixed',
@ -43,6 +45,7 @@ const Slippy: react.FC<{}> = () => {
height: viewport.height + 'px', height: viewport.height + 'px',
}} }}
/> />
</WheelHandler>
</DoubleTouchHandler> </DoubleTouchHandler>
</SingleTouchHandler> </SingleTouchHandler>
</MouseHandler> </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,6 +1,6 @@
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import { Point } from '../components/slippy/sleepy'; import { Point } from '../components/slippy/slippy';
export interface SlippyState { export interface SlippyState {
scale: number; scale: number;
@ -17,6 +17,7 @@ const slippySlice = createSlice({
initialState: initialSlippyState, initialState: initialSlippyState,
reducers: { reducers: {
scale(state, action) { scale(state, action) {
console.log(`redux scale: ${JSON.stringify(action.payload)}`);
state.scale = state.scale * action.payload.factor; state.scale = state.scale * action.payload.factor;
state.translation.x = state.translation.x =
state.translation.x + state.translation.x +
@ -28,7 +29,7 @@ const slippySlice = createSlice({
(action.payload.factor - 1); (action.payload.factor - 1);
}, },
translate(state, action) { 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.x = state.translation.x + action.payload.x;
state.translation.y = state.translation.y + action.payload.y; state.translation.y = state.translation.y + action.payload.y;
}, },