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

src/components/map/Reticle.tsx

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

src/components/map/whiteboard.tsx

@@ -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}
+      width={windowState.width}
-      height={window.innerHeight}
+      height={windowState.height}
       className='whiteboard'
     >
       {props.fixedChildren}

src/store/map.ts

@@ -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) => {