Storing window's innerheight and innerwidth in redux' state to make it easier to follow for components.

This commit is contained in:
Eric van der Vlist 2022-10-08 20:45:44 +02:00
parent e206d905b7
commit 77f5ab3996
3 changed files with 28 additions and 4 deletions

View File

@ -1,9 +1,16 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { Point } from '../../lib/geo';
import { MapState } from '../../store/map';
const Reticle: React.FC<{}> = () => {
const center: Point = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
const radius = Math.min(window.innerWidth, window.innerHeight) / 8;
const windowState = useSelector(
(state: { map: MapState }) => state.map.window
);
const center: Point = { x: windowState.width / 2, y: windowState.height / 2 };
const radius = Math.min(windowState.width, windowState.height) / 6;
return (
<g>

View File

@ -11,11 +11,14 @@ const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
const whiteBoardState = useSelector(
(state: { map: MapState }) => state.map.whiteboard
);
const windowState = useSelector(
(state: { map: MapState }) => state.map.window
);
return (
<svg
width={window.innerWidth}
height={window.innerHeight}
width={windowState.width}
height={windowState.height}
className='whiteboard'
>
{props.fixedChildren}

View File

@ -55,6 +55,13 @@ export interface CurrentLocationState {
whiteboard: Point;
}
// Window
export interface WindowState {
width: number;
height: number;
}
// Global state
export interface MapState {
scope: MapScope;
@ -62,6 +69,7 @@ export interface MapState {
slippy: SlippyState;
whiteboard: WhiteboardState;
currentLocation: CurrentLocationState;
window: WindowState;
}
export var initialMapState: MapState = {
scope: initialMapScope,
@ -100,6 +108,10 @@ export var initialMapState: MapState = {
y: 0,
},
},
window: {
height: window.innerHeight,
width: window.innerWidth
}
};
const evaluateWhiteboardViewBox = (
@ -220,6 +232,8 @@ const mapSlice = createSlice({
}
},
resize: (state) => {
state.window.height = window.innerHeight;
state.window.width = window.innerWidth;
evaluateStateFromScope(state);
},
setCenter: (state, action) => {