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

This commit is contained in:
Eric van der Vlist 2022-09-13 18:17:08 +02:00
parent fd79fba51f
commit db0761efd1
14 changed files with 193 additions and 183 deletions

View File

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

View File

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

View File

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

View File

@ -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;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,36 +1,112 @@
import { createSlice } from '@reduxjs/toolkit'; 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 { // Top level properties (the other properties can be derived from them)
viewport: {
width: number; // The map itself
height: number; export interface MapScope {
}; center: geoPoint;
scope: { zoom: number;
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 = { // Properties needed to render the slippy viewport
viewport: { export interface SlippyState {
width: window.innerWidth, scale: number;
height: window.innerHeight, translation: Point;
}, }
scope: {
center: { lat: -37.8372, lon: 77.5513 }, // Global state
zoom: 13, 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({ const mapSlice = createSlice({
name: 'map', name: 'map',
initialState: initialMapState, initialState: initialMapState,
reducers: { reducers: {
resize: (state) => { resize: (state) => {
state.viewport.height = window.innerHeight; return computeStateFromScope(state.scope);
state.viewport.width = window.innerWidth;
}, },
shift: (state, action) => {},
scale: (state, action) => {},
}, },
}); });

View File

@ -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;