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

src/App.tsx

@@ -21,10 +21,9 @@ import '@ionic/react/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-import Map from './components/map/map';
+import TiledMap from './components/map/tiled-map';
 import Slippy from './components/slippy/slippy';
 import Layer from './components/slippy/layer';
-import { Fragment } from 'react';
 
 setupIonicReact();
 
@@ -32,8 +31,8 @@ const App: React.FC = () => (
   <IonApp>
     <Provider store={store}>
       <Slippy />
-       <Layer>
-        <Map />
+      <Layer>
+        <TiledMap />
       </Layer>
     </Provider>
   </IonApp>

src/components/map/map.tsx

@@ -1,72 +1,35 @@
-import react, { useMemo, useEffect } from 'react';
+import react, { useMemo, useEffect, Fragment } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { mapActions } from '../../store/map';
 import _ from 'lodash';
-import { MapState, mapActions } from '../../store/map';
-import { slippyActions } from '../../store/slippy';
-import { lat2tile, lon2tile } from '../../lib/geo';
-import Tile from './tile';
 
-import '../../theme/map.css';
-
-export const tileSize = 256;
+import Layer from '../slippy/layer';
+import Slippy from '../slippy/slippy';
+import TiledMap from './tiled-map';
 
 const Map: react.FC<{}> = (props: {}) => {
-  const dispatch = useDispatch();
-
-  const mapState = useSelector((state: { map: MapState }) => state.map);
-
-  console.log(`mapState: ${JSON.stringify(mapState)}`);
-
-  const resizeHandler = () => {
-    dispatch(mapActions.resize());
-  };
-  const debouncedResizeHandler = useMemo(
-    () => _.debounce(resizeHandler, 500),
-    []
-  );
-
-  useEffect(() => {
-    window.addEventListener('resize', debouncedResizeHandler);
-  }, []);
-
-  const nbTilesY = _.ceil(mapState.viewport.height / tileSize) + 3;
-  const nbTilesX = _.ceil(mapState.viewport.width / tileSize) + 3;
-  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;
-
-  dispatch(slippyActions.set({ scale: 1, translation: { x: deltaX, y: deltaY } }));
+    const dispatch = useDispatch();
+    
+    const resizeHandler = () => {
+        dispatch(mapActions.resize());
+      };
+      const debouncedResizeHandler = useMemo(
+        () => _.debounce(resizeHandler, 500),
+        []
+      );
+    
+      useEffect(() => {
+        window.addEventListener('resize', debouncedResizeHandler);
+      }, []);
+    
 
   return (
-    <div className='tiles'>
-      {_.range(nbTilesY).map((iy) => (
-        <div key={'y' + iy} className='tilesRow'>
-          {_.range(nbTilesX).map((ix) => (
-            <Tile
-              key={'x' + ix + 'y' + iy}
-              iy={iy}
-              ix={ix}
-              x={firstTileX + ix}
-              y={firstTileY + iy}
-              zoom={mapState.scope.zoom}
-            />
-          ))}
-        </div>
-      ))}
-    </div>
+    <Fragment>
+      <Slippy />
+      <Layer>
+        <TiledMap />
+      </Layer>
+    </Fragment>
   );
 };
 

src/components/map/tile.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { tileSize } from './map';
 
 const tileProvider = (zoom: number, x: number, y: number) =>
   'https://tile.openstreetmap.org/' + zoom + '/' + x + '/' + y + '.png';

src/components/map/tiled-map.tsx

@@ -0,0 +1,37 @@
+import react from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { MapState } from '../../store/map';
+import Tile from './tile';
+
+import '../../theme/map.css';
+import _ from 'lodash';
+
+export const tileSize = 256;
+
+const TiledMap: react.FC<{}> = (props: {}) => {
+  const dispatch = useDispatch();
+
+  const tilesState = useSelector((state: { map: MapState }) => state.map.tiles);
+  console.log(`tilesState: ${JSON.stringify(tilesState)}`);
+
+  return (
+    <div className='tiles'>
+      {_.range(tilesState.nb.y).map((iy) => (
+        <div key={'y' + iy} className='tilesRow'>
+          {_.range(tilesState.nb.y).map((ix) => (
+            <Tile
+              key={'x' + ix + 'y' + iy}
+              iy={iy}
+              ix={ix}
+              x={tilesState.first.x + ix}
+              y={tilesState.first.y + iy}
+              zoom={tilesState.zoom}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TiledMap;

src/components/slippy/double-touch-handler.tsx

@@ -1,9 +1,7 @@
-import react, { useCallback, useState } from 'react';
+import react, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import _ from 'lodash';
-
-import { slippyActions } from '../../store/slippy';
+import { mapActions } from '../../store/map';
 
 interface DoubleTouchHandlerProps {
   children: any;
@@ -100,13 +98,13 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
           y: (event.touches[0].pageY + event.touches[1].pageY) / 2,
         };
         dispatch(
-          slippyActions.scale({
+          mapActions.scale({
             factor: factor,
             center: currentCenter,
           })
         );
         dispatch(
-          slippyActions.translate({
+          mapActions.shift({
             x: currentCenter.x - previousCenter.x,
             y: currentCenter.y - previousCenter.y,
           })

src/components/slippy/layer.tsx

@@ -1,7 +1,6 @@
 import react from 'react';
 import { useSelector } from 'react-redux';
-
-import { SlippyState } from '../../store/slippy';
+import { MapState } from '../../store/map';
 
 import '../../theme/layer.css';
 
@@ -9,7 +8,7 @@ const Layer: react.FC<{
   children?: JSX.Element;
 }> = (props: { children?: JSX.Element }) => {
   const slippyState = useSelector(
-    (state: { slippy: SlippyState }) => state.slippy
+    (state: { map: MapState }) => state.map.slippy
   );
   console.log(
     `--- Rendering layer, slippyState: ${JSON.stringify(slippyState)} ---`

src/components/slippy/mouse-handler.tsx

@@ -1,9 +1,8 @@
 import react, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import _ from 'lodash';
+import { mapActions } from '../../store/map';
 
-import { slippyActions } from '../../store/slippy';
 
 interface MouseHandlerProps {
   children: any;
@@ -14,12 +13,6 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
 ) => {
   const dispatch = useDispatch();
 
-  interface MouseState {
-    down: boolean;
-    starting: { x: number; y: number };
-    timestamp: number;
-  }
-
   const initialMouseState = {
     down: false,
     starting: { x: -1, y: -1 },
@@ -76,7 +69,7 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
         })}`
       );
       dispatch(
-        slippyActions.translate({
+        mapActions.shift({
           x: event.pageX - mouseState.starting.x,
           y: event.pageY - mouseState.starting.y,
         })
@@ -101,7 +94,7 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
   const doubleClickHandler = (event: any) => {
     genericHandler(event);
     dispatch(
-      slippyActions.scale({
+      mapActions.scale({
         factor: 2,
         center: { x: event.pageX, y: event.pageY },
       })

src/components/slippy/single-touch-handler.tsx

@@ -1,9 +1,7 @@
-import react, { useCallback, useState } from 'react';
+import react, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import _ from 'lodash';
-
-import { slippyActions } from '../../store/slippy';
+import { mapActions } from '../../store/map';
 
 interface SingleTouchHandlerProps {
   children: any;
@@ -39,7 +37,6 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
 
   const touchCancelHandler = (event: any) => {
     genericHandler(event);
-    throtteledTouchMoveHandler.cancel();
     setTouchState(initialTouchState);
   };
 
@@ -59,16 +56,18 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
     genericHandler(event);
     //  event.preventDefault();
     setTouchState(initialTouchState);
-    throtteledTouchMoveHandler.cancel();
   };
 
   const touchMoveHandler = (event: any) => {
     //  event.preventDefault();
-    if (touchState.state === 'pointer' && (Date.now() - touchState.timestamp) > 50) {
+    if (
+      touchState.state === 'pointer' &&
+      Date.now() - touchState.timestamp > 50
+    ) {
       if (event.touches.length === 1) {
         genericHandler(event);
         dispatch(
-          slippyActions.translate({
+          mapActions.shift({
             x: event.touches[0].pageX - touchState.touch.x,
             y: event.touches[0].pageY - touchState.touch.y,
           })
@@ -85,11 +84,6 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
     }
   };
 
-  const throtteledTouchMoveHandler = useCallback(
-    _.throttle(touchMoveHandler, 100),
-    [touchState.state]
-  );
-
   return (
     <div
       className='viewport single-touch-handler'

src/components/slippy/slippy.tsx

@@ -1,22 +1,24 @@
 import react from 'react';
 
 import MouseHandler from './mouse-handler';
-
-import '../../theme/slippy.css';
 import SingleTouchHandler from './single-touch-handler';
 import DoubleTouchHandler from './double-touch-handler';
 import WheelHandler from './wheel-handler';
 import { useSelector } from 'react-redux';
 import { MapState } from '../../store/map';
 
+import '../../theme/slippy.css';
+
 
 const Slippy: react.FC<{}> = () => {
   //console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
 
-  const viewport = useSelector(
-    (state: { map: MapState }) => state.map.viewport
+  const slippyState = useSelector(
+    (state: { map: MapState }) => state.map.slippy
   );
 
+  console.log(`slippyState: ${JSON.stringify(slippyState)}`);
+
   return (
     <div className='slippy'>
       <MouseHandler>
@@ -26,8 +28,8 @@ const Slippy: react.FC<{}> = () => {
               <div
                 style={{
                   position: 'fixed',
-                  width: viewport.width + 'px',
-                  height: viewport.height + 'px',
+                  width: window.innerWidth + 'px',
+                  height: window.innerHeight + 'px',
                 }}
               />
             </WheelHandler>

src/components/slippy/wheel-handler.tsx

@@ -2,8 +2,8 @@ import react, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import _ from 'lodash';
+import { mapActions } from '../../store/map';
 
-import { slippyActions } from '../../store/slippy';
 
 interface WheelHandlerProps {
   children: any;
@@ -46,7 +46,7 @@ const WheelHandler: react.FC<WheelHandlerProps> = (
       Date.now() - wheelState.timestamp > 100
     ) {
       dispatch(
-        slippyActions.scale({
+        mapActions.scale({
           factor: event.deltaY > 0 ? 2 : 0.5,
           center: { x: event.pageX, y: event.pageY },
         })

src/lib/geo.ts

@@ -1,4 +1,3 @@
-
 export interface Point {
   x: number;
   y: number;
@@ -11,21 +10,18 @@ export interface geoPoint {
 
 // cf https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_(JavaScript/ActionScript,_etc.)
 export const lon2tile = (lon: number, zoom: number) => {
-  const real = ((lon + 180) / 360) * Math.pow(2, zoom);
-  const floor = Math.floor(real);
-  return [floor, real - floor];
+  return ((lon + 180) / 360) * Math.pow(2, zoom);
 };
 export const lat2tile = (lat: number, zoom: number) => {
-  const real =
+  return (
     ((1 -
       Math.log(
         Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)
       ) /
         Math.PI) /
       2) *
-    Math.pow(2, zoom);
-  const floor = Math.floor(real);
-  return [floor, real - floor];
+    Math.pow(2, zoom)
+  );
 };
 
 export function tile2long(x: number, z: number) {

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;