From 77f5ab3996537525af9b5c57887e17c6d54e9aca Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sat, 8 Oct 2022 20:45:44 +0200
Subject: [PATCH] Storing window's innerheight and innerwidth in redux' state
 to make it easier to follow for components.

---
 src/components/map/Reticle.tsx    | 11 +++++++++--
 src/components/map/whiteboard.tsx |  7 +++++--
 src/store/map.ts                  | 14 ++++++++++++++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/map/Reticle.tsx b/src/components/map/Reticle.tsx
index 0023710..1b98642 100644
--- a/src/components/map/Reticle.tsx
+++ b/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>
diff --git a/src/components/map/whiteboard.tsx b/src/components/map/whiteboard.tsx
index a347e38..cb096b8 100644
--- a/src/components/map/whiteboard.tsx
+++ b/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}
-      height={window.innerHeight}
+      width={windowState.width}
+      height={windowState.height}
       className='whiteboard'
     >
       {props.fixedChildren}
diff --git a/src/store/map.ts b/src/store/map.ts
index c8d4447..939f873 100644
--- a/src/store/map.ts
+++ b/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) => {