diff --git a/README.md b/README.md index 36cc5a3..bbb6b9e 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,15 @@ # Dyomedea -Application de randonnée +## Hiking app. + +## Components + +### Slippy + +The viewport on the underlying map + +### Map + +The map itself (and its overlays) + + diff --git a/src/App.tsx b/src/App.tsx index 8181f93..8a4ce35 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,14 +21,20 @@ import '@ionic/react/css/display.css'; /* Theme variables */ import './theme/variables.css'; -import Map from './components/map'; +import Map from './components/map/map'; +import Slippy from './components/slippy'; +import Layer from './components/slippy/layer'; +import { Fragment } from 'react'; setupIonicReact(); const App: React.FC = () => ( - + + + + ); diff --git a/src/components/map.tsx b/src/components/map.tsx deleted file mode 100644 index 7b7c584..0000000 --- a/src/components/map.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import react from 'react'; -import Slippy from './slippy/index'; - -const Map: react.FC<{}> = (props: {}) => { - return ( - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - ); -}; - -export default Map; diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx new file mode 100644 index 0000000..20ed805 --- /dev/null +++ b/src/components/map/map.tsx @@ -0,0 +1,109 @@ +import react, { useMemo, useEffect } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import _ from 'lodash'; +import { MapState, mapActions } from '../../store/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); + }, []); + + return ( +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ ); +}; + +export default Map; diff --git a/src/components/slippy/index.tsx b/src/components/slippy/index.tsx index 1374db8..df2ee47 100644 --- a/src/components/slippy/index.tsx +++ b/src/components/slippy/index.tsx @@ -1,12 +1,12 @@ import react from 'react'; -import { useSelector } from 'react-redux'; import MouseHandler from './mouse-handler'; -import Layer from './layer'; import '../../theme/slippy.css'; import SingleTouchHandler from './single-touch-handler'; import DoubleTouchHandler from './double-touch-handler'; +import { useSelector } from 'react-redux'; +import { MapState } from '../../store/map'; export interface Point { x: number; @@ -24,19 +24,25 @@ export interface Scale { }; } -interface ViewportProps { - children: any; -} - -const Slippy: react.FC = (props: ViewportProps) => { +const Slippy: react.FC<{}> = () => { //console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`); + const viewport = useSelector( + (state: { map: MapState }) => state.map.viewport + ); + return (
- {props.children} +
diff --git a/src/components/slippy/mouse-handler.tsx b/src/components/slippy/mouse-handler.tsx index 3f320f3..1a10f29 100644 --- a/src/components/slippy/mouse-handler.tsx +++ b/src/components/slippy/mouse-handler.tsx @@ -1,5 +1,5 @@ -import react, { useCallback, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import react, { useState } from 'react'; +import { useDispatch } from 'react-redux'; import _ from 'lodash'; diff --git a/src/store/index.ts b/src/store/index.ts index 68331ba..d13a2b7 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,9 +1,10 @@ import { configureStore } from '@reduxjs/toolkit'; import slippyReducer from './slippy'; +import mapReducer from './map'; const store = configureStore({ - reducer: { slippy: slippyReducer}, + reducer: { slippy: slippyReducer, map: mapReducer }, }); export default store; diff --git a/src/store/map.ts b/src/store/map.ts new file mode 100644 index 0000000..bcf4a84 --- /dev/null +++ b/src/store/map.ts @@ -0,0 +1,30 @@ +import { createSlice } from '@reduxjs/toolkit'; + +export interface MapState { + viewport: { + width: number; + height: number; + }; +} + +const initialMapState: MapState = { + viewport: { + width: window.innerWidth, + height: window.innerHeight, + }, +}; + +const mapSlice = createSlice({ + name: 'map', + initialState: initialMapState, + reducers: { + resize: (state) => { + state.viewport.height = window.innerHeight; + state.viewport.width = window.innerWidth; + }, + }, +}); + +export const mapActions = mapSlice.actions; + +export default mapSlice.reducer; diff --git a/src/theme/slippy.css b/src/theme/slippy.css index 8797080..50694f9 100644 --- a/src/theme/slippy.css +++ b/src/theme/slippy.css @@ -1,11 +1,9 @@ .slippy { - position: fixed; - width: 100%; - height: 100%; + position: fixed; + width: 100%; + height: 100%; } -.background img { - width: 4032px; - height: 2268px; - } - \ No newline at end of file +.huge { + position: fixed; +}