*Not* using redux for mouseState.

This commit is contained in:
Eric van der Vlist 2022-09-12 08:53:11 +02:00
parent 3421686f1f
commit ec0883ac54
3 changed files with 25 additions and 54 deletions

View File

@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux';
import _ from 'lodash';
import { slippyActions } from '../store/slippy';
import { mouseHandlerActions } from '../store/mouse-handler';
interface MouseHandlerProps {
children: any;
@ -21,9 +20,13 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
timestamp: number;
}
const mouseState = useSelector(
(state: { mouseHandler: MouseState }) => state.mouseHandler
);
const initialMouseState = {
down: false,
starting: { x: -1, y: -1 },
timestamp: 0,
};
const [mouseState, setMouseState] = useState(initialMouseState);
console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState));
@ -42,31 +45,29 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
const mouseLeaveHandler = (event: any) => {
genericHandler(event);
// throtteledMouseMoveHandler.cancel();
dispatch(mouseHandlerActions.init());
// throtteledMouseMoveHandler.cancel();
setMouseState(initialMouseState);
};
const mouseDownHandler = (event: any) => {
event.preventDefault();
genericHandler(event);
dispatch(
mouseHandlerActions.set({
down: true,
starting: { x: event.pageX, y: event.pageY },
timestamp: Date.now(),
})
);
setMouseState({
down: true,
starting: { x: event.pageX, y: event.pageY },
timestamp: Date.now(),
});
};
const mouseUpHandler = (event: any) => {
genericHandler(event);
event.preventDefault();
dispatch(mouseHandlerActions.init());
setMouseState(initialMouseState);
};
const mouseMoveHandler = (event: any) => {
event.preventDefault();
if (mouseState.down && (Date.now() - mouseState.timestamp) > 50 ) {
if (mouseState.down && Date.now() - mouseState.timestamp > 50) {
genericHandler(event);
console.log(
`dispatch ${JSON.stringify({
@ -81,16 +82,14 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
})
);
dispatch(
mouseHandlerActions.set({
down: true,
starting: {
x: event.pageX,
y: event.pageY,
},
timestamp: Date.now(),
})
);
setMouseState({
down: true,
starting: {
x: event.pageX,
y: event.pageY,
},
timestamp: Date.now(),
});
}
};
@ -99,8 +98,6 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
// [mouseState.down, mouseState.starting.x, mouseState.starting.y]
// );
const doubleClickHandler = (event: any) => {
genericHandler(event);
dispatch(

View File

@ -1,10 +1,9 @@
import { configureStore } from '@reduxjs/toolkit';
import slippyReducer from './slippy';
import mouseHandlerReducer from './mouse-handler';
const store = configureStore({
reducer: { slippy: slippyReducer, mouseHandler: mouseHandlerReducer },
reducer: { slippy: slippyReducer},
});
export default store;

View File

@ -1,25 +0,0 @@
import { createSlice } from '@reduxjs/toolkit';
const initialMouseState = {
down: false,
starting: { x: -1, y: -1 },
timestamp:0,
};
const mouseHandlerSlice = createSlice({
name: 'mouseHandler',
initialState: initialMouseState,
reducers: {
init(state) {
return initialMouseState;
},
set(state, action) {
return action.payload;
},
},
});
export const mouseHandlerActions = mouseHandlerSlice.actions;
export default mouseHandlerSlice.reducer;