Refactoring (in progress) to put most of the logic in Redux reducers.

src/store/index.ts

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

src/store/map.ts

@@ -1,36 +1,112 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { geoPoint } from '../lib/geo';
+import _ from 'lodash';
+import { tileSize } from '../components/map/tiled-map';
+import { geoPoint, Point, lon2tile, lat2tile } from '../lib/geo';
 
-export interface MapState {
-  viewport: {
-    width: number;
-    height: number;
-  };
-  scope: {
-    center: geoPoint;
-    zoom: number;
-  };
+// Top level properties (the other properties can be derived from them)
+
+// The map itself
+export interface MapScope {
+  center: geoPoint;
+  zoom: number;
+}
+const initialMapScope: MapScope = {
+  center: { lat: -37.8372, lon: 77.5513 },
+  zoom: 13,
+};
+
+// Derived properties
+
+// Properties needed to render the tiled map
+export interface TilesDescription {
+  nb: Point;
+  first: Point;
+  zoom: number;
 }
 
-const initialMapState: MapState = {
-  viewport: {
-    width: window.innerWidth,
-    height: window.innerHeight,
-  },
-  scope: {
-    center: { lat: -37.8372, lon: 77.5513 },
-    zoom: 13,
-  },
+// Properties needed to render the slippy viewport
+export interface SlippyState {
+  scale: number;
+  translation: Point;
+}
+
+// Global state
+export interface MapState {
+  scope: MapScope;
+  tiles: TilesDescription;
+  slippy: SlippyState;
+}
+/*
+
+const nbTilesY = _.ceil(mapState.viewport.height / tileSize) + 4;
+  const nbTilesX = _.ceil(mapState.viewport.width / tileSize) + 4;
+  const [tileCenterY, reminderY] = lat2tile(
+    mapState.scope.center.lat,
+    mapState.scope.zoom
+  );
+  const [tileCenterX, reminderX] = lon2tile(
+    mapState.scope.center.lon,
+    mapState.scope.zoom
+  );
+  const firstTileY = tileCenterY - _.round(nbTilesY / 2);
+  const firstTileX = tileCenterX - _.round(nbTilesX / 2);
+  const locationY = (tileCenterY + reminderY - firstTileY) * tileSize;
+  const locationX = (tileCenterX + reminderX - firstTileX) * tileSize;
+  const targetLocationY = mapState.viewport.height / 2;
+  const targetLocationX = mapState.viewport.width / 2;
+  const deltaY = targetLocationY - locationY;
+  const deltaX = targetLocationX - locationX;
+
+
+*/
+
+const computeStateFromScope = (scope: MapScope) => {
+  const newScope = _.cloneDeep(scope);
+  let state: MapState = {} as MapState;
+  state.scope = newScope;
+  state.tiles = {} as TilesDescription;
+  state.slippy = {} as SlippyState;
+  state.tiles.nb = {
+    x: _.ceil(window.innerWidth / tileSize + 4),
+    y: _.ceil(window.innerHeight / tileSize + 4),
+  };
+  state.tiles.zoom = _.round(state.scope.zoom);
+  const tilesCenter: Point = {
+    x: lon2tile(state.scope.center.lon, state.tiles.zoom),
+    y: lat2tile(state.scope.center.lat, state.tiles.zoom),
+  };
+  state.tiles.first = {
+    x: _.floor(tilesCenter.x - state.tiles.nb.x / 2),
+    y: _.floor(tilesCenter.y - state.tiles.nb.y / 2),
+  };
+  const tilesCenterTargetLocation: Point = {
+    x: window.innerWidth / 2,
+    y: window.innerHeight / 2,
+  };
+  const tilesCenterActualLocation: Point = {
+    x: (tilesCenter.x - state.tiles.first.x) * tileSize,
+    y: (tilesCenter.y - state.tiles.first.y) * tileSize,
+  };
+  state.slippy.translation = {
+    x: tilesCenterTargetLocation.x - tilesCenterActualLocation.x,
+    y: tilesCenterTargetLocation.y - tilesCenterActualLocation.y,
+  };
+  state.slippy.scale = 1;
+
+  return state;
 };
 
+const initialMapState: MapState = computeStateFromScope(initialMapScope);
+
 const mapSlice = createSlice({
   name: 'map',
   initialState: initialMapState,
   reducers: {
     resize: (state) => {
-      state.viewport.height = window.innerHeight;
-      state.viewport.width = window.innerWidth;
+      return computeStateFromScope(state.scope);
     },
+    shift: (state, action) => {},
+    scale: (state, action) => {},
   },
 });
 

src/store/slippy.ts

@@ -1,45 +0,0 @@
-import { actionSheetController } from '@ionic/core';
-import { createSlice } from '@reduxjs/toolkit';
-
-import { Point } from '../lib/geo';
-
-export interface SlippyState {
-  scale: number;
-  translation: Point;
-}
-
-const initialSlippyState: SlippyState = {
-  scale: 1,
-  translation: { x: 0, y: 0 },
-};
-
-const slippySlice = createSlice({
-  name: 'slippy',
-  initialState: initialSlippyState,
-  reducers: {
-    scale: (state, action) => {
-      console.log(`redux scale: ${JSON.stringify(action.payload)}`);
-      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(`redux translate: action=${JSON.stringify(action)}`);
-      state.translation.x = state.translation.x + action.payload.x;
-      state.translation.y = state.translation.y + action.payload.y;
-    },
-    set: (state, action) => {
-      return action.payload;
-    },
-  },
-});
-
-export const slippyActions = slippySlice.actions;
-
-export default slippySlice.reducer;