Using Redux to provide application wise slippy context.

src/store/index.ts

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

src/store/mouse-handler.ts

@@ -0,0 +1,25 @@
+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;

src/store/slippy.ts

@@ -0,0 +1,35 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { ViewportState } from '../components/viewport';
+
+const initialSlippyState: ViewportState = {
+  scale: 1,
+  translation: { x: 0, y: 0 },
+};
+
+const slippySlice = createSlice({
+  name: 'slippy',
+  initialState: initialSlippyState,
+  reducers: {
+    scale(state, action) {
+      state.scale = state.scale * action.payload.factor;
+      state.translation.x =
+        state.translation.x +
+        (state.translation.x - action.payload.center.x) *
+          (action.payload.factor - 1);
+      state.translation.y =
+        state.translation.y +
+        (state.translation.y - action.payload.center.y) *
+          (action.payload.factor - 1);
+    },
+    translate(state, action) {
+      console.log(`translate: action=${JSON.stringify(action)}`);
+      state.translation.x = state.translation.x + action.payload.x;
+      state.translation.y = state.translation.y + action.payload.y;
+    },
+  },
+});
+
+export const slippyActions = slippySlice.actions;
+
+export default slippySlice.reducer;