Storing window's innerheight and innerwidth in redux' state to make it easier to follow for components.
This commit is contained in:
parent
e206d905b7
commit
77f5ab3996
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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) => {
|
||||
|
|
Loading…
Reference in New Issue