Handling wheel events
This commit is contained in:
parent
b81b5e509e
commit
c4bd74a598
|
@ -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';
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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;
|
|
@ -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;
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue