*Not* using redux for mouseState.
This commit is contained in:
parent
3421686f1f
commit
ec0883ac54
|
@ -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));
|
||||
|
||||
|
@ -43,30 +46,28 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
|
|||
const mouseLeaveHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
// throtteledMouseMoveHandler.cancel();
|
||||
dispatch(mouseHandlerActions.init());
|
||||
setMouseState(initialMouseState);
|
||||
};
|
||||
|
||||
const mouseDownHandler = (event: any) => {
|
||||
event.preventDefault();
|
||||
genericHandler(event);
|
||||
dispatch(
|
||||
mouseHandlerActions.set({
|
||||
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({
|
||||
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(
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue