diff --git a/src/components/mouse-handler.tsx b/src/components/mouse-handler.tsx index 52e7ec3..1736b78 100644 --- a/src/components/mouse-handler.tsx +++ b/src/components/mouse-handler.tsx @@ -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 = ( 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 = ( 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 = ( }) ); - 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 = ( // [mouseState.down, mouseState.starting.x, mouseState.starting.y] // ); - - const doubleClickHandler = (event: any) => { genericHandler(event); dispatch( diff --git a/src/store/index.ts b/src/store/index.ts index 4ce069e..68331ba 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -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; diff --git a/src/store/mouse-handler.ts b/src/store/mouse-handler.ts deleted file mode 100644 index d9631e5..0000000 --- a/src/store/mouse-handler.ts +++ /dev/null @@ -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; \ No newline at end of file