*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 _ from 'lodash';
|
||||||
|
|
||||||
import { slippyActions } from '../store/slippy';
|
import { slippyActions } from '../store/slippy';
|
||||||
import { mouseHandlerActions } from '../store/mouse-handler';
|
|
||||||
|
|
||||||
interface MouseHandlerProps {
|
interface MouseHandlerProps {
|
||||||
children: any;
|
children: any;
|
||||||
|
@ -21,9 +20,13 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
|
||||||
timestamp: number;
|
timestamp: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const mouseState = useSelector(
|
const initialMouseState = {
|
||||||
(state: { mouseHandler: MouseState }) => state.mouseHandler
|
down: false,
|
||||||
);
|
starting: { x: -1, y: -1 },
|
||||||
|
timestamp: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
const [mouseState, setMouseState] = useState(initialMouseState);
|
||||||
|
|
||||||
console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState));
|
console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState));
|
||||||
|
|
||||||
|
@ -43,30 +46,28 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
|
||||||
const mouseLeaveHandler = (event: any) => {
|
const mouseLeaveHandler = (event: any) => {
|
||||||
genericHandler(event);
|
genericHandler(event);
|
||||||
// throtteledMouseMoveHandler.cancel();
|
// throtteledMouseMoveHandler.cancel();
|
||||||
dispatch(mouseHandlerActions.init());
|
setMouseState(initialMouseState);
|
||||||
};
|
};
|
||||||
|
|
||||||
const mouseDownHandler = (event: any) => {
|
const mouseDownHandler = (event: any) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
genericHandler(event);
|
genericHandler(event);
|
||||||
dispatch(
|
setMouseState({
|
||||||
mouseHandlerActions.set({
|
|
||||||
down: true,
|
down: true,
|
||||||
starting: { x: event.pageX, y: event.pageY },
|
starting: { x: event.pageX, y: event.pageY },
|
||||||
timestamp: Date.now(),
|
timestamp: Date.now(),
|
||||||
})
|
});
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const mouseUpHandler = (event: any) => {
|
const mouseUpHandler = (event: any) => {
|
||||||
genericHandler(event);
|
genericHandler(event);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
dispatch(mouseHandlerActions.init());
|
setMouseState(initialMouseState);
|
||||||
};
|
};
|
||||||
|
|
||||||
const mouseMoveHandler = (event: any) => {
|
const mouseMoveHandler = (event: any) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (mouseState.down && (Date.now() - mouseState.timestamp) > 50 ) {
|
if (mouseState.down && Date.now() - mouseState.timestamp > 50) {
|
||||||
genericHandler(event);
|
genericHandler(event);
|
||||||
console.log(
|
console.log(
|
||||||
`dispatch ${JSON.stringify({
|
`dispatch ${JSON.stringify({
|
||||||
|
@ -81,16 +82,14 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
dispatch(
|
setMouseState({
|
||||||
mouseHandlerActions.set({
|
|
||||||
down: true,
|
down: true,
|
||||||
starting: {
|
starting: {
|
||||||
x: event.pageX,
|
x: event.pageX,
|
||||||
y: event.pageY,
|
y: event.pageY,
|
||||||
},
|
},
|
||||||
timestamp: Date.now(),
|
timestamp: Date.now(),
|
||||||
})
|
});
|
||||||
);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -99,8 +98,6 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
|
||||||
// [mouseState.down, mouseState.starting.x, mouseState.starting.y]
|
// [mouseState.down, mouseState.starting.x, mouseState.starting.y]
|
||||||
// );
|
// );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const doubleClickHandler = (event: any) => {
|
const doubleClickHandler = (event: any) => {
|
||||||
genericHandler(event);
|
genericHandler(event);
|
||||||
dispatch(
|
dispatch(
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import { configureStore } from '@reduxjs/toolkit';
|
import { configureStore } from '@reduxjs/toolkit';
|
||||||
|
|
||||||
import slippyReducer from './slippy';
|
import slippyReducer from './slippy';
|
||||||
import mouseHandlerReducer from './mouse-handler';
|
|
||||||
|
|
||||||
const store = configureStore({
|
const store = configureStore({
|
||||||
reducer: { slippy: slippyReducer, mouseHandler: mouseHandlerReducer },
|
reducer: { slippy: slippyReducer},
|
||||||
});
|
});
|
||||||
|
|
||||||
export default store;
|
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