63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import react, { useState } from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
|
|
import { mapActions } from '../../store/map';
|
|
|
|
|
|
interface WheelHandlerProps {
|
|
children: any;
|
|
}
|
|
|
|
const WheelHandler: react.FC<WheelHandlerProps> = (
|
|
props: WheelHandlerProps
|
|
) => {
|
|
const dispatch = useDispatch();
|
|
|
|
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(
|
|
mapActions.scale({
|
|
factor: event.deltaY > 0 ? Math.SQRT2 : Math.SQRT1_2,
|
|
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;
|